|
|
@@ -1,63 +1,104 @@
|
|
|
<template>
|
|
|
<div class="register">
|
|
|
- <div class="content">
|
|
|
- <div class="back" @click="goBack">
|
|
|
- X
|
|
|
+ <div class="register-container">
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <div class="back-btn" @click="goBack">
|
|
|
+ <i class="back-icon">←</i>
|
|
|
</div>
|
|
|
- <!-- 头部logo -->
|
|
|
- <div class="header">
|
|
|
- <img src="@/assets/hongqi.png" alt="logo" />
|
|
|
- <div class="title">让理想飞扬</div>
|
|
|
- </div>
|
|
|
- <!-- 主体 -->
|
|
|
- <div class="main">
|
|
|
- <wInput
|
|
|
- type="text"
|
|
|
- maxlength="11"
|
|
|
- placeholder="请输入手机号"
|
|
|
- v-model="phoneData"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="text"
|
|
|
- maxlength="4"
|
|
|
- placeholder="姓名"
|
|
|
- v-model="name"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="password"
|
|
|
- maxlength="11"
|
|
|
- placeholder="请输入密码"
|
|
|
- v-model="passData"
|
|
|
- :isShowPass="true"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="number"
|
|
|
- maxlength="6"
|
|
|
- placeholder="邀请码"
|
|
|
- ref="codeRef"
|
|
|
- v-model="inviteCode"
|
|
|
- ></wInput>
|
|
|
- <div class="captcha-box">
|
|
|
- <input v-model="captchaInput" maxlength="4" placeholder="验证码" style="width:216px;margin-right:8px;" />
|
|
|
- <canvas ref="captchaCanvas" width="80" height="32" @click="generateCaptcha" style="cursor:pointer;vertical-align:middle;"></canvas>
|
|
|
+
|
|
|
+ <!-- Logo区域 -->
|
|
|
+ <div class="logo-section">
|
|
|
+ <div class="logo-box">
|
|
|
+ <img src="@/assets/hongqi.png" alt="logo" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 注册卡片 -->
|
|
|
+ <div class="register-card">
|
|
|
+ <!-- 输入框区域 -->
|
|
|
+ <div class="input-section">
|
|
|
+ <div class="input-group">
|
|
|
+ <i class="icon-phone"></i>
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ v-model="phoneData"
|
|
|
+ class="custom-input"
|
|
|
+ ></wInput>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="input-group">
|
|
|
+ <i class="icon-user"></i>
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="4"
|
|
|
+ placeholder="姓名"
|
|
|
+ v-model="name"
|
|
|
+ class="custom-input"
|
|
|
+ ></wInput>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="input-group">
|
|
|
+ <i class="icon-lock"></i>
|
|
|
+ <wInput
|
|
|
+ type="password"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ v-model="passData"
|
|
|
+ :isShowPass="true"
|
|
|
+ class="custom-input"
|
|
|
+ ></wInput>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="input-group">
|
|
|
+ <i class="icon-invite"></i>
|
|
|
+ <wInput
|
|
|
+ type="number"
|
|
|
+ maxlength="6"
|
|
|
+ placeholder="邀请码"
|
|
|
+ ref="codeRef"
|
|
|
+ v-model="inviteCode"
|
|
|
+ class="custom-input"
|
|
|
+ ></wInput>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 验证码区域 -->
|
|
|
+ <div class="captcha-group">
|
|
|
+ <div class="captcha-input">
|
|
|
+ <i class="icon-captcha"></i>
|
|
|
+ <input
|
|
|
+ v-model="captchaInput"
|
|
|
+ maxlength="4"
|
|
|
+ placeholder="验证码"
|
|
|
+ class="captcha-field"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <canvas
|
|
|
+ ref="captchaCanvas"
|
|
|
+ width="90"
|
|
|
+ height="50"
|
|
|
+ @click="generateCaptcha"
|
|
|
+ class="captcha-canvas"
|
|
|
+ ></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <wButton
|
|
|
- text="注 册"
|
|
|
- :rotate="isRotate"
|
|
|
- @click.native="startReg()"
|
|
|
- class="wbutton"
|
|
|
- ></wButton>
|
|
|
+ <!-- 注册按钮 -->
|
|
|
+ <wButton
|
|
|
+ text="注册"
|
|
|
+ :rotate="isRotate"
|
|
|
+ @click.native="startReg()"
|
|
|
+ class="register-btn"
|
|
|
+ ></wButton>
|
|
|
|
|
|
- <!-- 底部信息 -->
|
|
|
- <div class="footer">
|
|
|
- <span
|
|
|
- @tap="isShowAgree"
|
|
|
- class="cuIcon"
|
|
|
- :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
|
|
|
- >同意</span>
|
|
|
- <span>《协议》</span>
|
|
|
+ <!-- 协议区域 -->
|
|
|
+ <div class="agreement-section">
|
|
|
+ <div class="agreement-checkbox" @click="isShowAgree">
|
|
|
+ <i class="checkbox-icon" :class="showAgree ? 'checked' : 'unchecked'"></i>
|
|
|
+ <span>同意《用户协议》</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -121,16 +162,40 @@ export default {
|
|
|
const canvas = this.$refs.captchaCanvas;
|
|
|
if (!canvas) return;
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
- ctx.clearRect(0, 0, 80, 32);
|
|
|
- ctx.font = '24px Arial';
|
|
|
- ctx.fillStyle = '#333';
|
|
|
- ctx.fillText(this.captcha, 10, 26);
|
|
|
- // 添加雪花点干扰
|
|
|
- for (let i = 0; i < 20; i++) {
|
|
|
+
|
|
|
+ // 清除画布
|
|
|
+ ctx.clearRect(0, 0, 90, 50);
|
|
|
+
|
|
|
+ // 设置背景渐变
|
|
|
+ const gradient = ctx.createLinearGradient(0, 0, 90, 50);
|
|
|
+ gradient.addColorStop(0, '#f8f9fa');
|
|
|
+ gradient.addColorStop(1, '#e9ecef');
|
|
|
+ ctx.fillStyle = gradient;
|
|
|
+ ctx.fillRect(0, 0, 90, 50);
|
|
|
+
|
|
|
+ // 绘制验证码文字
|
|
|
+ ctx.font = 'bold 20px Arial';
|
|
|
+ ctx.fillStyle = '#667eea';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.fillText(this.captcha, 45, 25);
|
|
|
+
|
|
|
+ // 添加干扰线
|
|
|
+ for (let i = 0; i < 3; i++) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(Math.random() * 90, Math.random() * 50);
|
|
|
+ ctx.lineTo(Math.random() * 90, Math.random() * 50);
|
|
|
+ ctx.strokeStyle = this.randomColor();
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加干扰点
|
|
|
+ for (let i = 0; i < 30; i++) {
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(
|
|
|
- Math.random() * 80,
|
|
|
- Math.random() * 32,
|
|
|
+ Math.random() * 90,
|
|
|
+ Math.random() * 50,
|
|
|
Math.random() * 2 + 1,
|
|
|
0,
|
|
|
2 * Math.PI
|
|
|
@@ -140,10 +205,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
randomColor() {
|
|
|
- const r = Math.floor(Math.random() * 256);
|
|
|
- const g = Math.floor(Math.random() * 256);
|
|
|
- const b = Math.floor(Math.random() * 256);
|
|
|
- return `rgb(${r},${g},${b})`;
|
|
|
+ const colors = ['#667eea', '#764ba2', '#ff6b6b', '#51cf66', '#ffd43b'];
|
|
|
+ return colors[Math.floor(Math.random() * colors.length)];
|
|
|
},
|
|
|
checkCaptcha() {
|
|
|
return this.captchaInput.trim().toLowerCase() === this.captcha.toLowerCase();
|
|
|
@@ -153,7 +216,7 @@ export default {
|
|
|
return false;
|
|
|
}
|
|
|
if (!this.showAgree) {
|
|
|
- Toast("请先同意《协议》");
|
|
|
+ Toast("请先同意《用户协议》");
|
|
|
return false;
|
|
|
}
|
|
|
if (!this.phoneData) {
|
|
|
@@ -195,7 +258,7 @@ export default {
|
|
|
this.goBack();
|
|
|
}else{
|
|
|
Toast(res.msg);
|
|
|
- this.isRotate = false;
|
|
|
+ this.isRotate = false;
|
|
|
}
|
|
|
} catch (error) {
|
|
|
this.isRotate = false;
|
|
|
@@ -213,114 +276,403 @@ export default {
|
|
|
.register {
|
|
|
height: 100vh;
|
|
|
width: 100%;
|
|
|
- background: url('~@/assets/dabag.png') no-repeat center center;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
position: relative;
|
|
|
+
|
|
|
+ // 添加背景装饰元素
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 15%;
|
|
|
+ left: 5%;
|
|
|
+ width: 180px;
|
|
|
+ height: 180px;
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(40px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15%;
|
|
|
+ right: 5%;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ background: rgba(255, 255, 255, 0.06);
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(30px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.content {
|
|
|
+.register-container {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 420px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
|
|
|
-.back {
|
|
|
+.back-btn {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 20px;
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
+ top: -50px;
|
|
|
+ left: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
cursor: pointer;
|
|
|
- z-index: 1;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-icon {
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.header {
|
|
|
- width: 144px;
|
|
|
- height: 104px;
|
|
|
- margin-top: 100px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 50px 50px 50px 50px;
|
|
|
- img {
|
|
|
- width: 80px;
|
|
|
+.logo-section {
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ .logo-box {
|
|
|
width: 80px;
|
|
|
- object-fit: cover;
|
|
|
+ height: 80px;
|
|
|
+ background: linear-gradient(145deg, #ff6b6b, #e74c3c);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow:
|
|
|
+ 0 6px 20px rgba(231, 76, 60, 0.3),
|
|
|
+ 0 3px 8px rgba(0, 0, 0, 0.15),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
|
+ position: relative;
|
|
|
+ transform: translateY(0);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ left: -1px;
|
|
|
+ right: -1px;
|
|
|
+ bottom: -1px;
|
|
|
+ background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), transparent);
|
|
|
+ border-radius: 17px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow:
|
|
|
+ 0 10px 25px rgba(231, 76, 60, 0.4),
|
|
|
+ 0 6px 15px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
|
|
|
+ img {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ object-fit: contain;
|
|
|
+ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: 10px;
|
|
|
- color: #000;
|
|
|
- margin-top: 16px;
|
|
|
- font-weight: 500;
|
|
|
- letter-spacing: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.main {
|
|
|
- width: 100%;
|
|
|
- max-width: 320px;
|
|
|
- margin: 60px 0 0 0;
|
|
|
+.register-card {
|
|
|
+ width: 80%;
|
|
|
+ background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 35px 25px;
|
|
|
+ box-shadow:
|
|
|
+ 0 20px 60px rgba(0, 0, 0, 0.15),
|
|
|
+ 0 8px 25px rgba(0, 0, 0, 0.1),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.8),
|
|
|
+ inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ // 添加顶部高光效果
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 60%;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加底部阴影线
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 80%;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.wbutton {
|
|
|
+.input-section {
|
|
|
width: 100%;
|
|
|
- max-width: 320px;
|
|
|
+ margin-bottom: 25px;
|
|
|
}
|
|
|
|
|
|
-.footer {
|
|
|
- margin-top: 32px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
+.input-group {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
|
- .cuIcon {
|
|
|
- margin-right: 4px;
|
|
|
+ .icon-phone, .icon-user, .icon-lock, .icon-invite {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: #667eea;
|
|
|
font-size: 16px;
|
|
|
+ z-index: 2;
|
|
|
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
|
|
}
|
|
|
|
|
|
- span {
|
|
|
- opacity: 0.9;
|
|
|
+ .icon-phone::before { content: "📱"; }
|
|
|
+ .icon-user::before { content: "👤"; }
|
|
|
+ .icon-lock::before { content: "🔒"; }
|
|
|
+ .icon-invite::before { content: "🎫"; }
|
|
|
+}
|
|
|
+
|
|
|
+.custom-input {
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ :deep(input) {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ border: 1px solid #e0e6ed;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 0 15px 0 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 2px 4px rgba(0, 0, 0, 0.06),
|
|
|
+ 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #9ca3af;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #667eea;
|
|
|
+ background: #ffffff;
|
|
|
+ outline: none;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 3px rgba(102, 126, 234, 0.1),
|
|
|
+ inset 0 2px 4px rgba(0, 0, 0, 0.06),
|
|
|
+ 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.captcha-box {
|
|
|
+// 验证码组合
|
|
|
+.captcha-group {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .captcha-input {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .icon-captcha {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: #667eea;
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "🔢";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .captcha-field {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ border: 1px solid #e0e6ed;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 0 15px 0 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 2px 4px rgba(0, 0, 0, 0.06),
|
|
|
+ 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #9ca3af;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #667eea;
|
|
|
+ background: #ffffff;
|
|
|
+ outline: none;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 3px rgba(102, 126, 234, 0.1),
|
|
|
+ inset 0 2px 4px rgba(0, 0, 0, 0.06),
|
|
|
+ 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .captcha-canvas {
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow:
|
|
|
+ 0 2px 8px rgba(0, 0, 0, 0.1),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow:
|
|
|
+ 0 4px 12px rgba(0, 0, 0, 0.15),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.captcha-box input {
|
|
|
- height: 44px;
|
|
|
- border-radius: 22px;
|
|
|
- border: none;
|
|
|
- background: #fff;
|
|
|
- padding-left: 16px;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 8px;
|
|
|
- width: 180px;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+.register-btn {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ :deep(button) {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ background: linear-gradient(145deg, #667eea, #764ba2);
|
|
|
+ border: none;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow:
|
|
|
+ 0 6px 18px rgba(102, 126, 234, 0.3),
|
|
|
+ 0 3px 8px rgba(0, 0, 0, 0.1),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // 添加按钮高光效果
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
|
+ transition: left 0.5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow:
|
|
|
+ 0 10px 25px rgba(102, 126, 234, 0.4),
|
|
|
+ 0 6px 15px rgba(0, 0, 0, 0.15);
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow:
|
|
|
+ 0 4px 12px rgba(102, 126, 234, 0.35),
|
|
|
+ 0 3px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.captcha-box canvas {
|
|
|
- height: 44px;
|
|
|
- width: 90px;
|
|
|
- // border-radius: 22px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
- display: inline-block;
|
|
|
+.agreement-section {
|
|
|
+ .agreement-checkbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(102, 126, 234, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox-icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ background: linear-gradient(145deg, #667eea, #764ba2);
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "✓";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.unchecked {
|
|
|
+ border: 2px solid #e0e6ed;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #667eea;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
