移动端首页

src/pages/index/index.vue

@@ -35,11 +35,11 @@ export default {
     });
   },
   mounted() {},
-  methods:{
+  methods: {
     enter() {
-      this.$router.push('/ruins')
-    }
-  }
+      this.$router.push("/ruins");
+    },
+  },
 };
 </script>
 
@@ -47,51 +47,6 @@ export default {
 .wrapper {
   width: 100%;
   height: 100%;
-}
-.mobileLayout {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  bottom: 10vh;
-  .bg {
-    width: 100%;
-    height: 100%;
-  }
-  .logo {
-    position: fixed;
-    top: 5vw;
-    left: 5vw;
-    width: 40%;
-    z-index: 100;
-  }
-  .search-bar {
-    position: fixed;
-    top: 5vw;
-    right: 5vw;
-    width: 30%;
-    z-index: 100;
-  }
-}
-.layout {
-  position: relative;
-  z-index: 9;
-  width: 100%;
-  height: 100%;
-  .xlz-bg {
-    position: absolute;
-    top: 50%;
-    z-index: 89;
-    transform: translateY(-50%);
-  }
-  .bg {
-    position: absolute;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-    left: 0;
-  }
   .bgimg {
     position: absolute;
     z-index: 99;
@@ -129,4 +84,33 @@ export default {
     }
   }
 }
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    .bgimg {
+      background: url("../../assets/images/mobile-index-bg.png") no-repeat
+        center center;
+      .con {
+        width: 80%;
+        left: 50%;
+        top:0;
+        margin-left: -40%;
+        margin-top:50%;
+        .btn {
+          background: url(../../assets/images/mobile-btn-bg.png) no-repeat center center;
+          background-size: 100% 100%;
+          margin-left: 0px;
+          height: 17vw;
+          line-height: 17vw;
+          .btn-txt {
+            font-size: 5vw;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            color: #6a2121;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -13,8 +13,8 @@ VueRouter.prototype.push = function push (location) {
   },
   {
     path: '/index',
-    name: 'Main',
-    component: () => import('../pages/Main/index.vue')
+    name: 'Index',
+    component: () => import('../pages/index/index.vue')
   },
   {
     path: '/ruins',