ufutx-pc-website/src/views/About/sections/CompanyValues.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="handleTabClick">
      <el-tab-pane v-for="(tab, index) in valueTabs" :key="index" :label="tab.title" :name="tab.name">
        <div v-show="currentTabIndex === index" 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>{{ tab.title }}</p>
            </div>
            <div class="speech-subtitle">
              <p v-for="(line, i) in tab.content" :key="i" class="_text">• {{ line }}</p>
            </div>
          </div>
          <div class="scene-img">
            <img :src="tab.image" alt="健康生态" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

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

const valueTabs = [
  {
    title: '健康优先',
    name: 'HealthFirst',
    content: [
      '营造支持、尊重、信任的工作环境',
      '提供健康咨询、心理咨询等全方位资源',
      '鼓励健康饮食及运动、良好作息，身心健康是成功基础'
    ],
    image: 'https://images.health.ufutx.com/202506/20/d65c0b2f59c2b835d14d93c5c2bbb44a.png'
  },
  {
    title: '使命驱动',
    name: 'MissionDriven',
    content: ['以创新和品质，帮助人们实现真正的生命健康', '透过科技创新，揭示健康洞见'],
    image: 'https://images.health.ufutx.com/202506/20/69d87c30d50abe864e32b86c6598d2d1.png'
  },
  {
    title: '鼓励创新',
    name: 'InnovationEncouraged',
    content: ['我们鼓励创新的思维及解决办法', '「想」都是问题，「做」才有答案', '拥抱失败，让每次尝试都是学习机会'],
    image: 'https://images.health.ufutx.com/202506/20/46077ed178489468665dd9c6c3d39104.png'
  },
  {
    title: '注重成长',
    name: 'GrowthOriented',
    content: ['鼓励友福伙伴培养成长型思维，成为意见领袖', '发展潜在领导力', '期待具备持续解决问题的能力和强大执行力'],
    image: 'https://images.health.ufutx.com/202506/20/136362c2dff3844304dd1e96bd36ee03.png'
  },
  {
    title: '团队精神',
    name: 'TeamSpirit',
    content: ['开放沟通、互相尊重，人人都是关键角色', '注重跨部门协作，共同承担责任', '团队一起面对挑战、共享成功'],
    image: 'https://images.health.ufutx.com/202506/20/136362c2dff3844304dd1e96bd36ee03.png'
  },
  {
    title: '创始人精神',
    name: 'FoundersSpirit',
    content: ['我们始终坚持创始人精神 —— 主动担当、灵活应变、追求卓越。', '拥有主人翁意识，主动解决问题'],
    image: 'https://images.health.ufutx.com/202506/20/ba5d18e65df7d1fef4d9be2fdb185c23.png'
  }
]
const activeTab = ref(valueTabs[0].name) // 默认选中第一个标签
const currentTabIndex = ref(0) // 当前选中标签的下标
// 计算属性：当前选中的标签数据
const currentTab = computed(() => {
  return valueTabs[currentTabIndex.value] || valueTabs[0]
})
const handleTabClick = (tab: any, event: Event) => {
  console.log(tab.props.name, event)
  currentTabIndex.value = valueTabs.findIndex(item => item.name === tab.props.name)

  console.log(currentTabIndex.value)
  // currentPage.value = 1 // 切换标签时重置页码
}
</script>

<style scoped lang="less">
/* 标签切换样式（还原设计的蓝色下划线） */
.news-tabs {
  .pt(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: 50px 0;

  .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;
    margin: 0 192px;
    padding: 80px 30px 30px 30px;
    position: relative;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
    //background: #00acc1;
    &:after {
      position: absolute;
      left: 500px;
      bottom: 7px;
      content: ' ';
      width: 360px;
      height: 360px;
      background-image: url('https://images.health.ufutx.com/202506/20/fc55ef830c38d03501fb37bc9f111b71.png');
      background-size: cover;
    }

    .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;
      }
    }

    ._text {
      margin-bottom: 10px;
      color: @text-color;
      font-size: 14px;
    }

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

      img {
        width: 100%;
      }
    }

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