UI细节
This commit is contained in:
parent
4b41196531
commit
a73093997c
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<view class="popup-mask" v-if="visible" @click="handleClose">
|
||||
<view class="popup-content" @click.stop>
|
||||
<text class="popup-title">{{ t('home.guide') }}</text>
|
||||
<!-- 标题栏 -->
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ t('home.guide') }}</text>
|
||||
<view class="close-btn" @click="handleClose">
|
||||
<image class="close-icon" src="/static/ic_close.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<rich-text :nodes="content" />
|
||||
</scroll-view>
|
||||
<view class="close-btn" @click="handleClose">
|
||||
<text class="close-btn-text">{{ t('common.confirm') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -42,7 +46,7 @@ function handleClose() {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -59,32 +63,38 @@ function handleClose() {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
max-height: 50vh;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
height: 80rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
max-height: 55vh;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<text class="popup-title">{{ t('redeem.title') }}</text>
|
||||
<view class="popup-body" v-if="coupon">
|
||||
<text class="coupon-name">{{ coupon.name }}</text>
|
||||
<text class="points-needed">{{ t('redeem.pointsNeeded', { points: coupon.requiredPoints }) }}</text>
|
||||
<text class="points-needed">{{ t('redeem.pointsLabel') }}{{ coupon.pointsCost ?? coupon.requiredPoints ?? 0 }}</text>
|
||||
</view>
|
||||
<view class="popup-actions">
|
||||
<view class="btn cancel-btn" @click="handleCancel">
|
||||
|
|
@ -112,7 +112,7 @@ function handleCancel() {
|
|||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #007aff;
|
||||
background: linear-gradient(135deg, #d4a855, #c9a96e);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ export default {
|
|||
agreementPrefix: 'I have read and agree to the',
|
||||
userAgreement: 'User Agreement',
|
||||
and: 'and',
|
||||
privacyPolicy: 'Privacy Policy'
|
||||
privacyPolicy: 'Privacy Policy',
|
||||
autoRegisterTip: 'Unregistered phone numbers will be automatically registered upon login'
|
||||
},
|
||||
// Home page
|
||||
home: {
|
||||
|
|
@ -109,6 +110,7 @@ export default {
|
|||
redeem: {
|
||||
title: 'Confirm Redeem',
|
||||
pointsNeeded: 'Points needed: {points}',
|
||||
pointsLabel: 'Points needed: ',
|
||||
confirmBtn: 'Confirm'
|
||||
},
|
||||
// Content pages
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ export default {
|
|||
agreementPrefix: '我已阅读并同意',
|
||||
userAgreement: '用户协议',
|
||||
and: '和',
|
||||
privacyPolicy: '隐私政策'
|
||||
privacyPolicy: '隐私政策',
|
||||
autoRegisterTip: '未注册的手机登录后将自动创建账号'
|
||||
},
|
||||
// 首页
|
||||
home: {
|
||||
|
|
@ -109,6 +110,7 @@ export default {
|
|||
redeem: {
|
||||
title: '确认兑换',
|
||||
pointsNeeded: '所需积分：{points}',
|
||||
pointsLabel: '所需积分：',
|
||||
confirmBtn: '确定兑换'
|
||||
},
|
||||
// 内容页
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ export default {
|
|||
agreementPrefix: '我已閱讀並同意',
|
||||
userAgreement: '用戶協議',
|
||||
and: '和',
|
||||
privacyPolicy: '隱私政策'
|
||||
privacyPolicy: '隱私政策',
|
||||
autoRegisterTip: '未註冊的手機登入後將自動創建帳號'
|
||||
},
|
||||
// 首頁
|
||||
home: {
|
||||
|
|
@ -109,6 +110,7 @@ export default {
|
|||
redeem: {
|
||||
title: '確認兌換',
|
||||
pointsNeeded: '所需積分：{points}',
|
||||
pointsLabel: '所需積分：',
|
||||
confirmBtn: '確定兌換'
|
||||
},
|
||||
// 內容頁
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "登录注册"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<view class="coupon-header">
|
||||
<text class="coupon-title">{{ t('home.redeemableCoupons') || '可兑换优惠券' }}</text>
|
||||
<view class="coupon-guide-link" @click="handleGuideEntry">
|
||||
<text class="guide-icon">ⓘ</text>
|
||||
<image class="guide-icon-img" src="/static/ic_explain.png" mode="aspectFit" />
|
||||
<text class="guide-text">{{ t('home.guide') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
<view class="coupon-detail-row">
|
||||
<text class="coupon-dot">●</text>
|
||||
<text class="coupon-detail-label">兑换条件：</text>
|
||||
<text class="coupon-detail-value highlight">{{ coupon.requiredPoints }}积分</text>
|
||||
<text class="coupon-detail-value highlight">{{ coupon.pointsCost ?? 0 }}积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-action">
|
||||
|
|
@ -122,6 +122,10 @@ async function onEntryClick(entry) {
|
|||
uni.navigateTo({ url: '/pages/membership/membership' })
|
||||
break
|
||||
case 'stamps':
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: '/pages/stamps/stamps' })
|
||||
break
|
||||
case 'qrcode':
|
||||
|
|
@ -325,9 +329,9 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.guide-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
.guide-icon-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.guide-text {
|
||||
|
|
|
|||
|
|
@ -1,301 +1,385 @@
|
|||
<template>
|
||||
<view class="login-page">
|
||||
<!-- Logo区域 -->
|
||||
<view class="logo-section">
|
||||
<image class="logo" src="/static/logo.png" mode="aspectFit" />
|
||||
<!-- 全屏背景图 -->
|
||||
<image class="bg-image" src="/static/login_bg.png" mode="aspectFill" />
|
||||
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<image class="back-icon" src="/static/ic_back.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="nav-title">登录注册</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<!-- 底部表单区域 -->
|
||||
<view class="form-section">
|
||||
<!-- 手机区号 + 手机号 -->
|
||||
<view class="input-row">
|
||||
<picker
|
||||
:range="areaCodeList"
|
||||
:range-key="'label'"
|
||||
:value="areaCodeIndex"
|
||||
@change="onAreaCodeChange"
|
||||
>
|
||||
<picker :range="areaCodeList" :range-key="'label'" :value="areaCodeIndex" @change="onAreaCodeChange">
|
||||
<view class="area-code-picker">
|
||||
<text class="area-code-text">{{ areaCodeList[areaCodeIndex].value }}</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
<text class="arrow-down">˅</text>
|
||||
</view>
|
||||
</picker>
|
||||
<input
|
||||
class="input phone-input"
|
||||
type="number"
|
||||
v-model="phone"
|
||||
:placeholder="t('login.phonePlaceholder')"
|
||||
maxlength="15"
|
||||
/>
|
||||
<view class="input-divider"></view>
|
||||
<input class="input phone-input" type="number" v-model="phone"
|
||||
:placeholder="t('login.phonePlaceholder')" maxlength="15" />
|
||||
</view>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<view class="input-row">
|
||||
<input
|
||||
class="input code-input"
|
||||
type="number"
|
||||
v-model="code"
|
||||
:placeholder="t('login.codePlaceholder')"
|
||||
maxlength="6"
|
||||
/>
|
||||
<view
|
||||
class="send-code-btn"
|
||||
:class="{ disabled: countdown > 0 }"
|
||||
@click="handleSendCode"
|
||||
>
|
||||
<input class="input code-input" type="number" v-model="code" :placeholder="t('login.codePlaceholder')"
|
||||
maxlength="6" />
|
||||
<view class="send-code-btn" :class="{ disabled: countdown > 0 }" @click="handleSendCode">
|
||||
<text class="send-code-text">
|
||||
{{ countdown > 0 ? t('login.resendCode', { seconds: countdown }) : t('login.sendCode') }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<view class="agreement-row" @click="agreed = !agreed">
|
||||
<view class="checkbox" :class="{ checked: agreed }">
|
||||
<text v-if="agreed" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="agreement-text">{{ t('login.agreementPrefix') }}</text>
|
||||
<text class="agreement-link" @click.stop="goAgreement">{{ t('login.userAgreement') }}</text>
|
||||
<text class="agreement-text">{{ t('login.and') }}</text>
|
||||
<text class="agreement-link" @click.stop="goPrivacy">{{ t('login.privacyPolicy') }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view class="login-btn" @click="handleLogin">
|
||||
<text class="login-btn-text">{{ t('login.loginBtn') }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<view class="agreement-row">
|
||||
<view class="check-wrap" @click="agreed = !agreed">
|
||||
<image class="check-icon" :src="agreed ? '/static/ic_checked.png' : '/static/ic_check.png'"
|
||||
mode="aspectFit" />
|
||||
</view>
|
||||
<text class="agreement-text">{{ t('login.agreementPrefix') }}<text class="agreement-link"
|
||||
@click.stop="goAgreement">《{{ t('login.userAgreement') }}》</text>{{ t('login.and') }}<text
|
||||
class="agreement-link"
|
||||
@click.stop="goPrivacy">《{{ t('login.privacyPolicy') }}》</text>，{{ t('login.autoRegisterTip') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '../../stores/user.js'
|
||||
import { sendCode } from '../../api/user.js'
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
useI18n
|
||||
} from 'vue-i18n'
|
||||
import {
|
||||
useUserStore
|
||||
} from '../../stores/user.js'
|
||||
import {
|
||||
sendCode
|
||||
} from '../../api/user.js'
|
||||
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const {
|
||||
t
|
||||
} = useI18n()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 常用国际区号列表
|
||||
const areaCodeList = [
|
||||
{ label: '中国大陆 +86', value: '+86' },
|
||||
{ label: '中国香港 +852', value: '+852' },
|
||||
{ label: '中国台湾 +886', value: '+886' },
|
||||
{ label: '日本 +81', value: '+81' },
|
||||
{ label: '韩国 +82', value: '+82' },
|
||||
{ label: '美国 +1', value: '+1' },
|
||||
{ label: '英国 +44', value: '+44' },
|
||||
{ label: '新加坡 +65', value: '+65' },
|
||||
{ label: '马来西亚 +60', value: '+60' },
|
||||
{ label: '澳大利亚 +61', value: '+61' }
|
||||
]
|
||||
// 常用国际区号列表
|
||||
const areaCodeList = [{
|
||||
label: '中国大陆 +86',
|
||||
value: '+86'
|
||||
},
|
||||
{
|
||||
label: '中国香港 +852',
|
||||
value: '+852'
|
||||
},
|
||||
{
|
||||
label: '中国台湾 +886',
|
||||
value: '+886'
|
||||
},
|
||||
{
|
||||
label: '日本 +81',
|
||||
value: '+81'
|
||||
},
|
||||
{
|
||||
label: '韩国 +82',
|
||||
value: '+82'
|
||||
},
|
||||
{
|
||||
label: '美国 +1',
|
||||
value: '+1'
|
||||
},
|
||||
{
|
||||
label: '英国 +44',
|
||||
value: '+44'
|
||||
},
|
||||
{
|
||||
label: '新加坡 +65',
|
||||
value: '+65'
|
||||
},
|
||||
{
|
||||
label: '马来西亚 +60',
|
||||
value: '+60'
|
||||
},
|
||||
{
|
||||
label: '澳大利亚 +61',
|
||||
value: '+61'
|
||||
}
|
||||
]
|
||||
|
||||
const areaCodeIndex = ref(0)
|
||||
const phone = ref('')
|
||||
const code = ref('')
|
||||
const agreed = ref(false)
|
||||
const countdown = ref(0)
|
||||
let timer = null
|
||||
const areaCodeIndex = ref(0)
|
||||
const phone = ref('')
|
||||
const code = ref('')
|
||||
const agreed = ref(false)
|
||||
const countdown = ref(0)
|
||||
let timer = null
|
||||
|
||||
// 切换区号
|
||||
function onAreaCodeChange(e) {
|
||||
areaCodeIndex.value = e.detail.value
|
||||
}
|
||||
// 获取状态栏高度
|
||||
const statusBarHeight = ref(0)
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sysInfo.statusBarHeight || 0
|
||||
|
||||
// 发送验证码
|
||||
async function handleSendCode() {
|
||||
if (countdown.value > 0) return
|
||||
if (!phone.value) {
|
||||
uni.showToast({ title: t('login.phonePlaceholder'), icon: 'none' })
|
||||
return
|
||||
// 返回上一页，如果没有上一页则跳回首页
|
||||
function goBack() {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await sendCode(phone.value, areaCodeList[areaCodeIndex.value].value)
|
||||
// 开始60秒倒计时
|
||||
countdown.value = 60
|
||||
timer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
// 错误已由请求模块统一处理
|
||||
}
|
||||
}
|
||||
|
||||
// 登录
|
||||
async function handleLogin() {
|
||||
if (!phone.value) {
|
||||
uni.showToast({ title: t('login.phonePlaceholder'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
uni.showToast({ title: t('login.codePlaceholder'), icon: 'none' })
|
||||
return
|
||||
// 切换区号
|
||||
function onAreaCodeChange(e) {
|
||||
areaCodeIndex.value = e.detail.value
|
||||
}
|
||||
|
||||
try {
|
||||
await userStore.login(
|
||||
phone.value,
|
||||
code.value,
|
||||
areaCodeList[areaCodeIndex.value].value,
|
||||
agreed.value
|
||||
)
|
||||
// 登录成功，返回上一页
|
||||
uni.navigateBack()
|
||||
} catch (e) {
|
||||
// 未勾选协议的提示已在store中处理，其他错误由请求模块统一处理
|
||||
// 发送验证码
|
||||
async function handleSendCode() {
|
||||
if (countdown.value > 0) return
|
||||
if (!phone.value) {
|
||||
uni.showToast({
|
||||
title: t('login.phonePlaceholder'),
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
await sendCode(phone.value, areaCodeList[areaCodeIndex.value].value)
|
||||
countdown.value = 60
|
||||
timer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转用户协议
|
||||
function goAgreement() {
|
||||
uni.navigateTo({ url: '/pages/agreement/agreement' })
|
||||
}
|
||||
// 登录
|
||||
async function handleLogin() {
|
||||
if (!phone.value) {
|
||||
uni.showToast({
|
||||
title: t('login.phonePlaceholder'),
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
uni.showToast({
|
||||
title: t('login.codePlaceholder'),
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
await userStore.login(
|
||||
phone.value,
|
||||
code.value,
|
||||
areaCodeList[areaCodeIndex.value].value,
|
||||
agreed.value
|
||||
)
|
||||
uni.navigateBack()
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// 跳转隐私政策
|
||||
function goPrivacy() {
|
||||
uni.navigateTo({ url: '/pages/privacy/privacy' })
|
||||
}
|
||||
// 跳转用户协议
|
||||
function goAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/agreement/agreement'
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转隐私政策
|
||||
function goPrivacy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/privacy/privacy'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
.login-page {
|
||||
height: 100vh;
|
||||
background-color: #f5f0e8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
/* 全屏背景图 */
|
||||
.bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #3B3F4A;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
/* 自定义导航栏 */
|
||||
.custom-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-back {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
height: 100rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.back-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.area-code-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20rpx;
|
||||
border-right: 1rpx solid #e5e5e5;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.area-code-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
/* 底部表单区域 */
|
||||
.form-section {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 40rpx 30rpx;
|
||||
padding-bottom: 60rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
/* 输入行 */
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
height: 96rpx;
|
||||
padding: 0 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
flex: 1;
|
||||
}
|
||||
.area-code-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
.area-code-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #007aff;
|
||||
}
|
||||
.arrow-down {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.send-code-btn.disabled {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.input-divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background-color: #e0e0e0;
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
|
||||
.send-code-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
/* 发送验证码按钮 */
|
||||
.send-code-btn {
|
||||
flex-shrink: 0;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #cccccc;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.send-code-btn.disabled .send-code-text {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background-color: #007aff;
|
||||
border-color: #007aff;
|
||||
}
|
||||
.send-code-text {
|
||||
font-size: 28rpx;
|
||||
color: #838D7E;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #D0B582;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.login-btn-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 24rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
/* 协议区域 */
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 45rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-wrap {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.login-btn-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
.check-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 24rpx;
|
||||
color: #c9a96e;
|
||||
}
|
||||
</style>
|
||||
BIN
mobile/static/ic_back.png
Normal file
BIN
mobile/static/ic_back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
BIN
mobile/static/ic_check.png
Normal file
BIN
mobile/static/ic_check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
BIN
mobile/static/ic_checked.png
Normal file
BIN
mobile/static/ic_checked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
BIN
mobile/static/ic_close.png
Normal file
BIN
mobile/static/ic_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
mobile/static/ic_explain.png
Normal file
BIN
mobile/static/ic_explain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue
Block a user