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="bg">
+      <div class="mobile_box">
+        <div class="logo">
+          <img class="mobile_logo" src="../assets/images/bob-logo.png" />
+        </div>
+        <div class="ewm">
+          <div id="qrcode1">
+            <vue-qr :text="url" :size="192"></vue-qr>
+          </div>
+        </div>
+        <span class="title1">TG体育手机客户端下载</span>
+        <br />
+        <span class="scan1">扫一扫下载APP</span>
+        <span class="cnt"
+          >在这里，有全网最丰富的游戏、最贴心的优惠、最卓越的用户体验，全年无休的技术支持，稳定陪伴您畅快游戏。小体积，大容量，娱乐真的可以信手拈来！</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueQr from "vue-qr";
+export default {
+  name: "PcIndex",
+  components: { VueQr },
+  computed: {
+    url() {
+      return location.href;
+    },
+  },
+};
+</script>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+<style scoped>
+.body {
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, sans-serif;
+}
+.bg {
+  width: 100%;
+  height: 100vh;
+  margin: 0 auto;
+  background: url(../assets/images/bg_down2.jpg) top center no-repeat;
+  background-size: cover;
+}
+.mobile_box {
+  width: 380px;
+  text-align: center;
+  position: absolute;
+  left: 10%;
+  top: 14%;
+}
+.logo {
+  display: inline-block;
+  width: 239px;
+  margin-bottom: 30px;
+}
+.mobile_logo {
+  width: 239px;
+  text-align: center;
+}
+.ewm {
+  display: inline-block;
+  background: #fff;
+  width: 235px;
+  height: 235px;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+  border-radius: 6px;
+}
+.title1 {
+  display: inline-block;
+  font-size: 30px;
+  font-weight: 700;
+  color: #8d531b;
+  font-style: italic;
+  letter-spacing: 2px;
+}
+.scan1 {
+  display: inline-block;
+  font-size: 18px;
+  color: #8d531b;
+  font-weight: 700;
+  line-height: 40px;
+  font-style: italic;
+}
+.cnt {
+  display: inline-block;
+  font-size: 15px;
+  color: #5c5e6a;
+  text-align: center;
+  line-height: 24px;
+  margin-top: 30px;
+  font-weight: 600;
+}
+#qrcode1 {
+  width: 205px;
+  height: 205px;
+  box-sizing: border-box;
+  border: 1px solid #d7cec5;
+  background: #fff;
+  padding: 5px;
+  margin: 0 auto;
+  margin-top: 15px;
+}
+</style>>

pages/index.vue

 <template>
-  <div v-if="isDisplay" class="body">
-    <div class="bg">
-      <div class="mobile_box">
-        <div class="logo">
-          <img class="mobile_logo" src="../assets/images/bob-logo.png" />
-        </div>
-        <div class="ewm">
-          <div id="qrcode1">
-            <vue-qr :text="url" :size="192"></vue-qr>
-          </div>
-        </div>
-        <span class="title1">TG体育手机客户端下载</span>
-        <br />
-        <span class="scan1">扫一扫下载APP</span>
-        <span class="cnt"
-          >在这里，有全网最丰富的游戏、最贴心的优惠、最卓越的用户体验，全年无休的技术支持，稳定陪伴您畅快游戏。小体积，大容量，娱乐真的可以信手拈来！</span
-        >
-      </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 {
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, sans-serif;
-}
-.bg {
-  width: 100%;
-  height: 100vh;
-  margin: 0 auto;
-  background: url(../assets/images/bg_down2.jpg) top center no-repeat;
-  background-size: cover;
-}
-.mobile_box {
-  width: 380px;
-  text-align: center;
-  position: absolute;
-  left: 10%;
-  top: 14%;
-}
-.logo {
-  display: inline-block;
-  width: 239px;
-  margin-bottom: 30px;
-}
-.mobile_logo {
-  width: 239px;
-  text-align: center;
-}
-.ewm {
-  display: inline-block;
-  background: #fff;
-  width: 235px;
-  height: 235px;
-  box-sizing: border-box;
-  margin-bottom: 30px;
-  border-radius: 6px;
-}
-.title1 {
-  display: inline-block;
-  font-size: 30px;
-  font-weight: 700;
-  color: #8d531b;
-  font-style: italic;
-  letter-spacing: 2px;
-}
-.scan1 {
-  display: inline-block;
-  font-size: 18px;
-  color: #8d531b;
-  font-weight: 700;
-  line-height: 40px;
-  font-style: italic;
-}
-.cnt {
-  display: inline-block;
-  font-size: 15px;
-  color: #5c5e6a;
-  text-align: center;
-  line-height: 24px;
-  margin-top: 30px;
-  font-weight: 600;
-}
-#qrcode1 {
-  width: 205px;
-  height: 205px;
-  box-sizing: border-box;
-  border: 1px solid #d7cec5;
-  background: #fff;
-  padding: 5px;
-  margin: 0 auto;
-  margin-top: 15px;
-}
-</style>>
+</script>
\ No newline at end of file