1108 lines
24 KiB
Vue
1108 lines
24 KiB
Vue
<template>
|
||
<view style="background-color: #fff">
|
||
<view class="logo_bg">
|
||
<text class="">您好，<br />欢迎来到 心灵空间</text>
|
||
<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">
|
||
<view class="login_method">
|
||
<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
|
||
<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
|
||
</view>
|
||
|
||
<!-- 验证码登录 -->
|
||
<view v-if="type == 2000">
|
||
<view class="flexbox" style="margin-top: 50rpx">
|
||
<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx">
|
||
<view @click="changeBrand(3000)" :class="{ active: brand == 3000 }">手机号</view>
|
||
<span>/</span>
|
||
<view @click="changeBrand(4000)" :class="{ active: brand == 4000 }">邮箱</view>
|
||
</view>
|
||
</view>
|
||
<!-- 带区号手机号 -->
|
||
<view class="flexbox" v-if="brand == 3000" style="margin: 36rpx 0; justify-content: space-between">
|
||
<view class="quhao">
|
||
<uni-data-select class="myselect" placeholder="请选择区号" v-model="loginForm.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="loginForm.phone"
|
||
placeholder="请输入您的手机号" placeholder-class="grey" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input_box" v-if="brand == 4000">
|
||
<u--input class="form_input_box" v-model="loginForm.email" placeholder="请输入您的邮箱"
|
||
placeholder-class="grey"/>
|
||
</view>
|
||
<view class="input_tit">验证码</view>
|
||
<view class="input_box">
|
||
<u--input class="form_input_box" v-model="loginForm.code" placeholder="请输入您的验证码"
|
||
placeholder-class="grey" maxlength="6" @confirm="onSubmit" />
|
||
<button class="active" @click="onSetCode">{{ codeText }}</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 密码登录 -->
|
||
<view v-if="type == 1000">
|
||
<!-- 手机号/邮箱 -->
|
||
<view class="input_tit" style="margin-top: 80rpx">手机号 / 邮箱</view>
|
||
<view class="input_box">
|
||
<u--input class="form_input_box" v-model="loginForm.phoneEmail" placeholder="请输入您的手机号或者邮箱"
|
||
placeholder-class="grey" />
|
||
</view>
|
||
<view class="input_tit">密码</view>
|
||
<view class="input_box">
|
||
<u--input v-model="loginForm.password" :password="!isSee" placeholder="请输入密码"
|
||
placeholder-class="grey" @confirm="onSubmit" class="form_input_box">
|
||
</u--input><u-icon class="active" :name="isSee ? 'eye-fill' : 'eye-off'" @click="isSee = !isSee"
|
||
:color="isSee ? '#7dc1f0' : '#b0b0b0'" size="22"
|
||
style="display: block; margin-right: 10rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="protocol_box">
|
||
<view class="select" :class="{ active: agree }" @click="agree = !agree"></view>
|
||
我已同意
|
||
|
||
<span class="highlight" @click="yhxyShow = true">《用户协议》</span>
|
||
和
|
||
<span class="highlight" @click="yszcShow = true">《隐私协议》</span>
|
||
</view>
|
||
<view class="btn_box">
|
||
<button @click="onSubmit" v-if="btnShow">登 录</button>
|
||
<button v-else>登 录</button>
|
||
</view>
|
||
<view class="loginHelp" v-if="submitClickNum > 0">
|
||
<text>登录遇到问题？</text><text class="link"
|
||
@click="onPageJump('/pages/user/workOrder', 'login')">去反馈问题</text>
|
||
</view>
|
||
|
||
<view class="qie_huan" style="display: flex; justify-content: center">
|
||
<view style="width: 30%" @click="changeType(1000)" v-if="type == 2000">密码登录</view>
|
||
<view style="width: 50%; display: flex; justify-content: space-between" v-if="type == 1000">
|
||
<text @click="changeType(2000)">验证码登录</text>
|
||
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
|
||
</view>
|
||
</view>
|
||
<view class="youKeL" v-if="$platform=='ios'">
|
||
<view @click="onPageJump('/pages/visitor/index')">免登录体验</view>
|
||
</view>
|
||
|
||
<u-popup :show="yhxyShow" title="用户协议" :round="10" @close="yhxyShow = false">
|
||
<view class="tanchu">
|
||
<view class="dp_title" v-html="yhxyText.title"></view>
|
||
<view class="dp_content" v-html="yhxyText.content"></view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-popup :show="yszcShow" title="隐私政策" :round="10" @close="yszcShow = false">
|
||
<view class="tanchu">
|
||
<view class="dp_title" v-html="yszcText.title"></view>
|
||
<view class="dp_content" v-html="yszcText.content"></view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import md5 from "@/plugins/md5";
|
||
|
||
var clear;
|
||
import { mapState, mapMutations } from "vuex";
|
||
import socket from "@/config/socket";
|
||
export default {
|
||
data() {
|
||
return {
|
||
appForm: {
|
||
loginName: 18834844847,
|
||
loginPwd: "Zy123456",
|
||
},
|
||
passShowIcon: require("@/static/icon/ic_logon_display.png"),
|
||
passHideIcon: require("@/static/icon/ic_logon_hide.png"),
|
||
type: 2000,
|
||
brand: 3000,
|
||
isSee: false,
|
||
//验证码
|
||
codeText: "获取验证码",
|
||
//验证码已发
|
||
readonly: false,
|
||
btnShow: true,
|
||
agree: false,
|
||
isIos: true,
|
||
isWeixin: true,
|
||
system: 13,
|
||
clearTime: null,
|
||
HealthOpen: false,
|
||
health_phone: "",
|
||
health_password: "",
|
||
isSee_H: false,
|
||
yhxyShow: false,
|
||
yszcShow: false,
|
||
yhxyText: {
|
||
title: "",
|
||
content: "",
|
||
},
|
||
yszcText: {
|
||
title: "",
|
||
content: ""
|
||
},
|
||
quShow: false,
|
||
quCodeList: [], // 国家区域码
|
||
loginForm: {},
|
||
urlList: {
|
||
registerOrLogin: "common/user/registerOrLogin", //验证码登录
|
||
passwordLogin: "common/user/login", //密码登录
|
||
sendcode: "common/user/sms/sendcode", //密码登录
|
||
sendEmailcode: "common/user/getMailCaptcha", //密码登录
|
||
apiLogin: "app/phone.do?loginV2",
|
||
},
|
||
submitClickNum: 0, //登录按钮点击次数
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
// #ifdef APP-PLUS
|
||
this.isIos = plus.os.name == "iOS";
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
this.system = parseFloat(systemInfo["system"].replace(/[a-zA-Z]/g, ""));
|
||
this.isWeixin = plus.runtime.isApplicationExist({
|
||
pname: "com.tencent.mm",
|
||
action: "weixin://",
|
||
});
|
||
this.type = 2000;
|
||
this.brand = 3000;
|
||
|
||
this.loginForm = {};
|
||
// #endif
|
||
},
|
||
created() {
|
||
this.getCountyCode();
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
this.getSettlement(109, "yszcText");
|
||
this.getSettlement(108, "yhxyText");
|
||
},
|
||
//方法
|
||
methods: {
|
||
...mapMutations(["setUserInfo"]),
|
||
...mapMutations(["setHealthMes"]),
|
||
changeType(val) {
|
||
this.loginForm = {};
|
||
this.type = 2000;
|
||
this.type = val;
|
||
this.isSee = false;
|
||
this.agree = false;
|
||
if (val == 2000) {
|
||
this.loginForm.quCode = this.quCodeList[0].value;
|
||
}
|
||
},
|
||
changeBrand(val) {
|
||
this.loginForm = {};
|
||
this.loginForm.quCode = this.quCodeList[0].value;
|
||
this.brand = val;
|
||
},
|
||
closeMusic() {
|
||
this.$music.setCloseBgm(); // 关闭音频
|
||
uni.setStorage({
|
||
key: "playVisible",
|
||
data: false,
|
||
success: function() {
|
||
console.log("success");
|
||
},
|
||
});
|
||
this.setUserInfo({
|
||
playVisible: false,
|
||
});
|
||
},
|
||
// 获取国家区域编码
|
||
getCountyCode() {
|
||
this.$http
|
||
.request({
|
||
url: "book/baseArea/getAllBaseArea",
|
||
method: "POST",
|
||
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.loginForm.quCode = this.quCodeList[0].value;
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.quCodeList = [];
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e, "e");
|
||
});
|
||
},
|
||
// 获取协议内容
|
||
async getSettlement(id, type) {
|
||
//隐私策略
|
||
var data = await this.$commonJS.getAgreement(id);
|
||
if (data.content) {
|
||
data.content = data.content.replace(
|
||
/<h5>/g,
|
||
'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
|
||
);
|
||
data.content = data.content.replace(/<\/h5>/g, "</view>");
|
||
}
|
||
if (type == "yszcText") {
|
||
this.yszcText = data;
|
||
}
|
||
if (type == "yhxyText") {
|
||
this.yhxyText = data;
|
||
}
|
||
},
|
||
|
||
quChange(e) {
|
||
console.log(e, "e");
|
||
},
|
||
// 修改密码
|
||
resetPassWord() {
|
||
uni.navigateTo({
|
||
url: "",
|
||
});
|
||
},
|
||
|
||
onPageJump(url, name) {
|
||
if(name){
|
||
uni.navigateTo({
|
||
url: `${url}?name=${name}`
|
||
});
|
||
}else{
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
}
|
||
},
|
||
//验证码按钮文字状态
|
||
getCodeState() {
|
||
clear && clearInterval(clear);
|
||
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);
|
||
},
|
||
// 发送验证码
|
||
onSetCode() {
|
||
if (this.readonly) {
|
||
return;
|
||
}
|
||
|
||
if (!this.agree) {
|
||
uni.showToast({
|
||
title: "请先同意《用户协议》和《隐私协议》",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.brand == 3000) {
|
||
if (!this.loginForm.phone) {
|
||
uni.showToast({
|
||
title: "请输入手机号",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
|
||
// 如果没选择国家code，默认是中国大陆
|
||
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
|
||
this.submitClickNum += 1
|
||
uni.showToast({
|
||
title: "手机格式不正确",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.$http
|
||
.post(this.urlList.sendcode, {
|
||
phone: this.loginForm.phone,
|
||
areaCode: this.loginForm.quCode,
|
||
type: 2000,
|
||
})
|
||
.then((res) => {
|
||
uni.showToast({
|
||
title: "验证码发送成功",
|
||
icon: "none",
|
||
});
|
||
this.getCodeState();
|
||
});
|
||
} else {
|
||
if (!this.loginForm.email) {
|
||
uni.showToast({
|
||
title: "请输入邮箱",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!this.$base.mailRegular.test(this.loginForm.email)) {
|
||
uni.showToast({
|
||
title: "邮箱格式不正确",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
this.$http
|
||
.get(this.urlList.sendEmailcode, {
|
||
email: this.loginForm.email,
|
||
})
|
||
.then((res) => {
|
||
uni.showToast({
|
||
title: "验证码发送成功",
|
||
icon: "none",
|
||
});
|
||
this.getCodeState();
|
||
});
|
||
}
|
||
},
|
||
loginAPP() {
|
||
this.$http.post(this.urlList.apiLogin, this.appForm).then((res) => {
|
||
this.$store.commit("setUserInfo", res.obj);
|
||
uni.setStorageSync("token", res.obj.token);
|
||
uni.setStorageSync("customerOid", res.obj.customerOid);
|
||
this.setUserInfo(res.obj);
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
duration: 1000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/home/index",
|
||
});
|
||
}, 1000);
|
||
});
|
||
return;
|
||
},
|
||
// 手机密码登录
|
||
async onSubmit() {
|
||
if (!this.agree) {
|
||
this.$commonJS.showToast("请先同意《用户协议》和《隐私协议》");
|
||
|
||
return;
|
||
}
|
||
|
||
let httpData = {};
|
||
if (this.type == 2000) {
|
||
if (this.brand == 3000) {
|
||
if (!this.loginForm.phone) {
|
||
uni.showToast({
|
||
title: "请输入手机号",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
|
||
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
|
||
this.submitClickNum += 1
|
||
this.$commonJS.showToast("手机格式不正确");
|
||
|
||
return;
|
||
}
|
||
}
|
||
httpData.tel = this.loginForm.phone;
|
||
} else {
|
||
if (!this.loginForm.email) {
|
||
this.$commonJS.showToast("请输入邮箱");
|
||
|
||
return;
|
||
}
|
||
if (!this.$base.mailRegular.test(this.loginForm.email)) {
|
||
this.$commonJS.showToast("邮箱格式不正确");
|
||
|
||
return;
|
||
}
|
||
httpData.tel = this.loginForm.email;
|
||
}
|
||
if (!this.loginForm.code) {
|
||
this.$commonJS.showToast("请输入验证码");
|
||
|
||
return;
|
||
}
|
||
httpData.code = this.loginForm.code;
|
||
|
||
await this.$http
|
||
.get(this.urlList.registerOrLogin, httpData)
|
||
.then(async (res) => {
|
||
this.submitClickNum = 0
|
||
res.userInfo.token = res.token.token;
|
||
await this.setUserInfo(res.userInfo);
|
||
uni.setStorageSync("token", res.token.token);
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.setStorageSync("isJump", "false");
|
||
uni.switchTab({
|
||
url: "/pages/home/index"
|
||
});
|
||
}, 100);
|
||
}).catch(e => {
|
||
uni.showToast({
|
||
title: '登录失败',
|
||
icon: 'none'
|
||
})
|
||
this.submitClickNum += 1
|
||
});
|
||
} else {
|
||
if (!this.loginForm.phoneEmail) {
|
||
uni.showToast({
|
||
title: "请输入手机号或邮箱",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!this.loginForm.password) {
|
||
uni.showToast({
|
||
title: "请输入密码",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
httpData.password = this.loginForm.password;
|
||
httpData.phone = this.loginForm.phoneEmail;
|
||
await this.$http
|
||
.post(this.urlList.passwordLogin, httpData)
|
||
.then(async (res) => {
|
||
this.submitClickNum = 0
|
||
res.userInfo.token = res.token.token;
|
||
await this.setUserInfo(res.userInfo);
|
||
uni.setStorageSync("token", res.token.token);
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/home/index"
|
||
});
|
||
}, 500);
|
||
}).catch(e => {
|
||
uni.showToast({
|
||
title: '登录失败',
|
||
icon: 'none'
|
||
})
|
||
this.submitClickNum += 1
|
||
});
|
||
}
|
||
},
|
||
|
||
// 一路健康APP登录进入
|
||
onSubmit_Health() {
|
||
if (!this.health_phone) {
|
||
this.$commonJS.showToast("请输入一路健康账号");
|
||
return;
|
||
}
|
||
|
||
if (!this.health_password) {
|
||
this.$commonJS.showToast("请输入密码");
|
||
return;
|
||
}
|
||
|
||
let healthData = {};
|
||
healthData.phone = this.health_phone;
|
||
healthData.password = this.health_password;
|
||
|
||
this.$http.post("book/user/getEverhealthInfo", healthData).then((res) => {
|
||
this.setHealthMes(res.everhealthInfo);
|
||
if (res.userInfo) {
|
||
res.userInfo.token = res.token.token;
|
||
this.setUserInfo(res.userInfo);
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/home/index"
|
||
});
|
||
}, 500);
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: "",
|
||
});
|
||
}, 600);
|
||
uni.showToast({
|
||
title: "账号验证成功",
|
||
duration: 600,
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 一路健康APP登录
|
||
onHealthLogin() {
|
||
if (!this.agree) {
|
||
this.$commonJS.showToast("请先同意《用户协议》和《隐私协议》");
|
||
|
||
return;
|
||
}
|
||
this.HealthOpen = true;
|
||
},
|
||
|
||
// 微信APP登录
|
||
onWxAppLogin() {
|
||
uni.login({
|
||
provider: "weixin",
|
||
success: (res) => {
|
||
uni.getUserInfo({
|
||
success: (info) => {
|
||
this.userInfo = info.userInfo;
|
||
if (res.authResult.openid && res.authResult.unionid) {
|
||
this.$http
|
||
.post("api/open/v1/login", {
|
||
wxAppOpenId: res.authResult.openid,
|
||
unionid: res.authResult.unionid,
|
||
nickname: this.userInfo.nickName,
|
||
headImg: this.userInfo.avatarUrl,
|
||
})
|
||
.then((data) => {
|
||
this.setUserInfo({
|
||
openId: res.authResult.openid,
|
||
unionid: res.authResult.unionid,
|
||
...data,
|
||
});
|
||
if (data.thirdLoginSuccess) {
|
||
socket.init();
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/home/index"
|
||
});
|
||
}, 500);
|
||
} else {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您还未绑定手机号，请先绑定~",
|
||
confirmText: "去绑定",
|
||
cancelText: "再逛会",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: "",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "点击无效，请再次点击",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
fail: () => {
|
||
console.log("未授权");
|
||
},
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
},
|
||
// 苹果登录
|
||
onAppleLogin() {
|
||
uni.login({
|
||
provider: "apple",
|
||
success: (loginRes) => {
|
||
uni.getUserInfo({
|
||
provider: "apple",
|
||
success: (userInfoRes) => {
|
||
if (userInfoRes.userInfo.identityToken) {
|
||
this.$http
|
||
.post("api/open/v1/ios_login", {
|
||
identityToken: userInfoRes.userInfo.identityToken,
|
||
})
|
||
.then((data) => {
|
||
this.setUserInfo(data);
|
||
if (data.thirdLoginSuccess) {
|
||
socket.init();
|
||
uni.showToast({
|
||
title: "登录成功",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/home/index"
|
||
});
|
||
}, 500);
|
||
} else {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您还未绑定手机号，请先绑定~",
|
||
confirmText: "去绑定",
|
||
cancelText: "再逛会",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: "",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: "登录失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
},
|
||
//页面隐藏
|
||
onHide() {},
|
||
//页面卸载
|
||
onUnload() {},
|
||
//页面下来刷新
|
||
onPullDownRefresh() {},
|
||
//页面上拉触底
|
||
onReachBottom() {},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/static/mixin.scss";
|
||
|
||
.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;
|
||
|
||
/deep/.uni-select {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/deep/.uni-select__selector-item {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.highlight {
|
||
color: $themeColor;
|
||
}
|
||
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.logo_bg {
|
||
background-image: url("@/static/login_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 25vh;
|
||
position: relative;
|
||
|
||
text {
|
||
font-size: 45upx;
|
||
line-height: 65rpx;
|
||
position: absolute;
|
||
bottom: 140rpx;
|
||
left: 45rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
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 {
|
||
justify-content: space-between;
|
||
padding: 0 96rpx;
|
||
text-align: center;
|
||
|
||
.title {
|
||
margin: 0 auto;
|
||
font-size: 40rpx;
|
||
letter-spacing: 3rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.left_triangle {
|
||
&::before {
|
||
left: 140rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 140rpx;
|
||
}
|
||
}
|
||
|
||
.right_triangle {
|
||
&::before {
|
||
left: 470rpx;
|
||
}
|
||
|
||
&::after {
|
||
left: 470rpx;
|
||
}
|
||
}
|
||
|
||
.input_tit {
|
||
margin-top: 20rpx;
|
||
font-size: 38rpx;
|
||
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;
|
||
height: 70rpx;
|
||
width: 100%;
|
||
outline: none;
|
||
}
|
||
|
||
button {
|
||
height: 60rpx;
|
||
background-color: #f8f9fb;
|
||
font-size: 28rpx;
|
||
padding: 0 14rpx;
|
||
color: $themeColor;
|
||
line-height: 60rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.grey {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
margin-top: 40rpx;
|
||
|
||
button {
|
||
font-size: 32rpx;
|
||
background-color: #7dc1f0;
|
||
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 {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.protocol_box {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
|
||
.select {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
background-image: url("@/static/icon/ic_gender_unselected.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
margin-right: 10rpx;
|
||
|
||
&.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;
|
||
}
|
||
}
|
||
|
||
.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: 60rpx 0 0 0;
|
||
font-size: 28rpx;
|
||
color: $themeColor;
|
||
|
||
view {
|
||
border: 1px solid $themeColor;
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 15rpx;
|
||
}
|
||
}
|
||
|
||
.loginHelp {
|
||
border: 1px solid #f5dab1;
|
||
margin-top: 16rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
padding: 10rpx;
|
||
background-color: #fdf6ec;
|
||
border-radius: 15rpx;
|
||
|
||
.link {
|
||
color: #e6a23c;
|
||
}
|
||
}
|
||
</style> |