更换登录页

src/layouts/UserLayout.vue

@@ -7,9 +7,9 @@
       <!--            <img src="~@/assets/logo.png" class="logo" alt="logo">-->
       <!--          </a>-->
       <!--        </div>-->
-      <!--        <div class="desc">-->
-      <!--          资产信息管理系统-->
-      <!--        </div>-->
+      <div class="top font">
+        设备管理系统平台登陆
+      </div>
       <!--      </div>-->
 
       <route-view></route-view>
@@ -51,7 +51,7 @@ export default {
 <style lang="less" scoped>
   #userLayout.user-layout-wrapper {
     height: 100%;
-    background: #f0f2f5 url(~@/assets/meteorshower.jpg);
+    background: #f0f2f5 url(~@/assets/NewBg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     &.mobile {
@@ -62,7 +62,11 @@ export default {
         }
       }
     }
-
+.font{
+  font-size:50px;
+  color:#00EAFF;
+  letter-spacing: 3px;
+}
     .container {
       width: 100%;
       min-height: 100%;
@@ -123,7 +127,7 @@ export default {
       .footer {
         position: absolute;
         width: 100%;
-        bottom: 0;
+        bottom: 15%;
         padding: 0 16px;
         margin: 48px 0 24px;
         text-align: center;
@@ -140,9 +144,10 @@ export default {
           }
         }
         .copyright {
-          color: white;
-          font-size: 14px;
-          font-weight: bold;
+          color: #00EAFF;
+          font-size: 20px;
+          font-weight: 500;
+          font-family: PingFang SC;
         }
       }
     }

src/views/Login.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="fh-login">
-      <div class="fh-login-left">
+      <!-- <div class="fh-login-left">
         <h2 style="padding-bottom: 0px"></h2>
         <h2 style="padding-bottom: 0px">乾元科技</h2>
         <h2 style="font-size:30px">设备管理系统</h2>
-      </div>
+      </div> -->
       <div class="fh-login-right">
-        <div class="login-title">欢迎使用</div>
+        <div class="login-title">账号登录</div>
         <a-form
           id="formLogin"
           ref="formLogin"
@@ -16,22 +16,22 @@
           @submit="handleSubmit">
           <a-form-item>
             <a-input
-              size="large"
               type="text"
-              placeholder="请输入账户"
+              placeholder="用户名"
               class="login-input"
-              style="margin-top:40px"
               v-decorator="[
                 'username',
                 {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
               ]"
             >
-              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              <template slot="addonBefore" >
+                <a-icon type="user" :style="{ color: '#00DEFF;',fontSize:'16px', }"/>
+                账号:
+              </template>
             </a-input>
           </a-form-item>
           <a-form-item>
             <a-input
-              size="large"
               type="password"
               autocomplete="false"
               placeholder="请输入密码"
@@ -42,17 +42,16 @@
                 {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
               ]"
             >
-              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              <template slot="addonBefore" >
+                <a-icon type="lock" :style="{ color: '#00DEFF;',fontSize:'16px', }"/>
+                密码:
+              </template>
             </a-input>
           </a-form-item>
-          <a-form-item>
-            <a-checkbox :checked="remberMe" v-model="remberMe">记住密码</a-checkbox>
-          </a-form-item>
-          <a-form-item>
-            <a-button class="btn" type="primary" htmlType="submit">
-              登录
-            </a-button>
-          </a-form-item>
+          <a-checkbox :checked="remberMe" v-model="remberMe"><span style="color: #00DEFF;">记住密码</span></a-checkbox>
+          <a-button class="btn" type="primary" htmlType="submit">
+            登录
+          </a-button>
         </a-form>
       </div>
     </div>
@@ -287,49 +286,56 @@ export default {
 
 <style scoped>
   .fh-login {
-    width: 830px;
-    height: 435px;
+    /* width: 830px;
+    height: 435px; */
     position: fixed;
-    top: 50%;
     left: 50%;
-    margin-top: -250px;
-    margin-left: -440px;
-    background: url('~@/assets/logn.png') no-repeat;
+    top: 50%;
+    /* margin-top: -250px;
+    margin-left: -440px; */
+    transform: translate(-50%,-43%);
+    /* background: url('~@/assets/logn.png') no-repeat; */
   }
-  .fh-login .fh-login-left {
+  /* .fh-login .fh-login-left {
     float: left;
     width: 50%;
-  }
-  .fh-login .fh-login-left img {
+  } */
+  /* .fh-login .fh-login-left img {
     margin: 132px auto 0;
     display: block;
   }
   .fh-login .fh-login-left h2 {
     margin-top: 65px;
-    margin-left: 8%;
     padding-bottom: 20px;
     color: #ffffff;
     font-size: 40px;
     font-weight: 600;
     text-align: center;
-  }
+  } */
   .fh-login .fh-login-right {
-    float: right;
-    width: 48%;
+    /* float: right; */
+    width: 390px;
+    height: 335px;
   }
   .fh-login-right .login-title {
-    font-size: 24px;
-    color: #333;
-    padding: 15px 0px;
-    border-bottom: 1px solid #ccc;
+    width: 95px;
+    letter-spacing: 1px;
+    padding-bottom: 2px;
+    font-size: 22px;
+    color: #fff;
+    font-family: PingFang SC;
+    border-bottom: 4px solid #00DEFF ;
+    margin: 0 auto;
+    margin-bottom: 13px;
     text-align: center;
   }
-  .fh-login .btn {
+  .btn {
     display: inline-block;
     color: #FFF !important;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
     border: 5px solid #FFF;
     border-radius: 0;
+    margin-top:20px;
     box-shadow: none !important;
     -webkit-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
     -o-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
@@ -337,9 +343,8 @@ export default {
     cursor: pointer;
     vertical-align: middle;
     width: 83%;
-    height: 52px;
+    height: 40px;
     border: none;
-    margin-top:15px;
     margin-left: 12px;
     background: rgb(82, 166, 212) !important;
     color: rgb(255, 255, 255);
@@ -348,17 +353,27 @@ export default {
   .fh-login .login-input{
     border: none!important;
     outline: none!important;
-    background-color: #fff!important;
     height: 42px!important;
-    width: 87%!important;
-    /*margin-left: 35px;*/
+    width: 89%!important;
+    background-color: rgba(0,0,0,0)!important;
+
+   border: 1px solid #9CE7FF!important;
+border-radius: 6px!important;
+
   }
   /*设置输入图标大小*/
   .ant-input-affix-wrapper{
     font-size: 24px;
   }
+ /deep/ .ant-input{
+    height: 40px!important;
+    background-color: rgba(0,0,0,0)!important;
+    border: none;
+color:#fff;
+
+  }
   .login-form{
-    margin-left: 35px;
+    margin-left: 38px;
   }
   /*调整图标位置*/
   .login-form .ant-input-affix-wrapper .ant-input-prefix {
@@ -367,4 +382,22 @@ export default {
   .login-form .ant-input-affix-wrapper .ant-input:not(:first-child){
     padding-left: 38px;
   }
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+  /deep/.has-error .ant-input-affix-wrapper .ant-input, .has-error .ant-input-affix-wrapper .ant-input:hover {
+    background-color: rgba(0,0,0,0)!important;
+    border: none;
+
+}
+ /deep/ .ant-input-group-addon  {
+  border: none;
+  color: #00DEFF;
+  background-color: rgba(0,0,0,0)!important;
+}
+ /deep/.ant-form-item-control-wrapper{
+}
+ /deep/.ant-checkbox{
+  color:#00DEFF !important;
+}
 </style>