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,10 +4,11 @@
$fontSize-28: 2.8rem;
$fontSize-30: 3rem;
$fontSize-32: 3.2rem;
$fontSize-38: 3.8rem;
$fontSize-48: 4.8rem;

$color-blue: #51D2FF;
$color-white: #fff;
$color-dark:#05336A;
$color-dark: #05336A;
$color-grey:#8E8E8E;
$color-darkGrey:#111111;

 src/pages/components/showIndexTitle.vue

@@ -1,159 +1,163 @@
<template>
    <div class="showIndexTitle-wrap">
      <h1 class="title">石家庄人社局业务运行数据分析平台</h1>
      <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">
              <h1>首页</h1>
            </div>
          </el-menu-item>
          <el-menu-item index="/jiuyeAndChuangye">
            <div class="showIndex-block">
              <h1>就业创业</h1>
            </div>
          </el-menu-item>
          <el-menu-item index="/shehuiBaozhang">
            <div class="showIndex-block">
              <h1>社会保障</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>人事人才</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>劳动关系</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>其它业务</h1>
            </div>
          </el-menu-item>

        </div>
        <div class="showIndex-right">
          <el-menu-item>
            <div class="showIndex-block">
              <h1>营商政策</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>通讯录</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>工作周报</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>文档中心</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>退出登录</h1>
            </div>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
  <div class="showIndexTitle-wrap">
    <h1 class="title">石家庄人社局业务运行数据分析平台</h1>
    <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">
            <h1>首页</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/jiuyeAndChuangye">
          <div class="showIndex-block">
            <h1>就业创业</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/shehuiBaozhang">
          <div class="showIndex-block">
            <h1>社会保障</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>人事人才</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>劳动关系</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>其它业务</h1>
          </div>
        </el-menu-item>
      </div>
      <div class="showIndex-right">
        <el-menu-item>
          <div class="showIndex-block">
            <h1>营商政策</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>通讯录</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>工作周报</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>文档中心</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/login">
          <div class="showIndex-block">
            <h1>退出登录</h1>
          </div>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: "showIndexTitle"
    }
export default {
  name: "showIndexTitle"
};
</script>

<style lang="scss">
  .showIndexTitle-wrap{
    .el-menu-item:focus, .el-menu-item:hover{
      background-color:transparent;
    }
    /*.el-menu-item:focus{*/
    /*  background:url("../../assets/images/menu-active.png") no-repeat center;*/
    /*  background-size: 100% 100%;*/
    /*  width: 12.8rem  !* 128/10 *!;*/
    /*  height: 5rem;*/
    /*}*/
    .el-menu-item.is-active{
      background:url("../../assets/images/menu-active.png") no-repeat center;
      background-size: 100% 100%;
      width: 12.8rem  /* 128/10 */;
      height: 5rem;
    }
    .el-menu-item{
      background:url("../../assets/images/menu-normal.png") no-repeat center;
      background-size: 100% 100%;
      width: 12.8rem  /* 128/10 */;
      height: 5rem;
      margin-right: 1.2rem  /* 12/10 */;
    }
    .el-menu.el-menu--horizontal{
      border-bottom: 0;
    }
.showIndexTitle-wrap {
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: transparent;
  }

  /*.el-menu-item:focus{*/
  /*  background:url("../../assets/images/menu-active.png") no-repeat center;*/
  /*  background-size: 100% 100%;*/
  /*  width: 12.8rem  !* 128/10 *!;*/
  /*  height: 5rem;*/
  /*}*/
  .el-menu-item.is-active {
    background: url("../../assets/images/menu-active.png") no-repeat center;
    background-size: 100% 100%;
    width: 12.8rem /* 128/10 */;
    height: 5rem;
  }
  .el-menu-item {
    background: url("../../assets/images/menu-normal.png") no-repeat center;
    background-size: 100% 100%;
    width: 12.8rem /* 128/10 */;
    height: 5rem;
    margin-right: 1.2rem /* 12/10 */;
  }
  .el-menu.el-menu--horizontal {
    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-size: 100% 100%;
    .title{
      font-size: 3rem  /* 30/10 */;
      font-family: 'Source Han Sans CN';
      color: #fff;
      text-align: center;
      line-height: 7rem  /* 70/10 */;
    }
    .showIndex-left{
      position: absolute;
      left:1rem  /* 10/10 */;
      top: -5rem  /* 10/10 */;
      display: flex;
      .showIndex-block{
        /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
        /*background-size: 100% 100%;*/
        /*width: 12.8rem  !* 128/10 *!;*/
        /*height: 5rem;*/
        h1{
          color: #fff;
          font-size: 2.4rem;
          text-align: center;
          line-height: 5rem;
        }
      }
    }
    .showIndex-right{
      position: absolute;
      right:1rem  /* 10/10 */;
      top: -5rem  /* 10/10 */;
      display: flex;
      .showIndex-block{
        /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
        /*background-size: 100% 100%;*/
        /*width: 12.8rem  !* 128/10 *!;*/
        /*height: 5rem;*/
        /*cursor: pointer;*/
        h1{
          color: #fff;
          font-size: 2.4rem;
          text-align: center;
          line-height: 5rem;
        }
      }
      .menu-active{

.showIndexTitle-wrap {
  width: 100%;
  height: 9rem /* 90/10 */;
  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";
    color: #fff;
    text-align: center;
    line-height: 7rem /* 70/10 */;
  }
  .showIndex-left {
    position: absolute;
    left: 1rem /* 10/10 */;
    top: -5rem /* 10/10 */;
    display: flex;
    .showIndex-block {
      /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
      /*background-size: 100% 100%;*/
      /*width: 12.8rem  !* 128/10 *!;*/
      /*height: 5rem;*/
      h1 {
        color: #fff;
        font-size: 2.4rem;
        text-align: center;
        line-height: 5rem;
      }
    }
  }
  .showIndex-right {
    position: absolute;
    right: 1rem /* 10/10 */;
    top: -5rem /* 10/10 */;
    display: flex;
    .showIndex-block {
      /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
      /*background-size: 100% 100%;*/
      /*width: 12.8rem  !* 128/10 *!;*/
      /*height: 5rem;*/
      /*cursor: pointer;*/
      h1 {
        color: #fff;
        font-size: 2.4rem;
        text-align: center;
        line-height: 5rem;
      }
    }
    .menu-active {
    }
  }
}
</style>

 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";
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

@@ -3,50 +3,50 @@
import jiuyeAndChuangye from "../pages/show/jiuyeAndChuangye/jiuyeAndChuangye";
import shehuiBaozhang from "../pages/show/shehuiBaozhang/shehuiBaozhang";
const indexRouter = {
    path: '/',
    name: 'index',
    component: showHome,
    redirect: '/index',
    children: [
        { path: '/index', meta: { title: '大屏首页' }, name: 'index', component: () => import('@/pages/show/index/index.vue')},
        { path: '/jiuyeAndChuangye',
          component: jiuyeAndChuangye,
          redirect: '/workStatistics',
          name: 'jiuyeAndChuangye',
          children: [
           { path: '/workStatistics', meta: {title: '就业创业'}, name: 'workStatistics',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue')},
           { path: '/chuangyeDanbaoDaikuan', meta: {title: '创业担保贷款'}, name: 'chuangyeDanbaoDaikuan',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue')},
           { path: '/jiuyeQingkuang', meta: {title: '就业情况'}, name: 'jiuyeQingkuang',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue')},
         ]
        },
        {
          path: '/shehuiBaozhang',
          component: shehuiBaozhang,
          redirect: '/shehuiBaoxian',
          name: 'shehuiBaozhang',
          children: [
            { path: '/shehuiBaoxian', meta: {title:'社会保障'}, name: 'shehuiBaoxian', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue')},
            { path: '/shebaoShouzhiZongbiao', meta: {title:'社保收支总表'}, name: 'shebaoShouzhiZongbiao', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue')},
          ]
        }
    ]
  path: '/',
  name: 'index',
  component: showHome,
  redirect: '/index',
  children: [
    { path: '/index', meta: { title: '大屏首页' }, name: 'index', component: () => import('@/pages/show/index/index.vue')},
    { path: '/jiuyeAndChuangye',
      component: jiuyeAndChuangye,
      redirect: '/workStatistics',
      name: 'jiuyeAndChuangye',
      children: [
        { path: '/workStatistics', meta: {title: '就业创业'}, name: 'workStatistics',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue')},
        { path: '/chuangyeDanbaoDaikuan', meta: {title: '创业担保贷款'}, name: 'chuangyeDanbaoDaikuan',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/chuangyeDanbaoDaikuan.vue')},
        { path: '/jiuyeQingkuang', meta: {title: '就业情况'}, name: 'jiuyeQingkuang',  component: () => import('@/pages/show/jiuyeAndChuangye/jiuyeChildren/jiuyeQingkuang.vue')},
      ]
    },
    {
      path: '/shehuiBaozhang',
      component: shehuiBaozhang,
      redirect: '/shehuiBaoxian',
      name: 'shehuiBaozhang',
      children: [
        { path: '/shehuiBaoxian', meta: {title:'社会保障'}, name: 'shehuiBaoxian', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue')},
        { path: '/shebaoShouzhiZongbiao', meta: {title:'社保收支总表'}, name: 'shebaoShouzhiZongbiao', component: () => import('@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue')},
      ]
    }
  ]
}
const login = {
    path: '/login',
    component: () => import('@/pages/login.vue'),
    meta: {
        title: `后台登陆`,
    }
  path: '/login',
  component: () => import('@/pages/login.vue'),
  meta: {
    title: `后台登陆`,
  }
}
const NotFound = {
    path: '/404',
    component: () => import('@/error_pages/404.vue'),
    meta: {
        title: "404 | 啊哦~ 你所访问的页面不存在",
    }
  path: '/404',
  component: () => import('@/error_pages/404.vue'),
  meta: {
    title: "404 | 啊哦~ 你所访问的页面不存在",
  }
}
export const routers = [
    indexRouter,
    // login,
    // NotFound
  indexRouter,
  login,
  // NotFound
]