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 @@ ...@@ -16,193 +16,202 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper { #load {
position: fixed; background:#000;
top: 0; position:absolute;
left: 0; width:600px;
width: 100%; height:36px;
height: 100%; left:50%;
z-index: 999999; top:40%;
} margin-left:-300px;
overflow:visible;
#loader { -webkit-user-select:none;
display: block; -moz-user-select:none;
position: relative; -ms-user-select:none;
left: 50%; user-select:none;
top: 50%; cursor:default;
width: 150px; }
height: 150px;
margin: -75px 0 0 -75px; #load div {
border-radius: 50%; position:absolute;
border: 3px solid transparent; width:20px;
border-top-color: #FFF; height:36px;
-webkit-animation: spin 2s linear infinite; opacity:0;
-ms-animation: spin 2s linear infinite; font-family:Helvetica, Arial, sans-serif;
-moz-animation: spin 2s linear infinite; animation:move 2s linear infinite;
-o-animation: spin 2s linear infinite; -o-animation:move 2s linear infinite;
animation: spin 2s linear infinite; -moz-animation:move 2s linear infinite;
z-index: 1001; -webkit-animation:move 2s linear infinite;
} transform:rotate(180deg);
-o-transform:rotate(180deg);
#loader:before { -moz-transform:rotate(180deg);
content: ""; -webkit-transform:rotate(180deg);
position: absolute; color:#35C4F0;
top: 5px; }
left: 5px;
right: 5px; #load div:nth-child(2) {
bottom: 5px; animation-delay:0.2s;
border-radius: 50%; -o-animation-delay:0.2s;
border: 3px solid transparent; -moz-animation-delay:0.2s;
border-top-color: #FFF; -webkit-animation-delay:0.2s;
-webkit-animation: spin 3s linear infinite; }
-moz-animation: spin 3s linear infinite; #load div:nth-child(3) {
-o-animation: spin 3s linear infinite; animation-delay:0.4s;
-ms-animation: spin 3s linear infinite; -o-animation-delay:0.4s;
animation: spin 3s linear infinite; -webkit-animation-delay:0.4s;
} -webkit-animation-delay:0.4s;
}
#loader:after { #load div:nth-child(4) {
content: ""; animation-delay:0.6s;
position: absolute; -o-animation-delay:0.6s;
top: 15px; -moz-animation-delay:0.6s;
left: 15px; -webkit-animation-delay:0.6s;
right: 15px; }
bottom: 15px; #load div:nth-child(5) {
border-radius: 50%; animation-delay:0.8s;
border: 3px solid transparent; -o-animation-delay:0.8s;
border-top-color: #FFF; -moz-animation-delay:0.8s;
-moz-animation: spin 1.5s linear infinite; -webkit-animation-delay:0.8s;
-o-animation: spin 1.5s linear infinite; }
-ms-animation: spin 1.5s linear infinite; #load div:nth-child(6) {
-webkit-animation: spin 1.5s linear infinite; animation-delay:1s;
animation: spin 1.5s linear infinite; -o-animation-delay:1s;
} -moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
@-webkit-keyframes spin { #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% { 0% {
-webkit-transform: rotate(0deg); left:0;
-ms-transform: rotate(0deg); opacity:0;
transform: rotate(0deg); }
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% { 100% {
-webkit-transform: rotate(360deg); left:100%;
-ms-transform: rotate(360deg); -moz-transform:rotate(-180deg);
transform: rotate(360deg); -webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
} }
} }
@keyframes spin { @-moz-keyframes move {
0% { 0% {
-webkit-transform: rotate(0deg); left:0;
-ms-transform: rotate(0deg); opacity:0;
transform: rotate(0deg); }
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% { 100% {
-webkit-transform: rotate(360deg); left:100%;
-ms-transform: rotate(360deg); -moz-transform:rotate(-180deg);
transform: rotate(360deg); transform:rotate(-180deg);
opacity:0;
} }
} }
@-webkit-keyframes move {
#loader-wrapper .loader-section { 0% {
position: fixed; left:0;
top: 0; opacity:0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
} }
35% {
#loader-wrapper .loader-section.section-left { left:41%;
left: 0; -webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
} }
65% {
#loader-wrapper .loader-section.section-right { left:59%;
right: 0; -webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
} }
100% {
left:100%;
.loaded #loader-wrapper .loader-section.section-left { -webkit-transform:rotate(-180deg);
-webkit-transform: translateX(-100%); transform:rotate(-180deg);
-ms-transform: translateX(-100%); opacity:0;
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-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 { @-o-keyframes move {
opacity: 0; 0% {
-webkit-transition: all 0.3s ease-out; left:0;
transition: all 0.3s ease-out; opacity:0;
} }
35% {
.loaded #loader-wrapper { left:41%;
visibility: hidden; -o-transform:rotate(0deg);
-webkit-transform: translateY(-100%); transform:rotate(0deg);
-ms-transform: translateY(-100%); opacity:1;
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
} }
65% {
.no-js #loader-wrapper { left:59%;
display: none; -o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
} }
100% {
.no-js h1 { left:100%;
color: #222222; -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> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div style="height: 100%;width: 100%;background-color: #000;">
<div id="loader"></div> <div id="load">
<div class="loader-section section-left"></div> <div>G</div>
<div class="loader-section section-right"></div> <div>N</div>
<div class="load_title">正在加载系统资源，请耐心等待</div> <div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
src/views/login.vue
View file @ 38a04e1f
...@@ -188,6 +188,9 @@ export default { ...@@ -188,6 +188,9 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner{ ::v-deep .el-input__inner{
&:hover{
border: #014dff 1px solid;
}
border: #0389ff 1px solid; border: #0389ff 1px solid;
color: #fff; color: #fff;
background-color:rgba(0, 0, 0, 0.039) ; 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