5 changed files with 579 additions and 390 deletions
@ -1,154 +1,176 @@ |
|||||
<template> |
<template> |
||||
<view class="main"> |
<view class="main"> |
||||
<view class="welcomeText">{{ i18n.welcomeText }}</view> |
<view class="welcomeText">{{ i18n.welcomeText }}</view> |
||||
<view class="signInText">{{ i18n.signInText }}</view> |
<view class="signInText">{{ i18n.signInText }}</view> |
||||
<u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast"> |
<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast"> |
||||
<u-form-item class="input-item" prop="email" ref="item1"> |
<u-form-item class="input-item" prop="email" ref="item1"> |
||||
<u-icon class="icon" |
<u-icon class="icon" |
||||
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'" |
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'" |
||||
size="48rpx" width="48rpx"></u-icon> |
size="48rpx" width="48rpx"></u-icon> |
||||
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none" |
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none" |
||||
:placeholder="i18n.emailInputText"> |
:placeholder="i18n.emailInputText"> |
||||
</u-input> |
</u-input> |
||||
</u-form-item> |
</u-form-item> |
||||
<u-form-item class="input-item" prop="password" ref="item1"> |
<u-form-item class="input-item" prop="password" ref="item1"> |
||||
<u-icon class="icon" |
<u-icon class="icon" |
||||
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
||||
size="48rpx" width="48rpx"></u-icon> |
size="48rpx" width="48rpx"></u-icon> |
||||
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none" |
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" |
||||
:placeholder="i18n.passwordInputText"> |
border="none" :placeholder="i18n.passwordInputText"> |
||||
</u-input> |
</u-input> |
||||
</u-form-item> |
</u-form-item> |
||||
</u--form> |
</u--form> |
||||
<navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator> |
<navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator> |
||||
<u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button> |
<u-button class="button" color="#00E8A2">{{ i18n.Login }}</u-button> |
||||
<view class="signUp">{{ i18n.notAccountText }}<navigator class="navigator" url="./register">{{ i18n.SignUp }} |
<view class="signUp" @click.native="$u.throttle(login, 500)">{{ i18n.notAccountText }} |
||||
</navigator> |
<navigator class="navigator" url="./register">{{ i18n.SignUp }} |
||||
</view> |
</navigator> |
||||
|
</view> |
||||
</view> |
|
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: 'login', |
name: 'login', |
||||
data() { |
data() { |
||||
return { |
return { |
||||
userInfo: { |
userInfo: { |
||||
name: '', |
name: '', |
||||
password: '', |
password: '', |
||||
}, |
}, |
||||
rules: { |
rules: { |
||||
email: { |
email: { |
||||
type: 'string', |
type: 'string', |
||||
required: true, |
required: true, |
||||
message: this.$t('login.emailInputMessage'), |
message: this.$t('login.emailInputMessage'), |
||||
trigger: ['blur', 'change'], |
trigger: ['blur', 'change'], |
||||
}, |
}, |
||||
password: { |
password: { |
||||
type: 'string', |
type: 'string', |
||||
required: true, |
required: true, |
||||
message: this.$t('login.passwordInputMessage'), |
message: this.$t('login.passwordInputMessage'), |
||||
trigger: ['blur', 'change'] |
trigger: ['blur', 'change'] |
||||
}, |
}, |
||||
}, |
}, |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
i18n() { |
i18n() { |
||||
return this.$t('login') |
return this.$t('login') |
||||
}, |
}, |
||||
}, |
}, |
||||
onLoad() { |
onLoad() { |
||||
// console.log(this.$t('login.emailInputMessage')); |
// console.log(this.$t('login.emailInputMessage')); |
||||
}, |
}, |
||||
onShow() { }, |
onShow() {}, |
||||
methods: { |
methods: { |
||||
|
// 注册 |
||||
|
login() { |
||||
}, |
this.$refs.uForm.validate().then(res => { |
||||
} |
this.$api.login(this.userInfo).then(res => { |
||||
|
if (res.errCode === 'SUCCESS') { |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: this.$t("login.loginSuccess") |
||||
|
}) |
||||
|
}, 600) |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/home/index' |
||||
|
}) |
||||
|
} else { |
||||
|
uni.$u.toast(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}).catch(errors => { |
||||
|
console.log('err') |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
page { |
page { |
||||
height: 100%; |
height: 100%; |
||||
background: url(../../static/public/BG.png) no-repeat fixed; |
background: url(../../static/public/BG.png) no-repeat fixed; |
||||
background-size: cover; |
background-size: cover; |
||||
} |
} |
||||
|
|
||||
.main { |
.main { |
||||
padding: 0 64rpx; |
padding: 0 64rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.welcomeText { |
.welcomeText { |
||||
margin-top: 240rpx; |
margin-top: 240rpx; |
||||
font-size: 48rpx; |
font-size: 48rpx; |
||||
font-weight: 800; |
font-weight: 800; |
||||
text-align: center; |
text-align: center; |
||||
} |
} |
||||
|
|
||||
.signInText { |
.signInText { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
text-align: center; |
text-align: center; |
||||
color: #A2A0A8; |
color: #A2A0A8; |
||||
} |
} |
||||
|
|
||||
.form { |
.form { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
margin-top: 48rpx; |
margin-top: 48rpx; |
||||
|
|
||||
.input-item { |
.input-item { |
||||
height: 112rpx; |
height: 112rpx; |
||||
line-height: 112rpx; |
line-height: 112rpx; |
||||
background: #211F32; |
background: #211F32; |
||||
margin-bottom: 48rpx; |
margin-bottom: 48rpx; |
||||
border-radius: 32rpx; |
border-radius: 32rpx; |
||||
|
|
||||
&:nth-child(2) { |
&:nth-child(2) { |
||||
margin-bottom: 38rpx; |
margin-bottom: 38rpx; |
||||
} |
} |
||||
|
|
||||
.icon { |
.icon { |
||||
margin: 0 24rpx; |
margin: 0 24rpx; |
||||
} |
} |
||||
|
|
||||
/deep/.u-form-item__body { |
/deep/.u-form-item__body { |
||||
padding: 0; |
padding: 0; |
||||
} |
} |
||||
|
|
||||
.input { |
.input { |
||||
height: 112rpx; |
height: 112rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.forget { |
.forget { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
text-align: right; |
text-align: right; |
||||
color: #00E8A2; |
color: #00E8A2; |
||||
cursor: pointer; |
cursor: pointer; |
||||
} |
} |
||||
|
|
||||
.button { |
.button { |
||||
margin-top: 64rpx; |
margin-top: 64rpx; |
||||
height: 112rpx; |
height: 112rpx; |
||||
line-height: 112rpx; |
line-height: 112rpx; |
||||
border-radius: 32rpx; |
border-radius: 32rpx; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
color: #15141F !important; |
color: #15141F !important; |
||||
} |
} |
||||
|
|
||||
.signUp { |
.signUp { |
||||
margin: 48rpx 0; |
margin: 48rpx 0; |
||||
text-align: center; |
text-align: center; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
|
|
||||
navigator { |
navigator { |
||||
display: inline; |
display: inline; |
||||
color: #00E8A2; |
color: #00E8A2; |
||||
padding: 0 10rpx; |
padding: 0 10rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
@ -1,238 +1,343 @@ |
|||||
<template> |
<template> |
||||
<view class="main" > |
<view class="main"> |
||||
<navigation>{{ i18n.SignUp }}</navigation> |
<navigation>{{ i18n.SignUp }}</navigation> |
||||
<view class="body"> |
<view class="body"> |
||||
<view class="welcomeText">{{ i18n.registerWelcomeText }}</view> |
<view class="welcomeText">{{ i18n.registerWelcomeText }}</view> |
||||
<view class="signInText">{{ i18n.registerCreate }}</view> |
<view class="signInText">{{ i18n.registerCreate }}</view> |
||||
<u--form class="form" :model="userInfo" :rules="rules" ref="form1" errorType="toast"> |
<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast"> |
||||
<!-- 邮箱 --> |
<!-- 邮箱 --> |
||||
<u-form-item class="input-item" prop="email" ref="item1"> |
<u-form-item class="input-item" prop="email" ref="item1"> |
||||
<u-icon class="icon" |
<u-icon class="icon" |
||||
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'" |
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'" |
||||
size="48rpx" width="48rpx"></u-icon> |
size="48rpx" width="48rpx"></u-icon> |
||||
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none" |
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none" |
||||
:placeholder="i18n.emailInputText"> |
:placeholder="i18n.emailInputText"> |
||||
</u-input> |
</u-input> |
||||
</u-form-item> |
</u-form-item> |
||||
<!-- 验证码 --> |
<!-- 验证码 --> |
||||
<u-form-item class="input-item vCode" prop="verificationCode" ref="item1"> |
<u-form-item class="input-item vCode" prop="code" ref="item1"> |
||||
<u-icon class="icon" |
<u-icon class="icon" |
||||
:name="userInfo.verificationCode ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'" |
:name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'" |
||||
size="48rpx" width="48rpx"></u-icon> |
size="48rpx" width="48rpx"></u-icon> |
||||
<u-input class="input" v-model="userInfo.verificationCode" color="#fff" fontSize="32rpx" |
|
||||
border="none" :placeholder="i18n.registerWelcomeText" maxlength="6"> |
<u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none" |
||||
</u-input> |
:placeholder="i18n.registerWelcomeText" maxlength="6"> |
||||
<u-button class="getVCodeBtn" color="#323045">Get code</u-button> |
</u-input> |
||||
</u-form-item> |
<u-code startText="Get code" :seconds="seconds" ref="uCode" keep-running unique-key="login" |
||||
<!-- 密码 --> |
@change="codeChange"> |
||||
<u-form-item class="input-item" prop="password" ref="item1"> |
</u-code> |
||||
<u-icon class="icon" |
<u-button class="getVCodeBtn" color="#323045" @tap="getCode">{{tips}}</u-button> |
||||
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
</u-form-item> |
||||
size="48rpx" width="48rpx"></u-icon> |
<!-- 密码 --> |
||||
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" border="none" |
<u-form-item class="input-item" prop="password" ref="item1"> |
||||
:placeholder="i18n.passwordText"> |
<u-icon class="icon" |
||||
</u-input> |
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
||||
</u-form-item> |
size="48rpx" width="48rpx"></u-icon> |
||||
<!-- 重复密码 --> |
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx" |
||||
<u-form-item class="input-item" prop="confirmPassword" ref="item1"> |
border="none" :placeholder="i18n.passwordText"> |
||||
<u-icon class="icon" |
</u-input> |
||||
:name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
</u-form-item> |
||||
size="48rpx" width="48rpx"></u-icon> |
<!-- 重复密码 --> |
||||
<u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff" fontSize="32rpx" |
<u-form-item class="input-item" prop="confirmPassword" ref="item1"> |
||||
border="none" :placeholder="i18n.confirmPasswordText"> |
<u-icon class="icon" |
||||
</u-input> |
:name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'" |
||||
</u-form-item> |
size="48rpx" width="48rpx"></u-icon> |
||||
<!-- 取款密码 --> |
<u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff" |
||||
<u-form-item class="input-item" prop="withdrawalPassword" ref="item1"> |
fontSize="32rpx" border="none" :placeholder="i18n.confirmPasswordText"> |
||||
<u-icon class="icon" |
</u-input> |
||||
:name="userInfo.withdrawalPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'" |
</u-form-item> |
||||
size="48rpx" width="48rpx"></u-icon> |
<!-- 取款密码 --> |
||||
<u-input class="input" type="password" v-model="userInfo.withdrawalPassword" color="#fff" fontSize="32rpx" |
<u-form-item class="input-item" prop="payPassword" ref="item1"> |
||||
border="none" :placeholder="i18n.withdrawalPasswordText"> |
<u-icon class="icon" |
||||
</u-input> |
:name="userInfo.payPassword ? '../../static/login/WithdrawalPassword_pr.png' : '../../static/login/WithdrawalPassword_de.png'" |
||||
</u-form-item> |
size="48rpx" width="48rpx"></u-icon> |
||||
<!-- 邀请码 --> |
<u-input class="input" type="password" v-model="userInfo.payPassword" color="#fff" fontSize="32rpx" |
||||
<u-form-item class="input-item" prop="InvitationCode" ref="item1"> |
border="none" :placeholder="i18n.withdrawalPasswordText"> |
||||
<u-icon class="icon" |
</u-input> |
||||
:name="userInfo.InvitationCode ? '../../static/login/Invitation_pr.png' : '../../static/login/Invitation_de.png'" |
</u-form-item> |
||||
size="48rpx" width="48rpx"></u-icon> |
<!-- 邀请码 --> |
||||
<u-input class="input" v-model="userInfo.InvitationCode" color="#fff" fontSize="32rpx" border="none" |
<u-form-item class="input-item" prop="InvitationCode" ref="item1"> |
||||
:placeholder="i18n.InvitationCodeText"> |
<u-icon class="icon" |
||||
</u-input> |
:name="userInfo.InvitationCode ? '../../static/login/Invitation_pr.png' : '../../static/login/Invitation_de.png'" |
||||
</u-form-item> |
size="48rpx" width="48rpx"></u-icon> |
||||
</u--form> |
<u-input class="input" v-model="userInfo.InvitationCode" color="#fff" fontSize="32rpx" border="none" |
||||
<view class="agree"> |
:placeholder="i18n.InvitationCodeText"> |
||||
<u-icon class="check" @click="agreeFlag = !agreeFlag" |
</u-input> |
||||
:name="agreeFlag ? '../../static/login/Checkbox_pr.png' : '../../static/login/Checkbox_de.png'" |
</u-form-item> |
||||
size="48rpx" width="48rpx"></u-icon> |
</u--form> |
||||
<view class="text">{{ i18n.agreeText }}<span>{{ i18n.Terms }}</span>{{ i18n.and }}<span>{{ |
<view class="agree"> |
||||
|
<u-icon class="check" @click="agreeFlag = !agreeFlag" |
||||
|
:name="agreeFlag ? '../../static/login/Checkbox_pr.png' : '../../static/login/Checkbox_de.png'" |
||||
|
size="48rpx" width="48rpx"></u-icon> |
||||
|
<view class="text">{{ i18n.agreeText }}<span>{{ i18n.Terms }}</span>{{ i18n.and }}<span>{{ |
||||
i18n.Conditions |
i18n.Conditions |
||||
}}</span></view> |
}}</span></view> |
||||
</view> |
</view> |
||||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag">{{ i18n.SignUp }} |
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag" @click="register" :throttleTime="500"> |
||||
</u-button> |
{{ i18n.SignUp }} |
||||
<view class="signUp">{{ i18n.haveAccount }}<navigator class="navigator" url="./index">{{ i18n.Login }} |
</u-button> |
||||
</navigator> |
<view class="signUp">{{ i18n.haveAccount }} |
||||
</view> |
<navigator class="navigator" url="./index">{{ i18n.Login }} |
||||
</view> |
</navigator> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import UButton from '../../uview-ui/components/u-button/u-button.vue' |
import UButton from '../../uview-ui/components/u-button/u-button.vue' |
||||
export default { |
export default { |
||||
name: "register", |
name: "register", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
userInfo: { |
// 验证码倒计时 |
||||
name: "", |
tips: '', |
||||
password: "", |
seconds: 60, |
||||
}, |
// 邮箱号码是否正确 |
||||
rules: { |
isCanGetCode: false, |
||||
email: { |
userInfo: { |
||||
type: "string", |
password: "", |
||||
required: true, |
email: '', |
||||
message: this.$t("login.emailInputMessage"), |
payPassword: '', |
||||
trigger: ["blur", "change"], |
inviteCode: '', |
||||
}, |
code: '', |
||||
verificationCode: { |
lang: '', |
||||
type: "string", |
}, |
||||
required: true, |
rules: { |
||||
message: this.$t("login.verificationCodeMessage"), |
payPassword: { |
||||
trigger: ["blur", "change"] |
type: "string", |
||||
}, |
required: true, |
||||
password: { |
message: this.$t("login.withdrawalPasswordMessage"), |
||||
type: "string", |
trigger: ["blur", "change"], |
||||
required: true, |
}, |
||||
message: this.$t("login.passwordInputMessage"), |
email: { |
||||
trigger: ["blur", "change"] |
type: "string", |
||||
}, |
required: true, |
||||
}, |
message: this.$t("login.emailInputMessage"), |
||||
agreeFlag: false, |
trigger: ["blur", "change"], |
||||
}; |
}, |
||||
}, |
code: { |
||||
computed: { |
type: "string", |
||||
i18n() { |
required: true, |
||||
return this.$t("login"); |
message: this.$t("login.verificationCodeMessage"), |
||||
}, |
trigger: ["blur", "change"] |
||||
}, |
}, |
||||
onLoad() { |
password: { |
||||
// console.log(this.$t('login.emailInputMessage')); |
type: "string", |
||||
}, |
required: true, |
||||
onShow() { }, |
message: this.$t("login.passwordInputMessage"), |
||||
methods: {}, |
trigger: ["blur", "change"] |
||||
components: { UButton } |
}, |
||||
} |
InvitationCode: { |
||||
|
type: "string", |
||||
|
required: true, |
||||
|
message: this.$t("login.InvitationCodeMessage"), |
||||
|
trigger: ["blur", "change"] |
||||
|
}, |
||||
|
confirmPassword: { |
||||
|
type: "string", |
||||
|
required: true, |
||||
|
message: this.$t("login.confirmPasswordMessage"), |
||||
|
trigger: ["blur", "change"] |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
agreeFlag: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
i18n() { |
||||
|
return this.$t("login"); |
||||
|
}, |
||||
|
}, |
||||
|
onLoad() { |
||||
|
// console.log(this.$t('login.emailInputMessage')); |
||||
|
}, |
||||
|
watch: { |
||||
|
'userInfo.email': { |
||||
|
handler(newValue) { |
||||
|
this.isCanGetCode = uni.$u.test.email(newValue); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onShow() {}, |
||||
|
methods: { |
||||
|
// 验证码相关 |
||||
|
codeChange(text) { |
||||
|
this.tips = text; |
||||
|
}, |
||||
|
// 验证码获取 |
||||
|
getCode() { |
||||
|
if (!this.userInfo.email) { |
||||
|
uni.$u.toast(this.$t("login.Emailempty")) |
||||
|
return |
||||
|
} |
||||
|
if (!this.isCanGetCode) { |
||||
|
uni.$u.toast(this.$t("login.Emailincorrect")) |
||||
|
return |
||||
|
} |
||||
|
if (this.$refs.uCode.canGetCode) { |
||||
|
const data = { |
||||
|
email: this.userInfo.email, |
||||
|
type: 0, |
||||
|
} |
||||
|
// 模拟向后端请求验证码 |
||||
|
uni.showLoading({ |
||||
|
title: this.$t("login.GettingVerificationCode") |
||||
|
}) |
||||
|
this.$api.sendEmailCode(data).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
uni.hideLoading(); |
||||
|
// 这里此提示会被this.start()方法中的提示覆盖 |
||||
|
uni.$u.toast(this.$t("login.CodeHasSent")); |
||||
|
// 通知验证码组件内部开始倒计时 |
||||
|
this.$refs.uCode.start(); |
||||
|
} else { |
||||
|
uni.$u.toast(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
uni.$u.toast(this.$t("login.SendAfter")); |
||||
|
} |
||||
|
}, |
||||
|
// 注册 |
||||
|
register() { |
||||
|
this.$refs.uForm.validate().then(res => { |
||||
|
this.$api.register(this.userInfo).then(res => { |
||||
|
if (res.errCode === 'SUCCESS') { |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: this.$t("login.resSuccess") |
||||
|
}) |
||||
|
}, 600) |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/login/index' |
||||
|
}) |
||||
|
} else { |
||||
|
uni.$u.toast(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}).catch(errors => { |
||||
|
console.log('err') |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
components: { |
||||
|
UButton |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.main { |
.main { |
||||
|
|
||||
.body { |
.body { |
||||
margin-top: 204rpx; |
margin-top: 204rpx; |
||||
padding: 0 64rpx; |
padding: 0 64rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.welcomeText { |
.welcomeText { |
||||
margin-top: 48rpx; |
margin-top: 48rpx; |
||||
font-size: 48rpx; |
font-size: 48rpx; |
||||
font-weight: 800; |
font-weight: 800; |
||||
text-align: center; |
text-align: center; |
||||
} |
} |
||||
|
|
||||
.signInText { |
.signInText { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
text-align: center; |
text-align: center; |
||||
color: #A2A0A8; |
color: #A2A0A8; |
||||
} |
} |
||||
|
|
||||
.form { |
.form { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
margin-top: 48rpx; |
margin-top: 48rpx; |
||||
|
|
||||
.input-item { |
.input-item { |
||||
height: 112rpx; |
height: 112rpx; |
||||
line-height: 112rpx; |
line-height: 112rpx; |
||||
background: #211F32; |
background: #211F32; |
||||
margin-bottom: 48rpx; |
margin-bottom: 48rpx; |
||||
border-radius: 32rpx; |
border-radius: 32rpx; |
||||
|
|
||||
.icon { |
.icon { |
||||
margin: 0 24rpx; |
margin: 0 24rpx; |
||||
} |
} |
||||
|
|
||||
/deep/.u-form-item__body { |
/deep/.u-form-item__body { |
||||
padding: 0; |
padding: 0; |
||||
} |
} |
||||
|
|
||||
.input { |
.input { |
||||
height: 112rpx; |
height: 112rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.vCode { |
.vCode { |
||||
|
|
||||
.getVCodeBtn { |
.getVCodeBtn { |
||||
// position: absolute; |
// position: absolute; |
||||
width: 154rpx; |
width: 154rpx; |
||||
height: 56rpx; |
height: 56rpx; |
||||
right: 28rpx; |
right: 28rpx; |
||||
// top: 14px; |
// top: 14px; |
||||
border-radius: 8px; |
border-radius: 8px; |
||||
line-height: 56rpx; |
line-height: 56rpx; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #00E8A2 !important; |
color: #00E8A2 !important; |
||||
padding: 0; |
padding: 0; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.agree { |
.agree { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
|
|
||||
.check { |
.check { |
||||
display: inline-block; |
display: inline-block; |
||||
vertical-align: top; |
vertical-align: top; |
||||
margin-right: 32rpx; |
margin-right: 32rpx; |
||||
} |
} |
||||
|
|
||||
.text { |
.text { |
||||
display: inline-block; |
display: inline-block; |
||||
width: 542rpx; |
width: 542rpx; |
||||
} |
} |
||||
|
|
||||
span { |
span { |
||||
cursor: pointer; |
cursor: pointer; |
||||
color: #00E8A2; |
color: #00E8A2; |
||||
padding: 0 10rpx; |
padding: 0 10rpx; |
||||
|
|
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.button { |
.button { |
||||
margin-top: 64rpx; |
margin-top: 64rpx; |
||||
height: 112rpx; |
height: 112rpx; |
||||
line-height: 112rpx; |
line-height: 112rpx; |
||||
border-radius: 32rpx; |
border-radius: 32rpx; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
color: #15141F !important; |
color: #15141F !important; |
||||
} |
} |
||||
|
|
||||
.signUp { |
.signUp { |
||||
margin: 48rpx 0; |
margin: 48rpx 0; |
||||
text-align: center; |
text-align: center; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
|
|
||||
.navigator { |
.navigator { |
||||
display: inline; |
display: inline; |
||||
color: #00E8A2; |
color: #00E8A2; |
||||
padding: 0 10rpx; |
padding: 0 10rpx; |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue