iscs调整

2020-02-03 18:20:36 +08:00 · 2020-02-03 18:20:36 +08:00 · d65e141242
commit d65e141242
parent 8606bf6e06
4 changed files with 353 additions and 63 deletions
--- a/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
@ -3,25 +3,26 @@
    <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>
-      <el-row><div class="area-selection-button">全站厅</div></el-row>
-      <el-row><div class="area-selection-button">全上行站台</div></el-row>
-      <el-row><div class="area-selection-button">全下行站台</div></el-row>
-      <el-row><div class="area-selection-button">全办公区</div></el-row>
-      <el-row><div class="area-selection-button">全出入口</div></el-row>
-      <el-row><div class="area-selection-button">全换乘通道</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedAll">全线</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('站厅')">全站厅</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('上行站台')">全上行站台</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('下行站台')">全下行站台</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('办公区')">全办公区</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('出入口')">全出入口</div></el-row>
+      <el-row><div class="area-selection-button" @click="selectedBatch('换乘通道')">全换乘通道</div></el-row>
    </div>
    <div class="broadcast-form">
-      <div v-for="item in verticalHeader" :style="{width: tableWidth+'px'}" class="iscs-pa-table">
+      <div :key="i" v-for="(item,i) 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 :key="j" v-for="(it, j) in stationList" class="table-grid">
+            <div v-if="item.type==='header'" class="pa-table-header" @click="selectedStation(it)">
+              <div style="cursor: default;">{{ it }}</div>
            </div>
            <div v-else>
-              <div class="pa-table-content">
-                <div class="pa-table-content-inside" />
+              <div class="pa-table-content" @click="clickArea(i,j)">
+                <div v-if="isSelected(i, j)" class="pa-table-content-inside-selected" />
+                  <div v-else class="pa-table-content-inside" />
              </div>
              <div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
            </div>
@ -39,20 +40,20 @@
      <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 class="broadcast-mode-button" @click="selectedVideoMode('common')">
+            <div class="pa-check-box" :style="{background: videoMode==='common'?'#2EFF74':'#CDCDCD'}"  />
            <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 class="broadcast-mode-button" @click="selectedVideoMode('emergency')">
+            <div class="pa-check-box" :style="{background: videoMode==='emergency'?'#2EFF74':'#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>
+          <div class="broadcast-mode-button" @click="showBroadcastContent">广播内容</div>
        </el-col>
        <el-col :span="12">
          <div class="broadcast-mode-button">广播停止</div>
@ -72,16 +73,19 @@
    <div class="pa-statements">
      <state-table />
    </div>
+      <voice-broadcast ref="voiceBroadcast" />
  </div>
 </template>

 <script>
 import MusicIcon from '@/assets/iscs_icon/music_icon.png';
 import StateTable from './stateTable';
+import VoiceBroadcast from './voiceBroadcast';
 export default {
    name: 'CenterHome',
    components: {
-        StateTable
+        StateTable,
+        VoiceBroadcast
    },
    data() {
        return {
@ -92,21 +96,119 @@ export default {
                {name: '上行站台', type: 'checkBox'},
                {name: '下行站台', type: 'checkBox'},
                {name: '办公区', type: 'checkBox'},
+                {name: '出入口', type: 'checkBox'},
                {name: '换乘通道', type: 'checkBox'}
            ],
            musicIcon: MusicIcon,
-            stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站']
+            selectedAreaList: [],
+            stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站'],
+            videoMode: 'common'
        };
    },
    computed: {
        tableWidth() {
            return this.stationList.length * 120 + 80;
        }
+    },
+    methods: {
+        clickArea(i, j) {
+            if (this.selectedAreaList.includes(i + '-' + j)) {
+                const index = this.selectedAreaList.indexOf(i + '-' + j);
+                this.selectedAreaList.splice(index, 1);
+            } else {
+                this.selectedAreaList.push(i + '-' + j);
+            }
+        },
+        isSelected(i, j) {
+            return this.selectedAreaList.includes(i + '-' + j);
+        },
+        selectedAll() {
+            const flag = this.checkSelectedAll();
+            this.selectedAreaList = [];
+            for (let i = 1; i < this.verticalHeader.length; i++) {
+                for (let j = 0; j < this.stationList.length; j++) {
+                    if (flag) {
+                        this.selectedAreaList = [];
+                    } else {
+                        this.selectedAreaList.push(i + '-' + j);
+                    }
+                }
+            }
+        },
+        selectedBatch(area) {
+            let areaIndex;
+            this.verticalHeader.map((item, index) => {
+                if (item.name === area) {
+                    areaIndex = index;
+                }
+            });
+            const flag = this.checkSelectedBatch(areaIndex);
+            for (let j = 0; j < this.stationList.length; j++) {
+                if (!this.selectedAreaList.includes(areaIndex + '-' + j) && !flag) {
+                    this.selectedAreaList.push(areaIndex + '-' + j);
+                } else if (flag) {
+                    const index = this.selectedAreaList.indexOf(areaIndex + '-' + j);
+                    this.selectedAreaList.splice(index, 1);
+                }
+            }
+        },
+        checkSelectedAll() {
+            let selectedAllFlag = true;
+            for (let i = 1; i < this.verticalHeader.length; i++) {
+                for (let j = 0; j < this.stationList.length; j++) {
+                    if (!this.selectedAreaList.includes(i + '-' + j)) {
+                        selectedAllFlag = false;
+                    }
+                }
+            }
+            return selectedAllFlag;
+        },
+        checkSelectedBatch(areaIndex) {
+            let selectedBatchFlag = true;
+            for (let j = 0; j < this.stationList.length; j++) {
+                if (!this.selectedAreaList.includes(areaIndex + '-' + j)) {
+                    selectedBatchFlag = false;
+                }
+            }
+            return selectedBatchFlag;
+        },
+        checkSelectedStation(stationIndex) {
+            let selectedStationFlag = true;
+            for (let i = 1; i < this.verticalHeader.length; i++) {
+                if (!this.selectedAreaList.includes(i + '-' + stationIndex)) {
+                    selectedStationFlag = false;
+                }
+            }
+            return selectedStationFlag;
+        },
+        selectedStation(station) {
+            let stationIndex;
+            this.stationList.forEach((item, index) => {
+                if (item === station) {
+                    stationIndex = index;
+                }
+            });
+            const flag = this.checkSelectedStation(stationIndex);
+            for (let i = 1; i < this.verticalHeader.length; i++) {
+                if (!this.selectedAreaList.includes(i + '-' + stationIndex) && !flag) {
+                    this.selectedAreaList.push(i + '-' + stationIndex);
+                } else if (flag) {
+                    const index = this.selectedAreaList.indexOf(i + '-' + stationIndex);
+                    this.selectedAreaList.splice(index, 1);
+                }
+            }
+        },
+        selectedVideoMode(mode) {
+            this.videoMode = mode;
+        },
+        showBroadcastContent() {
+            this.$refs.voiceBroadcast.doShow();
+        }
    }
 };
 </script>

-<style scoped>
+<style lang="scss" scoped>
    .area-selection{
        text-align: center;
        border-top: 3px solid #898888;
@ -129,6 +231,15 @@ export default {
        border-left: 2px solid #fff;
        border-right: 2px solid #565656;
        border-bottom: 2px solid #565656;
+        cursor: default;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+        }
    }
    .broadcast-form{
        text-align: center;
@ -170,6 +281,14 @@ export default {
        border-left: 2px solid #fff;
        border-right: 2px solid #898888;
        border-bottom: 2px solid #898888;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+        }
    }
    .pa-table-content{
        margin:0 auto;
@ -195,6 +314,19 @@ export default {
        border-right: 2px solid #898888;
        border-bottom: 2px solid #898888;
    }
+    .pa-table-content-inside-selected{
+        height: 10px;
+        width: 10px;
+        margin: auto;
+        background:#27FF27;
+        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%;
@ -240,6 +372,15 @@ export default {
        border-left: 2px solid #fff;
        border-right: 2px solid #898888;
        border-bottom: 2px solid #898888;
+        cursor: default;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+        }
    }
    .broadcast-operations{
        position: absolute;
--- a/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue
@ -21,7 +21,6 @@ export default {
    },
    watch:{
        $route() {
-            console.log(this.$route);
            this.currentSystem = this.$route.query.currentSystem;
        }
    },
--- a/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue
@ -12,56 +12,56 @@
      </el-row>
      <el-row style="border-bottom: 3px solid #fff;height: 60px;">
        <el-col :span="5">
-          <div class="broadcast-mode-button" style="width: 70px;left: 5%;">
-            <div class="pa-check-box" />
+          <div class="broadcast-mode-button" style="width: 70px;left: 5%;" @click="selecteAllArea">
+            <div class="pa-check-box" :style="{background: enableAreaList.length === 7 ? '#2EFF74':'#CDCDCD'}" />
            <div style="position: relative; left: 1px;display: inline-block;">全车站</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('站厅')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('站厅')? '#2EFF74':'#CDCDCD'}" />
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('上行站台')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('上行站台')? '#2EFF74':'#CDCDCD'}"/>
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('下行站台')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('下行站台')? '#2EFF74':'#CDCDCD'}"/>
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('办公区')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('办公区')? '#2EFF74':'#CDCDCD'}"/>
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('出入口')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('出入口')? '#2EFF74':'#CDCDCD'}"/>
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
        <el-col :span="3">
-          <div class="broadcast-mode-button">
-            <div class="pa-check-box" style="right: 10px;" />
+          <div class="broadcast-mode-button" @click="selectedArea('换乘通道')">
+            <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('换乘通道')? '#2EFF74':'#CDCDCD'}"/>
            <div style="position: relative; left: 25px;display: inline-block">0</div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5"><div class="broadcast-atc-button">ATC广播</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
-        <el-col :span="3"><div class="broadcast-use-button">启用</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('站厅')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('站厅')? '启用':'未启用'}}</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('上行站台')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('上行站台')? '启用':'未启用'}}</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('下行站台')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('下行站台')? '启用':'未启用'}}</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('办公区')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('办公区')? '启用':'未启用'}}</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('出入口')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('出入口')? '启用':'未启用'}}</div></el-col>
+        <el-col :span="3"><div class="broadcast-use-button" :style="{color: enableAreaList.includes('换乘通道')? '#2EFF74':'#CDCDCD'}">{{this.enableAreaList.includes('换乘通道')? '启用':'未启用'}}</div></el-col>
      </el-row>
    </div>
    <div class="pre-taped-broadcast">
@ -70,12 +70,12 @@
      </el-row>
      <el-row :gutter="10">
        <el-col :span="2">
-          <div class="broadcast-mode-button" style="left: 5%;width: 80px;top: 20px;">
-            <div class="pa-check-box" />
+          <div class="broadcast-mode-button" style="left: 5%;width: 80px;top: 20px;" @click="selectedVideoMode('common')">
+            <div class="pa-check-box" :style="{background: videoMode === 'common'? '#2EFF74': '#CDCDCD'}"/>
            <div style="position: relative; left: 1px;display: inline-block;">普通预录</div>
          </div>
-          <div class="broadcast-mode-button" style="left: 5%;width: 80px;margin-top: 15px">
-            <div class="pa-check-box" />
+          <div class="broadcast-mode-button" style="left: 5%;width: 80px;margin-top: 15px" @click="selectedVideoMode('emergency')">
+            <div class="pa-check-box" :style="{background: videoMode === 'emergency'? '#2EFF74': '#CDCDCD'}"/>
            <div style="position: relative; left: 1px;display: inline-block;">紧急预录</div>
          </div>
          <div class="broadcast-mode-button" style="left: 5%;width: 80px;margin-top: 30px">
@ -86,7 +86,7 @@
          <div>
            <div class="information-description">信息描述</div>
            <div style="overflow-y: auto;height: 150px;background: #fff;">
-              <div v-for="item in message" class="information-description-box">{{ item }}</div>
+              <div :key="index" v-for="(item,index) in message" class="information-description-box">{{ item }}</div>
            </div>
          </div>
        </el-col>
@ -94,7 +94,7 @@
          <div>
            <div class="information-description">广播内容</div>
            <div style="overflow-y: auto;height: 150px;background: #fff;">
-              <div v-for="item in broadcast" class="broadcast-content">{{ item }}</div>
+              <div :key="index" v-for="(item,index) in broadcast" class="broadcast-content">{{ item }}</div>
            </div>
          </div>
        </el-col>
@ -212,14 +212,6 @@ export default {
    },
    data() {
        return {
-            verticalHeader: [
-                {name:'车站', type: 'header'},
-                {name: '站厅', type: 'checkBox'},
-                {name: '上行站台', type: 'checkBox'},
-                {name: '下行站台', type: 'checkBox'},
-                {name: '办公区', type: 'checkBox'},
-                {name: '换乘通道', type: 'checkBox'}
-            ],
            message: ['mes1', 'mes2', 'mes3', 'mes4', 'mes5', 'mes6', 'mes7', 'mes8', 'mes9', '站台有乘客越出X色安全线，站台乘客请返回安前线内'],
            broadcast: ['各位乘客为了您和他人的安全，请勿手扶屏蔽门、排队候车，多谢合作！'],
            addModel: {
@ -227,13 +219,35 @@ export default {
                startTime: '',
                endTime: '',
                delayTime: ''
-            }
+            },
+            enableAreaList: [],
+            videoMode: 'common'
        };
+    },
+    methods: {
+        selecteAllArea() {
+            if (this.enableAreaList.length === 7) {
+                this.enableAreaList = [];
+            } else {
+                this.enableAreaList = ['车站', '站厅', '上行站台', '下行站台', '办公区', '出入口', '换乘通道'];
+            }
+        },
+        selectedArea(area) {
+            if (this.enableAreaList.includes(area)) {
+                const index = this.enableAreaList.indexOf(area);
+                this.enableAreaList.splice(index, 1);
+            } else {
+                this.enableAreaList.push(area);
+            }
+        },
+        selectedVideoMode(mode) {
+            this.videoMode = mode;
+        }
    }
 };
 </script>

-<style scoped>
+<style lang="scss" scoped>
    .area-selection{
        position: absolute;
        top: 20%;
@ -260,6 +274,15 @@ export default {
        border-left: 2px solid #fff;
        border-right: 2px solid #454541;
        border-bottom: 2px solid #454541;
+        cursor: default;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 1px solid #fff;
+            border-bottom: 1px solid #fff;
+        }
    }
    .pa-check-box{
        position: relative;
@ -350,17 +373,26 @@ export default {
    .time-control-button{
        height: 30px;
        text-align: center;
-        background: #EEBB77;
+        background: #CCCCCC;
        position: relative;
        top: 13px;
        width: 90px;
        left: 5%;
        font-size: 13px;
        line-height: 30px;
-        border-top: 3px solid #E18942;
-        border-left: 3px solid #E18942;
-        border-right: 3px solid #FFFCFB;
-        border-bottom: 3px solid #FFFCFB;
+        border-top: 3px solid #fff;
+        border-left: 3px solid #fff;
+        border-right: 3px solid #454541;
+        border-bottom: 3px solid #454541;
+        cursor:default;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 1px solid #fff;
+            border-bottom: 1px solid #fff;
+        }
    }
    .time-control-button-small{
        background: #CCCCCC;
@ -372,6 +404,15 @@ export default {
        border-left: 2px solid #fff;
        border-right: 2px solid #454541;
        border-bottom: 2px solid #454541;
+        cursor:default;
+        &.active,
+        &:hover{
+            background: #EBB570;
+            border-top: 2px solid #795B31;
+            border-left: 2px solid #795B31;
+            border-right: 1px solid #fff;
+            border-bottom: 1px solid #fff;
+        }
    }
    .pa-grey-box{
        position: absolute;
--- a/src/views/iscs/iscsSystem/config/broadcast/voiceBroadcast.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/voiceBroadcast.vue
@ -0,0 +1,109 @@
+<template>
+    <el-dialog
+        v-dialogDrag
+        :visible.sync="visible"
+        width="600px"
+        :before-close="doClose"
+        class="iscs-voice-broadcast-dialog"
+    >
+        <div>
+            <div class="dialog-header">语音广播</div>
+            <div class="secondary-title">信息描述</div>
+            <div class="information-description-box">
+                <div v-for="(item,index) in message" :key="index">
+                    <div class="information-box">{{item}}</div>
+                </div>
+            </div>
+            <div class="secondary-title" style="margin-top: 10px">信息内容显示</div>
+            <div class="information-context-box">站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类</div>
+            <div class="release-button" @click="releaseBroadcast">发布</div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'VoiceBroadcast',
+    data() {
+        return {
+            visible: false,
+            message: ['mes1', 'mes2', 'mes3', 'mes4', 'mes5', 'mes6', 'mes7', 'mes8', 'mes9', '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线，站台乘客请返回安前线内']
+        };
+    },
+    methods:{
+        doClose() {
+            this.visible = false;
+        },
+        doShow() {
+            this.visible = true;
+        },
+        releaseBroadcast() {
+            this.visible = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .dialog-header{
+        text-align: center;
+        font-size: 28px;
+        margin-bottom: 15px;
+    }
+    .information-description-box{
+        height: 100px;
+        width: 100%;
+        background: #DCDCDC;
+        border-left: 2px solid #898888;
+        overflow-x: auto;
+        overflow-y: auto;
+    }
+    .information-box{
+        white-space: nowrap;
+        background: #DCDCDC;
+        margin-top: 2px;
+    }
+    .secondary-title{
+        text-align: center;
+        width: 100%;
+        font-size: 18px;
+        background: #A9A9A9;
+        border-top: 2px solid #898888;
+        border-left: 2px solid #898888;
+        border-right: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+    }
+    .information-context-box{
+        background: #DCDCDC;
+        width: 100%;
+        height: 200px;
+        overflow-y: auto;
+    }
+    .release-button{
+        position: absolute;
+        right: 20px;
+        background: #CCCCCC;
+        color: #000;
+        font-weight: bold;
+        margin-top: 10px;
+        padding: 7px 15px;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        border-right: 2px solid #454541;
+        border-bottom: 2px solid #454541;
+        cursor: default;
+    }
+</style>
+<style>
+    .iscs-voice-broadcast-dialog .el-dialog__body{
+        background: #A9A9A9;
+        padding-top: 10px;
+        padding-bottom: 60px;
+    }
+    .iscs-voice-broadcast-dialog .el-dialog__headerbtn{
+        top: 10px;
+    }
+    .iscs-voice-broadcast-dialog .el-dialog__header{
+        background-image: linear-gradient(#FFE4C4, #F4A460, #FFE4C4);
+    }
+</style>