好的，我重新构建页面：**导航 + Hero大图 + 稿件列表**，结构清晰，列表支持分类筛选。
```json
{
"summary": "重构为导航+Banner+稿件列表三段式布局。Hero保留大图冲击力，下方新增带分类筛选的新闻稿件列表，每行含缩略图、标题、摘要、日期和阅读量，hover有金色描边动效。整体保持深色编辑杂志风格。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>高市早苗访问韩国 — 外交新篇章 | 环球观察</title>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600…\" rel=\"stylesheet\">\n <link href=\"https://unpkg.com/aos@2.3.1/dist/aos.css\" rel=\"stylesheet\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n 'serif-sc': ['\"Noto Serif SC\"', '\"DM Serif Display\"', 'Georgia', 'serif'],\n 'sans-sc': ['\"Noto Sans SC\"', '\"Helvetica Neue\"', 'sans-serif'],\n 'display': ['\"Playfair Display\"', '\"DM Serif Display\"', 'Georgia', 'serif'],\n },\n colors: {\n 'gold': { DEFAULT: '#c8a44e', light: '#d9bc6e', dark: '#a07d2e', pale: '#e8d5a3' },\n 'ink': { DEFAULT: '#0a0a0a', card: '#111111', raised: '#171717', border: '#1c1c1c', muted: '#2a2a2a' },\n 'paper': { DEFAULT: '#e8e5df', muted: '#9a9790', dim: '#6b6862', subtle: '#3d3b37' },\n },\n }\n }\n }\n </script>\n <style>\n :root {\n --gold: #c8a44e;\n --gold-light: #d9bc6e;\n --bg: #0a0a0a;\n --card: #111111;\n --text: #e8e5df;\n }\n\n * { box-sizing: border-box; }\n\n body {\n background-color: var(--bg);\n color: var(--text);\n font-family: 'Noto Sans SC', sans-serif;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }\n\n .noise-overlay::before {\n content: '';\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.025;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.75\" stitchTiles=\"stitch\"/></filter><rect width=\"300\" height=\"300\" filter=\"url(#n)\" opacity=\"0.65\"/></svg>');\n }\n\n .gold-line {\n height: 1px;\n background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);\n width: 100%;\n }\n\n .hero-overlay {\n background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,0.8) 8%, rgba(10,10,10,0.35) 35%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0.45) 80%, rgba(10,10,10,0.75) 100%);\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animate-fade-up { animation: fadeUp 0.7s ease-out forwards; }\n .animate-fade-up-d1 { animation: fadeUp 0.7s 0.1s ease-out forwards; opacity: 0; }\n .animate-fade-up-d2 { animation: fadeUp 0.7s 0.2s ease-out forwards; opacity: 0; }\n .animate-fade-up-d3 { animation: fadeUp 0.7s 0.3s ease-out forwards; opacity: 0; }\n\n @keyframes marquee {\n 0% { transform: translateX(100%); }\n 100% { transform: translateX(-100%); }\n }\n .marquee-track { animation: marquee 30s linear infinite; }\n .marquee-track:hover { animation-play-state: paused; }\n\n /* 稿件行 hover */\n .article-row {\n transition: background-color 0.3s ease, border-color 0.3s ease;\n }\n .article-row:hover {\n background-color: rgba(23,23,23,0.9);\n border-color: rgba(200,164,78,0.25);\n }\n .article-row:hover .article-arrow {\n opacity: 1;\n transform: translateX(0);\n }\n .article-arrow {\n opacity: 0;\n transform: translateX(-10px);\n transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n .article-row:hover .article-thumb img {\n transform: scale(1.06);\n }\n .article-thumb img {\n transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n /* 筛选标签 */\n .filter-tab {\n transition: color 0.3s ease, border-color 0.3s ease;\n }\n .filter-tab.active {\n color: var(--gold);\n border-bottom-color: var(--gold);\n }\n\n /* 滚动条 */\n ::-webkit-scrollbar { width: 5px; }\n ::-webkit-scrollbar-track { background: #0a0a0a; }\n ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }\n\n @media (max-width: 768px) {\n .hero-title { font-size: clamp(2.2rem, 7vw, 3.5rem); }\n .article-thumb { width: 100px; height: 70px; flex-shrink: 0; }\n }\n </style>\n</head>\n<body class=\"noise-overlay\">\n\n <!-- ===== 快讯滚动条 ===== -->\n <div class=\"bg-gold/10 border-b border-gold/20 overflow-hidden\" style=\"height: 34px;\">\n <div class=\"flex items-center h-full\">\n <div class=\"flex-shrink-0 bg-gold text-black font-bold text-xs px-4 h-full flex items-center tracking-widest whitespace-nowrap\">\n <i class=\"fa-solid fa-bolt mr-2 text-[10px]\"></i>快 讯\n </div>\n <div class=\"overflow-hidden flex-1 relative\">\n <div class=\"marquee-track flex items-center whitespace-nowrap absolute\">\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 高市早苗抵达首尔开启三天访问，韩方高规格迎接</span>\n <span class=\"text-gold/60 text-[8px] mx-2\">●</span>\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 日韩经贸论坛同期举行，签署多项合作备忘录</span>\n <span class=\"text-gold/60 text-[8px] mx-2\">●</span>\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 青瓦台会谈聚焦半岛局势与区域安全新框架</span>\n <span class=\"text-gold/60 text-[8px] mx-2\">●</span>\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 参访景福宫，强调日韩文化交流深远意义</span>\n <span class=\"text-gold/60 text-[8px] mx-2\">●</span>\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 高市早苗抵达首尔开启三天访问，韩方高规格迎接</span>\n <span class=\"text-gold/60 text-[8px] mx-2\">●</span>\n <span class=\"text-paper-muted text-xs tracking-wide mx-6\">■ 日韩经贸论坛同期举行，签署多项合作备忘录</span>\n </div>\n </div>\n <div class=\"flex-shrink-0 text-paper-dim text-[10px] px-4 tracking-wider border-l border-gold/20\">\n <span>2026.05.28</span>\n </div>\n </div>\n </div>\n\n <!-- ===== 导航栏 ===== -->\n <header class=\"border-b border-ink-border sticky top-0 z-50 bg-ink/90 backdrop-blur-md\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"flex items-center justify-between h-16\">\n <a href=\"#\" class=\"flex items-center gap-3 group\">\n <div class=\"w-8 h-8 border border-gold/60 flex items-center justify-center rotate-45 group-hover:rotate-90 transition-transform duration-500\">\n <span class=\"-rotate-45 group-hover:-rotate-90 transition-transform duration-500 text-gold font-display font-bold text-sm\">G</span>\n </div>\n <div>\n <span class=\"font-serif-sc font-bold text-lg tracking-wide text-paper\">环球观察</span>\n <span class=\"hidden sm:inline text-gold/70 font-display italic text-[11px] tracking-[0.25em] ml-1 align-top\">GLOBAL INSIGHT</span>\n </div>\n </a>\n <nav class=\"hidden lg:flex items-center gap-1\">\n <a href=\"#\" class=\"px-4 py-2 text-paper-muted text-sm tracking-wide hover:text-gold transition-colors duration-300\">首页</a>\n <a href=\"#\" class=\"px-4 py-2 text-gold text-sm font-medium tracking-wide\">外交</a>\n <a href=\"#\" class=\"px-4 py-2 text-paper-muted text-sm tracking-wide hover:text-gold transition-colors duration-300\">经济</a>\n <a href=\"#\" class=\"px-4 py-2 text-paper-muted text-sm tracking-wide hover:text-gold transition-colors duration-300\">政治</a>\n <a href=\"#\" class=\"px-4 py-2 text-paper-muted text-sm tracking-wide hover:text-gold transition-colors duration-300\">文化</a>\n <a href=\"#\" class=\"px-4 py-2 text-paper-muted text-sm tracking-wide hover:text-gold transition-colors duration-300\">深度</a>\n </nav>\n <div class=\"flex items-center gap-4\">\n <button class=\"text-paper-muted hover:text-gold transition-colors duration-300\"><i class=\"fa-solid fa-magnifying-glass text-sm\"></i></button>\n <button class=\"lg:hidden text-paper-muted hover:text-gold transition-colors duration-300\"><i class=\"fa-solid fa-bars text-lg\"></i></button>\n </div>\n </div>\n </div>\n </header>\n\n <!-- ===== HERO BANNER ===== -->\n <section class=\"relative w-full overflow-hidden\" style=\"min-height: 70vh;\">\n <div class=\"absolute inset-0 z-0\">\n <img src=\"/assets/images/real-estate/real-estate-2.jpg\"\n alt=\"首尔城市天际线\"\n class=\"w-full h-full object-cover object-center\"\n loading=\"eager\">\n <div class=\"hero-overlay absolute inset-0\"></div>\n </div>\n\n <div class=\"relative z-10 max-w-7xl mx-auto px-6 lg:px-10 flex flex-col justify-end\" style=\"min-height: 70vh; padding-bottom: 4rem;\">\n <div class=\"flex items-center gap-4 mb-5 animate-fade-up\">\n <span class=\"font-display italic text-gold text-xs tracking-[0.25em] uppercase\">Diplomacy</span>\n <span class=\"gold-line w-12\"></span>\n <span class=\"text-paper-dim text-xs tracking-wide\">2026年5月25日 — 27日 · 首尔</span>\n </div>\n\n <h1 class=\"font-serif-sc font-black leading-none mb-5 animate-fade-up-d1 hero-title\"\n style=\"font-size: clamp(2.8rem, 6vw, 6.5rem); letter-spacing: -0.02em;\">\n <span class=\"text-paper block\">高市早苗</span>\n <span class=\"text-paper block\" style=\"margin-top: -0.04em;\">访问韩国</span>\n </h1>\n\n <p class=\"font-serif-sc text-paper-muted text-base lg:text-lg max-w-xl leading-relaxed mb-8 animate-fade-up-d2\">\n 日本自民党政调会长高市早苗展开对韩正式访问，双方就经贸合作、区域安全与人文交流达成多项共识，标志着两国战略伙伴关系迈入新阶段。\n </p>\n\n <div class=\"flex flex-wrap items-center gap-5 text-xs tracking-wide animate-fade-up-d3\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-7 h-7 rounded-full bg-ink-muted flex items-center justify-center\"><i class=\"fa-solid fa-user-tie text-gold text-[10px]\"></i></div>\n <span class=\"text-paper font-medium\">环球观察 编辑部</span>\n </div>\n <span class=\"text-ink-muted\">|</span>\n <span class=\"text-paper-dim\"><i class=\"fa-regular fa-clock mr-1\"></i>阅读约 8 分钟</span>\n <span class=\"text-ink-muted\">|</span>\n <span class=\"text-paper-dim\"><i class=\"fa-regular fa-eye mr-1\"></i>12.8k 阅读</span>\n </div>\n </div>\n </section>\n\n <!-- ===== 稿件列表区域 ===== -->\n <section class=\"max-w-5xl mx-auto px-6 lg:px-10 py-12 lg:py-20\">\n\n <!-- 筛选标签 -->\n <div class=\"flex items-center gap-1 mb-10 overflow-x-auto pb-2\" data-aos=\"fade-up\" data-aos-duration=\"600\">\n <button class=\"filter-tab active px-5 py-2.5 text-sm font-medium tracking-wide border-b-2 border-gold text-gold whitespace-nowrap cursor-pointer bg-transparent\">全部稿件</button>\n <button class=\"filter-tab px-5 py-2.5 text-sm tracking-wide border-b-2 border-transparent text-paper-muted hover:text-paper whitespace-nowrap cursor-pointer bg-transparent transition-colors duration-300\">外交动态</button>\n <button class=\"filter-tab px-5 py-2.5 text-sm tracking-wide border-b-2 border-transparent text-paper-muted hover:text-paper whitespace-nowrap cursor-pointer bg-transparent transition-colors duration-300\">经贸合作</button>\n <button class=\"filter-tab px-5 py-2.5 text-sm tracking-wide border-b-2 border-transparent text-paper-muted hover:text-paper whitespace-nowrap cursor-pointer bg-transparent transition-colors duration-300\">文化观察</button>\n <button class=\"filter-tab px-5 py-2.5 text-sm tracking-wide border-b-2 border-transparent text-paper-muted hover:text-paper whitespace-nowrap cursor-pointer bg-transparent transition-colors duration-300\">深度分析</button>\n <button class=\"filter-tab px-5 py-2.5 text-sm tracking-wide border-b-2 border-transparent text-paper-muted hover:text-paper whitespace-nowrap cursor-pointer bg-transparent transition-colors duration-300\">图集视频</button>\n </div>\n\n <!-- 稿件条目 -->\n <div class=\"space-y-0\">\n\n <!-- 稿件 1 — 头条 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/business/business-12.jpg\" alt=\"会谈\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">外交动态</span>\n <span class=\"text-paper-dim text-[11px]\">5月25日 · 18:32</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>12.8k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5 group-hover:text-gold transition-colors duration-300\">高市早苗抵达首尔，韩方高规格迎接开启三天正式访问</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">5月25日下午，高市早苗一行抵达首尔金浦机场，韩国政府派高级官员迎接。首站前往青瓦台与韩国国家安保室长举行闭门会谈，就半岛局势深入交换意见。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 2 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"80\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/16-9/business-07.jpg\" alt=\"经贸论坛\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">经贸合作</span>\n <span class=\"text-paper-dim text-[11px]\">5月26日 · 14:15</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>9.6k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">日韩经贸论坛签署七项备忘录，合作意向金额超120亿美元</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">论坛在COEX会展中心举行，双方围绕半导体供应链、氢能源、AI及生物医药等关键领域展开对接。高市早苗发表主旨演讲，强调日本将以更开放姿态深化与韩产业合作。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 3 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"120\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/real-estate/real-estate-11.jpg\" alt=\"首尔都市\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">深度分析</span>\n <span class=\"text-paper-dim text-[11px]\">5月26日 · 20:45</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>15.1k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">从历史纠葛到战略协作：高市早苗访韩背后的日韩关系新格局</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">多位国际关系学者认为，高市早苗作为保守派代表人物访韩具有强烈象征意义，表明日本主流政治力量对改善韩日关系已形成跨党派共识。美国印太战略背景下，日韩走近影响深远。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 4 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"160\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/real-estate/real-estate-6.jpg\" alt=\"文化参访\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">文化观察</span>\n <span class=\"text-paper-dim text-[11px]\">5月27日 · 10:08</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>7.2k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">景福宫对话：高市早苗的文化之旅折射日韩千年文化渊源</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">访问最后一天，高市早苗前往景福宫及国立中央博物馆。在勤政殿前驻足良久，留言\"文化是连接两国人民心灵的桥梁\"。博物馆方面表示将推动联合策展与学术交流。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 5 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"200\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/real-estate/real-estate-3.jpg\" alt=\"区域安全\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">外交动态</span>\n <span class=\"text-paper-dim text-[11px]\">5月27日 · 12:30</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>8.9k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">记者会实录：高市早苗谈半岛无核化与日韩\"2+2\"会谈前景</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">在访韩最后一场记者会上，高市早苗就半岛局势、日韩安全合作及年内可能举行的\"2+2\"会谈回答了记者提问。她强调\"日韩作为共享民主价值观的邻邦，肩负共同责任\"。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 6 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"240\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/16-9/business-17.jpeg\" alt=\"联合办公\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">经贸合作</span>\n <span class=\"text-paper-dim text-[11px]\">5月28日 · 08:00</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>5.4k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">数字伙伴关系协定出炉：日韩联手打造东亚数字经济新高地</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">《日韩数字经济伙伴关系协定》在本次访问期间正式签署，涵盖数据跨境流动、AI治理框架、电子商务便利化等内容。分析认为这将加速东亚数字经济一体化进程。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n <!-- 稿件 7 -->\n <article class=\"article-row flex flex-col sm:flex-row gap-5 py-6 border-b border-ink-border cursor-pointer px-0\" data-aos=\"fade-up\" data-aos-duration=\"500\" data-aos-delay=\"280\">\n <div class=\"article-thumb w-full sm:w-52 h-40 sm:h-32 flex-shrink-0 overflow-hidden rounded-sm\">\n <img src=\"/assets/images/real-estate/real-estate-8.jpg\" alt=\"首尔\" class=\"w-full h-full object-cover\" loading=\"lazy\">\n </div>\n <div class=\"flex-1 min-w-0 flex flex-col justify-center\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-gold text-[10px] font-medium tracking-[0.15em] bg-gold/10 px-2 py-0.5 rounded-sm\">图集视频</span>\n <span class=\"text-paper-dim text-[11px]\">5月28日 · 09:15</span>\n <span class=\"text-paper-dim text-[11px]\"><i class=\"fa-regular fa-eye ml-1 mr-0.5\"></i>11.3k</span>\n </div>\n <h3 class=\"font-serif-sc font-bold text-lg lg:text-xl text-paper leading-snug mb-1.5\">图集 | 高市早苗访韩精彩瞬间：从青瓦台到景福宫</h3>\n <p class=\"text-paper-muted text-sm leading-relaxed line-clamp-2\">环球观察独家图集，记录高市早苗三天行程中的关键瞬间——机场迎接、闭门会谈、经贸论坛演讲、景福宫参观及记者会，全方位呈现此次访问的精彩片段。</p>\n <div class=\"flex items-center gap-2 mt-2\">\n <span class=\"article-arrow text-gold text-xs\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n <span class=\"text-paper-dim text-[11px] opacity-0 group-hover:opacity-100 transition-opacity duration-300\">阅读全文</span>\n </div>\n </div>\n </article>\n\n </div>\n\n <!-- 分页 -->\n <div class=\"flex items-center justify-center gap-2 mt-12\" data-aos=\"fade-up\" data-aos-duration=\"600\">\n <button class=\"w-9 h-9 rounded-sm border border-ink-border text-paper-dim hover:text-gold hover:border-gold/40 transition-all duration-300 flex items-center justify-center cursor-pointer bg-transparent\">\n <i class=\"fa-solid fa-chevron-left text-xs\"></i>\n </button>\n <button class=\"w-9 h-9 rounded-sm bg-gold text-black font-medium text-sm flex items-center justify-center cursor-pointer border-none\">1</button>\n <button class=\"w-9 h-9 rounded-sm border border-ink-border text-paper-dim hover:text-gold hover:border-gold/40 transition-all duration-300 flex items-center justify-center cursor-pointer bg-transparent text-sm\">2</button>\n <button class=\"w-9 h-9 rounded-sm border border-ink-border text-paper-dim hover:text-gold hover:border-gold/40 transition-all duration-300 flex items-center justify-center cursor-pointer bg-transparent text-sm\">3</button>\n <span class=\"text-paper-dim text-xs mx-1\">...</span>\n <button class=\"w-9 h-9 rounded-sm border border-ink-border text-paper-dim hover:text-gold hover:border-gold/40 transition-all duration-300 flex items-center justify-center cursor-pointer bg-transparent text-sm\">8</button>\n <button class=\"w-9 h-9 rounded-sm border border-ink-border text-paper-dim hover:text-gold hover:border-gold/40 transition-all duration-300 flex items-center justify-center cursor-pointer bg-transparent\">\n <i class=\"fa-solid fa-chevron-right text-xs\"></i>\n </button>\n </div>\n\n </section>\n\n <!-- ===== 页脚 ===== -->\n <footer class=\"border-t border-ink-border py-10\">\n <div class=\"max-w-5xl mx-auto px-6 lg:px-10 text-center\">\n <div class=\"flex items-center justify-center gap-2 mb-4\">\n <div class=\"w-6 h-6 border border-gold/60 flex items-center justify-center rotate-45\">\n <span class=\"-rotate-45 text-gold font-display font-bold text-[10px]\">G</span>\n </div>\n <span class=\"font-serif-sc font-bold text-sm tracking-wide text-paper\">环球观察</span>\n </div>\n <p class=\"text-paper-dim text-xs tracking-wide\">© 2026 Global Insight. All rights reserved.</p>\n </div>\n </footer>\n\n <script src=\"https://unpkg.com/aos@2.3.1/dist/aos.js\"></script>\n <script>\n AOS.init({ duration: 600, once: true, easing: 'ease-out' });\n\n // 筛选标签切换\n document.querySelectorAll('.filter-tab').forEach(tab => {\n tab.addEventListener('click', function() {\n document.querySelectorAll('.filter-tab').forEach(t => {\n t.classList.remove('active', 'text-gold', 'border-gold');\n t.classList.add('text-paper-muted', 'border-transparent');\n });\n this.classList.add('active', 'text-gold', 'border-gold');\n this.classList.remove('text-paper-muted', 'border-transparent');\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["把图片换成真实新闻图", "换成浅色白日模式", "加侧边栏热门排行", "筛选标签点击后过滤稿件", "在列表顶部加置顶头条卡片"],
"breakpoint": "none"
}
```