feat: 首页

app/pages/pc/index.vue

@@ -182,7 +182,7 @@
 
       <!-- 安全漏洞 / 全景技术架构上方模块 -->
       <section class="security-arch-section">
-        <img :src="homeBg2" width="1" height="1" class="security-arch-img" />
+        <img alt="安全架构" :src="homeBg2" width="1" height="1" class="security-arch-img" />
         <div class="security-arch-animate">
           <SecurityParticles />
         </div>
@@ -200,7 +200,7 @@
 
       <!-- 助力各行业客户成功 -->
       <section class="cain-section">
-        <img :src="homeBg3" width="1" height="1" class="cain-section-img" />
+        <img alt="助力各行业客户成功" :src="homeBg3" width="1" height="1" class="cain-section-img" />
         <div class="cain-section-animate">
           <SecurityParticles />
         </div>
@@ -238,57 +238,70 @@
             <img :src="icon6" alt="卓越教育">
           </div>
           <div class="other-item">
-            <img :src="icon7" alt="卓越教育">
+            <img :src="icon7" alt="华福证券">
           </div>
           <div class="other-item">
-            <img :src="icon8" alt="卓越教育">
+            <img :src="icon8" alt="汉王">
           </div>
           <div class="other-item">
-            <img :src="icon9" alt="卓越教育">
+            <img :src="icon9" alt="隧道股份">
           </div>
           <div class="other-item">
-            <img :src="icon10" alt="卓越教育">
+            <img :src="icon10" alt="岳阳医院">
           </div>
           <div class="other-item">
-            <img :src="icon11" alt="卓越教育">
+            <img :src="icon11" alt="杉德">
           </div>
           <div class="other-item">
-            <img :src="icon12" alt="卓越教育">
+            <img :src="icon12" alt="易班">
           </div>
           <div class="other-item">
-            <img :src="icon13" alt="卓越教育">
+            <img :src="icon13" alt="银联商务">
           </div>
           <div class="other-item">
-            <img :src="icon14" alt="卓越教育">
+            <img :src="icon14" alt="长海医院">
           </div>
           <div class="other-item">
-            <img :src="icon15" alt="卓越教育">
+            <img :src="icon15" alt="斗象科技">
           </div>
           <div class="other-item">
-            <img :src="icon16" alt="卓越教育">
+            <img :src="icon16" alt="瑞金">
           </div>
           <div class="other-item">
-            <img :src="icon17" alt="卓越教育">
+            <img :src="icon17" alt="3L">
           </div>
           <div class="other-item">
-            <img :src="icon18" alt="卓越教育">
+            <img :src="icon18" alt="宝付">
           </div>
           <div class="other-item">
-            <img :src="icon19" alt="卓越教育">
+            <img :src="icon19" alt="新华医院">
           </div>
           <div class="other-item">
-            <img :src="icon20" alt="卓越教育">
+            <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 class="industry-box">
+          <div class="industry-radar">
+            <img :src="homeBg4" alt="radar" class="radar-bg-img" />
+            <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>
         </div>
+        <div class="industry-title">
+          <h3><span>立即加入</span> <span>安全之旅</span></h3>
+          <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
+        </div>
+      </section>
+      <section class="hero-section">
+        <!-- 视频背景 -->
+        <video ref="videoRef" class="hero-video-bg" :src="videoSrc" autoplay loop muted playsinline
+          @loadedmetadata="onVideoLoaded"></video>
+        <!-- Canvas动画组件 -->
+        <ParticlesCanvas class="canvas-overlay" />
       </section>
     </section>
     <Footer></Footer>
@@ -334,6 +347,24 @@ const onVideoLoaded = () => {
     })
   }
 }
+
+useHead(() => ({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'description', content: 'DDAC - 游戏盾防御' },
+    { name: 'keywords', content: '高防服务器 | 高防DNS | 游戏盾SDK | 高防CDN' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+}))
+useSeoMeta(() => ({
+  title: 'DDAC - 游戏盾防御',
+  description: '高防服务器 | 高防DNS | 游戏盾SDK | 高防CDN',
+}))
 </script>
 
 <style scoped lang="scss">
@@ -366,12 +397,11 @@ const onVideoLoaded = () => {
 
   .hero-video-bg {
     position: absolute;
-    top: 0;
+    top: -3%;
     left: 0;
     width: 100%;
-    height: 100%;
     object-fit: cover;
-    object-position: center top; // 只显示上半部分
+    clip-path: inset(0 0 50% 0);
     z-index: 0;
   }
 
@@ -1027,6 +1057,8 @@ const onVideoLoaded = () => {
 
 }
 
+$Diameter :890px;
+
 .industry {
   display: flex;
   flex-direction: column;
@@ -1079,26 +1111,142 @@ const onVideoLoaded = () => {
     background: #1C192B;
   }
 
+  .industry-title {
+    h3 {
+      padding: 40px 0;
+      text-align: center;
+      color: #FFF;
+      font-size: 45px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 45px;
+
+      span {
+        margin: 0 20px
+      }
+    }
+
+    .industry-subtitle {
+      text-align: center;
+      color: #FFF;
+      font-size: 26px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 26px;
+    }
+  }
+
+  .industry-box,
   .industry-radar {
     position: relative;
-    width: 640px;
-    height: 260px;
+    width: $Diameter;
+    height: calc($Diameter / 2);
+  }
+
+  .industry-radar {
     overflow: hidden;
   }
 
-  .industry-radar::before {
-    content: "";
+  .radar-bg-img {
     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;
+    height: $Diameter;
+    object-fit: contain;
+    object-position: center top;
     opacity: 0.95;
+    z-index: 1;
+  }
+
+  .industry-radar::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $Diameter;
+    height: $Diameter;
+    border-radius: 50%;
+    transform-origin: 50%;
+    background: conic-gradient(from 0deg at center,
+        rgba(99, 102, 241, 0) 0deg,
+        rgba(99, 102, 241, 0.05) 10deg,
+        rgba(99, 102, 241, 0.1) 20deg,
+        rgba(99, 102, 241, 0.2) 25deg,
+        rgba(99, 102, 241, 0.3) 28deg,
+        rgba(99, 102, 241, 0.4) 30deg,
+        transparent 30deg 360deg);
+    filter: blur(1px);
+    animation: radarScan 6s linear infinite;
+    z-index: 2;
+    opacity: 0.7;
+  }
+
+  .industry-box::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    width: 64px;
+    height: 64px;
+    background: linear-gradient(114deg, #C9C5FF -44.49%, #5704FF 140.15%);
+    stroke: #AE80FF;
+    border-radius: 50%;
+    z-index: 3;
+  }
+
+  .radar-dots {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 4;
+  }
+
+  .radar-dot {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(99, 102, 241, 0.8);
+    box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
+  }
+
+  .radar-dot-1 {
+    left: 45%;
+    top: 35%;
+    animation: radarBlink 1.5s ease-in-out infinite;
+  }
+
+  .radar-dot-2 {
+    left: 60%;
+    top: 62%;
+    animation: radarBlink 1.5s ease-in-out infinite 0.375s;
+  }
+
+  .radar-dot-3 {
+    left: 30%;
+    top: 66%;
+    animation: radarBlink 1.5s ease-in-out infinite 0.75s;
+  }
+
+  .radar-dot-4 {
+    left: 70%;
+    top: 35%;
+    animation: radarBlink 1.5s ease-in-out infinite 1.125s;
+  }
+}
+
+@keyframes radarScan {
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
   }
 }