格式修改

shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue

@@ -1,180 +1,185 @@
 <template>
   <div id="pepoleStatusPage">
-    <img src="../../assets/png/yq_background.png" class="yq_background_img"></img>
+    <img src="../../assets/png/yq_background.png" class="yq_background_img" />
     <div class="czrk_name">常住人口</div>
-    <div class="czrk_num">{{czrk.num}}</div>
-    <img src="../../assets/png/yq_background.png" class="yq_background_img1"></img>
+    <div class="czrk_num">{{ czrk.num }}</div>
+    <img src="../../assets/png/yq_background.png" class="yq_background_img1" />
     <div class="ldrk_name">流动人口</div>
-    <div class="ldrk_num">{{ldrk.num}}</div>
+    <div class="ldrk_num">{{ ldrk.num }}</div>
     <ThreeDCharts3></ThreeDCharts3>
   </div>
 </template>
 
 <script>
-  import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue"
-  export default {
-    name: 'PepoleStatusPage',
-    components: {
-      ThreeDCharts3
-    },
-    data() {
-      return {
-        population: [ // -- 人口情况
-          {
-            name: "流动人口",
-            num: 501,
-            rate: "22.77"
-          },
-          {
-            name: "常住人口",
-            num: 1699,
-            rate: "77.23"
-          }
-        ],
-        czrk: 0,
-        ldrk: 0
+import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue";
+export default {
+  name: "PepoleStatusPage",
+  components: {
+    ThreeDCharts3,
+  },
+  data() {
+    return {
+      population: [
+        // -- 人口情况
+        {
+          name: "流动人口",
+          num: 501,
+          rate: "22.77",
+        },
+        {
+          name: "常住人口",
+          num: 1699,
+          rate: "77.23",
+        },
+      ],
+      czrk: 0,
+      ldrk: 0,
+    };
+  },
+  mounted() {
+    let clear = setInterval(() => {
+      if (
+        this.$store.getters.getSzdata.code === 10000 &&
+        this.$store.getters.getDaZhongdata.data &&
+        this.$store.getters.getDaZhongdata.data.population
+      ) {
+        this.population = this.$store.getters.getDaZhongdata.data.population;
+        this.czrk = this.population.filter(
+          (result) => result.name == "常住人口"
+        )[0];
+        this.ldrk = this.population.filter(
+          (result) => result.name == "流动人口"
+        )[0];
+        clearInterval(clear);
       }
-    },
-    mounted() {
-      let clear = setInterval(() => {
-        if (this.$store.getters.getSzdata.code === 10000&&this.$store.getters.getDaZhongdata.data&&this.$store.getters.getDaZhongdata.data.population) {
-          this.population = this.$store.getters.getDaZhongdata.data.population
-          this.czrk = this.population.filter(result => result.name == '常住人口')[0];
-          this.ldrk = this.population.filter(result => result.name == '流动人口')[0];
-          clearInterval(clear)
-        }
-      }, 500);
-    },
-    methods: {
-
-    }
-  }
-
+    }, 500);
+  },
+  methods: {},
+};
 </script>
 
 
 <style scoped>
-  .czrk_name {
-    position: absolute;
-    color: rgb(4, 185, 202);
-    font-weight: bold;
-    left: 18%;
-    top: 8%
-  }
-
-  .czrk_num {
-    position: absolute;
-    left: 18%;
-    top: 15%;
-    color: rgb(250, 207, 44);
-    font-size: 25px;
-    font-weight: bold;
-  }
-
-  .ldrk_name {
-    position: absolute;
-    color: rgb(4, 185, 202);
-    font-weight: bold;
-    left: 68%;
-    top: 8%
-  }
-
-  .ldrk_num {
-    position: absolute;
-    left: 70%;
-    top: 15%;
-    font-size: 25px;
-    color: rgb(250, 207, 44);
-    font-weight: bold;
-  }
-
-  .yq_background_img {
-    position: absolute;
-    width: 30%;
-    left: 10%;
-    top: 5%
-  }
-
-  .yq_background_img1 {
-    position: absolute;
-    width: 30%;
-    left: 60%;
-    top: 5%
-  }
-
-  .font {
-    position: absolute;
-    font-size: 10px;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 5%;
-  }
-
-  #pepoleStatusPage {
-    position: absolute;
-    width: 100%;
-    height: 43%;
-    /* background-color: rgb(48,115,248,0.1); */
-    top: 36%;
-    z-index: 2;
-    color: rgb(255, 255, 255);
-  }
-
-  .num1 {
-    position: absolute;
-    width: 5%;
-    left: 15%;
-    font-size: 10px;
-  }
-
-  .num2 {
-    position: absolute;
-    left: 42%;
-    width: 10%;
-    font-size: 10px;
-  }
-
-  .num3 {
-    position: absolute;
-    left: 84%;
-    width: 10%;
-    font-size: 10px;
-  }
-
-  .progress_both {
-    left: 52%;
-    top: 2%;
-    /* position: absolute; */
-    width: 30%;
-    height: 5px;
-  }
-
-  .progress_container0 {
-    right: 62%;
-    position: absolute;
-    width: 15%;
-    height: 5px;
-    background-color: rgb(48, 115, 248);
-  }
-
-  .progress_container1 {
-    position: absolute;
-    width: 30%;
-    left: 52%;
-    height: 5px;
-    background-color: rgb(55, 179, 163);
-  }
-
-  .progress_container2 {
-    position: absolute;
-    width: 10%;
-    height: 5px;
-    left: 52%;
-    background-color: rgb(245, 199, 49);
-  }
-
+.czrk_name {
+  position: absolute;
+  color: rgb(4, 185, 202);
+  font-weight: bold;
+  left: 18%;
+  top: 8%;
+}
+
+.czrk_num {
+  position: absolute;
+  left: 18%;
+  top: 15%;
+  color: rgb(250, 207, 44);
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.ldrk_name {
+  position: absolute;
+  color: rgb(4, 185, 202);
+  font-weight: bold;
+  left: 68%;
+  top: 8%;
+}
+
+.ldrk_num {
+  position: absolute;
+  left: 70%;
+  top: 15%;
+  font-size: 25px;
+  color: rgb(250, 207, 44);
+  font-weight: bold;
+}
+
+.yq_background_img {
+  position: absolute;
+  width: 30%;
+  left: 10%;
+  top: 5%;
+}
+
+.yq_background_img1 {
+  position: absolute;
+  width: 30%;
+  left: 60%;
+  top: 5%;
+}
+
+.font {
+  position: absolute;
+  font-size: 10px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 5%;
+}
+
+#pepoleStatusPage {
+  position: absolute;
+  width: 100%;
+  height: 43%;
+  /* background-color: rgb(48,115,248,0.1); */
+  top: 36%;
+  z-index: 2;
+  color: rgb(255, 255, 255);
+}
+
+.num1 {
+  position: absolute;
+  width: 5%;
+  left: 15%;
+  font-size: 10px;
+}
+
+.num2 {
+  position: absolute;
+  left: 42%;
+  width: 10%;
+  font-size: 10px;
+}
+
+.num3 {
+  position: absolute;
+  left: 84%;
+  width: 10%;
+  font-size: 10px;
+}
+
+.progress_both {
+  left: 52%;
+  top: 2%;
+  /* position: absolute; */
+  width: 30%;
+  height: 5px;
+}
+
+.progress_container0 {
+  right: 62%;
+  position: absolute;
+  width: 15%;
+  height: 5px;
+  background-color: rgb(48, 115, 248);
+}
+
+.progress_container1 {
+  position: absolute;
+  width: 30%;
+  left: 52%;
+  height: 5px;
+  background-color: rgb(55, 179, 163);
+}
+
+.progress_container2 {
+  position: absolute;
+  width: 10%;
+  height: 5px;
+  left: 52%;
+  background-color: rgb(245, 199, 49);
+}
 </style>