登录页面UI修改

yangwei
Showing 7 changed files with 105 additions and 48 deletions
src/image/loginBg.jpg
src/image/loginBg.png
src/image/loginBoxBg.png
src/image/password.png
src/image/username.png
src/image/verifycode.png
src/views/login/index.vue
--- a/src/image/loginBg.jpg deleted 100644 → 0
View file @f222a11
+++ b/src/image/loginBg.jpg deleted 100644 → 0
View file @f222a11
--- a/src/image/loginBg.png 0 → 100644
View file @271e4f0
+++ b/src/image/loginBg.png 0 → 100644
View file @271e4f0
--- a/src/image/loginBoxBg.png
View file @271e4f0
+++ b/src/image/loginBoxBg.png
View file @271e4f0
--- a/src/image/password.png 0 → 100644
View file @271e4f0
+++ b/src/image/password.png 0 → 100644
View file @271e4f0
--- a/src/image/username.png 0 → 100644
View file @271e4f0
+++ b/src/image/username.png 0 → 100644
View file @271e4f0
--- a/src/image/verifycode.png 0 → 100644
View file @271e4f0
+++ b/src/image/verifycode.png 0 → 100644
View file @271e4f0
--- a/src/views/login/index.vue
View file @271e4f0
+++ b/src/views/login/index.vue
View file @271e4f0
 <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> -->
-          <el-form-item id="login">
+          <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;
+    text-indent: 24px;
-    background-color: transparent !important;
+    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;
+  background: url(../../image/loginBg.png) no-repeat;
-  width: 400px;
+  width: 21.6%;
-  height: 350px;
+  height: 43%;
-  margin: 35vh auto;
+  min-width: 360px;
-  overflow: hidden;
+  min-height: 380px;
+  top: 30%;
+  right: 20%;
+  position: absolute;
  background-size: 100% 100%;
  box-sizing: border-box;
-  padding: 20px;
+  padding: 56px;
-}
+  h2 {
+    width: 100%;
-.login .user_style {
+    font-size: 36px;
-  margin: 40px 20px 0;
+    font-weight: 700;
-  h3 {
    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 {
+.login {
-  width: 100%;
+  .user_style {
-  height: 6vh;
+    h3 {
-  background-color: #00c2de;
+      color: #fff;
-  border-radius: 5px;
+      font-size: 22px;
-  font-size: 1.4vw;
+      font-weight: normal;
-  color: #ffffff;
+      text-align: center;
-}
+      margin: 16px auto 34px;
+      font-weight: 400;
-.login .btn:hover {
+    }
-  cursor: pointer;
+  }
-  background-color: #2d8cf0;
+  .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 {
+.login #loginform {
-  background: #409eff !important;
+  .el-form-item {
-  color: #ffffff !important;
+    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>