feat(ui06): B1 theme tokens + layout shell + login redesign
- 主色 #1A73E8（systemMainColor 首位，运行时自动派生 Element 系列） - 状态色对齐示例（success #15966d / warning #c78a27 / danger #df5366） - 侧栏 216px、顶栏 64px（h-16）、内容 max-width 1660px（WIDE 枚举）、隐藏标签页条 - 菜单分组（工作空间/组织与治理）：meta.menuGroup + 侧栏展平渲染 + i18n key；路由路径与权限不变 - ui06.scss 全局视觉层：字体栈 13px、卡片 12px 圆角+1px 边框、按钮/输入 38px、 表格浅底表头、对话框 16px、分段 #edf1f7、焦点可见 - 登录页重做：摄影底+深蓝叠层+品牌大标题（占位素材=概念图裁片，待正式品牌素材）、 右栏 350px 表单 29px 标题 - typecheck/lint/vitest 87 项全绿 Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -7,14 +7,14 @@
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="relative box-border flex-b h-15 leading-15 select-none"
|
||||
class="relative box-border flex-b h-16 leading-16 select-none"
|
||||
:class="[
|
||||
tabStyle === 'tab-card' || tabStyle === 'tab-google'
|
||||
? 'border-b border-[var(--art-card-border)]'
|
||||
: ''
|
||||
]"
|
||||
>
|
||||
<div class="flex-c flex-1 min-w-0 leading-15" style="display: flex">
|
||||
<div class="flex-c flex-1 min-w-0 leading-16" style="display: flex">
|
||||
<!-- 系统信息 -->
|
||||
<div class="flex-c c-p" @click="toHome" v-if="isTopMenu">
|
||||
<ArtLogo class="pl-4.5" />
|
||||
|
||||
@@ -99,7 +99,34 @@
|
||||
:show-timeout="50"
|
||||
:hide-timeout="50"
|
||||
>
|
||||
<!-- UI06：普通左侧菜单按 meta.menuGroup 展平分组（示例侧栏结构） -->
|
||||
<template v-if="isGroupedMode">
|
||||
<ElMenuItem v-for="item in flatMenuItems.ungrouped" :key="item.path" :index="item.path">
|
||||
<div class="menu-icon flex-cc">
|
||||
<ArtSvgIcon
|
||||
:icon="item.meta.icon"
|
||||
:color="getMenuTheme.iconColor"
|
||||
:style="{ color: getMenuTheme.iconColor }"
|
||||
/>
|
||||
</div>
|
||||
<template #title>{{ $t(item.meta.title) }}</template>
|
||||
</ElMenuItem>
|
||||
<template v-for="group in flatMenuItems.groups" :key="group.label">
|
||||
<li v-if="menuOpen" class="ui06-menu-group-label">{{ $t(group.label) }}</li>
|
||||
<ElMenuItem v-for="item in group.items" :key="item.path" :index="item.path">
|
||||
<div class="menu-icon flex-cc">
|
||||
<ArtSvgIcon
|
||||
:icon="item.meta.icon"
|
||||
:color="getMenuTheme.iconColor"
|
||||
:style="{ color: getMenuTheme.iconColor }"
|
||||
/>
|
||||
</div>
|
||||
<template #title>{{ $t(item.meta.title) }}</template>
|
||||
</ElMenuItem>
|
||||
</template>
|
||||
</template>
|
||||
<SidebarSubmenu
|
||||
v-else
|
||||
:list="menuList"
|
||||
:isMobile="isMobileMode"
|
||||
:theme="getMenuTheme"
|
||||
@@ -133,6 +160,7 @@
|
||||
import { useSettingStore } from '@/store/modules/setting'
|
||||
import { MenuTypeEnum, MenuWidth } from '@/enums/appEnum'
|
||||
import { useMenuStore } from '@/store/modules/menu'
|
||||
import type { AppRouteRecord } from '@/types/router'
|
||||
import { isIframe } from '@/utils/navigation'
|
||||
import { handleMenuJump } from '@/utils/navigation'
|
||||
import SidebarSubmenu from './widget/SidebarSubmenu.vue'
|
||||
@@ -171,6 +199,42 @@
|
||||
)
|
||||
const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU)
|
||||
|
||||
// UI06：普通左侧菜单启用分组展平渲染（meta.menuGroup 驱动；双列/顶部菜单不受影响）
|
||||
const isGroupedMode = computed(() => menuType.value === MenuTypeEnum.LEFT)
|
||||
const MENU_GROUP_ORDER = ['menus.group.workspace', 'menus.group.governance'] as const
|
||||
|
||||
const flatMenuItems = computed(() => {
|
||||
const groups: { label: string; items: AppRouteRecord[] }[] = []
|
||||
const ungrouped: AppRouteRecord[] = []
|
||||
const pushToGroup = (label: string, item: AppRouteRecord) => {
|
||||
let bucket = groups.find((g) => g.label === label)
|
||||
if (!bucket) {
|
||||
bucket = { label, items: [] }
|
||||
groups.push(bucket)
|
||||
}
|
||||
bucket.items.push(item)
|
||||
}
|
||||
for (const top of useMenuStore().menuList) {
|
||||
if (top.meta?.isHide) continue
|
||||
const visibleChildren = (top.children ?? []).filter((c) => !c.meta?.isHide)
|
||||
if (visibleChildren.length > 0) {
|
||||
for (const child of visibleChildren) {
|
||||
const g = child.meta?.menuGroup
|
||||
if (g) pushToGroup(`menus.group.${g}`, child)
|
||||
else ungrouped.push(child)
|
||||
}
|
||||
} else {
|
||||
const g = top.meta?.menuGroup
|
||||
if (g) pushToGroup(`menus.group.${g}`, top)
|
||||
else ungrouped.push(top)
|
||||
}
|
||||
}
|
||||
groups.sort(
|
||||
(a, b) => MENU_GROUP_ORDER.indexOf(a.label as any) - MENU_GROUP_ORDER.indexOf(b.label as any)
|
||||
)
|
||||
return { groups, ungrouped }
|
||||
})
|
||||
|
||||
// 移动端屏幕判断（使用 computed 避免重复计算）
|
||||
const isMobileScreen = computed(() => width.value < MOBILE_BREAKPOINT)
|
||||
|
||||
@@ -340,6 +404,21 @@
|
||||
<style lang="scss">
|
||||
@use './theme';
|
||||
|
||||
/* UI06：菜单分组标签（示例 .group-label） */
|
||||
.el-menu .ui06-menu-group-label {
|
||||
padding: 0;
|
||||
margin: 26px 13px 10px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.5px;
|
||||
color: #9ba8ba;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
// 展开的宽度
|
||||
.el-menu:not(.el-menu--collapse) {
|
||||
|
||||
@@ -1,602 +1,122 @@
|
||||
<!-- 登录、注册、忘记密码左侧背景 -->
|
||||
<!-- 登录、注册、忘记密码左侧视觉（UI06：对齐 admin-preview 示例 01——摄影底 + 深蓝叠层 + 品牌与大标题） -->
|
||||
<template>
|
||||
<div class="login-left-view">
|
||||
<div class="logo">
|
||||
<ArtLogo class="icon" size="46" />
|
||||
<h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
|
||||
<!-- 摄影底层（占位素材：概念图裁片，待正式品牌素材替换） -->
|
||||
<img class="visual-photo" :src="loginVisual" alt="" draggable="false" />
|
||||
<div class="visual-shade" />
|
||||
|
||||
<!-- 顶部品牌 -->
|
||||
<div class="brand">
|
||||
<ArtLogo class="icon" size="29" />
|
||||
<span class="name">{{ AppConfig.systemInfo.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="left-img">
|
||||
<ThemeSvg :src="loginIcon" size="100%" />
|
||||
</div>
|
||||
|
||||
<div class="text-wrap">
|
||||
<h1> {{ $t('login.leftView.title') }} </h1>
|
||||
<p> {{ $t('login.leftView.subTitle') }} </p>
|
||||
</div>
|
||||
|
||||
<!-- 几何装饰元素 -->
|
||||
<div class="geometric-decorations">
|
||||
<!-- 基础几何形状 -->
|
||||
<div class="geo-element circle-outline animate-fade-in-up" style="animation-delay: 0s"></div>
|
||||
<div
|
||||
class="geo-element square-rotated animate-fade-in-left"
|
||||
style="animation-delay: 0s"
|
||||
></div>
|
||||
<div class="geo-element circle-small animate-fade-in-up" style="animation-delay: 0.3s"></div>
|
||||
|
||||
<div
|
||||
class="geo-element square-bottom-right animate-fade-in-right"
|
||||
style="animation-delay: 0s"
|
||||
></div>
|
||||
|
||||
<!-- 背景泡泡 -->
|
||||
<div class="geo-element bg-bubble animate-scale-in" style="animation-delay: 0.5"></div>
|
||||
|
||||
<!-- 太阳/月亮 -->
|
||||
<div
|
||||
class="geo-element circle-top-right animate-fade-in-down"
|
||||
style="animation-delay: 0.5"
|
||||
@click="themeAnimation"
|
||||
></div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="geo-element dot dot-top-left animate-bounce-in" style="animation-delay: 0s"></div>
|
||||
<div
|
||||
class="geo-element dot dot-top-right animate-bounce-in"
|
||||
style="animation-delay: 0s"
|
||||
></div>
|
||||
<div
|
||||
class="geo-element dot dot-center-right animate-bounce-in"
|
||||
style="animation-delay: 0s"
|
||||
></div>
|
||||
|
||||
<!-- 叠加方块组 -->
|
||||
<div class="squares-group">
|
||||
<i
|
||||
class="geo-element square square-blue animate-fade-in-left-rotated-blue"
|
||||
style="animation-delay: 0.2s"
|
||||
></i>
|
||||
<i
|
||||
class="geo-element square square-pink animate-fade-in-left-rotated-pink"
|
||||
style="animation-delay: 0.4s"
|
||||
></i>
|
||||
<i
|
||||
class="geo-element square square-purple animate-fade-in-left-no-rotation"
|
||||
style="animation-delay: 0.6s"
|
||||
></i>
|
||||
</div>
|
||||
<!-- 底部大标题文案 -->
|
||||
<div class="copy">
|
||||
<h1>{{ $t('login.leftView.title') }}</h1>
|
||||
<p>{{ $t('login.leftView.subTitle') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppConfig from '@/config'
|
||||
import loginIcon from '@imgs/svg/login_icon.svg'
|
||||
import { themeAnimation } from '@/utils/ui/animation'
|
||||
import loginVisual from '@imgs/ui06-login-visual.jpg'
|
||||
|
||||
// 定义 props
|
||||
defineProps<{
|
||||
hideContent?: boolean // 是否隐藏内容，只显示 logo
|
||||
hideContent?: boolean // 是否隐藏内容，只显示 logo（沿用原组件契约）
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 颜色变量定义
|
||||
$primary-light-7: var(--el-color-primary-light-7);
|
||||
$primary-light-8: var(--el-color-primary-light-8);
|
||||
$primary-light-9: var(--el-color-primary-light-9);
|
||||
$primary-base: var(--el-color-primary);
|
||||
$main-bg: var(--default-box-color);
|
||||
|
||||
// 混合颜色函数
|
||||
$bg-mix-light-9: color-mix(in srgb, $primary-light-9 100%, $main-bg);
|
||||
$bg-mix-light-8: color-mix(in srgb, $primary-light-8 80%, $main-bg);
|
||||
$bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
|
||||
|
||||
.login-left-view {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 65vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 55vw;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
padding: 50px;
|
||||
overflow: hidden;
|
||||
background-color: $bg-mix-light-9;
|
||||
background: #12233e; /* 示例 login-visual 底色 */
|
||||
|
||||
.logo {
|
||||
/* 摄影层：cover 铺满 + 40% 不透明度（示例 .art opacity .4） */
|
||||
.visual-photo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 底部渐变（示例 :after linear-gradient(#13264110, #0d1c35e8)） */
|
||||
.visual-shade {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(#13264110, #0d1c35e8);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 品牌（白字，位于摄影层之上） */
|
||||
.brand {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
.name {
|
||||
font-size: 22px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-img {
|
||||
position: absolute;
|
||||
inset: 0 0 10.5%;
|
||||
z-index: 10;
|
||||
width: 40%;
|
||||
margin: auto;
|
||||
animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
/* 大标题文案（46px 白字 + 13px 副文，示例 login-copy） */
|
||||
.copy {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 480px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: var(--art-gray-900) !important;
|
||||
font-size: 46px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--art-gray-600) !important;
|
||||
max-width: 400px;
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
color: #bfd0e5;
|
||||
}
|
||||
}
|
||||
|
||||
.geometric-decorations {
|
||||
.geo-element {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
// 动画 mixin
|
||||
@mixin fadeAnimation($direction: '', $rotation: 0deg) {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
||||
@if $direction == 'up' {
|
||||
transform: translateY(30px) rotate($rotation);
|
||||
} @else if $direction == 'down' {
|
||||
transform: translateY(-30px) rotate($rotation);
|
||||
} @else if $direction == 'left' {
|
||||
transform: translateX(-30px) rotate($rotation);
|
||||
} @else if $direction == 'right' {
|
||||
transform: translateX(30px) rotate($rotation);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
|
||||
@if $direction == 'up' or $direction == 'down' {
|
||||
transform: translateY(0) rotate($rotation);
|
||||
} @else {
|
||||
transform: translateX(0) rotate($rotation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes fadeInUp {
|
||||
@include fadeAnimation('up');
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
@include fadeAnimation('down');
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
@include fadeAnimation('left');
|
||||
}
|
||||
|
||||
@keyframes fadeInLeftRotated {
|
||||
@include fadeAnimation('left', -25deg);
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
@include fadeAnimation('right');
|
||||
}
|
||||
|
||||
@keyframes fadeInRightRotated {
|
||||
@include fadeAnimation('right', 45deg);
|
||||
}
|
||||
|
||||
@keyframes fadeInLeftRotatedBlue {
|
||||
@include fadeAnimation('left', -10deg);
|
||||
}
|
||||
|
||||
@keyframes fadeInLeftRotatedPink {
|
||||
@include fadeAnimation('left', 10deg);
|
||||
}
|
||||
|
||||
@keyframes fadeInLeftNoRotation {
|
||||
@include fadeAnimation('left');
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lineGrow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 动画类
|
||||
.animate-fade-in-up {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
.animate-fade-in-left {
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
.animate-fade-in-right {
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation-name: scaleIn;
|
||||
animation-duration: 1.2s;
|
||||
}
|
||||
|
||||
.animate-bounce-in {
|
||||
animation-name: bounceIn;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
.animate-fade-in-left-rotated-blue {
|
||||
animation-name: fadeInLeftRotatedBlue;
|
||||
}
|
||||
|
||||
.animate-fade-in-left-rotated-pink {
|
||||
animation-name: fadeInLeftRotatedPink;
|
||||
}
|
||||
|
||||
.animate-fade-in-left-no-rotation {
|
||||
animation-name: fadeInLeftNoRotation;
|
||||
}
|
||||
|
||||
// 基础几何形状
|
||||
.circle-outline {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 2px solid $primary-light-8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.square-rotated {
|
||||
top: 50%;
|
||||
left: 16%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: $bg-mix-light-8;
|
||||
|
||||
&.animate-fade-in-left {
|
||||
animation-name: fadeInLeftRotated;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-small {
|
||||
bottom: 26%;
|
||||
left: 30%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: $primary-light-8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 太阳/月亮效果
|
||||
.circle-top-right {
|
||||
top: 3%;
|
||||
right: 3%;
|
||||
z-index: 100;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
background: $bg-mix-light-7;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: linear-gradient(to right, #fcbb04, #fffc00);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 36px #fffc00;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.square-bottom-right {
|
||||
right: 10%;
|
||||
bottom: 10%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: $primary-light-8;
|
||||
|
||||
&.animate-fade-in-right {
|
||||
animation-name: fadeInRightRotated;
|
||||
}
|
||||
}
|
||||
|
||||
// 背景泡泡
|
||||
.bg-bubble {
|
||||
top: -120px;
|
||||
right: -120px;
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background-color: $bg-mix-light-8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// 装饰点
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: $primary-light-7;
|
||||
border-radius: 50%;
|
||||
|
||||
&.dot-top-left {
|
||||
top: 140px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
&.dot-top-right {
|
||||
top: 140px;
|
||||
right: 120px;
|
||||
}
|
||||
|
||||
&.dot-center-right {
|
||||
top: 46%;
|
||||
right: 22%;
|
||||
background-color: $primary-light-8;
|
||||
}
|
||||
}
|
||||
|
||||
// 叠加方块组
|
||||
.squares-group {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 20px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
pointer-events: none;
|
||||
|
||||
.square {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgb(64 87 167 / 12%);
|
||||
|
||||
&.square-blue {
|
||||
top: 12px;
|
||||
left: 30px;
|
||||
z-index: 2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgb(from $primary-base r g b / 30%);
|
||||
}
|
||||
|
||||
&.square-pink {
|
||||
top: 30px;
|
||||
left: 48px;
|
||||
z-index: 1;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgb(from $primary-base r g b / 15%);
|
||||
}
|
||||
|
||||
&.square-purple {
|
||||
top: 66px;
|
||||
left: 86px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: rgb(from $primary-base r g b / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
// 装饰线条
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
left: 72px;
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(90deg, var(--el-color-primary-light-6), transparent);
|
||||
opacity: 0;
|
||||
transform: rotate(50deg);
|
||||
animation: lineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 1600px) {
|
||||
width: 60vw;
|
||||
|
||||
.text-wrap {
|
||||
bottom: 40px;
|
||||
}
|
||||
/* 暗色主题：底色一致，无需额外处理 */
|
||||
&.dark {
|
||||
background: #0d1c35;
|
||||
}
|
||||
|
||||
@media only screen and (width <= 1180px) {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
// 隐藏背景和其他内容，只保留 logo
|
||||
background: transparent;
|
||||
|
||||
.left-img,
|
||||
.text-wrap,
|
||||
.geometric-decorations {
|
||||
.visual-photo,
|
||||
.visual-shade,
|
||||
.copy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色主题
|
||||
.dark .login-left-view {
|
||||
background-color: color-mix(in srgb, $primary-light-9 60%, #070707);
|
||||
|
||||
@media only screen and (width <= 1180px) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.geometric-decorations {
|
||||
// 月亮效果
|
||||
.circle-top-right {
|
||||
background-color: $bg-mix-light-8;
|
||||
box-shadow: 0 0 25px #333 inset;
|
||||
transition: all 0.3s ease-in-out 0.1s;
|
||||
rotate: -48deg;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
content: '';
|
||||
background-color: $bg-mix-light-9;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: 0 40px 25px #ddd inset;
|
||||
|
||||
&::before {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-bubble {
|
||||
background-color: $bg-mix-light-9;
|
||||
}
|
||||
|
||||
// 其他元素颜色调整
|
||||
.square-rotated {
|
||||
background-color: $bg-mix-light-9;
|
||||
}
|
||||
|
||||
.circle-small,
|
||||
.dot {
|
||||
background-color: $primary-light-8;
|
||||
}
|
||||
|
||||
.square-bottom-right {
|
||||
background-color: $primary-light-9;
|
||||
}
|
||||
|
||||
.dot.dot-top-right {
|
||||
background-color: $primary-light-8;
|
||||
}
|
||||
}
|
||||
|
||||
// 方块组暗色调整
|
||||
.squares-group {
|
||||
.square {
|
||||
box-shadow: none;
|
||||
|
||||
&.square-blue {
|
||||
background-color: rgb(from $primary-base r g b / 18%);
|
||||
}
|
||||
|
||||
&.square-pink {
|
||||
background-color: rgb(from $primary-base r g b / 10%);
|
||||
}
|
||||
|
||||
&.square-purple {
|
||||
background-color: rgb(from $primary-base r g b / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(90deg, $primary-light-8, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user