mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-21.04.01:修复雪花屏loading不同步主题颜色的问题'
This commit is contained in:
parent
d2d5fffe60
commit
641ace768c
@ -13,7 +13,6 @@
|
|||||||
content="vue-next-admin,基于 vue3 + CompositionAPI + typescript + vite + element plus,适配手机、平板、pc 的后台开源免费管理系统模板!"
|
content="vue-next-admin,基于 vue3 + CompositionAPI + typescript + vite + element plus,适配手机、平板、pc 的后台开源免费管理系统模板!"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="stylesheet" type="text/css" href="/loading.css" />
|
|
||||||
<title>vue-next-admin</title>
|
<title>vue-next-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -1 +0,0 @@
|
|||||||
.loading-next{width:100%;height:100%}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-next .loading-next-box-warp{width:80px;height:80px}.loading-next .loading-next-box-warp .loading-next-box-item{width:33.333333%;height:33.333333%;background-color:#409eff;float:left;animation:loading-next-animation 1.2s infinite ease;border-radius:1px}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7){animation-delay:0s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8){animation-delay:.1s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9){animation-delay:.2s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6){animation-delay:.3s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3){animation-delay:.4s}@keyframes loading-next-animation{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}
|
|
51
src/theme/loading.scss
Normal file
51
src/theme/loading.scss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
.loading-next {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item {
|
||||||
|
width: 33.333333%;
|
||||||
|
height: 33.333333%;
|
||||||
|
background: var(--color-primary);
|
||||||
|
float: left;
|
||||||
|
animation: loading-next-animation 1.2s infinite ease;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
@keyframes loading-next-animation {
|
||||||
|
0%,
|
||||||
|
70%,
|
||||||
|
100% {
|
||||||
|
transform: scale3D(1, 1, 1);
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
transform: scale3D(0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
@ -1,7 +1,16 @@
|
|||||||
import { nextTick } from 'vue';
|
import { nextTick } from 'vue';
|
||||||
|
import loadingCss from '/@/theme/loading.scss';
|
||||||
|
|
||||||
// 定义方法
|
// 定义方法
|
||||||
export const NextLoading = {
|
export const NextLoading = {
|
||||||
|
// 载入 css
|
||||||
|
setCss: () => {
|
||||||
|
let link = document.createElement('link');
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = loadingCss;
|
||||||
|
link.crossOrigin = 'anonymous';
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
},
|
||||||
// 创建 loading
|
// 创建 loading
|
||||||
start: () => {
|
start: () => {
|
||||||
const bodys: any = document.body;
|
const bodys: any = document.body;
|
||||||
|
Loading…
Reference in New Issue
Block a user