mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.04.01:修复雪花屏loading不同步主题颜色的问题'

Browse Source
This commit is contained in:
lyt-Top 2021-04-01 20:18:27 +08:00
parent d2d5fffe60
commit 641ace768c
4 changed files with 60 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -13,7 +13,6 @@
content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！"
/>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/loading.css" />
<title>vue-next-admin</title>
</head>
<body>

1
public/loading.css
View File

@ -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
View 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);
}
}

9
src/utils/loading.ts
View File

@ -1,7 +1,16 @@
import { nextTick } from 'vue';
import loadingCss from '/@/theme/loading.scss';
// 定义方法
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
start: () => {
const bodys: any = document.body;