diff --git a/.tools/ossutil-2.3.0-windows-amd64.zip b/.tools/ossutil-2.3.0-windows-amd64.zip new file mode 100644 index 0000000..8e09af4 Binary files /dev/null and b/.tools/ossutil-2.3.0-windows-amd64.zip differ diff --git a/.tools/ossutil-2.3.0-windows-amd64/ossutil.exe b/.tools/ossutil-2.3.0-windows-amd64/ossutil.exe new file mode 100644 index 0000000..b2a01a7 Binary files /dev/null and b/.tools/ossutil-2.3.0-windows-amd64/ossutil.exe differ diff --git a/ossutil_output/ossutil_report_20260722_092627_24448.report b/ossutil_output/ossutil_report_20260722_092627_24448.report new file mode 100644 index 0000000..a5f8545 --- /dev/null +++ b/ossutil_output/ossutil_report_20260722_092627_24448.report @@ -0,0 +1 @@ +# C:\Project\官网\YD-WEB\.tools\ossutil-2.3.0-windows-amd64\ossutil.exe cp .\dist\ oss://yuedong-wechatapplet/static/wwwweb/20260722-092437/ -r --exclude index.html --dry-run -f diff --git a/package.json b/package.json index 3f62799..74103e5 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "rewrite:oss": "node scripts/rewrite-oss-paths.mjs", "preview": "vite preview" }, "dependencies": { diff --git a/public/materials/跃动健康/ppt/01.webp b/public/materials/跃动健康/ppt/01.webp new file mode 100644 index 0000000..374653a Binary files /dev/null and b/public/materials/跃动健康/ppt/01.webp differ diff --git a/public/materials/跃动健康/ppt/02.webp b/public/materials/跃动健康/ppt/02.webp new file mode 100644 index 0000000..ca2708d Binary files /dev/null and b/public/materials/跃动健康/ppt/02.webp differ diff --git a/public/materials/跃动健康/ppt/03.webp b/public/materials/跃动健康/ppt/03.webp new file mode 100644 index 0000000..3e0c6b9 Binary files /dev/null and b/public/materials/跃动健康/ppt/03.webp differ diff --git a/public/materials/跃动健康/ppt/04.webp b/public/materials/跃动健康/ppt/04.webp new file mode 100644 index 0000000..c577c3e Binary files /dev/null and b/public/materials/跃动健康/ppt/04.webp differ diff --git a/public/materials/跃动健康/ppt/05.webp b/public/materials/跃动健康/ppt/05.webp new file mode 100644 index 0000000..55e09af Binary files /dev/null and b/public/materials/跃动健康/ppt/05.webp differ diff --git a/public/materials/跃动健康/ppt/06.webp b/public/materials/跃动健康/ppt/06.webp new file mode 100644 index 0000000..e748e26 Binary files /dev/null and b/public/materials/跃动健康/ppt/06.webp differ diff --git a/public/materials/跃动健康/ppt/07.webp b/public/materials/跃动健康/ppt/07.webp new file mode 100644 index 0000000..9d96cec Binary files /dev/null and b/public/materials/跃动健康/ppt/07.webp differ diff --git a/public/materials/跃动健康/ppt/08.webp b/public/materials/跃动健康/ppt/08.webp new file mode 100644 index 0000000..0e7765a Binary files /dev/null and b/public/materials/跃动健康/ppt/08.webp differ diff --git a/public/materials/跃动健康/ppt/09.webp b/public/materials/跃动健康/ppt/09.webp new file mode 100644 index 0000000..ab5bc2f Binary files /dev/null and b/public/materials/跃动健康/ppt/09.webp differ diff --git a/public/materials/跃动健康/ppt/10.webp b/public/materials/跃动健康/ppt/10.webp new file mode 100644 index 0000000..69ce998 Binary files /dev/null and b/public/materials/跃动健康/ppt/10.webp differ diff --git a/public/materials/跃动健康/ppt/11.webp b/public/materials/跃动健康/ppt/11.webp new file mode 100644 index 0000000..3563f1c Binary files /dev/null and b/public/materials/跃动健康/ppt/11.webp differ diff --git a/public/materials/跃动健康/ppt/12.webp b/public/materials/跃动健康/ppt/12.webp new file mode 100644 index 0000000..fe4ff94 Binary files /dev/null and b/public/materials/跃动健康/ppt/12.webp differ diff --git a/public/materials/跃动健康/ppt/13.webp b/public/materials/跃动健康/ppt/13.webp new file mode 100644 index 0000000..fedad65 Binary files /dev/null and b/public/materials/跃动健康/ppt/13.webp differ diff --git a/public/materials/跃动健康/ppt/14.webp b/public/materials/跃动健康/ppt/14.webp new file mode 100644 index 0000000..498be5f Binary files /dev/null and b/public/materials/跃动健康/ppt/14.webp differ diff --git a/public/materials/跃动健康/ppt/15.webp b/public/materials/跃动健康/ppt/15.webp new file mode 100644 index 0000000..66e5a19 Binary files /dev/null and b/public/materials/跃动健康/ppt/15.webp differ diff --git a/public/materials/跃动健康/ppt/16.webp b/public/materials/跃动健康/ppt/16.webp new file mode 100644 index 0000000..aa38d65 Binary files /dev/null and b/public/materials/跃动健康/ppt/16.webp differ diff --git a/public/materials/跃动健康/ppt/17.webp b/public/materials/跃动健康/ppt/17.webp new file mode 100644 index 0000000..f882ecf Binary files /dev/null and b/public/materials/跃动健康/ppt/17.webp differ diff --git a/public/materials/跃动健康/ppt/18.webp b/public/materials/跃动健康/ppt/18.webp new file mode 100644 index 0000000..c92a2dd Binary files /dev/null and b/public/materials/跃动健康/ppt/18.webp differ diff --git a/public/materials/跃动健康/ppt/19.webp b/public/materials/跃动健康/ppt/19.webp new file mode 100644 index 0000000..141df67 Binary files /dev/null and b/public/materials/跃动健康/ppt/19.webp differ diff --git a/public/materials/跃动健康/ppt/20.webp b/public/materials/跃动健康/ppt/20.webp new file mode 100644 index 0000000..f013a4b Binary files /dev/null and b/public/materials/跃动健康/ppt/20.webp differ diff --git a/public/materials/跃动健康/ppt/21.webp b/public/materials/跃动健康/ppt/21.webp new file mode 100644 index 0000000..8bdeeeb Binary files /dev/null and b/public/materials/跃动健康/ppt/21.webp differ diff --git a/public/materials/跃动健康/ppt/22.webp b/public/materials/跃动健康/ppt/22.webp new file mode 100644 index 0000000..e9c9f9b Binary files /dev/null and b/public/materials/跃动健康/ppt/22.webp differ diff --git a/public/materials/跃动健康/ppt/23.webp b/public/materials/跃动健康/ppt/23.webp new file mode 100644 index 0000000..e3a0110 Binary files /dev/null and b/public/materials/跃动健康/ppt/23.webp differ diff --git a/public/materials/跃动健康/ppt/24.webp b/public/materials/跃动健康/ppt/24.webp new file mode 100644 index 0000000..95db671 Binary files /dev/null and b/public/materials/跃动健康/ppt/24.webp differ diff --git a/public/materials/跃动健康/ppt/25.webp b/public/materials/跃动健康/ppt/25.webp new file mode 100644 index 0000000..c57525f Binary files /dev/null and b/public/materials/跃动健康/ppt/25.webp differ diff --git a/public/materials/跃动健康/ppt/26.webp b/public/materials/跃动健康/ppt/26.webp new file mode 100644 index 0000000..d9ec652 Binary files /dev/null and b/public/materials/跃动健康/ppt/26.webp differ diff --git a/public/materials/跃动健康/ppt/27.webp b/public/materials/跃动健康/ppt/27.webp new file mode 100644 index 0000000..9352d0e Binary files /dev/null and b/public/materials/跃动健康/ppt/27.webp differ diff --git a/public/materials/跃动健康/ppt/28.webp b/public/materials/跃动健康/ppt/28.webp new file mode 100644 index 0000000..8fc1538 Binary files /dev/null and b/public/materials/跃动健康/ppt/28.webp differ diff --git a/public/materials/跃动健康/ppt/29.webp b/public/materials/跃动健康/ppt/29.webp new file mode 100644 index 0000000..e010ee0 Binary files /dev/null and b/public/materials/跃动健康/ppt/29.webp differ diff --git a/public/materials/跃动健康/ppt/30.webp b/public/materials/跃动健康/ppt/30.webp new file mode 100644 index 0000000..df8ceb0 Binary files /dev/null and b/public/materials/跃动健康/ppt/30.webp differ diff --git a/public/materials/跃动健康/ppt/31.webp b/public/materials/跃动健康/ppt/31.webp new file mode 100644 index 0000000..6287c6a Binary files /dev/null and b/public/materials/跃动健康/ppt/31.webp differ diff --git a/public/materials/跃动健康/ppt/32.webp b/public/materials/跃动健康/ppt/32.webp new file mode 100644 index 0000000..bb5e8d3 Binary files /dev/null and b/public/materials/跃动健康/ppt/32.webp differ diff --git a/public/materials/跃动健康/ppt/33.webp b/public/materials/跃动健康/ppt/33.webp new file mode 100644 index 0000000..7e488f9 Binary files /dev/null and b/public/materials/跃动健康/ppt/33.webp differ diff --git a/public/materials/跃动健康/ppt/34.webp b/public/materials/跃动健康/ppt/34.webp new file mode 100644 index 0000000..9f14aa6 Binary files /dev/null and b/public/materials/跃动健康/ppt/34.webp differ diff --git a/public/materials/跃动健康/ppt/35.webp b/public/materials/跃动健康/ppt/35.webp new file mode 100644 index 0000000..1b67409 Binary files /dev/null and b/public/materials/跃动健康/ppt/35.webp differ diff --git a/public/materials/跃动健康/ppt/36.webp b/public/materials/跃动健康/ppt/36.webp new file mode 100644 index 0000000..1c14b04 Binary files /dev/null and b/public/materials/跃动健康/ppt/36.webp differ diff --git a/public/sports-hall/brand-banner.png b/public/sports-hall/brand-banner.png new file mode 100644 index 0000000..8ac2cbb Binary files /dev/null and b/public/sports-hall/brand-banner.png differ diff --git a/public/sports-hall/child-jumping.png b/public/sports-hall/child-jumping.png new file mode 100644 index 0000000..259938d Binary files /dev/null and b/public/sports-hall/child-jumping.png differ diff --git a/public/sports-hall/city-network.png b/public/sports-hall/city-network.png new file mode 100644 index 0000000..54ae21d Binary files /dev/null and b/public/sports-hall/city-network.png differ diff --git a/public/sports-hall/competition-collage.png b/public/sports-hall/competition-collage.png new file mode 100644 index 0000000..6929050 Binary files /dev/null and b/public/sports-hall/competition-collage.png differ diff --git a/scripts/rewrite-oss-paths.mjs b/scripts/rewrite-oss-paths.mjs new file mode 100644 index 0000000..fd8662d --- /dev/null +++ b/scripts/rewrite-oss-paths.mjs @@ -0,0 +1,66 @@ +import { readFileSync, readdirSync, writeFileSync } from 'node:fs'; +import { extname, join, resolve } from 'node:path'; + +const rawBase = process.argv[2]; + +if (!rawBase || !/^https:\/\//.test(rawBase)) { + throw new Error('Usage: npm run rewrite:oss -- https://bucket.example/path/'); +} + +const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`; +const distDir = resolve('dist'); +const textExtensions = new Set(['.html', '.js', '.css']); +const files = []; + +const collectFiles = (directory) => { + for (const entry of readdirSync(directory, { withFileTypes: true })) { + const fullPath = join(directory, entry.name); + if (entry.isDirectory()) collectFiles(fullPath); + else if (textExtensions.has(extname(entry.name))) files.push(fullPath); + } +}; + +collectFiles(distDir); + +// Vite has already rewritten static template/CSS URLs. Only rewrite root asset +// paths that still begin immediately after a JavaScript quote or template tick. +const rootAssetPattern = /(["'`])\/(site|materials|sports-hall)\//g; +let changedFiles = 0; + +for (const file of files.filter((item) => extname(item) === '.js')) { + const source = readFileSync(file, 'utf8'); + const rewritten = source.replace( + rootAssetPattern, + (_match, quote, folder) => `${quote}${base}${folder}/`, + ); + + if (rewritten !== source) { + writeFileSync(file, rewritten, 'utf8'); + changedFiles += 1; + } +} + +const duplicatePrefix = `${base.slice(0, -1)}${base}`; +const unresolved = []; +const duplicated = []; + +for (const file of files) { + const content = readFileSync(file, 'utf8'); + if (content.includes(duplicatePrefix) || /https:\/\/[^\s"'`]+https:\/\//.test(content)) { + duplicated.push(file); + } + if (extname(file) === '.js' && rootAssetPattern.test(content)) { + unresolved.push(file); + } + rootAssetPattern.lastIndex = 0; +} + +if (duplicated.length) { + throw new Error(`Duplicated OSS prefix found in: ${duplicated.join(', ')}`); +} + +if (unresolved.length) { + throw new Error(`Root asset paths remain in: ${unresolved.join(', ')}`); +} + +console.log(`OSS paths verified. Rewritten files: ${changedFiles}`); diff --git a/src/components/HealthSection.vue b/src/components/HealthSection.vue new file mode 100644 index 0000000..a4fdccf --- /dev/null +++ b/src/components/HealthSection.vue @@ -0,0 +1,224 @@ + + + + + \ No newline at end of file diff --git a/src/components/SportsHallSection.vue b/src/components/SportsHallSection.vue new file mode 100644 index 0000000..1daab66 --- /dev/null +++ b/src/components/SportsHallSection.vue @@ -0,0 +1,163 @@ + + + diff --git a/src/data/materials.json b/src/data/materials.json index a80da4c..9673494 100644 --- a/src/data/materials.json +++ b/src/data/materials.json @@ -543,7 +543,7 @@ "type": "image", "name": "成长规划", "group": "①-跃动运动馆", - "url": "/materials/教育培训/001-成长规划.webp" + "url": "/sports-hall/brand-banner.png" }, { "type": "document", @@ -583,7 +583,7 @@ "type": "image", "name": "2026青浦青促中心 (1)", "group": ".", - "url": "/materials/跃动健康/001-青浦青促中心-1.webp" + "url": "/materials/跃动健康/003-青浦青促中心-4.webp" }, { "type": "image", diff --git a/src/data/page-content.js b/src/data/page-content.js index 5799ebe..4a9b289 100644 --- a/src/data/page-content.js +++ b/src/data/page-content.js @@ -11,6 +11,39 @@ const doc = (match) => { }; const paragraphs = (lines, max = 12) => lines.filter((line) => line.length > 12).slice(0, max); +const healthPresentationImages = [ + '国家体育总局 2025 年全国青少年体育工作会议', + '《“健康中国2030”规划纲要》', + '《家校社协同育人“教联体”工作方案》', + '《上海市运动促进健康计划(2024—2026)》', + '《深化新时代中小学体育工作高质量发展的若干措施》', + '儿童心理健康', + '儿童脊柱侧弯', + '儿童近视', + '儿童肥胖', + '青少年运动促进中心', + '智慧场馆四位一体服务体系', + '青浦区青少年运动健康促进中心', + '青浦区青少年运动健康促进中心活动现场', + '青浦区青少年运动健康促进中心训练现场', + '青浦区青少年运动健康促进中心服务现场', + '青少年跑酷课程', + '青少年健康促进课程', + '幼儿体适能课程', + '跃动运动馆课程现场', + '青浦区青少年运动健康促进中心课程', + 'AI 心灵教室', + '体重运动管理', + '体态运动管理', + ...Array.from({ length: 11 }, (_, index) => `青浦区青少年运动健康促进中心活动纪实 ${index + 1}`), + '合作办训基地', + '长三角一体化示范区跳绳研究发展中心' +].map((alt, index) => ({ + src: `/materials/跃动健康/ppt/${String(index + 1).padStart(2, '0')}.webp`, + alt, + title: alt +})); + const aboutDocument = doc('1-关于跃动'); const historyHeadingIndex = aboutDocument.findIndex((line) => line.includes('跃动历程')); const brandIntroduction = paragraphs(historyHeadingIndex > -1 ? aboutDocument.slice(0, historyHeadingIndex) : aboutDocument.slice(0, 4), 8); @@ -91,7 +124,7 @@ export const pages = { }, health: { eyebrow: 'YUEDONG HEALTH', title: '跃动健康', summary: '连接体适能、运动管理与青少年健康促进服务。', hero: images('跃动健康')[0], - sections: { default: { title: '运动促进健康', body: paragraphs(doc('6-跃动健康'), 22), gallery: images('跃动健康').slice(0, 16) } } + sections: { default: { title: '运动促进健康', body: paragraphs(doc('6-跃动健康'), 22), gallery: images('跃动健康').slice(0, 16), slides: healthPresentationImages } } }, ygjrc: { eyebrow: 'GLOBAL JUMP ROPE CLUB', title: 'YGJRC', summary: '跃动全球跳绳俱乐部,连接全球运动员、教练与跳绳推广者。', @@ -114,3 +147,27 @@ pages.about.sections['brand-story'].body = brandIntroduction; pages.about.sections['brand-story'].timeline = aboutTimeline; pages.about.sections.history.body = []; pages.about.sections.history.timeline = aboutTimeline; + +Object.assign(pages.education, { + eyebrow: 'EDUCATION & TRAINING', + title: '教育培训', + summary: '以专业课程、科学训练和成长陪伴,构建青少年跳绳教育体系。', + tabs: [ + { key: 'venues', label: '跃动运动馆' }, + { key: 'camps', label: '寒暑营' }, + { key: 'training', label: '训练营' } + ] +}); +Object.assign(pages.education.sections.venues, { + title: '跃动运动馆', + body: [ + '跃动运动馆成立于2016年,目前已在全国近20个城市开设30余家门店,是面向青少年以跳绳为核心、融合体适能与幼儿体育的线下培训平台。', + '通过体质体征测评、运动能力评估、运动指导及干预等科学方法形成体育运动整套解决方案,实现提升运动能力、培养健康行为、塑造体育品德的三大目标。' + ], + gallery: [ + { src: '/sports-hall/brand-banner.png', alt: '跃动运动馆品牌介绍' }, + { src: '/sports-hall/child-jumping.png', alt: '跃动运动馆学员训练' }, + { src: '/sports-hall/city-network.png', alt: '全国场馆服务城市分布' }, + { src: '/sports-hall/competition-collage.png', alt: '学员训练与比赛精彩瞬间' } + ] +}); diff --git a/src/style.css b/src/style.css index dc6879f..c8ff6d3 100644 --- a/src/style.css +++ b/src/style.css @@ -80,30 +80,45 @@ main { min-height: 72vh; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Vue-native homepage */ -.new-home { overflow: hidden; background: #fff; } -.home-hero { position: relative; min-height: 860px; padding-top: 78px; isolation: isolate; overflow: hidden; color: #fff; background: #0090ff; } -.home-hero-media { position: absolute; inset: 0; z-index: -3; background: url('/site/assets/images/banners/banner.png') center/cover no-repeat; transform: scale(1.03); animation: heroBreath 12s ease-in-out infinite alternate; } +.new-home { overflow: hidden; background: #fff; padding-top: 78px;} +.home-hero { position: relative; min-height: 800px; isolation: isolate; overflow: hidden; color: #fff; background: #0090ff; } +.home-hero-media { position: absolute; inset: 0; z-index: -4; width: 100%; background: url('/site/assets/images/banners/banner.png') 68% center/cover no-repeat; transform: scale(1.015); transform-origin: right center; animation: heroBreath 14s ease-in-out infinite alternate; } @keyframes heroBreath { to { transform: scale(1.09); } } -.home-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(0,100,184,.91) 0%,rgba(0,144,255,.69) 46%,rgba(0,144,255,.16) 82%),linear-gradient(0deg,rgba(0,111,201,.66),transparent 62%); } -.home-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,#000,transparent 72%); } -.home-hero-ring { position: absolute; z-index: -1; border: 1px solid rgba(130,202,255,.24); border-radius: 50%; animation: orbit 18s linear infinite; } +.home-hero-shade { position: absolute; inset: 0; z-index: -3; width: 100%; background: linear-gradient(90deg,transparent 45%,rgba(0,43,82,.04) 70%,rgba(0,20,42,.18) 100%); } +.home-hero-solid { position: absolute; inset: 0; z-index: -2; width: 100%; background: linear-gradient(90deg,#006fc9 0%,#0086ec 30%,#0090ff 45%,rgba(0,144,255,.98) 50%,rgba(0,144,255,.86) 55%,rgba(0,144,255,.56) 61%,rgba(0,144,255,.22) 68%,rgba(0,144,255,0) 76%); } +.home-hero-grid { display: none; } +.home-hero-ring { display: none; } .home-hero-ring::after { content: ""; position: absolute; left: 12%; top: 12%; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 22px var(--blue-300); } .ring-one { width: 570px; height: 570px; right: -160px; top: 120px; }.ring-two { width: 280px; height: 280px; right: 115px; top: 260px; animation-direction: reverse; animation-duration: 12s; } -.home-hero-content { min-height: 780px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } +.home-hero-content { min-height: 720px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .home-eyebrow { display: flex; align-items: center; gap: 14px; color: var(--blue-300); font-size: 11px; font-weight: 800; letter-spacing: 4px; } .home-eyebrow::before { content: ""; width: 42px; height: 2px; background: var(--blue-600); } -.home-hero h1 { margin: 22px 0 24px; font-size: clamp(68px,8.3vw,122px); line-height: .94; letter-spacing: -7px; text-shadow: 0 18px 55px rgba(0,0,0,.26); } +.home-hero h1 { margin: 22px 0 24px; max-width: 650px; font-size: clamp(66px,7.3vw,108px); line-height: .96; letter-spacing: -6px; text-shadow: 0 18px 45px rgba(0,69,132,.2); } .home-hero h1 em { color: var(--blue-600); font-style: normal; } -.home-hero-content > p { max-width: 670px; margin: 0; color: rgba(235,247,255,.75); font-size: 17px; line-height: 1.9; } +.home-hero-content > p { max-width: 720px; margin: 0; color: rgba(255,255,255,.92); font-size: clamp(19px,1.45vw,23px); font-weight: 500; line-height: 1.75; text-align: center; text-wrap: balance; text-shadow: 0 5px 20px rgba(0,61,118,.16); } .home-hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 36px; } .home-primary-button,.home-ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 11px; font-size: 13px; font-weight: 700; transition: .3s; } .home-primary-button { gap: 30px; color: #fff; background: var(--blue-600); box-shadow: 0 16px 35px rgba(0,144,255,.3); }.home-primary-button span { transition: transform .25s; }.home-primary-button:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(0,144,255,.4); }.home-primary-button:hover span { transform: translateX(6px); } .home-ghost-button { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }.home-ghost-button:hover { border-color: var(--blue-300); background: rgba(0,144,255,.16); } -.home-stats { position: absolute; left: 5%; bottom: 36px; display: grid; grid-template-columns: repeat(4,auto); gap: 0; } +.home-stats { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; display: grid; grid-template-columns: repeat(4,auto); gap: 0; } .home-stats > div { min-width: 150px; padding: 0 30px; border-left: 1px solid rgba(255,255,255,.2); }.home-stats > div:first-child { padding-left: 0; border-left: 0; } .home-stats strong,.home-stats span { display: block; }.home-stats strong { font-size: 22px; }.home-stats span { margin-top: 6px; color: rgba(235,247,255,.5); font-size: 10px; letter-spacing: 1px; } .home-scroll { position: absolute; right: 34px; bottom: 36px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: 2px; writing-mode: vertical-rl; }.home-scroll i { position: relative; display: block; width: 1px; height: 55px; overflow: hidden; background: rgba(255,255,255,.2); }.home-scroll i::after { content: ""; position: absolute; inset: -100% 0 auto; height: 100%; background: #fff; animation: scrollLine 2s ease-in-out infinite; } .home-about { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); gap: 95px; align-items: center; padding-top: 120px; padding-bottom: 130px; } +.home-honor-carousel { position: relative; min-height: 540px; overflow: hidden; border: 1px solid rgba(0,144,255,.14); border-radius: 30px 6px 30px 6px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: var(--shadow); isolation: isolate; } +.home-honor-carousel::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(255,255,255,.58); border-radius: inherit; pointer-events: none; } +.home-honor-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transform: scale(1.035); transition: opacity .75s ease, visibility .75s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); pointer-events: none; } +.home-honor-slide.active { z-index: 1; opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; } +.home-honor-slide img { width: 100%; height: 100%; padding: 26px; object-fit: contain; background: radial-gradient(circle at 50% 42%,#fff 0%,#f4faff 72%,#e2f3ff 100%); } +.home-honor-slide > div { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 8px; padding: 80px 32px 70px; color: #fff; background: linear-gradient(transparent,rgba(0,75,139,.92)); } +.home-honor-slide small { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 800; letter-spacing: 2px; } +.home-honor-slide strong { max-width: 82%; font-size: clamp(22px,2.2vw,32px); line-height: 1.3; } +.home-honor-controls { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } +.home-honor-controls > button { width: 38px; height: 38px; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(0,107,201,.45); backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; transition: transform .25s ease, background .25s ease; } +.home-honor-controls > button:hover { background: var(--blue-600); transform: translateY(-2px); } +.home-honor-controls > div { display: flex; align-items: center; gap: 7px; pointer-events: auto; } +.home-honor-controls > div button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .3s ease, background .3s ease; } +.home-honor-controls > div button.active { width: 28px; background: #fff; } .home-about-image { position: relative; }.home-about-image::before { content: ""; position: absolute; left: -22px; bottom: -22px; width: 72%; height: 70%; background: var(--blue-100); border-radius: 28px 5px 28px 5px; }.home-about-image img { position: relative; z-index: 1; width: 100%; min-height: 540px; object-fit: cover; border-radius: 30px 6px 30px 6px; box-shadow: var(--shadow); }.home-about-image > span { position: absolute; right: -28px; bottom: 55px; z-index: 2; padding: 18px 22px; color: #fff; border-radius: 12px 3px 12px 3px; background: var(--blue-600); box-shadow: 0 15px 36px rgba(0,144,255,.3); font-size: 10px; font-weight: 800; letter-spacing: 2px; } .home-section-label { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 4px; } .home-about-copy h2 { margin: 14px 0 28px; color: var(--ink); font-size: clamp(38px,4.4vw,59px); line-height: 1.22; letter-spacing: -3px; }.home-about-copy > p { max-width: 690px; margin: 0; color: #536b83; font-size: 15px; line-height: 2; } @@ -133,6 +148,135 @@ main { min-height: 72vh; } } @keyframes homeReveal { from { opacity: .25; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } +/* Yuedong Jumping Home */ +.sports-hall-page { display: grid; gap: 92px; } +.hall-kicker { color: var(--blue-600); font-size: 10px; font-weight: 900; letter-spacing: 3px; } +.sports-hall-page h3 { color: var(--ink); font-size: clamp(32px,4vw,52px); line-height: 1.18; letter-spacing: -2px; } +.hall-intro { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); min-height: 590px; overflow: hidden; border-radius: 32px 7px 32px 7px; background: linear-gradient(125deg,#006fc9 0%,#0090ff 66%,#39b3ff 100%); box-shadow: 0 28px 70px rgba(0,92,175,.2); } +.hall-intro::before { content: ""; position: absolute; right: -160px; bottom: -330px; width: 760px; height: 760px; border: 2px solid rgba(255,225,0,.65); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,225,0,.08),0 0 0 160px rgba(255,225,0,.05); } +.hall-intro-copy { position: relative; z-index: 2; align-self: center; padding: 76px 20px 120px 70px; color: #fff; } +.hall-intro-copy .hall-kicker { color: #ffe500; } +.hall-intro-copy h3 { max-width: 650px; margin: 16px 0 26px; color: #fff; font-size: clamp(46px,5.4vw,76px); } +.hall-intro-copy h3 em { color: #ffe500; font-style: normal; } +.hall-intro-copy > p { max-width: 680px; margin: 0; color: rgba(255,255,255,.86); font-size: 16px; line-height: 2; } +.hall-goals { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; } +.hall-goals span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); } +.hall-intro-visual { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 55px 25px 65px 0; } +.hall-intro-visual img { width: min(100%,610px); max-height: 510px; object-fit: contain; filter: drop-shadow(0 28px 35px rgba(0,47,91,.2)); animation: hallFloat 5s ease-in-out infinite; } +@keyframes hallFloat { 50% { transform: translateY(-12px); } } +.hall-stats { position: absolute; left: 70px; bottom: 38px; z-index: 3; display: flex; gap: 0; } +.hall-stats > div { min-width: 130px; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.25); } +.hall-stats > div:first-child { padding-left: 0; border-left: 0; } +.hall-stats strong,.hall-stats span { display: block; } +.hall-stats strong { color: #fff; font-size: 26px; } +.hall-stats span { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: 1px; } +.hall-science { display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); gap: 70px; align-items: center; } +.hall-section-copy h3,.hall-section-title h3,.hall-coach-copy h3,.hall-network-card h3,.hall-gallery-card h3 { margin: 13px 0 20px; } +.hall-section-copy > p,.hall-section-title > p,.hall-coach-copy > p,.hall-network-card p,.hall-gallery-card p { color: var(--muted); line-height: 1.9; } +.hall-concerns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } +.hall-concerns span { padding: 10px 15px; color: #4b6178; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(0,72,135,.05); font-size: 12px; } +.hall-assessment { padding: 38px; border: 1px solid rgba(0,144,255,.12); border-radius: 27px 6px 27px 6px; background: linear-gradient(145deg,#fff,#eef8ff); box-shadow: var(--shadow); } +.hall-assessment > small { color: var(--blue-600); font-size: 9px; font-weight: 900; letter-spacing: 3px; } +.hall-assessment ol { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; } +.hall-assessment li { display: grid; grid-template-columns: 55px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(0,72,135,.06); transition: transform .3s ease; } +.hall-assessment li:hover { transform: translateX(7px); } +.hall-assessment li > b { color: rgba(0,144,255,.25); font-size: 25px; } +.hall-assessment strong,.hall-assessment span { display: block; } +.hall-assessment strong { color: var(--ink); font-size: 16px; } +.hall-assessment span { margin-top: 5px; color: var(--muted); font-size: 12px; } +.hall-section-title { max-width: 780px; margin: 0 auto 44px; text-align: center; } +.hall-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } +.hall-values-grid article { position: relative; min-height: 240px; overflow: hidden; padding: 27px 24px; border: 1px solid color-mix(in srgb,var(--value-color) 30%,#fff); border-radius: 20px 5px 20px 5px; background: #fff; box-shadow: 0 12px 34px rgba(0,72,135,.07); transition: transform .35s ease,box-shadow .35s ease; } +.hall-values-grid article::after { content: ""; position: absolute; right: -55px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb,var(--value-color) 10%,transparent); } +.hall-values-grid article:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,72,135,.13); } +.hall-values-grid article > div { display: flex; align-items: baseline; gap: 7px; color: var(--value-color); } +.hall-values-grid article b { font-size: 42px; line-height: 1; } +.hall-values-grid article small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; } +.hall-values-grid h4 { margin: 24px 0 12px; color: var(--value-color); font-size: 17px; } +.hall-values-grid p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; } +.hall-curriculum { margin-right: calc((100vw - 100%)/-2); margin-left: calc((100vw - 100%)/-2); padding: 90px max(5vw,calc((100vw - 1200px)/2)); color: #fff; background: linear-gradient(135deg,#006fc9,#0090ff 62%,#42b5ff); } +.hall-section-title.light h3 { color: #fff; } +.hall-section-title.light .hall-kicker { color: #b9e4ff; } +.hall-section-title.light p { color: rgba(255,255,255,.72); } +.hall-levels { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } +.hall-levels article { position: relative; min-height: 390px; padding: 28px 24px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px 5px 22px 5px; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); transition: transform .35s ease,background .35s ease; } +.hall-levels article:hover { transform: translateY(-8px); background: rgba(255,255,255,.15); } +.hall-levels article > span { position: absolute; right: 22px; top: 18px; color: rgba(255,255,255,.18); font-size: 38px; font-weight: 900; } +.hall-levels small { color: #bce6ff; font-size: 10px; font-weight: 800; letter-spacing: 1px; } +.hall-levels h4 { margin: 30px 0 8px; font-size: 30px; } +.hall-levels strong { color: #ffe500; font-size: 15px; } +.hall-levels p { min-height: 78px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.75; } +.hall-levels ul { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; } +.hall-levels li { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.86); font-size: 12px; } +.hall-loop-steps { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; } +.hall-loop-steps::before { content: ""; position: absolute; top: 36px; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg,#a9ddff,#0090ff,#ffe500); } +.hall-loop-steps article { position: relative; padding: 78px 18px 24px; text-align: center; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; background: #fff; box-shadow: 0 12px 28px rgba(0,72,135,.07); } +.hall-loop-steps b { position: absolute; top: 15px; left: 50%; width: 43px; height: 43px; display: grid; place-items: center; color: #fff; border: 5px solid #fff; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 1px var(--line); transform: translateX(-50%); } +.hall-loop-steps h4 { margin: 0 0 10px; color: var(--ink); font-size: 18px; } +.hall-loop-steps p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; } +.hall-coaches { display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.86fr); gap: 70px; align-items: center; padding: 54px; border-radius: 28px 6px 28px 6px; background: linear-gradient(145deg,#f2faff,#fff); box-shadow: var(--shadow); } +.hall-coach-rhythm { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 28px; } +.hall-coach-rhythm span { padding: 13px 15px; color: var(--muted); border-radius: 10px; background: #fff; font-size: 12px; } +.hall-coach-rhythm b { margin-right: 7px; color: var(--blue-600); } +.hall-coach-numbers { display: grid; gap: 12px; } +.hall-coach-numbers > div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid rgba(0,144,255,.12); border-radius: 14px; background: #fff; } +.hall-coach-numbers strong { color: var(--blue-600); font-size: 30px; } +.hall-coach-numbers span { color: #3f5870; font-size: 14px; } +.hall-footprint { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; } +.hall-network-card,.hall-gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 25px 5px 25px 5px; background: #fff; box-shadow: var(--shadow); } +.hall-network-card > div,.hall-gallery-card > div { padding: 34px 36px; } +.hall-network-card h3,.hall-gallery-card h3 { font-size: 30px; } +.hall-network-card img { display: block; width: 100%; height: 360px; padding: 16px 28px 30px; object-fit: contain; } +.hall-gallery-card { display: flex; flex-direction: column; background: #007cd9; } +.hall-gallery-card > img { order: 2; width: 100%; height: 410px; padding: 0 16px 18px; object-fit: contain; } +.hall-gallery-card > div { color: #fff; } +.hall-gallery-card small { color: #a8ddff; font-size: 9px; font-weight: 900; letter-spacing: 2px; } +.hall-gallery-card h3 { color: #fff; } +.hall-gallery-card p { color: rgba(255,255,255,.72); } +.hall-quote { max-width: 950px; margin: -20px auto 0; text-align: center; } +.hall-quote p { margin: 0; color: var(--ink); font-size: clamp(24px,3vw,36px); font-weight: 700; line-height: 1.65; letter-spacing: -1px; } +.hall-quote a { display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; padding: 14px 20px; color: #fff; border-radius: 10px; background: var(--blue-600); box-shadow: 0 14px 30px rgba(0,144,255,.25); font-size: 13px; font-weight: 800; transition: transform .3s ease; } +.hall-quote a:hover { transform: translateY(-4px); } + +@media (max-width: 1050px) { + .hall-intro { grid-template-columns: 1fr; } + .hall-intro-copy { padding-right: 60px; } + .hall-intro-visual { position: absolute; right: -80px; bottom: 0; width: 52%; opacity: .28; } + .hall-science,.hall-coaches { grid-template-columns: 1fr; } + .hall-values-grid,.hall-levels { grid-template-columns: repeat(2,1fr); } + .hall-footprint { grid-template-columns: 1fr; } +} + +@media (max-width: 700px) { + .sports-hall-page { gap: 64px; } + .hall-intro { min-height: 700px; border-radius: 22px 5px 22px 5px; } + .hall-intro-copy { align-self: start; padding: 55px 24px 185px; } + .hall-intro-copy h3 { font-size: 46px; } + .hall-intro-copy > p { font-size: 14px; } + .hall-intro-visual { right: -20px; bottom: 20px; width: 78%; padding: 0; opacity: .24; } + .hall-stats { right: 22px; bottom: 28px; left: 22px; justify-content: space-between; } + .hall-stats > div { min-width: 0; padding: 0 12px; } + .hall-stats strong { font-size: 21px; } + .hall-science { gap: 32px; } + .hall-assessment { padding: 22px 17px; } + .hall-assessment li { grid-template-columns: 42px 1fr; gap: 10px; padding: 15px 12px; } + .hall-values-grid,.hall-levels { grid-template-columns: 1fr; } + .hall-values-grid article { min-height: 205px; } + .hall-curriculum { padding-top: 70px; padding-bottom: 70px; } + .hall-levels article { min-height: 0; } + .hall-levels p { min-height: 0; } + .hall-loop-steps { grid-template-columns: 1fr; } + .hall-loop-steps::before { top: 25px; bottom: 25px; left: 31px; width: 2px; height: auto; } + .hall-loop-steps article { padding: 21px 20px 21px 78px; text-align: left; } + .hall-loop-steps b { top: 50%; left: 31px; transform: translate(-50%,-50%); } + .hall-coaches { gap: 35px; padding: 30px 22px; } + .hall-coach-numbers > div { grid-template-columns: 105px 1fr; padding: 17px; } + .hall-coach-numbers strong { font-size: 25px; } + .hall-network-card > div,.hall-gallery-card > div { padding: 28px 24px; } + .hall-network-card img { height: 270px; padding: 8px 12px 22px; } + .hall-gallery-card > img { height: 310px; } +} + /* Inner page hero */ .page-hero { position: relative; height: clamp(350px, 38vw, 460px); padding-top: 78px; isolation: isolate; overflow: hidden; background: #0090ff center/cover no-repeat; } .page-hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 48px; background: linear-gradient(transparent, rgba(3,26,61,.24)); } @@ -164,7 +308,7 @@ main { min-height: 72vh; } .subnav a.active { color: #fff; background: linear-gradient(135deg,var(--blue-600),var(--blue-800)); box-shadow: 0 10px 24px rgba(8,120,232,.25); } /* Inner content */ -.content-page { background: linear-gradient(180deg,#fff 0,var(--blue-50) 100%); } +.content-page { background: linear-gradient(180deg,#fff 0,var(--blue-50) 100%); padding-top: 76px; } .content { padding: 96px 0 128px; } .section-heading { display: grid; grid-template-columns: 62px auto 1fr; align-items: center; gap: 20px; margin-bottom: 52px; } .section-heading > span { width: 62px; height: 62px; display: grid; place-items: center; color: #fff; border-radius: 18px 4px 18px 4px; background: linear-gradient(145deg,var(--blue-500),var(--blue-800)); box-shadow: 0 12px 28px rgba(8,120,232,.23); font-size: 18px; font-weight: 900; } @@ -545,14 +689,20 @@ main { min-height: 72vh; } .members > div { grid-template-columns: repeat(2,1fr); } .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; } .footer-inner > div:last-child { grid-column: 2; } - .home-hero { min-height: 790px; padding-top: 70px; } - .home-hero-content { min-height: 720px; } + .home-hero { min-height: 760px; padding-top: 70px; } + .home-hero-media { width: 100%; background-position: 68% center; } + .home-hero-shade { width: 100%; } + .home-hero-solid { width: 100%; background: linear-gradient(90deg,#006fc9 0%,#0090ff 56%,rgba(0,144,255,.96) 62%,rgba(0,144,255,.68) 70%,rgba(0,144,255,.28) 80%,rgba(0,144,255,0) 90%); } + .home-hero-grid { display: none; } + .home-hero-content { min-height: 690px; } .home-hero h1 { font-size: 78px; } + .home-hero-content > p { max-width: 600px; } .home-stats { grid-template-columns: repeat(2,1fr); gap: 18px 0; bottom: 28px; } .home-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .home-scroll { display: none; } .home-about { grid-template-columns: 1fr; gap: 70px; } .home-about-image { width: min(650px,92%); } + .home-honor-carousel { width: min(650px,92%); } .ecosystem-card:nth-child(n) { grid-column: span 6; } .home-innovation { grid-template-columns: 1fr; } .home-news-grid { grid-template-columns: repeat(2,1fr); } @@ -609,12 +759,13 @@ main { min-height: 72vh; } .copyright { width: calc(100% - 36px); display: block; line-height: 2; } .copyright span { display: block; } .home-hero { min-height: 760px; } - .home-hero-media { background-position: 64% center; } + .home-hero-media,.home-hero-shade,.home-hero-grid { display: none; } .home-hero-shade { background: linear-gradient(90deg,rgba(0,99,183,.92),rgba(0,144,255,.7)),linear-gradient(0deg,rgba(0,111,201,.68),transparent 60%); } + .home-hero-solid { width: 100%; clip-path: none; background: linear-gradient(145deg,#006fc9 0%,#0090ff 78%,#35a9ff 100%); } .home-hero-grid { background-size: 44px 44px; } .home-hero-content { min-height: 690px; justify-content: flex-start; padding-top: 105px; } .home-hero h1 { margin-top: 18px; font-size: 58px; line-height: 1; letter-spacing: -4px; } - .home-hero-content > p { font-size: 14px; } + .home-hero-content > p { max-width: 100%; font-size: 17px; line-height: 1.7; text-align: center; } .home-hero-actions { width: 100%; align-items: stretch; flex-direction: column; } .home-primary-button,.home-ghost-button { width: 100%; } .home-stats { left: 15px; right: 15px; grid-template-columns: repeat(2,1fr); } @@ -622,6 +773,7 @@ main { min-height: 72vh; } .ring-one { width: 330px; height: 330px; right: -190px; top: 160px; }.ring-two { display: none; } .home-about { padding-top: 80px; padding-bottom: 90px; } .home-about-image { width: calc(100% - 14px); }.home-about-image img { min-height: 370px; }.home-about-image > span { right: -14px; bottom: 34px; } + .home-honor-carousel { width: 100%; min-height: 410px; } .home-about-copy h2 { font-size: 36px; letter-spacing: -2px; }.home-about-points { grid-template-columns: 1fr; } .home-ecosystem,.home-products,.home-news { padding-top: 78px; padding-bottom: 85px; } .home-section-head { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 34px; }.home-section-head h2 { font-size: 40px; }.home-section-head > p { font-size: 14px; } diff --git a/src/views/ContentPage.vue b/src/views/ContentPage.vue index 7819538..5e3ea44 100644 --- a/src/views/ContentPage.vue +++ b/src/views/ContentPage.vue @@ -41,6 +41,8 @@ + +

{{ line }}

@@ -80,6 +82,8 @@
+ +

{{ line }}

查看详情 →
@@ -89,7 +93,7 @@ 0{{ i + 1 }}

{{ card.title || card.alt }}

{{ card.body[0] }}

查看详情 →
-