前端UI界面美化--初版

frontend/src/views/Login.vue

@@ -1,19 +1,58 @@
 <template>
-  <div class="login-page">
-    <el-card class="login-card">
-      <h2 class="title">CTMS 登录</h2>
-      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" @keyup.enter.native="onSubmit">
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="form.username" autocomplete="username" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" type="password" autocomplete="current-password" show-password />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="loading" @click="onSubmit">登录</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+  <div class="login-container">
+    <div class="login-content">
+      <div class="login-brand">
+        <h1 class="brand-title">CTMS</h1>
+        <p class="brand-subtitle">临床试验管理系统</p>
+      </div>
+      
+      <el-card class="login-card">
+        <div class="login-header">
+          <h2 class="form-title">用户登录</h2>
+          <p class="form-desc">请输入您的账号与密码以访问系统</p>
+        </div>
+
+        <el-form 
+          :model="form" 
+          ref="formRef" 
+          :rules="rules" 
+          label-position="top"
+          @keyup.enter.native="onSubmit"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input 
+              v-model="form.username" 
+              placeholder="请输入用户名"
+              autocomplete="username"
+            />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input 
+              v-model="form.password" 
+              type="password" 
+              placeholder="请输入密码"
+              autocomplete="current-password" 
+              show-password 
+            />
+          </el-form-item>
+          
+          <div class="form-footer">
+            <el-button 
+              type="primary" 
+              :loading="loading" 
+              class="submit-btn"
+              @click="onSubmit"
+            >
+              登 录
+            </el-button>
+          </div>
+        </el-form>
+      </el-card>
+
+      <div class="login-footer">
+        <p>© 2025 Clinical Trial Management System. All Rights Reserved.</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,18 +95,100 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
-.login-page {
+.login-container {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: #f5f7fa;
+  background: radial-gradient(circle at 50% 50%, #f0f2f5 0%, #e6e9f0 100%);
+  position: relative;
+  overflow: hidden;
 }
-.login-card {
-  width: 360px;
+
+/* 装饰性背景元素，不使用外部资源 */
+.login-container::before {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  background: var(--ctms-primary);
+  opacity: 0.03;
+  border-radius: 50%;
+  top: -200px;
+  right: -200px;
 }
-.title {
+
+.login-content {
+  width: 400px;
+  z-index: 1;
+}
+
+.login-brand {
   text-align: center;
-  margin-bottom: 16px;
+  margin-bottom: 40px;
+}
+
+.brand-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--ctms-primary);
+  letter-spacing: 2px;
+  margin: 0;
+}
+
+.brand-subtitle {
+  font-size: 16px;
+  color: var(--ctms-text-secondary);
+  margin-top: 8px;
+}
+
+.login-card {
+  padding: 8px;
+}
+
+.login-header {
+  margin-bottom: 32px;
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  margin: 0;
+}
+
+.form-desc {
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+  margin-top: 8px;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 44px;
+  font-size: 16px;
+  margin-top: 16px;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 48px;
+}
+
+.login-footer p {
+  font-size: 12px;
+  color: var(--ctms-text-disabled);
+}
+
+:deep(.el-form-item__label) {
+  padding-bottom: 4px;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #d9d9d9 inset;
+}
+
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
 }
 </style>