登录页调整
This commit is contained in:
zhangyue
parent
8b00e30c23
commit
ab65449273
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
|
|
@ -1,138 +1,141 @@
|
|||
<template>
|
||||
<div :class="prefixCls" class="login-background-img">
|
||||
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
|
||||
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
|
||||
<div class="aui-logo" v-if="!getIsMobile">
|
||||
<div>
|
||||
<h3>
|
||||
<!-- <img :src="logoImg" alt="jeecg" /> -->
|
||||
</h3>
|
||||
<div :class="prefixCls" class="login-page">
|
||||
<!-- 背景装饰层 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
<div class="circle circle-3"></div>
|
||||
<div class="bg-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="top-bar">
|
||||
<AppLocalePicker class="top-bar-item" :showText="false" />
|
||||
<AppDarkModeToggle class="top-bar-item" />
|
||||
</div>
|
||||
|
||||
<!-- 顶部大标题 -->
|
||||
<div v-show="type === 'login'" class="page-title-bar">
|
||||
<h1 class="page-title-main">农业面源污染监测管理平台</h1>
|
||||
</div>
|
||||
|
||||
<!-- 登录主体 -->
|
||||
<div v-show="type === 'login'" class="login-wrapper">
|
||||
<!-- 左侧图片展示区 -->
|
||||
<div class="brand-side">
|
||||
<img :src="adTextImg" class="brand-image" alt="监测站点" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录表单区 -->
|
||||
<div class="form-side">
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h2>欢迎登录</h2>
|
||||
<p>请使用您的账号登录系统</p>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="form-tabs">
|
||||
<div class="tab-item" :class="{ active: activeIndex === 'accountLogin' }" @click="loginClick('accountLogin')">
|
||||
{{ t('sys.login.signInFormTitle') }}
|
||||
<span v-if="activeIndex === 'accountLogin'" class="tab-indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="aui-phone-logo">
|
||||
<!-- <img :src="logoImg" alt="jeecg" /> -->
|
||||
</div>
|
||||
<div v-show="type === 'login'">
|
||||
<div class="aui-content">
|
||||
<div class="aui-container">
|
||||
<div class="aui-form">
|
||||
<div class="aui-image">
|
||||
<div class="aui-image-text">
|
||||
<img :src="adTextImg" />
|
||||
|
||||
<!-- 账号登录 -->
|
||||
<a-form v-if="activeIndex === 'accountLogin'" ref="loginRef" :model="formData" class="login-form" @keyup.enter.native="loginHandleClick">
|
||||
<div class="form-field">
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<UserOutlined />
|
||||
</span>
|
||||
<a-input class="fix-auto-fill custom-input" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-formBox">
|
||||
<div class="aui-formWell">
|
||||
<div class="aui-flex aui-form-nav investment_title">
|
||||
<div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
|
||||
>{{ t('sys.login.signInFormTitle') }}
|
||||
</div>
|
||||
<!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
|
||||
>{{ t('sys.login.mobileSignInFormTitle') }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="aui-form-box" style="height: 180px">
|
||||
<a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
|
||||
<div class="aui-account">
|
||||
<div class="aui-inputClear">
|
||||
<i class="icon icon-code"></i>
|
||||
<a-form-item>
|
||||
<a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="aui-inputClear">
|
||||
<i class="icon icon-password"></i>
|
||||
<a-form-item>
|
||||
<a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="aui-inputClear">
|
||||
<i class="icon icon-code"></i>
|
||||
<a-form-item>
|
||||
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
|
||||
</a-form-item>
|
||||
<div class="aui-code">
|
||||
<img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
|
||||
<img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
|
||||
|
||||
<div class="form-field">
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<LockOutlined />
|
||||
</span>
|
||||
<a-input
|
||||
class="fix-auto-fill custom-input"
|
||||
type="password"
|
||||
:placeholder="t('sys.login.password')"
|
||||
v-model:value="formData.password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex">
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-choice">
|
||||
<a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
|
||||
<span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-forget">
|
||||
<!-- <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a> -->
|
||||
|
||||
<div class="form-field">
|
||||
<div class="input-wrapper captcha-wrapper">
|
||||
<span class="input-icon">
|
||||
<SafetyOutlined />
|
||||
</span>
|
||||
<a-input class="fix-auto-fill custom-input" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
|
||||
<div class="captcha-img" @click="handleChangeCheckCode">
|
||||
<img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" />
|
||||
<img v-else :src="codeImg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<div class="remember-me">
|
||||
<a-checkbox v-model:checked="rememberMe">
|
||||
{{ t('sys.login.rememberMe') }}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div class="forgot-link">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-button :loading="loginLoading" class="login-btn" type="primary" @click="loginHandleClick">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
<a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
|
||||
<div class="aui-account phone">
|
||||
<div class="aui-inputClear phoneClear">
|
||||
<a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
|
||||
|
||||
<!-- 手机登录 -->
|
||||
<a-form v-else ref="phoneFormRef" :model="phoneFormData" class="login-form" @keyup.enter.native="loginHandleClick">
|
||||
<div class="form-field">
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<MobileOutlined />
|
||||
</span>
|
||||
<a-input class="fix-auto-fill custom-input" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
|
||||
</div>
|
||||
<div class="aui-inputClear">
|
||||
<a-input class="fix-auto-fill" :maxlength="6" :placeholder="t('sys.login.smsCode')" v-model:value="phoneFormData.smscode" />
|
||||
<div v-if="showInterval" class="aui-code" @click="getLoginCode">
|
||||
<a>{{ t('component.countdown.normalText') }}</a>
|
||||
</div>
|
||||
<div v-else class="aui-code">
|
||||
<span class="aui-get-code code-shape">{{ t('component.countdown.sendText', [unref(timeRuning)]) }}</span>
|
||||
|
||||
<div class="form-field">
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<MessageOutlined />
|
||||
</span>
|
||||
<a-input
|
||||
class="fix-auto-fill custom-input"
|
||||
:maxlength="6"
|
||||
:placeholder="t('sys.login.smsCode')"
|
||||
v-model:value="phoneFormData.smscode"
|
||||
/>
|
||||
<div v-if="showInterval" class="sms-btn" @click="getLoginCode">
|
||||
{{ t('component.countdown.normalText') }}
|
||||
</div>
|
||||
<div v-else class="sms-btn disabled">
|
||||
{{ t('component.countdown.sendText', [unref(timeRuning)]) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-button :loading="loginLoading" class="login-btn" type="primary" @click="loginHandleClick">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="aui-formButton">
|
||||
<div class="aui-flex">
|
||||
<a-button :loading="loginLoading" class="aui-link-login aui-flex-box" type="primary" @click="loginHandleClick">
|
||||
{{ t('sys.login.loginButton') }}</a-button>
|
||||
</div>
|
||||
<!-- <div class="aui-flex">
|
||||
<a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
|
||||
</div>
|
||||
<div class="aui-flex">
|
||||
<a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a-form @keyup.enter.native="loginHandleClick">
|
||||
<div class="aui-flex aui-third-text">
|
||||
<div class="aui-flex-box aui-third-border">
|
||||
<span>{{ t('sys.login.otherSignIn') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他视图 -->
|
||||
<div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
|
||||
<MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
|
||||
</div>
|
||||
|
|
@ -142,13 +145,15 @@
|
|||
<div v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
|
||||
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
|
||||
</div>
|
||||
<!-- 第三方登录相关弹框 -->
|
||||
<ThirdModal ref="thirdModalRef"></ThirdModal>
|
||||
|
||||
<ThirdModal ref="thirdModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="login-mini">
|
||||
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
|
||||
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
|
||||
import { UserOutlined, LockOutlined, SafetyOutlined, MobileOutlined, MessageOutlined } from '@ant-design/icons-vue';
|
||||
import codeImg from '/@/assets/images/checkcode.png';
|
||||
import { Rule } from '/@/components/Form';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
|
@ -160,11 +165,11 @@
|
|||
import MiniRegister from './MiniRegister.vue';
|
||||
import MiniCodelogin from './MiniCodelogin.vue';
|
||||
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
|
||||
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
|
||||
import adTextImg from '/@/assets/loginmini/icon/stage2.png';
|
||||
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
|
||||
import { useLocaleStore } from '/@/store/modules/locale';
|
||||
import { useDesign } from "/@/hooks/web/useDesign";
|
||||
import { useAppInject } from "/@/hooks/web/useAppInject";
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
|
|
@ -269,7 +274,7 @@
|
|||
username: formData.username,
|
||||
captcha: formData.inputCode,
|
||||
checkKey: randCodeData.checkKey,
|
||||
mode: 'none', //不要默认的错误提示
|
||||
mode: 'none',
|
||||
})
|
||||
);
|
||||
if (userInfo) {
|
||||
|
|
@ -308,7 +313,7 @@
|
|||
const { userInfo }: any = await userStore.phoneLogin({
|
||||
mobile: phoneFormData.mobile,
|
||||
captcha: phoneFormData.smscode,
|
||||
mode: 'none', //不要默认的错误提示
|
||||
mode: 'none',
|
||||
});
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
|
|
@ -420,138 +425,539 @@
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '/@/assets/loginmini/style/home.less';
|
||||
@import '/@/assets/loginmini/style/base.less';
|
||||
|
||||
:deep(.ant-input:focus) {
|
||||
box-shadow: none;
|
||||
}
|
||||
.aui-get-code {
|
||||
float: right;
|
||||
/* ========== 页面容器 ========== */
|
||||
.login-page {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background: #ffffff;
|
||||
color: #1573e9;
|
||||
border-radius: 100px;
|
||||
padding: 5px 16px;
|
||||
margin: 7px;
|
||||
border: 1px solid #1573e9;
|
||||
top: 12px;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 40%, #ecfdf5 100%);
|
||||
}
|
||||
|
||||
.aui-get-code:hover {
|
||||
color: #1573e9;
|
||||
}
|
||||
|
||||
.code-shape {
|
||||
border-color: #dadada !important;
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
:deep(.jeecg-dark-switch){
|
||||
/* ========== 背景装饰 ========== */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
margin-right: 10px;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.aui-link-login{
|
||||
height: 42px;
|
||||
padding: 10px 15px;
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: #60a5fa;
|
||||
top: -150px;
|
||||
right: -100px;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #34d399;
|
||||
bottom: -120px;
|
||||
left: -80px;
|
||||
animation: float 10s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #a78bfa;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
opacity: 0.3;
|
||||
animation: float 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(30px, -30px); }
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
/* ========== 顶部工具栏 ========== */
|
||||
.top-bar {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.top-bar-item {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.top-bar-item:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ========== 顶部大标题 ========== */
|
||||
.page-title-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 40px 24px 0;
|
||||
}
|
||||
|
||||
.page-title-main {
|
||||
font-size: clamp(24px, 3.2vw, 44px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
background: linear-gradient(90deg, #1e40af, #0891b2, #059669);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ========== 登录主体 ========== */
|
||||
.login-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
min-height: calc(100vh - 140px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ========== 左侧图片展示区 ========== */
|
||||
.brand-side {
|
||||
flex: 1;
|
||||
max-width: 520px;
|
||||
min-height: 520px;
|
||||
border-radius: 24px 0 0 24px;
|
||||
background: linear-gradient(160deg, #1e40af 0%, #0891b2 50%, #059669 100%);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(6, 78, 100, 0.25);
|
||||
}
|
||||
|
||||
.brand-side::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.brand-side::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ========== 右侧表单区 ========== */
|
||||
.form-side {
|
||||
width: 460px;
|
||||
min-height: 520px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 0 24px 24px 0;
|
||||
padding: 48px 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.form-header p {
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 8px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
.aui-phone-logo{
|
||||
|
||||
/* Tabs */
|
||||
.form-tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
font-size: 15px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 60px;
|
||||
top:2px;
|
||||
z-index: 4;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #06b6d4);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.login-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f1f5f9;
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 0 14px;
|
||||
transition: all 0.3s;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
background: #fff;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
color: #94a3b8;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within .input-icon {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
flex: 1;
|
||||
height: 44px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.custom-input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
outline: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.captcha-wrapper {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.captcha-img {
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e2e8f0;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
|
||||
.captcha-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 手机验证码按钮 */
|
||||
.sms-btn {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sms-btn:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.sms-btn.disabled {
|
||||
color: #94a3b8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 选项行 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.remember-me :deep(.ant-checkbox-inner) {
|
||||
border-radius: 4px;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.remember-me :deep(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
background-color: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.forgot-link a {
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forgot-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 900px) {
|
||||
.page-title-bar {
|
||||
padding: 28px 20px 0;
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.brand-side {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.form-side {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-title-bar {
|
||||
padding: 20px 16px 0;
|
||||
}
|
||||
|
||||
.page-title-main {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.brand-side {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.form-side {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.top-3{
|
||||
top: 0.45rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-mini-login';
|
||||
@dark-bg: #293146;
|
||||
@dark-bg: #0f172a;
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.@{prefix-cls} {
|
||||
background-color: @dark-bg !important;
|
||||
background-image: none;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
|
||||
|
||||
&::before {
|
||||
background-image: url(/@/assets/svg/login-bg-dark.svg);
|
||||
}
|
||||
.aui-inputClear{
|
||||
background-color: #232a3b !important;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
background-color: #232a3b !important;
|
||||
.circle-1 { background: #1e40af; opacity: 0.3; }
|
||||
.circle-2 { background: #0f766e; opacity: 0.3; }
|
||||
.circle-3 { background: #7c3aed; opacity: 0.2; }
|
||||
|
||||
.page-title-main {
|
||||
background: linear-gradient(90deg, #60a5fa, #22d3ee, #34d399);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
|
||||
border: 1px solid #4a5569 !important;
|
||||
.brand-side {
|
||||
background: linear-gradient(160deg, #1e3a8a 0%, #0e7490 50%, #047857 100%) !important;
|
||||
}
|
||||
|
||||
&-form {
|
||||
background: @dark-bg !important;
|
||||
.form-side {
|
||||
background: rgba(30, 41, 59, 0.9) !important;
|
||||
border-color: rgba(51, 65, 85, 0.6) !important;
|
||||
}
|
||||
|
||||
.app-iconify {
|
||||
color: #fff !important;
|
||||
}
|
||||
.aui-inputClear input,.aui-input-line input,.aui-choice{
|
||||
color: #c9d1d9 !important;
|
||||
.form-header h2 { color: #f1f5f9 !important; }
|
||||
.form-header p { color: #94a3b8 !important; }
|
||||
.tab-item { color: #94a3b8 !important; }
|
||||
.tab-item.active { color: #f1f5f9 !important; }
|
||||
|
||||
.input-wrapper { background: #1e293b !important; }
|
||||
.input-wrapper:focus-within {
|
||||
background: #0f172a !important;
|
||||
border-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
|
||||
}
|
||||
|
||||
.aui-formBox{
|
||||
background-color: @dark-bg !important;
|
||||
}
|
||||
.aui-third-text span{
|
||||
background-color: @dark-bg !important;
|
||||
}
|
||||
.aui-form-nav .aui-flex-box{
|
||||
color: #c9d1d9 !important;
|
||||
.custom-input { color: #f1f5f9 !important; }
|
||||
.input-icon { color: #64748b !important; }
|
||||
.input-wrapper:focus-within .input-icon { color: #3b82f6 !important; }
|
||||
|
||||
.captcha-img {
|
||||
background: #334155;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
.aui-formButton .aui-linek-code{
|
||||
background: @dark-bg !important;
|
||||
color: white !important;
|
||||
.remember-me :deep(.ant-checkbox-inner) {
|
||||
background-color: transparent !important;
|
||||
border-color: #475569 !important;
|
||||
}
|
||||
.aui-code-line{
|
||||
border-left: none !important;
|
||||
|
||||
.sms-btn { color: #60a5fa; }
|
||||
.sms-btn.disabled { color: #64748b; }
|
||||
|
||||
.top-bar-item {
|
||||
background: rgba(51, 65, 85, 0.8);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.ant-checkbox-inner,.aui-success h3{
|
||||
border-color: #c9d1d9;
|
||||
|
||||
.top-bar-item:hover {
|
||||
background: rgba(71, 85, 105, 0.9);
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
background: linear-gradient(90deg, #60a5fa, #22d3ee);
|
||||
}
|
||||
}
|
||||
|
||||
input.fix-auto-fill,
|
||||
.fix-auto-fill input {
|
||||
-webkit-text-fill-color: #c9d1d9 !important;
|
||||
box-shadow: inherit !important;
|
||||
}
|
||||
|
||||
&-sign-in-way {
|
||||
.anticon {
|
||||
font-size: 22px !important;
|
||||
color: #888 !important;
|
||||
cursor: pointer !important;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-divider-inner-text {
|
||||
font-size: 12px !important;
|
||||
color: @text-color-secondary !important;
|
||||
}
|
||||
.aui-third-login a{
|
||||
background: transparent;
|
||||
-webkit-text-fill-color: #f1f5f9 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue