Skip to content

Commit 0b858be

Browse files
TreeLinTreeLin
committed
feat: connect hackathon creators with the Lite bundle and events
Replace the outdated Fliggy banner with the approved creative starter offer, PAYATHON and Fliggy entries, and clear usage boundaries.
1 parent 2b82ef7 commit 0b858be

2 files changed

Lines changed: 131 additions & 44 deletions

File tree

‎_layouts/home.html‎

Lines changed: 131 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -226,25 +226,88 @@
226226
.doc-link h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; letter-spacing: -.2px; }
227227
.doc-link p { font-size: 12px; color: var(--body); }
228228

229-
/* Hackathon banner */
230-
.hackathon-banner { padding: 72px 24px; background: linear-gradient(180deg, #f8fafb 0%, #ffffff 100%); border-bottom: 1px solid var(--hairline); }
231-
.hackathon-banner-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
232-
.hackathon-banner-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: #696969; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
233-
.hackathon-banner-kicker::before { content: ""; width: 28px; height: 2px; background: var(--violet); }
234-
.hackathon-banner h2 { font-size: 34px; font-weight: 500; line-height: 1.18; letter-spacing: -1.1px; margin-bottom: 16px; }
235-
.hackathon-banner p { font-size: 14px; color: var(--body); line-height: 1.8; margin-bottom: 18px; }
236-
.hackathon-banner ul { list-style: none; margin: 0 0 24px 0; padding: 0; }
237-
.hackathon-banner li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--body); line-height: 1.7; margin-bottom: 8px; }
238-
.hackathon-banner li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
239-
.hackathon-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
240-
.hackathon-banner .btn { border-radius: 12px; }
241-
.hackathon-banner-card { background: #fff; border: 1px solid #ededf1; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-card); }
242-
.hackathon-banner-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 18px; color: #16171d; letter-spacing: -.2px; }
243-
.hackathon-banner-meta { display: grid; gap: 12px; }
244-
.hackathon-banner-meta-item { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid #f2f2f2; }
245-
.hackathon-banner-meta-item:last-child { border-bottom: 0; padding-bottom: 0; }
246-
.hackathon-banner-meta-label { font-size: 12px; color: var(--mute); }
247-
.hackathon-banner-meta-value { font-size: 13px; color: #16171d; font-weight: 500; }
229+
/* Hackathon creative starter and event entries */
230+
.creation-promo { padding: 48px 24px 32px; background: var(--canvas-soft); border-bottom: 1px solid var(--hairline); scroll-margin-top: 84px; }
231+
.creation-inner { max-width: 1180px; margin: 0 auto; }
232+
.creation-heading { margin-bottom: 24px; }
233+
.creation-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 1px; margin-bottom: 12px; }
234+
.creation-kicker::before { content: ''; width: 28px; height: 2px; background: var(--blue); }
235+
.creation-heading h2 { font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -1.1px; }
236+
.creation-grid { display: grid; grid-template-columns: 1.28fr 1fr; gap: 20px; align-items: stretch; }
237+
.creation-package { padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); box-shadow: var(--shadow-card); min-width: 0; }
238+
.creation-package-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; }
239+
.creation-eyebrow { color: var(--body); font-size: 12px; line-height: 1.6; margin-bottom: 12px; }
240+
.creation-package h3 { font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -.4px; }
241+
.creation-package h3 span { display: block; font-size: 32px; color: var(--blue); margin-top: 2px; letter-spacing: -1px; }
242+
.creation-art { width: 140px; height: 134px; object-fit: cover; border-radius: var(--rounded-md); flex: 0 0 auto; }
243+
.creation-description { font-size: 14px; line-height: 1.8; color: var(--body); margin-bottom: 16px; }
244+
.creation-benefits { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
245+
.creation-benefits span { padding: 5px 9px; border: 1px solid var(--border-soft); background: var(--canvas); border-radius: 6px; font-size: 11px; color: var(--ink-2); line-height: 1.5; }
246+
.creation-taskline { font-size: 12px; color: var(--body); line-height: 1.8; margin-bottom: 18px; }
247+
.creation-buy { gap: 20px; }
248+
.creation-buy span { font-size: 17px; }
249+
.creation-boundary { font-size: 11px; color: var(--body); line-height: 1.7; margin-top: 12px; }
250+
.creation-events { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
251+
.creation-event { display: flex; flex-direction: column; padding: 22px 24px 18px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); min-width: 0; }
252+
.creation-event-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
253+
.creation-track { font-size: 11px; color: var(--blue); font-weight: 500; }
254+
.creation-year { font-family: var(--font-mono); font-size: 10px; color: var(--mute); }
255+
.creation-event h3 { font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.4px; text-wrap: auto; }
256+
.creation-event h3 span { font-size: 16px; white-space: nowrap; }
257+
.creation-event > p { font-size: 12px; line-height: 1.8; color: var(--body); margin-top: 6px; margin-bottom: 14px; }
258+
.creation-event-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
259+
.creation-dates { font-size: 11px; line-height: 1.8; color: var(--body); }
260+
.creation-dates span { display: block; }
261+
.creation-event-bottom a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--link-deep); font-size: 12px; text-decoration: none; min-height: 44px; white-space: nowrap; padding: 0 4px; }
262+
.creation-event-bottom a:hover { text-decoration: underline; }
263+
.creation-notes { position: relative; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: baseline; padding-top: 14px; }
264+
.creation-notes > p { font-size: 11px; line-height: 1.8; color: var(--body); }
265+
.creation-details { font-size: 11px; line-height: 1.8; color: var(--body); }
266+
.creation-details summary { cursor: pointer; color: var(--ink-2); min-height: 30px; padding: 4px 0; }
267+
.creation-details[open] { width: 100%; }
268+
.creation-details p { max-width: 1000px; margin: 8px 0; font-size: 12px; }
269+
.creation-promo a:focus-visible, .creation-details summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
270+
@media (max-width: 1000px) {
271+
.creation-grid { grid-template-columns: 1.15fr 1fr; gap: 16px; }
272+
.creation-package { padding: 22px; }
273+
.creation-art { width: 108px; height: 108px; }
274+
.creation-event { padding: 20px; }
275+
.creation-event h3 { font-size: 18px; }
276+
.creation-event h3 span { display: block; font-size: 15px; }
277+
}
278+
@media (max-width: 760px) {
279+
.creation-promo { padding: 36px 18px 28px; }
280+
.creation-heading { margin-bottom: 20px; }
281+
.creation-heading h2 { font-size: 27px; letter-spacing: -.8px; }
282+
.creation-grid { grid-template-columns: 1fr; }
283+
.creation-package { padding: 22px; }
284+
.creation-package h3 { font-size: 18px; }
285+
.creation-package h3 span { font-size: 29px; }
286+
.creation-eyebrow { max-width: 180px; font-size: 11px; margin-bottom: 10px; }
287+
.creation-art { width: 96px; height: 100px; }
288+
.creation-description { font-size: 13px; }
289+
.creation-buy { width: 100%; }
290+
.creation-events { grid-template-rows: auto auto; }
291+
.creation-event { padding: 22px; }
292+
.creation-event h3 { font-size: 19px; }
293+
.creation-event h3 span { display: inline; font-size: 15px; }
294+
.creation-event-top { margin-bottom: 10px; }
295+
.creation-event > p { font-size: 13px; }
296+
.creation-dates { font-size: 12px; }
297+
.creation-event-bottom a { font-size: 13px; }
298+
.creation-notes { display: block; }
299+
.creation-notes > p { margin-top: 6px; }
300+
}
301+
@media (max-width: 360px) {
302+
.creation-package, .creation-event { padding: 18px; }
303+
.creation-package-top { gap: 8px; }
304+
.creation-art { width: 78px; height: 92px; }
305+
.creation-package h3 { font-size: 17px; }
306+
.creation-package h3 span { font-size: 27px; }
307+
.creation-event h3 span { display: block; }
308+
.creation-benefits span { font-size: 10px; }
309+
}
310+
@media (prefers-reduced-motion: reduce) { .creation-promo * { transition: none; } }
248311

249312
/* Footer */
250313
.footer { padding: 56px 24px max(56px,env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--hairline); text-align: center; background: #fff; }
@@ -309,10 +372,6 @@
309372
.qwen-flow-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -11px; transform: translateX(50%); }
310373
.qwen-install { grid-template-columns: 1fr; }
311374
.qwen-copy-btn { width: 100%; }
312-
.hackathon-banner { padding: 52px 18px; }
313-
.hackathon-banner-inner { grid-template-columns: 1fr; gap: 28px; }
314-
.hackathon-banner h2 { font-size: 26px; letter-spacing: -.8px; }
315-
.hackathon-banner-actions .btn { width: 100%; }
316375
}
317376

318377
@media (prefers-reduced-motion: reduce) {
@@ -379,30 +438,58 @@ <h1>Born open, <span class="gradient-text">ship AI together</span>.</h1>
379438
</div>
380439
</section>
381440

382-
<section class="hackathon-banner" aria-label="2026 飞猪 AI 旅行创新大赛">
383-
<div class="hackathon-banner-inner">
384-
<div>
385-
<div class="hackathon-banner-kicker">Hackathon</div>
386-
<h2>2026 飞猪 AI 旅行创新大赛</h2>
387-
<p>阿里云百炼 × 飞猪联合发起旅游行业首个 AI 黑客松，面向个人开发者开放报名。基于飞猪 AI 开放平台与 flyai skill，可调用机票、酒店、门票等全品类实时数据；结合阿里云百炼模型与工作流，从创意到落地跑通全链路。</p>
388-
<ul>
389-
<li>赛道可选自由方向，或酒店 Staycation、目的地探索、AI 私人讲解、入境游助手四大预设命题</li>
390-
<li>作品提交时间：09.22 - 10.25</li>
391-
</ul>
392-
<div class="hackathon-banner-actions">
393-
<a class="btn btn-primary" href="https://opc.aliyun.com/feizhu" target="_blank" rel="noopener">立即报名参赛</a>
394-
<a class="btn btn-secondary" href="https://alidocs.dingtalk.com/i/nodes/QG53mjyd800agdlKHebwk4Zj86zbX04v?spm=5176.46770457.J_EH4jTga-7kdox_HRccqIL.1.60017f64w8fosJ&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_main_colum_create&rnd=0.503112500180594" target="_blank" rel="noopener">了解详情</a>
395-
</div>
441+
<section class="creation-promo" id="hackathon-creation" aria-labelledby="creation-heading">
442+
<div class="creation-inner">
443+
<div class="creation-heading">
444+
<div class="creation-kicker">HACKATHON · CREATIVE STARTER</div>
445+
<h2 id="creation-heading">准备参加 Hackathon？</h2>
396446
</div>
397-
<div class="hackathon-banner-card">
398-
<h3>赛事要点</h3>
399-
<div class="hackathon-banner-meta">
400-
<div class="hackathon-banner-meta-item"><span class="hackathon-banner-meta-label">主办方</span><span class="hackathon-banner-meta-value">阿里云百炼 × 飞猪</span></div>
401-
<div class="hackathon-banner-meta-item"><span class="hackathon-banner-meta-label">面向对象</span><span class="hackathon-banner-meta-value">个人开发者</span></div>
402-
<div class="hackathon-banner-meta-item"><span class="hackathon-banner-meta-label">作品提交</span><span class="hackathon-banner-meta-value">09.22 - 10.25</span></div>
403-
<div class="hackathon-banner-meta-item"><span class="hackathon-banner-meta-label">报名官网</span><span class="hackathon-banner-meta-value">opc.aliyun.com/feizhu</span></div>
447+
<div class="creation-grid">
448+
<article class="creation-package">
449+
<div class="creation-package-top">
450+
<div>
451+
<p class="creation-eyebrow">给你的 Agent 配一份轻量创作包</p>
452+
<h3>百炼模型工具<span>轻体验包</span></h3>
453+
</div>
454+
<img class="creation-art" src="/assets/img/hackathon-creative-toolkit.jpg" width="140" height="134" alt="蓝色创作工具箱插画" loading="lazy" decoding="async" />
455+
</div>
456+
<p class="creation-description">轻量创作性价比之选，适合参与 Hackathon、创作比赛时，在兼容的 Agent 中开展页面设计和简单功能验证等独立小任务。</p>
457+
<div class="creation-benefits" aria-label="组合内容">
458+
<span>Token Plan Lite</span><span>百炼自研工具节省计划</span><span>免费 Skills</span>
459+
</div>
460+
<p class="creation-taskline">从一个小任务开始：作品介绍页 / 示例结果卡片 / 简单交互验证</p>
461+
<a class="btn btn-primary creation-buy" href="https://common-buy.aliyun.com/package?planCode=package_ModelToolLiteBu_cn" target="_blank" rel="noopener noreferrer">查看并购买轻体验包 <span aria-hidden="true">↗</span></a>
462+
<p class="creation-boundary">用于兼容 Agent 内的交互式任务，作品后端 API、托管另计。</p>
463+
</article>
464+
<div class="creation-events" aria-label="了解两场比赛">
465+
<article class="creation-event">
466+
<div class="creation-event-top"><span class="creation-track">AI × 商业</span><span class="creation-year">2026</span></div>
467+
<h3>PAYATHON 2026 <span>· AI付黑客松</span></h3>
468+
<p>为 AI 产品接入支付，用真实付费验证商业价值。</p>
469+
<div class="creation-event-bottom">
470+
<p class="creation-dates"><span>12 月 1 日报名截止</span><span>12 月 9 日作品提交截止</span></p>
471+
<a href="https://aipay.alipay.com/community/events/payathon-2026" target="_blank" rel="noopener noreferrer" aria-label="查看 PAYATHON 2026 赛事官网">赛事官网 <span aria-hidden="true">↗</span></a>
472+
</div>
473+
</article>
474+
<article class="creation-event">
475+
<div class="creation-event-top"><span class="creation-track">AI × 旅行</span><span class="creation-year">2026</span></div>
476+
<h3>飞猪 AI 旅行创新大赛</h3>
477+
<p>开发 AI 旅行应用或智能体，可选自由或预设方向。</p>
478+
<div class="creation-event-bottom">
479+
<p class="creation-dates"><span>11 月 29 日</span><span>线上比赛及作品提交截止</span></p>
480+
<a href="https://opc.aliyun.com/feizhu" target="_blank" rel="noopener noreferrer" aria-label="查看飞猪 AI 旅行创新大赛官网">赛事官网 <span aria-hidden="true">↗</span></a>
481+
</div>
482+
</article>
404483
</div>
405484
</div>
485+
<div class="creation-notes">
486+
<details class="creation-details">
487+
<summary>购买与使用说明</summary>
488+
<p>模型及支持的内置工具消耗套餐 Credits；外部 MCP 费用按工具节省计划的适用范围抵扣。Skills 免费，不是额外收费商品。请在商品页确认 Agent 兼容性、当前价格、额度、有效期和账号购买资格。</p>
489+
<p>上述任务为建议场景，不是完整参赛作品的实测案例；轻体验包不承诺覆盖整场比赛，也不代表本站全部 CLI、生图、视频或部署能力均包含在套餐内。</p>
490+
</details>
491+
<p>赛事信息核对于 2026.10.30，日程以官网为准。购买不是参赛或评奖条件。</p>
492+
</div>
406493
</div>
407494
</section>
408495

‎assets/img/hackathon-creative-toolkit.jpg‎

30.2 KB
Loading

0 commit comments

Comments
 (0)