Integrated home page

pages/m_index.vue → components/h5Index.vue

@@ -153,7 +153,7 @@
 
 <script>
 export default {
-  name: "IndexPage",
+  name: "H5Index",
   data() {
     return {
       isiOS: null,
@@ -167,7 +167,7 @@ export default {
   },
 };
 </script>
-<style>
+<style scoped>
 body {
   margin: 0;
   padding: 0;

components/pcIndex.vue

+<template>
+  <div class="body">
+    <div class="download_component" style="display: block">
+      <div class="float_logo"></div>
+      <div class="download_web">
+        <div class="header_box">
+          <div class="qrcode_box">
+            <vue-qr :text="url" :size="220"></vue-qr>
+          </div>
+          <div class="title_img"></div>
+        </div>
+        <img class="mian_img" src="../assets/images/web-main-img.png.webp" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueQr from "vue-qr";
+export default {
+  name: "IndexPage",
+  components: { VueQr },
+  computed: {
+    url() {
+      return location.href;
+    },
+  },
+};
+</script>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+<style scoped>
+.body {
+  width: 100%;
+  height: 100%;
+}
+.download_component {
+  width: 100%;
+  height: 100%;
+}
+.float_logo {
+  background: url(../assets/images/web-float-logo.png.webp);
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-size: 100% 100%;
+  width: 184px;
+  height: 195px;
+  z-index: 1;
+}
+.download_web {
+  width: 100%;
+  height: 100vh;
+  margin: 0 auto;
+  background: url(../assets/images/web-bg.jpg.webp) top center no-repeat;
+  background-size: cover;
+  background-position: center bottom;
+  overflow: auto;
+}
+.header_box {
+  padding-top: 50px;
+  display: flex;
+  justify-content: center;
+}
+.qrcode_box {
+  margin-top: 35px;
+  width: 236px;
+  height: 238px;
+  margin-right: 87px;
+  border-radius: 10px;
+  box-shadow: 0 5px 12px 0 rgb(0 0 0 / 13%);
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title_img {
+  background: url(../assets/images/web-title-img.png.webp);
+  margin-top: 17px;
+  width: 326px;
+  height: 270px;
+  background-size: 100% 100%;
+}
+.mian_img {
+  height: calc(100% - 390px);
+  width: auto;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

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',
 

pages/index.vue

 <template>
-  <div v-if="isDisplay" class="body">
-    <div class="download_component" style="display: block">
-      <div class="float_logo"></div>
-      <div class="download_web">
-        <div class="header_box">
-          <div class="qrcode_box">
-            <vue-qr :text="url" :size="220"></vue-qr>
-          </div>
-          <div class="title_img"></div>
-        </div>
-        <img class="mian_img" src="../assets/images/web-main-img.png.webp" />
-      </div>
-    </div>
+  <div>
+    <PcIndex v-if="isPc"></PcIndex>
+    <h5Index v-else></h5Index>
   </div>
 </template>
 
 <script>
-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;
+        vm.isPc = false;
       }
     });
   },
   data() {
     return {
-      isDisplay: false,
+      isPc: true,
     };
   },
-  computed: {
-    url() {
-      return location.href;
-    },
-  },
 };
-</script>
-<style>
-body {
-  margin: 0;
-  padding: 0;
-}
-</style>
-<style scoped>
-.body {
-  width: 100%;
-  height: 100%;
-}
-.download_component {
-  width: 100%;
-  height: 100%;
-}
-.float_logo {
-  background: url(../assets/images/web-float-logo.png.webp);
-  position: fixed;
-  left: 0;
-  top: 0;
-  background-size: 100% 100%;
-  width: 184px;
-  height: 195px;
-  z-index: 1;
-}
-.download_web {
-  width: 100%;
-  height: 100vh;
-  margin: 0 auto;
-  background: url(../assets/images/web-bg.jpg.webp) top center no-repeat;
-  background-size: cover;
-  background-position: center bottom;
-  overflow: auto;
-}
-.header_box {
-  padding-top: 50px;
-  display: flex;
-  justify-content: center;
-}
-.qrcode_box {
-  margin-top: 35px;
-  width: 236px;
-  height: 238px;
-  margin-right: 87px;
-  border-radius: 10px;
-  box-shadow: 0 5px 12px 0 rgb(0 0 0 / 13%);
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.title_img {
-  background: url(../assets/images/web-title-img.png.webp);
-  margin-top: 17px;
-  width: 326px;
-  height: 270px;
-  background-size: 100% 100%;
-}
-.mian_img {
-  height: calc(100% - 390px);
-  width: auto;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>
+</script>
\ No newline at end of file