登录页修改

frontend/src/views/login.vue

@@ -1,48 +1,67 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <div class="login-card">
-      <h3 class="title">{{title}}</h3>
+      <aside class="brand-panel">
-      <el-form-item prop="username">
+        <div class="brand-main">
-        <el-input
+          <div class="brand-mark" aria-hidden="true">教</div>
-          v-model="loginForm.username"
+          <h1 class="brand-title">{{ title }}</h1>
-          type="text"
+          <p class="brand-tagline">开课计划 · 课表编排 · 成绩管理 · 教学分析</p>
-          auto-complete="off"
+          <ul class="feature-list">
-          placeholder="账号"
+            <li v-for="item in features" :key="item">{{ item }}</li>
-        >
+          </ul>
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
-      </el-form-item>
+        <p class="brand-footnote">仅限授权单位内部使用</p>
-    </el-form>
+      </aside>
-    <!--  底部  -->
+
-    <div class="el-login-footer">
+      <section class="form-panel">
-      <span>{{ footerContent }}</span>
+        <div class="form-heading">
+          <h2>用户登录</h2>
+          <p>请使用内网账号进入系统</p>
+        </div>
+
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="top" @submit.native.prevent>
+          <el-form-item label="用户名" prop="username">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              auto-complete="off"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              auto-complete="off"
+              placeholder="请输入密码"
+              show-password
+              @keyup.enter.native="handleLogin"
+            />
+          </el-form-item>
+          <div class="form-extra">
+            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+            <router-link v-if="register" class="register-link" to="/register">立即注册</router-link>
+          </div>
+          <el-form-item class="login-action">
+            <el-button
+              :loading="loading"
+              type="primary"
+              class="login-btn"
+              native-type="submit"
+              @click.native.prevent="handleLogin"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <p class="access-hint">登录后按账号权限进入对应业务，请妥善保管账号与口令。</p>
+        <div class="role-tags" aria-label="系统角色">
+          <span v-for="role in roles" :key="role.name" class="role-tag" :class="role.tone">{{ role.name }}</span>
+        </div>
+        <p class="form-footer">{{ footerContent }}</p>
+      </section>
     </div>
   </div>
 </template>
@@ -56,7 +75,20 @@ export default {
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
-      footerContent: "Copyright © 2018-2026 roomroot. All Rights Reserved.",
+      footerContent: "Copyright © 2018-2026 教学管理信息系统 内部使用",
+      features: [
+        "内部局域网部署，教学数据不出内网",
+        "学期课表、成绩与教学日志闭环管理",
+        "适配国产化麒麟操作系统",
+        "关键操作二次确认，全程日志留痕"
+      ],
+      roles: [
+        { name: "系统管理员", tone: "admin" },
+        { name: "教务人员", tone: "affairs" },
+        { name: "教研室", tone: "office" },
+        { name: "教员", tone: "teacher" },
+        { name: "学员", tone: "student" }
+      ],
       loginForm: {
         username: "admin",
         password: "admin123",
@@ -71,7 +103,6 @@ export default {
         ]
       },
       loading: false,
-      // 注册开关
       register: false,
       redirect: undefined
     }
@@ -132,49 +163,289 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  min-height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  padding: 28px 20px;
-  background-size: cover;
+  background:
+    radial-gradient(circle at 18% 16%, rgba(11, 107, 85, 0.28), transparent 42%),
+    radial-gradient(circle at 86% 82%, rgba(198, 155, 60, 0.10), transparent 36%),
+    #10241f;
 }
-.title {
+
-  margin: 0px auto 30px auto;
+.login-card {
-  text-align: center;
+  display: flex;
-  color: #707070;
+  width: min(1080px, 100%);
+  overflow: hidden;
+  background: linear-gradient(160deg, #0c7a62 0%, #0b6b55 46%, #084c3f 100%);
+  border-radius: 18px;
+  box-shadow: 0 22px 56px rgba(8, 36, 30, 0.32);
+}
+
+.brand-panel {
+  display: flex;
+  flex-direction: column;
+  width: 42%;
+  padding: 48px 40px 24px;
+  color: #ffffff;
+  background: transparent;
+}
+
+.brand-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.brand-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 22px;
+  color: #7a5410;
+  font-size: 26px;
+  font-weight: 700;
+  background: #e4c56a;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(16, 36, 28, 0.18);
+}
+
+.brand-title {
+  margin: 0 0 10px;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: 1px;
+}
+
+.brand-tagline {
+  margin: 0 0 28px;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 13px;
+  letter-spacing: 0.4px;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feature-list li {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 14px 16px;
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 14px;
+  line-height: 1.5;
+  background: rgba(6, 38, 32, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+}
+
+.brand-footnote {
+  margin: 16px 0 0;
+  color: rgba(255, 255, 255, 0.52);
+  font-size: 12px;
+}
+
+.form-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 56px 56px 28px;
+  background: #ffffff;
+}
+
+.form-heading {
+  margin-bottom: 32px;
+}
+
+.form-heading h2 {
+  margin: 0 0 8px;
+  color: #172b25;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.form-heading p {
+  margin: 0;
+  color: #7a8a85;
+  font-size: 14px;
 }
 
 .login-form {
-  border-radius: 6px;
+  ::v-deep .el-form-item {
-  background: #ffffff;
+    margin-bottom: 22px;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
   }
-  .input-icon {
+
-    height: 39px;
+  ::v-deep .el-form-item__label {
-    width: 14px;
+    float: none;
-    margin-left: 2px;
+    display: block;
+    padding: 0 0 8px;
+    line-height: 1.2;
+    color: #172b25;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  ::v-deep .el-form-item__content {
+    margin-left: 0 !important;
+    line-height: normal;
+  }
+
+  ::v-deep .el-input__inner {
+    height: 48px;
+    padding: 0 16px;
+    color: #172b25;
+    background: #f3f6f5;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    box-shadow: none;
+  }
+
+  ::v-deep .el-input__inner:hover {
+    border-color: #c8d8d2;
+  }
+
+  ::v-deep .el-input__inner:focus {
+    background: #ffffff;
+    border-color: #0b6b55;
+    box-shadow: 0 0 0 3px rgba(11, 107, 85, 0.10);
+  }
+
+  ::v-deep .el-input__suffix {
+    right: 10px;
+  }
+
+  ::v-deep .el-form-item__error {
+    padding-top: 4px;
   }
 }
-.login-tip {
+
+.form-extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: -6px 0 18px;
+
+  ::v-deep .el-checkbox__label {
+    color: #52645f;
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+.register-link {
+  color: #0b6b55;
   font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
 }
-.el-login-footer {
+
-  height: 40px;
+.login-action {
-  line-height: 40px;
+  margin-bottom: 0;
-  position: fixed;
+}
-  bottom: 0;
+
+.login-btn {
   width: 100%;
-  text-align: center;
+  height: 48px;
-  color: #fff;
+  font-size: 16px;
-  font-family: Arial;
+  font-weight: 600;
+  letter-spacing: 6px;
+  border-radius: 10px;
+}
+
+.access-hint {
+  margin: 18px 0 16px;
+  color: #7a8a85;
   font-size: 12px;
-  letter-spacing: 1px;
+  line-height: 1.6;
+}
+
+.role-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.role-tag {
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.6;
+  border-radius: 999px;
+}
+
+.role-tag.admin {
+  color: #3d6ea8;
+  background: #e8f1fb;
+}
+
+.role-tag.affairs {
+  color: #0b6b55;
+  background: #e8f3ef;
+}
+
+.role-tag.office {
+  color: #b77a17;
+  background: #f8f1e4;
+}
+
+.role-tag.teacher {
+  color: #6b5b93;
+  background: #f0eaf6;
+}
+
+.role-tag.student {
+  color: #9a7424;
+  background: #f7f0de;
+}
+
+.form-footer {
+  margin-top: auto;
+  padding-top: 28px;
+  color: #9aa7a3;
+  font-size: 12px;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .login {
+    align-items: flex-start;
+    padding: 16px;
+  }
+
+  .login-card {
+    flex-direction: column;
+  }
+
+  .brand-panel {
+    width: 100%;
+    padding: 28px 24px 20px;
+  }
+
+  .brand-title {
+    font-size: 26px;
+  }
+
+  .form-panel {
+    padding: 32px 24px 20px;
+  }
+}
+
+@media (max-width: 640px) {
+  .feature-list li:nth-child(n + 3) {
+    display: none;
+  }
+
+  .form-heading h2 {
+    font-size: 24px;
+  }
 }
 </style>