Skip to content

G
gs1
Commit 9c63820c by tang
Options

feat: 注册，登录，找回密码页面开发

parent 47090e83
Showing with 351 additions and 9 deletions
README.md
# HashFlowWeb # 中国物品编码中心官网
江北新区社会治理
src/main.js
...@@ -8,6 +8,7 @@ import './plugins/element.js' ...@@ -8,6 +8,7 @@ import './plugins/element.js'
import './plugins/qrcode.js' import './plugins/qrcode.js'
import "./assets/css/main.scss" import "./assets/css/main.scss"
import "./assets/css/layout.scss" import "./assets/css/layout.scss"
import "./assets/css/element-variables.scss"
// 公共样式、布局样式 // 公共样式、布局样式
// 主题色调修改在assets/_style.scss 修改里面的变量即可 // 主题色调修改在assets/_style.scss 修改里面的变量即可
...@@ -81,12 +82,13 @@ router.beforeEach((to,from,next) => { ...@@ -81,12 +82,13 @@ router.beforeEach((to,from,next) => {
isAuthed ? next() : next({ path: "/404", replace: true }) isAuthed ? next() : next({ path: "/404", replace: true })
} }
} else { } else {
next()
// 进入登录页面 // 进入登录页面
if (to.path === "/login") { // if (to.path === "/login") {
next() // next()
} else { // } else {
next({ path: "/login", replace: true }) // next({ path: "/login", replace: true })
} // }
} }
} }
}) })
......
src/router/index.js
...@@ -48,7 +48,17 @@ const routes = [ ...@@ -48,7 +48,17 @@ const routes = [
{ {
path: "/login", path: "/login",
name: "login", name: "login",
component: () => import("@/views/user/login"), component: () => import("@/views/entry/index"),
},
{
path: "/register",
name: "register",
component: () => import("@/views/entry/index"),
},
{
path: "/reset-pass",
name: "reset-pass",
component: () => import("@/views/entry/index"),
}, },
] ]
......
src/views/entry/entry-card.vue 0 → 100644
<template>
<div class="entry-card">
<div class="header">
{{ title }}
</div>
<div class="body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "entry-card",
props: {
title: String
}
}
</script>
<style lang="scss" scoped>
.entry-card {
display: inline-block;
background: #FFFFFF;
border-radius: 6px;
padding: 40px;
.header {
height: 24px;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: $theme-color1;
line-height: 24px;
text-align: center;
margin-bottom: 50px;
}
}
</style>
src/views/entry/index.vue 0 → 100644
<template>
<!--注册，登录，找回密码等业务-->
<div class="gs-entry">
<div class="header">
</div>
<div class="body">
<div class="content">
<component v-bind:is="component"></component>
</div>
<div class="bottom">
<span>版权所有：中国物品编码中心</span>
<span>京ICP备11036137号-10 | 京公网安备11010102001434号</span>
<span>地址：北京市东城区安定门外大街138号皇城国际大厦B座3-6层 | 邮编：100011</span>
</div>
</div>
</div>
</template>
<script>
import Register from "./register.vue";
import Login from "./login.vue";
import ResetPass from "./reset-pass.vue"
const componentHash = {
'/login': 'Login',
'/register': 'Register',
'/reset-pass': 'ResetPass',
}
export default {
name: "index",
components: {Register, Login, ResetPass},
watch: {
'$route.path': {
handler(newV) {
this.component = componentHash[newV] || 'Login'
},
immediate: true,
}
},
data() {
return {
component: '',
}
},
}
</script>
<style lang="scss" scoped>
.gs-entry {
display: flex;
height: 100%;
flex-direction: column;
background-color: #0D2C6C;
align-items: center;
.header {
flex: 0 0 112px;
padding-top: 58px;
}
.body {
flex: 1;
max-width: 1500px;
display: flex;
flex-direction: column;
.content {
flex: 1;
padding-top: 148px;
text-align: center;
}
.bottom {
flex: 0 0 120px;
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
font-size: 14px;
text-align: center;
span {
margin: 0 10px;
}
}
}
}
::v-deep .el-tabs {
.el-tabs__item{
color: rgba(0, 0, 0, 0.4);
&.is-active,&:hover{
color: $theme-color1;
}
}
.el-tabs__content{
padding-top: 19px;
}
}
</style>
src/views/entry/login.vue 0 → 100644
<template>
<EntryCard title="网站用户登录">
<div class="login">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="用户名登录" name="first">
<el-form :model="userForm" status-icon>
<el-form-item>
<el-input v-model="userForm.userName"
placeholder="请输入用户名/条码卡号"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password"
v-model="userForm.password"
placeholder="请输入密码"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="userForm.validateCode"
placeholder="请输入验证码"
>
<template slot="append"><img src="" alt=""></template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="手机号登录" name="second">
<el-form :model="mobileForm" status-icon>
<el-form-item>
<el-input v-model="userForm.mobile"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="userForm.validateCode"
placeholder="请输入短信验证码"
>
<template slot="append">
<el-button type="primary" @click="sendValidateCode">发送验证码</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginByMobile" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</EntryCard>
</template>
<script>import EntryCard from './entry-card.vue'
export default {
name: "login",
components: {EntryCard},
data() {
return {
activeName: 'first',
userForm: {
userName: '',
password: '',
validateCode: ''
},
mobileForm: {
mobile: '',
validateCode: ''
},
}
},
methods: {
loginByUser() {
},
loginByMobile() {
},
sendValidateCode() {
}
},
}
</script>
<style lang="scss" scoped>
.login {
width: 360px;
::v-deep .el-form {
.el-input-group__append {
border-color: transparent;
border: none;
button.el-button {
background-color: $theme-color1;
border-color: $theme-color1;
color: white;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #f5825d;
border-color: #f5825d;
}
}
.bottom-btn .el-form-item__content {
display: flex;
justify-content: flex-end;
align-items: center;
color: #999999;
font-size: 13px;
.el-button {
color: #999999;
font-size: 13px;
&:hover, &:focus {
color: #f5825d;
}
}
}
}
}
</style>
src/views/entry/register.vue 0 → 100644
<template>
<EntryCard title="网站用户注册">
<div class="register">
</div>
</EntryCard>
</template>
<script>
import EntryCard from './entry-card.vue'
export default {
name: "register",
components:{EntryCard}
}
</script>
<style lang="scss" scoped>
.login{
}
</style>
src/views/entry/reset-pass.vue 0 → 100644
<template>
<EntryCard title="忘记密码">
<div class="reset-pass">
</div>
</EntryCard>
</template>
<script>import EntryCard from './entry-card.vue'
export default {
name: "reset-pass",
components: {EntryCard}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment