mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-22 11:04:26 +08:00
登录注册页面支持 dark 主题模式
This commit is contained in:
GeekMaster
@@ -97,4 +97,14 @@
|
||||
|
||||
// 面板背景
|
||||
--panel-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
|
||||
|
||||
// 登录注册页面专用变量
|
||||
--login-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
|
||||
--login-card-bg: #252d58;
|
||||
--login-card-border: rgba(255, 255, 255, 0.1);
|
||||
--login-title-color: #fff;
|
||||
--login-subtitle-color: #a3aed0;
|
||||
--login-text-color: #a3aed0;
|
||||
--login-link-color: #d1c7ff;
|
||||
--login-link-hover-bg: rgba(209, 199, 255, 0.1);
|
||||
}
|
||||
@@ -62,4 +62,14 @@
|
||||
--quote-text-color: #333;
|
||||
// 面板背景
|
||||
--panel-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
|
||||
|
||||
// 登录注册页面专用变量
|
||||
--login-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
|
||||
--login-card-bg: #fff;
|
||||
--login-card-border: rgba(79, 89, 102, 0.122);
|
||||
--login-title-color: #000;
|
||||
--login-subtitle-color: #666;
|
||||
--login-text-color: #666;
|
||||
--login-link-color: #5b62ce;
|
||||
--login-link-hover-bg: rgba(91, 98, 206, 0.1);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-dialog w-full">
|
||||
<div class="login-box" v-if="login">
|
||||
<el-form :model="data" class="form">
|
||||
<el-form :model="data" class="form space-y-5">
|
||||
<div class="block">
|
||||
<el-input placeholder="账号" size="large" v-model="data.username" autocomplete="off">
|
||||
<template #prefix>
|
||||
@@ -29,25 +29,34 @@
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-row class="btn-row mt-8" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
<button
|
||||
class="w-full h-12 rounded-xl text-base font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 shadow-md"
|
||||
@click="submitLogin"
|
||||
:loading="loading"
|
||||
>{{ loading ? '登录中...' : '登 录' }}</el-button
|
||||
>
|
||||
{{ loading ? '登录中...' : '登 录' }}
|
||||
</button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="text flex justify-center items-center pt-3 text-sm">
|
||||
<div
|
||||
class="text flex justify-center items-center pt-3 text-sm"
|
||||
style="color: var(--login-text-color);"
|
||||
>
|
||||
还没有账号？
|
||||
<el-button size="small" @click="login = false">注册</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
class="ml-2 rounded-md px-2 py-1 transition-colors duration-200"
|
||||
style="color: var(--login-link-color);"
|
||||
@click="login = false"
|
||||
@mouseenter="$event.target.style.background = 'var(--login-link-hover-bg)'"
|
||||
@mouseleave="$event.target.style.background = 'transparent'"
|
||||
>注册</el-button
|
||||
>
|
||||
|
||||
<el-button type="info" class="forget" size="small" @click="showResetPass = true"
|
||||
<el-button type="info" class="forget ml-4" size="small" @click="showResetPass = true"
|
||||
>忘记密码？</el-button
|
||||
>
|
||||
</div>
|
||||
@@ -56,8 +65,8 @@
|
||||
</div>
|
||||
|
||||
<div class="register-box w-full" v-else>
|
||||
<el-form :model="data" class="form" v-if="enableRegister">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-form :model="data" class="form space-y-5" v-if="enableRegister">
|
||||
<el-tabs v-model="activeName" class="demo-tabs dark:text-white">
|
||||
<el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
|
||||
<div class="block">
|
||||
<el-input
|
||||
@@ -74,7 +83,7 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="block mt-4">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input
|
||||
@@ -107,7 +116,7 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="block mt-4">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input
|
||||
@@ -198,19 +207,26 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<el-button
|
||||
class="login-btn w-full"
|
||||
type="primary"
|
||||
size="large"
|
||||
<button
|
||||
class="w-full h-12 rounded-xl text-base font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 shadow-md"
|
||||
@click="submitRegister"
|
||||
:loading="loading"
|
||||
>{{ loading ? '注册中...' : '注 册' }}</el-button
|
||||
>
|
||||
{{ loading ? '注册中...' : '注 册' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text text-sm flex justify-center items-center w-full pt-3">
|
||||
<div
|
||||
class="text text-sm flex justify-center items-center w-full pt-3"
|
||||
style="color: var(--login-text-color);"
|
||||
>
|
||||
已有账号？
|
||||
<el-button size="small" @click="login = true">登录</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
class="ml-2 rounded-md px-2 py-1"
|
||||
style="color: var(--login-link-color);"
|
||||
@click="login = true"
|
||||
>登录</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
@@ -245,14 +261,12 @@ import SendMsg from '@/components/SendMsg.vue'
|
||||
import { getSystemInfo } from '@/store/cache'
|
||||
import { setUserToken } from '@/store/session'
|
||||
import { useSharedStore } from '@/store/sharedata'
|
||||
import { setRoute } from '@/store/system'
|
||||
import { httpGet, httpPost } from '@/utils/http'
|
||||
import { httpPost } from '@/utils/http'
|
||||
import { arrayContains } from '@/utils/libs'
|
||||
import { validateEmail, validateMobile } from '@/utils/validate'
|
||||
import { Checked, Iphone, Lock, Message } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
@@ -439,46 +453,56 @@ const doRegister = (verifyData) => {
|
||||
.login-dialog {
|
||||
border-radius: 10px;
|
||||
|
||||
.el-tabs__nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// Dark theme support for Element Plus components
|
||||
:deep(.el-tabs) {
|
||||
.el-tabs__header {
|
||||
.el-tabs__nav-wrap {
|
||||
.el-tabs__nav {
|
||||
.el-tabs__item {
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
.form {
|
||||
.block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
|
||||
.login-btn {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 40px;
|
||||
|
||||
.el-tag {
|
||||
cursor: pointer;
|
||||
&.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.register-box {
|
||||
.wechat-card {
|
||||
text-align: center;
|
||||
:deep(.el-input) {
|
||||
.el-input__wrapper {
|
||||
background: var(--el-fill-color-blank);
|
||||
border-color: var(--el-border-color);
|
||||
|
||||
&.is-focus {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
&.el-button--info {
|
||||
color: var(--el-text-color-regular);
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
登录后解锁功能
|
||||
</div>
|
||||
</template>
|
||||
<div class="p-4 pt-2 pb-2">
|
||||
<div class="w-full p-4 pt-2 pb-2">
|
||||
<LoginDialog @success="loginSuccess" @hide="store.setShowLoginDialog(false)" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
@@ -1,13 +1,38 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<router-link to="/" class="back-home-btn" title="返回首页">
|
||||
<i class="iconfont icon-home"></i>
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
|
||||
style="background: var(--login-bg);"
|
||||
>
|
||||
<router-link
|
||||
to="/"
|
||||
class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
|
||||
style="background: var(--btnColor);"
|
||||
title="返回首页"
|
||||
>
|
||||
<i class="iconfont icon-home text-xl"></i>
|
||||
</router-link>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">欢迎登录</h1>
|
||||
<p class="login-subtitle">登录您的账户以继续使用服务</p>
|
||||
<div class="w-full max-w-md mx-auto">
|
||||
<div
|
||||
class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
|
||||
style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 h-1"
|
||||
style="background: var(--btnColor);"
|
||||
></div>
|
||||
<div class="text-center mb-8">
|
||||
<h1
|
||||
class="text-3xl font-semibold m-0 mb-2 tracking-tight"
|
||||
style="color: var(--login-title-color);"
|
||||
>
|
||||
欢迎登录
|
||||
</h1>
|
||||
<p
|
||||
class="text-base m-0 leading-relaxed"
|
||||
style="color: var(--login-subtitle-color);"
|
||||
>
|
||||
登录您的账户以继续使用服务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="login-content">
|
||||
@@ -59,271 +84,57 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: var(--theme-bg-all);
|
||||
background-image: var(--panel-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.back-home-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 12px;
|
||||
color: var(--theme-text-color-primary);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
background: var(--hover-deep-color);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--btnColor);
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-color-primary);
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-color-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
:deep(.login-dialog) {
|
||||
.form {
|
||||
.block {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&.is-focus {
|
||||
border-color: var(--border-active);
|
||||
box-shadow: 0 0 0 3px rgba(91, 98, 206, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: var(--theme-text-color-primary);
|
||||
font-size: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-color-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
color: var(--theme-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-top: 32px;
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: var(--btnColor);
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 16px rgba(91, 98, 206, 0.3);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(91, 98, 206, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 24px;
|
||||
color: var(--theme-text-color-secondary);
|
||||
|
||||
.el-button {
|
||||
color: var(--text-color-primary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.forget {
|
||||
color: var(--theme-text-color-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
<style scoped>
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.login-page {
|
||||
padding: 16px;
|
||||
.min-h-screen {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.back-home-btn {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.iconfont {
|
||||
font-size: 18px;
|
||||
}
|
||||
.fixed.top-5.left-5 {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 32px 24px;
|
||||
border-radius: 16px;
|
||||
margin-top: 60px;
|
||||
.fixed.top-5.left-5 .iconfont {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
.max-w-md {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 15px;
|
||||
.p-10 {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
:deep(.login-dialog) {
|
||||
.form {
|
||||
.block {
|
||||
margin-bottom: 18px;
|
||||
.rounded-3xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-top: 28px;
|
||||
|
||||
.login-btn {
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
|
||||
.el-button {
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-base {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏幕手机适配
|
||||
/* 小屏幕手机适配 */
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 24px 20px;
|
||||
.p-10 {
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
.text-3xl {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
.text-base {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,38 @@
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<router-link to="/" class="back-home-btn" title="返回首页">
|
||||
<i class="iconfont icon-home"></i>
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
|
||||
style="background: var(--login-bg);"
|
||||
>
|
||||
<router-link
|
||||
to="/"
|
||||
class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
|
||||
style="background: var(--btnColor);"
|
||||
title="返回首页"
|
||||
>
|
||||
<i class="iconfont icon-home text-xl"></i>
|
||||
</router-link>
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h1 class="register-title">用户注册</h1>
|
||||
<p class="register-subtitle">创建您的账户以开始使用服务</p>
|
||||
<div class="w-full max-w-md mx-auto">
|
||||
<div
|
||||
class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
|
||||
style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 h-1"
|
||||
style="background: var(--btnColor);"
|
||||
></div>
|
||||
<div class="text-center mb-8">
|
||||
<h1
|
||||
class="text-3xl font-semibold m-0 mb-2 tracking-tight"
|
||||
style="color: var(--login-title-color);"
|
||||
>
|
||||
用户注册
|
||||
</h1>
|
||||
<p
|
||||
class="text-base m-0 leading-relaxed"
|
||||
style="color: var(--login-subtitle-color);"
|
||||
>
|
||||
创建您的账户以开始使用服务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="register-content">
|
||||
@@ -55,404 +80,57 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-page {
|
||||
min-height: 100vh;
|
||||
background: var(--theme-bg-all);
|
||||
background-image: var(--panel-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.back-home-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 12px;
|
||||
color: var(--theme-text-color-primary);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
background: var(--hover-deep-color);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-container {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--btnColor);
|
||||
}
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-color-primary);
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-color-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
:deep(.login-dialog) {
|
||||
.form {
|
||||
.block {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid var(--line-box);
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&.is-focus {
|
||||
border-color: var(--border-active);
|
||||
box-shadow: 0 0 0 3px rgba(91, 98, 206, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: var(--theme-text-color-primary);
|
||||
font-size: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-color-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
color: var(--theme-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-top: 32px;
|
||||
|
||||
.el-button {
|
||||
&[type="primary"],
|
||||
&.register-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: var(--btnColor);
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 16px rgba(91, 98, 206, 0.3);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(91, 98, 206, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 24px;
|
||||
color: var(--theme-text-color-secondary);
|
||||
|
||||
.el-button {
|
||||
color: var(--text-color-primary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: var(--btn-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.forget {
|
||||
color: var(--theme-text-color-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 验证码输入框样式
|
||||
.verify-code {
|
||||
.el-row {
|
||||
.el-col:first-child {
|
||||
.el-input__wrapper {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-col:last-child {
|
||||
.el-button {
|
||||
height: 40px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
background: var(--btn-bg);
|
||||
color: var(--theme-text-color-primary);
|
||||
border: 1px solid var(--line-box);
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-deep-color);
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 邀请码输入框样式
|
||||
.invite-code {
|
||||
.el-input__wrapper {
|
||||
background: var(--quote-bg-color);
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
}
|
||||
|
||||
// 协议条款样式
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text-color-secondary);
|
||||
line-height: 1.5;
|
||||
|
||||
.el-checkbox {
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
border-color: var(--line-box);
|
||||
background: var(--el-fill-color-blank);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-checked) {
|
||||
.el-checkbox__inner {
|
||||
background: var(--btnColor);
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
<style scoped>
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.register-page {
|
||||
padding: 16px;
|
||||
.min-h-screen {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.back-home-btn {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.iconfont {
|
||||
font-size: 18px;
|
||||
}
|
||||
.fixed.top-5.left-5 {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 32px 24px;
|
||||
border-radius: 16px;
|
||||
margin-top: 60px;
|
||||
.fixed.top-5.left-5 .iconfont {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 24px;
|
||||
.max-w-md {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 15px;
|
||||
.p-10 {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
:deep(.login-dialog) {
|
||||
.form {
|
||||
.block {
|
||||
margin-bottom: 18px;
|
||||
.rounded-3xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-top: 28px;
|
||||
|
||||
.el-button {
|
||||
&[type="primary"],
|
||||
&.register-btn {
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
|
||||
.el-button {
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-code {
|
||||
.el-row {
|
||||
.el-col:last-child {
|
||||
.el-button {
|
||||
height: 38px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-base {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏幕手机适配
|
||||
/* 小屏幕手机适配 */
|
||||
@media (max-width: 480px) {
|
||||
.register-card {
|
||||
padding: 24px 20px;
|
||||
.p-10 {
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 22px;
|
||||
.text-3xl {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
:deep(.login-dialog) {
|
||||
.form {
|
||||
.verify-code {
|
||||
.el-row {
|
||||
.el-col:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.el-col:last-child {
|
||||
padding-left: 0;
|
||||
margin-top: 10px;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border-left: 1px solid var(--line-box);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-base {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user