616 lines
12 KiB
Vue
616 lines
12 KiB
Vue
<!-- 登录、注册、忘记密码左侧背景 -->
|
|
<template>
|
|
<div class="login-left-view">
|
|
<div class="logo">
|
|
<ArtLogo class="icon" size="46" />
|
|
<h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import AppConfig from '@/config'
|
|
import loginIcon from '@imgs/svg/login_icon.svg'
|
|
import { themeAnimation } from '@/utils/ui/animation'
|
|
|
|
// 定义 props
|
|
defineProps<{
|
|
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;
|
|
height: 100%;
|
|
padding: 15px;
|
|
overflow: hidden;
|
|
background-color: $bg-mix-light-9;
|
|
|
|
.logo {
|
|
position: relative;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-left: 10px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: var(--art-gray-900) !important;
|
|
}
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: var(--art-gray-600) !important;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media only screen and (width <= 1180px) {
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
// 隐藏背景和其他内容，只保留 logo
|
|
background: transparent;
|
|
|
|
.left-img,
|
|
.text-wrap,
|
|
.geometric-decorations {
|
|
display: none;
|
|
}
|
|
|
|
.logo {
|
|
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>
|