Add h5 page

nuxt.config.js

@@ -2,6 +2,11 @@ export default {
     // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
     ssr: false,
 
+    server: {
+        port: 3000,
+        host: '0.0.0.0',
+    },
+
     // Target: https://go.nuxtjs.dev/config-target
     target: 'static',
 
@@ -24,24 +29,24 @@ export default {
 
     // Global CSS: https://go.nuxtjs.dev/config-css
     css: [
-    'element-ui/lib/theme-chalk/index.css'
+        'element-ui/lib/theme-chalk/index.css',
+        'vant/lib/index.css'
     ],
 
     // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
     plugins: [
-    '@/plugins/element-ui'
+        '@/plugins/element-ui',
+        '@/plugins/vant'
     ],
 
     // Auto import components: https://go.nuxtjs.dev/config-components
     components: true,
 
     // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  buildModules: [
-  ],
+    buildModules: [],
 
     // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
-  ],
+    modules: [],
 
     // Build Configuration: https://go.nuxtjs.dev/config-build
     build: {

package-lock.json

@@ -11,12 +11,12 @@
                 "core-js": "^3.25.3",
                 "element-ui": "^2.15.10",
                 "nuxt": "^2.15.8",
+                "vant": "^2.12.53",
                 "vue": "^2.7.10",
                 "vue-qr": "^4.0.9",
                 "vue-server-renderer": "^2.7.10",
                 "vue-template-compiler": "^2.7.10"
-      },
-      "devDependencies": {}
+            }
         },
         "node_modules/@ampproject/remapping": {
             "version": "2.2.0",
@@ -2766,6 +2766,16 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@vant/icons": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
+            "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+        },
+        "node_modules/@vant/popperjs": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+            "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+        },
         "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
@@ -12405,6 +12415,21 @@
                 "node": ">= 0.4.0"
             }
         },
+        "node_modules/vant": {
+            "version": "2.12.53",
+            "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.53.tgz",
+            "integrity": "sha512-f/wSWMCm/fd8bvm2QfPkpPqYUn8gwmBGw3DxAUPSTd/5prc1cRn23HEak8LDMJ5FmfW9mp7G5vdGlnEYCtww8Q==",
+            "dependencies": {
+                "@babel/runtime": "7.x",
+                "@vant/icons": "^1.7.1",
+                "@vant/popperjs": "^1.1.0",
+                "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+                "vue-lazyload": "1.2.3"
+            },
+            "peerDependencies": {
+                "vue": ">= 2.6.0"
+            }
+        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -12446,6 +12471,11 @@
             "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
             "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
         },
+        "node_modules/vue-lazyload": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+            "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+        },
         "node_modules/vue-loader": {
             "version": "15.10.1",
             "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",

package.json

@@ -12,6 +12,7 @@
         "core-js": "^3.25.3",
         "element-ui": "^2.15.10",
         "nuxt": "^2.15.8",
+        "vant": "^2.12.53",
         "vue": "^2.7.10",
         "vue-qr": "^4.0.9",
         "vue-server-renderer": "^2.7.10",

pages/index.vue

 <template>
-  <div class="body">
+  <div v-if="isDisplay" class="body">
     <div class="bg">
       <div class="mobile_box">
         <div class="logo">
@@ -7,13 +7,6 @@
         </div>
         <div class="ewm">
           <div id="qrcode1">
-            <!-- <div id="qrcode" title="https://tgapp.vip/pc/">
-              <canvas width="256" height="256" style="display: none"></canvas
-              ><img
-                src="data:image/png;base64,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"
-                style="display: block; width: 12rem"
-              />
-            </div> -->
             <vue-qr :text="url" :size="192"></vue-qr>
           </div>
         </div>
@@ -33,6 +26,20 @@ import VueQr from "vue-qr";
 export default {
   name: "IndexPage",
   components: { VueQr },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+        vm.$router.push({ name: "m_index" });
+      } else {
+        vm.isDisplay = true;
+      }
+    });
+  },
+  data() {
+    return {
+      isDisplay: false,
+    };
+  },
   computed: {
     url() {
       return location.href;

pages/m_index.vue

+<template>
+  <div class="body">
+    <img class="plum" src="../assets/images/bg_1.png" />
+    <img class="plum right" src="../assets/images/bg_1.png" />
+    <img class="lantern" src="../assets/images/bg_2.png" />
+    <img class="lantern right" src="../assets/images/bg_2.png" />
+    <div id="download_component" style="display: block">
+      <div
+        class="app"
+        style="
+          background-image: url('https://senbackkg.salinent.com/clientManage/279d6b6f65f445c6b77e00461c543fb7.jpg');
+        "
+      >
+        <div class="download">
+          <h3 class="show_code"></h3>
+          <div class="content">
+            <div class="logo_box">
+              <img
+                src="https://senbackkg.salinent.com/clientManage/490cfea3327445e8b19248fd6926d9fa.png"
+              />
+            </div>
+            <van-swipe
+              class="my-swipe"
+              :autoplay="3000"
+              indicator-color="#f4af00"
+            >
+              <van-swipe-item>
+                <img
+                  alt=""
+                  class="download_slide_img"
+                  src="https://senbackkg.salinent.com/clientManage/1ab04b72c7464a7eadf2ac855308bc9e.png"
+              /></van-swipe-item>
+              <van-swipe-item>
+                <img
+                  alt=""
+                  class="download_slide_img"
+                  src="https://senbackkg.salinent.com/clientManage/d15f340d4a434309ac1efc1093fb367d.png"
+              /></van-swipe-item>
+              <van-swipe-item>
+                <img
+                  alt=""
+                  class="download_slide_img"
+                  src="https://senbackkg.salinent.com/clientManage/d38b2a0a9bfb4342a8e33038bdc01888.png"
+              /></van-swipe-item>
+              <van-swipe-item>
+                <img
+                  alt=""
+                  class="download_slide_img"
+                  src="https://senbackkg.salinent.com/clientManage/559c34bad6cd42068efe14a33f06e23c.png"
+              /></van-swipe-item>
+            </van-swipe>
+            <div v-if="true">
+              <div>
+                <div class="install_btn_wrap">
+                  <div class="process_box"></div>
+                  <a
+                    class="down_btn"
+                    href="/d50232e4a3e846cabcd0877c05678902.mobileprovision"
+                    >立即下载</a
+                  >
+                </div>
+              </div>
+              <div class="ios_trust_tip"></div>
+              <div class="open_h5_wrap" style="margin-top: 0.5rem">
+                <a
+                  target="_blank"
+                  class="down_btn2"
+                  href="https://www.yibovip613.com:34225/entry/login"
+                  >若无法下载APP，请点击此处使用手机网页版</a
+                >
+              </div>
+              <div class="download_tip">
+                <span>为了您的隐私安全，请勿与“国家反诈中心”APP同设备使用</span
+                ><span class="h5-btn-show" style="display: none"
+                  >；若无法正常安装，请使用手机自带浏览器打开本页面</span
+                ><span
+                  class="download_tip_text h5-btn-show"
+                  style="display: none"
+                  >（谷歌浏览器Chrome、苹果浏览器Safari）</span
+                >
+              </div>
+              <div class="scroll_view_tutorials">
+                <p>下滑查看安装教程</p>
+                <i class="arrow_down_img"></i>
+              </div>
+            </div>
+            <div v-else>
+              <div style="display: flex; justify-content: space-evenly">
+                <div class="install_btn_wrap" style="width: 10.8rem">
+                  <a
+                    class="down_btn"
+                    href="/d50232e4a3e846cabcd0877c05678902.mobileprovision"
+                    >立即下载</a
+                  >
+                </div>
+                <div class="open_h5_wrap" style="width: 8rem">
+                  <a
+                    target="_blank"
+                    class="down_btn2"
+                    href="https://www.yibovip613.com:34225/entry/login"
+                    >手机网页版</a
+                  >
+                </div>
+              </div>
+
+              <div class="download_tip">
+                <span
+                  >下载安装过程中请勿切换网络，推荐使用手机自带浏览器打开本页面</span
+                >
+              </div>
+              <div class="scroll_view_tutorials">
+                <p>下滑查看安装教程</p>
+                <i class="arrow_down_img"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="isiOS" class="tutorials">
+          <div class="tutorials_logo_wrap">
+            <img style="height: 2rem" src="../assets/images/apple.webp" />
+          </div>
+          <img class="tutorials_bg_img" src="../assets/images/apple_rule.png" />
+        </div>
+        <div v-else class="tutorials">
+          <div class="tutorials_logo_wrap">
+            <img style="height: 2rem" src="../assets/images/android.webp" />
+          </div>
+          <img
+            class="tutorials_bg_img"
+            src="../assets/images/android_rule.png.png"
+          />
+        </div>
+      </div>
+      <a
+        target="_blank"
+        href="https://app-download-service.2edfgs.com/download?siteId=iUeAl7xM"
+        ><div id="sign_off_wrap" class="sign_off_wrap">
+          <img class="sign_off_img" src="../assets/images/sign-off.png" /></div
+      ></a>
+
+      <div class="guide_tip_mask"><img class="guide_tip_img" /></div>
+    </div>
+    <script>
+      !(function (win) {
+        // 禁用safari缩放
+        win.document.addEventListener("gesturestart", function (e) {
+          e.preventDefault();
+        });
+      })(window);
+    </script>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IndexPage",
+  data() {
+    return {
+      isiOS: null,
+    };
+  },
+  mounted() {
+    const u = navigator.userAgent;
+    const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
+    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+    this.isiOS = isiOS;
+  },
+};
+</script>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: PingFangSC-Regular, sans-serif;
+  outline: none;
+  border: none;
+  text-decoration: none;
+}
+</style>
+<style scoped>
+.my-swipe .van-swipe-item {
+  color: #fff;
+  font-size: 20px;
+  line-height: 150px;
+  text-align: center;
+}
+#download_component {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+.app {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+.skin_top_wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  width: 100%;
+  display: none;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+.skin_top_wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  width: 100%;
+  display: none;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+.download {
+  min-height: 12.68rem;
+  background-size: 100% auto;
+  background-position: center top;
+  position: relative;
+}
+.show_code {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 0.24rem;
+  color: #ddd;
+  z-index: 1;
+}
+.content {
+  color: #f4af00;
+  font-size: 0.24rem;
+  padding-bottom: 0.12rem;
+}
+.logo_box {
+  width: 100%;
+  text-align: center;
+  font-size: 0;
+  margin-top: 0.6rem;
+}
+.logo_box img {
+  height: 2.72rem;
+  vertical-align: middle;
+}
+.install_btn_wrap {
+  display: flex;
+  justify-content: center;
+}
+.down_btn {
+  font-size: 1rem;
+  background-image: linear-gradient(90deg, #ffe88a 0%, #fccb14 100%);
+  color: #26283a;
+  width: 20rem;
+  text-align: center;
+  height: 44px;
+  line-height: 44px;
+  border-radius: 44px;
+}
+.down_btn2 {
+  font-size: 12px;
+  color: #f4af00;
+  border: 0.02rem solid #f4af00;
+  width: 20rem;
+  text-align: center;
+  height: 44px;
+  line-height: 44px;
+  border-radius: 44px;
+}
+.trust_btn {
+  display: none;
+  width: 5.08rem;
+}
+.disabled_btn {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.ios_trust_tip {
+  display: none;
+}
+.open_h5_wrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.download_tip {
+  margin-top: 0.6rem;
+  padding: 0 0.42rem;
+  text-align: center;
+  font-size: 0.2rem;
+  color: #4e5566;
+}
+.scroll_view_tutorials {
+  margin-top: 0.12rem;
+  font-size: 0.24rem;
+  color: #f4af00;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.arrow_down_img {
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-left: 0.06rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url(../assets/images/iconJiantou.png);
+}
+.tutorials {
+  margin-top: 3rem;
+  background-size: 100% auto;
+  background-position: center top;
+}
+.tutorials_logo_wrap {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.tutorials_bg_img {
+  width: 100%;
+}
+.sign_off_wrap {
+  position: fixed;
+  top: 25rem;
+  right: 0;
+  z-index: 2;
+  width: 5.68rem;
+  background: #f4af00;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 0.8rem 0 0 0.8rem;
+}
+.sign_off_img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.download_slide_img {
+  width: 100%;
+}
+.plum {
+  position: absolute;
+  width: 100px;
+}
+.plum.right {
+  right: 0;
+  transform: scaleX(-1);
+}
+.lantern {
+  position: absolute;
+  width: 30px;
+  transform: scaleX(-1);
+  top: 10px;
+  left: 15px;
+}
+.lantern.right {
+  transform: scaleX(1);
+  left: unset;
+  right: 15px;
+}
+</style>>

plugins/vant.js

+import Vue from 'vue'
+import Vant from 'vant'
+
+Vue.use(Vant)
\ No newline at end of file