login静态

付延余

2022-04-09 1d42ad8fd052501107a4ef5ecb3249facb7d54d0

 src/pages/login.vue

@@ -1,28 +1,229 @@
<template>
  <div class="login-container">
    <div class="title">石家庄人社局业务运行数据分析平台</div>
    <!-- 用户登录盒子-->
    <div class="loginBox">
      <div class="title-text">
        <span>用户登录</span>
      </div>
      <!-- 表单登录盒子-->
      <div class="FormBox">
        <!--两个图标-->
        <div class="headerIcon"></div>
        <div class="lockIcon"></div>
        <!--表单-->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          class="LoginForm"
          label-width="0rem"
          :rules="loginFormRules"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              class="userInput"
              prefix-icon="iconfont icon-user"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="iconfont icon-3702mima"
              placeholder="请输入密码"
              class="passwordInput"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

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

export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456"
      },
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {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"}
        ]
      }
    };
  },
  beforeCreate() {
  },
  methods: {
  },
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        console.log(valid);
        if (!valid) return;
        this.$router.push("/");
      });
    }
  }
};
</script>

<style lang="scss">
$bg: #283443;
$light_gray: rgb(43, 7, 7);
$cursor: #fff;
.FormBox {
  width: 100%;
  margin-left: 8rem;
  position: absolute;
  top: 17.6rem;

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

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


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

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

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

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

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

.login-container {
  width: 256rem;
  height: 168rem;
  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) no-repeat;
  background-size: 100%;
  position: absolute;
  left: -39.184rem;
  top: 0;
  font-size: 3.6rem;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
  line-height: 10rem;
  //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}

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

.lockIcon {
  position: absolute;
  top: 8.8rem;
  width: 8.8rem;
  height: 8.6rem;
  border-right: 1px 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/loginBorder@2x.png);
  background-size: 100%;
  position: relative;
  margin: 0 auto;
  top: 39rem;

  .title-text {
    position: absolute;
    width: 80rem;
    margin-top: 9.6rem;
    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: 12px;
    }
  }

  .LoginForm {
    width: 100%;
    box-sizing: border-box;
  }

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

</style>