feat: 使用自定义主题色

This commit is contained in:
2026-06-18 11:01:11 +08:00
parent c1e292ea18
commit 3bd6e972ea
12 changed files with 111 additions and 44 deletions

View File

@@ -3,7 +3,7 @@
<div class="login-wrapper__header">
<h2 class="login-wrapper__title">欢迎回来 👋🏻</h2>
<p>
<span style="color: #71717a">登录账号以进入对战</span>
<span style="color: var(--text-tertiary)">登录账号以进入对战</span>
</p>
</div>
<el-form
@@ -34,7 +34,7 @@
<el-form-item>
<div class="login-wrapper__actions">
<el-checkbox v-model="rememberAccount">记住账号</el-checkbox>
<a href="javascript:void(0)" style="color: #2080f0">忘记密码</a>
<a href="javascript:void(0)" style="color: var(--text-link)">忘记密码</a>
</div>
</el-form-item>
<el-form-item>
@@ -55,7 +55,7 @@
<el-form-item>
<div class="login-wrapper__register-link">
<span>没有账号</span>
<router-link to="/auth/register" style="color: #2080f0">创建账号</router-link>
<router-link to="/auth/register" style="color: var(--text-link)">创建账号</router-link>
</div>
</el-form-item>
</el-form>

View File

@@ -3,7 +3,7 @@
<div class="phone-login-wrapper__header">
<h2 class="phone-login-wrapper__title">欢迎回来 📲</h2>
<p>
<span style="color: #71717a">请输入手机号码登录账号以进入对战</span>
<span style="color: var(--text-tertiary)">请输入手机号码登录账号以进入对战</span>
</p>
</div>
<el-form
@@ -27,7 +27,7 @@
v-model="loginModel.code"
:length="6"
:formatter="onlyAllowNumber"
style="flex: 2; --el-input-otp-gap: 0"
style="flex: 2; --el-input-otp-gap: 4px"
>
<template #separator></template>
</el-input-otp>

View File

@@ -3,7 +3,7 @@
<div class="qrcode-login-wrapper__header">
<h2 class="qrcode-login-wrapper__title">欢迎回来 📱</h2>
<p>
<span style="color: #71717a">请用手机扫描二维码登录</span>
<span style="color: var(--text-tertiary)">请用手机扫描二维码登录</span>
</p>
</div>
<el-form hide-required-asterisk class="qrcode-login-wrapper__form">

View File

@@ -3,7 +3,7 @@
<div class="register-wrapper__header">
<h2 class="register-wrapper__title">创建一个账号 🚀</h2>
<p>
<span style="color: #71717a">创建账号进入对战</span>
<span style="color: var(--text-tertiary)">创建账号进入对战</span>
</p>
</div>
<el-form
@@ -39,7 +39,7 @@
></div>
</div>
</div>
<p class="register-wrapper__password-hint" style="color: #71717a">
<p class="register-wrapper__password-hint" style="color: var(--text-tertiary)">
使用 8 个或更多字符混合大小写字母数字
</p>
</div>
@@ -57,7 +57,7 @@
<el-form-item prop="agreement">
<div class="register-wrapper__agreement">
<el-checkbox v-model="registerModel.agreement">我同意</el-checkbox>
<a href="javascript:void(0)" style="color: #2080f0">隐私政策 & 条款</a>
<a href="javascript:void(0)" style="color: var(--text-link)">隐私政策 & 条款</a>
</div>
</el-form-item>
<el-form-item>
@@ -68,7 +68,7 @@
<el-form-item>
<div class="register-wrapper__login-link">
<span>已经有账号了</span>
<router-link to="/auth/login" style="color: #2080f0">去登录</router-link>
<router-link to="/auth/login" style="color: var(--text-link)">去登录</router-link>
</div>
</el-form-item>
</el-form>
@@ -275,7 +275,7 @@ const userRegisterFun = () => {
height: 8px;
border-radius: 12px;
position: relative;
background-color: #e5e7eb;
background-color: var(--border-default);
overflow: hidden;
}
@@ -284,7 +284,7 @@ const userRegisterFun = () => {
left: 0;
top: 0;
height: 100%;
background-color: #ef4444;
background-color: var(--color-danger);
transition: all 500ms;
}