81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
|
||
<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>
|