style: 重构系统与安全环境设置页面卡片布局样式
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-27 21:46:57 +08:00
1 parent d11968d6da
commit 1c475a7e7a
1 file changed
+30 -31
+30 -31
View File
@@ -63,29 +63,26 @@
<div class="settings-container">
{#if activeTab === 'basic'}
<div class="settings-card full-width">
<h3 class="section-title">系统与安全环境</h3>
<div class="info-grid" style="margin: 0;">
<div class="info-item">
<span class="label">驱动框架</span>
<span class="value">SvelteKit 5 + Cloudflare</span>
</div>
<div class="info-item">
<span class="label">当前管理员</span>
<span class="value">{data.user?.email || '未知用户'}</span>
</div>
<div class="info-item">
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="info-item">
<span class="label">R2存储绑定</span>
<span class="value"><span class="badge">{data.r2Env}</span></span>
</div>
<div class="info-item">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
<div class="env-cards-grid">
<div class="env-card">
<span class="label">驱动框架</span>
<span class="value">SvelteKit 5 + Cloudflare</span>
</div>
<div class="env-card">
<span class="label">当前管理员</span>
<span class="value">{data.user?.email || '未知用户'}</span>
</div>
<div class="env-card">
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="env-card">
<span class="label">R2存储绑定</span>
<span class="value"><span class="badge">{data.r2Env}</span></span>
</div>
<div class="env-card">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</div>
@@ -393,28 +390,30 @@
flex-direction: column;
}
.info-grid {
.env-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px 20px;
background: transparent;
padding: 10px 0;
border: none;
gap: 16px;
width: 100%;
}
.info-item {
.env-card {
background: rgba(0, 0, 0, 0.03);
border: none;
border-radius: 0;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.info-item .label {
.env-card .label {
color: var(--text-muted, rgba(0, 0, 0, 0.6));
font-size: 0.85rem;
font-weight: 500;
}
.info-item .value {
.env-card .value {
color: var(--text-color);
font-weight: 600;
font-size: 0.95rem;