增加老年化指引

FrontCode2/sunshine_levy/src/App.vue

@@ -1,5 +1,29 @@
 <template>
   <div id="app">
+    <van-overlay :show="show" @click="show = false">
+      <div class="overlay">
+        <div class="mode">
+          进入老年模式
+        </div>
+        <img src="@/assets/img/jiantou.png" />
+        <div>
+          为方便老年用户，可点击此按钮进入
+          <span>老年模式</span>
+          查询信息。
+        </div>
+        <div>
+          更大的字体，更多的贴心～
+        </div>
+        <div>
+          轻触屏幕关闭此指引
+        </div>
+        <div>
+          <input type="radio" @click="inputEvent" />
+
+          <span>下次进入不显示</span>
+        </div>
+      </div>
+    </van-overlay>
     <van-pull-refresh
       v-model="isLoading"
       loosing-text="释放完成刷新"
@@ -28,7 +52,9 @@ export default {
   data() {
     return {
       mode: false,
-      isLoading: true
+      isLoading: true,
+
+      show: true
     };
   },
   created() {
@@ -37,6 +63,9 @@ export default {
     } else {
       this.mode = false;
     }
+    if (localStorage.getItem("overlay")) {
+      this.show = false;
+    }
   },
   mounted() {},
   methods: {
@@ -55,6 +84,9 @@ export default {
       setTimeout(() => {
         this.isLoading = false;
       }, 1000);
+    },
+    inputEvent() {
+      localStorage.setItem("overlay", "flase");
     }
   }
 };
@@ -68,6 +100,69 @@ export default {
   position: relative;
   box-sizing: border-box;
   background: #f6f7f8;
+  .overlay {
+    color: #c9c0c0;
+    font-size: 22px;
+
+    .mode {
+      position: absolute;
+      right: 5px;
+      top: 15px;
+      background: #f82b36;
+      width: 124px;
+      height: 25px;
+      text-align: center;
+      line-height: 25px;
+      border-radius: 2px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+    }
+    img {
+      right: 130px;
+      position: absolute;
+      top: 50px;
+      width: 120px;
+    }
+    > div:nth-child(n + 3) {
+      text-align: center;
+      width: 100%;
+    }
+    > :nth-child(3) {
+      top: 300px;
+      position: absolute;
+      > span {
+        font-size: 24px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+    > :nth-child(4) {
+      top: 410px;
+
+      position: absolute;
+    }
+    > :nth-child(5) {
+      top: 500px;
+
+      position: absolute;
+    }
+    > :nth-child(6) {
+      display: flex;
+      align-items: center;
+      top: 550px;
+      justify-content: center;
+      position: absolute;
+      input {
+        width: 30px;
+        height: 30px;
+        margin-right: 20px;
+      }
+      span {
+        color: #c6e1f0;
+      }
+    }
+  }
   .bottomContent {
     position: absolute;
     bottom: 10px;

FrontCode2/sunshine_levy/src/elementui/index.js

@@ -7,7 +7,8 @@ import {
   Card,
   Loading,
   Message,
-  Notification
+  Notification,
+  Input
 } from "element-ui";
 
 Vue.use(Form);
@@ -15,6 +16,7 @@ Vue.use(FormItem);
 Vue.use(Button);
 Vue.use(Card);
 Vue.use(Loading);
+Vue.use(Input);
 
 Vue.component(Message);
 Vue.component(Notification);

FrontCode2/sunshine_levy/src/main.js

@@ -20,7 +20,8 @@ import {
   CellGroup,
   Notify,
   PullRefresh,
-  Toast
+  Toast,
+  Overlay
 } from "vant";
 
 Vue.use(Button)
@@ -29,6 +30,7 @@ Vue.use(Button)
   .use(CellGroup);
 Vue.use(PullRefresh);
 Vue.use(Toast);
+Vue.use(Overlay);
 
 Vue.use(ElementUI);
 

FrontCode2/sunshine_levy/src/views/index.vue

@@ -296,7 +296,6 @@ export default {
     } else {
       this.onInit();
     }
-    // this.onInit();
     this.setLocationAplus();
     SetTicket(this.$route.query.ticket);
     $(".logout").css("display", "none");