svg path changes

shuishen

2023-01-03 e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f

 src/views/home/components/leftContainer.vue

@@ -1,33 +1,35 @@
<template>
    <div class="container">
        <div class="person-box" style="position: relative;">
            <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>
            <div class="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>
                    </div>
                    <div class="title-num">
                        共
                        <span :class="{ choosed: peopletype == 0 }">100</span>/
                        <span :class="{ choosed: peopletype == 1 }">1</span>人
                    </div>
                </div>
                <div class="title-num">
                    共
                    <span :class="{ choosed: peopletype == 0 }">100</span>/
                    <span :class="{ choosed: peopletype == 1 }">1</span>人
                <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="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="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>
            <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="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="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>

            <svg class="border-svg">
                <defs>
@@ -56,9 +58,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
@@ -67,18 +68,20 @@
            </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-title-small">实有房屋:</div>
                    <div class="tab-title-small">182万户</div>
            <div class="box">
                <div class="title">现有房屋</div>
                <div class="sub-tab">
                    <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-title-small">关注场所:</div>
                        <div class="tab-title-small">634个</div>
                    </div>
                </div>
                <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>
                <div id="houseEcharts" class="echarts-box"></div>
            </div>
            <div id="houseEcharts" class="echarts-box"></div>

            <svg class="border-svg">
                <defs>
@@ -107,9 +110,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
@@ -118,18 +120,20 @@
            </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-title-small">小区:</div>
                    <div class="tab-title-small">634个</div>
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab">
                    <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-title-small">责任区:</div>
                        <div class="tab-title-small">634个</div>
                    </div>
                </div>
                <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>
                <div id="landEcharts" class="echarts-box"></div>
            </div>
            <div id="landEcharts" class="echarts-box"></div>

            <svg class="border-svg">
                <defs>
@@ -158,9 +162,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
@@ -1046,6 +1049,18 @@
        background-size: 100% 100%;
        background-repeat: no-repeat;


        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            padding: 0 18px 0 18px;
            position: relative;
@@ -1152,7 +1167,7 @@
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    z-index: 1;
}

.mypath {