From b76e7f30d9cf4258db4c2e4c77183edb10db0019 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期五, 08 四月 2022 17:39:36 +0800
Subject: [PATCH] login
---
src/pages/login.vue | 188 ++++++++++++++++++
src/router/router.js | 80 ++++----
package.json | 4
src/pages/components/showIndexTitle.vue | 294 ++++++++++++++--------------
src/assets/css/base.scss | 3
5 files changed, 375 insertions(+), 194 deletions(-)
diff --git a/package.json b/package.json
index 1efac8a..de1d5b1 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index a501918..a567667 100644
--- a/src/assets/css/base.scss
+++ b/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;
diff --git a/src/pages/components/showIndexTitle.vue b/src/pages/components/showIndexTitle.vue
index 7a47c89..38a22e0 100644
--- a/src/pages/components/showIndexTitle.vue
+++ b/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>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index a89d30f..c2af86e 100644
--- a/src/pages/login.vue
+++ b/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>
diff --git a/src/router/router.js b/src/router/router.js
index b558e5b..6a6f998 100644
--- a/src/router/router.js
+++ b/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
]
--
Gitblit v1.9.1