feat(app): refine teacher profile page content
This commit is contained in:
@@ -38,7 +38,10 @@
|
|||||||
|
|
||||||
<view class="credential-box">
|
<view class="credential-box">
|
||||||
<text class="credential-label">认证背景</text>
|
<text class="credential-label">认证背景</text>
|
||||||
<text class="credential-text">{{ certificationSummary }}</text>
|
<view v-for="item in teacher.certifications" :key="item" class="credential-row">
|
||||||
|
<view class="credential-dot" />
|
||||||
|
<text class="credential-text">{{ item }}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="action-row">
|
<view class="action-row">
|
||||||
@@ -54,13 +57,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
|
||||||
import { irisProfile } from '../utils/teacher'
|
import { irisProfile } from '../utils/teacher'
|
||||||
|
|
||||||
const teacher = irisProfile
|
const teacher = irisProfile
|
||||||
|
|
||||||
const certificationSummary = computed(() => teacher.certifications.slice(0, 2).join(' · '))
|
|
||||||
|
|
||||||
function goToDetail() {
|
function goToDetail() {
|
||||||
uni.navigateTo({ url: `/pages/teacher/detail?id=${teacher.id}` })
|
uni.navigateTo({ url: `/pages/teacher/detail?id=${teacher.id}` })
|
||||||
}
|
}
|
||||||
@@ -234,10 +234,29 @@ function goToBooking() {
|
|||||||
|
|
||||||
.credential-text {
|
.credential-text {
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
color: #6a5a51;
|
color: #6a5a51;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.credential-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credential-row + .credential-row {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credential-dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #6d4037;
|
||||||
|
}
|
||||||
|
|
||||||
.action-row {
|
.action-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12rpx;
|
gap: 12rpx;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<view class="nav-spacer" :style="{ height: navBarHeight }" />
|
<view class="nav-spacer" :style="{ height: navBarHeight }" />
|
||||||
|
|
||||||
<view class="hero-section">
|
<view class="hero-section">
|
||||||
<image class="hero-image" :src="teacher.cover" mode="aspectFill" />
|
<image class="hero-image" :src="teacher.cover" mode="widthFix" />
|
||||||
<view class="hero-overlay" />
|
<view class="hero-overlay" />
|
||||||
|
|
||||||
<view class="hero-content">
|
<view class="hero-content">
|
||||||
@@ -43,11 +43,11 @@
|
|||||||
|
|
||||||
<view class="detail-card">
|
<view class="detail-card">
|
||||||
<text class="card-title">教练介绍</text>
|
<text class="card-title">教练介绍</text>
|
||||||
<text class="card-text">
|
<text class="card-text card-text--intro">
|
||||||
Iris 注重基础控制与身体感知,课程会围绕呼吸、核心稳定、动作路径和发力节奏展开,帮助学员在安全前提下持续进步。
|
我是 Iris,一名注重体态、控制与身体感受的普拉提教练。
|
||||||
</text>
|
</text>
|
||||||
<text class="card-text">
|
<text class="card-text">
|
||||||
无论你希望改善久坐体态、建立训练基础,还是进一步雕塑身体线条,都可以通过私教课程获得更清晰的动作反馈与进阶方案。
|
我希望带你在稳定、安心的节奏里,找回核心力量、挺拔线条和更轻松的身体状态。
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -71,7 +71,17 @@
|
|||||||
|
|
||||||
<view class="detail-card cta-card">
|
<view class="detail-card cta-card">
|
||||||
<text class="card-title">适合这样的你</text>
|
<text class="card-title">适合这样的你</text>
|
||||||
<text class="card-text">久坐肩颈紧张、想改善圆肩骨盆前倾、训练没感觉,或想通过更稳定的核心训练提升身体线条与控制力。</text>
|
<view class="fit-grid">
|
||||||
|
<view class="fit-pill">久坐肩颈紧张</view>
|
||||||
|
<view class="fit-pill">体态调整</view>
|
||||||
|
<view class="fit-pill">产后恢复</view>
|
||||||
|
<view class="fit-pill">塑形紧致</view>
|
||||||
|
<view class="fit-pill">核心无力</view>
|
||||||
|
<view class="fit-pill">运动入门</view>
|
||||||
|
</view>
|
||||||
|
<text class="card-text">
|
||||||
|
如果你想改善体态、缓解肩颈腰背不适,提升核心稳定、线条感与身体控制力,这里会是一个很好的开始。
|
||||||
|
</text>
|
||||||
<view class="cta-inline" @tap="goToBooking">
|
<view class="cta-inline" @tap="goToBooking">
|
||||||
<text class="cta-inline-text">去约 Iris 的课程</text>
|
<text class="cta-inline-text">去约 Iris 的课程</text>
|
||||||
<text class="cta-inline-arrow">›</text>
|
<text class="cta-inline-arrow">›</text>
|
||||||
@@ -96,7 +106,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { onLoad } from '@dcloudio/uni-app'
|
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||||
import { irisProfile } from '../../utils/teacher'
|
import { irisProfile } from '../../utils/teacher'
|
||||||
import { getSystemLayout } from '../../utils/system'
|
import { getSystemLayout } from '../../utils/system'
|
||||||
@@ -105,6 +115,22 @@ const teacher = irisProfile
|
|||||||
const navBarHeight = ref('64px')
|
const navBarHeight = ref('64px')
|
||||||
const scrollHeight = ref('500px')
|
const scrollHeight = ref('500px')
|
||||||
|
|
||||||
|
onShareAppMessage(() => {
|
||||||
|
return {
|
||||||
|
title: `${teacher.name}|${teacher.title}`,
|
||||||
|
path: `/pages/teacher/detail?id=${teacher.id}`,
|
||||||
|
imageUrl: teacher.cover,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onShareTimeline(() => {
|
||||||
|
return {
|
||||||
|
title: `${teacher.name}|${teacher.title}`,
|
||||||
|
query: `id=${teacher.id}`,
|
||||||
|
imageUrl: teacher.cover,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
updateLayout()
|
updateLayout()
|
||||||
})
|
})
|
||||||
@@ -141,7 +167,7 @@ function goToBooking() {
|
|||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-overlay {
|
.hero-overlay {
|
||||||
@@ -305,6 +331,13 @@ function goToBooking() {
|
|||||||
margin-top: 16rpx;
|
margin-top: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-text--intro {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.7;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #43352f;
|
||||||
|
}
|
||||||
|
|
||||||
.list-row {
|
.list-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -358,6 +391,22 @@ function goToBooking() {
|
|||||||
background: linear-gradient(135deg, #fff6f1 0%, #fffdfc 100%);
|
background: linear-gradient(135deg, #fff6f1 0%, #fffdfc 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fit-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12rpx;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fit-pill {
|
||||||
|
padding: 10rpx 18rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
background: rgba(255, 126, 92, 0.12);
|
||||||
|
color: #b3573f;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.cta-inline {
|
.cta-inline {
|
||||||
margin-top: 22rpx;
|
margin-top: 22rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
|
|||||||
@@ -16,15 +16,17 @@ export const irisProfile: TeacherProfile = {
|
|||||||
id: 'iris',
|
id: 'iris',
|
||||||
name: 'Iris',
|
name: 'Iris',
|
||||||
title: '高级普拉提教练',
|
title: '高级普拉提教练',
|
||||||
avatar: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/person_desc.jpeg',
|
avatar: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
|
||||||
cover: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/person_desc.jpeg',
|
cover: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
|
||||||
badges: ['高级', 'STOTT PILATES'],
|
badges: ['高级', 'STOTT PILATES'],
|
||||||
specialties: ['塑性训练', '体态调整', '产后恢复'],
|
specialties: ['塑性训练', '体态调整', '产后恢复'],
|
||||||
intro: '擅长用循序渐进的核心训练帮助学员改善姿态、建立稳定发力模式,让训练效果更细腻也更可持续。',
|
intro: '我擅长把专业训练拆解成身体真正听得懂的节奏,让你在安全、稳定与被看见的陪伴里,一点点找回力量、线条与自信。',
|
||||||
certifications: [
|
certifications: [
|
||||||
'加拿大 STOTT PILATES 垫上初中级认证',
|
'斯多特塑身机初&中级认证教练',
|
||||||
'加拿大 STOTT PILATES 塑身机初中级认证教练',
|
'斯多特全场馆认证教练',
|
||||||
'系统化接受 STOTT PILATES 体系训练',
|
'曼丽丘斯多特塑身机弹跳网芭杆工作坊',
|
||||||
|
'塑身机上的高尔夫与旋转运动调理工作坊',
|
||||||
|
'四维人体运动解剖认证',
|
||||||
],
|
],
|
||||||
teachingFocus: [
|
teachingFocus: [
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user