现在我已经获取了设计系统的建议和图片素材，开始为您构建新闻学院的Hero大屏组件。现在开始构建这个极具视觉冲击力的新闻学院Hero大屏。
```json
{
"summary": "为新闻学院设计了深色基调的Hero大屏，以世界地图作为背景纹理，金色点缀体现权威感，配合大标题排版、数据统计、新闻滚动条等元素，营造出专业、权威、具有全球视野的新闻学院品牌形象。",
"widget": {
"type": "custom-template",
"isAPI": false,
"api": "",
"fullWidth": true,
"html": "<style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;);\n \n .news-hero {\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n background: #0a0a0a;\n position: relative;\n overflow: hidden;\n }\n\n .news-hero .map-overlay {\n position: absolute;\n inset: 0;\n opacity: 0.08;\n background-image: url('/assets/images/map.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n .news-hero .gradient-overlay {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 30% 20%, rgba(212, 165, 55, 0.06) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),\n linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, #0a0a0a 100%);\n }\n\n .news-hero .accent-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(90deg, #d4a537, transparent);\n margin: 1.5rem 0;\n }\n\n .news-hero .accent-line-center {\n width: 120px;\n height: 2px;\n background: linear-gradient(90deg, transparent, #d4a537, transparent);\n margin: 1.5rem auto;\n }\n\n .news-hero .gold-text {\n color: #d4a537;\n }\n\n .news-hero .stat-item {\n position: relative;\n padding: 1.5rem 2rem;\n border-right: 1px solid rgba(255, 255, 255, 0.06);\n }\n\n .news-hero .stat-item:last-child {\n border-right: none;\n }\n\n .news-hero .stat-number {\n font-size: 3rem;\n font-weight: 800;\n line-height: 1;\n background: linear-gradient(135deg, #d4a537 0%, #f5d77b 50%, #d4a537 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .news-ticker {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 48px;\n background: rgba(255, 255, 255, 0.03);\n backdrop-filter: blur(12px);\n border-top: 1px solid rgba(255, 255, 255, 0.05);\n overflow: hidden;\n display: flex;\n align-items: center;\n }\n\n .news-ticker-label {\n background: #d4a537;\n color: #0a0a0a;\n padding: 0 20px;\n height: 100%;\n display: flex;\n align-items: center;\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 2px;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n }\n\n .news-ticker-content {\n display: flex;\n animation: ticker 30s linear infinite;\n white-space: nowrap;\n padding-left: 20px;\n }\n\n .news-ticker-item {\n display: inline-flex;\n align-items: center;\n padding: 0 40px;\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.8rem;\n font-weight: 400;\n letter-spacing: 0.3px;\n }\n\n .news-ticker-item .dot {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: #d4a537;\n margin-right: 12px;\n flex-shrink: 0;\n }\n\n @keyframes ticker {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n .news-hero .hero-title {\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n font-size: clamp(3rem, 8vw, 7rem);\n line-height: 1.05;\n color: #fff;\n letter-spacing: -0.03em;\n }\n\n .news-hero .hero-subtitle {\n font-size: clamp(0.9rem, 1.8vw, 1.4rem);\n color: rgba(255, 255, 255, 0.4);\n letter-spacing: 0.6em;\n font-weight: 300;\n text-transform: uppercase;\n }\n\n .news-hero .motto-text {\n font-size: clamp(0.8rem, 1.2vw, 1.1rem);\n color: rgba(212, 165, 55, 0.7);\n letter-spacing: 0.4em;\n font-weight: 300;\n text-transform: uppercase;\n }\n\n .news-hero .desc-text {\n color: rgba(255, 255, 255, 0.55);\n font-size: clamp(0.9rem, 1.1vw, 1.1rem);\n line-height: 1.8;\n max-width: 560px;\n font-weight: 300;\n }\n\n .news-hero .nav-link {\n color: rgba(255, 255, 255, 0.5);\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 1px;\n text-transform: uppercase;\n transition: color 0.3s ease;\n cursor: pointer;\n }\n\n .news-hero .nav-link:hover {\n color: #d4a537;\n }\n\n .news-hero .btn-outline-gold {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 14px 36px;\n border: 1.5px solid rgba(212, 165, 55, 0.5);\n color: #d4a537;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n background: transparent;\n transition: all 0.4s ease;\n cursor: pointer;\n text-decoration: none;\n }\n\n .news-hero .btn-outline-gold:hover {\n background: rgba(212, 165, 55, 0.12);\n border-color: #d4a537;\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(212, 165, 55, 0.15);\n }\n\n .news-hero .btn-fill-gold {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 14px 36px;\n background: linear-gradient(135deg, #d4a537, #c7952a);\n color: #0a0a0a;\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n border: none;\n transition: all 0.4s ease;\n cursor: pointer;\n text-decoration: none;\n }\n\n .news-hero .btn-fill-gold:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(212, 165, 55, 0.3);\n }\n\n .news-hero .corner-decoration {\n position: absolute;\n width: 120px;\n height: 120px;\n border-color: rgba(212, 165, 55, 0.15);\n pointer-events: none;\n }\n\n .news-hero .corner-tl {\n top: 40px;\n left: 40px;\n border-top: 1px solid;\n border-left: 1px solid;\n }\n\n .news-hero .corner-br {\n bottom: 56px;\n right: 40px;\n border-bottom: 1px solid;\n border-right: 1px solid;\n }\n\n .news-hero .floating-line {\n position: absolute;\n width: 1px;\n background: linear-gradient(180deg, transparent, rgba(212, 165, 55, 0.2), transparent);\n pointer-events: none;\n }\n\n .news-hero .glow-orb {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n pointer-events: none;\n }\n\n @media (max-width: 768px) {\n .news-hero .stat-item {\n border-right: none;\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n padding: 1.2rem 1rem;\n }\n .news-hero .stat-item:last-child {\n border-bottom: none;\n }\n .news-hero .stat-number {\n font-size: 2.2rem;\n }\n .news-hero .corner-tl,\n .news-hero .corner-br {\n display: none;\n }\n .news-ticker-label {\n padding: 0 12px;\n font-size: 0.65rem;\n }\n .news-ticker-item {\n padding: 0 20px;\n font-size: 0.7rem;\n }\n }\n</style>\n\n<div class=\"news-hero\" data-aos=\"fade\" data-aos-duration=\"800\">\n <!-- 世界地图背景 -->\n <div class=\"map-overlay\"></div>\n \n <!-- 渐变叠加层 -->\n <div class=\"gradient-overlay\"></div>\n\n <!-- 辉光装饰球 -->\n <div class=\"glow-orb\" style=\"width: 400px; height: 400px; background: rgba(212, 165, 55, 0.04); top: -100px; right: -100px;\"></div>\n <div class=\"glow-orb\" style=\"width: 300px; height: 300px; background: rgba(255, 255, 255, 0.02); bottom: 100px; left: -50px;\"></div>\n\n <!-- 角落装饰线 -->\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n\n <!-- 垂直装饰线 -->\n <div class=\"floating-line\" style=\"left: 8%; top: 0; bottom: 48px;\"></div>\n <div class=\"floating-line\" style=\"right: 12%; top: 0; bottom: 48px;\"></div>\n\n <!-- 顶部导航 -->\n <div class=\"relative z-10 px-6 lg:px-16 py-6\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center gap-3\" data-aos=\"fade-right\" data-aos-duration=\"800\">\n <div class=\"w-10 h-10 rounded-full border border-solid border-amber-500/40 flex items-center justify-center\">\n <i class=\"fa fa-newspaper-o text-amber-500 text-lg\"></i>\n </div>\n <div>\n <div class=\"text-white text-sm font-bold tracking-widest uppercase\">新闻学院</div>\n <div class=\"text-xs text-gray-500 tracking-[0.3em] uppercase font-light\">School of Journalism</div>\n </div>\n </div>\n <div class=\"hidden md:flex items-center gap-10\" data-aos=\"fade-left\" data-aos-duration=\"800\">\n <span class=\"nav-link\">首页</span>\n <span class=\"nav-link\">学院概况</span>\n <span class=\"nav-link\">专业设置</span>\n <span class=\"nav-link\">师资力量</span>\n <span class=\"nav-link\">新闻动态</span>\n <span class=\"nav-link text-amber-500\">EN</span>\n </div>\n <button class=\"md:hidden text-white text-xl cursor-pointer\" aria-label=\"菜单\">\n <i class=\"fa fa-bars\"></i>\n </button>\n </div>\n </div>\n\n <!-- 主体内容 -->\n <div class=\"relative z-10 flex flex-col items-center justify-center px-6\" style=\"min-height: calc(100vh - 100px); padding-bottom: 48px;\">\n <div class=\"w-full max-w-6xl mx-auto\">\n <div class=\"flex flex-col items-center text-center\">\n <!-- 标签 -->\n <div data-aos=\"fade-down\" data-aos-duration=\"1000\" data-aos-delay=\"100\">\n <span class=\"inline-block px-5 py-2 border border-solid border-amber-500/20 text-amber-500 text-xs tracking-[0.4em] uppercase font-medium\">\n <i class=\"fa fa-microphone mr-2\"></i>School of Journalism & Communication\n </span>\n </div>\n\n <!-- 校训 -->\n <div class=\"mt-8\" data-aos=\"fade-down\" data-aos-duration=\"1000\" data-aos-delay=\"200\">\n <p class=\"motto-text\">\n <i class=\"fa fa-quote-left mr-2 opacity-40\"></i>\n 真相 · 深度 · 责任\n <i class=\"fa fa-quote-right ml-2 opacity-40\"></i>\n </p>\n </div>\n\n <!-- 主标题 -->\n <div class=\"mt-4\" data-aos=\"fade-up\" data-aos-duration=\"1200\" data-aos-delay=\"300\">\n <h1 class=\"hero-title\">\n 新闻与传播<br class=\"hidden sm:block\">学院\n </h1>\n </div>\n\n <!-- 装饰线 -->\n <div data-aos=\"fade-up\" data-aos-duration=\"800\" data-aos-delay=\"400\">\n <div class=\"accent-line-center\"></div>\n </div>\n\n <!-- 英文副标题 -->\n <div class=\"mt-2\" data-aos=\"fade-up\" data-aos-duration=\"800\" data-aos-delay=\"450\">\n <p class=\"hero-subtitle\">Journalism & Communication</p>\n </div>\n\n <!-- 描述文案 -->\n <div class=\"mt-6\" data-aos=\"fade-up\" data-aos-duration=\"800\" data-aos-delay=\"500\">\n <p class=\"desc-text\">\n 立足中国，放眼世界。培养具备全球视野、专业素养与社会责任感的\n <span class=\"text-amber-500/80\">新时代新闻传播人才</span>。\n </p>\n </div>\n\n <!-- 按钮区 -->\n <div class=\"mt-10 flex flex-col sm:flex-row items-center gap-5\" data-aos=\"fade-up\" data-aos-duration=\"800\" data-aos-delay=\"600\">\n <a href=\"#\" class=\"btn-fill-gold\">\n 探索学院\n <i class=\"fa fa-arrow-right text-sm\"></i>\n </a>\n <a href=\"#\" class=\"btn-outline-gold\">\n 招生信息\n <i class=\"fa fa-external-link text-sm\"></i>\n </a>\n </div>\n\n <!-- 数据统计 -->\n <div class=\"mt-16 w-full\" data-aos=\"fade-up\" data-aos-duration=\"1000\" data-aos-delay=\"700\">\n <div class=\"flex flex-col md:flex-row items-center justify-center bg-white/5 backdrop-blur-sm border border-solid border-white/5 max-w-3xl mx-auto\">\n <div class=\"stat-item w-full md:w-1/3 text-center\">\n <div class=\"stat-number\">60<span class=\"text-2xl text-white/80\" style=\"-webkit-text-fill-color: rgba(255,255,255,0.8);\">+</span></div>\n <div class=\"text-gray-400 text-xs tracking-[0.2em] uppercase mt-2 font-light\">资深教授</div>\n </div>\n <div class=\"stat-item w-full md:w-1/3 text-center\">\n <div class=\"stat-number\">2000<span class=\"text-2xl text-white/80\" style=\"-webkit-text-fill-color: rgba(255,255,255,0.8);\">+</span></div>\n <div class=\"text-gray-400 text-xs tracking-[0.2em] uppercase mt-2 font-light\">在校学生</div>\n </div>\n <div class=\"stat-item w-full md:w-1/3 text-center\">\n <div class=\"stat-number\">300<span class=\"text-2xl text-white/80\" style=\"-webkit-text-fill-color: rgba(255,255,255,0.8);\">+</span></div>\n <div class=\"text-gray-400 text-xs tracking-[0.2em] uppercase mt-2 font-light\">合作媒体</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- 底部新闻滚动条 -->\n <div class=\"news-ticker\">\n <div class=\"news-ticker-label\">\n <i class=\"fa fa-bolt mr-2\"></i> 头条\n </div>\n <div class=\"news-ticker-content\">\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>学院与央视联合启动2025卓越新闻人才培养计划</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>第六届国际传播高峰论坛在学院成功举办</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>学院师生团队荣获中国新闻奖一等奖</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>数字媒体实验室正式揭牌 开启智慧教育新篇章</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>优秀校友访谈录 · 从校园到战地记者的成长之路</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>2025年秋季招生简章发布 新增数据新闻方向</span>\n <!-- 重复内容用于无缝滚动 -->\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>学院与央视联合启动2025卓越新闻人才培养计划</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>第六届国际传播高峰论坛在学院成功举办</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>学院师生团队荣获中国新闻奖一等奖</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>数字媒体实验室正式揭牌 开启智慧教育新篇章</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>优秀校友访谈录 · 从校园到战地记者的成长之路</span>\n <span class=\"news-ticker-item\"><span class=\"dot\"></span>2025年秋季招生简章发布 新增数据新闻方向</span>\n </div>\n </div>\n</div>\n\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css\"/>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js\"></script>\n<script>\n AOS.init({\n once: true,\n disable: 'mobile'\n });\n</script>"
},
"next": [
"添加视频背景效果",
"鼠标悬停数据动画",
"增加学院logo徽章",
"添加粒子动态效果",
"导航增加下拉菜单"
]
}
```