소스 검색

登录页面不完全样式

Michael Wang 5 년 전
부모
커밋
9962872d96
1개의 변경된 파일37개의 추가작업 그리고 25개의 파일을 삭제
  1. 37 25
      src/features/Login/Login.vue

+ 37 - 25
src/features/Login/Login.vue

@@ -2,26 +2,27 @@
   <div class="user-login">
     <div class="user-login-bg"></div>
     <div class="content-wrapper">
-      <h2 class="slogan">
+      <!-- <h2 class="slogan">
         欢迎使用 <br />
         在线考试管理系统
-      </h2>
+      </h2> -->
       <div class="form-container">
-        <h4 class="form-title">登录</h4>
+        <div>
+          <img :src="schoolLogo" class="school-logo" alt="学校logo" />
+          <div class="text-center title">在线考试平台后台管理系统</div>
+        </div>
         <el-form ref="form" :model="user" label-width="0">
           <div class="form-items">
             <el-row class="form-item">
               <el-col>
                 <el-form-item
                   prop="username"
-                  :rules="[
-                    { required: true, message: '会员名/邮箱/手机号不能为空' },
-                  ]"
+                  :rules="[{ required: true, message: '用户名不能为空' }]"
                 >
                   <div class="form-line">
-                    <i class="el-icon-user input-icon"></i>
                     <el-input
-                      placeholder="会员名/邮箱/手机号"
+                      prefix-icon="el-icon-user"
+                      placeholder="请输入用户名"
                       v-model="user.username"
                     ></el-input>
                   </div>
@@ -35,10 +36,10 @@
                   :rules="[{ required: true, message: '密码不能为空' }]"
                 >
                   <div class="form-line">
-                    <i class="el-icon-lock input-icon"></i>
                     <el-input
+                      prefix-icon="el-icon-lock"
                       type="password"
-                      placeholder="密码"
+                      placeholder="请输入密码"
                       v-model="user.password"
                     ></el-input>
                   </div>
@@ -49,7 +50,7 @@
               <el-col>
                 <el-form-item>
                   <div v-show="user.errorInfo">
-                    {{ user.errorInfo }}
+                    <i class="el-icon-error"></i>{{ user.errorInfo }}
                   </div>
                 </el-form-item>
               </el-col>
@@ -84,6 +85,7 @@
         </el-form>
       </div>
     </div>
+    <div class="footer">Copyright © www.qmth.com.cn, All Rights Reserved.</div>
   </div>
 </template>
 
@@ -109,7 +111,7 @@ export default {
     const res = await this.$http.get(
       "/api/admin/sys/org/queryByOrgCode?" +
         object2QueryString({
-          name: ORG_CODE,
+          code: ORG_CODE,
         })
     );
     this.schoolLogo = res.data.data.logo;
@@ -203,13 +205,6 @@ export default {
       left: 0;
       width: 100%;
       box-sizing: border-box;
-      border-width: 1px;
-      border-style: solid;
-      border-top: 0;
-      border-left: 0;
-      border-right: 0;
-      border-color: #dcdcdc;
-      border-radius: 0;
     }
   }
   .el-input {
@@ -222,12 +217,6 @@ export default {
       font-size: 13px;
     }
   }
-  .form-title {
-    margin: 0 0 20px;
-    text-align: center;
-    color: #3080fe;
-    letter-spacing: 12px;
-  }
   .input-icon {
     color: #999;
   }
@@ -268,9 +257,32 @@ export default {
     }
   }
 }
+.school-logo {
+  text-align: center;
+  height: 60px;
+  width: 200px;
+}
+.title {
+  color: #626a82;
+  font-size: 18px;
+  font-weight: 700;
+
+  margin-bottom: 30px;
+}
+.form-item {
+  margin-bottom: 5px;
+}
 .error-info {
   height: 30px;
   overflow: hidden;
   color: red;
 }
+
+.footer {
+  bottom: 10px;
+  position: absolute;
+  font-size: 12px;
+  text-align: center;
+  width: 100%;
+}
 </style>