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 { 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"
import { areaObj } from '@/store/index.js'
import { useRouter } from "vue-router"
const router = useRouter()
const areaStore = areaObj()
const areaCodes = reactive({
    ...areaStore.area
})
const loading = ref(false)
</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>