登录页面UI修改

 <template>
   <div class="bg">
     <div class="login-inner-bg login">
+      <h2>{{ productName }}</h2>
       <div class="user_style">
         <h3>欢迎登录</h3>
         <el-form
@@ -14,7 +15,7 @@
             <el-input
               class="username"
               v-model="user.account"
-              placeholder="用户名"
+              placeholder="请输入用户名"
             ></el-input>
           </el-form-item>
           <el-form-item prop="password">
@@ -22,16 +23,16 @@
               type="password"
               class="password"
               v-model="user.password"
-              placeholder="登录密码"
+              placeholder="请输入密码"
             ></el-input>
           </el-form-item>
-          <el-form-item>
+          <!-- <el-form-item>
             <el-checkbox
               label="记住用户名"
               @change="checkUserName"
             ></el-checkbox>
-          </el-form-item>
-          <el-form-item id="login">
+          </el-form-item> -->
+          <el-form-item class="login-btn">
             <el-button type="primary" style="width: 100%" @click="login('user')"
               >登录</el-button
             >
@@ -54,6 +55,7 @@ export default {
         password: "",
         checkStatus: false,
       },
+      productName: "",
       rules: {
         account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
         password: [{ required: true, message: "请填写密码", trigger: "blur" }],
@@ -78,6 +80,7 @@ export default {
     //根据子系统code获取子系统详细信息
     getAction(api.subsystem, params).then((res) => {
       if (res.status === 1) {
+        this.productName = res.content[0].name;
         this.$store.dispatch("products/setData", res.content[0]);
       } else {
         this.$message.error({ message: res.message, showClose: true });
@@ -136,72 +139,126 @@ export default {
 <style scoped lang="scss">
 .username,
 .password {
+  position: relative;
+  &:before {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 10px;
+    top: 7px;
+    background-size: 100% 100%;
+  }
   /deep/ .el-input__inner {
-    border: 1px solid #6bc1fc;
-    background-color: transparent !important;
+    text-indent: 24px;
+    border: 1px solid rgba(11, 161, 248, 0.4);
+    background-color: rgba(6, 135, 205, 0.3) !important;
   }
 }
+.username::before {
+  background-image: url(../../image/username.png);
+}
+.password::before {
+  background-image: url(../../image/password.png);
+}
 .bg {
   width: 100%;
   height: 100%;
-  background: url(../../image/loginBg.jpg) no-repeat;
+  min-width: 1440px;
+  min-height: 560px;
+  background: url(../../image/loginBoxBg.png) no-repeat;
   background-size: 100% 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .login-inner-bg {
-  background: url(../../image/loginBoxBg.png) no-repeat;
-  width: 400px;
-  height: 350px;
-  margin: 35vh auto;
-  overflow: hidden;
+  background: url(../../image/loginBg.png) no-repeat;
+  width: 21.6%;
+  height: 43%;
+  min-width: 360px;
+  min-height: 380px;
+  top: 30%;
+  right: 20%;
+  position: absolute;
   background-size: 100% 100%;
   box-sizing: border-box;
-  padding: 20px;
-}
-
-.login .user_style {
-  margin: 40px 20px 0;
-  h3 {
+  padding: 56px;
+  h2 {
+    width: 100%;
+    font-size: 36px;
+    font-weight: 700;
     color: #fff;
-    font-weight: normal;
     text-align: center;
-    margin-bottom: 20px;
+    white-space: nowrap;
+    position: absolute;
+    right: 0;
+    top: -70px;
+    background-image: linear-gradient(
+      180deg,
+      rgba(99, 163, 255, 1) 0,
+      rgba(99, 163, 255, 1) 0,
+      rgba(182, 220, 255, 1) 49.731445%,
+      rgba(114, 190, 255, 1) 100%,
+      rgba(114, 190, 255, 1) 100%
+    );
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 36px;
+    font-family: AlimamaShuHeiTi-Bold;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 }
-.login .btn {
-  width: 100%;
-  height: 6vh;
-  background-color: #00c2de;
-  border-radius: 5px;
-  font-size: 1.4vw;
-  color: #ffffff;
-}
-
-.login .btn:hover {
-  cursor: pointer;
-  background-color: #2d8cf0;
+.login {
+  .user_style {
+    h3 {
+      color: #fff;
+      font-size: 22px;
+      font-weight: normal;
+      text-align: center;
+      margin: 16px auto 34px;
+      font-weight: 400;
+    }
+  }
+  .btn {
+    width: 100%;
+    height: 6vh;
+    background-color: #00c2de;
+    border-radius: 5px;
+    font-size: 1.4vw;
+    color: #ffffff;
+  }
+  .btn:hover {
+    cursor: pointer;
+    background-color: #2d8cf0;
+  }
 }
 
-#loginform .el-button {
-  background: #409eff !important;
-  color: #ffffff !important;
+.login #loginform {
+  .el-form-item {
+    margin-bottom: 24px !important;
+  }
+  .login-btn {
+    margin-top: 40px !important;
+  }
+  .el-button {
+    font-size: 18px;
+    background: #0d8cc0 !important;
+    color: #ffffff !important;
+    cursor: pointer !important;
+  }
+  .el-input__inner {
+    width: 100% !important;
+  }
+  .el-checkbox__label {
+    color: #fff;
+  }
 }
 
-#loginform .el-button:hover {
-  cursor: pointer !important;
-  background-color: #2d8cf0 !important;
-}
 .inputUser .ivu-input {
   padding: 6px 24px !important;
   border: 1px solid #9f9f9f !important;
 }
-
-#loginform .el-input__inner {
-  width: 100% !important;
-}
-
-.el-checkbox__label {
-  color: #fff;
-}
 </style>