|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class="dustPage">
|
|
|
+ <div class="top-area">
|
|
|
+ <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
|
|
|
+ <div class="top-title">{{ item.title }}</div>
|
|
|
+ <div class="top-content">
|
|
|
+ <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
|
|
|
+ <span class="item-label">{{ items.label }}</span>
|
|
|
+ <span class="item-value">{{ items.value }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-area">
|
|
|
+ <div class="center-t">
|
|
|
+ <div class="t-box" v-for="(item, index) in centerAreaListT" :key="index">
|
|
|
+ <div class="box-label">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-b">
|
|
|
+ <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
|
|
|
+ <div class="box-label" v-for="(items, ind) in item.content" :key="ind">{{ items.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-area">
|
|
|
+ <echartLine :echartDataGq="echartDataFc" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
|
|
|
+ import { topAreaList, centerAreaListT, centerAreaListB, echartDataFc } from '../fire.data';
|
|
|
+ import echartLine from './common/echartLine.vue';
|
|
|
+
|
|
|
+ let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
+ });
|
|
|
+
|
|
|
+ //顶部区域激活选项
|
|
|
+ let activeIndex = ref(0);
|
|
|
+
|
|
|
+ //顶部区域选项切换
|
|
|
+ function topAreaClick(index) {
|
|
|
+ activeIndex.value = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val) => {
|
|
|
+ console.log(val, '详情数据');
|
|
|
+
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .dustPage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ height: 183px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ position: relative;
|
|
|
+ width: 480px;
|
|
|
+ height: 160px;
|
|
|
+ background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
|
|
|
+
|
|
|
+ .top-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 6px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 33px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 33px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 52px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -44%);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ position: absolute;
|
|
|
+ right: 52px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -44%);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-box1 {
|
|
|
+ position: relative;
|
|
|
+ width: 480px;
|
|
|
+ height: 183px;
|
|
|
+ background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
|
|
|
+
|
|
|
+ .top-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 6px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 33px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 33px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 52px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -44%);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ position: absolute;
|
|
|
+ right: 52px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -44%);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-area {
|
|
|
+ height: 258px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .center-t {
|
|
|
+ height: 50%;
|
|
|
+ padding: 0px 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../../../../assets/images/fire/dz.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .t-box {
|
|
|
+ width: 218px;
|
|
|
+ height: 97px;
|
|
|
+ background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-b {
|
|
|
+ height: 50%;
|
|
|
+ padding: 0px 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .b-box {
|
|
|
+ width: 218px;
|
|
|
+ height: 97px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ width: 169px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #3df6ff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-area {
|
|
|
+ height: calc(100% - 471px);
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|