Переглянути джерело

fix(产品页面): 替换视频为静态图片并修复产品数据引用

- 删除未使用的视频和图片资源以减少包体积
- 将产品详情页的视频背景替换为静态图片以提升加载性能
- 修复移动端和桌面端产品标签页组件中错误的数据引用变量名
reaper 1 місяць тому
батько
коміт
35d430cad5

BIN
app/assets/video/products.mp4


BIN
app/assets/video/suo.mp4


BIN
app/assets/video/web.mp4


+ 1 - 1
app/components/home/ProductTabs.vue

@@ -23,7 +23,7 @@ import { productTabs } from '~/utils/product'
 const activeTab = ref(0)
 
 
-const currentTabData = computed(() => tabs[activeTab.value])
+const currentTabData = computed(() => productTabs[activeTab.value])
 
 const currentLayout = computed(() => {
   return currentTabData.value.layout === 'multi' ? MultiCardLayout : SingleCardLayout

+ 1 - 1
app/components/mobile/home/ProductTabs.vue

@@ -18,7 +18,7 @@ import { productTabs } from '~/utils/product';
 const activeTab = ref(0)
 
 
-const currentTabData = computed(() => tabs[activeTab.value])
+const currentTabData = computed(() => productTabs[activeTab.value])
 
 
 </script>

+ 24 - 19
app/pages/web/products/boost.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <section class="video-section">
-      <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
-        @loadedmetadata="onVideoLoaded"></video>
+      <NuxtImg width="1080" class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
+      <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video> -->
       <div class="video-title">
         <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
         <h1><span>高防</span>服务器,也能<span>极致加速</span></h1>
@@ -85,8 +86,9 @@
           </div>
         </div>
         <div class="image-content">
-          <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
-            @loadedmetadata="onVideoLoaded"></video>
+          <NuxtImg width="574" src="/images/products/suo.png" alt="suo" />
+          <!-- <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
+            @loadedmetadata="onVideoLoaded"></video> -->
         </div>
       </div>
     </section>
@@ -104,7 +106,6 @@ useHead(() => ({
 }))
 import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
 import Defense from '~/components/products/Defense.vue';
-import homeVideo from '~/assets/video/suo.mp4'
 
 const activeTab = ref('accelerate')
 
@@ -112,21 +113,30 @@ const activeTab = ref('accelerate')
 <style lang="scss" scoped>
 .video-section {
   position: relative;
+  height: 700px;
   width: 100%;
   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);
+  }
 
-  .video-bg {
-    width: 100%;
-    height: auto;
-    display: block;
-    z-index: 1;
-    position: relative;
-    object-fit: cover;
-    clip-path: inset(0 0 9% 0);
+  .sd-bg {
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 
+
   .video-title {
     position: absolute;
     top: 30%;
@@ -374,7 +384,7 @@ const activeTab = ref('accelerate')
       margin-top: 70px;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap:30px 0px;
+      gap: 30px 0px;
 
       .feature-item {
         display: flex;
@@ -402,11 +412,6 @@ const activeTab = ref('accelerate')
     display: flex;
     justify-content: flex-end;
     position: relative;
-
-    .video {
-      width: 522px;
-      height: 522px;
-    }
   }
 }
 </style>

BIN
public/images/products/sd-bg.png


BIN
public/images/products/sdk-bg2.jpg


BIN
public/images/products/suo.png


BIN
public/images/products/web-bg.png


BIN
public/images/products/web-bg2.png