PA调整
This commit is contained in:
fan
parent
847b80e9d9
commit
5f014536cf
BIN
src/assets/iscs_icon/music_icon.png
Normal file
BIN
src/assets/iscs_icon/music_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="position: absolute; left: 48%; top: 15%;font-size: 20px;color: #9EEBEF;">语音广播</div>
|
||||
<div class="area-selection">
|
||||
<el-row><div style="margin-top: 10px;margin-bottom: 5px; color: #9EEBEF;">特定区域</div></el-row>
|
||||
<el-row><div class="area-selection-button">全线</div></el-row>
|
||||
@ -11,28 +12,118 @@
|
||||
<el-row><div class="area-selection-button">全换乘通道</div></el-row>
|
||||
</div>
|
||||
<div class="broadcast-form">
|
||||
<div v-for="item in verticalHeader">
|
||||
<el-row>
|
||||
<el-col :span="4"><div style="text-align: left; padding-left: 10px ">{{ item.name }}</div></el-col>
|
||||
<div v-for="it in stationList">
|
||||
<el-col :span="2">
|
||||
<div v-if="item.type==='header'">
|
||||
<div>{{ it }}</div>
|
||||
<div v-for="item in verticalHeader" :style="{width: tableWidth+'px'}" class="iscs-pa-table">
|
||||
<div class="left-header">{{ item.name }}</div>
|
||||
<div style="position: relative; left: 5%;">
|
||||
<div v-for="it in stationList" class="table-grid">
|
||||
<div v-if="item.type==='header'" class="pa-table-header">
|
||||
<div>{{ it }}</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="pa-table-content">
|
||||
<div class="pa-table-content-inside" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div style="margin:0 auto;height: 10px;width: 10px;background: #FBFBFB" />
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="broadcast-mode">
|
||||
<el-row>
|
||||
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">实时广播</div></el-col>
|
||||
<el-col :span="12"><div class="broadcast-mode-button">广播</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="broadcast-operations">
|
||||
<el-row>
|
||||
<el-col :span="12"><div style="height: 80px;text-align: center; background: #000088;color: #fff;padding-top: 30px">预备<br>广播</div></el-col>
|
||||
<el-col :span="12">
|
||||
<div class="broadcast-mode-button">
|
||||
<div class="pa-check-box" />
|
||||
<div style="position: relative; left: 5px;display: inline-block;">普通预录</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="broadcast-mode-button">
|
||||
<div class="pa-check-box" style="background: #CDCDCD;" />
|
||||
<div style="position: relative; left: 5px;display: inline-block; color: #f00;">紧急预录</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding-bottom: 10px">
|
||||
<el-col :span="12">
|
||||
<div class="broadcast-mode-button">广播内容</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="broadcast-mode-button">广播停止</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="background-music">
|
||||
<el-row>
|
||||
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">背景音乐</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="padding-bottom: 10px">
|
||||
<el-col :span="12"><div class="broadcast-mode-button">播放音乐</div></el-col>
|
||||
<el-col :span="12"><div class="broadcast-mode-button">停止音乐</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="pa-grey-box" />
|
||||
<div class="pa-statements">
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #CCCCCC;color: #000; text-align: center">1</div></el-col>
|
||||
<el-col :span="9"><div>没有占用</div></el-col>
|
||||
<el-col :span="3"><div style="background: #887711;color: #000; text-align: center">7</div></el-col>
|
||||
<el-col :span="9"><div>总调话筒口播</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #FF0000;color: #000; text-align: center">2</div></el-col>
|
||||
<el-col :span="9"><div>车站消防广播</div></el-col>
|
||||
<el-col :span="3"><div style="background: #006600;color: #000; text-align: center">8</div></el-col>
|
||||
<el-col :span="9"><div>行调话筒口播</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #880000;color: #000; text-align: center">3</div></el-col>
|
||||
<el-col :span="9"><div>联动消防广播</div></el-col>
|
||||
<el-col :span="3"><div style="background: #778877;color: #000; text-align: center">9</div></el-col>
|
||||
<el-col :span="9"><div>中心普通语录</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #0000FF;color: #000; text-align: center">5</div></el-col>
|
||||
<el-col :span="9"><div>环调话筒广播</div></el-col>
|
||||
<el-col :span="3"><div style="background: #555454;color: #000; text-align: center">11</div></el-col>
|
||||
<el-col :span="9"><div>车站普通语录</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #554488;color: #000; text-align: center">6</div></el-col>
|
||||
<el-col :span="9"><div>中心紧急语录</div></el-col>
|
||||
<el-col :span="3"><div style="background: #556688;color: #000; text-align: center">12</div></el-col>
|
||||
<el-col :span="9"><div>ATS预录</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #44CC55;color: #000; text-align: center">6</div></el-col>
|
||||
<el-col :span="9"><div>车站话筒口播</div></el-col>
|
||||
<el-col :span="3"><div style="background: #887711;color: #000; text-align: center">12</div></el-col>
|
||||
<el-col :span="9"><div>故障</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div style="background: #FF00FF;color: #000; text-align: center">7</div></el-col>
|
||||
<el-col :span="9"><div>车站紧急语录</div></el-col>
|
||||
<el-col :span="3"><div style="background: #115577;color: #000; text-align: center">13</div></el-col>
|
||||
<el-col :span="9"><div>设备通讯失败</div></el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 10px" :gutter="10">
|
||||
<el-col :span="3"><div><img style="width: 15px;" :src="musicIcon"></div></el-col>
|
||||
<el-col :span="9"><div>背景音乐</div></el-col>
|
||||
<el-col :span="3"><div style="background: #FFFFFF;width: 22px;height: 13px;"><div class="pa-check-box-small" /></div></el-col>
|
||||
<el-col :span="9"><div>被选择</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MusicIcon from '@/assets/iscs_icon/music_icon.png';
|
||||
export default {
|
||||
name: 'HomeScreen',
|
||||
data() {
|
||||
@ -46,8 +137,14 @@ export default {
|
||||
{name: '办公区', type: 'checkBox'},
|
||||
{name: '换乘通道', type: 'checkBox'}
|
||||
],
|
||||
musicIcon: MusicIcon,
|
||||
stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableWidth() {
|
||||
return this.stationList.length * 120 + 80;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -83,9 +180,160 @@ export default {
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
width: 80%;
|
||||
height: 40%;
|
||||
top: 200px;
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
overflow-x: auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.table-grid{
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.left-header{
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
color: #A2E8EB;
|
||||
position:fixed;
|
||||
left: 7.15%;
|
||||
background: #45607B;
|
||||
z-index: 10;
|
||||
}
|
||||
.pa-table-header{
|
||||
background: #cccccc;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.pa-table-content{
|
||||
margin:0 auto;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: #D4D4D4;
|
||||
display: inline-block;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.pa-table-content-inside{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: auto;
|
||||
background:#CCCCCC;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.pa-grey-box{
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
top: 64%;
|
||||
width: 81%;
|
||||
height: 30%;
|
||||
background: #DDDDDD;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
.pa-statements{
|
||||
position: absolute;
|
||||
left: 86%;
|
||||
top: 64%;
|
||||
width: 13%;
|
||||
height: 30%;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.broadcast-mode{
|
||||
position: absolute;
|
||||
left: 88%;
|
||||
top: 25%;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
width: 11%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.broadcast-mode-button{
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background: #CCCCCC;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 85%;
|
||||
left: 5%;
|
||||
line-height: 28px;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.broadcast-operations{
|
||||
position: absolute;
|
||||
left: 88%;
|
||||
top: 32%;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
width: 11%;
|
||||
font-size: 12px;
|
||||
background: #778899;
|
||||
}
|
||||
.pa-check-box{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #2EFF74;
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.pa-check-box-small{
|
||||
position: relative;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 10px;
|
||||
height:9px;
|
||||
background: #27FF27;
|
||||
border-top: 1px solid #FFF;
|
||||
border-left: 1px solid #FFF;
|
||||
border-right: 1px solid #898888;
|
||||
border-bottom: 1px solid #898888;
|
||||
}
|
||||
.background-music{
|
||||
position: absolute;
|
||||
left: 88%;
|
||||
top: 48%;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
width: 11%;
|
||||
font-size: 12px;
|
||||
background: #778899;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user