社保收支总表

zhangxiaoxu123456

2022-04-12 031631bc70722e6c7aded6ab8705bbd042ed52ed

 src/pages/login.vue

@@ -1,28 +1,226 @@
<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() {
  },
  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;
.loginButton {
  font-size: 0.125rem !important;
}
.FormBox {
  width: 100%;
  margin-left: 0.3125rem;
  position: absolute;
  top: 0.6875rem;

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

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

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

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

  .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>
</style>
@import "../assets/css/base";
.login-container {
  width: 10rem;
  height: 6.5625rem;
  background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
  background-size: 100%;
  position: relative;
}

.title {
  width: 13.0612rem;
  height: 0.5rem;
  background: url(../assets/images/login/top@2x.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: -1.5306rem;
  top: 0;
  font-size: 0.1406rem;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
  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: 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 {
    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 {
    width: 100%;
    box-sizing: border-box;
  }

  .loginButton {
    width: 2.5rem;
    height: 0.3438rem;
    background: #51d2ff;
    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: 0.0938rem;
    position: absolute;
    bottom: 0.5648rem;
    left: 0.3125rem;
  }
}
</style>