baison/yudao-ui-admin-vue3
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 标准标签

Browse Source
This commit is contained in:
ouhaolan
2026-03-06 15:45:30 +08:00
parent 13fe5d9124
commit 39246c9483
10 changed files with 3108 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

452
src/views/Login/Login.vue
View File

@@ -1,111 +1,393 @@
<template>
<div
:class="prefixCls"
class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
>
<div class="relative mx-auto h-full flex">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
>
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
<div class="login-page">
<!-- 动态背景 -->
<div class="bg-container">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="grid-base"></div>
<div class="flow-line h-line" style="top: 20%; left: -150px; animation-delay: 0s"></div>
<div class="flow-line h-line" style="top: 60%; left: -150px; animation-delay: 3s"></div>
<div class="flow-line v-line" style="left: 30%; top: -150px; animation-delay: 1.5s"></div>
</div>
<!-- 右上角主题、语言 -->
<div class="login-header-actions">
<ThemeSwitch />
<LocaleDropdown />
</div>
<!-- 主内容区 -->
<div class="container">
<!-- 左侧面板 -->
<div class="left-panel">
<div class="brand-box">
<div class="logo-main">
<svg viewBox="0 0 100 100" class="logo-svg">
<path d="M50 2L2 25.5v49L50 98l48-23.5v-49L50 2zm35.2 65.7L50 88.3 14.8 67.7V32.3L50 11.7l35.2 20.6v35.4z" />
<path d="M38.1 48.9h23.8L50 28.3 38.1 48.9zM50 71.7l11.9-20.6H38.1L50 71.7z" />
</svg>
</div>
<div class="brand-name">Ai 决策通</div>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/001.png" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
<h2 class="sub-title">服鞋行业AI决策管理平台</h2>
<p class="desc">
专业的服鞋供应链 AI 决策中心。通过实时大数据分析与行业领先的智能算法，助力用户实现高效配补货决策及数字化经营管理。
</p>
<div class="features">
<div class="feature-card">
<div class="icon-box">
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2v-4h2v4zm4 0h-2V7h2v10zm-8 0H8v-7h2v7z"/></svg>
</div>
</TransitionGroup>
</div>
</div>
<div
class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
>
<!-- 右上角的主题、语言选择 -->
<div
class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
style="color: var(--el-text-color-primary);"
>
<div class="flex items-center at-2xl:hidden at-xl:hidden">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold" >{{ underlineToHump(appStore.getTitle) }}</span>
AI智能配补货
</div>
<div class="flex items-center justify-end space-x-10px h-48px">
<ThemeSwitch />
<LocaleDropdown />
<div class="feature-card">
<div class="icon-box">
<svg viewBox="0 0 24 24"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 17.08l1.5 1.41z"/></svg>
</div>
AI报表平台
</div>
<div class="feature-card">
<div class="icon-box">
<svg viewBox="0 0 24 24"><path d="M22 2H2v20h20V2zM10 7h4v2h-4V7zm8 10H6v-2h12v2zm0-4H6v-2h12v2zm0-4h-2V7h2v2z"/></svg>
</div>
AI管理工具包
</div>
<div class="feature-card">
<div class="icon-box">
<svg viewBox="0 0 24 24"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>
</div>
AI智能标签
</div>
</div>
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
>
<!-- 账号登录 -->
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
</div>
</Transition>
</div>
<!-- 右侧登录面板 -->
<div class="right-panel">
<div class="login-card">
<LoginForm />
</div>
</div>
</div>
<div class="footer">
长沙决策通科技有限公司 &copy; 2026 版权所有
</div>
</div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
<script lang="ts" setup>
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
import { LoginForm } from './components'
defineOptions({ name: 'Login' })
const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;
.login-page {
--primary-blue: #004fb0;
--btn-grad: linear-gradient(180deg, #8cbaff 0%, #3e81e0 100%);
--glass: rgba(255, 255, 255, 0.35);
--grid-size: 70px;
.#{$prefix-cls} {
overflow: auto;
position: relative;
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: auto;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
&__left {
&::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url('@/assets/svgs/login-bg.svg');
background-position: center;
background-repeat: no-repeat;
content: '';
.bg-container {
position: fixed;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.grid-base {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 79, 176, 0.08) 1.5px, transparent 1.5px),
linear-gradient(90deg, rgba(0, 79, 176, 0.08) 1.5px, transparent 1.5px);
background-size: var(--grid-size) var(--grid-size);
}
.blob {
position: absolute;
filter: blur(80px);
opacity: 0.5;
border-radius: 50%;
z-index: 1;
}
.blob-1 {
width: 700px;
height: 700px;
background: #9ec9ff;
top: -15%;
left: -5%;
}
.blob-2 {
width: 600px;
height: 600px;
background: #7fb4ff;
bottom: -15%;
right: -5%;
}
.flow-line {
position: absolute;
background: linear-gradient(90deg, transparent, #4388e4, transparent);
z-index: 2;
border-radius: 2px;
opacity: 0.6;
}
.h-line {
height: 1.5px;
width: 150px;
animation: h-move 7s linear infinite;
}
.v-line {
width: 1.5px;
height: 150px;
background: linear-gradient(180deg, transparent, #4388e4, transparent);
animation: v-move 9s linear infinite;
}
@keyframes h-move {
0% {
transform: translateX(0);
opacity: 0;
}
10%,
90% {
opacity: 0.8;
}
100% {
transform: translateX(100vw);
opacity: 0;
}
}
@keyframes v-move {
0% {
transform: translateY(0);
opacity: 0;
}
10%,
90% {
opacity: 0.8;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
.login-header-actions {
position: fixed;
top: 20px;
right: 24px;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
}
.container {
position: relative;
z-index: 10;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 80px 40px 100px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.left-panel {
flex: 1.3;
padding-top: 10px;
}
.brand-box {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.logo-main {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #0052d4, #4364f7);
border-radius: 14px;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 82, 212, 0.2);
}
.logo-svg {
width: 40px;
height: 40px;
fill: white;
}
.brand-name {
font-size: 42px;
font-weight: 900;
color: var(--primary-blue);
letter-spacing: -1px;
}
.sub-title {
font-size: 24px;
font-weight: 600;
color: #222;
margin-bottom: 25px;
padding-left: 5px;
}
.desc {
color: #5c6e82;
font-size: 15px;
max-width: 500px;
line-height: 1.8;
margin-bottom: 50px;
padding-left: 5px;
}
.features {
display: grid;
grid-template-columns: repeat(2, 260px);
gap: 20px;
padding-left: 5px;
}
.feature-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 1px solid white;
padding: 18px 22px;
border-radius: 15px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
transition: 0.3s;
color: #333;
}
.feature-card:hover {
transform: translateY(-5px);
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.icon-box {
width: 36px;
height: 36px;
background: #2a5fb2;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.icon-box svg {
width: 20px;
height: 20px;
fill: white;
}
.right-panel {
flex: 0.7;
display: flex;
justify-content: flex-end;
}
.login-card {
width: 420px;
background: var(--glass);
backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 40px;
padding: 50px 45px;
box-shadow: 0 40px 80px rgba(0, 79, 176, 0.12);
}
.footer {
position: fixed;
bottom: 30px;
left: 0;
right: 0;
text-align: center;
font-size: 13px;
color: #94a3b8;
z-index: 10;
}
@media (max-width: 1200px) {
.container {
flex-direction: column;
align-items: center;
}
.left-panel {
max-width: 600px;
}
.right-panel {
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.brand-name {
font-size: 32px;
}
.sub-title {
font-size: 20px;
}
.features {
grid-template-columns: 1fr;
}
.login-card {
width: 100%;
max-width: 420px;
padding: 40px 30px;
}
}
</style>
<!-- 暗色主题下字体颜色跟随反转 -->
<style lang="scss">
.dark .login-page {
.brand-name {
color: var(--el-color-primary-light-3);
}
.sub-title {
color: var(--el-text-color-primary);
}
.desc {
color: var(--el-text-color-regular);
}
.feature-card {
color: var(--el-text-color-primary);
background: var(--el-fill-color-light);
border-color: var(--el-border-color);
&:hover {
background: var(--el-bg-color);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
}
}
</style>
<style lang="scss">
.dark .login-form {
.el-divider__text {
background-color: var(--login-bg-color);
.login-card {
background: var(--el-bg-color-overlay);
border-color: var(--el-border-color);
}
.el-card {
background-color: var(--login-bg-color);
.footer {
color: var(--el-text-color-placeholder);
}
}
</style>