hulai-website/components/about/TeamIntro.vue

<template>
  <section class="section section--warm">
    <div class="container">
      <CommonSectionTitle title="我们的团队" />
      <p class="team-summary">{{ team.summary }}</p>

      <!-- 团队照片墙 -->
      <div class="team-gallery">
        <!-- 上排：两年踩线对比，体现年年坚持 -->
        <div class="team-gallery-row team-gallery-row--survey">
          <div class="team-photo-card">
            <div class="team-photo-wrap team-photo-wrap--survey">
              <img
                :src="images.team.guideGroup"
                alt="2024呼籁文旅车队踩线全体领队合影"
                loading="lazy"
              />
            </div>
            <div class="team-photo-caption">
              <span class="caption-tag">2024踩线</span>
              <span class="caption-text">「额吉的故乡」全体车队师傅集体踩线</span>
            </div>
          </div>
          <div class="team-photo-card">
            <div class="team-photo-wrap team-photo-wrap--survey">
              <img
                :src="images.team.routeSurvey"
                alt="2025秋呼籁文旅游牧的森林车队踩线全体领队合影"
                loading="lazy"
              />
            </div>
            <div class="team-photo-caption">
              <span class="caption-tag">2025踩线</span>
              <span class="caption-text">「游牧的森林」新品路线全员实地考察</span>
            </div>
          </div>
        </div>

        <!-- 下排：培训 + 牧场 -->
        <div class="team-gallery-row team-gallery-row--misc">
          <div class="team-photo-card">
            <div class="team-photo-wrap team-photo-wrap--misc">
              <img
                :src="images.team.guideTraining"
                alt="呼籁文旅2026年司导线下培训"
                loading="lazy"
              />
            </div>
            <div class="team-photo-caption">
              <span class="caption-tag">专业培训</span>
              <span class="caption-text">每年冬季集中培训，统一服务标准</span>
            </div>
          </div>
          <div class="team-photo-card">
            <div class="team-photo-wrap team-photo-wrap--misc">
              <img
                :src="images.team.ranchStore"
                alt="呼籁牧场线下店开业团队合影"
                loading="lazy"
              />
            </div>
            <div class="team-photo-caption">
              <span class="caption-tag">实体布局</span>
              <span class="caption-text">呼籁牧场线下体验店正式落成</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import images from '~/data/images.json'
defineProps({ team: { type: Object, required: true } })
</script>

<style lang="less" scoped>
.team-summary {
  max-width: 800px;
  margin: 0 auto @space-2xl;
  text-align: center;
  font-size: @font-size-md;
  line-height: @line-height-base;
  color: @color-text-secondary;
}

.team-gallery {
  display: flex;
  flex-direction: column;
  gap: @space-lg;

  .respond-md({
    gap: @space-xl;
  });
}

.team-gallery-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-lg;

  .respond-md({
    gap: @space-xl;
  });
}

.team-gallery-row--survey {
  .respond-md({
    grid-template-columns: 1fr 1fr;
  });
}

.team-gallery-row--misc {
  .respond-md({
    grid-template-columns: 1fr 1fr;
  });
}

.team-photo-card {
  border-radius: @border-radius-lg;
  overflow: hidden;
  background: @color-bg-white;
  box-shadow: @shadow-md;
  transition: transform @transition-base, box-shadow @transition-base;

  &:hover {
    transform: translateY(-2px);
    box-shadow: @shadow-lg;
  }
}

.team-photo-wrap {
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    display: block;
    object-fit: cover;
  }
}

.team-photo-wrap--survey {
  img {
    aspect-ratio: 16 / 9;
  }
}

.team-photo-wrap--misc {
  img {
    aspect-ratio: 16 / 10;
  }
}

.team-photo-caption {
  padding: @space-md @space-lg;
  display: flex;
  align-items: center;
  gap: @space-md;
}

.caption-tag {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 10px;
  background: @color-primary-bg;
  color: @color-primary;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  border-radius: @border-radius-sm;
}

.caption-text {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: 1.5;
}
</style>