feat: 行业

app/pages/pc/index.vue

@@ -3,7 +3,7 @@
     <Header></Header>
     <section class="main-content">
       <!-- 标题区域和视频背景 -->
-      <div class="hero-section">
+      <section class="hero-section">
         <!-- 视频背景 -->
         <video ref="videoRef" class="hero-video-bg" :src="videoSrc" autoplay loop muted playsinline
           @loadedmetadata="onVideoLoaded"></video>
@@ -17,20 +17,20 @@
             <p>高防服务器&nbsp;|&nbsp;高防DNS&nbsp;|&nbsp;游戏盾SDK&nbsp;|&nbsp;高防CDN&nbsp;全方位守护您的业务</p>
           </div>
         </div>
-      </div>
+      </section>
 
       <!-- 产品标签栏 -->
-      <div class="product-tabs">
+      <section class="product-tabs">
         <div class="tab-item active">网站安全加速</div>
         <div class="tab-item">TCP业务安全</div>
         <div class="tab-item">客户端安全加速</div>
         <div class="tab-item">专家服务</div>
         <div class="tab-item">零信任安全访问</div>
         <div class="tab-item">出海业务保障</div>
-      </div>
+      </section>
 
       <!-- 产品卡片区域 -->
-      <div class="product-cards">
+      <section class="product-cards">
         <div class="product-card">
           <h3 class="card-title">Web安全加速</h3>
           <p class="card-description">
@@ -78,16 +78,16 @@
             <button class="btn-secondary">0元体验</button>
           </div>
         </div>
-      </div>
+      </section>
 
       <!-- 安全洞见标题 -->
-      <div class="insight-header">
+      <section class="insight-header">
         <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
         <p class="insight-subtitle">实时攻防态势数据</p>
-      </div>
+      </section>
 
       <!-- 数据展示区域 -->
-      <div class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
+      <section class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
         <img class="stats-figure" :src="homeD" alt="游戏盾" />
         <div class="stat-item">
           <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
@@ -101,10 +101,10 @@
           <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
           <div class="stat-value">56,870</div>
         </div>
-      </div>
+      </section>
 
       <!-- 安全运营与方案模块 -->
-      <div class="plans-section">
+      <section class="plans-section">
         <div class="plans-cards">
           <div class="plan-card">
             <div class="plan-name">Lite Plan</div>
@@ -178,10 +178,10 @@
             </div>
           </div>
         </div>
-      </div>
+      </section>
 
       <!-- 安全漏洞 / 全景技术架构上方模块 -->
-      <div class="security-arch-section">
+      <section class="security-arch-section">
         <img :src="homeBg2" width="1" height="1" class="security-arch-img" />
         <div class="security-arch-animate">
           <SecurityParticles />
@@ -195,7 +195,101 @@
             保证系统在高并发、高复杂度场景下依然稳定运行。
           </div>
         </div>
-      </div>
+      </section>
+      <!-- TODO 正常访客等... -->
+
+      <!-- 助力各行业客户成功 -->
+      <section class="cain-section">
+        <img :src="homeBg3" width="1" height="1" class="cain-section-img" />
+        <div class="cain-section-animate">
+          <SecurityParticles />
+        </div>
+        <div class="cain-section-desc">
+          <h3 class="cain-section-title">
+            助力各行业客户成功
+          </h3>
+        </div>
+      </section>
+      <section class="industry">
+        <div class="industry-content">
+          <div class="industry-item">
+            <div class="industry-text">金融</div>
+            <img :src="icon" alt="金融" class="industry-icon" />
+          </div>
+          <div class="industry-item">
+            <div class="industry-text">互联网</div>
+            <img :src="icon2" alt="互联网" class="industry-icon" />
+          </div>
+          <div class="industry-item">
+            <div class="industry-text">医疗健康</div>
+            <img :src="icon3" alt="医疗健康" class="industry-icon" />
+          </div>
+          <div class="industry-item">
+            <div class="industry-text">制造</div>
+            <img :src="icon4" alt="制造" class="industry-icon" />
+          </div>
+          <div class="industry-item">
+            <div class="industry-text">教育</div>
+            <img :src="icon5" alt="教育" class="industry-icon" />
+          </div>
+        </div>
+        <div class="industry-other">
+          <div class="other-item">
+            <img :src="icon6" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon7" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon8" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon9" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon10" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon11" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon12" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon13" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon14" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon15" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon16" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon17" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon18" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon19" alt="卓越教育">
+          </div>
+          <div class="other-item">
+            <img :src="icon20" alt="卓越教育">
+          </div>
+        </div>
+
+        <div class="industry-radar" :style="{ '--radar-bg': `url(${homeBg4})` }">
+          <div class="radar-dots">
+            <span class="radar-dot radar-dot-1" />
+            <span class="radar-dot radar-dot-2" />
+            <span class="radar-dot radar-dot-3" />
+            <span class="radar-dot radar-dot-4" />
+          </div>
+        </div>
+      </section>
     </section>
     <Footer></Footer>
   </div>
@@ -209,6 +303,28 @@ import SecurityParticles from '~/components/SecurityParticles.vue'
 import homeBg from '~/assets/images/home/home-bg.png'
 import homeD from '~/assets/images/home/home-d.png'
 import homeBg2 from '~/assets/images/home/home-bg2.png'
+import homeBg3 from '~/assets/images/home/home-bg3.png'
+import homeBg4 from '~/assets/images/home/home-bg4.png'
+import icon from '~/assets/images/home/icon.png'
+import icon2 from '~/assets/images/home/icon2.png'
+import icon3 from '~/assets/images/home/icon3.png'
+import icon4 from '~/assets/images/home/icon4.png'
+import icon5 from '~/assets/images/home/icon5.png'
+import icon6 from '~/assets/images/home/icon6.png'
+import icon7 from '~/assets/images/home/icon7.png'
+import icon8 from '~/assets/images/home/icon8.png'
+import icon9 from '~/assets/images/home/icon9.png'
+import icon10 from '~/assets/images/home/icon10.png'
+import icon11 from '~/assets/images/home/icon11.png'
+import icon12 from '~/assets/images/home/icon12.png'
+import icon13 from '~/assets/images/home/icon13.png'
+import icon14 from '~/assets/images/home/icon14.png'
+import icon15 from '~/assets/images/home/icon15.png'
+import icon16 from '~/assets/images/home/icon16.png'
+import icon17 from '~/assets/images/home/icon17.png'
+import icon18 from '~/assets/images/home/icon18.png'
+import icon19 from '~/assets/images/home/icon19.png'
+import icon20 from '~/assets/images/home/icon20.png'
 
 const videoRef = ref(null)
 const onVideoLoaded = () => {
@@ -797,7 +913,7 @@ const onVideoLoaded = () => {
 .security-arch-section {
   position: relative;
   padding-top: 496px;
-  padding-bottom: 400px;
+  padding-bottom: 60px;
   box-sizing: border-box;
 
   .security-arch-img {
@@ -858,8 +974,148 @@ const onVideoLoaded = () => {
       line-height: 24px;
       white-space: normal;
       word-break: break-word;
-      text-align: justify; /* 两端对齐并自动换行 */
+      text-align: justify;
+      /* 两端对齐并自动换行 */
+    }
+  }
+}
+
+//彩虹部分
+.cain-section {
+  position: relative;
+  padding-top: 496px;
+  padding-bottom: 60px;
+  box-sizing: border-box;
+
+  .cain-section-img {
+    left: 50%;
+    position: absolute;
+    top: 56px;
+    transform: translate(-50%);
+    height: 400px;
+    width: 900px;
+  }
+
+  .cain-section-animate {
+    height: 212px;
+    left: 50%;
+    mask-size: cover;
+    position: absolute;
+    top: 128px;
+    transform: translate(-50%);
+    width: 936px;
+    opacity: .7;
+    pointer-events: none;
+  }
+
+  .cain-section-desc {
+    position: absolute;
+    left: 50%;
+    top: 60%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    text-align: center;
+
+    .cain-section-title {
+      font-size: 45px;
+      color: #ffffff;
+      margin: 0;
+      font-weight: 400;
     }
   }
+
+
+}
+
+.industry {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+
+  .industry-content {
+    display: flex;
+    gap: 16px;
+  }
+
+  .industry-item {
+    display: flex;
+    justify-content: space-between;
+    width: 240px;
+    height: 100px;
+    border-radius: 10px;
+    background: linear-gradient(118deg, #C9C5FF -25.53%, #5704FF 110.12%);
+  }
+
+  .industry-icon {
+    width: 150px;
+    height: 100px;
+  }
+
+  .industry-text {
+    padding: 16px 0 0 16px;
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 18px;
+    color: #fff;
+  }
+
+  .industry-other {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(3, auto);
+  }
+
+  .other-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 240px;
+    height: 100px;
+    border-radius: 20px;
+    border: 1px solid #B2A1FF;
+    background: #1C192B;
+  }
+
+  .industry-radar {
+    position: relative;
+    width: 640px;
+    height: 260px;
+    overflow: hidden;
+  }
+
+  .industry-radar::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 200%;
+    background-image: var(--radar-bg);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: cover;
+    opacity: 0.95;
+  }
+}
+
+@keyframes radarBlink {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.2;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.6);
+    opacity: 0.2;
+  }
 }
 </style>