移动端 登录页

src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="vue-root">
+  <div
+    class="vue-root"
+    :class="{
+      mobile: isMobile,
+    }"
+  >
     <router-view />
     <div
       v-if="isMobile"

src/views/gui/Login.vue

@@ -227,4 +227,58 @@ export default {
     }
   }
 }
+
+.mobile {
+  .rule-desc {
+    > .wrapper-1 {
+      width: 100vw;
+      height: calc(100vw / 403 * 410);
+      background-image: url(@/assets/images/login-bg-mobile.png);
+      padding: 5.8vw 0 0 0;
+      > .close {
+        top: 3vw;
+        right: 13.7vw;
+        width: 7.5vw;
+        height: 7.5vw;
+      }
+      > h1 {
+        padding: 0 9vw 4vwx 9vw;
+        font-size: 6.4vw;
+        margin-bottom: 12vw;
+      }
+      > .form-item {
+        height: 9vw;
+        width: 62vw;
+        padding: 0 2.7vw;
+        margin-bottom: 3.5vw;
+        > img {
+          width: 5.2vw;
+          height: 5.2vw;
+          margin-right: 3.2vw;
+        }
+        > input {
+          font-size: 3.7vw;
+        }
+      }
+
+      > button.login {
+        height: 10.4vw;
+        width: 62vw;
+        margin-top: 10vw;
+        margin-bottom: 2vw;
+        > .text-wrapper {
+          font-size: 4.3vw;
+          letter-spacing: 0.8vw;
+        }
+      }
+      > button.sign-up {
+        height: 10.4vw;
+        width: 62vw;
+        > .text-wrapper {
+          font-size: 4.3vw;
+        }
+      }
+    }
+  }
+}
 </style>