1038 lines
22 KiB
Vue
1038 lines
22 KiB
Vue
<template>
|
||
|
||
<view class="page commonPage"
|
||
><public-module></public-module>
|
||
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<view class="logo_bg"
|
||
><z-nav-bar title="" bgColor="none" fontColor="#fff"></z-nav-bar>
|
||
<view class="title PM_font">忘记密码</view>
|
||
<!-- <image
|
||
src="@/static/icon/login_icon_1.png"
|
||
mode="aspectFit"
|
||
class="icon_hua_1"
|
||
></image>
|
||
<image
|
||
src="@/static/icon/login_icon_2.png"
|
||
mode="aspectFit"
|
||
class="icon_hua_2"
|
||
></image> -->
|
||
</view>
|
||
<!-- 验证码登录 -->
|
||
<view class="register_page">
|
||
<input type="password" style="width: 0; height: 0; min-height: 0" />
|
||
<input
|
||
type="text"
|
||
autocomplete="off"
|
||
style="width: 0; height: 0; min-height: 0"
|
||
/>
|
||
<view class="flexbox" style="margin-top: 50rpx">
|
||
<view
|
||
class="input_tit emaPho"
|
||
style="margin-top: 0; margin-right: 20rpx"
|
||
>
|
||
<view
|
||
@click="handleChangeIsPassWordPhone"
|
||
:class="{ active: isPassWordPhone }"
|
||
>手机号</view
|
||
>
|
||
<span>/</span>
|
||
<view
|
||
@click="handleChangeIsPassWordPhone"
|
||
:class="{ active: !isPassWordPhone }"
|
||
>邮箱</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<!-- 带区号手机号 -->
|
||
<view
|
||
class="flexbox"
|
||
v-if="isPassWordPhone"
|
||
style="margin: 36rpx 0; justify-content: space-between"
|
||
>
|
||
<view class="quhao">
|
||
<uni-data-select
|
||
class="myselect"
|
||
placeholder="请选择区号"
|
||
v-model="resetForm.quCode"
|
||
:localdata="quCodeList"
|
||
style="height: 30rpx !important"
|
||
@change="quChange"
|
||
></uni-data-select>
|
||
</view>
|
||
<view
|
||
class="triangle borderBottom phoneNumberInput"
|
||
:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']"
|
||
>
|
||
<u--input
|
||
class="form_input_box"
|
||
type="number"
|
||
v-model="resetForm.phone"
|
||
placeholder="请输入您的手机号"
|
||
placeholder-class="grey"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input_box" v-else>
|
||
<u--input
|
||
class="form_input_box"
|
||
v-model="resetForm.phone"
|
||
placeholder="请输入您的邮箱"
|
||
placeholder-class="grey"
|
||
/>
|
||
</view>
|
||
<view class="input_tit">验证码</view>
|
||
<view class="input_box">
|
||
<u--input
|
||
type="number"
|
||
class="form_input_box"
|
||
v-model="resetForm.code"
|
||
placeholder="请输入验证码"
|
||
placeholder-class="grey"
|
||
@input="onInput"
|
||
maxlength="6"
|
||
/>
|
||
<button class="sendCode" @click="getCode" size="mini">
|
||
{{ codeText }}
|
||
</button>
|
||
</view>
|
||
|
||
<view class="input_tit">密码</view>
|
||
<view class="input_box">
|
||
<u--input
|
||
class="form_input_box"
|
||
type="password"
|
||
maxlength="8"
|
||
v-model="resetForm.password"
|
||
placeholder="请输入密码"
|
||
@input="inputMethod(resetForm.password)"
|
||
/>
|
||
</view>
|
||
<view class="input_tit">确认密码</view>
|
||
<view class="input_box">
|
||
<u--input
|
||
type="password"
|
||
class="form_input_box"
|
||
maxlength="8"
|
||
v-model="resetForm.confirmPassword"
|
||
placeholder="请确认密码"
|
||
/>
|
||
</view>
|
||
|
||
<view class="btn_box"
|
||
><button @click="onSubmit">提 交</button></view
|
||
></view
|
||
>
|
||
<!-- <view class="bg_box_shandow color_shandow forget_box">
|
||
<input type="password" style="width: 0; height: 0; min-height: 0" />
|
||
<input
|
||
type="text"
|
||
autocomplete="off"
|
||
style="width: 0; height: 0; min-height: 0"
|
||
/>
|
||
<view class="input_box">
|
||
<text class="input_tit">{{ isPassWordPhone ? "手机号" : "邮箱" }}</text>
|
||
<u--input
|
||
type="text"
|
||
class="form_input_box"
|
||
v-model="resetForm.phone"
|
||
:placeholder="`请输入${isPassWordPhone ? '手机号' : '邮箱'}`"
|
||
>
|
||
<template slot="suffix">
|
||
<u-icon
|
||
name="phone-fill"
|
||
color="#3AB3AE"
|
||
size="26"
|
||
v-if="isPassWordPhone"
|
||
@click="handleChangeIsPassWordPhone"
|
||
></u-icon>
|
||
<u-icon
|
||
size="26"
|
||
name="email-fill"
|
||
color="#3AB3AE"
|
||
v-else
|
||
@click="handleChangeIsPassWordPhone"
|
||
></u-icon> </template
|
||
></u--input>
|
||
</view>
|
||
<view class="input_box">
|
||
<text class="input_tit">验证码</text>
|
||
<u--input
|
||
type="number"
|
||
class="form_input_box"
|
||
v-model="resetForm.code"
|
||
placeholder="请输入验证码"
|
||
placeholder-class="grey"
|
||
@input="onInput"
|
||
maxlength="6"
|
||
/>
|
||
<button class="sendCode" @click="getCode" size="mini">
|
||
{{ codeText }}
|
||
</button>
|
||
</view>
|
||
<view class="input_box">
|
||
<text class="input_tit">密码</text>
|
||
|
||
<u--input
|
||
class="form_input_box"
|
||
type="password"
|
||
maxlength="8"
|
||
v-model="resetForm.password"
|
||
placeholder="请输入密码"
|
||
@input="inputMethod(resetForm.password)"
|
||
/>
|
||
</view>
|
||
<view class="" style="font-size: 28rpx; color: #999">
|
||
<p v-if="note != ''">{{ note }}</p>
|
||
<p v-html="str2" style="margin-top: 10rpx"></p>
|
||
</view>
|
||
<view class="input_box">
|
||
<text class="input_tit">确认密码</text>
|
||
<u--input
|
||
type="password"
|
||
class="form_input_box"
|
||
maxlength="8"
|
||
v-model="resetForm.confirmPassword"
|
||
placeholder="请确认密码"
|
||
/>
|
||
</view>
|
||
</view> -->
|
||
|
||
<music-play :playData="playData"></music-play>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import musicPlay from "@/components/music.vue";
|
||
import md5 from "@/plugins/md5";
|
||
// 密码验证的正则
|
||
//1、密码为八位及以上并且字母数字特殊字符三项都包括
|
||
var strongRegex = new RegExp(
|
||
"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
|
||
"g",
|
||
);
|
||
//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
|
||
var mediumRegex = new RegExp(
|
||
"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
|
||
"g",
|
||
);
|
||
|
||
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
|
||
var clear;
|
||
export default {
|
||
data() {
|
||
return {
|
||
quCodeList: [], // 国家区域码
|
||
isPassWordPhone: true,
|
||
resetForm: {},
|
||
playData: {},
|
||
|
||
codeText: "获取验证码",
|
||
//验证码已发
|
||
readonly: false,
|
||
passwordOk: false,
|
||
note: "",
|
||
str2: "",
|
||
urlList: {
|
||
sendcode: "common/user/sms/sendcode", //密码登录
|
||
sendEmailcode: "common/user/getMailCaptcha", //密码登录
|
||
setPassword: "common/user/setPasswordByCode", //重置密码
|
||
},
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
this.getCountyCode();
|
||
},
|
||
//页面显示
|
||
onShow() {},
|
||
components: {
|
||
musicPlay,
|
||
},
|
||
//方法
|
||
methods: {
|
||
// 获取国家区域编码
|
||
getCountyCode() {
|
||
console.log(111111);
|
||
this.$http
|
||
.request({
|
||
url: "book/baseArea/getAllBaseArea",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0 && res.baseAreas.length > 0) {
|
||
this.quCodeList = res.baseAreas.map((item) => {
|
||
let obj = {
|
||
text: item.title + " (+" + item.code + ")",
|
||
value: item.code,
|
||
};
|
||
return obj;
|
||
});
|
||
this.resetForm.quCode = this.quCodeList[0].value;
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.quCodeList = [];
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e, "e");
|
||
});
|
||
},
|
||
handleChangeIsPassWordPhone() {
|
||
this.resetForm = {};
|
||
this.note = null;
|
||
this.isPassWordPhone = !this.isPassWordPhone;
|
||
|
||
this.resetForm.quCode = this.quCodeList[0].value;
|
||
this.OpenClear();
|
||
},
|
||
// 密码验证
|
||
inputMethod(value) {
|
||
this.passwordOk = false;
|
||
// console.log('输入的值为：', value)
|
||
if (strongRegex.test(value)) {
|
||
//console.log('强密码-----',value)
|
||
this.str2 = "<span style='color:#18bc37'>密码强度很不错哦！</span>";
|
||
// this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
|
||
this.note = "";
|
||
this.passwordOk = true;
|
||
} else if (mediumRegex.test(value)) {
|
||
// console.log('中等密码-----',value)
|
||
this.note =
|
||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||
this.str2 = "<span style='color:#117e4c'>密码强度中等!</span>";
|
||
this.passwordOk = true;
|
||
} else if (enoughRegex.test(value)) {
|
||
// console.log('弱密码-----',value)
|
||
// this.str2 = "<span style='color:#f3a73f'>密码强度太弱!</span>"
|
||
this.note =
|
||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||
} else {
|
||
this.passwordOk = false;
|
||
this.note =
|
||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||
this.str2 = "";
|
||
//console.log('密码-----',value)
|
||
}
|
||
},
|
||
//获取验证码
|
||
async getCode() {
|
||
var data = {};
|
||
if (this.readonly) {
|
||
this.$commonJS.showToast("验证码已发送");
|
||
|
||
return;
|
||
}
|
||
|
||
if (this.isPassWordPhone) {
|
||
data.phone = this.resetForm.phone;
|
||
if (!this.resetForm.phone) {
|
||
this.$commonJS.showToast("请输入手机号");
|
||
|
||
return;
|
||
}
|
||
|
||
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
|
||
this.$commonJS.showToast("手机号格式不正确");
|
||
|
||
return;
|
||
}
|
||
} else {
|
||
data.email = this.resetForm.phone;
|
||
|
||
if (!this.resetForm.phone) {
|
||
this.$commonJS.showToast("请输入邮箱");
|
||
|
||
return;
|
||
}
|
||
|
||
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
|
||
this.$commonJS.showToast("邮箱格式不正确");
|
||
|
||
return;
|
||
}
|
||
}
|
||
|
||
await this.$http
|
||
.post(
|
||
this.isPassWordPhone
|
||
? this.urlList.sendcode
|
||
: this.urlList.sendEmailcode,
|
||
data,
|
||
)
|
||
.then((res) => {
|
||
this.getCodeState();
|
||
});
|
||
},
|
||
//验证码按钮文字状态
|
||
getCodeState() {
|
||
const _this = this;
|
||
this.readonly = true;
|
||
this.codeText = "60S后重新获取";
|
||
var s = 60;
|
||
clear = setInterval(() => {
|
||
s--;
|
||
_this.codeText = s + "S后重新获取";
|
||
if (s <= 0) {
|
||
clearInterval(clear);
|
||
_this.codeText = "获取验证码";
|
||
_this.readonly = false;
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 清除验证码
|
||
OpenClear() {
|
||
clearInterval(clear);
|
||
this.codeText = "获取验证码";
|
||
this.readonly = false;
|
||
},
|
||
onSubmit() {
|
||
var data = {};
|
||
if (this.isPassWordPhone) {
|
||
data.phone = this.resetForm.phone;
|
||
if (!this.resetForm.phone) {
|
||
this.$commonJS.showToast("请输入手机号");
|
||
|
||
return;
|
||
}
|
||
// this.resetForm
|
||
console.log("this.resetForm at line 402:", this.resetForm);
|
||
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
|
||
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
|
||
this.$commonJS.showToast("手机号格式不正确");
|
||
|
||
return;
|
||
}
|
||
}
|
||
} else {
|
||
data.email = this.resetForm.phone;
|
||
|
||
if (!this.resetForm.phone) {
|
||
this.$commonJS.showToast("请输入邮箱");
|
||
|
||
return;
|
||
}
|
||
|
||
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
|
||
this.$commonJS.showToast("邮箱格式不正确");
|
||
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (!this.resetForm.code) {
|
||
this.$commonJS.showToast("请输入验证码");
|
||
|
||
return;
|
||
}
|
||
if (!this.resetForm.password) {
|
||
this.$commonJS.showToast("请输入密码");
|
||
|
||
return;
|
||
}
|
||
if (!this.resetForm.confirmPassword) {
|
||
this.$commonJS.showToast("请输入确认密码");
|
||
|
||
return;
|
||
}
|
||
if (this.resetForm.confirmPassword != this.resetForm.password) {
|
||
this.$commonJS.showToast("两次密码不一致");
|
||
|
||
return;
|
||
}
|
||
if (!this.$base.passwordRegular.test(this.resetForm.password)) {
|
||
this.$commonJS.showToast("请输入不少于6位且包含数字和字母的密码");
|
||
|
||
return;
|
||
}
|
||
|
||
if (!this.passwordOk) {
|
||
console.log("不满足密码格式", this.note);
|
||
this.$commonJS.showToast(this.note);
|
||
return;
|
||
}
|
||
|
||
this.$http
|
||
.post(this.urlList.setPassword, {
|
||
phone: this.resetForm.phone,
|
||
code: this.resetForm.code,
|
||
password: this.resetForm.password,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$commonJS.showToast("密码修改成功！");
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
//页面隐藏
|
||
onHide() {},
|
||
//页面卸载
|
||
onUnload() {},
|
||
//页面下来刷新
|
||
onPullDownRefresh() {},
|
||
//页面上拉触底
|
||
onReachBottom() {},
|
||
//用户点击分享
|
||
onShareAppMessage(e) {
|
||
return this.wxShare();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
|
||
.page {
|
||
.title {
|
||
padding: 60rpx 0 80rpx 0;
|
||
font-size: 80rpx;
|
||
// color: #018f89;
|
||
color: #fff;
|
||
// color: #333333;
|
||
}
|
||
|
||
.input_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 100rpx;
|
||
padding-top: 0rpx;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
width: 180rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
button {
|
||
height: 78rpx;
|
||
line-height: 78rpx;
|
||
font-size: 30rpx;
|
||
color: $themeColor;
|
||
|
||
&:active {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
width: calc(100% - 100rpx);
|
||
left: 50rpx;
|
||
position: absolute;
|
||
bottom: 8vh;
|
||
// margin-top: 150rpx;
|
||
|
||
button {
|
||
font-size: 32rpx;
|
||
@include theme("btn_bg") color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
|
||
.protocol {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
|
||
text {
|
||
color: $themeColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.commonPage {
|
||
padding: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.forget_box {
|
||
padding: 0 40rpx;
|
||
background: #fff;
|
||
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.logo_bg {
|
||
background-image: url("@/static/icon/login_bg.png");
|
||
// background-position: center center;
|
||
padding: 0 40rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 25vh;
|
||
position: relative;
|
||
|
||
text {
|
||
font-size: 45upx;
|
||
line-height: 65rpx;
|
||
position: absolute;
|
||
bottom: 110rpx;
|
||
left: 60rpx;
|
||
color: #fff;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
|
||
.icon_hua_1 {
|
||
position: absolute;
|
||
bottom: 60rpx;
|
||
left: 245rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
opacity: 0.08;
|
||
}
|
||
|
||
.icon_hua_2 {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 30rpx;
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
.phoneNumberInput {
|
||
width: calc(100% - 160rpx);
|
||
// width: 100%;
|
||
height: 67rpx;
|
||
|
||
input {
|
||
font-size: 28rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.borderBottom {
|
||
border-bottom: 1px solid #efeef4;
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.quhao {
|
||
height: 50rpx;
|
||
width: 290rpx;
|
||
margin: 12rpx 15rpx 0 0;
|
||
}
|
||
|
||
.myselect {
|
||
width: 240rpx;
|
||
height: 50rpx !important;
|
||
|
||
::v-deep.uni-select {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
::v-deep.uni-select__selector-item {
|
||
font-size: 24rpx;
|
||
// padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.highlight {
|
||
color: $themeColor;
|
||
}
|
||
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.logo_bg {
|
||
background-image: url("@/static/icon/login_bg.png");
|
||
// background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 25vh;
|
||
position: relative;
|
||
|
||
text {
|
||
font-size: 45upx;
|
||
line-height: 65rpx;
|
||
position: absolute;
|
||
bottom: 110rpx;
|
||
left: 60rpx;
|
||
color: #fff;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
|
||
.icon_hua_1 {
|
||
position: absolute;
|
||
bottom: 60rpx;
|
||
left: 245rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
opacity: 0.08;
|
||
}
|
||
|
||
.icon_hua_2 {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 30rpx;
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
|
||
.register_page {
|
||
padding: calc(var(--status-bar-height)) 50rpx 40rpx;
|
||
background-color: #fff;
|
||
min-height: 75vh;
|
||
|
||
.login_method {
|
||
// display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 96rpx;
|
||
// padding-bottom: 5rpx;
|
||
text-align: center;
|
||
|
||
.title {
|
||
margin: 0 auto;
|
||
font-size: 40rpx;
|
||
letter-spacing: 3rpx;
|
||
color: #666;
|
||
|
||
&.active {
|
||
position: relative;
|
||
color: $themeColor;
|
||
padding-bottom: 35rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&.active::after {
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(-50%);
|
||
position: absolute;
|
||
content: "";
|
||
width: 150rpx;
|
||
height: 6rpx;
|
||
background-color: $themeColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left_triangle {
|
||
&::before {
|
||
left: 140rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 140rpx;
|
||
}
|
||
}
|
||
|
||
.right_triangle {
|
||
&::before {
|
||
left: 470rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 470rpx;
|
||
}
|
||
}
|
||
|
||
.input_tit {
|
||
margin-top: 40rpx;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: $themeColor;
|
||
}
|
||
|
||
.emaPho {
|
||
}
|
||
|
||
.emaPho > view {
|
||
display: inline-block;
|
||
padding: 10rpx 0;
|
||
color: #888;
|
||
}
|
||
|
||
.emaPho > view.active {
|
||
color: $themeColor;
|
||
padding: 10rpx 10rpx;
|
||
border-bottom: 2px solid $themeColor;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.emaPho > span {
|
||
display: inline-block;
|
||
margin: 0 30rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.input_box {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 8rpx;
|
||
border-bottom: solid 2rpx #efeef4;
|
||
// margin: 30rpx 0;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.input_item {
|
||
font-size: 28rpx;
|
||
border: 0px;
|
||
flex: 1;
|
||
// background-color: #f8f9fb;
|
||
height: 70rpx;
|
||
width: 100%;
|
||
outline: none;
|
||
//margin-left: 32rpx;
|
||
}
|
||
|
||
button {
|
||
height: 60rpx;
|
||
background-color: #f8f9fb;
|
||
font-size: 28rpx;
|
||
padding: 0 14rpx;
|
||
color: $themeColor;
|
||
line-height: 60rpx;
|
||
margin-left: 20rpx;
|
||
//margin-right: 40rpx;
|
||
}
|
||
|
||
.grey {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
// margin-top: 150rpx;
|
||
|
||
button {
|
||
font-size: 32rpx;
|
||
background-color: #e5e5e5;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 50rpx;
|
||
|
||
&.active {
|
||
@include theme("btn_bg") color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.password_register {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
//text-align: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
//text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.protocol_box {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
.select {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background-image: url("@/static/icon/ic_gender_unselected.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
margin-right: 15rpx;
|
||
|
||
&.active {
|
||
background-image: url("@/static/icon/ic_agreed.png");
|
||
}
|
||
}
|
||
|
||
> text {
|
||
color: $themeColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.station {
|
||
height: 230rpx;
|
||
}
|
||
|
||
.third_party_login_box {
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
width: 100%;
|
||
left: 0;
|
||
padding: 0 30rpx;
|
||
|
||
.third_party_title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:before,
|
||
&:after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 2rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
flex-shrink: 0;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.third_party_content {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 80upx;
|
||
height: 80upx;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_box {
|
||
width: 600upx;
|
||
border-radius: 10rpx;
|
||
|
||
.popup_title {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 88upx;
|
||
line-height: 88upx;
|
||
|
||
view {
|
||
align-items: center;
|
||
font-size: 30upx;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin: 0 20rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_content {
|
||
padding: 30rpx 40rpx;
|
||
}
|
||
|
||
.popup_footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
view {
|
||
width: 45%;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
color: #999;
|
||
line-height: 70upx;
|
||
margin: 0 0 30rpx 0;
|
||
}
|
||
|
||
view:last-child {
|
||
background-color: $themeColor;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dp_title {
|
||
font-size: 36rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #555;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dp_content {
|
||
max-height: 1000rpx;
|
||
overflow-y: scroll;
|
||
font-size: 28rpx;
|
||
color: #555;
|
||
line-height: 45rpx;
|
||
|
||
.dp_con1 {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// .dp_con2 {
|
||
// font-size: 30rpx;
|
||
// margin-top: 10rpx;
|
||
// margin-bottom: 10rpx;
|
||
// }
|
||
}
|
||
|
||
.qie_huan {
|
||
font-size: 26rpx;
|
||
margin: 20rpx 0 0 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.comTy {
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.youKeL {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 30rpx 0 0 0;
|
||
font-size: 26rpx;
|
||
color: $themeColor;
|
||
|
||
view {
|
||
font-weight: bold;
|
||
border: 1px solid $themeColor;
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 15rpx;
|
||
}
|
||
}
|
||
</style>
|