style(ui): improve layout and responsiveness of tuition class page

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.
This commit is contained in:
xiaomai
2025-10-30 17:48:30 +08:00
parent c468da8780
commit 33334a7515
3 changed files with 55 additions and 3 deletions

View File

@@ -1,10 +1,10 @@
<template>
<UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-8">
<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="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"
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"
@@ -51,7 +51,7 @@
中补班同学名册就記忆如下马文钦提供
</p>
<UCard>
<div class="space-x-4 space-y-2">
<div class="space-x-4 space-y-2 text-center">
<UBadge
v-for="name in schoolMates"
size="xl"