fiscs 闭路电视车站时序页面修改
This commit is contained in:
joylink_cuiweidong
parent
1db679509f
commit
28294ceb2f
@ -5,11 +5,14 @@
|
||||
<div class="time-cctv-top-inner">
|
||||
<div class="time-cctv-top-lefttop">选择显示终端</div>
|
||||
<div class="time-cctv-top-left1">
|
||||
<div class="each-time-cctv-top-btn">单画面</div>
|
||||
<div class="each-time-cctv-top-btn">站厅<br/>默认画面</div>
|
||||
<div class="each-time-cctv-top-btn active">四画面</div>
|
||||
<div class="each-time-cctv-top-btn">站台<br/>默认画面</div>
|
||||
<div class="each-time-cctv-top-btn">大屏</div>
|
||||
<div style="display: inline-block;">
|
||||
<div class="each-time-cctv-top-btn">单画面</div>
|
||||
<div class="each-time-cctv-top-btn">站厅<br/>默认画面</div>
|
||||
<div class="each-time-cctv-top-btn active">四画面</div>
|
||||
<div class="each-time-cctv-top-btn">站台<br/>默认画面</div>
|
||||
<div class="each-time-cctv-top-btn">大屏</div>
|
||||
</div>
|
||||
<div class="each-time-cctv-top-btn1">停止时序</div>
|
||||
</div>
|
||||
<div class="time-cctv-top-right1">
|
||||
<div class="time-cctv-top-right1-line">
|
||||
@ -46,19 +49,84 @@
|
||||
header-cell-class-name="time_cctv_thead"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
style="width: 100%;overflow-y:auto;border: none;"
|
||||
height="260px"
|
||||
>
|
||||
<el-table-column
|
||||
label="编号"
|
||||
type="index"
|
||||
:index="indexMethod"
|
||||
width="40"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="describe"
|
||||
label="描述"
|
||||
/>
|
||||
</el-table>
|
||||
<div class="time-cctv-content-btn1">启动时序</div>
|
||||
<div class="time-cctv-content-btn1Out">
|
||||
<div class="time-cctv-content-btn1">启动时序</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-cctv-content-bottomR">
|
||||
<div class="time-cctv-content-bottomRT">车站可编辑时序列表</div>
|
||||
<div class="time-cctv-content-bottomRTB">
|
||||
<div class="time-cctv-content-bottomRTBL">
|
||||
<el-table
|
||||
cell-class-name="time_cctv_column"
|
||||
header-cell-class-name="time_cctv_thead"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%;overflow-y:auto;border: none;"
|
||||
height="260px"
|
||||
>
|
||||
<el-table-column
|
||||
label="编号"
|
||||
type="index"
|
||||
:index="indexMethod"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="describe"
|
||||
label="描述"
|
||||
/>
|
||||
</el-table>
|
||||
<div class="time-cctv-content-btn1Out">
|
||||
<div class="time-cctv-content-btn1">启动时序</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-cctv-content-bottomRTBR">
|
||||
<div class="time-cctv-content-bottomRTBRtitle">可编辑序列内容</div>
|
||||
<div class="time-cctv-content-bottomRTBRt1">
|
||||
<div class="time-cctv-content-bottomRTBRlabel1">序列编号</div>
|
||||
<input type="text" class="time-cctv-content-bottomRTBRtext">
|
||||
</div>
|
||||
<div class="time-cctv-content-bottomRTBRt1">
|
||||
<div class="time-cctv-content-bottomRTBRlabel1">序列描述</div>
|
||||
<input type="text" class="time-cctv-content-bottomRTBRtext">
|
||||
</div>
|
||||
<el-table
|
||||
cell-class-name="time_cctv_column"
|
||||
header-cell-class-name="time_cctv_thead1"
|
||||
: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="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="describe"
|
||||
label="时间（秒）"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-cctv-content-bottomR"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-cctv-bottom">
|
||||
@ -77,7 +145,19 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData:[
|
||||
{describe:''},
|
||||
{describe:''}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
indexMethod(index) {
|
||||
return index + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -130,6 +210,23 @@ justify-content:center;text-align:center;
|
||||
cursor: pointer;
|
||||
font-weight:bold;
|
||||
}
|
||||
.each-time-cctv-top-btn1{
|
||||
margin-left:10px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
width:65px;
|
||||
height:40px;font-size:12px;
|
||||
background:#ef8634;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
border-top: 2px solid #fefbfe;
|
||||
border-left: 2px solid #e7d9e5;
|
||||
border-right: 2px solid #a85321;
|
||||
border-bottom: 2px solid #502b53;
|
||||
cursor: pointer;
|
||||
font-weight:bold;
|
||||
margin-top:10px;
|
||||
}
|
||||
.each-time-cctv-top-btn.active{
|
||||
background: #EBB570;
|
||||
border-top: 2px solid #795B31;
|
||||
@ -211,16 +308,86 @@ justify-content:center;text-align:center;
|
||||
padding: 5px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.time-cctv-content-bottom{display:flex;}
|
||||
.time-cctv-content-bottom{display:flex;padding-bottom:10px;}
|
||||
.time-cctv-content-bottomL{
|
||||
width: 300px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.time_cctv_column{}
|
||||
.time_cctv_thead{}
|
||||
.time-cctv-content-btn1{}
|
||||
.time-cctv-content-bottomR{}
|
||||
.time-cctv-content-bottomLT{text-align:center;color:#56E5DE;font-size:13px;margin-top:5px;
|
||||
.time-cctv-content-btn1Out{background:#000077;padding-top:10px;padding-bottom:10px;display: inline-block;
|
||||
width: 100%;}
|
||||
.time-cctv-content-btn1{color:#000;font-size:12px;padding:8px 0px;
|
||||
width:60px;text-align:center;
|
||||
background: #ef8634;
|
||||
margin-right:10px;
|
||||
border-top: 2px solid #fefbfe;
|
||||
border-left: 2px solid #e7d9e5;
|
||||
border-right: 2px solid #a85321;
|
||||
border-bottom: 2px solid #502b53;
|
||||
font-weight:bold;
|
||||
float:right;
|
||||
}
|
||||
.time-cctv-content-bottomR{width:560px;
|
||||
margin-left:300px;
|
||||
}
|
||||
.time-cctv-content-bottomLT{text-align:center;color:#56E5DE;
|
||||
font-size:13px;
|
||||
margin-top:5px;font-weight:bold;
|
||||
margin-bottom: 5px;}
|
||||
.time-cctv-content-bottomLB{}
|
||||
.time-cctv-content-bottomLB{
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
padding:2px;
|
||||
}
|
||||
.time-cctv-content-bottomRT{text-align:center;
|
||||
color: #56E5DE;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.time-cctv-content-bottomRTB{
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
padding:4px;
|
||||
display:flex;
|
||||
}
|
||||
.time-cctv-content-bottomRTBL{width:250px;}
|
||||
.time-cctv-content-bottomRTBR{
|
||||
margin-left: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
.time-cctv-content-bottomRTBRtitle{
|
||||
background: #000077;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding:3px 0px;
|
||||
font-size: 13px;
|
||||
width:100%;
|
||||
}
|
||||
.time-cctv-content-bottomRTBRt1{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.time-cctv-content-bottomRTBRlabel1{
|
||||
font-size: 13px;
|
||||
color: #56E5DE;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.time-cctv-content-bottomRTBRtext{
|
||||
height:20px;
|
||||
width:180px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-table .time_cctv_column .cell{font-size:12px;}
|
||||
.el-table td.time_cctv_column{padding:5px 0px;}
|
||||
.el-table .time_cctv_thead{background:#000077;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
|
||||
.el-table .time_cctv_thead1{background:#5c48f8;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user