新增策略页面

src/views/ems/dzjk/clpz/clyx/index.vue

@@ -1,21 +1,34 @@
 
 <template>
-  <div style="width:100%">
-    策略运行
-  </div>
+ <cl-container>
+   <template v-slot:default>
+     <div class="cl-items cl-items-main">
+       <div class="cl-header">主策略</div>
+       <div class="cl-content">
+         <div class="cl-name">削峰填谷</div>
+       </div>
+     </div>
+     <div class="cl-items">
+       <div class="cl-header">辅助策略</div>
+       <div class="cl-content">
+         <div class="cl-name">需量控制</div>
+       </div>
+     </div>
+   </template>
+ </cl-container>
 </template>
 
 
 <script>
+import ClContainer from './../ClContainer.vue'
 export default {
   name:'DzjkClpzClyx',
+  components:{ClContainer},
   data() {
     return {
 
     }
   },
-  methods:{
-  },
   mounted(){
 
   }
@@ -23,5 +36,44 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+  .clyx-main{
+    padding:0 12px 0 12px;
+    .cl-items{
+      width: 228px;
+      height: 156px;
+      display: inline-block;
+      margin:24px 12px 0 12px;
+      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: 114px;
+        width: 100%;
+        .cl-name{
+          position: absolute;
+          top:50%;
+          left:50%;
+          transform: translate(-50%,-50%);
+        }
+      }
+      &.cl-items-main{
+        .cl-header{
+          background:  #FFBE29;
+        }
+        .cl-content{
+          background-color: #FFF2CB;
+        }
+      }
+    }
+  }
 </style>