样式

guanqb

2022-12-28 46c620066f5196527c266cee6cd094e3c71b98cf

 src/views/home/components/leftContainer.vue

@@ -13,21 +13,38 @@
                </div>
            </div>
            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 0 }"
                    @click="personTabClick(0)"
                >
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 1 }"
                    @click="personTabClick(1)"
                >
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 2 }"
                    @click="personTabClick(2)"
                >
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>

            <!-- <svg viewBox="0 0 384 329" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <defs>
@@ -43,16 +60,24 @@
   c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
   c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
   c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
        <div class="house-box" style="position: relative;">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                    @click="houseTabClick(0)"
                >
                    <div class="tab-title-small">实有房屋:</div>
                    <div class="tab-title-small">182万户</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                    @click="houseTabClick(1)"
                >
                    <div class="tab-title-small">关注场所:</div>
                    <div class="tab-title-small">634个</div>
                </div>
@@ -65,16 +90,24 @@
   c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
   c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
   c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
        <div class="land-box" style="position: relative;">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 0 }"
                    @click="landTabClick(0)"
                >
                    <div class="tab-title-small">小区:</div>
                    <div class="tab-title-small">634个</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 1 }"
                    @click="landTabClick(1)"
                >
                    <div class="tab-title-small">责任区:</div>
                    <div class="tab-title-small">634个</div>
                </div>
@@ -87,12 +120,13 @@
   c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
   c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
   c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
    </div>
</template>

<script>
import { fontSize } from '@/utils/fontSize.js'
let homePersonmyChart
let houseMyChart
let landMyChart
@@ -231,7 +265,6 @@
        this.clickPeopleChart()
        this.clickLandChart()


        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
@@ -263,6 +296,7 @@
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -276,7 +310,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
@@ -313,10 +348,11 @@
                    }
                ],
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 20
                    top: '4%',
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
            }
        },
@@ -388,7 +424,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
@@ -425,9 +462,10 @@
                ],
                grid: {
                    top: '2%',
                    left: '70',
                    right: '-10',
                    bottom: '2%'
                    left: '2%',
                    right: '-1%',
                    bottom: '2%',
                    containLabel: true
                },

            }
@@ -477,6 +515,7 @@
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -490,7 +529,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
@@ -908,7 +948,6 @@
    height: 100%;

    .person-box {

        .word {
            color: #fff;
            font-size: 14px;
@@ -938,7 +977,6 @@
            content: '\e6ea';
        }
    }


    .person-box,
    .house-box,
@@ -994,7 +1032,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1018,7 +1056,7 @@
                border-radius: 8px;
                cursor: pointer;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                }