ufutx-pc-website/src/views/About/sections/CompanyValues.vue

<template>
  <section class="company-values">
    <h2 class="section-title">企业价值观</h2>
    <div class="values-tabs">
      <span
        v-for="(tab, index) in valueTabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="currentTab = index"
        >{{ tab }}</span
      >
    </div>
    <!-- 健康优先 -->
    <div v-show="currentTab === 0" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>健康优先</h3>
          <p>• 优先关注、保障员工的身心健康</p>
          <p>• 持续输出健康理念与服务，帮助用户预防疾病</p>
          <p>• 积极推动行业进步，促进全民健康意识提升</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-1.png" alt="健康优先" />
        </div>
      </div>
    </div>
    <!-- 使命驱动 -->
    <div v-show="currentTab === 1" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>使命驱动</h3>
          <p>• 以提升人类生命质量为核心使命</p>
          <p>• 持续投入研发，推动AI健康技术突破</p>
          <p>• 让健康管理触达每一个人</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-2.png" alt="使命驱动" />
        </div>
      </div>
    </div>
    <!-- 鼓励创新 -->
    <div v-show="currentTab === 2" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>鼓励创新</h3>
          <p>• 建立创新奖励机制，支持员工突破</p>
          <p>• 与全球科研机构合作，探索前沿技术</p>
          <p>• 持续优化产品，引领行业创新方向</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-3.png" alt="鼓励创新" />
        </div>
      </div>
    </div>
    <!-- 注重成长 -->
    <div v-show="currentTab === 3" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>注重成长</h3>
          <p>• 为员工提供丰富的培训与晋升机会</p>
          <p>• 助力合作伙伴成长，实现生态共赢</p>
          <p>• 推动行业人才培养，输出专业标准</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-4.png" alt="注重成长" />
        </div>
      </div>
    </div>
    <!-- 团队精神 -->
    <div v-show="currentTab === 4" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>团队精神</h3>
          <p>• 倡导开放协作，打破部门壁垒</p>
          <p>• 以结果为导向，高效执行</p>
          <p>• 相互支持，共同攻克行业难题</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-5.png" alt="团队精神" />
        </div>
      </div>
    </div>
    <!-- 创始人精神 -->
    <div v-show="currentTab === 5" class="values-content">
      <div class="content-row">
        <div class="content-text">
          <h3>创始人精神</h3>
          <p>• 坚持长期主义，深耕健康领域</p>
          <p>• 以用户价值为核心，拒绝短视行为</p>
          <p>• 永葆创业激情，持续突破自我</p>
        </div>
        <div class="content-img">
          <img src="https://images.health.ufutx.com/202506/18/about-values-6.png" alt="创始人精神" />
        </div>
      </div>
    </div>
  </section>
</template>

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

const valueTabs = ['健康优先', '使命驱动', '鼓励创新', '注重成长', '团队精神', '创始人精神']
const currentTab = ref(0)
</script>

<style scoped lang="less">
.company-values {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color-primary;
    text-align: center;
    margin-bottom: 40px;
  }
  .values-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;

    span {
      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;
      }
    }
  }
  .values-content {
    .content-row {
      display: flex;
      align-items: center;
      gap: 60px;

      .content-text {
        flex: 1;
        text-align: left;

        h3 {
          font-size: @font-size-lg;
          font-weight: bold;
          color: @text-color-primary;
          margin-bottom: 20px;
        }
        p {
          font-size: @font-size-sm;
          color: @text-color-light;
          margin: 10px 0;
        }
      }
      .content-img {
        flex: 1;
        text-align: center;
        img {
          width: 80%;
        }
      }
    }

    @media (max-width: @tablet-breakpoint) {
      .content-row {
        flex-direction: column;
      }
      .content-text {
        text-align: center;
      }
    }
  }
}
</style>