feat(event): add 30th anniversary landing and sponsor pages
This commit introduces a new set of pages for the Yong Peng Hash House Harriers (HHH) 30th Anniversary event. - Adds a main landing page with a modern design to serve as the central hub for the event. - Creates a dynamic sponsor list page using Vue.js, featuring a vertically scrolling marquee to acknowledge supporters. - Includes the raw data for sponsors in `supporter.json`. Additionally, several improvements have been made to the existing `photowall` page: - Refactors the scrolling text marquee for a more robust and seamless animation. - Moves the marquee from the bottom to the top of the page for better visibility. - Implements a fix for browser video autoplay restrictions by enabling audio and starting playback upon the first user interaction.
This commit is contained in:
xiaomai
@@ -26,46 +26,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Breaking News 样式 */
|
||||
.breaking-news-container {
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
|
||||
.marquee-text {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.breaking-news-label {
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
|
||||
.marquee-text-track {
|
||||
display: flex;
|
||||
padding-left: 4.8rem;
|
||||
gap: 4.8rem;
|
||||
width: max-content;
|
||||
animation: marquee-move-text 120s linear infinite;
|
||||
}
|
||||
|
||||
.breaking-news-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
/* padding-left: 120px; 为标签留出空间 */
|
||||
animation: scrollText 120s linear infinite;
|
||||
}
|
||||
|
||||
.breaking-news-content span {
|
||||
margin: 0 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes scrollText {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.breaking-news-content {
|
||||
font-size: 14px;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.breaking-news-label {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
@keyframes marquee-move-text {
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -191,56 +166,59 @@
|
||||
|
||||
<!-- Breaking News 滚动条 -->
|
||||
<div
|
||||
class="fixed bottom-0 left-0 w-full bg-red-700 text-yellow-400 text-2xl py-3 overflow-hidden z-50 breaking-news-container"
|
||||
class="fixed top-0 left-0 w-full bg-red-700 text-yellow-400 text-2xl py-3 overflow-hidden z-50 breaking-news-container"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 bg-red-900 text-yellow-100 px-4 py-3 font-bold z-10 breaking-news-label"
|
||||
>
|
||||
2005年第一届创办人名表：
|
||||
</div>
|
||||
<div class="breaking-news-content">
|
||||
<span>楊吉陽(已故)</span>
|
||||
<span>唐華(已故)</span>
|
||||
<span>許仁菘(已故)</span>
|
||||
<span>許汶信(已故)</span>
|
||||
<span>劉炎松(已故)</span>
|
||||
<span>楊淑清(已故)</span>
|
||||
<span>黃芝芳(已故)</span>
|
||||
<span>|</span>
|
||||
<span>劉吉棟</span>
|
||||
<span>許任隆</span>
|
||||
<span>楊順發</span>
|
||||
<span>吳祥森</span>
|
||||
<span>林庭芝</span>
|
||||
<span>林炳華</span>
|
||||
<span>林庭珠</span>
|
||||
<span>李玉媚</span>
|
||||
<span>林應財</span>
|
||||
<span>許斯杰</span>
|
||||
<span>許敏捷</span>
|
||||
<span>許智興</span>
|
||||
<span>劉德祥</span>
|
||||
<span>李豫梅</span>
|
||||
<span>黄潮明</span>
|
||||
<span>楊信陞</span>
|
||||
<span>蔡立義</span>
|
||||
<span>林炳龍</span>
|
||||
<span>劉振昌</span>
|
||||
<span>劉迪發</span>
|
||||
<span>楊美雄</span>
|
||||
<span>彭三媚</span>
|
||||
<span>楊光豐</span>
|
||||
<span>楊秀娥</span>
|
||||
<span>莊秀清</span>
|
||||
<span>李玉嬌</span>
|
||||
<span>趙惜嬌</span>
|
||||
<span>陳秀珠</span>
|
||||
<span>張彩雁</span>
|
||||
<span>劉暐康</span>
|
||||
<span>王貴興</span>
|
||||
<span>劉林順</span>
|
||||
<span>劉益華</span>
|
||||
<span>紀有平</span>
|
||||
<div class="marquee-text">
|
||||
<div class="marquee-text-track">
|
||||
<span>|</span>
|
||||
<span>楊吉陽(已故)</span>
|
||||
<span>唐華(已故)</span>
|
||||
<span>許仁菘(已故)</span>
|
||||
<span>許汶信(已故)</span>
|
||||
<span>劉炎松(已故)</span>
|
||||
<span>楊淑清(已故)</span>
|
||||
<span>黃芝芳(已故)</span>
|
||||
<span>|</span>
|
||||
<span>劉吉棟</span>
|
||||
<span>許任隆</span>
|
||||
<span>楊順發</span>
|
||||
<span>吳祥森</span>
|
||||
<span>林庭芝</span>
|
||||
<span>林炳華</span>
|
||||
<span>林庭珠</span>
|
||||
<span>李玉媚</span>
|
||||
<span>林應財</span>
|
||||
<span>許斯杰</span>
|
||||
<span>許敏捷</span>
|
||||
<span>許智興</span>
|
||||
<span>劉德祥</span>
|
||||
<span>李豫梅</span>
|
||||
<span>黄潮明</span>
|
||||
<span>楊信陞</span>
|
||||
<span>蔡立義</span>
|
||||
<span>林炳龍</span>
|
||||
<span>劉振昌</span>
|
||||
<span>劉迪發</span>
|
||||
<span>楊美雄</span>
|
||||
<span>彭三媚</span>
|
||||
<span>楊光豐</span>
|
||||
<span>楊秀娥</span>
|
||||
<span>莊秀清</span>
|
||||
<span>李玉嬌</span>
|
||||
<span>趙惜嬌</span>
|
||||
<span>陳秀珠</span>
|
||||
<span>張彩雁</span>
|
||||
<span>劉暐康</span>
|
||||
<span>王貴興</span>
|
||||
<span>劉林順</span>
|
||||
<span>劉益華</span>
|
||||
<span>紀有平</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -368,6 +346,32 @@
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
|
||||
// 监听用户的第一次交互（点击或触摸）
|
||||
document.addEventListener("click", initVideo, { once: true });
|
||||
document.addEventListener("touchstart", initVideo, { once: true });
|
||||
|
||||
function initVideo() {
|
||||
const video = document.querySelector("video");
|
||||
if (video) {
|
||||
video.muted = false; // 允许声音播放
|
||||
video.play().catch((err) => {
|
||||
console.warn("视频无法自动播放：", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Duplicate the marquee text track children node
|
||||
// and make it aria-hidden to create a seamless loop
|
||||
const marqueeTextTrack = document.querySelector(".marquee-text-track");
|
||||
const childCount = marqueeTextTrack.children.length; // ✅ 固定长度
|
||||
|
||||
for (let i = 0; i < childCount; i++) {
|
||||
const child = marqueeTextTrack.children[i];
|
||||
const clone = child.cloneNode(true);
|
||||
clone.setAttribute("aria-hidden", "true");
|
||||
marqueeTextTrack.appendChild(clone);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user