gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

卡片放大：3列网格、52px温度大字、加宽间距、整体放大 ~30%

Browse Source
This commit is contained in:
2569718930@qq.com
2026-05-13 20:05:16 +08:00
parent ded09df749
commit 8dd212f0af
1 changed files with 39 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
monitoring-web/static/style.css
+39 -43
View File
@@ -8,49 +8,43 @@ body {
} }
.page { .page {
max-width: 1400px; max-width: 1500px;
margin: 0 auto; margin: 0 auto;
padding: 20px 24px; padding: 24px 28px;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
margin-bottom: 24px; margin-bottom: 28px;
padding-bottom: 12px; padding-bottom: 14px;
border-bottom: 1px solid #1e2130; border-bottom: 1px solid #1e2130;
} }
.header h1 { .header h1 {
font-size: 22px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #e8eaed; color: #e8eaed;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.updated {
font-size: 13px;
color: #5a6170;
}
/* ── grid ── */ /* ── grid ── */
.card-grid { .card-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 14px; gap: 18px;
} }
@media (max-width: 1280px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }
/* ── card ── */ /* ── card ── */
.card { .card {
background: #161822; background: #161822;
border: 1px solid #1e2130; border: 1px solid #1e2130;
border-radius: 10px; border-radius: 12px;
padding: 16px 18px; padding: 22px 26px;
transition: border-color 0.3s, box-shadow 0.3s; transition: border-color 0.3s, box-shadow 0.3s;
position: relative; position: relative;
} }
@@ -63,30 +57,32 @@ body {
.card-top { .card-top {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
margin-bottom: 10px; margin-bottom: 14px;
font-size: 13px; font-size: 15px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.city-name { .city-name {
color: #e0e3e8; color: #e0e3e8;
font-weight: 600; font-weight: 700;
} }
.airport { .airport {
color: #6a7180; color: #6a7180;
font-weight: 400;
} }
.local-time { .local-time {
margin-left: auto; margin-left: auto;
color: #4a5160; color: #4a5160;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 14px;
} }
.badge { .badge {
font-size: 11px; font-size: 12px;
padding: 1px 6px; padding: 2px 7px;
border-radius: 4px; border-radius: 4px;
font-weight: 600; font-weight: 600;
} }
@@ -96,25 +92,25 @@ body {
color: #a78bfa; color: #a78bfa;
} }
.new-high-card { .new-high-card {
border-color: rgba(124, 58, 237, 0.25); border-color: rgba(124, 58, 237, 0.30);
} }
/* ── temp ── */ /* ── temp ── */
.card-temp { .card-temp {
margin: 4px 0 6px; margin: 8px 0 10px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.15;
} }
.temp-value { .temp-value {
font-size: 40px; font-size: 52px;
color: #e8eaed; color: #e8eaed;
letter-spacing: -0.02em; letter-spacing: -0.03em;
} }
.temp-value.na { .temp-value.na {
color: #3a4050; color: #3a4050;
font-size: 28px; font-size: 32px;
} }
.temp-value.warm { .temp-value.warm {
color: #f59e0b; color: #f59e0b;
@@ -124,24 +120,24 @@ body {
} }
.temp-unit { .temp-unit {
font-size: 18px; font-size: 22px;
color: #5a6170; color: #5a6170;
margin-left: 2px; margin-left: 3px;
} }
/* ── meta ── */ /* ── meta ── */
.card-meta { .card-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 5px;
margin-bottom: 4px; margin-bottom: 2px;
} }
.meta-row { .meta-row {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 6px; gap: 8px;
font-size: 13px; font-size: 14px;
} }
.meta-row .label { .meta-row .label {
@@ -161,38 +157,38 @@ body {
} }
/* ── trend ── */ /* ── trend ── */
.trend { font-size: 15px; font-weight: 600; } .trend { font-size: 18px; font-weight: 700; }
.trend.rising { color: #34d399; } .trend.rising { color: #34d399; }
.trend.falling { color: #60a5fa; } .trend.falling { color: #60a5fa; }
.trend.flat { color: #5a6170; } .trend.flat { color: #5a6170; }
/* ── runway ── */ /* ── runway ── */
.card-runway { margin-top: 8px; } .card-runway { margin-top: 12px; }
.runway-divider { .runway-divider {
height: 1px; height: 1px;
background: #1e2130; background: #1e2130;
margin-bottom: 6px; margin-bottom: 8px;
} }
.runway-row { .runway-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 12px; font-size: 13px;
margin-bottom: 1px; margin-bottom: 2px;
} }
.runway-label { color: #4a5160; } .runway-label { color: #4a5160; }
.runway-temp { color: #7a8290; font-variant-numeric: tabular-nums; } .runway-temp { color: #7a8290; font-variant-numeric: tabular-nums; }
/* ── obs age ── */ /* ── obs age ── */
.obs-age { font-size: 12px; color: #5a6170; } .obs-age { font-size: 13px; color: #5a6170; }
/* ── HTMX indicator ── */ /* ── HTMX indicator ── */
.htmx-indicator { .htmx-indicator {
text-align: center; text-align: center;
padding: 12px; padding: 14px;
font-size: 13px; font-size: 14px;
color: #3a4050; color: #3a4050;
display: none; display: none;
} }