登录页调整
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>
|
<template>
|
||||||
<div :class="prefixCls" class="login-background-img">
|
<div :class="prefixCls" class="login-page">
|
||||||
<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="bg-decoration">
|
||||||
<div class="aui-logo" v-if="!getIsMobile">
|
<div class="circle circle-1"></div>
|
||||||
<div>
|
<div class="circle circle-2"></div>
|
||||||
<h3>
|
<div class="circle circle-3"></div>
|
||||||
<!-- <img :src="logoImg" alt="jeecg" /> -->
|
<div class="bg-grid"></div>
|
||||||
</h3>
|
</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>
|
</div>
|
||||||
<div v-else class="aui-phone-logo">
|
|
||||||
<!-- <img :src="logoImg" alt="jeecg" /> -->
|
<!-- 账号登录 -->
|
||||||
</div>
|
<a-form v-if="activeIndex === 'accountLogin'" ref="loginRef" :model="formData" class="login-form" @keyup.enter.native="loginHandleClick">
|
||||||
<div v-show="type === 'login'">
|
<div class="form-field">
|
||||||
<div class="aui-content">
|
<div class="input-wrapper">
|
||||||
<div class="aui-container">
|
<span class="input-icon">
|
||||||
<div class="aui-form">
|
<UserOutlined />
|
||||||
<div class="aui-image">
|
</span>
|
||||||
<div class="aui-image-text">
|
<a-input class="fix-auto-fill custom-input" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
|
||||||
<img :src="adTextImg" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="aui-formBox">
|
|
||||||
<div class="aui-formWell">
|
<div class="form-field">
|
||||||
<div class="aui-flex aui-form-nav investment_title">
|
<div class="input-wrapper">
|
||||||
<div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
|
<span class="input-icon">
|
||||||
>{{ t('sys.login.signInFormTitle') }}
|
<LockOutlined />
|
||||||
</div>
|
</span>
|
||||||
<!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
|
<a-input
|
||||||
>{{ t('sys.login.mobileSignInFormTitle') }}
|
class="fix-auto-fill custom-input"
|
||||||
</div> -->
|
type="password"
|
||||||
</div>
|
:placeholder="t('sys.login.password')"
|
||||||
<div class="aui-form-box" style="height: 180px">
|
v-model:value="formData.password"
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="aui-flex">
|
|
||||||
<div class="aui-flex-box">
|
<div class="form-field">
|
||||||
<div class="aui-choice">
|
<div class="input-wrapper captcha-wrapper">
|
||||||
<a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
|
<span class="input-icon">
|
||||||
<span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
|
<SafetyOutlined />
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<a-input class="fix-auto-fill custom-input" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
|
||||||
<div class="aui-forget">
|
<div class="captcha-img" @click="handleChangeCheckCode">
|
||||||
<!-- <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a> -->
|
<img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" />
|
||||||
|
<img v-else :src="codeImg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
|
|
||||||
<div class="aui-account phone">
|
<!-- 手机登录 -->
|
||||||
<div class="aui-inputClear phoneClear">
|
<a-form v-else ref="phoneFormRef" :model="phoneFormData" class="login-form" @keyup.enter.native="loginHandleClick">
|
||||||
<a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
|
<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>
|
||||||
<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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a-button :loading="loginLoading" class="login-btn" type="primary" @click="loginHandleClick">
|
||||||
|
{{ t('sys.login.loginButton') }}
|
||||||
|
</a-button>
|
||||||
</a-form>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 其他视图 -->
|
||||||
<div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
|
<div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
|
||||||
<MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
|
<MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,13 +145,15 @@
|
||||||
<div v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
|
<div v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
|
||||||
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
|
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 第三方登录相关弹框 -->
|
|
||||||
<ThirdModal ref="thirdModalRef"></ThirdModal>
|
<ThirdModal ref="thirdModalRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="login-mini">
|
<script lang="ts" setup name="login-mini">
|
||||||
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
|
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
|
||||||
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
|
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 codeImg from '/@/assets/images/checkcode.png';
|
||||||
import { Rule } from '/@/components/Form';
|
import { Rule } from '/@/components/Form';
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
|
|
@ -160,11 +165,11 @@
|
||||||
import MiniRegister from './MiniRegister.vue';
|
import MiniRegister from './MiniRegister.vue';
|
||||||
import MiniCodelogin from './MiniCodelogin.vue';
|
import MiniCodelogin from './MiniCodelogin.vue';
|
||||||
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
|
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 { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
|
||||||
import { useLocaleStore } from '/@/store/modules/locale';
|
import { useLocaleStore } from '/@/store/modules/locale';
|
||||||
import { useDesign } from "/@/hooks/web/useDesign";
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { useAppInject } from "/@/hooks/web/useAppInject";
|
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||||
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
|
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
const IconFont = createFromIconfontCN({
|
const IconFont = createFromIconfontCN({
|
||||||
|
|
@ -269,7 +274,7 @@
|
||||||
username: formData.username,
|
username: formData.username,
|
||||||
captcha: formData.inputCode,
|
captcha: formData.inputCode,
|
||||||
checkKey: randCodeData.checkKey,
|
checkKey: randCodeData.checkKey,
|
||||||
mode: 'none', //不要默认的错误提示
|
mode: 'none',
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
if (userInfo) {
|
if (userInfo) {
|
||||||
|
|
@ -308,7 +313,7 @@
|
||||||
const { userInfo }: any = await userStore.phoneLogin({
|
const { userInfo }: any = await userStore.phoneLogin({
|
||||||
mobile: phoneFormData.mobile,
|
mobile: phoneFormData.mobile,
|
||||||
captcha: phoneFormData.smscode,
|
captcha: phoneFormData.smscode,
|
||||||
mode: 'none', //不要默认的错误提示
|
mode: 'none',
|
||||||
});
|
});
|
||||||
if (userInfo) {
|
if (userInfo) {
|
||||||
notification.success({
|
notification.success({
|
||||||
|
|
@ -420,138 +425,539 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '/@/assets/loginmini/style/home.less';
|
/* ========== 页面容器 ========== */
|
||||||
@import '/@/assets/loginmini/style/base.less';
|
.login-page {
|
||||||
|
|
||||||
:deep(.ant-input:focus) {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.aui-get-code {
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
min-height: 100vh;
|
||||||
background: #ffffff;
|
width: 100%;
|
||||||
color: #1573e9;
|
overflow: hidden;
|
||||||
border-radius: 100px;
|
background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 40%, #ecfdf5 100%);
|
||||||
padding: 5px 16px;
|
|
||||||
margin: 7px;
|
|
||||||
border: 1px solid #1573e9;
|
|
||||||
top: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aui-get-code:hover {
|
/* ========== 背景装饰 ========== */
|
||||||
color: #1573e9;
|
.bg-decoration {
|
||||||
}
|
|
||||||
|
|
||||||
.code-shape {
|
|
||||||
border-color: #dadada !important;
|
|
||||||
color: #aaa !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.jeecg-dark-switch){
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-right: 10px;
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.aui-link-login{
|
|
||||||
height: 42px;
|
.circle {
|
||||||
padding: 10px 15px;
|
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;
|
font-size: 14px;
|
||||||
border-radius: 8px;
|
color: #64748b;
|
||||||
margin-top: 15px;
|
margin: 0;
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
.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;
|
position: absolute;
|
||||||
margin-left: 10px;
|
bottom: -1px;
|
||||||
width: 60px;
|
left: 0;
|
||||||
top:2px;
|
right: 0;
|
||||||
z-index: 4;
|
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>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@prefix-cls: ~'@{namespace}-mini-login';
|
@prefix-cls: ~'@{namespace}-mini-login';
|
||||||
@dark-bg: #293146;
|
@dark-bg: #0f172a;
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
background-color: @dark-bg !important;
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
&::before {
|
.circle-1 { background: #1e40af; opacity: 0.3; }
|
||||||
background-image: url(/@/assets/svg/login-bg-dark.svg);
|
.circle-2 { background: #0f766e; opacity: 0.3; }
|
||||||
}
|
.circle-3 { background: #7c3aed; opacity: 0.2; }
|
||||||
.aui-inputClear{
|
|
||||||
background-color: #232a3b !important;
|
.page-title-main {
|
||||||
}
|
background: linear-gradient(90deg, #60a5fa, #22d3ee, #34d399);
|
||||||
.ant-input,
|
-webkit-background-clip: text;
|
||||||
.ant-input-password {
|
-webkit-text-fill-color: transparent;
|
||||||
background-color: #232a3b !important;
|
background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
|
.brand-side {
|
||||||
border: 1px solid #4a5569 !important;
|
background: linear-gradient(160deg, #1e3a8a 0%, #0e7490 50%, #047857 100%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-form {
|
.form-side {
|
||||||
background: @dark-bg !important;
|
background: rgba(30, 41, 59, 0.9) !important;
|
||||||
|
border-color: rgba(51, 65, 85, 0.6) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-iconify {
|
.form-header h2 { color: #f1f5f9 !important; }
|
||||||
color: #fff !important;
|
.form-header p { color: #94a3b8 !important; }
|
||||||
}
|
.tab-item { color: #94a3b8 !important; }
|
||||||
.aui-inputClear input,.aui-input-line input,.aui-choice{
|
.tab-item.active { color: #f1f5f9 !important; }
|
||||||
color: #c9d1d9 !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{
|
.custom-input { color: #f1f5f9 !important; }
|
||||||
background-color: @dark-bg !important;
|
.input-icon { color: #64748b !important; }
|
||||||
}
|
.input-wrapper:focus-within .input-icon { color: #3b82f6 !important; }
|
||||||
.aui-third-text span{
|
|
||||||
background-color: @dark-bg !important;
|
.captcha-img {
|
||||||
}
|
background: #334155;
|
||||||
.aui-form-nav .aui-flex-box{
|
border-color: #475569;
|
||||||
color: #c9d1d9 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aui-formButton .aui-linek-code{
|
.remember-me :deep(.ant-checkbox-inner) {
|
||||||
background: @dark-bg !important;
|
background-color: transparent !important;
|
||||||
color: white !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,
|
input.fix-auto-fill,
|
||||||
.fix-auto-fill input {
|
.fix-auto-fill input {
|
||||||
-webkit-text-fill-color: #c9d1d9 !important;
|
-webkit-text-fill-color: #f1f5f9 !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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue