优化列表、回到顶部组件、优化样式

long

2021-02-02 36b71142347dc524e18fa24c5ffdffff0d02287a

 src/pages/login/index.vue

@@ -3,7 +3,7 @@
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">袁曦藏酒</h3>
        <h3 class="title">”项目名称“</h3>
      </div>

      <el-form-item prop="username">
@@ -18,6 +18,7 @@
          type="text"
          tabindex="1"
          autocomplete="on"
          maxlength="20"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
@@ -36,6 +37,7 @@
            name="password"
            tabindex="2"
            autocomplete="on"
            maxlength="20"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin"
@@ -58,6 +60,7 @@
          name="safecode"
          type="text"
          tabindex="3"
          maxlength="10"
          autocomplete="off"
          @keyup.enter.native="handleLogin"
        />
@@ -114,9 +117,9 @@
        checkedId: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'change', validator: validateUsername }],
        password: [{ required: true, trigger: 'change', validator: validatePassword }],
        safecode: [{ required: true, trigger: 'change', validator: validateSafecode }]
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        safecode: [{ required: true, trigger: 'blur', validator: validateSafecode }]
      },
      passwordType: 'password',
      capsTooltip: false,
@@ -144,7 +147,7 @@
  },
  methods: {
    init() {
      var loginData = localStorage.getItem('loginData')
      var loginData = localStorage.getItem('loginData_XXXX')
      // 获取保存的账号密码
      if (loginData) this.loginForm = JSON.parse(loginData)

@@ -233,7 +236,7 @@
              username: this.loginForm.username.trim(),
              password: this.loginForm.password.trim()
            })
            localStorage.setItem('loginData', loginData)
            localStorage.setItem('loginData_XXXX', loginData)

            // 保存用户数据
            setUserData(inf)
@@ -283,6 +286,11 @@

/* reset element-ui css */
.login-container {
  // 背景 ↓↓↓↓↓↓↓↓↓↓
  // background: url(../../assets/imgs/loginBg.jpg) no-repeat;
  // background-size: cover;
  // 背景 ↑↑↑↑↑↑↑↑↑↑
  background-color: $bg;
  .el-input {
    display: inline-block;
    height: 47px;
@@ -323,16 +331,23 @@
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  // background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    padding: 35px 35px 0;
    margin: 0 auto;
    margin-top: 160px;
    overflow: hidden;
    // 背景 ↓↓↓↓↓↓↓↓↓↓
    // background-color: $bg;
    // opacity: .96;
    // border-radius: 10px;
    // box-shadow: 0px 20px 60px rgba(0,0,0,0.4), 0px 0px 150px rgba(0,0,0,0.4);
    // 背景 ↑↑↑↑↑↑↑↑↑↑
  }

  .tips {