richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 支持教师、场馆介绍

Browse Source
This commit is contained in:
richarjiang
2026-04-09 14:29:13 +08:00
parent a40b4e47e5
commit 54104c16d2
2 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/app/src/components/AboutSection.vue Normal file
View File

@@ -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>

4
packages/app/src/pages/home/index.vue
View File

@@ -43,6 +43,9 @@
<CardShop ref="cardShopRef" /> <CardShop ref="cardShopRef" />
</view> </view>
<!-- ⑥ About (teacher + studio gallery) -->
<AboutSection />
<!-- Bottom padding for tab bar --> <!-- Bottom padding for tab bar -->
<view class="bottom-padding" /> <view class="bottom-padding" />
</view> </view>
@@ -60,6 +63,7 @@ import QuickEntry from '../../components/QuickEntry.vue'
import UpcomingBooking from '../../components/UpcomingBooking.vue' import UpcomingBooking from '../../components/UpcomingBooking.vue'
import FlashSaleSection from '../../components/FlashSaleSection.vue' import FlashSaleSection from '../../components/FlashSaleSection.vue'
import CardShop from '../../components/CardShop.vue' import CardShop from '../../components/CardShop.vue'
import AboutSection from '../../components/AboutSection.vue'
import { useUserStore } from '../../stores/user' import { useUserStore } from '../../stores/user'
import { useStudioStore } from '../../stores/studio' import { useStudioStore } from '../../stores/studio'