同上

shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue

@@ -1,153 +1,155 @@
 <template>
-    <div id="shunagzhongView">
-        <tr>
-            <td><img class="sign_png" src="../../assets/png/registered.png"></img></td>
-            <td>
-              <span id="peopleNum">
-                <span class="font">在籍人数</span> <br>
-                <span class="number">{{szdata?szdata.peoples:0}}</span> 
-              </span>
-              <span id="houseNum">
-                <span class="font" >户数</span><br>
-                <span class="number" >{{szdata?szdata.households:0}}</span> 
-              </span>
-            </td>
-           </tr>
-           <tr>
-            <td><img class="sign_png1" src="../../assets/png/village.png"></img></td>
-            <td>
-              <span id="villageNum">
-                <span class="font">小区数量</span> <br>
-                <span class="number">{{szdata?szdata.villages:0}}</span> 
-              </span>
-              <span id="buildNum">
-                <span class="font" >建筑数量</span><br>
-                <span class="number" >{{szdata?szdata.buildings:0}}</span> 
-              </span>
-            </td>
-           </tr>
-           <tr>
-            <td><img class="sign_png2" src="../../assets/png/property.png"></img></td>
-            <td>
-              <span id="hasPropertyNum">
-                <span class="font">有物业小区</span> <br>
-                <span class="number">{{szdata?szdata.villagesWithCompany:0}}</span> 
-              </span>
-              <span id="nohasPropertyNum">
-                <span class="font" >无物业小区</span><br>
-                <span class="number" >{{szdata?szdata.villagesWithoutCompany:0}}</span> 
-              </span>
-            </td>
-           </tr>
-    </div>
-    </template>
+  <div id="shunagzhongView">
+    <tr>
+      <td><img class="sign_png" src="../../assets/png/registered.png" /></td>
+      <td>
+        <span id="peopleNum">
+          <span class="font">在籍人数</span> <br />
+          <span class="number">{{ szdata ? szdata.peoples : 0 }}</span>
+        </span>
+        <span id="houseNum">
+          <span class="font">户数</span><br />
+          <span class="number">{{ szdata ? szdata.households : 0 }}</span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td><img class="sign_png1" src="../../assets/png/village.png" /></td>
+      <td>
+        <span id="villageNum">
+          <span class="font">小区数量</span> <br />
+          <span class="number">{{ szdata ? szdata.villages : 0 }}</span>
+        </span>
+        <span id="buildNum">
+          <span class="font">建筑数量</span><br />
+          <span class="number">{{ szdata ? szdata.buildings : 0 }}</span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td><img class="sign_png2" src="../../assets/png/property.png" /></td>
+      <td>
+        <span id="hasPropertyNum">
+          <span class="font">有物业小区</span> <br />
+          <span class="number">{{
+            szdata ? szdata.villagesWithCompany : 0
+          }}</span>
+        </span>
+        <span id="nohasPropertyNum">
+          <span class="font">无物业小区</span><br />
+          <span class="number">{{
+            szdata ? szdata.villagesWithoutCompany : 0
+          }}</span>
+        </span>
+      </td>
+    </tr>
+  </div>
+</template>
     
     <script>
-     
-    export default {
-      name: 'View',
-      // props: ['szdata'],
-      components:{
-  
+export default {
+  name: "View",
+  // props: ['szdata'],
+  components: {},
+  data() {
+    return {
+      szdata: {
+        // -- 概况
+        peoples: 77849, //在籍人数
+        villages: 42, //小区数量
+        villagesWithCompany: 33, //由物业小区
+        buildings: 8049, //建筑数量
+        households: 23653, //户数
+        villagesWithoutCompany: 8, //无物业小区
       },
-      data () {
-        return {
-          szdata:{				// -- 概况
-            peoples:77849,	//在籍人数
-            villages:42,		//小区数量
-            villagesWithCompany:33,	//由物业小区
-            buildings:8049,			//建筑数量
-            households:23653,			//户数
-            villagesWithoutCompany:8		//无物业小区
-        },
-        }
-      },
-      mounted(){
-        
-      let clear= setInterval(() => {
-        console.log(1111)
-          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.index) {
-            this.szdata=this.$store.getters.getSzdata.data.index
-            console.log("this.szdata",this.szdata)
-            clearInterval(clear)
-          }
-        }, 500);
-      },
-      methods:{
-        
+    };
+  },
+  mounted() {
+    let clear = setInterval(() => {
+      console.log(1111);
+      if (
+        this.$store.getters.getSzdata.code === 10000 &&
+        this.$store.getters.getSzdata.data.index
+      ) {
+        this.szdata = this.$store.getters.getSzdata.data.index;
+        console.log("this.szdata", this.szdata);
+        clearInterval(clear);
       }
-    }
-    </script>
+    }, 500);
+  },
+  methods: {},
+};
+</script>
     
     
  <style scoped>
-     #shunagzhongView{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        color: #ffffff;
-     }
-  .sign_png{
-    position: absolute;
-    width: 80px;
-    left: 10%;
-    top:5%
-  }
+#shunagzhongView {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+}
+.sign_png {
+  position: absolute;
+  width: 80px;
+  left: 10%;
+  top: 5%;
+}
 
-  .sign_png1{
-    position: absolute;
-    width: 80px;
-    left: 10%;
-    top:12%
-  }
-  .sign_png2{
-    position: absolute;
-    width: 80px;
-    left: 10%;
-    top:20%
-  }
-  #peopleNum{
-    position: absolute;
-    font-weight:bold;
-    left: 35%;
-    top:7%
-  }
-  #houseNum{
-    position: absolute;
-    font-weight:bold;
-    left: 75%;
-    top:7%
-  }
-  #villageNum{
-    position: absolute;
-    font-weight:bold;
-    left: 35%;
-    top:14%
-  }
-  #buildNum{
-    position: absolute;
-      font-weight:bold;
-      left: 75%;
-      top:14%
-  }
- #hasPropertyNum{
+.sign_png1 {
+  position: absolute;
+  width: 80px;
+  left: 10%;
+  top: 12%;
+}
+.sign_png2 {
+  position: absolute;
+  width: 80px;
+  left: 10%;
+  top: 20%;
+}
+#peopleNum {
+  position: absolute;
+  font-weight: bold;
+  left: 35%;
+  top: 7%;
+}
+#houseNum {
+  position: absolute;
+  font-weight: bold;
+  left: 75%;
+  top: 7%;
+}
+#villageNum {
+  position: absolute;
+  font-weight: bold;
+  left: 35%;
+  top: 14%;
+}
+#buildNum {
+  position: absolute;
+  font-weight: bold;
+  left: 75%;
+  top: 14%;
+}
+#hasPropertyNum {
   position: absolute;
-      font-weight:bold;
-      left: 35%;
-      top:21%
- }
+  font-weight: bold;
+  left: 35%;
+  top: 21%;
+}
 
-#nohasPropertyNum{
+#nohasPropertyNum {
   position: absolute;
-      font-weight:bold;
-      left: 75%;
-      top:21%
- }
- .font{
-    font-size: 10px;
-  }
-  .number{
-    font-size: 30px;
-  }
-    </style>
+  font-weight: bold;
+  left: 75%;
+  top: 21%;
+}
+.font {
+  font-size: 10px;
+}
+.number {
+  font-size: 30px;
+}
+</style>