登录界面修改

src/components/layouts/UserLayout.vue

@@ -2,7 +2,7 @@
   <div class="iot-login">
     <!-- 头部 -->
     <div class="login-header">
-      <div class="top-line"></div>
+      <!-- <div class="top-line"></div> -->
       <div class="iotmenu-header-content">
         <!-- <span class="iotmenu-header-text">联锁管理系统</span> -->
          <div class="logo-img" :style="{backgroundImage: `url(${loginConfig.logoPic})`}"></div>
@@ -15,7 +15,10 @@
       </div>
     </div>
     <!-- 尾部 -->
-     <div class="login-footer">
+     <div class="login-footer u-flex">
+      <div class="login-footer-text">网址：{{ loginConfig.companyUrl }}</div>
+      <div class="login-footer-text">地址：{{ loginConfig.companyAddress }}</div>
+      <div class="login-footer-text">电话：{{ loginConfig.companyTelephone }}</div>
       <div class="login-footer-text">{{ loginConfig.companyCopyright }}</div>
      </div>
   </div>
@@ -66,32 +69,28 @@
 @iotTpmFontColor: #323233;
 @iotTpmContentBg: #FAFAFA;
 
-@iotHContentHeight: 48px;
-@iotHLineHeight: 8px;
-@iotHHeight: 56px;
-
 .iot-login{
   .login-header{
-    height: @iotHHeight !important;
-    .top-line{
-      width: 100%;
-      height: @iotHLineHeight;
-      background: linear-gradient(90deg,#019ff3,#004280);
-    }
+    height: 90px !important;
+    // .top-line{
+    //   width: 100%;
+    //   height: @iotHLineHeight;
+    //   background: linear-gradient(90deg,#019ff3,#004280);
+    // }
     .iotmenu-header-content{
-      height: @iotHContentHeight !important;
-      line-height: @iotHContentHeight !important;
-      background-color: #fff !important;
-      color: rgba(0,0,0,65) !important;
-      box-shadow: 0 2px 4px 0 rgba(50,50,51,.5) !important;
+      height: 100% !important;
+      line-height: 100% !important;
+      background-color: #FBFAF9 !important;
+      // color: rgba(0,0,0,65) !important;
+      // box-shadow: 0 2px 4px 0 rgba(50,50,51,.5) !important;
       z-index: 999 !important;
       padding: 0 !important;
       position: relative;
-      .user-wrapper{
-        .avatar{
-          margin: 0 10px 0 0 !important;
-        }
-      }
+      // .user-wrapper{
+      //   .avatar{
+      //     margin: 0 10px 0 0 !important;
+      //   }
+      // }
       .logo-img{
         width: calc(100% - 50px);
         height: 26px;
@@ -114,31 +113,34 @@
   }
   .login-content{
     width: 100%;
-    height: calc(100vh - 38px - 56px);
+    height: calc(100vh - 90px - 122px);
     // background: url('../../assets/login.png');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: center 50%;
+    background-position: center 100%;
     position: relative;
     .login-box{
-      width: 400px;
-      min-height: 580px;
-      background-color: #fff;
-      padding: 40px;
-      box-shadow: 0 0 10px rgba(0,0,0,.25);
-      border-radius: 4px;
+      width: 440px;
+      // min-height: 580px;
+      // background-color: #fff;
+      // padding: 40px;
+      // box-shadow: 0 0 10px rgba(0,0,0,.25);
+      // border-radius: 4px;
       position: absolute;
-      top: 50%;
-      right: 30%;
+      top: 60%;
+      right: 20%;
       transform: translate(50%, -50%);
     }
   }
   .login-footer{
-    height: 38px;
-    padding-left: 37px;
+    // height: 120px;
+    padding: 25px 80px;
+    background-color: #FBFAF9;
+    // background-color: #F2EFEB;
+    flex-direction: column;
     .login-footer-text{
       color: #a1a1a1;
-      font-size: 14px;
+      font-size: 12px;
     }
   }
 }

src/views/user/Login.vue

@@ -3,10 +3,11 @@
     <!-- <div class="top-img"></div> -->
     <div class="sign-text">联锁管理系统</div>
     <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
-      <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick" class="u-login-tabs">
-        <a-tab-pane key="sso" tab="SSO">
+      <login-sso ref="ssologin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-sso>
+      <!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick" class="u-login-tabs"> -->
+        <!-- <a-tab-pane key="sso" tab="SSO">
           <login-sso ref="ssologin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-sso>
-        </a-tab-pane>
+        </a-tab-pane> -->
         <!-- <a-tab-pane key="system" tab="标准">
           <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
         </a-tab-pane> -->
@@ -15,10 +16,10 @@
         <!-- <a-tab-pane key="tab2" tab="手机号登录">
           <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
         </a-tab-pane> -->
-      </a-tabs>
+      <!-- </a-tabs> -->
 
-      <a-form-model-item>
-        <a-checkbox @change="handleRememberMeChange" default-checked>记住我</a-checkbox>
+      <!-- <a-form-model-item> -->
+        <!-- <a-checkbox @change="handleRememberMeChange" default-checked>记住我</a-checkbox> -->
         <!-- 修改框架 -->
         <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
           忘记密码
@@ -26,9 +27,9 @@
         <!-- <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
           注册账户
         </router-link> -->
-      </a-form-model-item>
+      <!-- </a-form-model-item> -->
 
-      <a-form-item style="margin-top:24px">
+      <a-form-item class="login-button-container">
         <a-button size="large"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmit" :disabled="loginBtn">登录
         </a-button>
       </a-form-item>
@@ -172,7 +173,7 @@ export default {
 
   }
 </script>
-<style lang="less">
+<!-- <style lang="less">
   .u-login-tabs{
     .ant-tabs-nav-container{
       font-size: 16px !important;
@@ -201,54 +202,59 @@ export default {
       border-color: #3395FF;
     }
   }
-</style>
+</style> -->
 <style lang="less" scoped>
-  .top-img{
-    width: 100%;
-    height: 64px;
-    background: url('../../assets/login_logo.svg') no-repeat;
-    background-size: 100%;
-  }
+  // .top-img{
+  //   width: 100%;
+  //   height: 64px;
+  //   background: url('../../assets/login_logo.svg') no-repeat;
+  //   background-size: 100%;
+  // }
   .sign-text{
     width: 100%;
-    height: 32px;
-    font-size: 23px;
+    // height: 32px;
+    font-size: 30px;
     font-weight: 700;
-    color: #004280;
+    color: #fff;
     // color: #646464;
-    margin-top: 8px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+  .login-button-container{
+    width: 220px !important;
+    // height: 80px !important;
+    margin: 50px auto;
+    .login-button {
+      width: 100%;
+      height: 60px;
+      padding: 0 15px;
+      font-size: 16px;
+      background: #094483;
+      font-weight: 700;
+      border-color: transparent;
+    }
   }
 
   .user-layout-login {
     label {
       font-size: 14px;
     }
-  .getCaptcha {
+    .getCaptcha {
       display: block;
       width: 100%;
       height: 40px;
     }
 
-  .forge-password {
+    .forge-password {
       font-size: 14px;
     }
 
-    button.login-button {
-      width: 100%;
-      height: 40px;
-      padding: 0 15px;
-      font-size: 16px;
-      background: #004280;
-      font-weight: 700;
-      border-color: transparent;
-    }
-
-  .user-login-other {
+    .user-login-other {
       text-align: left;
       margin-top: 24px;
       line-height: 22px;
 
-    .item-icon {
+      .item-icon {
         font-size: 24px;
         color: rgba(0,0,0,.2);
         margin-left: 16px;
@@ -261,7 +267,7 @@ export default {
         }
       }
 
-    .register {
+      .register {
         float: right;
       }
     }

src/views/user/LoginSSO.vue

@@ -3,13 +3,13 @@
       <a-form-model ref="form" :model="model" :rules="validatorRules">
         <!-- IoT Edge相关 修改框架 -->
         <a-form-model-item required prop="username">
-          <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
-            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          <a-input v-model="model.username" size="large" placeholder="帐户">
+            <!-- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/> -->
           </a-input>
         </a-form-model-item>
         <a-form-model-item required prop="password">
-          <a-input-password v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
-            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          <a-input-password v-model="model.password" size="large" type="password" autocomplete="false" placeholder="密码">
+            <!-- <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/> -->
           </a-input-password>
         </a-form-model-item>