fix login page style

README.md

@@ -108,6 +108,17 @@ vue-cli
 
 共享状态的通过 vuex 来处理。
 
+## 图标处理
+
+采用[vue-awesome](https://github.com/Justineo/vue-awesome)的库。  
+在 src/plugins/vueAwesome.js 添加对应的图标。  
+图标名称和形状可以在 [Font Awesome](https://fontawesome.com/icons?d=gallery) 查找。  
+使用时采用
+
+```html
+<v-icon name="lock" scale="3" />
+```
+
 ## TODO:
 
 1. module state

src/modules/portal/views/Login.vue

@@ -1,24 +1,18 @@
 <template>
   <div>
     <header class="login-header">
-      <a href="javascript:void(0)">
-        <img
-          v-if="!jwptCustomize"
-          src="../assets/images/login_footer_logo.jpg"
-        />
-        <img v-if="jwptCustomize" src="../assets/images/new_login_logo.png" />
-      </a>
+      <img v-if="!jwptCustomize" src="../assets/images/login_footer_logo.jpg" />
+      <img v-else src="../assets/images/new_login_logo.png" />
       <span class="qm-logo-text" v-if="!jwptCustomize">考试云平台</span>
-      <span class="qm-logo-text" v-if="jwptCustomize">{{ title }}</span>
+      <span class="qm-logo-text" v-else>{{ title }}</span>
     </header>
 
     <main class="login-main">
-      <div class="left_tree">
-        <img src="../assets/images/login_main_left_tree.png" />
-      </div>
+      <img class="left_tree" src="../assets/images/login_main_left_tree.png" />
       <div class="right_login">
         <h1>用户登录</h1>
         <div class="username">
+          <v-icon name="user" scale="3" />
           <input
             @keyup.enter="login"
             type="text"
@@ -28,6 +22,7 @@
           />
         </div>
         <div class="password">
+          <v-icon name="lock" scale="3" />
           <input
             @keyup.enter="login"
             type="password"
@@ -36,16 +31,12 @@
             placeholder="密码"
           />
         </div>
-        <input type="button" value="登 录" class="btn" @click="login" />
+        <button class="login-btn" @click="login">登 录</button>
       </div>
     </main>
 
     <footer class="login-footer">
-      <div class="main">
-        <div>
-          Copyright &copy; 2019 <a href="javascript:void(0)">讯飞启明</a>.
-        </div>
-      </div>
+      Copyright &copy; 2019 <a href="javascript:void(0)">讯飞启明</a>.
     </footer>
   </div>
 </template>
@@ -156,9 +147,9 @@ export default {
   height: 80px;
   background-color: #fff;
   margin: 0 auto;
-  overflow: hidden;
   display: flex;
   align-items: center;
+  justify-items: center;
 }
 
 .qm-logo-text {
@@ -174,58 +165,71 @@ export default {
   width: 100%;
   min-width: 990px;
   min-height: 550px;
-  overflow: hidden;
   background-image: url("../assets/images/login_main_bg_full.png");
-  position: relative;
-  top: 0;
-  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  justify-content: space-evenly;
 }
 
-.login-main .left_tree > img {
+.left_tree {
   height: 500px;
-  position: absolute;
-}
-.login-main .right_login {
-  position: relative;
-  left: 500px;
 }
-.login-main .right_login {
+
+.right_login {
   width: 420px;
-  margin-top: 80px;
   background-color: #fff;
   border-radius: 16px;
-  border-top: 88px solid #3c8dbc;
   box-shadow: 0 13px 29px #0d3b5d;
 }
-.login-main .right_login .username {
+.right_login .username {
   width: 320px;
   height: 46px;
   border-bottom: 1px solid #999;
   margin: 54px 0 0 50px;
+  padding-bottom: 5px;
+
+  display: flex;
+  align-items: center;
+  justify-items: center;
 }
-.login-main .right_login .password {
+.right_login .password {
   width: 320px;
   height: 46px;
   border-bottom: 1px solid #999;
   margin: 30px 0 0 50px;
+  padding-bottom: 5px;
+
+  display: flex;
+  align-items: center;
+  justify-items: center;
 }
-.login-main .right_login h1 {
+
+.right_login h1 {
   font-size: 34px;
   color: #fff;
   text-shadow: 0 8px 13px #0d72ac;
-  margin-top: -55px;
   text-align: center;
+
+  border-top: 16px solid #3c8dbc;
+  border-radius: 16px 16px 0 0;
+  background-color: #3c8dbc;
+  padding: 10px;
+  margin: 0;
 }
-.login-main .right_login input,
-button {
+
+.right_login input {
+  width: 100%;
   padding: 10px 10px;
-  margin-bottom: 10px;
-  margin-left: 60px;
+  margin-left: 10px;
   font-size: 16px;
 }
-.login-main .right_login .btn {
+
+.login-btn {
   margin-top: 20px;
   margin-left: 50px;
+  margin-bottom: 20px;
   width: 320px;
   height: 60px;
   background-color: #20a0ff;
@@ -233,29 +237,18 @@ button {
   color: #fff;
   cursor: pointer;
 }
-.login-main .right_login .btn:hover {
-  -moz-box-shadow: 0 16px 29px rgba(29, 170, 240, 0.3);
-  -webkit-box-shadow: 0 16px 29px rgba(29, 170, 240, 0.3);
-  box-shadow: 0 16px 29px rgba(29, 170, 240, 0.3);
-}
 
-.login-main .right_login .bg-danger {
-  color: red;
-  text-align: center;
-  font-weight: bold;
+.login-btn:hover {
+  box-shadow: 0 16px 29px rgba(29, 170, 240, 0.3);
 }
 
 .login-footer {
   clear: both;
-  overflow: hidden;
   width: 100%;
   min-width: 990px;
   background-color: #fff;
-}
-.login-footer .main {
-  width: 990px;
-  margin: 0 auto;
+
+  margin: 10px auto;
   text-align: center;
-  font-size: 10px;
 }
 </style>

src/plugins/vueAwesome.js

@@ -5,5 +5,6 @@ import "vue-awesome/icons/flag";
 import "vue-awesome/icons/print";
 import "vue-awesome/icons/user";
 import "vue-awesome/icons/sign-out-alt";
+import "vue-awesome/icons/lock";
 
 Vue.component("v-icon", Icon);