样式修改

guanqb

2022-12-08 c9061177ec07e6f09657ef15f2e7a779f0d14e5b

 src/views/home/components/leftContainer.vue

@@ -3,40 +3,65 @@
        <div class="person-box">
            <div class="title">
                <div class="title-tab">
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/<span
                        :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
                    <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                </div>
                <div class="title-num">
                    共<span :class="{ choosed: peopletype == 0 }">100</span>/<span
                        :class="{ choosed: peopletype == 1 }">1</span>人
                    共
                    <span :class="{ choosed: peopletype == 0 }">100</span>/
                    <span :class="{ choosed: peopletype == 1 }">1</span>人
                </div>
            </div>
            <div class="sub-tab " v-show="peopletype == 0">
                <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
            <div class="sub-tab" v-show="peopletype == 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="tab" :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="tab" :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 id="PersonEcharts" class="echarts-box"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>
        </div>
        <div class="house-box">
            <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="num">182万户</div>
                    <div class="num">实有房屋</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="num">634个</div>
                    <div class="num">关注场所</div>
                </div>
@@ -46,11 +71,19 @@
        <div class="land-box">
            <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="num">634个</div>
                    <div class="num">小区</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="num">634个</div>
                    <div class="num">责任区</div>
                </div>
@@ -304,7 +337,7 @@
            } else if (type == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#2495b3', '#49b5d0', '#63cde5']
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
@@ -751,15 +784,15 @@
            if (this.tabType == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
                colors = ['#2c9b00', '#fdef00', '#fd3200']
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#63b783', '#9b83d7', '#6430c4']
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#085fa9', '#83aec6', '#dfe9dc']
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
@@ -913,7 +946,7 @@

            .title-tab {
                span {
                    color: #99CCCC;
                    color: #99cccc;
                    cursor: pointer;
                }

@@ -926,7 +959,7 @@
                color: #fff;

                span {
                    color: #99CCCC;
                    color: #99cccc;
                }

                span.choosed {
@@ -938,7 +971,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -953,18 +986,23 @@
            padding: 10px;
            display: flex;

            .tab {
            .tab,
            .tab3 {
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                }
            }
            .tab {
                display: flex;
                justify-content: space-around;
            }
        }

        .echarts-box {