前端: 添加设置页面

This commit is contained in:
Frontend Developer 2026-03-10 09:54:22 +00:00
parent 4e448794f7
commit 59f60f2b96

View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CloudDisk - 设置</title>
<link rel="stylesheet" href="https://unpkg.com/antd@5.12.0/dist/reset.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; background: #f0f2f5; }
.header { background: linear-gradient(90deg, #1890ff, #40a9ff); padding: 16px 24px; color: white; display: flex; justify-content: space-between; align-items: center; }
.container { max-width: 800px; margin: 24px auto; }
.card { background: white; border-radius: 8px; padding: 24px; margin-bottom: 16px; }
.card-title { font-size: 16px; font-weight: bold; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.form-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.form-item:last-child { border-bottom: none; }
.label { color: #666; }
.value { color: #333; }
</style>
</head>
<body>
<div class="header">
<span>☁️ CloudDisk</span>
<span>设置</span>
</div>
<div class="container">
<div class="card">
<div class="card-title">账号设置</div>
<div class="form-item">
<span class="label">用户名</span>
<span class="value">admin</span>
</div>
<div class="form-item">
<span class="label">邮箱</span>
<span class="value">admin@example.com</span>
</div>
<div class="form-item">
<span class="label">存储空间</span>
<span class="value">2.1 GB / 10 GB</span>
</div>
<div class="form-item">
<span class="label">修改密码</span>
<span class="value"></span>
</div>
</div>
<div class="card">
<div class="card-title">主题设置</div>
<div class="form-item">
<span class="label">深色模式</span>
<span>关闭</span>
</div>
<div class="form-item">
<span class="label">语言</span>
<span>简体中文</span>
</div>
</div>
<div class="card">
<div class="card-title">同步设置</div>
<div class="form-item">
<span class="label">自动同步</span>
<span>开启</span>
</div>
<div class="form-item">
<span class="label">同步频率</span>
<span>每5分钟</span>
</div>
<div class="form-item">
<span class="label">仅WiFi同步</span>
<span>开启</span>
</div>
</div>
</div>
</body>
</html>