登录页兼容 手机端

dsk-operate-ui/src/views/login.vue

@@ -21,7 +21,7 @@
             <img class="img" slot="prefix" src="../assets/images/phone.png"/>
           </el-input>
         </el-form-item>
-        <el-form-item prop="captchaCode" v-if="captchaEnabled">
+        <el-form-item prop="captchaCode" v-if="captchaEnabled" class="el-item-with-code">
           <el-input
             v-model="dxform.captchaCode"
             auto-complete="off"
@@ -34,7 +34,7 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img"/>
           </div>
         </el-form-item>
-        <el-form-item prop="smsCode">
+        <el-form-item prop="smsCode" class="el-item-with-code">
           <el-input
             v-model="dxform.smsCode"
             auto-complete="off"
@@ -87,7 +87,7 @@
             <img class="img" slot="prefix" src="../assets/images/password.png"/>
           </el-input>
         </el-form-item>
-        <el-form-item prop="code" v-if="captchaEnabled">
+        <el-form-item prop="code" v-if="captchaEnabled" class="el-item-with-code">
           <el-input
             v-model="loginForm.code"
             auto-complete="off"
@@ -127,7 +127,7 @@
             <img class="img" slot="prefix" src="../assets/images/phone.png"/>
           </el-input>
         </el-form-item>
-        <el-form-item prop="captchaCode" v-if="captchaEnabled && showcode">
+        <el-form-item prop="captchaCode" v-if="captchaEnabled && showcode" class="el-item-with-code">
           <el-input
             v-model="dxform.captchaCode"
             @focus="getCode"
@@ -141,7 +141,7 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img"/>
           </div>
         </el-form-item>
-        <el-form-item prop="smsCode">
+        <el-form-item prop="smsCode" class="el-item-with-code">
           <el-input
             v-model="dxform.smsCode"
             auto-complete="off"
@@ -633,4 +633,60 @@
     background: #566380;
   }
 }
+
+@media screen and (max-width : 750px){
+  .left {
+    display: none;
+  }
+  .login-form {
+    width: 90%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    margin-top: 0px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+
+    .el-input {
+      width: 100%;
+
+      .el-input__inner::placeholder {
+        font-size: 12px !important;
+      }
+    }
+
+    .el-item-with-code {
+      .el-form-item__content {
+        display: flex;
+        line-height: 1;
+
+        .el-input {
+          float: unset !important;
+          width: 175px !important;
+          min-width: 175px;
+        }
+
+        .login-code {
+          height: 48px;
+          width: auto;
+          flex: 1;
+          float: unset !important;
+
+          &>img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .hqyzm {
+            width: 100%;
+            font-size: 12px;
+            border: unset;
+            border-radius: unset;
+          }
+        }
+      }
+    }
+  }
+}
 </style>