+
+
策略列表
+
+ {strategies.map((strategy) => (
+ - setSelectedStrategy(strategy.id)}
+ >
+ {strategy.name}
+
+ ))}
+
-
-
货币政策分析
-
货币供应量与经济增长的关系
-
-
-
-
财政政策评估
-
政府支出与税收对经济的影响
-
-
-
-
产业结构分析
-
不同产业对经济增长的贡献
+
+ {selectedStrategy === 'us-debt-gdp' && (
+
+
美国政府债务/GDP分析
+
+ 分析美国政府债务、GDP、债务/GDP比率以及债务利息/GDP比率的走势
+
+
+
+
美国政府债务走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
美国GDP走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
美国政府债务/GDP走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
美国政府债务利息/GDP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
详细数据
+
+
+
+ | 年份 |
+ 政府债务(万亿美元) |
+ GDP(万亿美元) |
+ 债务/GDP(%) |
+ 债务利息/GDP(%) |
+
+
+
+ {usDebtData.map((row, index) => (
+
+ | {row.year} |
+ {row.debt.toFixed(1)} |
+ {row.gdp.toFixed(1)} |
+ {row.debtToGdp.toFixed(1)} |
+ {row.interestToGdp.toFixed(1)} |
+
+ ))}
+
+
+
+
+ )}
+
+ {selectedStrategy === 'china-debt-gdp' && (
+
+
中国政府债务/GDP分析
+
+ 分析中国政府债务、GDP、债务/GDP比率以及债务利息/GDP比率的走势
+
+
+
+
中国政府债务走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
中国GDP走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
中国政府债务/GDP走势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
中国政府债务利息/GDP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
详细数据
+
+
+
+ | 年份 |
+ 政府债务(万亿美元) |
+ GDP(万亿美元) |
+ 债务/GDP(%) |
+ 债务利息/GDP(%) |
+
+
+
+ {chinaDebtData.map((row, index) => (
+
+ | {row.year} |
+ {row.debt.toFixed(1)} |
+ {row.gdp.toFixed(1)} |
+ {row.debtToGdp.toFixed(1)} |
+ {row.interestToGdp.toFixed(1)} |
+
+ ))}
+
+
+
+
+ )}
diff --git a/styles/globals.css b/styles/globals.css
index 0b8dd08..27c607c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -403,4 +403,93 @@ main {
.article-detail-title {
font-size: 2rem;
}
+
+ .strategy-layout {
+ flex-direction: column;
+ }
+
+ .strategy-sidebar {
+ width: 100%;
+ }
}
+
+/* Strategy page layout */
+.strategy-layout {
+ display: flex;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.strategy-sidebar {
+ width: 250px;
+ flex-shrink: 0;
+}
+
+.strategy-content {
+ flex: 1;
+ min-width: 0;
+}
+
+.sidebar-title {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 0.75rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 2px solid #ddd;
+}
+
+.strategy-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.strategy-item {
+ padding: 0.75rem 1rem;
+ margin-bottom: 0.5rem;
+ background-color: white;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.strategy-item:hover {
+ background-color: #f0f0f0;
+ transform: translateX(4px);
+}
+
+.strategy-item.active {
+ background-color: #333;
+ color: white;
+}
+
+.strategy-detail {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.strategy-title {
+ font-size: 1.8rem;
+ color: #333;
+ margin-bottom: 0.5rem;
+}
+
+.strategy-description {
+ color: #666;
+ margin-bottom: 2rem;
+}
+
+.chart-section {
+ margin-bottom: 3rem;
+}
+
+.chart-title {
+ font-size: 1.3rem;
+ color: #333;
+ margin-bottom: 1rem;
+}
+