Skip to content

B
beyond-clouds-frontM
Commit d89debe7 by 高浩杰
Options

完善登录，注册，修改密码页面

parent 50fb936f
Showing with 105 additions and 4 deletions
components/moblie/nav.vue
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
v-for="(item, index) in navList" v-for="(item, index) in navList"
:class="{active:index === actived}" :class="{active:index === actived}"
:flex-v="['column','flex-start','center']" :flex-v="['column','flex-start','center']"
:key="item.label"
> >
<span @click="toggle(index, item.id)">{{item.label}}</span> <span @click="toggle(index, item.id)">{{item.label}}</span>
<yun-div :width-v="16" :height-v="4" :border-r="[2,2,0,0]" :margin-v="[16,0,0]" :bg-color-v="index === actived ? '#00AAE6' : '#fff'"></yun-div> <yun-div :width-v="16" :height-v="4" :border-r="[2,2,0,0]" :margin-v="[16,0,0]" :bg-color-v="index === actived ? '#00AAE6' : '#fff'"></yun-div>
......
layouts/blank.vue
<template> <template>
<div class="default-layout__wrap">
<nuxt/> <nuxt/>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "blank" name: "blank",
mounted() {
if(process.browser){
this.fontSelfAdaption()
} }
</script> },
methods:{
fontSelfAdaption(){
let e = document,
that = this,
t = e.documentElement,
defaultWidth = 750;
<style scoped> let eventName = "orientationchange" in window ? "orientationchange" : "resize",
functionName = function () {
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
that.$store.commit('page/changeRemRate',n/defaultWidth);
};
functionName();
window.addEventListener(eventName, functionName, !1);
}
},
}
</script>
<style lang="scss" scoped>
.default-layout__wrap{
background:$bgImage ;
}
</style> </style>
pages/users/login.vue
<template> <template>
<yun-div :extend-style="{position: 'fixed', top:0,bottom:0,left:0,right:0}" class="default-layout__wrap">
<yun-div
:flex-v="['row','space-between','center']"
:margin-v="[26,paddingL]">
<!--logo-->
<yun-img
:height-v="36"
:width-v="153"
:ske-w="153"
:ske-h="36"
:src="Logo">
</yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toRegister">注册</yun-div>
</yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
:padding-v="[65,60,0,60]" :padding-v="[65,60,0,60]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}" :extend-style="{boxSizing: 'border-box'}"
:border-r="[8]" :border-r="[8]"
bg-color-v="#fff"
> >
<yun-div <yun-div
:show-ske="false" :show-ske="false"
...@@ -97,6 +112,8 @@ ...@@ -97,6 +112,8 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
<page-footer style="position: fixed;bottom:0;"></page-footer>
</yun-div>
</template> </template>
<script> <script>
...@@ -105,14 +122,19 @@ import commonMixin from "../../components/moblie/commonMixin"; ...@@ -105,14 +122,19 @@ import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg' import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg' import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg' import dingding from '../../assets/svg/dingding.svg'
import Logo from '../../assets/svg/logo.svg'
import PageFooter from "../../components/moblie/pageFooter";
export default { export default {
components: {PageFooter},
layout: 'blank',
mixins: [commonMixin], mixins: [commonMixin],
data() { data() {
return { return {
QQ, QQ,
wechat, wechat,
dingding, dingding,
Logo,
account: '', account: '',
password: '', password: '',
VerificationCode: '', VerificationCode: '',
...@@ -158,6 +180,9 @@ export default { ...@@ -158,6 +180,9 @@ export default {
toReset() { toReset() {
this.$router.push('/users/reset') this.$router.push('/users/reset')
}, },
toRegister() {
this.$router.push('/users/register')
},
showPassword() { showPassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password' this.inputType = this.inputType === 'password' ? 'text' : 'password'
this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible' this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
...@@ -227,4 +252,3 @@ export default { ...@@ -227,4 +252,3 @@ export default {
display: none; display: none;
} }
</style> </style>
pages/users/register.vue
<template> <template>
<yun-div :extend-style="{position: 'fixed', top:0,bottom:0,left:0,right:0}" class="default-layout__wrap">
<yun-div
:flex-v="['row','space-between','center']"
:margin-v="[26,paddingL]">
<!--logo-->
<yun-img
:height-v="36"
:width-v="153"
:ske-w="153"
:ske-h="36"
:src="Logo">
</yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toLogin">登录</yun-div>
</yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
:padding-v="[65,60,0,60]" :padding-v="[65,60,0,60]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}" :extend-style="{boxSizing: 'border-box'}"
:border-r="[8]" :border-r="[8]"
bg-color-v="#fff"
> >
<yun-div <yun-div
:show-ske="false" :show-ske="false"
...@@ -109,6 +124,8 @@ ...@@ -109,6 +124,8 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
<page-footer style="position: fixed;bottom:0;"></page-footer>
</yun-div>
</template> </template>
<script> <script>
...@@ -117,14 +134,19 @@ import commonMixin from "../../components/moblie/commonMixin"; ...@@ -117,14 +134,19 @@ import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg' import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg' import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg' import dingding from '../../assets/svg/dingding.svg'
import PageFooter from "../../components/moblie/pageFooter";
import Logo from "../../assets/svg/logo.svg";
export default { export default {
layout: 'blank',
mixins: [commonMixin], mixins: [commonMixin],
components: {PageFooter},
data() { data() {
return { return {
QQ, QQ,
wechat, wechat,
dingding, dingding,
Logo,
account: '', account: '',
password: '', password: '',
VerificationCode: '', VerificationCode: '',
...@@ -186,6 +208,9 @@ export default { ...@@ -186,6 +208,9 @@ export default {
toReset() { toReset() {
this.$router.push('/users/reset') this.$router.push('/users/reset')
}, },
toLogin() {
this.$router.push('/users/login')
},
showPassword() { showPassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password' this.inputType = this.inputType === 'password' ? 'text' : 'password'
this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible' this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
......
pages/users/reset.vue
<template> <template>
<yun-div :extend-style="{position: 'fixed', top:0,bottom:0,left:0,right:0}" class="default-layout__wrap">
<yun-div
:flex-v="['row','space-between','center']"
:margin-v="[26,paddingL]">
<!--logo-->
<yun-img
:height-v="36"
:width-v="153"
:ske-w="153"
:ske-h="36"
:src="Logo">
</yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toRegister">注册</yun-div>
</yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
:padding-v="[65,60,0,60]" :padding-v="[65,60,0,60]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
:extend-style="{boxSizing: 'border-box'}" :extend-style="{boxSizing: 'border-box'}"
:border-r="[8]" :border-r="[8]"
bg-color-v="#fff"
> >
<yun-div <yun-div
:show-ske="false" :show-ske="false"
...@@ -97,6 +112,8 @@ ...@@ -97,6 +112,8 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
<page-footer style="position: fixed;bottom:0;"></page-footer>
</yun-div>
</template> </template>
<script> <script>
...@@ -105,14 +122,19 @@ import commonMixin from "../../components/moblie/commonMixin"; ...@@ -105,14 +122,19 @@ import commonMixin from "../../components/moblie/commonMixin";
import QQ from '../../assets/svg/qq.svg' import QQ from '../../assets/svg/qq.svg'
import wechat from '../../assets/svg/wechat.svg' import wechat from '../../assets/svg/wechat.svg'
import dingding from '../../assets/svg/dingding.svg' import dingding from '../../assets/svg/dingding.svg'
import Logo from "../../assets/svg/logo.svg";
import PageFooter from "../../components/moblie/pageFooter";
export default { export default {
layout: 'blank',
mixins: [commonMixin], mixins: [commonMixin],
components: {PageFooter},
data() { data() {
return { return {
QQ, QQ,
wechat, wechat,
dingding, dingding,
Logo,
account: '', account: '',
password: '', password: '',
VerificationCode: '', VerificationCode: '',
......
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