login

付延余

2022-04-08 b76e7f30d9cf4258db4c2e4c77183edb10db0019

login

 package.json

@@ -10,7 +10,7 @@
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.18.1",
    "axios": "^0.26.1",
    "echarts": "^4.7.0",
    "element-ui": "^2.15.6",
    "lib-flexible": "^0.3.2",
@@ -53,7 +53,7 @@
    "px2rem-loader": "^0.1.9",
    "rimraf": "^2.7.1",
    "semver": "^5.7.1",
    "shelljs": "^0.7.6",
    "shelljs": "^0.8.5",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",

 src/assets/css/base.scss

@@ -4,6 +4,7 @@
$fontSize-28: 2.8rem;
$fontSize-30: 3rem;
$fontSize-32: 3.2rem;
$fontSize-38: 3.8rem;
$fontSize-48: 4.8rem;

$color-blue: #51D2FF;

 src/pages/components/showIndexTitle.vue

@@ -1,7 +1,12 @@
<template>
    <div class="showIndexTitle-wrap">
      <h1 class="title">石家庄人社局业务运行数据分析平台</h1>
      <el-menu :default-active="$route.path" router mode="horizontal" class="el-menu-demo">
    <el-menu
      :default-active="$route.path"
      router
      mode="horizontal"
      class="el-menu-demo"
    >
        <div class="showIndex-left">
          <el-menu-item index="/index">
            <div class="showIndex-block">
@@ -33,7 +38,6 @@
              <h1>其它业务</h1>
            </div>
          </el-menu-item>

        </div>
        <div class="showIndex-right">
          <el-menu-item>
@@ -56,7 +60,7 @@
              <h1>文档中心</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
        <el-menu-item index="/login">
            <div class="showIndex-block">
              <h1>退出登录</h1>
            </div>
@@ -69,12 +73,13 @@
<script>
    export default {
        name: "showIndexTitle"
    }
};
</script>

<style lang="scss">
  .showIndexTitle-wrap{
    .el-menu-item:focus, .el-menu-item:hover{
  .el-menu-item:focus,
  .el-menu-item:hover {
      background-color:transparent;
    }
    /*.el-menu-item:focus{*/
@@ -100,17 +105,17 @@
      border-bottom: 0;
    }
  }

</style>
<style lang="scss" scoped>
  .showIndexTitle-wrap{
    width: 100%;
    height: 9rem  /* 90/10 */;
    background:url("../../assets/images/jiashicang-title-bj.png") no-repeat center;
  background: url("../../assets/images/jiashicang-title-bj.png") no-repeat
    center;
    background-size: 100% 100%;
    .title{
      font-size: 3rem  /* 30/10 */;
      font-family: 'Source Han Sans CN';
    font-family: "Source Han Sans CN";
      color: #fff;
      text-align: center;
      line-height: 7rem  /* 70/10 */;
@@ -152,7 +157,6 @@
        }
      }
      .menu-active{

      }
    }
  }

 src/pages/login.vue

@@ -1,28 +1,204 @@
<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">
        <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";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      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%;
  //text-align: center;
  margin-left: 8rem;

  .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;
    //}
  }

  :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: 5rem;
  }

  //input:disabled::-webkit-input-placeholder {
  //  -webkit-text-fill-color: red;
  //}
}
</style>

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

.login-container {
  width: 256rem;
  height: 168rem;
  background: url(../assets/images/login/背景@2x.png);
  position: relative;
}

.title {
  width: 334.368rem;
  height: 12.8rem;
  background: url(../assets/images/login/top@2x.png);
  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;
}

.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;
  }

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

  .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;
  }
}

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

</style>

 src/router/router.js

@@ -47,6 +47,6 @@
}
export const routers = [
    indexRouter,
    // login,
  login,
    // NotFound
]