33334a7515
This commit adjusts the styling on the 'Middle/High School Tuition Class' page to enhance its appearance and readability, particularly on mobile devices. - Implemented responsive padding for the main page and content container. - Justified the main text block for better readability. - Centered the student name badges. - Added configuration files for the `repomix` project analysis tool.
139 lines
4.6 KiB
Vue
139 lines
4.6 KiB
Vue
<template>
|
||
<UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-2 md:p-8">
|
||
<UPageHero title="特殊校友" description="中补班 (1956年): 一封迟来的貼文" />
|
||
<UContainer>
|
||
<div class="flex justify-center items-center">
|
||
<div
|
||
class="p-4 md:p-12 text-justify relative max-w-2xl paper-texture bg-amber-50 shadow-md border border-amber-200 rounded-xl 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 text-center">
|
||
<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>
|