重置格式

shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

@@ -1,75 +1,68 @@
 <template>
-    <div id="leftPage">
-            <img id="dazhong_img" src="../../assets/png/dazhong.png"> </img>
-            <div id="viewPage_f">
-              <ViewPage></ViewPage>
-            </div>
-            <img id="person_status_img" src="../../assets/png/2.png"></img>
-            <PepoleStatus></PepoleStatus>
-            <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png"> </img>
-            <Dezhizhaihai></Dezhizhaihai>
+  <div id="leftPage">
+    <img id="dazhong_img" src="../../assets/png/dazhong.png" />
+    <div id="viewPage_f">
+      <ViewPage></ViewPage>
     </div>
-  </template>
+    <img id="person_status_img" src="../../assets/png/2.png" />
+    <PepoleStatus></PepoleStatus>
+    <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" />
+    <Dezhizhaihai></Dezhizhaihai>
+  </div>
+</template>
   
   <script>
-   import ViewPage from "../MainPageChild/ViewPage.vue"
-  import PepoleStatus from "../OtherChilds/PepoleStatus.vue"
-  import Dezhizhaihai from "./Dezhizhaihai.vue"
-    export default {
-      name: '',
-      components: {
-        ViewPage,
-        PepoleStatus,
-        Dezhizhaihai
-      },
-      data() {
-        return {
-         
-        }
-      },
-      mounted() {
-        
-      },
-      methods: {
-  
-      }
-    }
-  
-  </script>
+import ViewPage from "../MainPageChild/ViewPage.vue";
+import PepoleStatus from "../OtherChilds/PepoleStatus.vue";
+import Dezhizhaihai from "./Dezhizhaihai.vue";
+export default {
+  name: "",
+  components: {
+    ViewPage,
+    PepoleStatus,
+    Dezhizhaihai,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
   
   
   <style scoped>
-        #viewPage_f {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: -10%;
-  }
+#viewPage_f {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -10%;
+}
 
-   #person_status_img {
-    position: absolute;
-    width: 150px;
-    top: 30%
-  }
-  #leftPage{
-    position: absolute;
-    left: 2%;
-    top: 7%;
-    z-index: 2;
-    height: 93%;
-    width: 23%;
-    background-color: rgba(4, 11, 30, 0.6);
-  }
-  #dazhong_img {
-    position: absolute;
-    width: 200px;
-    top: -1%
-  }
+#person_status_img {
+  position: absolute;
+  width: 150px;
+  top: 30%;
+}
+#leftPage {
+  position: absolute;
+  left: 2%;
+  top: 7%;
+  z-index: 2;
+  height: 93%;
+  width: 23%;
+  background-color: rgba(4, 11, 30, 0.6);
+}
+#dazhong_img {
+  position: absolute;
+  width: 200px;
+  top: -1%;
+}
 
-  #dizhizaihai_img {
-    position: absolute;
-    width: 200px;
-    top: 70%
-  }
-  </style>
+#dizhizaihai_img {
+  position: absolute;
+  width: 200px;
+  top: 70%;
+}
+</style>
   

shuzhixiangzheng/src/components/OtherChilds/RightPage.vue

@@ -1,103 +1,99 @@
 <template>
-    <div id="rightPage">
-        <img class="menu" id="importantPersonStatus" src="../../assets/png/4.png"></img>
-        <KeyPopulationPage></KeyPopulationPage>
-        <img class="menu" id="employmentSituation" src="../../assets/png/5.png"></img>
-        <div id="chart_2">
-          <ThreeDCharts4></ThreeDCharts4>
-        </div>
-        <img class="menu" id="education" src="../../assets/png/6.png"></img>
-        <div id="education_dib">
-          <EdcationPage_shequ></EdcationPage_shequ>
-        </div>
-        
-        <img class="menu" id="vaccination" src="../../assets/png/7.png"></img>
-        <VaccinationPage></VaccinationPage>
+  <div id="rightPage">
+    <img class="menu" id="importantPersonStatus" src="../../assets/png/4.png" />
+    <KeyPopulationPage></KeyPopulationPage>
+    <img class="menu" id="employmentSituation" src="../../assets/png/5.png" />
+    <div id="chart_2">
+      <ThreeDCharts4></ThreeDCharts4>
     </div>
-  </template>
+    <img class="menu" id="education" src="../../assets/png/6.png" />
+    <div id="education_dib">
+      <EdcationPage_shequ></EdcationPage_shequ>
+    </div>
+
+    <img class="menu" id="vaccination" src="../../assets/png/7.png" />
+    <VaccinationPage></VaccinationPage>
+  </div>
+</template>
   
   <script>
-   import KeyPopulationPage from "../MainPageChild/KeyPopulationPage"
-   import ThreeDCharts4 from "../Utils/ThreeDCharts4"
-   import EdcationPage_shequ from "./EdcationPage_shequ"
-   import VaccinationPage from "../MainPageChild/VaccinationPage"
-    export default {
-      name: '',
-      components: {
-        KeyPopulationPage,
-        ThreeDCharts4,
-        EdcationPage_shequ,
-        VaccinationPage
-      },
-      data() {
-        return {
-          population: [ // -- 人口情况
-            {
-              name: "流动人口",
-              num: 501,
-              rate: "22.77"
-            },
-            {
-              name: "常住人口",
-              num: 1699,
-              rate: "77.23"
-            }
-          ],
-          czrk: 0,
-          ldrk: 0
-        }
-      },
-      mounted() {
-        
-      },
-      methods: {
-  
-      }
-    }
-  
-  </script>
+import KeyPopulationPage from "../MainPageChild/KeyPopulationPage";
+import ThreeDCharts4 from "../Utils/ThreeDCharts4";
+import EdcationPage_shequ from "./EdcationPage_shequ";
+import VaccinationPage from "../MainPageChild/VaccinationPage";
+export default {
+  name: "",
+  components: {
+    KeyPopulationPage,
+    ThreeDCharts4,
+    EdcationPage_shequ,
+    VaccinationPage,
+  },
+  data() {
+    return {
+      population: [
+        // -- 人口情况
+        {
+          name: "流动人口",
+          num: 501,
+          rate: "22.77",
+        },
+        {
+          name: "常住人口",
+          num: 1699,
+          rate: "77.23",
+        },
+      ],
+      czrk: 0,
+      ldrk: 0,
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
   
   
   <style scoped>
-    #education_dib{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: -10%;
-    }
- #chart_2{
-   position: absolute;
-   width: 100%;
-   height: 100%;
-   left:-40%;
-   top:10%;
-   z-index: 3;
- }
-  #rightPage{
-    position: absolute;
-    z-index: 120;
-    color: azure;
-    z-index: 2;
-    height: 90%;
-    width: 23%;
-    top:10%;
-    right: 1%;
-    background-color: rgba(4, 11, 30, 0.6);
-  }
-  .menu{
-    position: absolute;
-    width: 150px;
-    left:5%
-  }
-  #employmentSituation{
-    top:22%
-  }
-  #vaccination{
-    top:75%;
-    width: 200px;
-  }
- #education{
-   top:45%
- }
-  </style>
+#education_dib {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -10%;
+}
+#chart_2 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -40%;
+  top: 10%;
+  z-index: 3;
+}
+#rightPage {
+  position: absolute;
+  z-index: 120;
+  color: azure;
+  z-index: 2;
+  height: 90%;
+  width: 23%;
+  top: 10%;
+  right: 1%;
+  background-color: rgba(4, 11, 30, 0.6);
+}
+.menu {
+  position: absolute;
+  width: 150px;
+  left: 5%;
+}
+#employmentSituation {
+  top: 22%;
+}
+#vaccination {
+  top: 75%;
+  width: 200px;
+}
+#education {
+  top: 45%;
+}
+</style>