fix bugs
This commit is contained in:
817
pages/register/register.vue
Normal file
817
pages/register/register.vue
Normal file
@@ -0,0 +1,817 @@
|
||||
<template>
|
||||
<view class="register-page">
|
||||
<!-- 背景装饰 -->
|
||||
<view class="bg-decoration">
|
||||
<view class="circle circle-1"></view>
|
||||
<view class="circle circle-2"></view>
|
||||
<view class="circle circle-3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部Logo区域 -->
|
||||
<view class="register-header">
|
||||
<view class="logo-container">
|
||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">用户注册</text>
|
||||
<text class="subtitle">CREATE YOUR ACCOUNT</text>
|
||||
</view>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<view class="register-form">
|
||||
<view class="form-title">创建账号</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">👤</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.account"
|
||||
placeholder="请输入账号（4-20位字母或数字）"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">📱</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.phone"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="code-input-wrapper">
|
||||
<view class="input-wrapper code-input">
|
||||
<view class="input-icon">🔢</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.code"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="get-code-btn"
|
||||
:class="{ disabled: countdown > 0 }"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="test-tip">💡 测试提示：可使用万能验证码 888888</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">✏️</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.realName"
|
||||
placeholder="请输入真实姓名"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="gender-label">性别</view>
|
||||
<view class="gender-selector">
|
||||
<view
|
||||
class="gender-option"
|
||||
:class="{ active: form.sex === 1 }"
|
||||
@click="form.sex = 1"
|
||||
>
|
||||
<text class="gender-icon">👨</text>
|
||||
<text>男</text>
|
||||
</view>
|
||||
<view
|
||||
class="gender-option"
|
||||
:class="{ active: form.sex === 2 }"
|
||||
@click="form.sex = 2"
|
||||
>
|
||||
<text class="gender-icon">👩</text>
|
||||
<text>女</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">🔒</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.password"
|
||||
:password="!showPassword"
|
||||
placeholder="请输入密码（6-20位）"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view class="eye-icon" @click="showPassword = !showPassword">
|
||||
<text>{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">🔐</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.confirmPassword"
|
||||
:password="!showConfirmPassword"
|
||||
placeholder="请再次输入密码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
|
||||
<text>{{ showConfirmPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="agreement-wrapper">
|
||||
<label class="checkbox-label" @click="agreeTerms = !agreeTerms">
|
||||
<view :class="['checkbox', agreeTerms ? 'checked' : '']">
|
||||
<text v-if="agreeTerms" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="agreement-text">
|
||||
我已阅读并同意
|
||||
<text class="link-text" @click.stop="showAgreement">《用户协议》</text>
|
||||
和
|
||||
<text class="link-text" @click.stop="showPrivacy">《隐私政策》</text>
|
||||
</text>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<button class="register-btn" @click="handleRegister" :loading="loading" :disabled="loading">
|
||||
<text class="btn-text">{{ loading ? '注册中...' : '立即注册' }}</text>
|
||||
</button>
|
||||
|
||||
<view class="login-link">
|
||||
已有账号？<text class="link-text" @click="goToLogin">立即登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部装饰 -->
|
||||
<view class="footer-decoration">
|
||||
<view class="wave"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAPI from '@/api/user.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
account: '',
|
||||
phone: '',
|
||||
code: '',
|
||||
realName: '',
|
||||
sex: 1,
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
},
|
||||
showPassword: false,
|
||||
showConfirmPassword: false,
|
||||
agreeTerms: false,
|
||||
loading: false,
|
||||
countdown: 0,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
async handleGetCode() {
|
||||
if (this.countdown > 0) return
|
||||
|
||||
// 验证手机号
|
||||
if (!this.form.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await userAPI.getCaptcha(this.form.phone)
|
||||
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 开始倒计时
|
||||
this.countdown = 60
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '获取验证码失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
validateForm() {
|
||||
if (!this.form.account) {
|
||||
uni.showToast({
|
||||
title: '请输入账号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^[a-zA-Z0-9]{4,20}$/.test(this.form.account)) {
|
||||
uni.showToast({
|
||||
title: '账号为4-20位字母或数字',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// 测试用万能验证码：888888
|
||||
// 如果不是万能验证码，则需要验证码长度为6位
|
||||
if (this.form.code !== '888888' && this.form.code.length !== 6) {
|
||||
uni.showToast({
|
||||
title: '请输入6位验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.realName) {
|
||||
uni.showToast({
|
||||
title: '请输入真实姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^[\u4e00-\u9fa5]{2,10}$/.test(this.form.realName)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的姓名（2-10个汉字）',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.form.password.length < 6 || this.form.password.length > 20) {
|
||||
uni.showToast({
|
||||
title: '密码长度为6-20位',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '请确认密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.form.password !== this.form.confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '两次密码输入不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.agreeTerms) {
|
||||
uni.showToast({
|
||||
title: '请阅读并同意用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
async handleRegister() {
|
||||
if (!this.validateForm()) return
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
await userAPI.register({
|
||||
account: this.form.account,
|
||||
phone: this.form.phone,
|
||||
code: this.form.code,
|
||||
realName: this.form.realName,
|
||||
sex: this.form.sex,
|
||||
password: this.form.password
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error('注册失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '注册失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到登录页
|
||||
*/
|
||||
goToLogin() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示用户协议
|
||||
*/
|
||||
showAgreement() {
|
||||
uni.showToast({
|
||||
title: '用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
// TODO: 跳转到用户协议页面
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示隐私政策
|
||||
*/
|
||||
showPrivacy() {
|
||||
uni.showToast({
|
||||
title: '隐私政策',
|
||||
icon: 'none'
|
||||
})
|
||||
// TODO: 跳转到隐私政策页面
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 50%, #8B1F22 100%);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰圆圈 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
top: -100rpx;
|
||||
right: -50rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
bottom: 100rpx;
|
||||
left: -50rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: 30%;
|
||||
right: 50rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30rpx) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部Logo区域 */
|
||||
.register-header {
|
||||
text-align: center;
|
||||
padding: 80rpx 60rpx 60rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 注册表单 */
|
||||
.register-form {
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 50rpx 40rpx 80rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
max-height: calc(100vh - 300rpx);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F7F8FA;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
background: #fff;
|
||||
border-color: #C93639;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.eye-icon {
|
||||
width: 70rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.eye-icon:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 验证码输入 */
|
||||
.code-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.get-code-btn {
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4rpx 12rpx rgba(201, 54, 57, 0.2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.get-code-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.get-code-btn.disabled {
|
||||
opacity: 0.6;
|
||||
background: #999;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.test-tip {
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ff9800;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 性别选择 */
|
||||
.gender-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.gender-selector {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.gender-option {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.gender-option.active {
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
color: #fff;
|
||||
border-color: #C93639;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 用户协议 */
|
||||
.agreement-wrapper {
|
||||
margin: 30rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 2rpx;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background: #C93639;
|
||||
border-color: #C93639;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #C93639;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.link-text:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 注册按钮 */
|
||||
.register-btn {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
border-radius: 16rpx;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 24rpx rgba(201, 54, 57, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.register-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.register-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||
}
|
||||
|
||||
.register-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 登录链接 */
|
||||
.login-link {
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer-decoration {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user