106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted } from 'vue';
|
|
import useAppStore from '@/store/modules/app';
|
|
import { parseUrlPath } from '@/plugins/file-static-url';
|
|
import {
|
|
currentComponent,
|
|
fnGetLoginSource,
|
|
} from '@/views/login/hooks/useLoginSource';
|
|
const appStore = useAppStore();
|
|
|
|
// 判断是否有背景地址
|
|
const calcBG = computed(() => {
|
|
const bgURL = parseUrlPath(appStore.loginBackground);
|
|
if (bgURL && bgURL !== '#') {
|
|
return {
|
|
backgroundImage: `url('${bgURL}')`,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
|
|
onMounted(() => {
|
|
// 获取登录认证源
|
|
fnGetLoginSource();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" :style="calcBG">
|
|
<section v-show="!calcBG">
|
|
<div class="animation animation1"></div>
|
|
<div class="animation animation2"></div>
|
|
<div class="animation animation3"></div>
|
|
<div class="animation animation4"></div>
|
|
<div class="animation animation5"></div>
|
|
</section>
|
|
|
|
<component :is="currentComponent" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
padding-top: 164px;
|
|
|
|
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
|
|
|
background-image: url(/background/light.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
.animation {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #1be1f6;
|
|
|
|
&.animation1 {
|
|
left: 15%;
|
|
top: 70%;
|
|
animation: slashStar 2s ease-in-out 0.3s infinite;
|
|
}
|
|
&.animation2 {
|
|
left: 34%;
|
|
top: 35%;
|
|
animation: slashStar 2s ease-in-out 1.2s infinite;
|
|
}
|
|
&.animation3 {
|
|
left: 10%;
|
|
top: 8%;
|
|
animation: slashStar 2s ease-in-out 0.5s infinite;
|
|
}
|
|
&.animation4 {
|
|
left: 68%;
|
|
top: 68%;
|
|
animation: slashStar 2s ease-in-out 0.8s infinite;
|
|
}
|
|
&.animation5 {
|
|
left: 87%;
|
|
top: 30%;
|
|
animation: slashStar 2s ease-in-out 1.5s infinite;
|
|
}
|
|
}
|
|
@keyframes slashStar {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-theme='dark'] .container {
|
|
background-image: url(/background/dark.jpg);
|
|
background-color: #141414;
|
|
}
|
|
</style>
|