xuyue/OnlineJudge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加loading；修改部分css

Browse Source
This commit is contained in:
LiYang
2016-07-31 22:40:52 +08:00
parent bcee7bca67
commit 0d5318b3e1
6 changed files with 583 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/admin/index.html
View File

@@ -5,6 +5,9 @@
<title>Online Judge Admin</title> <title>Online Judge Admin</title>
</head> </head>
<body> <body>
<div class="cssload-battery">
<div class="cssload-liquid"></div>
</div>
<div id="app"> <div id="app">
</div> </div>
</body> </body>

2
frontend/admin/package.json
View File

@@ -20,6 +20,7 @@
"babel-preset-es2015": "^6.0.0", "babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0", "babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0", "babel-register": "^6.0.0",
"codemirror": "^5.17.0",
"connect-history-api-fallback": "^1.1.0", "connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.23.0", "css-loader": "^0.23.0",
"eventsource-polyfill": "^0.9.6", "eventsource-polyfill": "^0.9.6",
@@ -42,6 +43,7 @@
"vue-resource": "^0.9.3", "vue-resource": "^0.9.3",
"vue-router": "^0.7.13", "vue-router": "^0.7.13",
"vue-style-loader": "^1.0.0", "vue-style-loader": "^1.0.0",
"vue-tagsinput": "^0.3.1",
"webpack": "^1.12.2", "webpack": "^1.12.2",
"webpack-dev-middleware": "^1.4.0", "webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0", "webpack-hot-middleware": "^2.6.0",

2
frontend/admin/src/App.vue
View File

@@ -22,8 +22,10 @@
</template> </template>
<style> <style>
@import "../../static/css/loading.css";
@import "../../static/css/bootstrap.css"; @import "../../static/css/bootstrap.css";
@import "../../static/css/todc-bootstrap.css"; @import "../../static/css/todc-bootstrap.css";
</style> </style>
<script> <script>

3
frontend/admin/src/main.js
View File

@@ -92,5 +92,8 @@ router.map({
} }
}); });
document.getElementsByClassName("cssload-battery")[0].style.display = "none";
router.redirect({"/user": "/user/1"}); router.redirect({"/user": "/user/1"});
router.start(App, '#app'); router.start(App, '#app');

564
frontend/static/css/loading.css Normal file
View File

@@ -0,0 +1,564 @@
.cssload-battery {
display: block;
margin: 175px auto;
position: relative;
width: 4.25rem;
height: 7.5rem;
box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-o-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-ms-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-webkit-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-moz-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
border-radius: 0.09rem;
-o-border-radius: 0.09rem;
-ms-border-radius: 0.09rem;
-webkit-border-radius: 0.09rem;
-moz-border-radius: 0.09rem;
background: white;
}
.cssload-battery:before {
content: '';
position: absolute;
left: 0.8625rem;
right: 0.5625rem;
top: -0.8375rem;
height: 0.7375rem;
width: 2.125rem;
background: rgb(66, 92, 119);
border-radius: 0.18rem;
-o-border-radius: 0.18rem;
-ms-border-radius: 0.18rem;
-webkit-border-radius: 0.18rem;
-moz-border-radius: 0.18rem;
}
.cssload-battery:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-right: 4.25rem solid transparent;
border-bottom: 7.05rem solid rgba(255, 255, 255, 0.325);
}
.cssload-liquid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 4.25rem;
background: rgb(113, 251, 133);
animation: load 5.96s infinite;
-o-animation: load 5.96s infinite;
-ms-animation: load 5.96s infinite;
-webkit-animation: load 5.96s infinite;
-moz-animation: load 5.96s infinite;
}
.cssload-liquid:after, .cssload-liquid:before {
content: '';
position: absolute;
top: -0.5rem;
height: 2.125rem;
width: 2.4625rem;
background: rgb(113, 251, 133);
opacity: 0;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.cssload-liquid:after {
right: 0;
animation: cssload-liquid-1 5.96s infinite;
-o-animation: cssload-liquid-1 5.96s infinite;
-ms-animation: cssload-liquid-1 5.96s infinite;
-webkit-animation: cssload-liquid-1 5.96s infinite;
-moz-animation: cssload-liquid-1 5.96s infinite;
}
.cssload-liquid:before {
left: 0;
animation: cssload-liquid-2 5.96s infinite;
-o-animation: cssload-liquid-2 5.96s infinite;
-ms-animation: cssload-liquid-2 5.96s infinite;
-webkit-animation: cssload-liquid-2 5.96s infinite;
-moz-animation: cssload-liquid-2 5.96s infinite;
}
@keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-o-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-ms-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-webkit-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-moz-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-webkit-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-moz-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-webkit-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-moz-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}

4
frontend/static/css/webuploader.css
View File

@@ -10,7 +10,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background: #00b7ee; background: #4d90fe;
padding: 10px 15px; padding: 10px 15px;
color: #fff; color: #fff;
text-align: center; text-align: center;
@@ -18,7 +18,7 @@
overflow: hidden; overflow: hidden;
} }
.webuploader-pick-hover { .webuploader-pick-hover {
background: #00a2d4; background: #4d90fe;
} }
.webuploader-pick-disable { .webuploader-pick-disable {