fix home style

src/modules/portal/views/Login.vue

@@ -1,38 +1,43 @@
 <template>
-  <div>
-    <header class="login-header">
+  <div class="bg">
+    <!-- <header class="login-header">
       <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-else>{{ title }}</span>
-    </header>
+    </header> -->
 
     <main class="login-main">
-      <img class="left_tree" src="../assets/images/login_main_left_tree.png" />
+      <!-- <img class="left_tree" src="../assets/images/login_main_left_tree.png" /> -->
+
+      <div class="logo-text">考试云平台</div>
       <div class="right_login">
-        <h1>用户登录</h1>
+        <h1 style="font-size: 20px; color: #666">欢迎登录</h1>
         <div class="username">
-          <v-icon name="user" scale="3" />
+          <v-icon name="user" scale="2" style="padding: 5px 0px; z-index: 3;" />
           <input
             @keyup.enter="login"
             type="text"
             id="accountValue"
             v-model="loginInfo.accountValue"
-            placeholder="账号"
+            placeholder="请输入账号"
           />
         </div>
         <div class="password">
-          <v-icon name="lock" scale="3" />
+          <v-icon name="lock" scale="2" style="padding: 5px 0px; z-index: 3;" />
           <input
             @keyup.enter="login"
             type="password"
             id="password"
             v-model="loginInfo.password"
-            placeholder="密码"
+            placeholder="请输入密码"
           />
         </div>
         <button class="login-btn" @click="login">登 录</button>
       </div>
+      <footer class="login-footer">
+        Copyright &copy; 2019 <a href="javascript:void(0)">讯飞启明</a>.
+      </footer>
     </main>
 
     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
@@ -48,10 +53,6 @@
         <el-button type="primary" @click="loginWithSms">确 定</el-button>
       </span>
     </el-dialog>
-
-    <footer class="login-footer">
-      Copyright &copy; 2019 <a href="javascript:void(0)">讯飞启明</a>.
-    </footer>
   </div>
 </template>
 
@@ -128,7 +129,8 @@ export default {
           this.$router.replace({ path: "/home/overview" });
           this.$notify({
             message: "登录成功",
-            type: "success"
+            type: "success",
+            duration: 1000
           });
         })
         .catch(error => {
@@ -172,7 +174,13 @@ export default {
 </script>
 
 <style scoped>
-.login-header {
+.bg {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../assets/images/bg.jpg");
+  background-size: cover;
+}
+/* .login-header {
   font-family: "Microsoft YaHei";
   width: 990px;
   height: 80px;
@@ -181,7 +189,7 @@ export default {
   display: flex;
   align-items: center;
   justify-items: center;
-}
+} */
 
 .qm-logo-text {
   font-size: 36px;
@@ -192,81 +200,133 @@ export default {
   margin-left: 40px;
 }
 
+.logo-text {
+  font-family: "Xingkai SC", "STXingkai", "KaiTi";
+  width: 200px;
+  height: 40px;
+  font-size: 40px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 48px;
+  letter-spacing: 0px;
+  color: #3968d7;
+  text-shadow: 0px 7px 4px rgba(77, 124, 196, 0.3);
+  margin-bottom: 30px;
+}
+
 .login-main {
   width: 100%;
-  min-width: 990px;
-  min-height: 550px;
-  background-image: url("../assets/images/login_main_bg_full.png");
+  height: 100vh;
+  /* min-width: 990px;
+  min-height: 550px; */
+  /* background-image: url("../assets/images/login_main_bg_full.png"); */
 
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-items: center;
-  justify-content: space-evenly;
+  justify-content: center;
+  /* justify-content: space-evenly; */
 }
-
+/*
 .left_tree {
   height: 500px;
-}
+} */
 
 .right_login {
-  width: 420px;
+  /* width: 420px;
   background-color: #fff;
-  border-radius: 16px;
-  box-shadow: 0 13px 29px #0d3b5d;
+  border-radius: 16px; */
+  /* box-shadow: 0 13px 29px #0d3b5d; */
+
+  width: 520px;
+  height: 350px;
+  background-color: #ffffff;
+  box-shadow: 0px 7px 20px 0px rgba(77, 124, 196, 0.1);
+  border-radius: 38px;
+  opacity: 0.85;
+
+  padding: 0 80px;
 }
+
+.right_login h1 {
+  /* font-size: 34px;
+  color: #fff; */
+  /* text-shadow: 0 8px 13px #0d72ac; */
+  text-align: center;
+
+  height: 20px;
+
+  font-size: 20px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: #666666;
+
+  margin: 40px 0;
+
+  /* border-top: 16px solid #3c8dbc;
+  border-radius: 16px 16px 0 0; */
+  /* background-color: #3c8dbc; */
+  /* padding: 10px;
+  margin: 0; */
+}
+
 .right_login .username {
-  width: 320px;
+  /* width: 320px; */
   height: 46px;
-  border-bottom: 1px solid #999;
-  margin: 54px 0 0 50px;
-  padding-bottom: 5px;
+  /* border-bottom: 1px solid #999; */
+  /* margin: 54px 0 0 50px; */
+  /* padding-bottom: 5px; */
 
   display: flex;
   align-items: center;
   justify-items: center;
+  /* margin-top: 40px; */
 }
 .right_login .password {
-  width: 320px;
+  /* width: 320px; */
   height: 46px;
-  border-bottom: 1px solid #999;
-  margin: 30px 0 0 50px;
-  padding-bottom: 5px;
+  /* border-bottom: 1px solid #999; */
+  /* margin: 30px 0 0 50px;
+  padding-bottom: 5px; */
 
   display: flex;
   align-items: center;
   justify-items: center;
-}
-
-.right_login h1 {
-  font-size: 34px;
-  color: #fff;
-  text-shadow: 0 8px 13px #0d72ac;
-  text-align: center;
-
-  border-top: 16px solid #3c8dbc;
-  border-radius: 16px 16px 0 0;
-  background-color: #3c8dbc;
-  padding: 10px;
-  margin: 0;
+  margin-top: 30px;
 }
 
 .right_login input {
   width: 100%;
-  padding: 10px 10px;
-  margin-left: 10px;
+  padding: 10px 30px;
+  margin-left: -28px;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.right_login input::placeholder {
+  /* width: 100%; */
+  /* padding: 10px 30px; */
+  /* margin-left: 40px; */
   font-size: 16px;
+  color: #000000;
+  opacity: 0.3;
 }
 
 .login-btn {
-  margin-top: 20px;
-  margin-left: 50px;
+  margin-top: 30px;
+  /* margin-left: 50px; */
   margin-bottom: 20px;
-  width: 320px;
-  height: 60px;
-  background-color: #20a0ff;
+  width: 100%;
+  /* width: 320px;
+  height: 60px; */
+  background-color: #4d7cc4;
   font-size: 25px;
   color: #fff;
   cursor: pointer;
+
+  border-radius: 27px;
 }
 
 .login-btn:hover {
@@ -275,11 +335,18 @@ export default {
 
 .login-footer {
   clear: both;
-  width: 100%;
-  min-width: 990px;
+  /* width: 100%; */
+  /* min-width: 990px; */
+  width: 240px;
+  height: 40px;
+  line-height: 40px;
   background-color: #fff;
+  color: #999999;
 
-  margin: 10px auto;
+  margin: -20px auto;
   text-align: center;
+
+  border-radius: 25px;
+  z-index: 3;
 }
 </style>

src/modules/portal/views/home/Home.vue

@@ -11,9 +11,14 @@
             云平台主页
           </router-link>
         </el-menu-item>
-        <el-menu-item index="4" style="float: right;" title="退出系统">
+        <el-menu-item
+          index="4"
+          style="float: right;"
+          title="退出系统"
+          @click="logout"
+        >
           <v-icon name="sign-out-alt" />
-          <span @click="logout" style="cursor: pointer"> 退出 </span>
+          <span style="cursor: pointer"> 退出 </span>
         </el-menu-item>
         <el-menu-item index="3" style="float: right;" title="个人信息管理">
           <v-icon name="user" />