feat(about): add page for 1956 middle highschool tuition class
This commit introduces a new page dedicated to the 'Middle Highschool Tuition Class' of 1956 (中补班). The page displays a letter written in 2022, calling for a reunion of these special alumni. A navigation link has been added to the 'About' section for easy access to this historical content.
This commit is contained in:
138
app/pages/about/middle-highschool-tuition-class.vue
Normal file
138
app/pages/about/middle-highschool-tuition-class.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-8">
|
||||
<UPageHero title="特殊校友" description="中补班 (1956年): 一封迟来的貼文" />
|
||||
<UContainer>
|
||||
<div class="flex justify-center items-center">
|
||||
<div
|
||||
class="relative max-w-2xl paper-texture bg-amber-50 shadow-md border border-amber-200 rounded-xl p-12 font-letter text-gray-800 leading-relaxed handwritten tracking-wide"
|
||||
>
|
||||
<UModal
|
||||
v-model:open="imagePopup"
|
||||
title="中补班乙班合影"
|
||||
description="永平学校中辅乙同学合影 - 一九五六年八月九日"
|
||||
fullscreen
|
||||
>
|
||||
<img
|
||||
src="/about/中补班乙.jpg"
|
||||
alt="中补班乙班"
|
||||
class="sm:absolute sm:-top-25 sm:-right-60 md:right-0 sm:rotate-12 md:w-60 lg:w-80 transition-all cursor-pointer"
|
||||
/>
|
||||
<template #body>
|
||||
<img
|
||||
src="/about/中补班乙.jpg"
|
||||
alt="中补班乙班"
|
||||
class="max-w-full max-h-full object-contain mx-auto"
|
||||
/>
|
||||
</template>
|
||||
</UModal>
|
||||
<div class="text-xl mb-2 font-bold">致:1956年永中中补班</div>
|
||||
<div class="text-lg mb-6 font-semibold">“诚” “毅”两班老校友:</div>
|
||||
|
||||
<p class="indent-8 mb-4">
|
||||
各位老同学:别来无恙?这句问候的话迟到了六十多年。想当年大家还是青涩年少,六十五年后的今天,如果还健在人间,想必齿危发秃,两鬓斑白,如果早已驾鹤西去,回顾一坯黄土,会否感慨此生:凡是尘土必归于尘土!
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-4">
|
||||
但这个迟到的讯息,现在发出,将穿越65年的时间和空间,一定要,也一定会传到你们的心弦,引起共鸣,因为它共同的曲调是永中的校歌:黉舍巍峨著令名,时闻弦诵声。。。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-4">
|
||||
还健在的老同学,请响应这个号召,已经移民的,请魂兮归来,让我们老同学聚在一起,见证和欣赏生命天空最后的夕阳红,莫道桑榆晚,红霞尚满天!
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-6">
|
||||
召集人:刘用周 电话:江回潮 电话:马文钦 电话:杨青发 电话:可以再提名
|
||||
</p>
|
||||
|
||||
<p class="text-right mt-8">2022年4月15日</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="my-4 text-center font-bold">
|
||||
中补班同学名册就記忆如下:马文钦提供
|
||||
</p>
|
||||
<UCard>
|
||||
<div class="space-x-4 space-y-2">
|
||||
<UBadge
|
||||
v-for="name in schoolMates"
|
||||
size="xl"
|
||||
variant="subtle"
|
||||
class="hover:scale-120 transition-all cursor-pointer"
|
||||
>{{ name }}</UBadge
|
||||
>
|
||||
</div>
|
||||
</UCard>
|
||||
<p class="my-4 text-center font-bold">
|
||||
黄绍楠校长,李华光等老师的墨宝赠言,尤为珍贵
|
||||
</p>
|
||||
<UCarousel
|
||||
v-slot="{ item }"
|
||||
:items="giveWords"
|
||||
class="w-full max-w-xs mx-auto"
|
||||
arrows
|
||||
dots
|
||||
>
|
||||
<img :src="item" width="320" height="320" class="rounded-lg" />
|
||||
</UCarousel>
|
||||
</UContainer>
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
useSeoMeta({
|
||||
title: "致中补班的一封信",
|
||||
ogTitle: "致中补班的一封信",
|
||||
});
|
||||
|
||||
const imagePopup = ref<boolean>(false);
|
||||
|
||||
const schoolMates = ref<string[]>([
|
||||
"萧泽金",
|
||||
"黄荣发",
|
||||
"彭海恩",
|
||||
"掦楚玉",
|
||||
"揚楚英",
|
||||
"林进财",
|
||||
"马文钦",
|
||||
"陳玉英",
|
||||
"黄清蘭",
|
||||
"池伟青",
|
||||
"冯金才",
|
||||
"張波香",
|
||||
"陈红金",
|
||||
"黄鳳娇",
|
||||
"戴成雄",
|
||||
"黄光兴",
|
||||
"余新礼",
|
||||
"刘用周",
|
||||
"杨青发",
|
||||
"江回潮",
|
||||
]);
|
||||
|
||||
const giveWords = ref<string[]>([
|
||||
"/about/黄绍南校长赠言.jpg",
|
||||
"/about/李华光赠言.jpg",
|
||||
"/about/某老师赠言.jpg",
|
||||
"/about/赵老师赠言.jpg",
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Serif+SC:wght@400;500&family=Zhi+Mang+Xing&display=swap"); */
|
||||
/* 自定义字体风格组合 */
|
||||
.font-letter {
|
||||
/* font-family: "Zhi Mang Xing", "Great Vibes", "Noto Serif SC", serif; */
|
||||
font-weight: 400;
|
||||
}
|
||||
/* 添加信纸背景纹理(可换 URL 为你自己的纹理图)*/
|
||||
.paper-texture {
|
||||
background-image: radial-gradient(
|
||||
rgba(255, 255, 255, 0.5) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
/* 微微倾斜文字,模拟手写不规整 */
|
||||
.handwritten {
|
||||
transform: rotate(-0.3deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user