返回首页，首页app二维码下载

src/views/home.vue

@@ -16,10 +16,17 @@
     <div class="arrow">
       <img src="./../assets/images/方向箭头.png" alt="" />
     </div>
+    <img class="qrCode" src="./../assets/images/App.png" alt="" />
+    <div class="downloadInfo">请使用浏览器下载</div>
+    <!-- <el-popover placement="bottom" width="140" trigger="hover">
+      <img class="qrCode" src="./../assets/images/App.png" alt="" />
+      <div class="downloadInfo">请使用浏览器下载</div>
+      <el-button slot="reference" class="elBottom">App下载</el-button>
+    </el-popover> -->
 
     <div class="Jump-box">
       <div class="Jump" v-for="(item, index) in num" :key="index">
-        <router-link :to="{path:item.path,query:{ params:item.TapId}}">
+        <router-link :to="{ path: item.path, query: { params: item.TapId } }">
           <div class="content">
             <div>
               <img :src="item.icon" class="dataList-img" />
@@ -29,8 +36,7 @@
         </router-link>
       </div>
     </div>
-    <div class="footerTxt">©2021 广西壮族自治区民政厅 版权所有
-</div>
+    <div class="footerTxt">©2021 广西壮族自治区民政厅 版权所有</div>
   </div>
 </template>
 
@@ -65,7 +71,7 @@ export default {
         },
         {
           name: "两项补贴",
-         path: "/entrance",
+          path: "/entrance",
           TapId: "7",
           icon: require("@/assets/images/两项补贴.png"),
         },
@@ -97,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footerTxt{
+.footerTxt {
   margin-top: 50px;
   color: #fff;
   width: 100%;
@@ -164,4 +170,30 @@ h2 {
   position: absolute;
   z-index: -1;
 }
+
+.qrCode {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 120px;
+  height: 120px;
+}
+
+.elBottom {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  font-size: 16px;
+  color: #888;
+  background-color: #041B44;
+  border: none;
+}
+
+.downloadInfo {
+  position: fixed;
+  top: 150px;
+  right: 16px;
+  color: #fff;
+  text-align: center;
+}
 </style>
\ No newline at end of file

src/views/unified/entrance.vue

 <template>
   <div class="page">
-     <img
+    <img
       src="./../../assets/images/3d8ced92b374abc6d74a746df73082e.png"
       alt=""
       class="background-image"
@@ -9,22 +9,41 @@
       <img src="./../../assets/images/标题左边素材.png" alt="" class="about" />
       <div class="title-text">
         民政数据分析系统
-        <img src="./../../assets/images/标题下划线.png" alt="" class="underline" />
+        <img
+          src="./../../assets/images/标题下划线.png"
+          alt=""
+          class="underline"
+        />
       </div>
       <img src="./../../assets/images/标题右边素材.png" alt="" class="about" />
     </div>
 
+    <router-link :to="{ path: '/homes' }">
+      <div class="content">
+        <div></div>
+        <div class="returnHome">返回首页</div>
+      </div>
+    </router-link>
+
+    <br />
     <br />
-    <br>
     <el-row :gutter="18">
       <el-col :span="12" :offset="12" class="top">
-        <div class="switchMa" :class="TapId == item.id? 'blue ':'white'" v-for="item in switchLiet" :key="item.id" @click="getTapId(item.id)" >{{item.name}}</div>
+        <div
+          class="switchMa"
+          :class="TapId == item.id ? 'blue ' : 'white'"
+          v-for="item in switchLiet"
+          :key="item.id"
+          @click="getTapId(item.id)"
+        >
+          {{ item.name }}
+        </div>
       </el-col>
     </el-row>
-    <br>
+    <br />
     <el-row :gutter="18">
       <el-col :span="24" :offset="0">
-        <div class="hez" v-if="TapId == '0'" >
+        <div class="hez" v-if="TapId == '0'">
           <population></population>
         </div>
         <div class="hez" v-if="TapId == '1'">
@@ -37,7 +56,7 @@
           <socialAssistance></socialAssistance>
         </div>
         <div class="hez" v-if="TapId == '4'">
-           <childWelfare></childWelfare>
+          <childWelfare></childWelfare>
         </div>
         <div class="hez" v-if="TapId == '5'">
           <provide></provide>
@@ -51,20 +70,19 @@
       </el-col>
     </el-row>
 
-    <div class="footerTxt">©2021 广西壮族自治区民政厅 版权所有
-</div>
+    <div class="footerTxt">©2021 广西壮族自治区民政厅 版权所有</div>
   </div>
 </template>
 
 <script>
 import population from "./tapSwitch/population.vue";
-import mechanism from "./tapSwitch/mechanism"
+import mechanism from "./tapSwitch/mechanism";
 import marriage from "./tapSwitch/marriage.vue";
 import socialAssistance from "./tapSwitch/socialAssistance.vue";
 import childWelfare from "./tapSwitch/childWelfare.vue";
 import provide from "./tapSwitch/provide.vue";
 import socialOrganization from "./tapSwitch/socialOrganization.vue";
-import subsidies from "./tapSwitch/subsidies.vue"
+import subsidies from "./tapSwitch/subsidies.vue";
 export default {
   components: {
     population,
@@ -74,60 +92,66 @@ export default {
     provide,
     socialOrganization,
     mechanism,
-    subsidies
+    subsidies,
   },
   data() {
     return {
       activeName: "overall",
-      switchLiet:[{
-        name:"人口专题",
-        id:'0',
-      },
-      {
-        name:"机构专题",
-        id:'1',
-      },{
-        name:"婚姻",
-        id:'2',
-      },{
-        name:"社会救助",
-        id:'3',
-      },{
-        name:"儿童福利",
-        id:'4',
-      },{
-        name:"殡葬",
-        id:'5',
-      },{
-        name:"社会组织",
-        id:'6',
-      },{
-        name:"两项补贴",
-        id:'7',
-      },],
-      TapId:'',
+      switchLiet: [
+        {
+          name: "人口专题",
+          id: "0",
+        },
+        {
+          name: "机构专题",
+          id: "1",
+        },
+        {
+          name: "婚姻",
+          id: "2",
+        },
+        {
+          name: "社会救助",
+          id: "3",
+        },
+        {
+          name: "儿童福利",
+          id: "4",
+        },
+        {
+          name: "殡葬",
+          id: "5",
+        },
+        {
+          name: "社会组织",
+          id: "6",
+        },
+        {
+          name: "两项补贴",
+          id: "7",
+        },
+      ],
+      TapId: "",
     };
   },
-  created(){
+  created() {
     if (this.$route.query == {}) {
-      this.TapId = '0'
-    }else{
-      console.log('值',this.$route.query);
-   this.TapId = this.$route.query.params
-      
+      this.TapId = "0";
+    } else {
+      console.log("值", this.$route.query);
+      this.TapId = this.$route.query.params;
     }
-
   },
   methods: {
     handleClick(tab, event) {
-      if(tab.index == 1){
+      if (tab.index == 1) {
         this.$refs.marriage.click();
       }
-       
+
       console.log(tab, event);
     },
-    getTapId(e){
-      this.TapId=e
+    getTapId(e) {
+      this.TapId = e;
     },
   },
 };
@@ -140,27 +164,27 @@ export default {
   position: absolute;
   z-index: -1;
 }
-.footerTxt{
+.footerTxt {
   margin-top: 20px;
   color: #fff;
   width: 100%;
   text-align: center;
   font-size: 16px;
 }
-.switchMa{
+.switchMa {
   margin: 0 10px;
-  cursor:pointer
+  cursor: pointer;
   //background-color: #0b0f4e;
 }
-.white{
+.white {
   color: #fff;
 }
-.blue{
+.blue {
   color: #3974c7;
   border-bottom: 2px solid #3974c7;
   padding-bottom: 6px;
 }
-.hez{
+.hez {
   width: 98%;
   // background-color: blueviolet;
   height: 20px;
@@ -230,4 +254,15 @@ export default {
 .underline {
   width: 100%;
 }
+
+.returnHome {
+  position: fixed;
+  top: 30px;
+  right: 30px;
+  font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
\ No newline at end of file