src/views/login/index.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="login-container">
     <el-form ref="loginForm"
-             style="margin-left: 60%; padding: 10% 0 0 10%; width:40%; height:calc(100vh);"
              :model="loginForm"
              :rules="loginRules"
              class="login-form"
              autocomplete="on"
              label-position="left">
-      <div class="title-container"
-           style="padding-right: 20%">
-        <h2 class="title">苏州赛思维物业服务评估咨询有限公司</h2>
+      <div class="title-container">
+				<h2 class="title">苏州赛思维<br/>物业服务评估咨询有限公司</h2>
       </div>
-      <el-form-item prop="cid"
-                    style="width: 80%">
+      <el-form-item prop="cid" style="width: 80%;margin-left:10%;">
         <el-select v-model="loginForm.pid"
                    style="width: 96%; "
                    filterable
@@ -23,8 +20,7 @@
                      :value="item.cid" />
         </el-select>
       </el-form-item>
-      <el-form-item prop="userid"
-                    style="width: 80%">
+      <el-form-item prop="userid" style="width: 80%;margin-left:10%;">
         <el-input ref="userid"
                   v-model="loginForm.userid"
                   placeholder="用户名"
@@ -41,8 +37,7 @@
                   content="Caps lock is On"
                   placement="right"
                   manual>
-        <el-form-item prop="password"
-                      style="width: 80%">
+        <el-form-item prop="password" style="width: 80%;margin-left:10%;">
           <el-input :key="passwordType"
                     ref="password"
                     v-model="loginForm.password"
@@ -63,7 +58,7 @@
       </el-tooltip>
       <el-button :loading="loading"
                  type="primary"
-                 style="background: linear-gradient(360deg, #0767C2 0%, #50A6FB 100%); width:80%; height: 8%;  border-radius: 36px; margin-top: 4%"
+                 class="login-button"
                  @click.native.prevent="handleLogin">
         <span v-if="!loading">登 录</span>
         <span v-else>登 录 中...</span>
@@ -207,14 +202,12 @@ $cursor: #fff;
     color: $cursor;
   }
 }
-
 /* reset element-ui css */
 .login-container {
   .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;
-
     input {
       background: transparent;
       border: 0px;
@@ -224,7 +217,6 @@ $cursor: #fff;
       color: #248af0;
       height: 47px;
       caret-color: #248af0;
-
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: #248af0 !important;
@@ -234,9 +226,8 @@ $cursor: #fff;
   .el-input--suffix {
     width: 104%;
   }
-
   .el-form-item {
-    border-bottom: 1px solid #248af0;
+    border-bottom: 1px solid #95B6F1;
     color: #1467ff;
   }
 }
@@ -246,39 +237,51 @@ $cursor: #fff;
 $bg: #fff;
 $dark_gray: #889aa4;
 $light_gray: #eee;
-
 .login-container {
   min-height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
   background-image: url('../../assets/imgs/login_bg.png');
-  background-size: 60% 100%;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
+	position: relative;
   .login-form {
-    position: relative;
-    width: 400px;
+    position: absolute;
+		right: 248px;
+		top: 0;
+		bottom: 0;
+    width: 500px;
+		height: 66%;
+		min-height: 550px;
     max-width: 100%;
     padding: 100px 35px 0;
-    margin: 0 auto;
+    margin: auto;
     overflow: hidden;
+		background: #fff;
   }
+	.login-button {
+		background: linear-gradient(360deg, #0767C2 0%, #50A6FB 100%);
+		width:80%;
+		margin-left:10%; 
+		height: 8%;  
+		border-radius: 36px;
+		 margin-top: 4%
+	}
   .tips {
     font-size: 16px;
     color: #fff;
     margin-bottom: 10px;
-
     span {
       &:first-of-type {
         margin-right: 16px;
       }
     }
   }
-
   .title-container {
     position: relative;
     .title {
-      background: linear-gradient(180deg, #399cff 0%, #0969c4 100%);
+      background: linear-gradient(180deg, #1467FF 0%, #5F97FF 100%);
       background-clip: text;
       color: transparent;
       margin: 0px auto 40px auto;
@@ -286,7 +289,6 @@ $light_gray: #eee;
       font-weight: bold;
     }
   }
-
   .show-pwd {
     position: absolute;
     right: 10px;
@@ -296,7 +298,6 @@ $light_gray: #eee;
     cursor: pointer;
     user-select: none;
   }
-
   .thirdparty-button {
     position: absolute;
     right: 0;