From e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 03 Jan 2023 15:00:43 +0800
Subject: [PATCH] svg path changes
---
src/views/home/components/leftContainer.vue | 123 +++++++++++++++++++++++------------------
1 files changed, 69 insertions(+), 54 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 387125a..34ff19c 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/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 {
--
Gitblit v1.9.3