Skip to content

S
sgaqgl-vue
Commit 38a04e1f authored by 李苏's avatar 李苏 💬
Browse files
Options

1

parent 981596c7
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 177 deletions
public/index.html
View file @ 38a04e1f
......@@ -16,193 +16,202 @@
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
#load {
background:#000;
position:absolute;
width:600px;
height:36px;
left:50%;
top:40%;
margin-left:-300px;
overflow:visible;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#load div {
position:absolute;
width:20px;
height:36px;
opacity:0;
font-family:Helvetica, Arial, sans-serif;
animation:move 2s linear infinite;
-o-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-webkit-animation:move 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
color:#35C4F0;
}
#load div:nth-child(2) {
animation-delay:0.2s;
-o-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
animation-delay:0.4s;
-o-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
animation-delay:0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
animation-delay:0.8s;
-o-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
@keyframes move {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@keyframes spin {
@-moz-keyframes move {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
@-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
#loader-wrapper .loader-section.section-left {
left: 0;
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
#loader-wrapper .loader-section.section-right {
right: 0;
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
@-o-keyframes move {
0% {
left:0;
opacity:0;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
.no-js #loader-wrapper {
display: none;
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
.no-js h1 {
color: #222222;
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
<div style="height: 100%;width: 100%;background-color: #000;">
<div id="load">
<div>G</div>
<div>N</div>
<div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div>
</div>
</div>
</body>
</html>
src/views/login.vue
View file @ 38a04e1f
......@@ -188,6 +188,9 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner{
&:hover{
border: #014dff 1px solid;
}
border: #0389ff 1px solid;
color: #fff;
background-color:rgba(0, 0, 0, 0.039) ;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment