From 588438a8f2efcb5faabef6a034f0df2148436d5b Mon Sep 17 00:00:00 2001
From: zhangshuaibao <15731629597@163.com>
Date: 星期三, 31 三月 2021 18:57:45 +0800
Subject: [PATCH] 折线图完善布局
---
src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue | 84 ++++++++++++++++++++++++++++++++++++------
1 files changed, 72 insertions(+), 12 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
index 54b47c0..44f8842 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
@@ -1,22 +1,82 @@
<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>
-<!-- <EchartsTab></EchartsTab>-->
-<!-- <GasECharts></GasECharts>>-->
-</div>
+ <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>
+ <el-tabs type="card" v-model="activeName">
+ <el-tab-pane label="瀹炶瘯鏁版嵁" name="first">
+ <EchartsTab></EchartsTab>
+ <GasECharts></GasECharts>
+ </el-tab-pane>
+ <el-tab-pane label="鏃ユ暟鎹�" name="second"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
+ <el-tab-pane label="鏈堟暟鎹�" name="third"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
+ <el-tab-pane label="浜哄伐鏁版嵁" name="fourth"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
+ </el-tabs>
+ </div>
</template>
<script>
+import GasECharts from './GasECharts'
+import EchartsTab from './EchartsTab'
+
export default {
- name: 'GasTabs'
+ name: 'GasTabs',
+ components: {
+ GasECharts,
+ EchartsTab
+ },
+ data () {
+ return {
+ activeName: 'first'
+ }
+ },
+ methods: {
+ handleClick (tab, event) {
+ console.log(tab, event)
+ }
+ }
}
+
</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;
+ }
</style>
--
Gitblit v1.8.0