src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/BaseNav/PublicBounced/PublicBounced.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue
@@ -1,5 +1,12 @@ <template> <div class="gas-tab"> <!-- 框 --> <div class="win"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"></div> <div class="border_corner border_corner_right_bottom"></div> <div class="main"> <el-row type="flex" class="row-bg" justify="space-around"> <el-col :span="12">监测点名称:{{ displayContent.Name }}</el-col> <el-col :span="12">生产单位:{{ displayContent.DeptSname }}</el-col> @@ -10,6 +17,7 @@ <el-col :span="12">控制级别名称:{{ displayContent.ContrLevelShowName }}</el-col> <el-col :span="12">内/外排口:{{ displayContent.OrOutPortName }}</el-col> </el-row> </div> </div> </template> @@ -24,19 +32,55 @@ </script> <style scoped lang="less"> .gas-tab { border: 1px #4c667d solid; } .win { position: relative; display: inline-block; //border: 1px solid #396d83; } .main { width: 100%; height: 100%; } .border_corner{ z-index: 2500; position: absolute; width: 14px; height: 14px; background: rgba(0,0,0,0); border: 2px solid #47d5ea; } .border_corner_left_top{ top: 0; left: 0; border-right: none; border-bottom: none; } .border_corner_right_top{ top: 0; right: 0; border-left: none; border-bottom: none; } .border_corner_left_bottom{ bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 4px; } .border_corner_right_bottom{ bottom: 0; right: 0; border-left: none; border-top: none; } .el-row { color: #00d0f9; .el-col { width: 200px; height: 28px; background-color: #243a55; border-radius: 0.05rem; margin: 5px 0; background-color: #243a55;; text-align: center; line-height: 28px; } src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
New file @@ -0,0 +1,20 @@ <template> <div> <el-tabs v-model="activeName"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> </div> </template> <script> export default { name: 'GasTabs' } </script> <style scoped> </style> src/components/BaseNav/PublicBounced/GasComponents/GasVideo.vue
@@ -1,9 +1,18 @@ <template> <div class="gas-video"> <div class="win"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"></div> <div class="border_corner border_corner_right_bottom"></div> <div class="main"> <div> <video width="100%" height="100%" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> </div> </div> </div> </template> @@ -14,4 +23,48 @@ </script> <style scoped> .win { width: 100%; /*height: 100%;*/ position: relative; display: inline-block; //border: 1px solid #396d83; } .main { width: 100%; height: 100%; } .border_corner{ z-index: 2500; position: absolute; width: 14px; height: 14px; background: rgba(0,0,0,0); border: 2px solid #47d5ea; } .border_corner_left_top{ top: 0; left: 0; border-right: none; border-bottom: none; } .border_corner_right_top{ top: 0; right: 0; border-left: none; border-bottom: none; } .border_corner_left_bottom{ bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 4px; } .border_corner_right_bottom{ bottom: 0; right: 0; border-left: none; border-top: none; } </style> src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -8,6 +8,7 @@ <div class="public-bounced-content-left"> <GasTable :displayContent="displayContent"></GasTable> <GasECharts></GasECharts> <!-- <GasTabs></GasTabs>--> </div> <div class="public-bounced-content-right"> <GasVideo></GasVideo> @@ -22,10 +23,12 @@ import GasTable from '@components/BaseNav/PublicBounced/GasComponents/GasTable' import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts' import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo' // import GasTabs from '@components/BaseNav/PublicBounced/GasComponents/GasTabs' export default { name: 'PublicBounced', components: { // GasTabs, GasTable, GasECharts, GasVideo