DDAC/app/pages/web/products/web.vue

<template>
  <div>
    <section class="video-section">
      <div class="cdn-dg">
        <NuxtImg width="500" class="cdn-bg" src="/images/products/cdn-bg.png" alt="cdn" />
      </div>
      <!-- <NuxtImg class="cdn-dg" src="/images/products/dengg.png" alt="dengg" /> -->
      <div class="video-title">
        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
        <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
        <div class="video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
        <div class="video-btn">
          <span>联系我们</span>
          <Icon name="line-md:chevron-right" />
        </div>
      </div>
      <section class="perspective-grid-section">
        <div class="perspective-container">
          <div class="grid-floor">
            <div class="grid-lines"></div>
          </div>
        </div>
      </section>
    </section>
    <section class="cdn-container">
      <div class="cdn-title">
        <h2>
          678CDN功能
        </h2>
        <p>让科技为您的业务发光发亮，CDN功能助力您的网站顺畅、高效、安全地运作，
          同时提供数据防范和预防技术，让您的网站免于遭受恶意攻击</p>
      </div>
      <div class="cdn-content">
        <div class="cdn-item">
          <div class="item-text">
            <h3>CDN内容分发</h3>
            <p>
              加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验，而我们的数据中心则提供商业的资讯管理和保护，确保您的数据平安无误。
            </p>
          </div>
          <NuxtImg width="400" height="462" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
        </div>
        <div class="cdn-item">
          <NuxtImg width="316" height="436" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
          <div class="item-text">
            <h3>网站保护</h3>
            <p>
              使用678云盾高防CDN网站保护，网站攻击将无处遁形!我们的专业服务团队利用最佳技术和技巧为您提供安全性和可靠性保护，确保您的业务安全运营，稳步前进。
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="card-text">
      <h2>678CDN 特性</h2>
    </section>
    <section class="cdn-cards">
      <div class="card-item" v-for="(card, index) in cards" :key="index">
        <div class="item-title">
          <img :src="card.icon" alt="icon" />
          <h4>{{ card.title }}</h4>
        </div>
        <div class="item-text">{{ card.text }}</div>
      </div>
    </section>
    <SecurityServicesSuite />
    <CaseCard />
    <!-- <div class="bg-img">
      <NuxtImg src="/images/products/web-bg2.png" class="bg-img" alt="bg-img" />
    </div> -->
  </div>
</template>
<script setup>

useHead({
  title: 'Web安全加速'
})
import icon1 from '~/assets/svg/products/web/icon.svg'
import icon2 from '~/assets/svg/products/web/icon2.svg'
import icon3 from '~/assets/svg/products/web/icon3.svg'
import icon4 from '~/assets/svg/products/web/icon4.svg'
import icon5 from '~/assets/svg/products/web/icon5.svg'
import icon6 from '~/assets/svg/products/web/icon6.svg'
import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue'
import CaseCard from '~/components/products/CaseCard.vue'

const cards = [
  {
    icon: icon1,
    title: 'Anycast',
    text: '通过单一IP地址在全球范围内提供所有内容，并确保低延迟的访问体验。',
  },
  {
    icon: icon2,
    title: 'HTTP/2',
    text: '除了支持HTTP/1.0和HTTP/1.1外，还支持更加高效的HTTP/2协议，进一步提升性能。',
  },
  {
    icon: icon3,
    title: 'HTTPS',
    text: '提供自定义SSL/TLS证书，确保使用您选定的域名以保障内容的安全性。',
  },
  {
    icon: icon4,
    title: '失效操作',
    text: '缓存内容删除仅需几分钟，快速响应并更新内容。',
  },
  {
    icon: icon5,
    title: '日志记录',
    text: '与Stackdriver Logging集成，为您提供每次缓存命中与未命中的详细日志信息。',
  },
  {
    icon: icon6,
    title: '安全',
    text: '多维度拦截（国家、URL、IP）、请求和带宽限制、CC保护。',
  }
]

</script>
<style lang="scss" scoped>
.video-section {
  position: relative;
  width: 100%;
  height: 700px;
  margin: 0 auto;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 10%;
    width: 384px;
    height: 384px;
    border-radius: 50%;
    background: rgba(121, 69, 255, 0.60);
    filter: blur(250px);
  }

  .cdn-dg {
    position: absolute;
    top: 0;
    right: 12%;
    background: url('/images/products/dengg.png') no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .cdn-bg {
      position: relative;
      z-index: 1;
      animation: float 3s ease-in-out infinite;
    }
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  // .video-bg {
  //   width: 100%;
  //   height: auto;
  //   display: block;
  //   z-index: 1;
  //   position: relative;
  //   object-fit: cover;
  //   clip-path: inset(0 0 9% 0);
  // }

  .video-title {
    position: absolute;
    top: 20%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 3;
    color: #fff;
    font-style: normal;
    display: flex;
    flex-direction: column;

    h1 {
      color: #D8D3FF;
      font-size: 45px;
      font-style: normal;
      font-weight: 500;
      line-height: 80px;

      span {
        color: #997DFF;
      }
    }

    .video-subtitle {
      margin-top: 20px;
      color: #E2D9FF;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
    }

    .video-text {
      color: #E2D9FF;
      font-size: 20px;
      font-style: normal;
      font-weight: 300;
      line-height: 30px;
    }


    .video-btn {
      cursor: pointer;
      margin-top: 112px;
      display: flex;
      box-sizing: border-box;
      width: 255px;
      height: 60px;
      padding: 7px 21px 7px 45px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 10px;
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
    }
  }
}

.cdn-container {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .cdn-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    h2 {
      font-size: 45px;
      font-style: normal;
      font-weight: 500;
      line-height: 45px;
      background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      width: 842px;
      color: #E2D9FF;
      text-align: center;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 36px;
    }
  }

  .cdn-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    position: relative;
    margin: 136px auto 0;
    gap: 20px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: rgba(137, 87, 255, 0.50);
      filter: blur(250px);
    }

    &::before {
      top: 12%;
      left: -40%;
    }

    &::after {
      right: -12%;
      bottom: 20%;
    }

    .cdn-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 100px;

      .item-img {
        flex-shrink: 0;
      }
    }

    .item-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 36px;

      h3 {
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      p {
        width: 100%;
        color: #E2D9FF;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px;
      }
    }
  }
}

.card-text {
  display: flex;
  justify-content: center;
  padding: 120px 0 82px 0;

  h2 {
    font-size: 45px;
    font-weight: 500;
    line-height: 45px;
    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.cdn-cards {
  padding: 30px 0 50px 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 30px;

  .card-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 35px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.10);

    &:hover {
      border: 1px solid #9162FF;
      background: linear-gradient(129deg, rgba(122, 55, 255, 0.30) 16.95%, rgba(175, 70, 255, 0.30) 98.61%);
    }

    .item-title {
      display: flex;
      gap: 20px;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
      }

      h4 {
        color: #FFF;
        font-size: 34px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px;
      }
    }

    .item-text {
      width: 100%;
      color: rgba(255, 255, 255, 0.60);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
    }
  }
}

// 透视网格效果
.perspective-grid-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  background: transparent;
  perspective: 600px;
  z-index: 0;

  .perspective-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transform-style: preserve-3d;
  }

  .grid-floor {
    width: 200%;
    height: 400px;
    position: relative;
    transform: rotateX(60deg);
    transform-origin: center top;
    overflow: hidden;
  }

  .grid-lines {
    width: 100%;
    height: 200%;
    background-image:
      linear-gradient(rgba(22, 24, 75, 0.5) 3px, transparent 3px),
      linear-gradient(90deg, rgba(22, 24, 75, 0.5) 3px, transparent 3px);
    background-size: 100px 100px;
    animation: gridMove 4s linear infinite;
  }

  // 底部渐变遮罩，平滑过渡到下一个模块
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, #030014 100%);
    pointer-events: none;
    z-index: 1;
  }
}

@keyframes gridMove {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

.bg-img {
  width: 100%;
  height: 450px;
  position: relative;
  z-index: 1;

  :deep(img) {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>