From 54104c16d22860bc75050f7b15de86ae21335e8e Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Thu, 9 Apr 2026 14:29:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=94=AF=E6=8C=81=E6=95=99=E5=B8=88?=
 =?UTF-8?q?=E3=80=81=E5=9C=BA=E9=A6=86=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/AboutSection.vue | 96 ++++++++++++++++++++
 packages/app/src/pages/home/index.vue        |  4 +
 2 files changed, 100 insertions(+)
 create mode 100644 packages/app/src/components/AboutSection.vue

diff --git a/packages/app/src/components/AboutSection.vue b/packages/app/src/components/AboutSection.vue
new file mode 100644
index 0000000..f2bfc02
--- /dev/null
+++ b/packages/app/src/components/AboutSection.vue
@@ -0,0 +1,96 @@
+<template>
+  <view class="about-section">
+    <!-- 老师介绍 -->
+    <view class="about-card">
+      <view class="card-header">
+        <view class="header-dot" />
+        <text class="header-title">老师介绍</text>
+      </view>
+      <image class="teacher-img" :src="teacherImage" mode="widthFix" @tap="previewImages([teacherImage], 0)" />
+    </view>
+
+    <!-- 场馆介绍 -->
+    <view class="about-card">
+      <view class="card-header">
+        <view class="header-dot" />
+        <text class="header-title">场馆介绍</text>
+      </view>
+      <view class="studio-gallery">
+        <image v-for="(img, idx) in studioImages" :key="idx" class="gallery-img" :src="img" mode="widthFix"
+          @tap="previewImages(studioImages, idx)" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+const teacherImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/person_desc.jpeg'
+
+const studioImages = [
+  'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/place_1.jpg',
+  'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/place_2.jpg',
+  'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/place_3.jpg',
+  'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/place_4.jpg',
+]
+
+function previewImages(urls: string[], current: number) {
+  uni.previewImage({
+    current,
+    urls,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.about-section {
+  padding: 16rpx 24rpx 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.about-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  padding: 28rpx 24rpx 24rpx;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 20rpx;
+}
+
+.header-dot {
+  width: 10rpx;
+  height: 36rpx;
+  border-radius: 5rpx;
+  background: linear-gradient(180deg, #D4A59A, #C08B7E);
+}
+
+.header-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #222;
+  letter-spacing: 1rpx;
+}
+
+.teacher-img {
+  width: 100%;
+  border-radius: 12rpx;
+}
+
+.studio-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.gallery-img {
+  width: 100%;
+  border-radius: 12rpx;
+}
+</style>
diff --git a/packages/app/src/pages/home/index.vue b/packages/app/src/pages/home/index.vue
index 9d6f087..79dc5d4 100644
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -43,6 +43,9 @@
           <CardShop ref="cardShopRef" />
         </view>
 
+        <!-- ⑥ About (teacher + studio gallery) -->
+        <AboutSection />
+
         <!-- Bottom padding for tab bar -->
         <view class="bottom-padding" />
       </view>
@@ -60,6 +63,7 @@ import QuickEntry from '../../components/QuickEntry.vue'
 import UpcomingBooking from '../../components/UpcomingBooking.vue'
 import FlashSaleSection from '../../components/FlashSaleSection.vue'
 import CardShop from '../../components/CardShop.vue'
+import AboutSection from '../../components/AboutSection.vue'
 
 import { useUserStore } from '../../stores/user'
 import { useStudioStore } from '../../stores/studio'