ufutx-pc-website/src/views/Ecosystem/sections/CityPartner.vue

<template>
  <section class="city-partner">
    <h2 class="section-title">城市合伙人</h2>
    <p class="section-subtitle">“拓展城市合伙人，共赢亿级AI健康市场”</p>
    <div class="partner-banner">
      <img
        src="https://images.health.ufutx.com/202506/20/6cc0725186ea51776a14c71965f4c64e.png"
        alt="合伙人Banner"
        class="banner-img"
      />
      <p class="partner-desc">
        友福同享作为AI智能健康的领航者，正积极构建覆盖健康生活全场景的智慧解决方案，致力于打造万亿级的AI健康生态共同体。我们现面向全国333个地级行政区，诚挚招募富有远见和实力的城市合伙人，共同开拓AI智能健康管理的蓝海市场。
      </p>
    </div>

    <h3 class="support-title">加入友福同享，您将获得 4 大支持</h3>
    <div class="support-grid">
      <section class="support-section">
        <!-- 顶部导航栏 -->
        <div class="nav-bar">
          <div
            v-for="(item, idx) in navItems"
            :key="idx"
            class="nav-item"
            :class="{ active: currentIdx === idx }"
            @click="currentIdx = idx"
            @mouseenter="currentIdx = idx"
          >
            <div class="icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
            <span class="title">{{ item.title }}</span>
          </div>
        </div>

        <!-- 主体内容区 -->
        <div class="content" :style="{ backgroundImage: `url(${navItems[currentIdx].illustration})` }">
          <div class="text">
            <h2 class="main-title">{{ navItems[currentIdx].title }}</h2>
            <p class="desc">{{ navItems[currentIdx].desc }}</p>
          </div>
        </div>
      </section>
    </div>
  </section>
</template>

<script setup lang="ts">
const navItems = [
  {
    title: '总部全方位支持',
    desc: '派遣专业的团队进驻城市，提供从市场拓展、运营管理到技术支持的全方位指导。',
    icon: 'https://images.health.ufutx.com/202506/20/c1797642f22ab1187e7bf506a6b9507c.png', // 替换为实际图标路径
    illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png' // 替换为实际插画路径
  },
  {
    title: '总部直营培训体系',
    desc: '我们提供完善的总部直营培训服务，确保您的团队能够熟练掌握我们的产品和服务，为用户提供高品质的体验。',
    icon: 'https://images.health.ufutx.com/202506/20/0e6cc1c38e5e5256860cb2cb6761c085.png',
    illustration: 'https://images.health.ufutx.com/202506/23/1d755208e31271f84983d1d8f46f70a9.png'
  },
  {
    title: '独家解决方案输出',
    desc: '获得领先的友福七维AI健康修复系统的完整输出，包括服务培训和运营模式。',
    icon: 'https://images.health.ufutx.com/202506/20/662d5203d956719006cd477a63e6476b.png',
    illustration: 'https://images.health.ufutx.com/202506/23/e8819411e2fdd656216e3fb30e64db8a.png'
  },
  {
    title: '共享万亿市场机遇',
    desc:
      '携手友福同享，共同分享AI智能健康产业的巨大红利，实现区域市场的快速增长。\n' +
      '我们期待与您携手，将AI智能健康理念带到更多城市，共同提升人类生命质量，成为健康生活方式的引领者。',
    icon: 'https://images.health.ufutx.com/202506/20/d780da8996bc4a771e70300456e4eb5d.png',
    illustration: 'https://images.health.ufutx.com/202506/23/152ab9d119dbab87bbfc8bc496cc3e98.png'
  }
]

const currentIdx = ref(0)
</script>

<style scoped lang="less">
.city-partner {
  text-align: center;
  padding: 100px 192px;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color;
    margin-bottom: 20px;
    letter-spacing: 0.32px;
  }
  .section-subtitle {
    font-size: 20px;
    color: @text-color-secondary;
    margin-bottom: 50px;
  }
  .partner-banner {
    position: relative;

    .banner-img {
      width: 100%;
      height: auto;
    }

    .partner-desc {
      background: rgba(255, 255, 255, 0.6);
      text-align: left;
      /* 底部导航 0.8透模糊 */
      backdrop-filter: blur(25px);
      position: absolute;
      bottom: 0;
      font-size: 20px;
      color: @text-color;
      line-height: 1.8;
      padding: 30px;
    }
  }
  .support-title {
    font-size: 36px;
    font-weight: 600;
    color: @text-color;
    margin: 100px 0 50px;
  }
  .support-grid {
    //display: grid;
    //grid-template-columns: repeat(4, 1fr);
    //gap: 40px;
    //max-width: 1200px;
    //margin: 0 auto 60px;

    @media (max-width: @tablet-breakpoint) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: @mobile-breakpoint) {
      grid-template-columns: 1fr;
    }
  }
  .support-item {
    background: #fff;
    padding: 30px;
    border-radius: @border-radius-lg;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

    .item-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
    }
    .item-title {
      font-size: @font-size-lg;
      font-weight: medium;
      color: @text-color;
      margin-bottom: 10px;
    }
    .item-desc {
      font-size: @font-size-sm;
      color: @text-color-light;
      white-space: pre-wrap;
    }
  }
}
.support-section {
  background: #f9fbff;
  .nav-bar {
    display: flex;
    align-items: center;
    .nav-item {
      background: #eceef8;
      width: 384px;
      padding: 20px 30px;
      .icon {
        width: 58px;
        height: 68px;
        background-size: cover;
        margin: 0 auto 10px;
      }

      .title {
        font-size: 16px;
        color: @text-color-secondary;
        transition: color 0.3s;
      }

      &.active {
        background: #f1f3fb;
        .title {
          color: #313fa8;
          font-weight: bold;
        }
      }
    }
  }

  .content {
    display: flex;
    //align-items: center;
    //justify-content: space-between;
    //gap: 80px;
    height: 558px;
    //background-image: url('https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png');
    background-size: contain;
    .text {
      margin-top: 221px;
      margin-left: 136px;
      width: 500px;
      text-align: left;
      .main-title {
        font-size: 50px;
        color: @text-color;
        margin-bottom: 20px;
      }
      .desc {
        font-size: 20px;
        color: @text-color-secondary;
        line-height: 34px;
        white-space: pre-wrap;
      }
    }

    .illustration {
      width: 100%;
      height: 300px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  @media (max-width: 1200px) {
    //padding: 60px 40px;

    //.nav-bar {
    //  gap: 30px;
    //}
    .text {
      margin-top: 22px !important;
    }
    .desc {
      line-height: 12px !important;
    }
    .content {
      flex-direction: column;
      text-align: center;

      .illustration {
        order: -1;
        margin-bottom: 30px;
      }
    }
  }
}
</style>