fix login styles

src/App.vue

@@ -15,8 +15,6 @@ export default {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/main.js

@@ -6,6 +6,8 @@ import store from "./store";
 import "./plugins/element.js";
 import "./plugins/axios";
 
+import "./styles/global.css";
+
 Vue.config.productionTip = false;
 
 new Vue({

src/modules/portal/components/Login.vue

@@ -5,35 +5,21 @@
         <img v-if="!jwptCustomize" src="../assets/images/login_footer_logo.jpg">
         <img v-if="jwptCustomize" src="../assets/images/new_login_logo.png">
       </a>
-      <ul>
-        <li>
-          <span></span>
-        </li>
-        <li>
-          <h1 v-if="!jwptCustomize">考试云平台</h1>
-          <h1 v-if="jwptCustomize" style="line-height: 36px; font-size: 24px">{{title}}</h1>
-        </li>
-      </ul>
+      <span class="qm-logo-text" v-if="!jwptCustomize">考试云平台</span>
+      <span class="qm-logo-text" v-if="jwptCustomize">{{title}}</span>
     </header>
     <!--main-->
     <main class="login-main">
-      <div class="main_bg"></div>
-      <div class="main_box">
-        <div class="left_tree fl"><img src="../assets/images/login_main_left_tree.png"></div>
-        <div class="right_login fr">
-          <div class="login">
-            <h1>用户登录</h1>
-            <div class="username">
-              <i></i>
-              <input @keyup.enter="login()" type="text" id="accountValue" v-model="loginInfo.accountValue" placeholder="账号" />
-            </div>
-            <div class="password">
-              <em></em>
-              <input @keyup.enter="login()" type="password" id="password" v-model="loginInfo.password" placeholder="密码" />
-            </div>
-            <input type="button" value="登 录" class="btn" @click="login()" />
-          </div>
+      <div class="left_tree"><img src="../assets/images/login_main_left_tree.png"></div>
+      <div class="right_login">
+        <h1>用户登录</h1>
+        <div class="username">
+          <input @keyup.enter="login()" type="text" id="accountValue" v-model="loginInfo.accountValue" placeholder="账号" />
         </div>
+        <div class="password">
+          <input @keyup.enter="login()" type="password" id="password" v-model="loginInfo.password" placeholder="密码" />
+        </div>
+        <input type="button" value="登 录" class="btn" @click="login()" />
       </div>
     </main>
 
@@ -171,7 +157,112 @@ export default {
 </script>
 
 <style lang="css">
-.h1 {
-  font-family: "Micrsoft YaHei";
+.login-header {
+  font-family: "Microsoft YaHei";
+  width: 990px;
+  height: 80px;
+  background-color: #fff;
+  margin: 0 auto;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.qm-logo-text {
+  font-size: 36px;
+  font-weight: 700;
+  font-stretch: normal;
+  line-height: 36px;
+  letter-spacing: 0px;
+  margin-left: 40px;
+}
+
+.login-main {
+  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;
+}
+
+.login-main .left_tree > img {
+  height: 500px;
+  position: absolute;
+}
+.login-main .right_login {
+  position: relative;
+  left: 500px;
+}
+.login-main .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 {
+  width: 320px;
+  height: 46px;
+  border-bottom: 1px solid #999;
+  margin: 54px 0 0 50px;
+}
+.login-main .right_login .password {
+  width: 320px;
+  height: 46px;
+  border-bottom: 1px solid #999;
+  margin: 30px 0 0 50px;
+}
+.login-main .right_login h1 {
+  font-size: 34px;
+  color: #fff;
+  text-shadow: 0 8px 13px #0d72ac;
+  margin-top: -55px;
+  text-align: center;
+}
+.login-main .right_login input,
+button {
+  padding: 10px 10px;
+  margin-bottom: 10px;
+  margin-left: 60px;
+  font-size: 16px;
+}
+.login-main .right_login .btn {
+  margin-top: 20px;
+  margin-left: 50px;
+  width: 320px;
+  height: 60px;
+  background-color: #20a0ff;
+  font-size: 25px;
+  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-footer {
+  clear: both;
+  overflow: hidden;
+  width: 100%;
+  min-width: 990px;
+  background-color: #fff;
+}
+.login-footer .main {
+  width: 990px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 10px;
 }
 </style>

src/styles/global.css

@@ -0,0 +1,96 @@
+.qm-primary-text {
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-primary-strong-text {
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 14px;
+  letter-spacing: 0px;
+  color: #444444;
+}
+
+.qm-secondary-text {
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-big-text {
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-title-text {
+  font-size: 18px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: #444444;
+}
+
+.qm-tip-text {
+  color: #cccccc;
+}
+
+.qm-primary-button {
+  /* font-size: 36px; */
+  display: inline-block;
+  height: 36px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #13bb8a;
+  border-radius: 6px;
+  padding: 0 30px;
+  line-height: 36px;
+  overflow: hidden;
+}
+
+.qm-primary-button:hover {
+  color: #ffffff;
+  background-color: #13bb8a;
+}
+
+.qm-secondary-button {
+  height: 36px;
+  font-size: 14px;
+  color: #999999;
+  background-color: #ffffff;
+  border-radius: 6px;
+  padding: 0 30px;
+  line-height: 36px;
+  overflow: hidden;
+}
+
+.qm-secondary-button:hover {
+  color: #999999;
+  background-color: #ffffff;
+}
+
+.qm-icon-button {
+  height: 36px;
+  font-size: 36px;
+  color: #999999;
+  background-color: #ffffff;
+  line-height: 36px;
+  overflow: hidden;
+}
+
+.qm-icon-button:hover {
+  color: #444444;
+  background-color: #ffffff;
+}