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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 100vh;
padding: 10px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
background: var(--bg-body);
background: radial-gradient(circle at top, var(--bg-hover) 0, var(--bg-body) 100%);
background: #FCFBF8;
}
.login-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
background-color: var(--bg-card);
margin-top: -100px;
padding: 32px 32px 28px;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-login);
width: 100%;
max-width: 420px;
box-sizing: border-box;
@@ -34,7 +36,7 @@
margin: 0;
font-size: inherit;
text-align: center;
color: var(--text-primary);
color: #24292f;
letter-spacing: 0.03em;
}
@@ -45,7 +47,7 @@
margin: 8px 0 28px;
font-size: 13px;
text-align: center;
color: var(--text-secondary);
color: #57606a;
}
.login-form {
@@ -62,24 +64,23 @@
.form-label {
font-size: 14px;
color: var(--text-secondary);
color: #57606a;
}
.form-input {
padding: 9px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
border: 1px solid #d0d7de;
font-size: 14px;
outline: none;
background-color: var(--bg-input);
color: var(--text-primary);
background-color: #fff;
color: #24292f;
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.form-input:focus {
border-color: var(--primary-color);
background-color: var(--bg-input);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
border-color: #1E1E1E;
box-shadow: 0 0 0 1px #1E1E1E47;
}
.form-input-wrapper {
@@ -104,33 +105,33 @@
border: none;
background: transparent;
cursor: pointer;
color: var(--text-secondary);
color: #57606a;
padding: 0;
}
.password-toggle:hover {
color: var(--text-primary);
color: #24292f;
}
.form-error {
font-size: 13px;
color: var(--color-danger);
color: #d1242f;
margin-top: 4px;
}
.form-button {
margin-top: 8px;
padding: 10px 0;
border-radius: 30px;
border-radius: 6px;
border: none;
background: var(--primary-color);
color: var(--text-inverse);
background: #1E1E1E;
color: #ffffff;
font-size: 15px;
cursor: pointer;
font-weight: 500;
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 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%;
}
@@ -144,12 +145,12 @@
.form-button:not(:disabled):hover {
filter: brightness(1.03);
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 {
transform: translateY(0);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.26);
box-shadow: 0 8px 20px #1E1E1E47;
}
.login-link {
@@ -162,11 +163,29 @@
}
.login-link a {
color: var(--text-secondary);
color: #57606a;
text-decoration: none;
}
.login-link a:hover {
color: var(--primary-color);
color: #1E1E1E;
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>
<div class="login-page">
<div class="login-card">
<img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" />
<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 class="login-container">
<div class="login-card">
<img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" />
<div class="login-subtitle">
<h1 class="login-title">CWD</h1>
- 简洁的自托管评论系统管理面板
</div>
<div class="form-item">
<label class="form-label">管理员账号</label>
<input v-model="name" class="form-input" type="text" 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>
<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 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 class="form-item">
<label class="form-label">管理员账号</label>
<input
v-model="name"
class="form-input"
type="text"
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 class="login-bg"></div>
</div>
</template>