shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(login): 更新登录页面UI设计并添加背景图

Browse Source 
- 重新设计登录页面布局，增加右侧背景图区域
- 调整配色方案为深色主题，使用硬编码颜色值替换CSS变量
- 优化响应式设计，在移动设备上隐藏背景图
- 添加密码显示/隐藏切换按钮的图标组件
- 改进表单元素的视觉样式和交互效果
This commit is contained in:
anghunk
2026-02-04 16:55:17 +08:00
parent 287097ce76
commit 87cd6fc39d
3 changed files with 96 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
cwd-admin/src/styles/components/login.less
View File

@@ -1,22 +1,24 @@
.login-page { .login-page {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
min-height: 100vh; height: 100vh;
padding: 10px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
background: var(--bg-body); background: #FCFBF8;
background: radial-gradient(circle at top, var(--bg-hover) 0, var(--bg-body) 100%); }
.login-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
} }
.login-card { .login-card {
background-color: var(--bg-card); margin-top: -100px;
padding: 32px 32px 28px; padding: 32px 32px 28px;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-login);
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
box-sizing: border-box; box-sizing: border-box;
@@ -34,7 +36,7 @@
margin: 0; margin: 0;
font-size: inherit; font-size: inherit;
text-align: center; text-align: center;
color: var(--text-primary); color: #24292f;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@@ -45,7 +47,7 @@
margin: 8px 0 28px; margin: 8px 0 28px;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: var(--text-secondary); color: #57606a;
} }
.login-form { .login-form {
@@ -62,24 +64,23 @@
.form-label { .form-label {
font-size: 14px; font-size: 14px;
color: var(--text-secondary); color: #57606a;
} }
.form-input { .form-input {
padding: 9px 12px; padding: 9px 12px;
border-radius: 8px; border-radius: 6px;
border: 1px solid var(--border-color); border: 1px solid #d0d7de;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
background-color: var(--bg-input); background-color: #fff;
color: var(--text-primary); color: #24292f;
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
} }
.form-input:focus { .form-input:focus {
border-color: var(--primary-color); border-color: #1E1E1E;
background-color: var(--bg-input); box-shadow: 0 0 0 1px #1E1E1E47;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
} }
.form-input-wrapper { .form-input-wrapper {
@@ -104,33 +105,33 @@
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: #57606a;
padding: 0; padding: 0;
} }
.password-toggle:hover { .password-toggle:hover {
color: var(--text-primary); color: #24292f;
} }
.form-error { .form-error {
font-size: 13px; font-size: 13px;
color: var(--color-danger); color: #d1242f;
margin-top: 4px; margin-top: 4px;
} }
.form-button { .form-button {
margin-top: 8px; margin-top: 8px;
padding: 10px 0; padding: 10px 0;
border-radius: 30px; border-radius: 6px;
border: none; border: none;
background: var(--primary-color); background: #1E1E1E;
color: var(--text-inverse); color: #ffffff;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease,
background 0.12s ease; background 0.12s ease;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.28); box-shadow: 0 10px 25px #1E1E1E47;
width: 100%; width: 100%;
} }
@@ -144,12 +145,12 @@
.form-button:not(:disabled):hover { .form-button:not(:disabled):hover {
filter: brightness(1.03); filter: brightness(1.03);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.32); box-shadow: 0 14px 30px #1E1E1E47;
} }
.form-button:not(:disabled):active { .form-button:not(:disabled):active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.26); box-shadow: 0 8px 20px #1E1E1E47;
} }
.login-link { .login-link {
@@ -162,11 +163,29 @@
} }
.login-link a { .login-link a {
color: var(--text-secondary); color: #57606a;
text-decoration: none; text-decoration: none;
} }
.login-link a:hover { .login-link a:hover {
color: var(--primary-color); color: #1E1E1E;
text-decoration: underline; text-decoration: underline;
}
.login-bg {
width: 50%;
height: 100%;
background: url(../images/bg.webp) no-repeat center;
background-size: cover;
border-radius: 10px;
}
@media(max-width:1024px) {
.login-card {
padding: 32px 20px 28px;
}
.login-bg {
display: none;
}
} }

BIN
cwd-admin/src/styles/images/bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

86
cwd-admin/src/views/LoginView/index.vue
View File

@@ -1,47 +1,55 @@
<template> <template>
<div class="login-page"> <div class="login-page">
<div class="login-card"> <div class="login-container">
<img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" /> <div class="login-card">
<div class="login-subtitle"> <img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" />
<h1 class="login-title">CWD</h1> <div class="login-subtitle">
- 简洁的自托管评论系统管理面板 <h1 class="login-title">CWD</h1>
</div> - 简洁的自托管评论系统管理面板
<form class="login-form" @submit.prevent="handleSubmit">
<div class="form-item">
<label class="form-label">API 地址</label>
<input v-model="apiBaseUrl" class="form-input" type="text" />
</div> </div>
<div class="form-item"> <form class="login-form" @submit.prevent="handleSubmit">
<label class="form-label">管理员账号</label> <div class="form-item">
<input v-model="name" class="form-input" type="text" autocomplete="username" /> <label class="form-label">API 地址</label>
</div> <input v-model="apiBaseUrl" class="form-input" type="text" />
<div class="form-item">
<label class="form-label">密码</label>
<div class="form-input-wrapper">
<input
v-model="password"
class="form-input"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
/>
<button
type="button"
class="password-toggle"
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@click="showPassword = !showPassword"
>
<PhEye v-if="!showPassword" :size="16" />
<PhEyeSlash v-else :size="16" />
</button>
</div> </div>
</div> <div class="form-item">
<div v-if="error" class="form-error">{{ error }}</div> <label class="form-label">管理员账号</label>
<button class="form-button" type="submit" :disabled="submitting"> <input
<span v-if="submitting">登录中...</span> v-model="name"
<span v-else>登录</span> class="form-input"
</button> type="text"
</form> autocomplete="username"
/>
</div>
<div class="form-item">
<label class="form-label">密码</label>
<div class="form-input-wrapper">
<input
v-model="password"
class="form-input"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
/>
<button
type="button"
class="password-toggle"
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@click="showPassword = !showPassword"
>
<PhEye v-if="!showPassword" :size="16" />
<PhEyeSlash v-else :size="16" />
</button>
</div>
</div>
<div v-if="error" class="form-error">{{ error }}</div>
<button class="form-button" type="submit" :disabled="submitting">
<span v-if="submitting">登录中...</span>
<span v-else>登录</span>
</button>
</form>
</div>
</div> </div>
<div class="login-bg"></div>
</div> </div>
</template> </template>