iscs 闭路电视 车站时序编辑页面

This commit is contained in:
joylink_cuiweidong 2020-02-04 19:04:29 +08:00
parent 2e7bc81e6b
commit a851a50f5a

View File

@ -1,10 +1,180 @@
<template>
<div>
车站时序编辑
<div class="edit-cctv-box">
<div class="title-name">CCTV时序编辑</div>
<div class="edit-cctv-top">
<div class="edit-cctv-top-title"></div>
<div class="edit-cctv-top-content">
<div class="edit-cctv-top-contentL">
<el-table
cell-class-name="edit_cctv_column"
header-cell-class-name="edit_cctv_thead"
:data="tableData"
border
style="width: 100%;overflow-y:auto;border:none;margin-top:10px;"
height="230px"
>
<el-table-column
label="编号"
type="index"
:index="indexMethod"
width="60"
/>
<el-table-column
prop="describe"
label="描述"
/>
</el-table>
</div>
<div class="edit-cctv-top-contentC"></div>
<div class="edit-cctv-top-contentR">
<el-table
cell-class-name="edit_cctv_column"
header-cell-class-name="edit_cctv_thead"
:data="tableData"
border
style="width: 100%;overflow-y:auto;border:none;margin-top:10px;"
height="230px"
>
<el-table-column
label="车站"
type="index"
:index="indexMethod"
width="60"
/>
<el-table-column
width="100"
prop="describe"
label="位置描述"
/>
<el-table-column
prop="describe"
label="时间(秒)"
/>
</el-table>
</div>
</div>
</div>
<div class="edit-cctv-bottom">
<div class="edit-cctv-bottom-title"></div>
<div class="edit-cctv-bottom-content">
<div class="edit-cctv-bottom-contentL"></div>
<div class="edit-cctv-bottom-contentR"></div>
</div>
<div class="edit-cctv-bottom-foot">
<div class="edit-cctv-bottom-footL">信息提示</div>
<div class="edit-cctv-bottom-footC"></div>
<div class="edit-cctv-bottom-footR">
<div class="edit-cctv-bottom-footRbtn">车站时序</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData:[
{describe:''},
{describe:''}
]
};
},
methods:{
indexMethod(index) {
return index + 1;
}
}
};
</script>
<style lang="scss" scoped>
.edit-cctv-box{
width: 100%;
height: 100%;
padding-top: 20px;
padding-bottom: 40px;
.title-name{
width: 100%;
text-align: center;
font-size: 20px;
margin-top: 30px;
color: #56E5DE;
}
}
.edit-cctv-top{width:96%;margin-left:2%;
margin-top: 10px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.edit-cctv-top-title{
height:20px;
background:#071c77;
width:100%;
}
.edit-cctv-top-content{
width:700px;
margin: 10px auto;
display:flex
}
.edit-cctv-top-contentL{
width:300px;
}
.edit-cctv-top-contentC{
width:100px;
}
.edit-cctv-top-contentR{
width:300px;
}
.edit-cctv-bottom{
width:96%;margin-left:2%;
margin-top: 10px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.edit-cctv-bottom-title{
height:20px;
background:#071c77;
width:100%;
}
.edit-cctv-bottom-foot{margin:10px 0px;display:flex;}
.edit-cctv-bottom-footL{
margin-left: 20px;
font-size: 14px;
color: #061c77;
width: 26%;
}
.edit-cctv-bottom-footC{
width: 45%;
height: 20px;
background: #fff;
}
.edit-cctv-bottom-footR{
width:27%;
font-size:12px;
}
.edit-cctv-bottom-footRbtn{margin-right:10px;float:right;
width: 80px;
font-size: 12px;
cursor: pointer;
border-top: 3px solid #f9f9f9;
border-left: 3px solid #f6f8f8;
border-right: 3px solid #565656;
padding: 2px 0px;
border-bottom: 3px solid #565656;
background: #cccccc;
text-align: center;
font-weight: bold;
}
.edit-cctv-bottom-content{}
.edit-cctv-bottom-contentL{}
.edit-cctv-bottom-contentR{}
</style>
<style lang="scss">
.el-table .edit_cctv_column .cell{font-size:12px;}
.el-table td.edit_cctv_column{padding:5px 0px;}
.el-table .edit_cctv_thead{background:#5c48f8;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
</style>