Browse Source
Merge branch 'wangyi/feature-20251022162725-启动页登录注册' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into dongqian/feature-20251022181325-deepmate简版
wangyi/feature-20251022162725-启动页登录注册
Merge branch 'wangyi/feature-20251022162725-启动页登录注册' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into dongqian/feature-20251022181325-deepmate简版
wangyi/feature-20251022162725-启动页登录注册
wangyetao
4 weeks ago
23 changed files with 3465 additions and 452 deletions
-
9pages.json
-
284pages/start/Registration/Registration.vue
-
1341pages/start/Registration/list.js
-
259pages/start/login/login.vue
-
69pages/start/login/verification.js
-
985pages/start/recoverPassword/recoverPassword.vue
-
47pages/start/select/select.vue
-
4pages/start/startup/startup.vue
-
BINstatic/icons/To.png
-
BINstatic/icons/back.png
-
BINstatic/icons/look.png
-
BINstatic/icons/start-logo.png
-
BINstatic/icons/unlook.png
-
BINstatic/select.png
-
BINstatic/start-logo.png
-
18uni_modules/uni-popup/changelog.md
-
28uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
-
9uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
-
27uni_modules/uni-popup/components/uni-popup/uni-popup.vue
-
83uni_modules/uni-popup/package.json
-
7uni_modules/uni-transition/changelog.md
-
72uni_modules/uni-transition/components/uni-transition/uni-transition.vue
-
103uni_modules/uni-transition/package.json
1341
pages/start/Registration/list.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,69 @@ |
|||
|
|||
function verificationPhone(countryCode,phoneNumber) { |
|||
switch (countryCode) { |
|||
case '+86': |
|||
return verificationChina(phoneNumber); |
|||
case '+1': |
|||
return verificationAmerica(phoneNumber); |
|||
case '+65': |
|||
return verificationSingapore(phoneNumber); |
|||
case '+60': |
|||
return verificationMalaysia(phoneNumber); |
|||
case '+66': |
|||
return verificationThailand(phoneNumber); |
|||
case '+852': |
|||
return verificationHongKong(phoneNumber); |
|||
case '+84': |
|||
return verificationVietnam(phoneNumber); |
|||
default: |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
|
|||
function verificationChina(phoneNumber){ |
|||
const phoneRegex = /^1[3-9]\d{9}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
|
|||
|
|||
function verificationAmerica(phoneNumber){ |
|||
const phoneRegex = /^[2-9]\d{2}[- ]?\d{4}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
function verificationSingapore(phoneNumber){ |
|||
const phoneRegex = /^[89]\d{7}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
function verificationMalaysia(phoneNumber){ |
|||
const phoneRegex = /^01\d{8}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
|
|||
function verificationHongKong(phoneNumber){ |
|||
const phoneRegex = /^0[896]\d{8}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
|
|||
|
|||
function verificationThailand(phoneNumber){ |
|||
const phoneRegex = /^[5-9]\d{7}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
|
|||
|
|||
|
|||
function verificationVietnam(phoneNumber){ |
|||
const phoneRegex = /^(0)?[3-9]\d{8}$/; |
|||
return phoneRegex.test(phoneNumber); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
function verificationEmail(email) { |
|||
const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; |
|||
return emailRegex.test(email); |
|||
} |
|||
|
|||
export {verificationPhone,verificationEmail} |
|||
@ -0,0 +1,985 @@ |
|||
<template> |
|||
<view class="login-registration-container"> |
|||
<!-- 自定义导航栏 --> |
|||
<view |
|||
class="custom-navbar" |
|||
:style="{ paddingTop: safeAreaInsets?.top + 'px' }" |
|||
> |
|||
<view class="nav-left"> |
|||
<image |
|||
class="icons" |
|||
@click="goToBack" |
|||
src="../../../static/icons/back.png" |
|||
alt="返回首页" |
|||
/> |
|||
</view> |
|||
<view class="nav-right"> |
|||
<image |
|||
class="icons" |
|||
src="../../../static/icons/Headset.png" |
|||
alt="联系客服" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- Logo --> |
|||
<!-- <image class="logo" src="/static/logo.png" mode="aspectFit"></image> --> |
|||
|
|||
<!-- 欢迎语 --> |
|||
<text class="welcome-text">找回密码</text> |
|||
|
|||
<!-- 邮箱/手机号切换 --> |
|||
<view v-if="!isRecovering" class="switch-container"> |
|||
<text |
|||
class="switch-item" |
|||
:class="{ active: switchType === 'Email' }" |
|||
@click="switchEmail" |
|||
>邮箱</text |
|||
> |
|||
<text |
|||
class="switch-item" |
|||
:class="{ active: switchType === 'Phone' }" |
|||
@click="switchPhone" |
|||
>手机号</text |
|||
> |
|||
</view> |
|||
<view v-else class="switch-container-occupy"> </view> |
|||
<!-- 输入框 --> |
|||
<view v-if="isRecovering" class="input-container"> |
|||
<view v-if="switchType === 'Email'"> |
|||
<!-- 修改邮箱输入框容器，将图标包含在内 --> |
|||
<view class="input-with-icon"> |
|||
<image |
|||
class="input-icon" |
|||
src="../../../static/icons/Unlock.png" |
|||
alt="" |
|||
/> |
|||
<input |
|||
class="input-field" |
|||
:type="newPasswordLookFirst ? 'text' : 'password'" |
|||
placeholder="输入新密码" |
|||
v-model="newPasswordFirst" |
|||
/> |
|||
<image |
|||
class="input-icon-eye" |
|||
@click="newPasswordLookFirst = !newPasswordLookFirst" |
|||
:src=" |
|||
!newPasswordLookFirst |
|||
? '../../../static/icons/unlook.png' |
|||
: '../../../static/icons/look.png' |
|||
" |
|||
alt="" |
|||
/> |
|||
</view> |
|||
<view class="input-with-icon"> |
|||
<image |
|||
class="input-icon" |
|||
src="../../../static/icons/Unlock.png" |
|||
alt="" |
|||
/> |
|||
<input |
|||
class="input-field" |
|||
:type="newPasswordLookSecond ? 'text' : 'password'" |
|||
placeholder="再次确认" |
|||
v-model="newPasswordSecond" |
|||
/> |
|||
<image |
|||
class="input-icon-eye" |
|||
@click="newPasswordLookSecond = !newPasswordLookSecond" |
|||
:src=" |
|||
!newPasswordLookSecond |
|||
? '../../../static/icons/unlook.png' |
|||
: '../../../static/icons/look.png' |
|||
" |
|||
alt="" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else class="input-container"> |
|||
<view v-if="switchType === 'Email'"> |
|||
<!-- 修改邮箱输入框容器，将图标包含在内 --> |
|||
<view class="input-with-icon"> |
|||
<image |
|||
class="input-icon" |
|||
src="../../../static/icons/Mail.png" |
|||
alt="" |
|||
/> |
|||
<input |
|||
class="input-field" |
|||
type="text" |
|||
placeholder="请输入邮箱" |
|||
v-model="email" |
|||
/> |
|||
<view> |
|||
<button |
|||
class="send-code-btn-email" |
|||
:disabled="isCodeBtnDisabled" |
|||
:class="{ 'send-code-btn-disabled': isCodeBtnDisabled }" |
|||
@click="sendCode" |
|||
> |
|||
<text |
|||
class="send-code-text" |
|||
:class="{ 'send-code-btn-disabled-text': isCodeBtnDisabled }" |
|||
>{{ codeBtnText }}</text |
|||
> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<view class="input-with-icon"> |
|||
<image |
|||
class="input-icon" |
|||
src="../../../static/icons/Text-recognition.png" |
|||
alt="" |
|||
/> |
|||
<input |
|||
class="input-field" |
|||
type="text" |
|||
placeholder="请输入验证码" |
|||
v-model="password" |
|||
/> |
|||
</view> |
|||
</view> |
|||
<view v-if="switchType === 'Phone'" class="phone-input-container"> |
|||
<view class="country-code-selector" @click="showCountryPicker"> |
|||
<image |
|||
class="country-flag-img" |
|||
src="../../../static/icons/Iphone.png" |
|||
mode="aspectFit" |
|||
></image> |
|||
<text class="country-code">{{ selectedCountry.code }}</text> |
|||
<!-- <text class="arrow-down">▼</text> --> |
|||
</view> |
|||
<input |
|||
class="input-field phone-input" |
|||
type="number" |
|||
placeholder="输入手机号" |
|||
v-model="phone" |
|||
@input="onPhoneInput" |
|||
/> |
|||
<view> |
|||
<button |
|||
class="send-code-btn" |
|||
:disabled="isCodeBtnDisabled" |
|||
:class="{ 'send-code-btn-disabled': isCodeBtnDisabled }" |
|||
@click="sendCode" |
|||
> |
|||
<text |
|||
class="send-code-text" |
|||
:class="{ 'send-code-btn-disabled-text': isCodeBtnDisabled }" |
|||
>{{ codeBtnText }}</text |
|||
> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<view v-if="switchType === 'Phone'" class="input-with-icon"> |
|||
<image |
|||
class="input-icon" |
|||
src="../../../static/icons/Text-recognition.png" |
|||
alt="" |
|||
/> |
|||
<input |
|||
class="input-field" |
|||
type="text" |
|||
placeholder="请输入验证码" |
|||
v-model="password" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 用户协议 --> |
|||
<view @click="changeCheckbox" class="agreement-container-one"> |
|||
<text |
|||
class="agreement-text-one" |
|||
:style="!isRecovering ? 'visibility: hidden' : 'visibility: visible'" |
|||
> |
|||
密码最少8位数 |
|||
</text> |
|||
</view> |
|||
|
|||
<!-- 注册按钮 --> |
|||
<button class="register-btn" @click="register"> |
|||
{{ isRecovering ? "确认" : "下一步" }} |
|||
</button> |
|||
|
|||
<!-- 或者 --> |
|||
<text class="or-text-one" @click="goToRegistration" |
|||
>如果您还没有账号，点击注册 |
|||
<image class="to-icon" src="../../../static/icons/To.png"></image> |
|||
</text> |
|||
|
|||
<!-- 或者 --> |
|||
<text class="or-text" @click="goToLogin">已有账号？登录 </text> |
|||
|
|||
<!-- 同意弹窗 --> |
|||
<uniPopup ref="agreementPopup" type="dialog"> |
|||
<view class="popup-content"> |
|||
<text class="popup-title">同意并继续</text> |
|||
<text class="popup-message">请阅读并同意服务协议和隐私权限</text> |
|||
<button class="agree-button" @click="handleAgree"> |
|||
<text class="agree-text">同意</text> |
|||
</button> |
|||
</view> |
|||
</uniPopup> |
|||
<footerBar class="static-footer" :type="type"></footerBar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from "vue"; |
|||
// 导入完整的国家列表 |
|||
import countryList from "../login/list"; |
|||
import footerBar from "../../../components/footerBar-cn.vue"; |
|||
import uniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"; |
|||
import { verificationPhone, verificationEmail } from "../login/verification"; |
|||
|
|||
const type = ref("member"); |
|||
const email = ref(""); |
|||
const password = ref(""); |
|||
const newPasswordFirst = ref(""); |
|||
const newPasswordSecond = ref(""); |
|||
const phone = ref(""); |
|||
const country = ref("+86"); |
|||
const agreed = ref(false); |
|||
const switchType = ref("Phone"); // 默认是邮箱注册 |
|||
const { safeAreaInsets } = uni.getSystemInfoSync(); |
|||
const codeBtnText = ref("获取验证码"); |
|||
const isCodeBtnDisabled = ref(false); // 添加验证码按钮禁用状态 |
|||
const checkboxUrl = ref("../../../static/icons/Check-one-false.png"); |
|||
const isRecovering = ref(false); |
|||
const newPasswordLookFirst = ref(false); |
|||
const newPasswordLookSecond = ref(false); |
|||
|
|||
// 使用从list.js导入的完整国家列表数据 |
|||
const countries = ref( |
|||
countryList.list.map((item) => ({ |
|||
name: item.name, |
|||
code: `+${item.tel}`, |
|||
flag: item.flag, |
|||
short: item.short, |
|||
en: item.en, |
|||
})) |
|||
); |
|||
|
|||
// 默认选中的国家（中国） |
|||
const selectedCountry = ref( |
|||
countries.value.find((country) => country.short === "CN") || |
|||
countries.value[0] |
|||
); |
|||
|
|||
// 显示国家选择器 |
|||
function showCountryPicker() { |
|||
uni.showActionSheet({ |
|||
itemList: countries.value.map( |
|||
(country) => `${country.name} ${country.code}` |
|||
), |
|||
success: function (res) { |
|||
selectedCountry.value = countries.value[res.tapIndex]; |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
function goToBack() { |
|||
// 返回上一页 |
|||
uni.navigateBack(-1); |
|||
} |
|||
|
|||
function switchEmail() { |
|||
// 切换到邮箱注册 |
|||
switchType.value = "Email"; |
|||
} |
|||
|
|||
function switchPhone() { |
|||
// 切换到手机注册 |
|||
switchType.value = "Phone"; |
|||
} |
|||
|
|||
|
|||
function register() { |
|||
if (isRecovering.value) { |
|||
|
|||
if(!newPasswordFirst.value || !newPasswordSecond.value){ |
|||
uni.showToast({ |
|||
title: "密码不能为空", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (newPasswordFirst.value !== newPasswordSecond.value) { |
|||
uni.showToast({ |
|||
title: "前后密码不一致", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 密码逻辑 |
|||
return; |
|||
} |
|||
if (switchType.value === "Phone") { |
|||
// 登录逻辑 |
|||
if (!phone.value) { |
|||
uni.showToast({ |
|||
title: "请输入手机号码", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!password.value) { |
|||
uni.showToast({ |
|||
title: "请输入验证码", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
const phoneAll = `${country.value}${phone.value}`; |
|||
console.log("完整手机号" + phoneAll); |
|||
if (validatePhoneNumber(country.value, phone.value)) { |
|||
console.log("登录成功:", phoneAll); |
|||
} |
|||
|
|||
// 发送登录请求 |
|||
// console.log("登录:", phone.value); |
|||
} |
|||
|
|||
if (switchType.value === "Email") { |
|||
// 登录逻辑 |
|||
if (!email.value) { |
|||
uni.showToast({ |
|||
title: "请输入邮箱地址", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!password.value) { |
|||
uni.showToast({ |
|||
title: "请输入验证码", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const bool = verificationEmail(email.value); |
|||
console.log("验证是否成功", bool); |
|||
|
|||
// 检查格式是否正确 |
|||
if (!bool) { |
|||
uni.showToast({ |
|||
title: "邮箱格式不正确", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 发送登录请求 |
|||
console.log("登录:", email.value); |
|||
} |
|||
|
|||
|
|||
|
|||
isRecovering.value = !isRecovering.value; |
|||
|
|||
// 如果已经同意，则继续登录流程 |
|||
// uni.showToast({ |
|||
// title: "登录成功", |
|||
// icon: "success", |
|||
// }); |
|||
} |
|||
|
|||
function goToLogin() { |
|||
// 跳转到登录页 |
|||
uni.navigateTo({ |
|||
url: "/pages/start/login/login", |
|||
}); |
|||
} |
|||
|
|||
function onPhoneInput(e) { |
|||
// 确保只允许输入数字 |
|||
const value = e.detail.value; |
|||
// 使用 isNaN 检查是否为有效数字 |
|||
if (isNaN(value)) { |
|||
phone.value = ""; |
|||
} else { |
|||
phone.value = value; |
|||
} |
|||
} |
|||
|
|||
// function sendCode() { |
|||
// // 如果按钮已禁用，则不执行后续逻辑 |
|||
// if (isCodeBtnDisabled.value) return; |
|||
|
|||
// // 设置按钮为禁用状态 |
|||
// isCodeBtnDisabled.value = true; |
|||
// codeBtnText.value = "重新发送"; |
|||
// let time = 6; |
|||
// const timer = setInterval(() => { |
|||
// time--; |
|||
// codeBtnText.value = "重新发送 " + time + "S"; |
|||
// if (time <= 0) { |
|||
// clearInterval(timer); |
|||
// codeBtnText.value = "重新发送"; |
|||
// // 倒计时结束后启用按钮 |
|||
// isCodeBtnDisabled.value = false; |
|||
// } |
|||
// }, 1000); |
|||
|
|||
// return; |
|||
// } |
|||
|
|||
function sendCode() { |
|||
if (switchType.value === "Phone") { |
|||
if (!phone.value) { |
|||
uni.showToast({ |
|||
title: "请输入手机号", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const bool = verificationPhone(country.value, phone.value); |
|||
console.log("验证是否成功", bool); |
|||
|
|||
// 检查格式是否正确 |
|||
if (!bool) { |
|||
uni.showToast({ |
|||
title: "手机号格式不正确", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
if (switchType.value === "Email") { |
|||
if (!email.value) { |
|||
uni.showToast({ |
|||
title: "请输入邮箱地址", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
const bool = verificationEmail(email.value); |
|||
console.log("验证是否成功", bool); |
|||
|
|||
// 检查格式是否正确 |
|||
if (!bool) { |
|||
uni.showToast({ |
|||
title: "邮箱格式不正确", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
// 如果按钮已禁用，则不执行后续逻辑 |
|||
if (isCodeBtnDisabled.value) return; |
|||
|
|||
// 设置按钮为禁用状态 |
|||
isCodeBtnDisabled.value = true; |
|||
codeBtnText.value = "重新发送"; |
|||
let time = 6; |
|||
const timer = setInterval(() => { |
|||
time--; |
|||
codeBtnText.value = "重新发送 " + time + "s"; |
|||
if (time <= 0) { |
|||
clearInterval(timer); |
|||
codeBtnText.value = "重新发送"; |
|||
// 倒计时结束后启用按钮 |
|||
isCodeBtnDisabled.value = false; |
|||
} |
|||
}, 1000); |
|||
|
|||
return; |
|||
} |
|||
|
|||
function openAgreement() { |
|||
// 打开用户协议 |
|||
console.log("打开用户协议"); |
|||
uni.navigateTo({ |
|||
url: "/pages/start/agreement/agreement", |
|||
}); |
|||
} |
|||
|
|||
function openPrivacy() { |
|||
// 打开隐私政策 |
|||
console.log("打开隐私政策"); |
|||
uni.navigateTo({ |
|||
url: "/pages/start/privacy/privacy", |
|||
}); |
|||
} |
|||
|
|||
function changeCheckbox() { |
|||
agreed.value = !agreed.value; |
|||
checkboxUrl.value = agreed.value |
|||
? "../../../static/icons/Check-one-true.png" |
|||
: "../../../static/icons/Check-one-false.png"; |
|||
} |
|||
|
|||
// 验证手机号是否正确 |
|||
function validatePhoneNumber(countryCode, phoneNumber) { |
|||
// 检查是否为空 |
|||
if (!phoneNumber || phoneNumber.trim() === "") { |
|||
uni.showToast({ |
|||
title: "手机号不能为空", |
|||
icon: "none", |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
const bool = verificationPhone(countryCode, phoneNumber); |
|||
console.log("验证是否成功", bool); |
|||
|
|||
// 检查格式是否正确 |
|||
if (!bool) { |
|||
uni.showToast({ |
|||
title: "手机号格式不正确", |
|||
icon: "none", |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
// 去掉+号后检查长度（手机号通常在7到15位之间） |
|||
const cleanNumber = phoneNumber.replace(/^\+/, ""); |
|||
if (cleanNumber.length < 7 || cleanNumber.length > 15) { |
|||
uni.showToast({ |
|||
title: "手机号长度不正确", |
|||
icon: "none", |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 添加弹窗引用 |
|||
const agreementPopup = ref(null); |
|||
|
|||
// 处理同意按钮点击 |
|||
function handleAgree() { |
|||
// 关闭弹窗 |
|||
agreementPopup.value.close(); |
|||
// 设置为已同意 |
|||
agreed.value = true; |
|||
checkboxUrl.value = "../../../static/icons/Check-one-true.png"; |
|||
// 继续登录流程 |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.login-registration-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 70rpx; |
|||
height: 100vh; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
/* 自定义导航栏样式 */ |
|||
.custom-navbar { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
/* z-index: 999; */ |
|||
width: 90%; |
|||
height: 80rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10rpx 40rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.nav-left, |
|||
.nav-right { |
|||
flex: 1; |
|||
} |
|||
|
|||
.nav-right { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.nav-left { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.icons { |
|||
margin: 20rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
/* margin-right: 10rpx; */ |
|||
} |
|||
|
|||
.back-btn, |
|||
.headphone-btn { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
padding: 10rpx; |
|||
} |
|||
|
|||
.logo { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
margin-bottom: 60rpx; |
|||
border-radius: 20%; |
|||
} |
|||
|
|||
.welcome-text { |
|||
font-size: 48rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
margin-bottom: 60rpx; |
|||
/* text-align: left; */ |
|||
/* align-self: flex-start; */ |
|||
} |
|||
|
|||
.switch-container { |
|||
display: flex; |
|||
margin-bottom: 40rpx; |
|||
align-self: flex-start; |
|||
} |
|||
|
|||
.switch-item { |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
padding: 10rpx 20rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.switch-item::after { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 60%; |
|||
/* 控制边框宽度 */ |
|||
height: 2rpx; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.switch-item.active { |
|||
color: #333333; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.switch-item.active::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 60rpx; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 30%; |
|||
/* 控制边框宽度 */ |
|||
height: 7rpx; |
|||
background-color: #333333; |
|||
} |
|||
|
|||
.input-container { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 添加图标输入框样式 */ |
|||
.input-with-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 80rpx; |
|||
border-bottom: 2rpx solid #e5e5e5; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.input-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin: 0 20rpx; |
|||
} |
|||
.input-icon-eye { |
|||
width: 40rpx; |
|||
height: 20rpx; |
|||
margin: 0 20rpx; |
|||
} |
|||
|
|||
.input-field { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
padding: 15rpx 0; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
border: none; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.phone-input-container { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 95.8%; |
|||
height: 80rpx; |
|||
/* border-radius: 20rpx; */ |
|||
/* border: 2rpx solid #e5e5e5; */ |
|||
/* background-color: #f5f5f5; */ |
|||
padding: 0 10rpx; |
|||
border-bottom: 2rpx solid #e5e5e5; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.country-code-selector { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 10rpx; |
|||
padding-bottom: 1rpx; |
|||
height: 100%; |
|||
/* border-right: 2rpx solid #e5e5e5; */ |
|||
/* background-color: #f5f5f5; */ |
|||
border-radius: 20rpx 0 0 20rpx; |
|||
} |
|||
|
|||
.country-code { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.country-flag-img { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.arrow-down { |
|||
font-size: 20rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.phone-input { |
|||
flex: 1; |
|||
width: auto; |
|||
height: 100%; |
|||
border: none; |
|||
background-color: transparent; |
|||
padding: 0 0rpx; |
|||
} |
|||
|
|||
.send-code-btn { |
|||
width: 200rpx; |
|||
height: 60rpx; |
|||
display: inline-flex; |
|||
padding: 0rpx 10rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 10px; |
|||
border-radius: 4px; |
|||
background: #000; |
|||
} |
|||
.send-code-btn-email { |
|||
width: 200rpx; |
|||
height: 60rpx; |
|||
display: inline-flex; |
|||
padding: 0rpx 10rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 10px; |
|||
border-radius: 4px; |
|||
background: #000; |
|||
margin-right: 15rpx; |
|||
} |
|||
|
|||
.send-code-btn-disabled { |
|||
background: #e6e6e6; |
|||
/* 禁用状态下的灰色背景 */ |
|||
} |
|||
|
|||
.send-code-btn-disabled-text { |
|||
color: #999999 !important; |
|||
} |
|||
|
|||
.send-code-text { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.agreement-container-one { |
|||
display: flex; |
|||
align-items: center; |
|||
align-self: flex-start; |
|||
margin-bottom: 80rpx; |
|||
} |
|||
|
|||
.agreement-container { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 40rpx; |
|||
margin-top: -75.5rpx; |
|||
align-self: flex-start; |
|||
} |
|||
|
|||
.checkbox { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 20rpx; |
|||
/* flex: content; */ |
|||
} |
|||
|
|||
.agreement-text-one { |
|||
font-size: 22rpx; |
|||
color: #666666; |
|||
text-align: center; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.agreement-text { |
|||
margin-left: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.link { |
|||
color: #333333; |
|||
font-weight: bold; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.register-btn { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background-color: #000000; |
|||
color: white; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
border-radius: 40rpx; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.or-text { |
|||
flex-direction: column; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
margin-top: 294rpx; |
|||
margin-bottom: -22rpx; |
|||
} |
|||
|
|||
.to-icon { |
|||
width: 10rpx; |
|||
height: 16rpx; |
|||
} |
|||
|
|||
.or-text-one { |
|||
flex-direction: column; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.third-party-login { |
|||
width: 100%; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
|
|||
.third-party-text { |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
white-space: pre; |
|||
} |
|||
|
|||
.third-party-btn { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background-color: rgb(0, 0, 0); |
|||
border: 2rpx solid #e5e5e5; |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.google-icon, |
|||
.apple-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.existing-account { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.account-text { |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.login-link { |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
margin-left: 10rpx; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.static-footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
} |
|||
|
|||
/* 弹窗样式 */ |
|||
.popup-content { |
|||
background-color: #ffffff; |
|||
padding: 40rpx; |
|||
text-align: center; |
|||
border-radius: 10rpx; |
|||
width: 550rpx; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 80rpx; |
|||
text-align: center; /* 水平居中 */ |
|||
display: flex; /* 使用flex布局 */ |
|||
justify-content: center; /* 水平居中 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
} |
|||
|
|||
.popup-message { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
margin-bottom: 80rpx; |
|||
text-align: center; /* 水平居中 */ |
|||
display: flex; /* 使用flex布局 */ |
|||
justify-content: center; /* 水平居中 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
} |
|||
|
|||
.agree-button { |
|||
width: 300rpx; |
|||
height: 80rpx; |
|||
background-color: #000000; |
|||
border-radius: 40rpx; |
|||
display: flex; /* 添加flex布局 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
justify-content: center; /* 水平居中 */ |
|||
} |
|||
.agree-text { |
|||
color: #ffffff; |
|||
font-size: 34rpx; |
|||
/* 添加垂直居中相关样式 */ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height: 1; /* 确保文字垂直居中 */ |
|||
} |
|||
|
|||
.switch-container-occupy { |
|||
margin-top: 100rpx; |
|||
} |
|||
</style> |
|||
|
After Width: 11 | Height: 18 | Size: 442 B |
|
After Width: 18 | Height: 32 | Size: 576 B |
|
After Width: 40 | Height: 24 | Size: 1.5 KiB |
|
After Width: 326 | Height: 200 | Size: 20 KiB |
|
After Width: 40 | Height: 18 | Size: 1.0 KiB |
|
After Width: 420 | Height: 786 | Size: 156 KiB |
|
After Width: 326 | Height: 200 | Size: 20 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue