其他业务

付延余

2022-05-19 f6334332118fa7843432e9c069a454039d0b0831

 src/pages/login.vue

@@ -1,15 +1,17 @@
<template>
  <div class="login-container">
    <div class="title">石家庄人社局业务运行数据分析平台</div>
    <!-- 用户登录盒子-->
    <div class="loginBox">
      <div class="title-text">
        <span>用户登录</span>
      </div>
<!--      <div class="img">-->
<!--        <img src="../assets/images/login/组%20377@2x.png" alt="">-->
<!--        <img src="../assets/images/login/组%20377@2x_1.png" alt="">-->
<!--      </div>-->
      <!-- 表单登录盒子-->
      <div class="FormBox">
        <!--两个图标-->
        <div class="headerIcon"></div>
        <div class="lockIcon"></div>
        <!--表单-->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
@@ -23,7 +25,8 @@
              placeholder="请输入用户名"
              class="userInput"
              prefix-icon="iconfont icon-user"
            ></el-input>
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
@@ -38,9 +41,8 @@
      </div>

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

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
        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')
          // })
      });
    }
  }
@@ -83,93 +90,123 @@
</script>

<style lang="scss">
.loginButton {
  font-size: 0.125rem !important;
}
.FormBox {
  width: 100%;
  //text-align: center;
  margin-left: 8rem;
  margin-left: 0.3125rem;
  position: absolute;
  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);
    margin-top: 4.8rem;
    color: #ffffff;
    padding-left: 8.8rem;
    //.el-input__prefix {
    //  width: 3rem;
    //  height: 3rem;
    //}
    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: 5rem;
    font-size: 0.1094rem !important;
    margin-top: 0.0352rem;
  }

  //input:disabled::-webkit-input-placeholder {
  //  -webkit-text-fill-color: red;
  //}
  .el-input .el-input__clear {
    position: relative;
    //background-color: blue;
    width: 0.0664rem;
    height: 0.043rem;
    top: -0.1328rem;
    right: 0.0898rem;
    border-radius: 60%;
  }

  .el-icon-view:before {
    position: absolute;
    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;
  background: url(../assets/images/login/背景@2x.png);
  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;
  background: url(../assets/images/login/top@2x.png);
  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;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  line-height: 0.3906rem;
  //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}

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

.lockIcon {
  position: absolute;
  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;
  background: url(../assets/images/login/框@2x.png);
  position: absolute;
  margin-top: 39rem;
  margin-bottom: 39rem;
  margin-left: 88rem;

  span {
    font-size: $fontSize-32;
    color: #51d2ff;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    color: #51d2ff;
    line-height: 12px;
  }
  width: 3.125rem;
  height: 3.1979rem;
  background: url(../assets/images/login/loginBorder@2x.png);
  background-size: 100%;
  position: relative;
  margin: 0 auto;
  top: 1.5234rem;

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

    span {
      font-size: $fontSize-32;
      color: #51d2ff;
      //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      line-height: 0.0469rem;
    }
  }

  .LoginForm {
@@ -178,27 +215,18 @@
  }

  .loginButton {
    width: 64rem;
    height: 8.8rem;
    width: 2.5rem;
    height: 0.3438rem;
    background: #51d2ff;
    font-size: 3.2rem;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    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;
  }
}

//.el-input__icon .el-icon-lock{
//  width:1rem;
//
//}
///deep/ .el-input {
//  width: 64rem;
//}

</style>