mer-tradescreen/src/view/townDetail.vue

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


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

            <bottomleft></bottomleft>
        </div>
        <div class="c">
            <img class="img-cls" src="/static/town/CJYH.png" alt="">
            <div id="transactionUsers" class="transactionUsers"></div>
        </div>
        <div class="r">
            <bottomRight></bottomRight>

        </div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import option from "./option"
import bottomRight from "@/components/townDetail/bottomRight.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()
// 图表
const initCharts = (tag, option) => {
    var chartDom = document.getElementById(tag);
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
}

onMounted(() => {

    document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
    initCharts('transactionUsers', option.transactionUsersTown)


})

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

        .product-list {
            height: 70%;
            display: flex;
            justify-content: space-between;
            position: relative;

            .product {
                height: 100%;
                width: 32%;
                position: relative;

                .bg {
                    display: flex;
                    justify-content: space-around;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                }

                .product-content {
                    color: white;
                    text-align: center;
                    font-size: 12PX;
                }

            }

            .product-icon {
                width: 2vw;
                height: 2vw;
                position: absolute;
                animation: jump 1s infinite;
                top: 2vh;
            }
        }

        .Views {
            margin-top: 2%;
            height: 25%;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            color: white;
            font-size: 12px;

            .view-content {
                display: flex;
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: space-around;
            }
        }

    }


    .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;

        .user {
            margin-top: 4.5vh;
            position: absolute;
            width: 98%;
            height: 35vh;
            box-sizing: border-box;
            overflow: hidden;

        }

    }

    .c {
        width: 48VW;

        height: 46vh;
        position: relative;

        .transactionUsers {
            position: absolute;
            width: 100%;
            height: 40vh;
            top: 5vh;
        }


    }

    .r {
        width: 25VW;

        height: 46vh;
        position: relative;


    }
}

.img-cls {
    width: 98%;
    height: 45vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.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>