denglu

src/views/login/index.vue

@@ -1,60 +1,39 @@
 <template>
   <div class="login-container">
+    <div style="width: 100%;text-align: center">
+      <img style="margin: 0 auto;margin-top: 8%" :src="title" alt="">
+    </div>
     <el-row class="window-login">
-      <el-col :span="9">
-        <div id="u35">
-          <div id="u37">
-            <div id="u39">
-              <div id="u39_text" class="text ">
-                <span></span>
-              </div>
-            </div>
-            <div id="u38">
-              <div id="u38_text" class="text">
-                <p style="font-size:20px;line-height:normal;">
-                  <span style="font-family:'FZXBSJW--GB1-0', 'FZXiaoBiaoSong-B05S', sans-serif;font-weight:400;">
-                    牵引供电维护管理信息化系统
-                  </span>
-                </p>
-                <p style="font-size:14px;line-height:24px;margin-top: 5px">
-                  <span style="font-family:'Helvetica', sans-serif;font-weight:400;">
-                    Information System Platform
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+      <el-col :span="15" class="picColor">
+        <img style="width: 100%;height: 100%" :src="pic" alt="">
       </el-col>
-      <el-col :span="15">
+      <el-col :span="9" style="background-color: #fff">
         <el-form
           ref="loginForm"
           :model="loginForm"
           :rules="loginRules"
-          class="login-form"
           auto-complete="on"
-          label-position="left"
+          label-position="top"
         >
-          <div class="title-container" style="margin-top:45px;margin-bottom: 80px">
-            <h2 class="title">用户登录 <span style="font-size: 15px">USER LOGIN</span></h2>
+          <div class="title-container" style="margin-top:45px;margin-bottom: 20px;">
+            系统账户登
           </div>
 
-          <el-form-item prop="username">
+          <el-form-item label="账号名称" prop="username">
             <el-input
               ref="username"
               v-model="loginForm.username"
               placeholder="请输入用户名"
               name="username"
-              prefix-icon="el-icon-s-check"
               type="text"
               tabindex="1"
               auto-complete="on"
-              size="medium"
+              size="small"
               @keyup.enter.native="handleLogin"
             />
           </el-form-item>
 
-          <el-form-item prop="password" style="position: relative">
+          <el-form-item label="账号密码" prop="password" style="position: relative">
             <el-input
               :key="passwordType"
               ref="password"
@@ -62,41 +41,55 @@
               :type="passwordType"
               placeholder="请输入密码"
               name="password"
-              prefix-icon="el-icon-lock"
               tabindex="2"
               auto-complete="on"
+              size="small"
               @keyup.enter.native="handleLogin"
             />
-            <span class="show-pwd" style="position: absolute;right: 12px;top: 8px;" @click="showPwd">
+            <span class="show-pwd" style="position: absolute;right: 12px;" @click="showPwd">
               <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
             </span>
           </el-form-item>
 
-          <el-form-item>
+          <el-form-item label="验证码">
             <el-input
               ref="code"
               v-model="loginForm.code"
               style="width: 70%;vertical-align:middle"
               placeholder="请输入验证码"
-              prefix-icon="el-icon-lock"
               tabindex="2"
               auto-complete="on"
+              size="mini"
               @keyup.enter.native="handleLogin"
             />
-            <img :src="imgSrc" alt="" style="margin-left:5%;width: 25%;height: 45px;vertical-align:middle;" @click="captchaImage">
+            <img :src="imgSrc" alt="" style="margin-left:5%;width: 25%;height: 40px;vertical-align:middle;" @click="captchaImage">
           </el-form-item>
 
           <el-form-item>
             <el-tooltip class="item" effect="dark" content="请联系管理员重置密码" placement="top">
-              <el-button type="text" style="float: right;padding:0">忘记密码？</el-button>
+              <el-button
+                type="text"
+                style="float: right;padding:0;
+                color: #406AE1;
+                font-family: Source Han Sans CN;
+                font-weight: regular;
+                font-size: 12px;
+                line-height: 22px;
+                letter-spacing: 0px;"
+              >忘记密码？</el-button>
             </el-tooltip>
           </el-form-item>
           <el-button
             type="primary"
-            style="width:100%;margin-bottom:30px;"
+            style="width:100%;
+            margin:10px 0 35px;
+            border-radius: 40px;
+            background: #406AE1;
+            box-shadow: 0px 6px 4px 0px #547BD53F;"
             @keyup.enter.native="handleLogin"
             @click.native.prevent="handleLogin"
-          ><h2 style="margin: 5px;color: white">登  录</h2>
+          >
+            <h3 style="margin: 0;color: white">登  录</h3>
           </el-button>
         </el-form>
       </el-col>
@@ -106,10 +99,15 @@
 
 <script>
 import { captchaImage } from '@/api/user'
+import pic from '@/assets/login/pic.png'
+import title from '@/assets/login/title@1.png'
+
 export default {
   name: 'Login',
   data() {
     return {
+      pic: pic,
+      title: title,
       loginForm: {
         username: 'railway',
         password: 'admin123',
@@ -177,98 +175,55 @@ export default {
 
 <style lang="scss">
   .login-container {
+    background-image: url('../../assets/login/bg.png');
     .el-form {
-      width: 90%;
+      width: 70%;
       margin: 0 auto;
       .el-input__inner{
-        height: 50px;
+        height: 40px;
       }
     }
+
   }
 </style>
 
 <style lang="css" scoped>
-
+  .title-container{
+    color: #547BD4;
+    font-family: Noto Sans Malayalam UI;
+    font-size: 28px;
+    line-height: 26px;
+    letter-spacing: 0px;
+  }
+  /deep/ .el-input__inner {
+    border: 0;
+    border-bottom: 1px solid #DCDFE6;
+    border-radius: 0;
+    padding: 0;
+  }
+  /deep/ .el-form-item__label{
+    padding:0;
+  }
   .login-container {
     min-height: 100%;
     width: 100%;
     overflow: hidden;
   }
 
+  /deep/ .el-form-item{
+    margin-bottom: 15px;
+  }
+
   .window-login {
     overflow: hidden;
     border-radius: 15px;
     margin: 0 auto;
-    margin-top: 9%;
-    width: 800px;
+    margin-top: 50px;
+    width: 900px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
   }
-
-  #u35 {
-    width: 100%;
-    height: 540px;
-    font-family: '微软雅黑', sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    background-image: url(https://axure-file.lanhuapp.com/83ee941a-8080-4603-ab36-dc56ce561371__b332944a16cd91abd30b3a70f019b96f.svg);
-  }
-
-  #u37 {
-    width: 100%;
-    height: 100%;
-    background-image: url(https://axure-file.lanhuapp.com/83ee941a-8080-4603-ab36-dc56ce561371__3da133640c87c7921faf320a11a3196b.svg);
-    background-position: left top;
-    background-repeat: no-repeat;
-    background-attachment: scroll;
-    background-size: 1440px 712px;
-    background-origin: border-box;
-    border: none;
-  }
-
-  #u38 {
-    height: 60px;
-    color: #FFFFFF;
-  }
-
-  #u38 p {
-    margin: 0;
-  }
-
-  #u38 .text {
-    text-align: center;
-    padding: 2px 2px 2px 2px;
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  #u38_text {
-    word-wrap: break-word;
-    text-transform: none;
-  }
-
-  #u39 {
-    position: relative;
-    margin: 0 auto;
-    width: 50px;
-    height: 100px;
-    display: flex;
-    font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro Regular', 'Font Awesome 5 Pro', sans-serif;
-    font-weight: 900;
-    font-style: normal;
-    font-size: 72px;
-    color: #FFFFFF;
-  }
-
-  #u39 .text {
-    position: absolute;
-    align-self: center;
-    padding: 0;
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  #u39_text {
-    word-wrap: break-word;
-    text-transform: none;
+  .picColor{
+    background: linear-gradient(166.06deg, #2782DF 0%, #003DAE 100%);
+    box-shadow: 0px 4px 8px 0px #46BBFD5B;
   }
 </style>