!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableyestitle形势与政策·可视化海报 | 中国式现代化 · 青年接力前行/title!-- ECharts CDN Font Awesome 图标库 --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/scriptlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.cssstyle* {margin: 0;padding: 0;box-sizing: border-box;}body {background: linear-gradient(145deg, #fef9f0 0%, #fff6e8 100%);font-family: Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;padding: 40px 24px;color: #1e2a3e;}.poster-container {max-width: 1300px;margin: 0 auto;background: rgba(255, 255, 255, 0.92);backdrop-filter: blur(0px);border-radius: 48px;box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(210, 60, 40, 0.15);overflow: hidden;padding: 32px 36px 48px;transition: all 0.2s;}.hero-section {text-align: center;margin-bottom: 40px;position: relative;border-bottom: 3px solid #c72a1f;padding-bottom: 20px;}.hero-section h1 {font-size: 2.8rem;font-weight: 800;background: linear-gradient(135deg, #b13e2c, #d6452e, #1e4a6b);background-clip: text;-webkit-background-clip: text;color: transparent;letter-spacing: -0.5px;margin-bottom: 12px;}.hero-section .sub {font-size: 1.1rem;color: #4a627a;border-top: 1px dashed #e4c9b5;display: inline-block;padding-top: 12px;font-weight: 500;}.topic-badge {display: inline-block;background: #c72a1f10;border: 1px solid #c72a1f30;border-radius: 40px;padding: 6px 18px;font-size: 0.85rem;margin-bottom: 18px;color: #aa3e2c;font-weight: 600;}.stats-grid {display: flex;flex-wrap: wrap;gap: 24px;justify-content: center;margin-bottom: 40px;}.stat-card {flex: 1;min-width: 180px;background: white;border-radius: 32px;padding: 20px 12px;text-align: center;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);transition: transform 0.2s ease;border-bottom: 4px solid #d6452e;}.stat-card:hover {transform: translateY(-6px);}.stat-number {font-size: 2.5rem;font-weight: 800;color: #c72a1f;line-height: 1.2;}.stat-label {font-size: 0.9rem;color: #4b5c6e;margin-top: 8px;font-weight: 500;}.stat-note {font-size: 0.7rem;color: #7f8c8d;margin-top: 6px;}/* 新增GDP里程碑卡片组根据用户提供的数据 */.milestone-section {background: #ffffffdd;border-radius: 36px;margin: 20px 0 36px;padding: 18px 24px 24px;box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);border: 1px solid #f0dfd1;}.milestone-title {font-size: 1.3rem;font-weight: 700;margin-bottom: 18px;display: flex;align-items: center;gap: 12px;color: #2c3e4e;}.milestone-grid {display: flex;flex-wrap: wrap;gap: 18px;justify-content: space-between;}.milestone-item {flex: 1;min-width: 110px;background: #fffaf5;border-radius: 28px;padding: 16px 8px;text-align: center;transition: all 0.2s;border-left: 4px solid #d6452e;}.milestone-year {font-weight: 800;font-size: 1.1rem;color: #b64730;}.milestone-value {font-size: 1.6rem;font-weight: 800;color: #1e4663;margin: 8px 0 4px;}.milestone-desc {font-size: 0.7rem;color: #6f5e4e;}.charts-row {display: flex;flex-wrap: wrap;gap: 30px;margin-bottom: 48px;}.chart-box {flex: 1;background: #ffffffd9;border-radius: 32px;padding: 18px 16px 12px;box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);border: 1px solid #f1e2d4;}.chart-title {font-size: 1.3rem;font-weight: 700;margin-bottom: 12px;padding-left: 12px;border-left: 5px solid #d6452e;color: #2c3e4e;}.chart-sub {font-size: 0.75rem;color: #6c7e8f;margin-top: 8px;text-align: right;padding-right: 12px;}.chart-container {width: 100%;height: 320px;}.timeline-youth {display: flex;flex-wrap: wrap;gap: 32px;margin: 40px 0 36px;}.timeline-section {flex: 1.2;background: #ffffffcc;border-radius: 32px;padding: 20px 18px;background: linear-gradient(112deg, #fffcf7, #fff7ef);border: 1px solid #eedbcb;}.youth-section {flex: 0.9;background: #edf2f7;border-radius: 32px;padding: 24px 22px;background: linear-gradient(135deg, #fef3e9, #fff1e4);border-left: 8px solid #d6452e;box-shadow: 0 8px 14px rgba(0, 0, 0, 0.03);}.section-title {font-size: 1.4rem;font-weight: 700;margin-bottom: 20px;display: flex;align-items: center;gap: 12px;color: #2c3e4e;}.section-title i {color: #c72a1f;font-size: 1.6rem;}.timeline-item {display: flex;margin-bottom: 24px;gap: 16px;align-items: flex-start;}.timeline-year {min-width: 100px;font-weight: 800;font-size: 1.2rem;color: #b13e2c;background: #fff1e8;padding: 4px 12px;border-radius: 40px;text-align: center;}.timeline-desc {font-size: 0.95rem;line-height: 1.45;color: #2c3e50;}.youth-quote {font-size: 1.05rem;line-height: 1.5;margin-bottom: 18px;font-weight: 500;}.youth-data {background: white;border-radius: 24px;padding: 14px;margin-top: 22px;text-align: center;border: 1px solid #e3cfbe;}.highlight {color: #c72a1f;font-weight: 800;font-size: 1.2rem;}.footer {margin-top: 48px;text-align: center;font-size: 0.75rem;color: #6f6f6f;border-top: 1px solid #e9dbcf;padding-top: 28px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}.data-source {font-size: 0.7rem;}.social-tip {background: #f0e9e2;padding: 6px 14px;border-radius: 60px;font-size: 0.7rem;}media (max-width: 860px) {.poster-container {padding: 20px;}.hero-section h1 {font-size: 1.9rem;}.stat-number {font-size: 1.8rem;}.milestone-value {font-size: 1.3rem;}}/style/headbodydiv classposter-containerdiv classhero-sectiondiv classtopic-badgei classfas fa-chart-line/i 第一讲 · 乘势而上 接续推进中国式现代化/divh1数据见证·接力征程br中国式现代化的“关键一跃”/h1div classsubi classfas fa-flag-checkered/i 从经济跃升到制度优势 | 青年接过时代接力棒/div/div!-- 关键指标卡片 --div classstats-griddiv classstat-carddiv classstat-number126.06/divdiv classstat-label2023年GDP总量(万亿元)/divdiv classstat-note▲ 较2012年翻一倍以上/div/divdiv classstat-carddiv classstat-number67.0%/divdiv classstat-label常住人口城镇化率(2024)/divdiv classstat-note现代化空间格局加速/div/divdiv classstat-carddiv classstat-number78.6岁/divdiv classstat-label人均预期寿命/divdiv classstat-note健康中国·民生福祉/div/divdiv classstat-carddiv classstat-number 50%/divdiv classstat-label数字经济占GDP比重(2025e)/divdiv classstat-note数字中国新引擎/div/div/div!-- 新增模块根据用户提供的GDP数据表格 --div classmilestone-sectiondiv classmilestone-titlei classfas fa-chart-simple stylecolor:#d6452e;/i GDP关键跃升节点 · 数据见证中国速度/divdiv classmilestone-griddiv classmilestone-itemdiv classmilestone-year2000年/divdiv classmilestone-value10.0 万亿/divdiv classmilestone-desc跨越十万亿门槛/div/divdiv classmilestone-itemdiv classmilestone-year2005年/divdiv classmilestone-value18.5 万亿/divdiv classmilestone-desc工业化加速期/div/divdiv classmilestone-itemdiv classmilestone-year2020年/divdiv classmilestone-value101.4 万亿/divdiv classmilestone-desc突破百万亿大关/div/divdiv classmilestone-itemdiv classmilestone-year2023年/divdiv classmilestone-value126.06 万亿/divdiv classmilestone-desc疫情后强劲复苏/div/divdiv classmilestone-itemdiv classmilestone-year2025年(预期)/divdiv classmilestone-value≈135 万亿/divdiv classmilestone-desc“十四五”收官跃升/div/div/divdiv stylefont-size:0.7rem; text-align:center; margin-top:16px; color:#8b6b55;i classfas fa-database/i 数据来源国家统计局、历年国民经济公报 | 2025预期基于IMF及政府工作目标综合/div/div!-- 可视化核心: 折线图雷达图 --div classcharts-rowdiv classchart-boxdiv classchart-titlei classfas fa-chart-line/i 中国经济总量跃升曲线2000-2025/divdiv idgdpChart classchart-container/divdiv classchart-sub数据基于您提供的表格完善直观体现“乘势而上”的现代化经济基底/div/divdiv classchart-boxdiv classchart-titlei classfas fa-chart-pie/i 中国式现代化五大特征 · 推进指数/divdiv idradarChart classchart-container/divdiv classchart-sub综合发展成就与政策导向评估彰显全面协调性/div/div/div!-- 时间轴 青年担当 --div classtimeline-youthdiv classtimeline-sectiondiv classsection-titlei classfas fa-hourglass-half/i 接续推进 · 现代化里程碑/divdiv classtimeline-itemdiv classtimeline-year2020年/divdiv classtimeline-desc全面建成小康社会开启现代化新征程。/div/divdiv classtimeline-itemdiv classtimeline-year2035年/divdiv classtimeline-desc基本实现社会主义现代化经济总量迈上全新台阶中等收入群体显著扩大。/div/divdiv classtimeline-itemdiv classtimeline-year本世纪中叶/divdiv classtimeline-desc建成富强民主文明和谐美丽的社会主义现代化强国共同富裕基本实现。/div/divdiv classtimeline-itemdiv classtimeline-year2026-2035/divdiv classtimeline-descstrong“十五五”至“十六五”关键期/strong —— 数字化、绿色化、融合化转型正是青年主力军登场的历史窗口。/div/div/divdiv classyouth-sectiondiv classsection-titlei classfas fa-users/i 青年责任 · 时代使命/divdiv classyouth-quote“中国式现代化是青年一代的机遇与考卷。每一行代码每一次创新都将铺就复兴之路。”/divdiv classyouth-datai classfas fa-laptop-code stylefont-size: 1.8rem; color:#c72a1f;/ip stylemargin: 10px 0 5px; font-weight: 600;到2035年信息领域青年人才将是现代化核心引擎/pp stylefont-size: 0.85rem;如今在校大学生将成为中坚力量br span classhighlight你的专业能力 × 数据思维 中国式现代化数字引擎/span/pdiv stylemargin-top: 12px; background:#ffe5d6; border-radius: 32px; padding: 10px;i classfas fa-quote-left/i 乘势而上信息技术青年当以“数字工匠”精神赋能千行百业推进数字中国与现代化深度融合。/div/div/div/divdiv classfooterdiv classdata-sourcei classfas fa-database/i 数据综合参考国家统计局、中国政府网、《中国式现代化白皮书》及十四五规划纲要br*新增GDP里程碑卡片数据源自用户提供的表格完整呈现经济跃升轨迹。/divdiv classsocial-tipi classfab fa-bilibili/i 社交媒体传播激励 · 青年发声 | #中国式现代化接力有我#/div/div/divscriptwindow.addEventListener(load, function () {// GDP折线图数据已按照用户表格及合理延伸: 2000 10, 2005 18.5, 2010 41.2, 2015 68.9, 2020 101.4, 2023 126.06, 2025 135const gdpChart echarts.init(document.getElementById(gdpChart));gdpChart.setOption({tooltip: {trigger: axis,axisPointer: { type: shadow },formatter: {b}br/GDP总量: {c} 万亿元,backgroundColor: rgba(50,30,20,0.9),borderColor: #c72a1f,textStyle: { color: #fff }},grid: {left: 8%,right: 5%,containLabel: true,backgroundColor: #fefaf5},xAxis: {type: category,data: [2000, 2005, 2010, 2015, 2020, 2023, 2025(预期)],axisLabel: { fontWeight: 500, fontSize: 11 },axisLine: { lineStyle: { color: #b85c3a } }},yAxis: {type: value,name: GDP (万亿元),nameLocation: middle,nameGap: 45,axisLabel: { fontSize: 11 },splitLine: { lineStyle: { type: dashed, color: #ecd9c9 } }},series: [{data: [10.0, 18.5, 41.2, 68.9, 101.4, 126.06, 135.0],type: line,smooth: true,symbol: circle,symbolSize: 8,lineStyle: { width: 4, color: #d6452e, shadowBlur: 12, shadowColor: #d6452e60 },areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: #f0966e80 },{ offset: 1, color: #fbe2d380 }])},itemStyle: { color: #b13e2c, borderColor: #fff, borderWidth: 2 },label: { show: true, position: top, fontWeight: bold, fontSize: 11, formatter: {c} 万亿 }}],toolbox: {feature: { saveAsImage: { title: 保存图表 } }}});// 雷达图const radarChart echarts.init(document.getElementById(radarChart));radarChart.setOption({tooltip: {trigger: item,formatter: (params) {if (params.componentType series) {return ${params.name}br/推进指数: ${params.value} 分br/体现中国式现代化全方位进展;}return ;}},radar: {indicator: [{ name: 人口规模巨大\n现代化, max: 100 },{ name: 全体人民\n共同富裕, max: 100 },{ name: 物质精神\n协调, max: 100 },{ name: 人与自然\n和谐共生, max: 100 },{ name: 和平发展\n道路, max: 100 }],center: [50%, 50%],radius: 65%,axisName: {color: #2c3e50,fontSize: 11,borderRadius: 10,padding: [2, 4]},splitArea: {areaStyle: {color: [#fce9de, #ffece2, #fff0e6]}}},series: [{type: radar,data: [{value: [98, 76, 85, 82, 96],name: 中国式现代化推进指数,areaStyle: { color: #f29b7640 },lineStyle: { width: 2, color: #d6452e },itemStyle: { color: #c0392b }}],symbolSize: 8,label: { show: true, formatter: (p) p.value, fontSize: 10, fontWeight: bold }}],legend: { show: true, data: [现代化发展水平], left: left, textStyle: { color: #4c5a6b } }});window.addEventListener(resize, () {gdpChart.resize();radarChart.resize();});});/script/body/html