| | |
| | | <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: { |
| | | } |
| | | } |
| | | |
| | | </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> |