From a9701a73918cd0b5a5de41ba49a6d3819d02432e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8B=AC=E6=A0=91=E7=9A=84=E9=A3=8E?= <2167228784@qq.com>
Date: Tue, 12 Dec 2023 20:52:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../coastalMap/components/actualBuilding.vue  | 209 +++++++-------
 .../coastalMap/components/actualPeople.vue    | 271 +++++++++---------
 2 files changed, 238 insertions(+), 242 deletions(-)

diff --git a/src/views/coastalMap/components/actualBuilding.vue b/src/views/coastalMap/components/actualBuilding.vue
index f522472..e37d040 100644
--- a/src/views/coastalMap/components/actualBuilding.vue
+++ b/src/views/coastalMap/components/actualBuilding.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-   <!-- 房屋小图标标题 -->
+  <div>
+    <!-- 房屋小图标标题 -->
     <div class="house_icon_title">
       <div class="house_icon_title_box"></div>
       <div class="house_text">实有房屋</div>
@@ -21,7 +21,7 @@
         ></div>
       </div>
     </div>
-        <!-- 出租房，群组房 -->
+    <!-- 出租房，群组房 -->
     <div class="icon_bottom_flex">
       <div class="icon_bottom1">
         <div class="icon_buttom1_text">出租房</div>
@@ -32,24 +32,24 @@
         <div class="icon_bottom2_number">3</div>
       </div>
     </div>
-    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name:'ActualBuilding',
-        data(){
-            return{
-        iconlist: [
+export default {
+  name: 'ActualBuilding',
+  data() {
+    return {
+      iconlist: [
         { id: '1', name: '住宅', number: '35' },
         { id: '2', name: '商铺', number: '0' },
         { id: '3', name: '商住两用', number: '2' },
         { id: '4', name: '空置', number: '27' }
-      ],
-            }
-        },
-        methods:{
-                back_change(id) {
+      ]
+    }
+  },
+  methods: {
+    back_change(id) {
       console.log(id, 'lll')
       switch (id) {
         case '1':
@@ -61,109 +61,108 @@
         case '4':
           return `url(${require('@/assets/house-hza/bg15.png')})`
       }
-    },
-        }
     }
+  }
+}
 </script>
 
-<style lang="scss" >
-  .house_icon_title {
-    width: 18vw;
-    height: 3.5vh;
-    // background-color: #fff;
+<style lang="scss">
+.house_icon_title {
+  width: 18vw;
+  height: 3.5vh;
+  // background-color: #fff;
+  margin-left: 1vw;
+  margin-top: 1vh;
+  display: flex;
+  .house_icon_title_box {
+    width: 1vw;
+    height: 2vh;
+    background-image: url(@/assets/house-hza/bg17.png);
+    background-size: 100% 100%;
+  }
+  .house_text {
+    width: 5vw;
+    color: antiquewhite;
     margin-left: 1vw;
-    margin-top: 1vh;
-    display: flex;
-    .house_icon_title_box {
-      width: 1vw;
-      height: 2vh;
-      background-image: url(@/assets/house-hza/bg17.png);
-      background-size: 100% 100%;
-    }
-    .house_text {
-      width: 5vw;
-      color: antiquewhite;
-      margin-left: 1vw;
-      font-size: 16px;
-      font-weight: 700;
-      // background-color: orange;
-    }
-    .house_icon_number {
-      height: 2.5vh;
-      width: 4vw;
-      margin-left: 9vw;
-      // background-color: pink;
-      color: #00f5ff;
-    }
+    font-size: 16px;
+    font-weight: 700;
+    // background-color: orange;
   }
+  .house_icon_number {
+    height: 2.5vh;
+    width: 4vw;
+    margin-left: 9vw;
+    // background-color: pink;
+    color: #00f5ff;
+  }
+}
 
-  .icon_bottom_flex {
+.icon_bottom_flex {
+  display: flex;
+  margin-left: 1vw;
+  // margin-top: 1vh;
+  color: #fff;
+  .icon_bottom1 {
     display: flex;
-    margin-left: 1vw;
-    // margin-top: 1vh;
-    color: #fff;
-    .icon_bottom1 {
-      display: flex;
-      padding-left: 2.5vw;
-      width: 8.5vw;
-      height: 4vh;
-      background-image: url(@/assets/house-hza/bg-1.png);
-      background-size: 100% 100%;
-      padding-top: 1vh;
-      .icon_bottom1_number {
-        margin-left: 2vw;
-      }
-    }
-    .icon_bottom2 {
-      display: flex;
-      padding-left: 2.5vw;
-      width: 8.5vw;
-      height: 4vh;
-      background-image: url(@/assets/house-hza/bg-22.png);
-      background-size: 100% 100%;
-      margin-left: 1vw;
-      padding-top: 1vh;
-      .icon_bottom2_number {
-        margin-left: 2vw;
-      }
+    padding-left: 2.5vw;
+    width: 8.5vw;
+    height: 4vh;
+    background-image: url(@/assets/house-hza/bg-1.png);
+    background-size: 100% 100%;
+    padding-top: 1vh;
+    .icon_bottom1_number {
+      margin-left: 2vw;
     }
   }
-    .house_icon_box_for {
+  .icon_bottom2 {
     display: flex;
-    height: 11vh;
-    width: 18vw;
+    padding-left: 2.5vw;
+    width: 8.5vw;
+    height: 4vh;
+    background-image: url(@/assets/house-hza/bg-22.png);
+    background-size: 100% 100%;
     margin-left: 1vw;
-    // background-color: orange;
-    // margin-top: 1vh;
-    .house_icon_box {
+    padding-top: 1vh;
+    .icon_bottom2_number {
+      margin-left: 2vw;
+    }
+  }
+}
+.house_icon_box_for {
+  display: flex;
+  height: 11vh;
+  width: 18vw;
+  margin-left: 1vw;
+  // background-color: orange;
+  // margin-top: 1vh;
+  .house_icon_box {
+    width: 4vw;
+    margin-right: 1vw;
 
-      width: 4vw;
-      margin-right: 1vw;
-    
     //   background-color: #fff;
-      text-align: center;
-      .house_number {
-        width: 1.5vw;
-        margin-left: 1vw;
-        height: 3vh;
-        // background-color: pink;
-        font-family: D-DIN Bold;
-        color: #e5f5f9;
-        font-size: 1.3rem;
-      }
-      .house_title {
-        // background-color: pink;
-        margin-top: 0.5vh;
-        font-size: 0.7rem;
-        color: #cbd2d7;
-      }
-      .house_icon {
-        width: 3.5vw;
-        height: 6vh;
-        // background-color: blue;
-        background-size: 100% 100%;
-        margin-top: 0.5vh;
-      }
+    text-align: center;
+    .house_number {
+      width: 1.5vw;
+      margin-left: 1vw;
+      height: 3vh;
+      // background-color: pink;
+      font-family: D-DIN Bold;
+      color: #e5f5f9;
+      font-size: 1.3rem;
+    }
+    .house_title {
+      // background-color: pink;
+      margin-top: 0.5vh;
+      font-size: 0.7rem;
+      color: #cbd2d7;
+    }
+    .house_icon {
+      width: 3.5vw;
+      height: 6vh;
+      // background-color: blue;
+      background-size: 100% 100%;
+      margin-top: 0.5vh;
     }
   }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/coastalMap/components/actualPeople.vue b/src/views/coastalMap/components/actualPeople.vue
index 069dd0c..c640e45 100644
--- a/src/views/coastalMap/components/actualPeople.vue
+++ b/src/views/coastalMap/components/actualPeople.vue
@@ -1,14 +1,14 @@
 <template>
-    <div>
+  <div>
     <div class="people_title">
       <div class="people_icon"></div>
       <div class="people_text">实有人口</div>
     </div>
     <!-- echarts -->
     <div class="people_echarts">
-        <div class="echarts_icon"></div>
-       
-   <div class="people_type">
+      <div class="echarts_icon"></div>
+
+      <div class="people_type">
         <div class="people_type_list">人户一致</div>
         <div class="type_number">51</div>
       </div>
@@ -31,9 +31,8 @@
       <div class="people_type5">
         <div class="people_type_list">关爱人员</div>
         <div class="type_number">51</div>
-        </div>
-      
-   
+      </div>
+
       <div class="list_number">80</div>
       <div class="list_number_text">总数</div>
     </div>
@@ -55,148 +54,146 @@
         <div class="people1_number">5</div>
       </div>
     </div>
-    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name:"ActualPeople"
-    }
+export default {
+  name: 'ActualPeople'
+}
 </script>
 
-<style lang="scss" >
-
-  .people_title {
-    width: 18vw;
-    height: 3.5vh;
-    // background-color: #fff;
-    margin-left: 1vw;
-    margin-top: 1vh;
-    display: flex;
-    .people_icon {
-      width: 1vw;
-      height: 2.2vh;
-      background-image: url(@/assets/house-hza/bg17.png);
-      background-size: 100% 100%;
-      // background-color: pink;
-      margin-top: 0.5vh;
-    }
-    .people_text {
-      color: antiquewhite;
-      margin-left: 1vw;
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 3.5vh;
-      text-shadow: 0px 0px 10px #0b4672;
-      letter-spacing: 2px;
-      // background-color: orange;
-    }
-  }
-  .people_echarts {
-    width: 18vw;
-    height: 15vh;
+<style lang="scss">
+.people_title {
+  width: 18vw;
+  height: 3.5vh;
+  // background-color: #fff;
+  margin-left: 1vw;
+  margin-top: 1vh;
+  display: flex;
+  .people_icon {
+    width: 1vw;
+    height: 2.2vh;
+    background-image: url(@/assets/house-hza/bg17.png);
+    background-size: 100% 100%;
     // background-color: pink;
+    margin-top: 0.5vh;
+  }
+  .people_text {
+    color: antiquewhite;
     margin-left: 1vw;
-    margin-top: 1vh;
-    position: relative;
-    color: #ffffff;
-   font-size: 10px;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 3.5vh;
+    text-shadow: 0px 0px 10px #0b4672;
+    letter-spacing: 2px;
+    // background-color: orange;
+  }
+}
+.people_echarts {
+  width: 18vw;
+  height: 15vh;
+  // background-color: pink;
+  margin-left: 1vw;
+  margin-top: 1vh;
+  position: relative;
+  color: #ffffff;
+  font-size: 10px;
 
-    .echarts_icon {
-      height: 15vh;
-      width: 10.5vw;
-      background-image: url(@/assets/house-hza/bg11.png);
-      background-size: 100% 100%;
-      margin-left: 4vw;
-    }
-    .people_type {
-      width: 3.2vw;
-      height: 5vh;
-      // background-color: #fff;
-      position: absolute;
-      top: 0;
-      .people_type_list{
-        font-size: 10px;
-      }
-    }
-    .people_type1 {
-      position: absolute;
-      top: 5vh;
-       
-    }
-    .people_type2 {
-      position: absolute;
-      top: 11vh;
-    }
-    .people_type3 {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-    .people_type4 {
-      position: absolute;
-      top: 5vh;
-      right: 0;
-    }
-    .people_type5 {
-      position: absolute;
-      top: 11vh;
-      right: 0;
-    }
-    .list_number {
-      // background-color: #fff;
-      position: absolute;
-      top: 0;
-      font-size: 24px;
-      left: 8.2vw;
-      top: 5vh;
-    }
-    .list_number_text {
-      // background-color: #fff;
-      position: absolute;
-      top: 0;
-      left: 8.3vw;
-      top: 8.5vh;
-      font-size: 12px;
+  .echarts_icon {
+    height: 15vh;
+    width: 10.5vw;
+    background-image: url(@/assets/house-hza/bg11.png);
+    background-size: 100% 100%;
+    margin-left: 4vw;
+  }
+  .people_type {
+    width: 3.2vw;
+    height: 5vh;
+    // background-color: #fff;
+    position: absolute;
+    top: 0;
+    .people_type_list {
+      font-size: 10px;
     }
   }
-  .people_bottom {
-    width: 18vw;
+  .people_type1 {
+    position: absolute;
+    top: 5vh;
+  }
+  .people_type2 {
+    position: absolute;
+    top: 11vh;
+  }
+  .people_type3 {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .people_type4 {
+    position: absolute;
+    top: 5vh;
+    right: 0;
+  }
+  .people_type5 {
+    position: absolute;
+    top: 11vh;
+    right: 0;
+  }
+  .list_number {
+    // background-color: #fff;
+    position: absolute;
+    top: 0;
+    font-size: 24px;
+    left: 8.2vw;
+    top: 5vh;
+  }
+  .list_number_text {
+    // background-color: #fff;
+    position: absolute;
+    top: 0;
+    left: 8.3vw;
+    top: 8.5vh;
+    font-size: 12px;
+  }
+}
+.people_bottom {
+  width: 18vw;
+  height: 4vh;
+  // background-color: orange;
+  margin-left: 1vw;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1vh;
+  .people1 {
+    width: 5.5vw;
     height: 4vh;
-    // background-color: orange;
-    margin-left: 1vw;
+    // background-color: #fff;
+    background-image: url(@/assets/house-hza/bg-6.png);
+    background-size: 100% 100%;
+    text-align: center;
     display: flex;
-    justify-content: space-between;
-    margin-top: 1vh;
-    .people1 {
-      width: 5.5vw;
-      height: 4vh;
-      // background-color: #fff;
-      background-image: url(@/assets/house-hza/bg-6.png);
-      background-size: 100% 100%;
-      text-align: center;
-      display: flex;
-      .people1_text {
-        font-size: 0.8rem;
-        margin-top: 1vh;
-        margin-left: 0.2vw;
-        color: #ffffff;
-      }
-      .people1_number {
-        margin-left: 0.8vw;
-        margin-top: 0.5vh;
-        font-size: 1.3rem;
-        color: #ffffff;
-      }
+    .people1_text {
+      font-size: 0.8rem;
+      margin-top: 1vh;
+      margin-left: 0.2vw;
+      color: #ffffff;
+    }
+    .people1_number {
+      margin-left: 0.8vw;
+      margin-top: 0.5vh;
+      font-size: 1.3rem;
+      color: #ffffff;
+    }
 
-      .dit {
-        width: 0.3vw;
-        height: 0.6vh;
-        border-radius: 50%;
-        background-color: #00f5ff;
-        margin-top: 0.8vw;
-        margin-left: 0.5vw;
-      }
+    .dit {
+      width: 0.3vw;
+      height: 0.6vh;
+      border-radius: 50%;
+      background-color: #00f5ff;
+      margin-top: 0.8vw;
+      margin-left: 0.5vw;
     }
   }
-</style>
\ No newline at end of file
+}
+</style>