新增策略页面

src/views/ems/dzjk/clpz/xftg/TimeSetting.vue

@@ -0,0 +1,80 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
+    <div slot="header">
+      <span class="card-title">策略配置：削峰填谷</span>
+      <div style="float: right; padding: 3px 0">
+        <el-button type="warning" size="mini">编辑</el-button>
+      </div>
+    </div>
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="时间配置">
+        <el-select  v-model="timeType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="item.name" :value="item.id" v-for="(item,index) in timeOptions" :key="index+'timeOptions'"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div style="padding:0 6px 12px 6px;">
+      <div class="cl-items" v-for="item in 12" :key="item+'lclf'">
+        <div class="cl-header">{{item}}月</div>
+        <div class="cl-content">
+          <div class="cl-name">两放两冲</div>
+        </div>
+      </div>
+    </div>
+
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.cl-items{
+  width: 144px;
+  height: 90px;
+  line-height: 16px;
+  display: inline-block;
+  margin:12px 6px 0 6px;
+  font-size:14px;
+  color:#333333;
+  border: 1px solid #eeeeee;
+  .cl-header{
+    background:  #FFE5AC;
+    text-align: center;
+    font-size:16px;
+    line-height: 40px;
+    height: 40px;
+    width: 100%;
+  }
+  .cl-content{
+    background-color: #ffffff;
+    position: relative;
+    height: 48px;
+    width: 100%;
+    .cl-name{
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      loading:false,
+      timeType:1,
+      timeOptions:[
+        {name:'按日',id:1},
+        {name:'按月',id:2},
+        {name:'按年',id:3},
+      ]
+    }
+  },
+  methods:{
+  },
+  mounted(){
+
+  }
+}
+</script>