ufutx-pc-website/src/views/App/sections/ApplicationScenes.vue

<template>
  <section class="app-scenes">
    <h3 class="app-title">应用场景</h3>
    <!--    <div class="scenes-tabs">-->
    <!--      <span v-for="(tab, i) in tabs" :key="i" :class="{ active: currentTab === i }" @click="currentTab = i">{{-->
    <!--        tab-->
    <!--      }}</span>-->
    <!--    </div>-->

    <!-- 标签切换（友福动态 / 媒体报道） -->
    <el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
      <el-tab-pane label="友福健康生态" name="dynamic"></el-tab-pane>
      <el-tab-pane label="幸福婚恋" name="report"></el-tab-pane>
      <el-tab-pane label="个人成长" name="growth"></el-tab-pane>
    </el-tabs>

    <div v-show="currentTab === 0" class="scenes-content">
      <div class="scene-desc">
        <div class="speech-title">
          <img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
          <p>友福健康生态</p>
        </div>
        <p class="speech-subtitle">
          AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。<br />
          智能穿戴设备数据监测：搭载AI模型算法的智能穿戴设备，医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数，时刻守护您的身心健康。<br />
          友福商城：精选高品质、值得信赖的健康生活好物，为您的健康生活严格把关。
        </p>
      </div>
      <div class="scene-img">
        <img src="https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png" alt="健康生态" />
      </div>
    </div>
    <div v-show="currentTab === 1" class="scenes-content">
      <div class="scene-desc">
        <p class="speech-title">
          幸福婚恋板块专注为单身用户打造高效、真实的交友环境，通过AI精准匹配、身份验证体系、以及个性化社交标签，
        </p>
        <p>帮助用户快速找到契合的伴侣，同时提供恋爱指导、关系维护等延伸服务，让爱情更长久。</p>
      </div>
      <div class="scene-img">
        <!--        <img src="@/assets/scene-dating.png" alt="幸福婚恋" />-->
      </div>
    </div>
    <div v-show="currentTab === 2" class="scenes-content">
      <div class="scene-desc">
        <p>个人成长模块聚焦用户的职业与个人能力提升，提供AI驱动的演讲训练、知识学习、以及社交技巧课程，</p>
        <p>帮助用户突破社交瓶颈，提升自信，在职业与生活中实现全面成长。</p>
      </div>
      <div class="scene-img">
        <!--        <img src="@/assets/scene-growth.png" alt="个人成长" />-->
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tabs = ['友福健康生态', '幸福婚恋', '个人成长']

const activeTab = ref('dynamic') // 默认显示“友福动态”
const currentTab = ref(0)

const resetPage = () => {
  // currentPage.value = 1 // 切换标签时重置页码
}
</script>

<style scoped lang="less">
/* 标签切换样式（还原设计的蓝色下划线） */
.news-tabs {
  .py(50px);
  :deep(.el-tabs__nav-wrap) {
    //margin-bottom: 1.04167vw;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 0.5px;
      background-color: #b5b5b5;
      z-index: var(--el-index-normal);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: @primary-dark; // 下划线颜色
    height: 3px;
    bottom: -10px !important;
    margin-top: 10px;
  }

  :deep(.el-tabs__header) {
    margin: 0;
    .el-tabs__nav {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      gap: 100px;
      .el-tabs__item {
        font-size: @font-size-lg;
        color: @text-color-secondary;

        &.is-active {
          color: @primary-dark; // 激活态文字颜色
        }
      }
    }
  }
}
.news-tabs {
  // 关键：让选项卡居中
  :deep(.el-tabs__header) {
    width: 100%; // 占满容器宽度，为居中提供基础
    .el-tabs__nav {
      justify-content: center; // 水平居中对齐
    }
  }
}

.app-scenes {
  text-align: center;
  padding: 0 192px;
  .app-title {
    color: @text-color;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px; /* 100% */
    letter-spacing: 0.32px;
    //.mb(50px);
  }
  .scenes-tabs {
    margin-bottom: 40px;

    span {
      margin: 0 20px;
      font-size: @font-size-md;
      color: @text-color-secondary;
      cursor: pointer;
      padding-bottom: 5px;
      border-bottom: 2px solid transparent;

      &.active {
        color: @primary-color;
        border-bottom: 2px solid @primary-color;
      }
    }
  }

  .scenes-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    .scene-desc {
      width: 600px;
      text-align: left;
      padding: 0 40px;
      .speech-title {
        color: @text-color;
        font-size: 18px;
        font-weight: 600;
        display: flex; // 启用 Flex 布局
        align-items: center; // 子元素垂直居中
        gap: 10px;
        .mb(20px);
        .icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
        }
      }
      .speech-subtitle {
        color: @text-color;
        font-size: 14px;
      }
    }

    .scene-img {
      text-align: center;
      width: 600px;
      img {
        width: 80%;
      }
    }

    @media (max-width: @tablet-breakpoint) {
      flex-direction: column;
      .scene-desc {
        text-align: center;
        padding: 0;
        margin-bottom: 20px;
      }
    }
  }
}
</style>