xuans/Scert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善首页基本信息单板块布局

Browse Source
This commit is contained in:
xuans 2026-09-25 15:41:07 +08:00
parent a1ea40fe3c
commit 040ad2ed49
3 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/views/Dashboard/Dashboard.css
View File

@ -171,29 +171,28 @@ h2 {
.overview-domain-field strong { .overview-domain-field strong {
font-size: 14px; font-size: 14px;
} }
.metrics-grid { .overview-details-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 14px; gap: 14px;
margin-bottom: 18px;
} }
.metric-card, .overview-detail-card,
.panel { .panel {
border: 1px solid #e2e8f2; border: 1px solid #e2e8f2;
border-radius: 20px; border-radius: 20px;
background: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.86);
box-shadow: 0 10px 30px rgba(31, 50, 87, 0.04); box-shadow: 0 10px 30px rgba(31, 50, 87, 0.04);
} }
.metric-card { .overview-detail-card {
padding: 22px; padding: 22px;
} }
.metric-card span, .overview-detail-card span,
.domain-row span, .domain-row span,
.muted { .muted {
color: #7a879d; color: #7a879d;
font-size: 13px; font-size: 13px;
} }
.metric-card strong { .overview-detail-card strong {
display: block; display: block;
margin-top: 13px; margin-top: 13px;
font-size: 28px; font-size: 28px;
@ -615,7 +614,7 @@ code {
.overview-domain-row { .overview-domain-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.metrics-grid { .overview-details-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.operation-columns { .operation-columns {

47
frontend/src/views/Dashboard/Dashboard.vue
View File

@ -241,30 +241,29 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
</div> </div>
</article> </article>
</div> </div>
</section> <div class="overview-details-grid">
<article class="overview-detail-card">
<section class="metrics-grid"> <span>服务版本</span>
<article class="metric-card"> <strong>{{ status?.version || "—" }}</strong>
<span>服务版本</span><strong>{{ status?.version || "—" }}</strong> </article>
</article> <article class="overview-detail-card">
<article class="metric-card"> <span>数据库</span>
<span>数据库</span <strong>{{
><strong>{{ displayLabel(
displayLabel( { sqlite: "SQLite", mysql: "MySQL" },
{ sqlite: "SQLite", mysql: "MySQL" }, status?.database_driver,
status?.database_driver, )
) }}</strong>
}}</strong> </article>
</article> <article class="overview-detail-card">
<article class="metric-card"> <span>HTTPS 模式</span>
<span>HTTPS 模式</span <strong>{{ displayLabel(httpsModeLabels, status?.https_mode) }}</strong>
><strong>{{ </article>
displayLabel(httpsModeLabels, status?.https_mode) <article class="overview-detail-card">
}}</strong> <span>托管域名</span>
</article> <strong>{{ domains.length }} 个</strong>
<article class="metric-card"> </article>
<span>托管域名</span><strong>{{ domains.length }}</strong> </div>
</article>
</section> </section>
</div> </div>

10
frontend/src/views/Dashboard/DashboardLayout.css
View File

@ -91,16 +91,16 @@
padding: 24px; padding: 24px;
} }
.overview-section > .metrics-grid { .overview-details-grid {
margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.metric-card { .overview-detail-card {
padding: 16px 18px; padding: 16px 18px;
border-radius: 14px; border-radius: 14px;
} }
.metric-card strong { .overview-detail-card strong {
margin-top: 8px; margin-top: 8px;
font-size: 20px; font-size: 20px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -212,7 +212,7 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.metrics-grid { .overview-details-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
} }