tradeScreen/src/view/index.vue

<template>
    <div class="box" :style="{ opacity: loading ? 0 : 1 }">
        <div class="body">
            <div class="l">
                <topLeft :areaCodes="areaCodes" />
            </div>
            <div class="c" id="">
                <topCenter :areaCodes="areaCodes"></topCenter>
            </div>
            <div class="r">
                <topRight :areaCodes="areaCodes"></topRight>
            </div>
        </div>
        <div class="foot">
            <div class="foot-l">
                <bottomLeft :areaCodes="areaCodes"></bottomLeft>
            </div>
            <div class="c">
                <bottomCenter :areaCodes="areaCodes"></bottomCenter>
            </div>
            <div class="r">
                <bottomRight :areaCodes="areaCodes"></bottomRight>
            </div>
        </div>
    </div>
</template> 
<script setup>

import { onMounted } from 'vue';
import * as echarts from 'echarts';
import option from "./option"
import { ref, reactive } from "vue"
import topLeft from "@/components/index/topLeft.vue"
import topCenter from "@/components/index/topCenter.vue"
import topRight from "@/components/index/topRight.vue"
import bottomLeft from "@/components/index/bottomLeft.vue"
import bottomCenter from "@/components/index/bottomCenter.vue"
import bottomRight from "@/components/index/bottomRight.vue"

const areaCodes = reactive({
    areaCode: 510524,
    streetCode: 510524100
})

const loading = ref(false)


// 图表
// const initCharts = (tag, option) => {
//     var chartDom = document.getElementById(tag);
//     var myChart = echarts.init(chartDom);
//     myChart.setOption(option);
// }


onMounted(() => {
    // console.log(option.transactionUsers)

    // initCharts('transactionUsers', option.transactionUsers)

})
</script>
<style lang="scss">
@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.body {
    height: 45vh;
    display: flex;
    margin-top: 1vh;
    justify-content: space-between;

    .l {

        width: 25vw;
        height: 100%;
        position: relative;


    }

    .c {
        box-sizing: border-box;
        width: 48vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;


    }

    .r {
        width: 25vw;
        height: 100%;
        position: relative;


    }
}

.foot {
    margin-top: 1vh;
    height: 46vh;
    display: flex;
    justify-content: space-between;


    .foot-l {
        width: 25vw;
        height: 100%;
        position: relative;
    }

    .c {
        width: 48vw;
        position: relative;
        height: 100%;
        box-sizing: border-box;
    }

    .r {
        width: 25vw;
        height: 100%;
        position: relative;
    }
}
</style>