|
@@ -22,33 +22,37 @@
|
|
|
</el-tabs>
|
|
</el-tabs>
|
|
|
|
|
|
|
|
<div class="form-wrapper">
|
|
<div class="form-wrapper">
|
|
|
- <el-input v-if="activeRegisterType === 'email'" v-model="formData.account" :placeholder="t('请输入邮箱地址')" clearable size="large" class="custom-input">
|
|
|
|
|
|
|
+ <el-input v-if="activeRegisterType === 'email'" v-model="formData.account" :placeholder="t('请输入邮箱地址')" clearable
|
|
|
|
|
+ size="large" class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
- <img src="@/assets/image/login/account.png" class="input-icon" alt="icon"/>
|
|
|
|
|
|
|
+ <img src="@/assets/image/login/account.png" class="input-icon" alt="icon" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
|
|
|
- <el-input v-else v-model="formData.account" :placeholder="t('请输入账号')" clearable size="large" class="custom-input">
|
|
|
|
|
|
|
+ <el-input v-else v-model="formData.account" :placeholder="t('请输入账号')" clearable size="large"
|
|
|
|
|
+ class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
- <img src="@/assets/image/login/account.png" class="input-icon" alt="icon"/>
|
|
|
|
|
|
|
+ <img src="@/assets/image/login/account.png" class="input-icon" alt="icon" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
|
|
|
- <el-input v-model="formData.password" :placeholder="t('请输入6-20位密码')" type="password" show-password clearable size="large" class="custom-input">
|
|
|
|
|
|
|
+ <el-input v-model="formData.password" :placeholder="t('请输入6-20位密码')" type="password" show-password clearable
|
|
|
|
|
+ size="large" class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
- <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
|
|
|
|
|
|
|
+ <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
|
|
|
- <el-input v-model="formData.confirmPassword" :placeholder="t('请再次确认密码')" type="password" show-password clearable size="large" class="custom-input">
|
|
|
|
|
|
|
+ <el-input v-model="formData.confirmPassword" :placeholder="t('请再次确认密码')" type="password" show-password clearable
|
|
|
|
|
+ size="large" class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
- <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
|
|
|
|
|
|
|
+ <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
|
|
|
<el-input v-model="formData.user_code" :placeholder="t('请输入邀请码')" clearable size="large" class="custom-input">
|
|
<el-input v-model="formData.user_code" :placeholder="t('请输入邀请码')" clearable size="large" class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
- <img src="@/assets/image/login/user.png" class="input-icon" alt="icon"/>
|
|
|
|
|
|
|
+ <img src="@/assets/image/login/user.png" class="input-icon" alt="icon" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</div>
|
|
</div>
|
|
@@ -63,7 +67,7 @@
|
|
|
</el-button>
|
|
</el-button>
|
|
|
|
|
|
|
|
<div class="bottom-action-group">
|
|
<div class="bottom-action-group">
|
|
|
- <div class="action-item" @click="router.push('/login')">
|
|
|
|
|
|
|
+ <div class="action-item" @click="router.replace('/login')">
|
|
|
<img src="@/assets/image/login/user.png" class="action-icon" alt="login" />
|
|
<img src="@/assets/image/login/user.png" class="action-icon" alt="login" />
|
|
|
<span>{{ t('去登录') }}</span>
|
|
<span>{{ t('去登录') }}</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -74,32 +78,31 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <el-dialog
|
|
|
|
|
- v-model="showCaptchaDialog"
|
|
|
|
|
- :title="t('安全验证')"
|
|
|
|
|
- width="360px"
|
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
|
- class="custom-captcha-dialog"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-dialog v-model="showCaptchaDialog" :title="t('安全验证')" width="360px" :close-on-click-modal="false"
|
|
|
|
|
+ class="custom-captcha-dialog">
|
|
|
<div class="captcha-container" v-show="captchaData.bg">
|
|
<div class="captcha-container" v-show="captchaData.bg">
|
|
|
<div class="bg-container">
|
|
<div class="bg-container">
|
|
|
<img :src="captchaData.bg" class="bg-img" alt="captcha-bg">
|
|
<img :src="captchaData.bg" class="bg-img" alt="captcha-bg">
|
|
|
<img :src="captchaData.slider" class="slider-img"
|
|
<img :src="captchaData.slider" class="slider-img"
|
|
|
- :style="{ top: captchaData.y + 'px', left: sliderMoveX + 'px', display: isSliderVerified ? 'none' : 'block' }"
|
|
|
|
|
- alt="captcha-slider">
|
|
|
|
|
|
|
+ :style="{ top: captchaData.y + 'px', left: sliderMoveX + 'px', display: isSliderVerified ? 'none' : 'block' }"
|
|
|
|
|
+ alt="captcha-slider">
|
|
|
<div class="success-overlay" v-show="isSliderVerified">
|
|
<div class="success-overlay" v-show="isSliderVerified">
|
|
|
- <el-icon class="success-icon"><Ticket /></el-icon>
|
|
|
|
|
|
|
+ <el-icon class="success-icon">
|
|
|
|
|
+ <Ticket />
|
|
|
|
|
+ </el-icon>
|
|
|
<span>{{ t('验证通过') }}</span>
|
|
<span>{{ t('验证通过') }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="track">
|
|
<div class="track">
|
|
|
<div class="track-bg" :style="{ width: sliderMoveX + 20 + 'px' }"></div>
|
|
<div class="track-bg" :style="{ width: sliderMoveX + 20 + 'px' }"></div>
|
|
|
- <div class="drag-btn"
|
|
|
|
|
- :class="{ 'is-success': isSliderVerified }"
|
|
|
|
|
- :style="{ left: sliderMoveX + 'px' }"
|
|
|
|
|
- @mousedown="onDragStart">
|
|
|
|
|
- <el-icon v-if="!isSliderVerified"><Key /></el-icon>
|
|
|
|
|
- <el-icon v-else><Ticket /></el-icon>
|
|
|
|
|
|
|
+ <div class="drag-btn" :class="{ 'is-success': isSliderVerified }" :style="{ left: sliderMoveX + 'px' }"
|
|
|
|
|
+ @mousedown="onDragStart">
|
|
|
|
|
+ <el-icon v-if="!isSliderVerified">
|
|
|
|
|
+ <Key />
|
|
|
|
|
+ </el-icon>
|
|
|
|
|
+ <el-icon v-else>
|
|
|
|
|
+ <Ticket />
|
|
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="track-text">{{ isSliderVerified ? t('验证成功') : t('向右滑动完成验证') }}</div>
|
|
<div class="track-text">{{ isSliderVerified ? t('验证成功') : t('向右滑动完成验证') }}</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -117,7 +120,7 @@ import { Message, Lock, Iphone, Key, Ticket } from '@element-plus/icons-vue';
|
|
|
|
|
|
|
|
import { appName } from '@/settings/index.mjs';
|
|
import { appName } from '@/settings/index.mjs';
|
|
|
import selectLang from '@/components/selectLang/index.vue';
|
|
import selectLang from '@/components/selectLang/index.vue';
|
|
|
-import {postUserRegister, postUserCaptcha, userGuestRegister} from "@/request/api";
|
|
|
|
|
|
|
+import { postUserRegister, postUserCaptcha, userGuestRegister } from "@/request/api";
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
@@ -140,12 +143,12 @@ let startX = 0;
|
|
|
const MAX_MOVE = 260;
|
|
const MAX_MOVE = 260;
|
|
|
|
|
|
|
|
function setUserCode() {
|
|
function setUserCode() {
|
|
|
- if(route.query.invitationCode) {
|
|
|
|
|
|
|
+ if (route.query.invitationCode) {
|
|
|
localStorage.setItem('vip_invitationCode', route.query.invitationCode);
|
|
localStorage.setItem('vip_invitationCode', route.query.invitationCode);
|
|
|
formData.user_code = route.query.invitationCode
|
|
formData.user_code = route.query.invitationCode
|
|
|
} else {
|
|
} else {
|
|
|
let vip_invitationCode = localStorage.getItem('vip_invitationCode')
|
|
let vip_invitationCode = localStorage.getItem('vip_invitationCode')
|
|
|
- if(vip_invitationCode) {
|
|
|
|
|
|
|
+ if (vip_invitationCode) {
|
|
|
formData.user_code = vip_invitationCode
|
|
formData.user_code = vip_invitationCode
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -210,9 +213,9 @@ function resetForm() {
|
|
|
|
|
|
|
|
function onAgreementClick() {
|
|
function onAgreementClick() {
|
|
|
ElMessageBox.alert(
|
|
ElMessageBox.alert(
|
|
|
- `<div style="line-height: 1.6; color: #333; text-align: left;"><h3 style="margin-bottom: 16px;">平台服务协议</h3><p>1. 注册本平台需提供真实有效的身份信息...</p></div>`,
|
|
|
|
|
- t('产品服务协议'),
|
|
|
|
|
- { dangerouslyUseHTMLString: true, confirmButtonText: t('确定'), customClass: 'agreement-msgbox' }
|
|
|
|
|
|
|
+ `<div style="line-height: 1.6; color: #333; text-align: left;"><h3 style="margin-bottom: 16px;">平台服务协议</h3><p>1. 注册本平台需提供真实有效的身份信息...</p></div>`,
|
|
|
|
|
+ t('产品服务协议'),
|
|
|
|
|
+ { dangerouslyUseHTMLString: true, confirmButtonText: t('确定'), customClass: 'agreement-msgbox' }
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -247,7 +250,7 @@ function doRegister() {
|
|
|
moveX: sliderMoveX.value,
|
|
moveX: sliderMoveX.value,
|
|
|
captcha: captchaData.captcha
|
|
captcha: captchaData.captcha
|
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
|
- if(res.data.check_captcha === 0) {
|
|
|
|
|
|
|
+ if (res.data.check_captcha === 0) {
|
|
|
ElMessage.error(res.msg)
|
|
ElMessage.error(res.msg)
|
|
|
initCaptcha();
|
|
initCaptcha();
|
|
|
return
|
|
return
|
|
@@ -273,7 +276,7 @@ function doRegister() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function onLineService() {
|
|
function onLineService() {
|
|
|
- if(!localStorage.getItem('youke_token')){
|
|
|
|
|
|
|
+ if (!localStorage.getItem('youke_token')) {
|
|
|
userGuestRegister().then((res) => {
|
|
userGuestRegister().then((res) => {
|
|
|
localStorage.setItem('youke_token', res.data.token);
|
|
localStorage.setItem('youke_token', res.data.token);
|
|
|
router.push({
|
|
router.push({
|
|
@@ -296,22 +299,62 @@ $btn-orange: #f8b932;
|
|
|
$text-light: rgba(255, 255, 255, 0.8);
|
|
$text-light: rgba(255, 255, 255, 0.8);
|
|
|
|
|
|
|
|
.pc-register-container {
|
|
.pc-register-container {
|
|
|
- position: relative; min-height: 100vh; width: 100vw;
|
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ width: 100vw;
|
|
|
background-image: url('@/assets/image/login/bg-login-pc.png');
|
|
background-image: url('@/assets/image/login/bg-login-pc.png');
|
|
|
background-size: cover;
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
background-position: center;
|
|
|
- display: flex; justify-content: center; align-items: center; overflow: hidden;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .top-left-logo {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 30px;
|
|
|
|
|
+ left: 40px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .lang-selector-wrapper {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 24px;
|
|
|
|
|
+ right: 32px;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .bg-glow {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ filter: blur(120px);
|
|
|
|
|
+ opacity: 0.1;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .top-left-logo { position: absolute; top: 30px; left: 40px; height: 32px; z-index: 10; }
|
|
|
|
|
- .lang-selector-wrapper { position: absolute; top: 24px; right: 32px; z-index: 10; }
|
|
|
|
|
|
|
+ .glow-top-left {
|
|
|
|
|
+ top: -10%;
|
|
|
|
|
+ left: 10%;
|
|
|
|
|
+ width: 400px;
|
|
|
|
|
+ height: 400px;
|
|
|
|
|
+ background-color: $mclaren-orange;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.1; z-index: 1; }
|
|
|
|
|
- .glow-top-left { top: -10%; left: 10%; width: 400px; height: 400px; background-color: $mclaren-orange; }
|
|
|
|
|
- .glow-bottom-right { bottom: -10%; right: 10%; width: 300px; height: 300px; background-color: #fff; }
|
|
|
|
|
|
|
+ .glow-bottom-right {
|
|
|
|
|
+ bottom: -10%;
|
|
|
|
|
+ right: 10%;
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ height: 300px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.register-card {
|
|
.register-card {
|
|
|
- min-width: 480px; width: 30%;
|
|
|
|
|
- position: relative; z-index: 2; padding: 30px;
|
|
|
|
|
|
|
+ min-width: 480px;
|
|
|
|
|
+ width: 30%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ padding: 30px;
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 24px;
|
|
border-radius: 24px;
|
|
@@ -327,73 +370,185 @@ $text-light: rgba(255, 255, 255, 0.8);
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
- .mclaren-img-logo { height: 34px; margin-bottom: 2px; }
|
|
|
|
|
|
|
+ .mclaren-img-logo {
|
|
|
|
|
+ height: 34px;
|
|
|
|
|
+ margin-bottom: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.racing-text {
|
|
.racing-text {
|
|
|
- color: #fff; font-size: 12px; letter-spacing: 7px;
|
|
|
|
|
- margin-left: 7px; font-weight: bold; transform: scale(0.8);
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ letter-spacing: 7px;
|
|
|
|
|
+ margin-left: 7px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ transform: scale(0.8);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.main-title {
|
|
.main-title {
|
|
|
- color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 5px; line-height: 1;
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
|
+ letter-spacing: 5px;
|
|
|
|
|
+ line-height: 1;
|
|
|
margin-top: 15px;
|
|
margin-top: 15px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.sub-partner {
|
|
.sub-partner {
|
|
|
- color: rgba(255, 255, 255, 0.85); font-size: 12px;
|
|
|
|
|
- letter-spacing: 1px; margin-top: 4px;
|
|
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ letter-spacing: 1px;
|
|
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.custom-tabs {
|
|
.custom-tabs {
|
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
|
- :deep(.el-tabs__nav-wrap::after) { display: none; }
|
|
|
|
|
- :deep(.el-tabs__active-bar) { display: none; }
|
|
|
|
|
- :deep(.el-tabs__nav) { width: 100%; display: flex; gap: 12px; }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-tabs__nav-wrap::after) {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-tabs__active-bar) {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-tabs__nav) {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
:deep(.el-tabs__item) {
|
|
:deep(.el-tabs__item) {
|
|
|
- flex: 1; height: 46px; line-height: 46px; padding: 0 !important;
|
|
|
|
|
- color: #ccc; font-size: 15px; text-align: center;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.12); border-radius: 8px;
|
|
|
|
|
- &.is-active { background: rgba(255, 255, 255, 0.25); color: #fff; font-weight: bold; }
|
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 46px;
|
|
|
|
|
+ line-height: 46px;
|
|
|
|
|
+ padding: 0 !important;
|
|
|
|
|
+ color: #ccc;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+
|
|
|
|
|
+ &.is-active {
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.25);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .form-wrapper { display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
|
|
|
+ .form-wrapper {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.custom-input {
|
|
.custom-input {
|
|
|
:deep(.el-input__wrapper) {
|
|
:deep(.el-input__wrapper) {
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
- box-shadow: none; height: 48px; border-radius: 10px;
|
|
|
|
|
- &:hover, &.is-focus { box-shadow: 0 0 0 1px $mclaren-orange inset; }
|
|
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ height: 48px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &.is-focus {
|
|
|
|
|
+ box-shadow: 0 0 0 1px $mclaren-orange inset;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-input__inner) {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ color: #bbb;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .input-icon {
|
|
|
|
|
+ width: 20px;
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ opacity: 0.8;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
}
|
|
|
- :deep(.el-input__inner) { color: #fff; &::placeholder { color: #bbb; } }
|
|
|
|
|
- .input-icon { width: 20px; height: 20px; opacity: 0.8; margin-right: 5px; }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.agreement-row {
|
|
.agreement-row {
|
|
|
- display: flex; align-items: center; justify-content: center;
|
|
|
|
|
- font-size: 13px; margin: 20px 0 15px;
|
|
|
|
|
- .agreement-link { cursor: pointer; color: #fff; margin-left: 5px; text-decoration: underline; }
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ margin: 20px 0 15px;
|
|
|
|
|
+
|
|
|
|
|
+ .agreement-link {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-left: 5px;
|
|
|
|
|
+ text-decoration: underline;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.custom-checkbox {
|
|
.custom-checkbox {
|
|
|
- :deep(.el-checkbox__label) { color: #bbb; font-size: 13px; }
|
|
|
|
|
- :deep(.el-checkbox__input.is-checked .el-checkbox__inner) { background-color: $btn-orange; border-color: $btn-orange; }
|
|
|
|
|
- :deep(.el-checkbox__inner) { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.4); }
|
|
|
|
|
|
|
+ :deep(.el-checkbox__label) {
|
|
|
|
|
+ color: #bbb;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
|
|
|
|
+ background-color: $btn-orange;
|
|
|
|
|
+ border-color: $btn-orange;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-checkbox__inner) {
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ border-color: rgba(255, 255, 255, 0.4);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.submit-btn {
|
|
.submit-btn {
|
|
|
- width: 100%; height: 50px; font-size: 18px; font-weight: bold; color: #fff;
|
|
|
|
|
- background-color: $btn-orange; border-color: $btn-orange; border-radius: 10px;
|
|
|
|
|
- letter-spacing: 4px; margin-bottom: 20px;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background-color: $btn-orange;
|
|
|
|
|
+ border-color: $btn-orange;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ letter-spacing: 4px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.bottom-action-group {
|
|
.bottom-action-group {
|
|
|
- display: flex; justify-content: center; gap: 15px; margin-top: 10px;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ gap: 15px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+
|
|
|
.action-item {
|
|
.action-item {
|
|
|
- flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 10px 0; cursor: pointer;
|
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
|
- &:hover { background: rgba(255, 255, 255, 0.25); }
|
|
|
|
|
- .action-icon { width: 22px; height: 22px; margin-bottom: 4px; }
|
|
|
|
|
- span { font-size: 12px; color: #ddd; }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.25);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .action-icon {
|
|
|
|
|
+ width: 22px;
|
|
|
|
|
+ height: 22px;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ span {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #ddd;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -405,9 +560,18 @@ $text-light: rgba(255, 255, 255, 0.8);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 16px;
|
|
border-radius: 16px;
|
|
|
|
|
|
|
|
- .el-dialog__title { color: #fff; font-weight: bold; }
|
|
|
|
|
- .el-dialog__body { padding-top: 10px; }
|
|
|
|
|
- .el-dialog__headerbtn .el-dialog__close { color: #aaa; }
|
|
|
|
|
|
|
+ .el-dialog__title {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .el-dialog__body {
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .el-dialog__headerbtn .el-dialog__close {
|
|
|
|
|
+ color: #aaa;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.captcha-container {
|
|
.captcha-container {
|
|
@@ -423,60 +587,117 @@ $text-light: rgba(255, 255, 255, 0.8);
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
- .bg-img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
|
|
|
+ .bg-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.slider-img {
|
|
.slider-img {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 40px; height: 40px;
|
|
|
|
|
|
|
+ width: 40px;
|
|
|
|
|
+ height: 40px;
|
|
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
|
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.success-overlay {
|
|
.success-overlay {
|
|
|
- position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
|
|
|
- background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
|
|
|
|
|
- display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
|
|
|
- color: #67c23a; font-size: 16px; font-weight: bold;
|
|
|
|
|
- .success-icon { font-size: 30px; margin-bottom: 8px; }
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #67c23a;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+
|
|
|
|
|
+ .success-icon {
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.track {
|
|
.track {
|
|
|
- position: relative; width: 300px; height: 40px; margin: 0 auto;
|
|
|
|
|
- background-color: rgba(255, 255, 255, 0.1); border-radius: 20px;
|
|
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden;
|
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
|
|
.track-bg {
|
|
.track-bg {
|
|
|
- position: absolute; height: 100%;
|
|
|
|
|
- background: rgba($mclaren-orange, 0.3); border-radius: 20px 0 0 20px;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: rgba($mclaren-orange, 0.3);
|
|
|
|
|
+ border-radius: 20px 0 0 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.drag-btn {
|
|
.drag-btn {
|
|
|
- position: absolute; top: 0; left: 0; width: 40px; height: 40px;
|
|
|
|
|
- background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
|
|
|
- cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
|
|
|
- color: #666; font-size: 18px; transition: background 0.3s; z-index: 2;
|
|
|
|
|
-
|
|
|
|
|
- &.is-success { background: #67c23a; color: #fff; cursor: default; }
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 40px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+
|
|
|
|
|
+ &.is-success {
|
|
|
|
|
+ background: #67c23a;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ cursor: default;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.track-text {
|
|
.track-text {
|
|
|
- position: absolute; width: 100%; line-height: 40px; text-align: center;
|
|
|
|
|
- font-size: 13px; color: #bbb; pointer-events: none;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #bbb;
|
|
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/* === 滑块验证及弹窗样式 结束 === */
|
|
/* === 滑块验证及弹窗样式 结束 === */
|
|
|
|
|
|
|
|
:deep(.el-popper) {
|
|
:deep(.el-popper) {
|
|
|
background-color: rgba(40, 40, 40, 0.95) !important;
|
|
background-color: rgba(40, 40, 40, 0.95) !important;
|
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
|
|
|
+
|
|
|
.el-select-dropdown__item {
|
|
.el-select-dropdown__item {
|
|
|
color: #eee;
|
|
color: #eee;
|
|
|
- &.is-hovering, &:hover { background-color: rgba(255, 255, 255, 0.1); }
|
|
|
|
|
- &.is-selected { color: $mclaren-orange; font-weight: bold; }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ &.is-hovering,
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.is-selected {
|
|
|
|
|
+ color: $mclaren-orange;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|