444 lines
17 KiB
HTML
444 lines
17 KiB
HTML
<!-- works.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="zh" class="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>优秀作品 - 林赛花杯写作比赛</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");
|
|
body {
|
|
font-family: "Noto Sans SC", sans-serif;
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.6s ease;
|
|
}
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.theme-transition {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* 作品卡片悬停效果 */
|
|
.work-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.work-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="theme-transition bg-white text-gray-800">
|
|
<!-- 导航栏 (与首页相同) -->
|
|
<header
|
|
class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 theme-transition"
|
|
>
|
|
<div
|
|
class="container mx-auto px-4 py-3 flex justify-between items-center"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold mr-2"
|
|
>
|
|
林
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-amber-600">林赛花杯</h1>
|
|
<p class="text-xs text-gray-500 -mt-1">写作比赛</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a
|
|
href="index.html"
|
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
|
>首页</a
|
|
>
|
|
<a
|
|
href="about.html"
|
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
|
>关于比赛</a
|
|
>
|
|
<a
|
|
href="awards.html"
|
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
|
>奖项设置</a
|
|
>
|
|
<a
|
|
href="works.html"
|
|
class="font-medium text-amber-600 border-b-2 border-amber-500 pb-1"
|
|
>优秀作品</a
|
|
>
|
|
<a
|
|
href="contact.html"
|
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
|
>联系咨询</a
|
|
>
|
|
</nav>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button
|
|
id="theme-toggle"
|
|
class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition"
|
|
>
|
|
<i class="fas fa-moon text-gray-600"></i>
|
|
</button>
|
|
|
|
<button
|
|
id="mobile-menu-toggle"
|
|
class="md:hidden p-2 rounded-lg bg-gray-100"
|
|
>
|
|
<i class="fas fa-bars text-gray-700"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="mobile-menu"
|
|
class="md:hidden bg-white shadow-lg py-4 px-6 hidden theme-transition"
|
|
>
|
|
<div class="flex flex-col space-y-4">
|
|
<a href="index.html" class="font-medium text-gray-600">首页</a>
|
|
<a href="about.html" class="font-medium text-gray-600">关于比赛</a>
|
|
<a href="awards.html" class="font-medium text-gray-600">奖项设置</a>
|
|
<a href="works.html" class="font-medium text-amber-600">优秀作品</a>
|
|
<a href="contact.html" class="font-medium text-gray-600">联系咨询</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 页面标题 -->
|
|
<section
|
|
class="pt-32 pb-12 bg-gradient-to-br from-amber-50 to-amber-100 theme-transition"
|
|
>
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h1 class="text-4xl font-bold text-amber-800 mb-4">优秀作品展示</h1>
|
|
<p class="text-lg text-gray-600">
|
|
欣赏历届林赛花杯写作比赛的获奖作品，感受文字的力量与华文写作的魅力
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 作品筛选 -->
|
|
<section class="py-8 bg-white border-b theme-transition">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<button
|
|
class="px-4 py-2 bg-amber-500 text-white rounded-full font-medium"
|
|
>
|
|
全部作品
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
|
>
|
|
第八届 (2023)
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
|
>
|
|
第七届 (2022)
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
|
>
|
|
第六届 (2021)
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
|
>
|
|
高中组
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
|
>
|
|
初中组
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 作品展示 -->
|
|
<section class="py-16 bg-gray-50 theme-transition">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- 作品1 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium"
|
|
>一等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第八届·高中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《时光里的茶香》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
外婆的茶室里总是弥漫着淡淡的茶香，那香气似乎能穿透时光，带我回到童年。每一个午后，阳光透过木窗洒在茶桌上，外婆轻轻摆弄着茶具，讲述着那些关于家族、关于传统的故事...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：陈晓雯 · 柔佛独中</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 作品2 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium"
|
|
>一等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第八届·初中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《雨中华文课》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
雨滴敲打着教室的窗户，林老师站在讲台上，用温柔而坚定的声音讲述着汉字的故事。她说，每一个汉字都是一幅画，一个故事，承载着中华五千年的文明...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：李明轩 · 新山国中</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 作品3 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
|
>二等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第八届·高中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《传统节日的温度》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
在现代都市的喧嚣中，传统节日似乎变得越来越形式化。直到那年春节，我陪着奶奶准备年货，听她讲述每一个习俗背后的故事，才真正感受到传统节日的温度...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：黄诗琪 · 峇株华仁中学</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 作品4 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
|
>二等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第七届·高中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《汉字里的哲学》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
学习汉字多年，直到有一天我静下心来研究每个汉字的结构和起源，才发现其中蕴含的深刻哲学。"仁"字是二人相依，"信"字是人言为信...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：张伟伦 · 居銮中华中学</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 作品5 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium"
|
|
>三等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第七届·初中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《我的华文老师》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
王老师是我遇见过最特别的华文老师。她不仅教我们识字作文，更带领我们走进中华文化的殿堂。她说，学习华文不仅是掌握一门语言，更是继承一种文明...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：林心如 · 麻坡中化中学</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 作品6 -->
|
|
<div
|
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span
|
|
class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium"
|
|
>三等奖</span
|
|
>
|
|
<span class="text-gray-500 text-sm">第六届·高中组</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
|
《家乡的味道》
|
|
</h3>
|
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
|
离开家乡求学多年，最怀念的是妈妈做的肉骨茶。那浓郁的香气，不仅是一种食物的味道，更是家的味道，是文化的味道，是无论走到哪里都忘不了的根...
|
|
</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-500 text-sm"
|
|
>作者：吴家明 · 新文龙中华中学</span
|
|
>
|
|
<a
|
|
href="work-detail.html"
|
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
|
>阅读全文 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="flex justify-center mt-12">
|
|
<div class="flex space-x-2">
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center bg-amber-500 text-white rounded-lg"
|
|
>
|
|
1
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
|
>
|
|
2
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
|
>
|
|
3
|
|
</button>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
|
>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 (与首页相同) -->
|
|
<footer class="bg-gray-800 text-white pt-12 pb-6 theme-transition">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4 text-amber-400">
|
|
林赛花教育基金
|
|
</h3>
|
|
<p class="text-gray-300">
|
|
致力于推广华文教育与中华传统文化，培养青少年写作能力与人文素养。
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-amber-400">主办单位</h3>
|
|
<ul class="space-y-2 text-gray-300">
|
|
<li>妙妙机构</li>
|
|
<li>林赛花教育基金</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-amber-400">承办单位</h3>
|
|
<ul class="space-y-2 text-gray-300">
|
|
<li>柔佛州华校校友会联合会 (PPBP)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-amber-400">联系信息</h3>
|
|
<ul class="space-y-2 text-gray-300">
|
|
<li>
|
|
<i class="fas fa-envelope mr-2"></i> contact@linsaihua.org
|
|
</li>
|
|
<li><i class="fas fa-phone mr-2"></i> +60 7-123 4567</li>
|
|
<li><i class="fas fa-map-marker-alt mr-2"></i> 马来西亚柔佛州</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-700 pt-6 text-center text-gray-400">
|
|
<p>
|
|
© 2023 林赛花教育基金·林赛花杯官方网站 |
|
|
非官方展示站，仅供公益学习使用
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="./assets/script.js"></script>
|
|
</body>
|
|
</html>
|