69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div class="atmospheric-module">
|
||
|
|
<peak-secondary-title :title="title"/>
|
||
|
|
<div class="_tab">
|
||
|
|
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''" @click="tabChange(item.value)">{{ item.label }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||
|
|
export default {
|
||
|
|
name: "AtmosphericModule",
|
||
|
|
components: {PeakSecondaryTitle},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
title: '大气质量信息总览',
|
||
|
|
tabList: [
|
||
|
|
{
|
||
|
|
label: '空气质量指数',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '重要污染物变化趋势',
|
||
|
|
value: 2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
activeTab: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabChange(val){
|
||
|
|
this.activeTab = val
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
@import "../../assets/styles/mixin";
|
||
|
|
.atmospheric-module{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
.flex-column;
|
||
|
|
._tab{
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
.flex-row;
|
||
|
|
.tab-item{
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: MicrosoftYaHei-Bold;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
letter-spacing: 0;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 0 2px 2px rgba(0,0,0,0.50);
|
||
|
|
font-weight: 700;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.active-tab{
|
||
|
|
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|