ufutx-pc-website/src/views/Network/sections/UseCases.vue

<template>
  <section class="scene-section">
    <!--    <h2 class="scene-title">一站式解决身心健康问题</h2>-->
    <!--    <p class="scene-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>-->
    <div class="scene-list">
      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
        <div class="scene-inner">
          <img :src="item.icon" alt="场景图标" class="scene-icon" />
          <p class="scene-name" v-html="item.name"></p>
          <p class="scene-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const sceneList = [
  {
    name: '健康评估<br/>多维度健康评估',
    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png' // 替换为实际图标
  },
  {
    name: '健康方案<br/>全方位的精准健康方案',
    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  },
  {
    name: '健康数据<br/>AI健康数据洞察',
    desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  },
  {
    name: '健康服务团队<br/>双重认证教练团队',
    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  },
  {
    name: '健康监测<br/>实时动态健康监测',
    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  }
]
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.scene-section {
  text-align: center;
  background-color: #f5f7fe;
  .py(130px);

  .scene-title {
    font-size: @font-size-xxl;
    font-weight: @font-weight-bold;
    color: @text-color;
    .pb(20px);
    .pt(40px);
  }

  .scene-subtitle {
    font-size: @font-size-md;
    color: @text-color-secondary;
    max-width: 600px;
    margin: 0 auto 80px;
  }

  .scene-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    justify-items: center;
    .px(192px);
    margin: 0 auto;
  }

  .scene-item {
    perspective: 1000px;
    cursor: pointer;
    width: 100%;
    .scene-inner {
      position: relative;
      width: 100%;
      height: 100%;
      .pt(20px);
      .pb(30px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: @border-radius-lg;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

      .scene-icon {
        width: 291px;
        height: 219px;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .scene-name {
        font-size: @font-size-lg;
        font-weight: bold;
        color: @text-color-secondary;
        text-align: center;
        //background: pink;
        .mt(10px);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .scene-desc {
        font-size: @font-size-sm;
        color: @text-color-light;
        line-height: 25px;
        text-align: center;
        max-height: 0;
        opacity: 0;
        .px(20px);
        margin-top: 10px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
    }

    &:hover .scene-inner {
      transform: translateY(-15px) scale(1.05);
      box-shadow: 0 15px 35px rgba(50, 120, 255, 0.15);
      //background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
    }

    &:hover .scene-icon {
      //transform: scale(1.15);
      //margin-bottom: 10px;
    }

    &:hover .scene-name {
      color: @primary-color;
    }

    &:hover .scene-desc {
      max-height: 120px;
      opacity: 1;
    }
  }
}

@media (max-width: @tablet-breakpoint) {
  .scene-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: @space-lg;
  }

  .scene-item {
    height: 280px;
  }
}

@media (max-width: @mobile-breakpoint) {
  .scene-list {
    grid-template-columns: 1fr;
  }
}
</style>