DDAC/app/components/mobile/products/WebCard.vue

<template>
  <div class="case-container">
    <div class="case-title">应用场景</div>
    <div class="case-cards">
      <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="sub-title">业务价值</h4>
              <p class="value-desc">{{ cases[activeIndex].value }}</p>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

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

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

<style lang="scss" scoped>
.case-container {
  position: relative;

  padding: 40px 0;

  .case-title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 26px;
  }

  .case-cards {
    width: 100%;
  }

  .tabs-list {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding-bottom: 8px;
  }

  .tab-item {
    width: 82px;
    height: 26px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.60);
    font-size: 14px;
    text-align: center;
    line-height: 26px;
    font-weight: 400;
    white-space: nowrap;

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

  .tab-content {
    margin-left: -16px;
    margin-right: -16px;
    padding: 30px 16px 0;
    width: 100%;
    height: 180px;
    background: url('/images/products/case-bg.png') no-repeat center;
    background-size: cover;
    color: #fff;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
  }

  .text-content {
    display: flex;
    flex-direction: column;
    gap: 6px;

    .title {
      font-size: 16px;
      font-weight: 500;
    }

    .sub-title {
      font-size: 16px;
      font-weight: 500;
      margin-top: 8px;
    }

    .description {
      font-size: 10px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
    }

    .value-desc {
      font-size: 10px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
    }
  }
}

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

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