Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 13eab3d1 by lixin
Options

会员登录页优化

1 parent 00e93d33
Inline Side-by-side
Showing 2 changed files with 94 additions and 56 deletions
src/views/member/memberLogin.vue
<template> <template>
<div class="member_login"> <div class="member_login">
<NafmHeader /> <img src="@/assets/icon/bg_login_2.png" />
<van-form class="login_form" @submit="onSubmit"> <NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" title=" " />
<van-field v-model="code" placeholder="请输入社会信用代码或组织机构代码" :rules="[{ required: true, message: '请输入社会信用代码或组织机构代码' }]"> <main class="login_content">
<div slot="left-icon"> <van-form class="login_form">
<van-icon name="coupon-o" /> <van-field v-model="code" :left-icon="shtyxydmIcon" placeholder="请输入社会信用代码或组织机构代码">
</van-field>
<van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码">
</van-field>
<van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码">
<template #button>
<span class="verfication_code">111111</span>
</template>
</van-field>
<p v-show="isLogin" class="wraning_tip">
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
</p>
<div>
<van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
</div> </div>
</van-field> </van-form>
<van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]"> </main>
</van-field>
<van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
<template #button>
<span>111111</span>
</template>
</van-field>
<p class="wraning_tip">
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
</p>
<div style="margin: 16px;">
<van-button class="login_btn" block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
</div>
</van-form>
<div class="membership_about"> <div class="membership_about">
<van-cell title="入会指南" is-link to="/member/membershipGuide" /> <van-cell title="入会指南" is-link to="/member/membershipGuide" />
<van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" /> <van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
...@@ -36,7 +36,8 @@ export default { ...@@ -36,7 +36,8 @@ export default {
password: '', password: '',
checkCode: '', checkCode: '',
passwordIcon: require('@/assets/icon/password.png'), passwordIcon: require('@/assets/icon/password.png'),
verificationIcon: require('@/assets/icon/verification.png') verificationIcon: require('@/assets/icon/verification.png'),
shtyxydmIcon: require('@/assets/icon/shtyxydm.png'),
} }
}, },
computed: { computed: {
...@@ -45,47 +46,84 @@ export default { ...@@ -45,47 +46,84 @@ export default {
} }
}, },
methods: { methods: {
onSubmit(value) { loginSubmit() {
if (!this.code || this.code === '') {
return Toast('请输入社会信用统一代码或组织机构代码')
}
if (!this.password || this.password === '') {
return Toast('请输入密码')
}
if (!this.checkCode || this.checkCode === '') {
return Toast('请输入验证码')
}
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.member_login { .member_login {
position: absolute; width: 100%;
top: 0; height: 100%;
left: 0; display: flex;
right: 0; flex-direction: column;
bottom: 83px; .login_content {
background-color: #f6f6f6; display: flex;
.login_form { align-items: center;
background-color: #ffffff; justify-content: center;
padding-right: 20px; .login_form {
padding-bottom: 40px; margin-top: 20px;
::v-deep .van-field__control { width: 330px;
font-size: 14px; background-color: #ffffff;
color: #333333;
} ::v-deep .van-cell:not(:last-child)::after {
input::-webkit-input-placeholder { border-bottom: 1px solid #efefef;
color: #8f9196; }
}
input::-moz-input-placeholder { ::v-deep .van-cell {
color: #8f9196; padding-right: 0 !important;
} padding-left: 0 !important;
input::-ms-input-placeholder { border-bottom: 1px solid #ebedf0;
color: #8f9196; }
}
.wraning_tip { ::v-deep .van-cell:not(:last-child)::after {
color: #ea5c6d; border: none;
font-size: 12px; }
text-align: justify; ::v-deep .van-field__control {
margin-left: 20px; font-size: 14px;
margin-top: 16px; color: #333333;
} }
.login_btn { input::-webkit-input-placeholder {
background: linear-gradient(to right, #25a3df, #106abc); color: #8f9196;
border: none; }
input::-moz-input-placeholder {
color: #8f9196;
}
input::-ms-input-placeholder {
color: #8f9196;
}
.wraning_tip {
color: #ea5c6d;
font-size: 12px;
text-align: justify;
margin-top: 16px;
}
.login_btn {
width: 100%;
border-radius: 5px;
text-align: center;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 16px;
margin-top: 20px;
background-image: linear-gradient(to right, #25a3df, #106abc);
// background: linear-gradient(to right, #25a3df, #106abc);
border: none;
opacity: 0.3;
}
.act_btn {
opacity: 1;
}
} }
} }
.membership_about { .membership_about {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!