login静态

付延余

2022-04-09 5ba9e720110c486f8c4354348a9c776d19e74672

login静态

 src/assets/images/login/header@2x.png

 src/assets/images/login/lock@2x_1.png

 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
@@ -45,14 +48,14 @@
  </div>
</template>
<script>
import {login} from "@/api/index";
// import {login} from "@/api/index";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
        username: "admin",
        password: "123456"
      },
      loginFormRules: {
        // 验证用户名是否合法
@@ -85,20 +88,16 @@
<style lang="scss">
.FormBox {
  width: 100%;
  //text-align: center;
  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);
    margin-top: 4.8rem;
    color: #ffffff;
    padding-left: 8.8rem;
    //.el-input__prefix {
    //  width: 3rem;
    //  height: 3rem;
    //}
    padding-left: 10.4rem;
  }

  :nth-of-type(2) {
@@ -114,12 +113,20 @@

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

  //input:disabled::-webkit-input-placeholder {
  //  -webkit-text-fill-color: red;
  //}
  .el-input .el-input__clear {
    position: relative;
    //background-color: blue;
    top: -5.4rem;
  }

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

@@ -129,14 +136,16 @@
.login-container {
  width: 256rem;
  height: 168rem;
  background: url(../assets/images/login/背景@2x.png);
  background: url(../assets/images/login/背景@2x.png) no-repeat;
  background-size: 100%;
  position: relative;
}

.title {
  width: 334.368rem;
  height: 12.8rem;
  background: url(../assets/images/login/top@2x.png);
  background: url(../assets/images/login/top@2x.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: -39.184rem;
  top: 0;
@@ -145,31 +154,51 @@
  font-weight: 400;
  text-align: center;
  line-height: 10rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  //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/框@2x.png);
  background-size: 100%;
  position: relative;
  margin: 0 auto;
  top: 39rem;

  .title-text {
  position: absolute;
  margin-top: 39rem;
  margin-bottom: 39rem;
  margin-left: 88rem;
    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-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    color: #51d2ff;
    line-height: 12px;
  }

  .title-text {
    width: 80rem;
    margin-top: 8.6rem;
    text-align: center;
  }

  .LoginForm {
@@ -182,7 +211,7 @@
    height: 8.8rem;
    background: #51d2ff;
    font-size: 3.2rem;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
    color: #000e2d;