DDAC/app/components/products/CaseCard.vue

<template>
  <div class="case-container">
    <div class="case-cards">
      <div class="card-content">
        <!-- 左侧 Tabs -->
        <div class="tabs-list">
          <div v-for="(item, index) in cases" :key="index" class="tab-item" :class="{ active: activeIndex === index }"
            @click="activeIndex = index">
            {{ item.title }}
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="tab-content">
          <transition name="fade" mode="out-in">
            <div :key="activeIndex" class="content-wrapper">
              <div class="text-content">
                <h3 class="title">{{ cases[activeIndex].title }}</h3>
                <p class="description">{{ cases[activeIndex].description }}</p>
                <h4 class="title">业务价值</h4>
                <p class="value-desc">{{ cases[activeIndex].value }}</p>
              </div>
              <div class="image-content">
                <NuxtImg :width="cases[activeIndex].width" :src="cases[activeIndex].image"
                  :alt="cases[activeIndex].title" />
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const activeIndex = ref(0);

const cases = [
  {
    title: '网站提速',
    description: '针对网页静态资源的优化和加速分发，解决网站流量激增时用户请求量、带宽负载增高、服务器压力过大以及站点响应缓慢的问题。',
    value: '通过压缩优化，快速加载大图、样式等资源，缩短网页响应时间，提升用户体验。访问数据决定回源行为，减少回源流量，提高请求命中率，降低带宽成本。',
    image: '/images/products/case1.png',
    width: '302'
  },
  {
    title: '下载加速',
    description: '适用于网站或应用的静态大文件分发，如游戏安装包、应用更新文件、补丁程序文件、音视频文件、建筑数据模型、医疗图像等较大的文件。',
    value: '通过海量加速节点，用户获得极速下载体验。分段缓存技术增强大文件下载的传输稳定性，确保顺畅的文件传输。',
    image: '/images/products/case2.png',
    width: '396'
  },
  {
    title: '音视频加速',
    description: '针对视频网站、短视频等业务场景，优化源站出口压力，解决用户在观看音视频时的卡顿和不流畅问题。',
    value: '通过海量加速节点支持高并发，提供高速稳定的资源分发，确保流畅、稳定和丰富的观看体验。同时，丰富的访问控制功能有效防止用户盗用媒体资源。',
    image: '/images/products/case3.png',
    width: '288'
  },
  {
    title: '安全防护',
    description: '黑客通过扫描发现互联网应用的安全漏洞，并利用爬虫、挂马、黑客病毒、数据泄露、CC攻击等手段入侵服务器和数据库，窃取核心业务数据。',
    value: '提供恶意URL过滤、入侵防护等全面的用户防护能力，有效防御常见Web攻击。同时提供Referer黑白名单和高阶URL鉴权，全面解决盗链问题。',
    image: '/images/products/case4.png',
    width: '286'
  }
];
</script>

<style lang="scss" scoped>
.case-container {
  position: relative;
  width: 100%;
  height: 800PX;
  background: url('/images/products/case-bg.png') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 140PX;

  &::before {
    position: absolute;
    content: '应用场景';
    top: -45PX;
    left: 50%;
    transform: translateX(-50%);
    font-size: 45PX;
    font-style: normal;
    font-weight: 500;
    line-height: 45PX;
    background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .case-cards {
    width: 100%;
    max-width: 1200PX;
    margin-top: 60PX;
  }

  .card-content {
    display: flex;
    gap: 80PX;
    align-items: flex-start;
  }

  .tabs-list {
    display: flex;
    flex-direction: column;
    gap: 24PX;
    width: 224PX;
    flex-shrink: 0;
  }

  .tab-item {
    height: 72PX;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8PX;
    border: 1PX solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.60);
    ;
    cursor: pointer;
    font-size: 26PX;
    font-weight: 400;
    line-height: 26PX;

    &:hover {
      border-radius: 8PX;
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
    }

    &.active {
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
      color: #fff;
      font-weight: 500;
    }
  }

  .tab-content {
    flex: 1;
    color: #fff;
    height: 500PX; // Fixed height to prevent jitter
  }

  .content-wrapper {
    display: flex;
    align-items: stretch;
    /* 让左右两列在高度上保持一致（无 JS） */
    gap: 36PX;
  }

  .text-content {
    width: 540PX;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 18PX;
    justify-content: center;

    .title {
      font-size: 36PX;
      font-weight: 500;
    }

    .description {
      font-size: 18PX;
      font-weight: 400;
      line-height: 36PX;
      margin-bottom: 38PX;
    }


    .value-desc {
      font-size: 18PX;
      font-weight: 400;
      line-height: 36PX;
    }
  }

  .image-content {
    max-width: 540PX;
    display: flex;
    align-items: center;
    justify-content: center;

    :deep(img) {
      width: 100%;
      height: auto;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>