login

src/page/login/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="login-container"
        @keyup.enter.native="handleLogin">
+    <div class="login-head"><div class="login-head-font">智慧运维</div></div>
     <top-color v-show="false"></top-color>
     <div class="login-weaper animated bounceInDown">
       <div class="login-border">
         <div class="login-main">
-          <h4 class="login-title">
-            <br>一体化控制系统
-<!--            <top-lang></top-lang>-->
-          </h4>
+          <div class="login-title">
+            登陆
+            <!--            <top-lang></top-lang>-->
+          </div>
           <userLogin v-if="activeName==='user'"></userLogin>
           <codeLogin v-else-if="activeName==='code'"></codeLogin>
           <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
@@ -103,3 +104,24 @@ export default {
 <style lang="scss">
 @import "@/styles/login.scss";
 </style>
+<style>
+  .login-head {
+    background-image: url(/img/bg/login-head.png);
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 80px;
+    background-position: center;
+    background-repeat: no-repeat;
+    letter-spacing: 4px;
+    font-size: x-large;
+    text-align: center;
+    background-size: 60% auto;
+    margin-top: -10px;
+  }
+  .login-head-font {
+    margin-top: 24px;
+    color: #e0ecf6;
+  }
+</style>

src/page/login/userlogin.vue

@@ -5,8 +5,8 @@
            ref="loginForm"
            :model="loginForm"
            label-width="0">
-    <el-form-item v-if="tenantMode" prop="tenantId">
-      <el-input size="small" v-show="false"
+    <el-form-item v-if="tenantMode" prop="tenantId" v-show="false">
+      <el-input size="small"
                 @keyup.enter.native="handleLogin"
                 v-model="loginForm.tenantId"
                 auto-complete="off"
@@ -16,6 +16,7 @@
       </el-input>
     </el-form-item>
     <el-form-item prop="username">
+      <div class="login-sub-title">账号</div>
       <el-input size="small"
                 @keyup.enter.native="handleLogin"
                 v-model="loginForm.username"
@@ -26,6 +27,7 @@
       </el-input>
     </el-form-item>
     <el-form-item prop="password">
+      <div class="login-sub-title">密码</div>
       <el-input size="small"
                 @keyup.enter.native="handleLogin"
                 :type="passwordType"
@@ -40,6 +42,7 @@
       </el-input>
     </el-form-item>
     <el-form-item v-if="captchaMode" prop="code">
+      <div class="login-sub-title" style="letter-spacing: 0px;">验证码</div>
       <el-row :span="24">
         <el-col :span="16">
           <el-input size="small"

src/styles/login.scss

@@ -6,15 +6,17 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background-image: url('/img/bg/login-bg.jpg');
-  background-size: 100% 100%;
+  background-image: url('/img/bg/login-bg.png');
+  background-size: 100% 110%;
+  background-color: #001a4d;
   //animation: animate-cloud 20s linear infinite;
 }
 .login-weaper {
   //margin: 0 auto;
   width: 500px;
   margin-right: 80px;
-  background: rgba(26,26,34,0.6);
+  background: #ffffff;
+  border-radius: 5px;
   box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
   .el-input-group__append {
     border: none;
@@ -72,7 +74,7 @@
   box-sizing: border-box;
 }
 .login-main {
-  margin: 0 10%;
+  margin: 0 7%;
   width: 100%;
   box-sizing: border-box;
 }
@@ -83,12 +85,16 @@
   color: #76838f;
 }
 .login-title {
-  color: #E9E9E9;
-  font-weight: 500;
+  height: 55px;
+  color: #312727;
+  font-weight: initial;
   font-size: 28px;
-  text-align: center;
   letter-spacing: 4px;
-  margin-left: 20px;
+  margin-top: 40px;
+}
+.login-sub-title {
+  color: #94a3ab;
+  letter-spacing: 4px;
 }
 .login-menu {
   margin-top: 40px;
@@ -119,7 +125,7 @@
 .login-form {
   margin: 10px 0;
   i {
-    color: #FFFFFF;
+    color: #000000;
   }
   .el-form-item__content {
     width: 100%;
@@ -132,8 +138,8 @@
       //width: 420px;
       height: 48px;
       border-radius: 5px;
-      background-color: #2B354F;
-      color: #A8C4F2;
+      background-color: #eceff7;
+      color: #403737;
       padding-left: 50px;
       //padding-bottom: 10px;
       //text-indent: 5px;