其他业务

付延余

2022-05-19 f6334332118fa7843432e9c069a454039d0b0831

 src/pages/login.vue

@@ -41,44 +41,48 @@
      </div>

      <el-button type="primary" class="loginButton" @click="login()"
      >登录
      </el-button
      >
        >登录
      </el-button>
    </div>
  </div>
</template>
<script>
// import {login} from "@/api/index";
import {login} from "@/api/index";

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456"
        username: "",
        password: "",
      },
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {required: true, message: "请输入登录名称", trigger: "blur"},
          {min: 3, max: 15, message: "长度在6到15个字符", trigger: "blur"}
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 3, max: 15, message: "长度在6到15个字符", trigger: "blur" }
        ],
        // 验证密码是否合法
        password: [
          {required: true, message: "请输入登录密码", trigger: "blur"},
          {min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur"}
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur" }
        ]
      }
    };
  },
  beforeCreate() {
  },
  beforeCreate() {},
  methods: {
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        console.log(valid);
        if (!valid) return;
        this.$router.push("/");
        this.$store.dispatch('login',this.loginForm).then(res => {
            this.$router.push('/index')
        })
          // login(this.loginForm).then(res => {
          //   this.$router.push('/index')
          // })
      });
    }
  }
@@ -86,114 +90,114 @@
</script>

<style lang="scss">
.loginButton {
  font-size: 0.125rem !important;
}
.FormBox {
  width: 100%;
  margin-left: 8rem;
  margin-left: 0.3125rem;
  position: absolute;
  top: 17.6rem;
  top: 0.6875rem;

  .el-input__inner {
    height: 8.8rem;
    font-size: 2.8rem;
    height: 0.3438rem;
    font-size: 0.1094rem;
    background: rgba(81, 210, 255, 0.24);
    color: #ffffff;
    padding-left: 10.4rem;
    padding-left: 0.4063rem;
  }

  :nth-of-type(2) {
    margin-top: 4.8rem;
    margin-top: 0.1875rem;
  }


  .el-form-item__content {
    width: 64rem;
    height: 8.8rem;
    line-height: 8.8rem;
    width: 2.5rem;
    height: 0.3438rem;
    line-height: 0.3438rem;
  }

  .el-form-item__error {
    font-size: 2.8rem !important;
    margin-top: 0.9rem;
    font-size: 0.1094rem !important;
    margin-top: 0.0352rem;
  }

  .el-input .el-input__clear {
    position: relative;
    //background-color: blue;
    width: 1.7rem;
    height: 1.1rem;
    top: -3.4rem;
    right: 2.3rem;
    width: 0.0664rem;
    height: 0.043rem;
    top: -0.1328rem;
    right: 0.0898rem;
    border-radius: 60%;
  }

  .el-icon-view:before {
    position: absolute;
    top: -1.4rem;
    right: 0.1rem;
    top: -0.0547rem;
    right: 0.0039rem;
  }
}
</style>

<style lang="scss" scoped>
@import '../assets/css/base';

@import "../assets/css/base";
.login-container {
  width: 256rem;
  height: 168rem;
  width: 10rem;
  height: 6.5625rem;
  background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
  background-size: 100%;
  position: relative;
}

.title {
  width: 334.368rem;
  height: 12.8rem;
  width: 13.0612rem;
  height: 0.5rem;
  background: url(../assets/images/login/top@2x.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: -39.184rem;
  left: -1.5306rem;
  top: 0;
  font-size: 3.6rem;
  font-size: 0.1406rem;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
  line-height: 10rem;
  line-height: 0.3906rem;
  //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}

.headerIcon {
  position: absolute;
  width: 8.8rem;
  height: 8.6rem;
  width: 0.3438rem;
  height: 0.3359rem;
  background: url(../assets/images/login/header@2x.png) no-repeat;
  background-size: 100%;
  border-right: 1px dashed #51D2FF;
  border-right: 0.0039rem dashed #51d2ff;
}

.lockIcon {
  position: absolute;
  top: 8.8rem;
  width: 8.8rem;
  height: 8.6rem;
  border-right: 1px dashed #51D2FF;
  top: 0.3438rem;
  width: 0.3438rem;
  height: 0.3359rem;
  border-right: 0.0039rem dashed #51d2ff;
  background: url(../assets/images/login/lock@2x_1.png) no-repeat;
  background-size: 100%;

}

.loginBox {
  width: 80rem;
  height: 81.866rem;
  width: 3.125rem;
  height: 3.1979rem;
  background: url(../assets/images/login/loginBorder@2x.png);
  background-size: 100%;
  position: relative;
  margin: 0 auto;
  top: 39rem;
  top: 1.5234rem;

  .title-text {
    position: absolute;
    width: 80rem;
    margin-top: 9.6rem;
    width: 3.125rem;
    margin-top: 0.375rem;
    text-align: center;

    span {
@@ -201,7 +205,7 @@
      color: #51d2ff;
      //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      line-height: 12px;
      line-height: 0.0469rem;
    }
  }

@@ -211,19 +215,18 @@
  }

  .loginButton {
    width: 64rem;
    height: 8.8rem;
    width: 2.5rem;
    height: 0.3438rem;
    background: #51d2ff;
    font-size: 3.2rem;
    font-size: 0.125rem !important;
    //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
    color: #000e2d;
    line-height: 2.4rem;
    line-height: 0.0938rem;
    position: absolute;
    bottom: 14.46rem;
    left: 8rem;
    bottom: 0.5648rem;
    left: 0.3125rem;
  }
}

</style>