mp-pilates/packages/app/src/components/AboutSection.vue

<template>
  <view class="about-section">
    <view class="section-header">
      <view>
        <text class="section-eyebrow">Teacher Spotlight</text>
        <text class="section-title">老师介绍</text>
      </view>
      <text class="section-more" @tap="goToDetail">查看详情</text>
    </view>

    <view class="teacher-card" @tap="goToDetail">
      <view class="teacher-main">
        <view class="cover-wrap">
          <image class="teacher-cover" :src="teacher.avatar" mode="aspectFill" />
          <view class="cover-badge">
            <text class="cover-badge-text">{{ teacher.badges[0] }}</text>
          </view>
        </view>

        <view class="teacher-content">
          <view class="teacher-heading">
            <view>
              <view class="name-row">
                <text class="teacher-name">{{ teacher.name }}</text>
                <text class="teacher-tag">{{ teacher.badges[1] }}</text>
              </view>
              <text class="teacher-title">{{ teacher.title }}</text>
            </view>
          </view>

          <view class="specialty-row">
            <text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
          </view>

          <text class="teacher-intro">{{ teacher.intro }}</text>
        </view>
      </view>

      <view class="credential-box">
        <text class="credential-label">认证背景</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 class="action-row">
        <view class="secondary-btn" @tap.stop="goToDetail">
          <text class="secondary-btn-text">查看详情</text>
        </view>
        <view class="primary-btn" @tap.stop="goToBooking">
          <text class="primary-btn-text">立即预约</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { irisProfile } from '../utils/teacher'

const teacher = irisProfile

function goToDetail() {
  uni.navigateTo({ url: `/pages/teacher/detail?id=${teacher.id}` })
}

function goToBooking() {
  uni.switchTab({ url: '/pages/booking/index' })
}
</script>

<style lang="scss" scoped>
.about-section {
  padding: 20rpx 24rpx 0;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18rpx;
}

.section-eyebrow {
  display: block;
  font-size: 20rpx;
  letter-spacing: 3rpx;
  text-transform: uppercase;
  color: #b99b8c;
  margin-bottom: 8rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #2f2723;
}

.section-more {
  font-size: 24rpx;
  color: #c36d52;
  padding: 10rpx 0;
}

.teacher-card {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  background:
    radial-gradient(circle at top right, rgba(226, 198, 179, 0.42), transparent 32%),
    linear-gradient(135deg, #fffdfb 0%, #f8f2ee 46%, #f2e8e2 100%);
  border-radius: 30rpx;
  padding: 22rpx;
  box-shadow: 0 18rpx 38rpx rgba(126, 98, 84, 0.09);
}

.teacher-main {
  display: flex;
  gap: 22rpx;
  align-items: stretch;
}

.cover-wrap {
  position: relative;
  width: 188rpx;
  height: 248rpx;
  border-radius: 24rpx;
  overflow: hidden;
  flex-shrink: 0;
  background: #eadfd7;
}

.teacher-cover {
  width: 100%;
  height: 100%;
}

.cover-badge {
  position: absolute;
  left: 14rpx;
  bottom: 14rpx;
  border-radius: 999rpx;
  padding: 8rpx 16rpx;
  background: rgba(41, 34, 30, 0.74);
  backdrop-filter: blur(12rpx);
}

.cover-badge-text {
  font-size: 20rpx;
  font-weight: 600;
  color: #fff7f3;
}

.teacher-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.teacher-heading {
  margin-bottom: 14rpx;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}

.teacher-name {
  font-size: 38rpx;
  line-height: 1;
  font-weight: 700;
  color: #2e2521;
}

.teacher-tag {
  font-size: 18rpx;
  line-height: 1;
  color: #a85d44;
  background: rgba(221, 150, 118, 0.18);
  border-radius: 999rpx;
  padding: 8rpx 12rpx;
}

.teacher-title {
  font-size: 24rpx;
  color: #7f6659;
}

.specialty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 14rpx;
}

.specialty-pill {
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  background: rgba(92, 126, 151, 0.12);
  color: #5a7a8b;
  font-size: 20rpx;
  font-weight: 600;
}

.teacher-intro {
  font-size: 22rpx;
  line-height: 1.7;
  color: #5e5048;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.credential-box {
  padding: 16rpx 18rpx;
  border-radius: 18rpx;
  background: rgba(255, 255, 255, 0.72);
  border: 1rpx solid rgba(190, 161, 145, 0.22);
}

.credential-label {
  display: block;
  font-size: 18rpx;
  letter-spacing: 2rpx;
  color: #b19486;
  margin-bottom: 8rpx;
}

.credential-text {
  font-size: 20rpx;
  line-height: 1.7;
  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 {
  display: flex;
  gap: 12rpx;
}

.secondary-btn,
.primary-btn {
  height: 72rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secondary-btn {
  width: 148rpx;
  border: 1rpx solid rgba(139, 113, 99, 0.24);
  background: rgba(255, 255, 255, 0.8);
}

.primary-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff7654 0%, #ff4d38 100%);
  box-shadow: 0 14rpx 24rpx rgba(255, 92, 69, 0.24);
}

.secondary-btn-text {
  font-size: 24rpx;
  font-weight: 600;
  color: #684d40;
}

.primary-btn-text {
  font-size: 26rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1rpx;
}
</style>