<template>
|
<div id="outViews">
|
|
<div class="cityCenterContent">
|
<div class="topBtnRow">
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active1 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn1()">
|
建设阶段</div>
|
<div class="topBtn" :style="{ backgroundImage: 'url(' + (active2 ? coverImgUrl : uncoverImgUrl) + ')' }"
|
@click="clickBtn2()">
|
招商阶段</div>
|
</div>
|
|
<div class="cityCenter" v-show="active1 || active2">
|
<div class="content1" v-show="active1">
|
|
<QualitySafety />
|
<InvestmentProgress />
|
</div>
|
<div class="content2" v-show="active2">
|
<deviceState />
|
<!-- <productInfo /> -->
|
|
</div>
|
|
</div>
|
</div>
|
|
|
|
|
|
</div>
|
</template>
|
|
<script>
|
import deviceState from "./deviceStateNew.vue"
|
import productInfo from "../outViews/productInfo.vue"
|
import QualitySafety from "../outViews/QualitySafetyNew.vue"
|
import InvestmentProgress from "../outViews/InvestmentProgressNew.vue"
|
export default {
|
name: "",
|
components: {
|
deviceState,
|
productInfo,
|
QualitySafety,
|
InvestmentProgress,
|
},
|
data() {
|
return {
|
coverImgUrl: require('../../assets/img/topBtnBackActive.png'),
|
uncoverImgUrl: require('../../assets/img/topBtnBack.png'),
|
active1: false,
|
active2: false
|
}
|
},
|
methods: {
|
clickBtn1() {
|
this.active2 = false
|
this.active1 = !this.active1
|
this.$nextTick(() => [
|
window.dispatchEvent(new Event('resize'))//初始化echarts
|
])
|
},
|
clickBtn2() {
|
this.active1 = false
|
this.active2 = !this.active2
|
this.$nextTick(() => [
|
window.dispatchEvent(new Event('resize'))//初始化echarts
|
])
|
}
|
},
|
|
}
|
</script>
|
|
<style scoped lang="scss">
|
#outViews {
|
position: absolute;
|
z-index: 10;
|
height: 100%;
|
width: 100%;
|
top: 0px;
|
pointer-events: none;
|
|
.cityCenterContent {
|
width: 675.5px;
|
height: 867.5px;
|
margin-left: 105px;
|
margin-top: 64px;
|
|
.topBtnRow {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
gap: 20px;
|
pointer-events: all;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
|
.topBtn {
|
height: 33px;
|
width: 200px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
font-size: 11px;
|
color: #e0e5fa;
|
cursor: pointer;
|
|
background-image: url("~@/assets/img/topBtnBack.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.cityCenter {
|
margin-top: 10px;
|
width: 675.5px;
|
height: 837.5px;
|
background-image: url('~@/assets/img/city_center_back.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
|
.content1 {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
pointer-events: all;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.content2 {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
pointer-events: all;
|
}
|
}
|
}
|
|
|
}
|
</style>
|
