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

<template>
 <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'
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
export default {
  name:'DzjkClpzClyx',
  components:{ClContainer},
  mixins: [getQuerySiteId],
  data() {
    return {

    }
  },
  methods:{
    init(){}
  },
  mounted(){

  }
}
</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>