wangyifang
/
hsxtxxcykcds2026-backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页logo等

Browse Source
master
lion 4 weeks ago
parent 85201c1c1d
commit 32a29e453a
5 changed files with 204 additions and 18 deletions
Show Stats Download Patch File Download Diff File

BIN
public/frontend/assets/competition-hero-mark.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
public/frontend/assets/generated/hero-reference-beams-v1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/frontend/assets/generated/hero-three-landmarks-clean-field-v16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

111
public/frontend/event-site-en.html
Unescape View File

@ -92,7 +92,7 @@
pointer-events: none;
}
.hero-banner--landmarks {
background-image: url("assets/generated/hero-three-landmarks-compact-v14-4k.jpg?v=20260826");
background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826");
}
.hero-banner--photonic {
background-image: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826");
@ -542,8 +542,8 @@
.site-header .wrap, .hero .wrap { width: min(760px, calc(100% - 40px)); }
.brand { width: min(16.8vw, 152px); }
.hero { background-position: 55% center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
.hero-banner--landmarks img { object-position: right center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
.hero-banner--landmarks img { object-position: 10% center; }
.hero-banner--photonic { background-size: cover; background-position: right center; }
.hero-banner--photonic img { object-position: right center; }
.hero-grid { padding-top: 166px; }
@ -585,8 +585,8 @@
.header-inner { min-height: 62px; }
.brand { width: min(34.4%, 124px); }
.nav { display: none; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
.hero-banner--landmarks img { object-position: right center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
.hero-banner--landmarks img { object-position: 10% center; }
.hero-banner--photonic { background-size: cover; background-position: right center; }
.hero-banner--photonic img { object-position: right center; }
.hero { height: 60dvh; min-height: 60dvh; max-height: 60dvh; overflow: hidden; }
@ -5406,8 +5406,16 @@
object-fit: cover !important;
background-size: cover !important;
}
.hero-orbit-beams,
.hero-orbit-mark img {
object-fit: contain !important;
object-position: center !important;
}
.hero-banner--landmarks,
.hero-banner--landmarks img,
.hero-banner--landmarks img {
background-position: 10% center !important;
object-position: 10% center !important;
}
.hero-banner--photonic,
.hero-banner--photonic img {
background-position: right center !important;
@ -5673,6 +5681,75 @@
.hero-slogan .hero-brand-mark { width: 88px; min-width: 88px; }
.hero-slogan .slogan-first { width: min(calc(100% - 100px), 340px) !important; }
}
/* First banner: full photo + light beams + tilted logo lockup. */
.hero {
--hero-orbit-size: clamp(220px,23.5vw,340px);
--hero-orbit-top: 72%;
--hero-orbit-right: 5vw;
--hero-orbit-shift-x: 32px;
}
.hero-orbit-composition,
.hero-orbit-beams {
opacity: 0;
transition: opacity 1.2s ease;
pointer-events: none;
}
.hero.is-orbit-visible .hero-orbit-composition { opacity: 1; }
.hero.is-orbit-visible .hero-orbit-beams { opacity: .9; }
.hero-orbit-composition {
position: absolute;
z-index: 5;
top: var(--hero-orbit-top);
right: calc(var(--hero-orbit-right) - var(--hero-orbit-shift-x));
width: var(--hero-orbit-size);
aspect-ratio: 1339 / 1251;
isolation: isolate;
transform: translateY(-50%) perspective(1100px) rotateZ(-18deg) rotateX(54deg);
transform-origin: 50% 56%;
}
.hero-orbit-mark {
position: absolute;
z-index: 3;
inset: 0;
display: block;
}
.hero-orbit-mark > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.hero-orbit-beams {
position: absolute;
z-index: 8;
top: calc(var(--hero-orbit-top) + 12px);
right: calc(var(--hero-orbit-right) + var(--hero-orbit-size)/2 - var(--hero-orbit-shift-x));
display: block;
width: min(32vw,416px);
height: min(21.3vw,278px);
object-fit: contain;
filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 12px rgba(74,207,255,.32));
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
transform: translate(15.4%,-82%);
transform-origin: 84.6% 82%;
}
@media (max-width: 980px) {
.hero { --hero-orbit-size: clamp(160px,26vw,220px); --hero-orbit-top: 74%; --hero-orbit-right: 2vw; }
}
@media (max-width: 680px) {
.hero {
--hero-orbit-size: min(46vw,188px);
--hero-orbit-top: 86%;
--hero-orbit-right: -12vw;
--hero-orbit-shift-x: 16px;
}
.hero.is-orbit-visible .hero-orbit-composition { opacity: .72; }
.hero.is-orbit-visible .hero-orbit-beams { opacity: .5; }
.hero-orbit-beams { width: 52vw; height: 35vw; }
}
</style>
</head>
<body class="en-site">
@ -5688,19 +5765,25 @@
</div>
</header>
<main id="top">
<section class="hero">
<section class="hero is-orbit-visible">
<div class="hero-banners" aria-hidden="true">
<div class="hero-banner hero-banner--landmarks is-active">
<img src="assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1" alt="">
<img src="assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826" alt="">
</div>
<div class="hero-banner hero-banner--photonic">
<img src="assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826" alt="">
</div>
</div>
<div class="hero-map-dots" aria-hidden="true"></div>
<img class="hero-orbit-beams" src="assets/generated/hero-reference-beams-v1.png?v=20260826" alt="" aria-hidden="true">
<div class="hero-orbit-composition" aria-hidden="true">
<div class="hero-orbit-mark">
<img src="assets/competition-radial-mark.png?v=20260826" alt="">
</div>
</div>
<div class="wrap hero-grid">
<div class="hero-content">
<h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-radial-mark.png?v=20260826" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
<h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-hero-mark.png?v=20260827" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
<dl class="hero-organizers" aria-label="赛事组织单位">
<div class="hero-org-row"><dt>指导单位：</dt><dd>江苏省人民政府驻上海办事处、苏州工业园区管理委员会</dd></div>
<div class="hero-org-row"><dt>主办单位：</dt><dd>苏州市人民政府驻上海联络处、苏州恒泰控股集团有限公司</dd></div>
@ -5875,6 +5958,7 @@
(function () {
var hero = document.querySelector(".hero");
var banners = Array.prototype.slice.call(document.querySelectorAll(".hero-banner"));
if (banners.length < 2) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
@ -5885,17 +5969,26 @@
banners[0].classList.add("is-active");
}
banners[index].style.zIndex = "1";
if (hero && banners[index].classList.contains("hero-banner--landmarks")) {
hero.classList.add("is-orbit-visible");
}
var fading = false;
var fadeMs = 1200;
var intervalMs = 7000;
function setOrbitVisible(visible) {
if (!hero) return;
hero.classList.toggle("is-orbit-visible", visible);
}
window.setInterval(function () {
if (fading) return;
fading = true;
var next = (index + 1) % banners.length;
banners[next].style.zIndex = "2";
banners[next].classList.add("is-active");
setOrbitVisible(banners[next].classList.contains("hero-banner--landmarks"));
window.setTimeout(function () {
banners[index].classList.remove("is-active");
banners[index].style.zIndex = "0";

111
public/frontend/event-site.html
Unescape View File

@ -92,7 +92,7 @@
pointer-events: none;
}
.hero-banner--landmarks {
background-image: url("assets/generated/hero-three-landmarks-compact-v14-4k.jpg?v=20260826");
background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826");
}
.hero-banner--photonic {
background-image: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826");
@ -541,8 +541,8 @@
.site-header .wrap, .hero .wrap { width: min(760px, calc(100% - 40px)); }
.brand { width: min(16.8vw, 152px); }
.hero { background-position: 55% center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
.hero-banner--landmarks img { object-position: right center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
.hero-banner--landmarks img { object-position: 10% center; }
.hero-banner--photonic { background-size: cover; background-position: right center; }
.hero-banner--photonic img { object-position: right center; }
.hero-grid { padding-top: 166px; }
@ -584,8 +584,8 @@
.header-inner { min-height: 62px; }
.brand { width: min(34.4%, 124px); }
.nav { display: none; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
.hero-banner--landmarks img { object-position: right center; }
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
.hero-banner--landmarks img { object-position: 10% center; }
.hero-banner--photonic { background-size: cover; background-position: right center; }
.hero-banner--photonic img { object-position: right center; }
.hero { height: 60dvh; min-height: 60dvh; max-height: 60dvh; overflow: hidden; }
@ -5232,8 +5232,16 @@
object-fit: cover !important;
background-size: cover !important;
}
.hero-orbit-beams,
.hero-orbit-mark img {
object-fit: contain !important;
object-position: center !important;
}
.hero-banner--landmarks,
.hero-banner--landmarks img,
.hero-banner--landmarks img {
background-position: 10% center !important;
object-position: 10% center !important;
}
.hero-banner--photonic,
.hero-banner--photonic img {
background-position: right center !important;
@ -5437,6 +5445,75 @@
.hero-slogan .hero-brand-mark { width: 88px; min-width: 88px; }
.hero-slogan .slogan-first { width: min(calc(100% - 100px), 340px) !important; }
}
/* First banner: full photo + light beams + tilted logo lockup. */
.hero {
--hero-orbit-size: clamp(220px,23.5vw,340px);
--hero-orbit-top: 72%;
--hero-orbit-right: 5vw;
--hero-orbit-shift-x: 32px;
}
.hero-orbit-composition,
.hero-orbit-beams {
opacity: 0;
transition: opacity 1.2s ease;
pointer-events: none;
}
.hero.is-orbit-visible .hero-orbit-composition { opacity: 1; }
.hero.is-orbit-visible .hero-orbit-beams { opacity: .9; }
.hero-orbit-composition {
position: absolute;
z-index: 5;
top: var(--hero-orbit-top);
right: calc(var(--hero-orbit-right) - var(--hero-orbit-shift-x));
width: var(--hero-orbit-size);
aspect-ratio: 1339 / 1251;
isolation: isolate;
transform: translateY(-50%) perspective(1100px) rotateZ(-18deg) rotateX(54deg);
transform-origin: 50% 56%;
}
.hero-orbit-mark {
position: absolute;
z-index: 3;
inset: 0;
display: block;
}
.hero-orbit-mark > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.hero-orbit-beams {
position: absolute;
z-index: 8;
top: calc(var(--hero-orbit-top) + 12px);
right: calc(var(--hero-orbit-right) + var(--hero-orbit-size)/2 - var(--hero-orbit-shift-x));
display: block;
width: min(32vw,416px);
height: min(21.3vw,278px);
object-fit: contain;
filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 12px rgba(74,207,255,.32));
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
transform: translate(15.4%,-82%);
transform-origin: 84.6% 82%;
}
@media (max-width: 980px) {
.hero { --hero-orbit-size: clamp(160px,26vw,220px); --hero-orbit-top: 74%; --hero-orbit-right: 2vw; }
}
@media (max-width: 680px) {
.hero {
--hero-orbit-size: min(46vw,188px);
--hero-orbit-top: 86%;
--hero-orbit-right: -12vw;
--hero-orbit-shift-x: 16px;
}
.hero.is-orbit-visible .hero-orbit-composition { opacity: .72; }
.hero.is-orbit-visible .hero-orbit-beams { opacity: .5; }
.hero-orbit-beams { width: 52vw; height: 35vw; }
}
</style>
</head>
<body>
@ -5452,19 +5529,25 @@
</div>
</header>
<main id="top">
<section class="hero">
<section class="hero is-orbit-visible">
<div class="hero-banners" aria-hidden="true">
<div class="hero-banner hero-banner--landmarks is-active">
<img src="assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1" alt="">
<img src="assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826" alt="">
</div>
<div class="hero-banner hero-banner--photonic">
<img src="assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826" alt="">
</div>
</div>
<div class="hero-map-dots" aria-hidden="true"></div>
<img class="hero-orbit-beams" src="assets/generated/hero-reference-beams-v1.png?v=20260826" alt="" aria-hidden="true">
<div class="hero-orbit-composition" aria-hidden="true">
<div class="hero-orbit-mark">
<img src="assets/competition-radial-mark.png?v=20260826" alt="">
</div>
</div>
<div class="wrap hero-grid">
<div class="hero-content">
<h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-radial-mark.png?v=20260826" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
<h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-hero-mark.png?v=20260827" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
<dl class="hero-organizers" aria-label="赛事组织单位">
<div class="hero-org-row"><dt>指导单位：</dt><dd>江苏省人民政府驻上海办事处、苏州工业园区管理委员会</dd></div>
<div class="hero-org-row"><dt>主办单位：</dt><dd>苏州市人民政府驻上海联络处、苏州恒泰控股集团有限公司</dd></div>
@ -5639,6 +5722,7 @@
(function () {
var hero = document.querySelector(".hero");
var banners = Array.prototype.slice.call(document.querySelectorAll(".hero-banner"));
if (banners.length < 2) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
@ -5649,17 +5733,26 @@
banners[0].classList.add("is-active");
}
banners[index].style.zIndex = "1";
if (hero && banners[index].classList.contains("hero-banner--landmarks")) {
hero.classList.add("is-orbit-visible");
}
var fading = false;
var fadeMs = 1200;
var intervalMs = 7000;
function setOrbitVisible(visible) {
if (!hero) return;
hero.classList.toggle("is-orbit-visible", visible);
}
window.setInterval(function () {
if (fading) return;
fading = true;
var next = (index + 1) % banners.length;
banners[next].style.zIndex = "2";
banners[next].classList.add("is-active");
setOrbitVisible(banners[next].classList.contains("hero-banner--landmarks"));
window.setTimeout(function () {
banners[index].classList.remove("is-active");
banners[index].style.zIndex = "0";

Write Preview
Loading…
Cancel
Save