mer-tradescreen/src/view/townDetail.vue

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


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

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

        </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"





const route = useRoute()


onMounted(() => {



})

</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;
}
</style>