Merge pull request 'fix : 修改登录界面样式' (#68) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/68

src/views/login/index.vue

@@ -4,14 +4,14 @@
         :model="loginForm"
         ref="formInstance"
         :rules="rules"
-        label-width="65px"
+        label-width="70px"
     >
-      <h3>科研管理平台</h3>
+      <h2>科研管理平台</h2>
       <el-form-item prop="username" label="账号">
         <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
       </el-form-item>
       <el-form-item prop="password" label="密码">
-        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock"></el-input>
+        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" :show-password="true"></el-input>
       </el-form-item>
       <el-form-item prop="code" label="验证码">
         <div class="code">
@@ -20,6 +20,12 @@
           <img :src="codeImg" alt="" @click="getCode">
         </div>
       </el-form-item>
+      <div class="sso">
+        <a href="/api/auth/cas/login">
+          <svg-icon name="sso"/>
+          <span>统一身份认证</span>
+        </a>
+      </div>
       <el-form-item>
         <el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
       </el-form-item>
@@ -98,26 +104,77 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .login-box {
   height: 100%;
-  background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+  background-color: #F3F3F3;
+  //background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
   display: flex;
   justify-content: center;
   align-items: center;
 
+  .sso {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -5px;
+    margin-bottom: 10px;
+
+    a {
+      font-size: 16px;
+      color: #BEA266;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   .el-form {
     padding: 12px 15px;
     border-radius: 12px;
-    width: 25%;
+    width: 35%;
     background-color: #fff;
 
-    h3 {
+    .el-form-item {
+      margin-bottom: 25px;
+
+      :deep(.el-form-item__label) {
+        font-size: 15px;
+      }
+
+      .el-input {
+        height: 40px;
+
+        :deep(.el-input__inner) {
+          font-size: 18px;
+        }
+
+        :deep(.el-input__suffix) {
+          .el-input__password {
+            font-size: 20px;
+          }
+        }
+
+        :deep(.el-input__prefix ) {
+          .el-input__prefix-inner {
+            .el-icon {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+
+    }
+
+    h2 {
       width: 100%;
       text-align: center;
-      margin-bottom: 15px;
+      margin-bottom: 25px;
     }
 
     .el-button {
       width: 100%;
+      background-color: #BEA266;
+      border-color: #BEA266;
+      font-size: 17px;
     }
   }
 }
@@ -134,7 +191,7 @@ onBeforeUnmount(() => {
   }
 
   img {
-    height: 32px;
+    height: 40px;
     flex: 1;
   }
 }