feat: introduce PolyWeather web map API and frontend with integrated weather data collection and analysis.
This commit is contained in:
2569718930@qq.com
+7
-1
@@ -18,6 +18,7 @@ Production URL:
|
||||
- Vercel serves the web UI
|
||||
- FastAPI on VPS serves API only
|
||||
- The old FastAPI static website has been removed
|
||||
- The production page shell is still the legacy dashboard embedded by `app/page.tsx`
|
||||
|
||||
Current request flow:
|
||||
- Browser -> Vercel frontend
|
||||
@@ -52,6 +53,11 @@ Thin BFF routes currently exposed by Next:
|
||||
- `GET /api/city/[name]`
|
||||
- `GET /api/history/[name]`
|
||||
|
||||
Current frontend behavior:
|
||||
- `/` keeps the world overview layout
|
||||
- City clicks stay inside the same layout and load the right-side panel
|
||||
- Future forecast dates open a modal instead of mutating the base panel
|
||||
|
||||
## Vercel Deployment
|
||||
|
||||
1. Import the repo into Vercel
|
||||
@@ -65,4 +71,4 @@ Thin BFF routes currently exposed by Next:
|
||||
- The page shell currently embeds the legacy dashboard HTML from `public/legacy/index.html`
|
||||
- If you change files under `public/static`, deploy to Vercel to make them live
|
||||
|
||||
Last updated: 2026-03-06
|
||||
Last updated: 2026-03-09
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
export default function HomePage() {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="h-screen w-screen overflow-hidden bg-black">
|
||||
<iframe
|
||||
title="PolyWeather Legacy Dashboard"
|
||||
src="/legacy/index.html?v=legacy-v3"
|
||||
src="/legacy/index.html?v=legacy-v15"
|
||||
className="h-full w-full border-0"
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,47 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PolyWeather — 天气衍生品智能地图</title>
|
||||
<meta name="description" content="PolyWeather 天气衍生品智能地图。实时 METAR、MGM、DEB 融合预报与 AI 分析。">
|
||||
<title>PolyWeather - 天气衍生品智能地图</title>
|
||||
<meta name="description" content="PolyWeather 天气衍生品智能地图，聚合 METAR、MGM、DEB、多模型预报与历史对账分析。">
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<!-- Google Fonts: Inter -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/static/style.css?v=legacy-v3">
|
||||
<link rel="stylesheet" href="/static/style.css?v=legacy-v15">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ── Map ── -->
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- ── Header Overlay ── -->
|
||||
<header id="header">
|
||||
<div class="brand">
|
||||
<h1>🌡️ PolyWeather</h1>
|
||||
<h1>PolyWeather</h1>
|
||||
<span class="subtitle">天气衍生品智能分析</span>
|
||||
</div>
|
||||
<button class="info-btn" id="btnShowGuide" title="查看系统技术说明">ℹ️ 技术说明</button>
|
||||
<button class="info-btn" id="btnShowGuide" title="查看系统技术说明">技术说明</button>
|
||||
<div class="live-badge" id="liveBadge">
|
||||
<span class="pulse-dot"></span>
|
||||
<span>实时</span>
|
||||
</div>
|
||||
<button class="refresh-btn" id="refreshAllBtn" title="刷新所有数据">⟳</button>
|
||||
</div>
|
||||
<button class="refresh-btn" id="refreshAllBtn" title="刷新所有数据" aria-label="刷新所有数据">↻</button>
|
||||
</header>
|
||||
|
||||
<!-- ── City List Sidebar (left) ── -->
|
||||
<nav id="cityList" class="city-list">
|
||||
<div class="city-list-header">
|
||||
<span>🏙️ 监控城市</span>
|
||||
<span>监控城市</span>
|
||||
<span class="city-count" id="cityCount">0</span>
|
||||
</div>
|
||||
<div id="cityListItems" class="city-list-items">
|
||||
@@ -49,8 +43,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ── Detail Panel (right) ── -->
|
||||
<aside id="panel" class="detail-panel hidden">
|
||||
<aside id="panel" class="detail-panel hidden">
|
||||
<div class="panel-header">
|
||||
<button class="panel-close" id="panelClose">✕</button>
|
||||
<div class="panel-title-area">
|
||||
@@ -58,13 +51,12 @@
|
||||
<div class="panel-meta">
|
||||
<span id="panelRiskBadge" class="risk-badge">—</span>
|
||||
<span id="panelLocalTime" class="local-time">—</span>
|
||||
<button class="history-btn" id="btnShowHistory" title="查看历史记录与准确率">📊 历史对账</button>
|
||||
<button class="history-btn" id="btnShowHistory" title="查看历史记录与准确率">历史对账</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panelContent" class="panel-body">
|
||||
<!-- ── Temperature Hero ── -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-weather" id="heroWeather"></div>
|
||||
<div class="hero-temp">
|
||||
@@ -74,127 +66,111 @@
|
||||
<div class="hero-max-time" id="heroMaxTime"></div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-item">
|
||||
<span class="label">📍 当前实测</span>
|
||||
<span class="label">当前实测</span>
|
||||
<span class="value" id="heroCurrent">—</span>
|
||||
</div>
|
||||
<div class="hero-item">
|
||||
<span class="label">🎯 WU 结算</span>
|
||||
<span class="label">WU 结算参考</span>
|
||||
<span class="value highlight" id="heroWU">—</span>
|
||||
</div>
|
||||
<div class="hero-item">
|
||||
<span class="label">🧬 DEB 预测</span>
|
||||
<span class="label">DEB 预测</span>
|
||||
<span class="value" id="heroDEB">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-sub" id="heroSub">
|
||||
<!-- obs time, cloud, wind -->
|
||||
</div>
|
||||
<div class="hero-sub" id="heroSub"></div>
|
||||
</section>
|
||||
|
||||
<!-- ── Trend Sparkline ── -->
|
||||
<section class="chart-section">
|
||||
<h3>📊 今日温度走势</h3>
|
||||
<h3>今日温度走势</h3>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="tempChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-legend" id="chartLegend"></div>
|
||||
</section>
|
||||
|
||||
<!-- ── Probability Bars ── -->
|
||||
<section class="prob-section">
|
||||
<h3>🎲 结算概率分布</h3>
|
||||
<div id="probBars" class="prob-bars">
|
||||
<!-- Dynamically populated -->
|
||||
</div>
|
||||
<h3>结算概率分布</h3>
|
||||
<div id="probBars" class="prob-bars"></div>
|
||||
</section>
|
||||
|
||||
<!-- ── Multi-Model Comparison ── -->
|
||||
<section class="models-section">
|
||||
<h3>🔬 多模型预报</h3>
|
||||
<div id="modelBars" class="model-bars">
|
||||
<!-- Dynamically populated -->
|
||||
</div>
|
||||
<h3>多模型预报</h3>
|
||||
<div id="modelBars" class="model-bars"></div>
|
||||
</section>
|
||||
|
||||
<!-- ── Forecast Table ── -->
|
||||
<section class="forecast-section">
|
||||
<h3>📅 多日预报</h3>
|
||||
<h3>多日预报</h3>
|
||||
<div id="forecastTable" class="forecast-table"></div>
|
||||
<div class="sun-info" id="sunInfo"></div>
|
||||
</section>
|
||||
|
||||
<!-- ── AI Analysis ── -->
|
||||
<section class="ai-section">
|
||||
<h3>🤖 AI 深度分析</h3>
|
||||
<h3>AI 深度分析</h3>
|
||||
<div id="aiAnalysis" class="ai-box">
|
||||
<span class="ai-placeholder">点击城市后加载...</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ── Risk Profile ── -->
|
||||
<section class="risk-section">
|
||||
<h3>⚠️ 数据偏差风险</h3>
|
||||
<h3>数据偏差风险</h3>
|
||||
<div id="riskInfo" class="risk-info"></div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Loading Overlay ── -->
|
||||
<div id="loading" class="loading-overlay hidden">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>正在获取气象数据，请稍候...</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Technical Guide Modal ── -->
|
||||
<!-- 鈹€鈹€ Technical Guide Modal 鈹€鈹€ -->
|
||||
<div id="guideModal" class="modal-overlay hidden">
|
||||
<div class="modal-content large">
|
||||
<div class="modal-header">
|
||||
<h2>📚 PolyWeather 系统技术说明</h2>
|
||||
<button class="modal-close" id="guideModalClose">✕</button>
|
||||
<h2>📚 PolyWeather 系统技术说明</h2>
|
||||
<button class="modal-close" id="guideModalClose">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="guide-grid">
|
||||
<div class="guide-card">
|
||||
<h3>🧬 DEB 动态融合预测</h3>
|
||||
<p><b>Dynamic Ensemble Blending</b> 是系统的核心算法。它不只是简单的平均值，而是根据各个模型（ECMWF, GFS, MGM等）在**过去 30
|
||||
天**内的实际表现，动态分配权重。表现越稳的模型，在最终决策中占比越高。</p>
|
||||
<h3>🧮 DEB 动态融合预测</h3>
|
||||
<p><b>Dynamic Ensemble Blending</b> 是系统的核心预测层。它不是对 ECMWF、GFS、ICON、GEM、JMA 等模型的简单平均，而是结合最近样本表现、当前实况与城市偏置后得到的动态加权结果。</p>
|
||||
</div>
|
||||
<div class="guide-card">
|
||||
<h3>🎲 结算概率引擎 (μ)</h3>
|
||||
<p>基于正态分布模型。我们提取所有预报模型的离散度作为**不确定性系数 ($\sigma$)**，结合 DEB 预测值作为**期望值 ($\mu$)**。这能告诉你某个温度区间（如 10°C
|
||||
盘口）发生的真实概率，辅助对冲决策。</p>
|
||||
<h3>🎯 结算概率引擎</h3>
|
||||
<p>右侧的结算概率分布基于 DEB 预测值与多模型离散度动态计算。μ代表当前分布中心，会随着模型、实况和时间变化而变动，不是固定预报值。</p>
|
||||
</div>
|
||||
<div class="guide-card">
|
||||
<h3>📍 结算点 (Airport) 逻辑</h3>
|
||||
<p>Polymarket 结算是以**机场 METAR
|
||||
气象站**为准。在安卡拉等复杂城市，我们同时监控**市中心总站**（潜力热岛）和**机场站**（物理结算点）。当两者温差巨大时，往往预示着随后的补涨跳升机会。</p>
|
||||
<h3>✈️ 结算点与主观测源</h3>
|
||||
<p>Polymarket 结算逻辑以机场 METAR 为主。系统现在优先使用 Aviation Weather API 的机场报文与原始 METAR，并区分观测时间与接收时间，避免把发布延迟误认成温度变化。</p>
|
||||
</div>
|
||||
<div class="guide-card">
|
||||
<h3>⚠️ 风险偏置档案</h3>
|
||||
<p>系统记录了每个城市机场站与市区的距离、海拔差及季度性偏差。例如，首尔仁川机场因靠海，最高温通常比市区偏低；慕尼黑机场因海拔高，夜间降温极快。这些偏置已自动整合进 AI 分析逻辑中。
|
||||
</p>
|
||||
<h3>📍 Ankara 专属增强</h3>
|
||||
<p>Ankara 不走通用城市逻辑。结算主站以 LTAC / Esenboğa 为准，周边领先信号优先参考 Turkish MGM 站网，其中 <b>Ankara (Bölge/Center)</b> 是重点监控站，不由 Etimesgut 代替。</p>
|
||||
</div>
|
||||
<div class="guide-card">
|
||||
<h3>📈 未来日期概率分布</h3>
|
||||
<p>当你切换到未来 3-5 天时，系统会基于各模型对该日期的预报分歧度重新计算概率。分歧越大，分布越扁平（风险高）；共识越强，分布越尖锐（机会明朗）。</p>
|
||||
<h3>📆 未来日期分析</h3>
|
||||
<p>点击多日预报后打开的模态框，主要用于分析下一个交易日。 6-48 小时趋势以 weather.gov 和 Open-Meteo 为主，部分城市可会补充 Meteoblue； 0-2 小时临近判断则优先看 METAR 与周边站。</p>
|
||||
</div>
|
||||
<div class="guide-card">
|
||||
<h3>📊 历史对账规则</h3>
|
||||
<p>历史准确率对账只统计已结算的样本。网页端采用近15天滚动视图，机器人 /deb 报告采用近7天窗口，不把当天未结算的样本算入胜率和 MAE。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guide-footer">
|
||||
<p>※ 数据来源：NOAA METAR, Turkish MGM, Open-Meteo Ensemble, Meteoblue, NWS.</p>
|
||||
<p>※ 数据源以 Aviation Weather / METAR、Turkish MGM、Open-Meteo、weather.gov 为主，部分城市补充 Meteoblue。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── History Chart Modal ── -->
|
||||
<!-- 鈹€鈹€ History Chart Modal 鈹€鈹€ -->
|
||||
<div id="historyModal" class="modal-overlay hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>📊 <span id="historyModalTitle">历史准确率</span></h2>
|
||||
<button class="modal-close" id="historyModalClose">✕</button>
|
||||
<h2>📊 <span id="historyModalTitle">历史准确率对账</span></h2>
|
||||
<button class="modal-close" id="historyModalClose">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="history-stats" id="historyStats"></div>
|
||||
@@ -205,13 +181,61 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="futureForecastModal" class="modal-overlay hidden">
|
||||
<div class="modal-content large future-modal">
|
||||
<div class="modal-header">
|
||||
<h2>📆 <span id="futureForecastTitle">未来日期分析</span></h2>
|
||||
<button class="modal-close" id="futureForecastClose" aria-label="关闭未来日期分析">✕</button>
|
||||
</div>
|
||||
<div class="modal-body future-modal-body">
|
||||
<div class="history-stats" id="futureForecastStats"></div>
|
||||
|
||||
<section class="future-modal-section">
|
||||
<h3>📈 温度走势</h3>
|
||||
<div class="history-chart-wrapper future-chart-wrapper">
|
||||
<canvas id="futureForecastChart"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="future-modal-grid">
|
||||
<section class="future-modal-section">
|
||||
<h3>🎯 结算概率分布</h3>
|
||||
<div id="futureProbBars" class="prob-bars future-prob-bars"></div>
|
||||
</section>
|
||||
|
||||
<section class="future-modal-section">
|
||||
<h3>🧮 多模型预报</h3>
|
||||
<div id="futureModelBars" class="model-bars"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="future-modal-grid">
|
||||
<section class="future-modal-section">
|
||||
<h3><span class="section-inline-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5"/><path d="M10 19V10"/><path d="M16 19V7"/><path d="M22 19V13"/></svg></span>未来 6-48 小时趋势</h3>
|
||||
<div id="futureTrendGrid" class="future-trend-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="future-modal-section">
|
||||
<h3>⏱ 未来 0-2 小时临近判断</h3>
|
||||
<div id="futureNowcast" class="future-text-block"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<!-- Leaflet Heatmap Plugin -->
|
||||
<script src="https://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
||||
<script src="/static/app.js?v=legacy-v3"></script>
|
||||
<script src="/static/app.js?v=legacy-v15"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+927
-452
File diff suppressed because it is too large
Load Diff
@@ -1148,9 +1148,11 @@ body {
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
max-height: calc(100vh - 48px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@@ -1180,6 +1182,7 @@ body {
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.history-stats {
|
||||
@@ -1242,6 +1245,173 @@ body {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.modal-content.large.future-modal {
|
||||
width: min(96vw, 1720px);
|
||||
max-width: 1720px;
|
||||
}
|
||||
|
||||
.future-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.future-modal-section {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.future-modal-section h3 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-inline-icon {
|
||||
display: inline-flex;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-cyan);
|
||||
flex: 0 0 16px;
|
||||
}
|
||||
|
||||
.section-inline-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.future-modal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.future-chart-wrapper {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.future-prob-bars .prob-bar-fill {
|
||||
min-width: 56px;
|
||||
}
|
||||
|
||||
.future-trend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.future-trend-card {
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.future-trend-label {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.future-trend-value {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.future-trend-note {
|
||||
margin-top: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.future-trend-value.warm {
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.future-trend-value.cold {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.future-text-block {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.future-text-block strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.future-front-score {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.future-front-bar {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(255,255,255,0.06) 50%, rgba(52, 211, 153, 0.35));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.future-front-bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--score-position, 50%);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-cyan);
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
|
||||
}
|
||||
|
||||
.future-front-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.future-front-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.future-modal-grid,
|
||||
.future-trend-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.future-trend-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.guide-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user