mer-tradescreen/src/view/townDetail.vue

<template>
    <div v-if="show" class="center">
        <dv-loading>Loading...</dv-loading>
    </div>


    <div :style="{ opacity: show ? 0 : 1 }">

        <div class="top box">
            <div class="l">
                <topLeft :code="route.query.code" :key="route.query.code"></topLeft>
            </div>
            <div class="c" id="">
                <topCenter :code="route.query.code" :key="route.query.code"></topCenter>
            </div>
            <div class="r">
                <topRight :code="route.query.code" :key="route.query.code"></topRight>
            </div>


        </div>
        <div class="bottom box">
            <div class="l">

                <bottomleft :code="route.query.code" :key="route.query.code"></bottomleft>
            </div>
            <div class="c">
                <bottomCenter :key="route.query.code"></bottomCenter>
            </div>
            <div class="r">
                <bottomRight :code="route.query.code" :key="route.query.code"></bottomRight>

            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
import bottomRight from "@/components/townDetail/bottomRight.vue"
import bottomCenter from "@/components/townDetail/bottomCenter.vue"
import bottomleft from "@/components/townDetail/bottomleft.vue"
import { useRoute } from 'vue-router';
import topCenter from "@/components/townDetail/topCenter.vue"
import topLeft from "@/components/townDetail/topLeft.vue"
import topRight from "@/components/townDetail/topRight.vue"
import { ref } from 'vue'

const show = ref(true)


const route = useRoute()


onMounted(() => {

    setTimeout(() => {
        show.value = false
    }, 1000)

})

</script>


<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 47vh;
    box-sizing: border-box;

}

.top {
    display: flex;
    padding-top: 1vh;
    justify-content: space-between;
    // color: transparent;

    .l {
        width: 25vw;
        height: 46vh;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        padding-top: 6vh;



    }

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


    }


    .r {
        width: 25vw;
        height: 46vh;
        position: relative;
        // background-color: RED;



    }
}

.bottom {
    // background-color: green;
    display: flex;
    padding-top: 1vh;
    justify-content: space-between;

    .l {
        // flex: 1;
        width: 25VW;
        height: 46vh;
        position: relative;



    }

    .c {
        width: 48VW;

        height: 46vh;
        position: relative;



    }

    .r {
        width: 25VW;

        height: 46vh;
        position: relative;


    }
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-bar {
    transform: translateY(12px);
    width: 100%;
    height: 10px;
    background-color: #122E3F;
    // border-radius: 10px;
    overflow: hidden;
}

.progress {
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, #455CCC, #51C2E0);
    transition: width 0.5s ease-in-out;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}
</style>