修改样式

src/views/login/mobile.vue

@@ -2,7 +2,6 @@
   <div class="mobileLogin">
     <div class="login-content">
       <div class="login-content-center" v-if="!show">
-        <div class="login-title"> <img src="@/assets/images/login/login.png" /></div>
         <div class="login-input-box">
           <div class="login-item">
             <input class="login-input login-input-deviceid" type="text" placeholder="请输入设备ID"
@@ -19,7 +18,6 @@
           <div @click="getLogin" class="login-btn">登 录</div>
         </div>
       </div>
-
       <div v-else style=" width: 100%; color: #ffffff; font-size:20px; text-align: center; ">
         <div style="margin-bottom: 10px;">模拟发送手势：</div>
         <div @click="getCmdtest(1)" style="margin-bottom: 10px;">1、左滑动（切换项目）</div>
@@ -48,15 +46,21 @@ const { show, handcontroller, loginForm } = toRefs(data);
 
 // 登录
 const getLogin = () => {
+  let sid = route.query.sid;
+  if(sid==undefined && !sid){
+    proxy?.$modal.msgWarning("缺少SID，请重新扫码！");
+    return false;
+  }
   let deviceid = loginForm.value.deviceid;
   let username = loginForm.value.username;
   let password = loginForm.value.password;
   if (!deviceid || !username || !password) {
+    proxy?.$modal.msgWarning("请填写完整信息！");
     return false;
   }
   proxy?.$modal.loading();
   let params = {
-    sid: route.query.sid,
+    sid,
     deviceid,
     username,
     password,
@@ -104,20 +108,17 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .mobileLogin {
-  .login-title {
-    img {
-      width: 9.88rem;
-    }
-
-    margin-bottom: 1.8rem;
-  }
+  width: 100%;
+  height: 100vh;
+  background: url("@/assets/images/gesture/mobile.png") top center no-repeat;
+  background-size: cover;
 
   .login-content {
-    width: 90%;
+    width: 80%;
     height: 100vh;
     margin: 0 auto;
     display: flex;
-    align-items: center;
+    align-items:flex-end;
     justify-content: center;
 
     .login-content-center {
@@ -126,51 +127,50 @@ onMounted(() => {
       justify-content: center;
       flex-wrap: wrap;
       width: 100%;
-
       .login-input-box {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         width: 100%;
-        padding: 6.8vh 0;
-        border-radius: 1.42rem;
+        padding: 5vh 0;
+        border-radius: 2rem;
         opacity: 1;
-        background: linear-gradient(68deg, #1D2F3D -85%, #304453 96%);
-        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
-
+        background-color: rgba(#ffffff,0.9);
+        margin-bottom: 12vh;
         .login-item {
           width: 100%;
-          margin-bottom: 2rem;
+          padding:0 10%;
+          box-sizing: border-box;
+          margin-bottom: 4rem;
 
           .login-input {
-            width: 52.6%;
-            height: 6rem;
-            line-height: 6rem;
-            border-radius: 0.83rem;
+            width:100%;
+            height: 10rem;
+            line-height: 10rem;
+            border-radius: 1rem;
             padding: 0 1rem;
             text-align: center;
-            font-size: 3rem;
+            font-size: 4rem;
             opacity: 1;
             background: #EAEAEA;
             box-sizing: border-box;
             border: 1px solid #FFFFFF;
-            box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
+            box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.2);
           }
         }
 
 
         .login-btn {
-          width: 36.7%;
-          height: 6rem;
-          line-height: 6rem;
-          border-radius: 0.83rem;
-          font-size: 3rem;
+          width: 60%;
+          height: 10rem;
+          line-height: 10rem;
+          border-radius: 5rem;
+          font-size: 4.5rem;
           opacity: 1;
           text-align: center;
           cursor: pointer;
           background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
-          box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
         }
       }
     }