Skip to content

Commit ebcd929

Browse files
cq-pandacq-panda
committed
修改页面加载样式，修改文件index.html,App.vue
1 parent 67bc3e8 commit ebcd929

File tree

4 files changed

+230
-40
lines changed

4 files changed

+230
-40
lines changed

‎Vol.Vue/index.html‎

Lines changed: 105 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,113 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1010
<title>vol-vue</title>
1111
<style type="text/css">
12-
#vue-loading{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity 0.65s;}#vue-loading .loading-message{font-size:20px;}.loading-container-hidden-add{opacity:1;display:block;}.loading-container-hidden-add-active{opacity:0;}.loading-container-hidden{display:none;}.loading-box{position:absolute;top:0;left:0;height:100%;width:100%;}.loading-box-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center;}.loading-box-inner label{font-size:20px;opacity:0;display:inline-block;}@keyframes lol{0%{opacity:0;transform:translateX(-300px);}33%{opacity:1;transform:translateX(0);}66%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(300px);}}.loading-box-inner label:nth-child(6){animation:lol 3s infinite ease-in-out;}.loading-box-inner label:nth-child(5){animation:lol 3s 0.1s infinite ease-in-out;}.loading-box-inner label:nth-child(4){animation:lol 3s 0.2s infinite ease-in-out;}.loading-box-inner label:nth-child(3){animation:lol 3s 0.3s infinite ease-in-out;}.loading-box-inner label:nth-child(2){animation:lol 3s 0.4s infinite ease-in-out;}.loading-box-inner label:nth-child(1){animation:lol 3s 0.5s infinite ease-in-out;}
12+
#loading-container {
13+
position: fixed;
14+
left: 0;
15+
top: 0;
16+
height: 100%;
17+
width: 100%;
18+
background: #fff;
19+
user-select: none;
20+
z-index: 9999;
21+
overflow: hidden
22+
}
23+
24+
.loading-wrapper {
25+
position: absolute;
26+
top: 50%;
27+
left: 50%;
28+
transform: translate(-50%, -100%)
29+
}
30+
31+
.loading-dot {
32+
animation: antRotate 1.2s infinite linear;
33+
transform: rotate(45deg);
34+
position: relative;
35+
display: inline-block;
36+
font-size: 64px;
37+
width: 64px;
38+
height: 64px;
39+
box-sizing: border-box
40+
}
41+
42+
.loading-dot i {
43+
width: 20px;
44+
height: 20px;
45+
position: absolute;
46+
display: block;
47+
background-color: #008dff;
48+
border-radius: 100%;
49+
transform: scale(.75);
50+
transform-origin: 50% 50%;
51+
opacity: .3;
52+
animation: antSpinMove 1s infinite linear alternate
53+
}
54+
55+
.loading-dot i:nth-child(1) {
56+
top: 0;
57+
left: 0
58+
}
59+
60+
.loading-dot i:nth-child(2) {
61+
top: 0;
62+
right: 0;
63+
-webkit-animation-delay: .4s;
64+
animation-delay: .4s
65+
}
66+
67+
.loading-dot i:nth-child(3) {
68+
right: 0;
69+
bottom: 0;
70+
-webkit-animation-delay: .8s;
71+
animation-delay: .8s
72+
}
73+
74+
.loading-dot i:nth-child(4) {
75+
bottom: 0;
76+
left: 0;
77+
-webkit-animation-delay: 1.2s;
78+
animation-delay: 1.2s
79+
}
80+
81+
@keyframes antRotate {
82+
to {
83+
-webkit-transform: rotate(405deg);
84+
transform: rotate(405deg)
85+
}
86+
}
87+
88+
@-webkit-keyframes antRotate {
89+
to {
90+
-webkit-transform: rotate(405deg);
91+
transform: rotate(405deg)
92+
}
93+
}
94+
95+
@keyframes antSpinMove {
96+
to {
97+
opacity: 1
98+
}
99+
}
100+
101+
@-webkit-keyframes antSpinMove {
102+
to {
103+
opacity: 1
104+
}
105+
}
106+
13107
</style>
14108
</head>
15109

16110
<body style="margin: 0px;">
17-
<div class="loading-container" id="vue-loading">
18-
<div class="loading-box">
19-
<div class="loading-box-inner">
20-
<div class="loading-message">
21-
<div>正在加载资源,请稍后...</div>
22-
</div>
23-
<label>●</label>
24-
<label>●</label>
25-
<label>●</label>
26-
<label>●</label>
27-
<label>●</label>
28-
<label>●</label>
29-
</div>
111+
<div id="loading-container">
112+
<div class="loading-wrapper">
113+
<span class="loading-dot loading-spin">
114+
<i></i>
115+
<i></i>
116+
<i></i>
117+
<i></i>
118+
</span>
30119
</div>
31120
</div>
32121
<div id="app"></div>
@@ -40,4 +129,5 @@
40129
#app {
41130
height: 100%;
42131
}
43-
</style>
132+
133+
</style>

‎Vol.Vue/src/App.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
import "./assets/css/common.less";
99
export default {
1010
name: "App",
11-
created() {
12-
document.getElementById("vue-loading").style.display = "none";
11+
created () {
12+
13+
},
14+
mounted () {
15+
document.getElementById("loading-container").style.display = "none";
1316
}
1417
};
1518
</script>
@@ -18,11 +21,13 @@ export default {
1821
.el-loading {
1922
z-index: 999999;
2023
}
21-
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
22-
/* .el-table th.gutter{
24+
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
25+
/* .el-table th.gutter{
2326
display: table-cell !important;
2427
} */
25-
.el-table th { display: table-cell!important; }
28+
.el-table th {
29+
display: table-cell !important;
30+
}
2631
.el-loading .el-loading-spinner {
2732
padding: 7px;
2833
background: #ececec;

‎开发版dev/Vue.NetCore/Vol.Vue/index.html‎

Lines changed: 105 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,113 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1010
<title>vol-vue</title>
1111
<style type="text/css">
12-
#vue-loading{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity 0.65s;}#vue-loading .loading-message{font-size:20px;}.loading-container-hidden-add{opacity:1;display:block;}.loading-container-hidden-add-active{opacity:0;}.loading-container-hidden{display:none;}.loading-box{position:absolute;top:0;left:0;height:100%;width:100%;}.loading-box-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center;}.loading-box-inner label{font-size:20px;opacity:0;display:inline-block;}@keyframes lol{0%{opacity:0;transform:translateX(-300px);}33%{opacity:1;transform:translateX(0);}66%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(300px);}}.loading-box-inner label:nth-child(6){animation:lol 3s infinite ease-in-out;}.loading-box-inner label:nth-child(5){animation:lol 3s 0.1s infinite ease-in-out;}.loading-box-inner label:nth-child(4){animation:lol 3s 0.2s infinite ease-in-out;}.loading-box-inner label:nth-child(3){animation:lol 3s 0.3s infinite ease-in-out;}.loading-box-inner label:nth-child(2){animation:lol 3s 0.4s infinite ease-in-out;}.loading-box-inner label:nth-child(1){animation:lol 3s 0.5s infinite ease-in-out;}
12+
#loading-container {
13+
position: fixed;
14+
left: 0;
15+
top: 0;
16+
height: 100%;
17+
width: 100%;
18+
background: #fff;
19+
user-select: none;
20+
z-index: 9999;
21+
overflow: hidden
22+
}
23+
24+
.loading-wrapper {
25+
position: absolute;
26+
top: 50%;
27+
left: 50%;
28+
transform: translate(-50%, -100%)
29+
}
30+
31+
.loading-dot {
32+
animation: antRotate 1.2s infinite linear;
33+
transform: rotate(45deg);
34+
position: relative;
35+
display: inline-block;
36+
font-size: 64px;
37+
width: 64px;
38+
height: 64px;
39+
box-sizing: border-box
40+
}
41+
42+
.loading-dot i {
43+
width: 20px;
44+
height: 20px;
45+
position: absolute;
46+
display: block;
47+
background-color: #008dff;
48+
border-radius: 100%;
49+
transform: scale(.75);
50+
transform-origin: 50% 50%;
51+
opacity: .3;
52+
animation: antSpinMove 1s infinite linear alternate
53+
}
54+
55+
.loading-dot i:nth-child(1) {
56+
top: 0;
57+
left: 0
58+
}
59+
60+
.loading-dot i:nth-child(2) {
61+
top: 0;
62+
right: 0;
63+
-webkit-animation-delay: .4s;
64+
animation-delay: .4s
65+
}
66+
67+
.loading-dot i:nth-child(3) {
68+
right: 0;
69+
bottom: 0;
70+
-webkit-animation-delay: .8s;
71+
animation-delay: .8s
72+
}
73+
74+
.loading-dot i:nth-child(4) {
75+
bottom: 0;
76+
left: 0;
77+
-webkit-animation-delay: 1.2s;
78+
animation-delay: 1.2s
79+
}
80+
81+
@keyframes antRotate {
82+
to {
83+
-webkit-transform: rotate(405deg);
84+
transform: rotate(405deg)
85+
}
86+
}
87+
88+
@-webkit-keyframes antRotate {
89+
to {
90+
-webkit-transform: rotate(405deg);
91+
transform: rotate(405deg)
92+
}
93+
}
94+
95+
@keyframes antSpinMove {
96+
to {
97+
opacity: 1
98+
}
99+
}
100+
101+
@-webkit-keyframes antSpinMove {
102+
to {
103+
opacity: 1
104+
}
105+
}
106+
13107
</style>
14108
</head>
15109

16110
<body style="margin: 0px;">
17-
<div class="loading-container" id="vue-loading">
18-
<div class="loading-box">
19-
<div class="loading-box-inner">
20-
<div class="loading-message">
21-
<div>正在加载资源,请稍后...</div>
22-
</div>
23-
<label>●</label>
24-
<label>●</label>
25-
<label>●</label>
26-
<label>●</label>
27-
<label>●</label>
28-
<label>●</label>
29-
</div>
111+
<div id="loading-container">
112+
<div class="loading-wrapper">
113+
<span class="loading-dot loading-spin">
114+
<i></i>
115+
<i></i>
116+
<i></i>
117+
<i></i>
118+
</span>
30119
</div>
31120
</div>
32121
<div id="app"></div>
@@ -40,4 +129,5 @@
40129
#app {
41130
height: 100%;
42131
}
43-
</style>
132+
133+
</style>

‎开发版dev/Vue.NetCore/Vol.Vue/src/App.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
import "./assets/css/common.less";
99
export default {
1010
name: "App",
11-
created() {
12-
document.getElementById("vue-loading").style.display = "none";
11+
created () {
12+
13+
},
14+
mounted () {
15+
document.getElementById("loading-container").style.display = "none";
1316
}
1417
};
1518
</script>
@@ -18,11 +21,13 @@ export default {
1821
.el-loading {
1922
z-index: 999999;
2023
}
21-
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
22-
/* .el-table th.gutter{
24+
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
25+
/* .el-table th.gutter{
2326
display: table-cell !important;
2427
} */
25-
.el-table th { display: table-cell!important; }
28+
.el-table th {
29+
display: table-cell !important;
30+
}
2631
.el-loading .el-loading-spinner {
2732
padding: 7px;
2833
background: #ececec;

0 commit comments

Comments
 (0)