From fe75531a7d0af1882f30f34c25cd26514d1e2df0 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期五, 09 四月 2021 10:25:26 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 138 +++++++++++++++++++++++++++++---------------- 1 files changed, 89 insertions(+), 49 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue index 002bd92..b2788bb 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -4,73 +4,113 @@ <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> - <el-tabs type="card" v-model="activeName"> - <el-tab-pane label="瀹炶瘯鏁版嵁" name="first"></el-tab-pane> - <el-tab-pane label="鏃ユ暟鎹�" name="second"> - <ECharts></ECharts> - </el-tab-pane> - <el-tab-pane label="鏈堟暟鎹�" name="third"></el-tab-pane> - <el-tab-pane label="浜哄伐鏁版嵁" name="fourth"></el-tab-pane> - </el-tabs> + <ul class="tab"> + <li @click='tabTaggle("ECharts")'>瀹炴椂鏁版嵁</li> + <li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li> + <li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li> + <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> + </ul> + <component :is="currentTab" v-bind="$attrs"></component> </div> </template> <script> -import ECharts from './ECharts' +import EChartsHour from './EChartsHour' +import EChartsDate from './EChartsDate' export default { name: 'PublicChart', components: { - ECharts + EChartsHour, + EChartsDate }, data () { return { - activeName: 'second' + currentTab: 'EChartsHour' } }, methods: { + tabTaggle (taggleMenu) { + this.currentTab = taggleMenu + // debugger + } } } </script> <style scoped> - .win { - position: relative; - margin-bottom: 13px; - background-color: rgba(33, 41, 69,0.9); - border: 0.8px solid #396d83; - } - .border_corner{ - z-index: 999; - position: absolute; - width: 10px; - height: 10px; - background: rgba(0,0,0,0); - border: 1.5px 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_corner_right_bottom{ - bottom: 0; - right: 0; - border-left: none; - border-top: none; - } +* { + margin: 0; + padding: 0; + list-style: none; +} + +.win { + position: relative; + /*margin-bottom: 13px;*/ + background-color: rgba(33, 41, 69, 0.9); + border: 0.8px solid #396d83; + /*height: 1.5rem;*/ +} + +.border_corner { + z-index: 999; + position: absolute; + width: 10px; + height: 10px; + background: rgba(0, 0, 0, 0); + border: 1.5px 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_corner_right_bottom { + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} + +.tab { + display: flex; + border-bottom: 1px solid #396d83; + margin-bottom: 10px; +} + +li { + background-color: #243a55; + margin: 10px 10px 2px 10px; + /*padding: 5px 10px;*/ + width: 90px; + height: 25px; + line-height: 25px; + text-align: center; + border-radius: 5px; +} + +ul li:hover { + background-color: #0e639e; + color: #682000; + cursor: pointer; +} </style> -- Gitblit v1.8.0