Просмотр исходного кода

feat(products): 更新SDK产品页视觉设计与资源

- 移除背景视频,使用静态图片替代以提升加载性能
- 更新产品介绍卡片背景为渐变图片样式
- 调整页面布局高度和背景元素位置
- 删除未使用的视频资源文件
reaper 1 месяц назад
Родитель
Сommit
21f79d2d84

BIN
app/assets/video/sdk.mp4


+ 1 - 2
app/components/products/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="card-container">
-    <NuxtImg class="card-bg-img" src="/images/products/sdk-bg2.jpg" alt="背景图" />
+    <!-- <NuxtImg class="card-bg-img" src="/images/products/sdk-bg2.jpg" alt="背景图" /> -->
     <div class="card-box">
       <div v-mouse-glow class="card-item card1">
         <div class="card-title">
@@ -68,7 +68,6 @@
 <style lang="scss" scoped>
 .card-container {
   width: 100%;
-  height: 1000px;
   position: relative;
 
   .card-bg-img {

+ 1 - 3
app/components/products/Introduction.vue

@@ -44,10 +44,8 @@
   padding: 64px 48px 110px 48px;
   box-sizing: border-box;
   border-radius: 20px;
+  background: url("/images/products/text-bg.png") no-repeat center center;
   z-index: 3;
-  // background: linear-gradient(180deg, #A86AFD -110.27%, rgba(3, 0, 20, 0.00) 44.89%);
-  background: linear-gradient(179deg, #A86AFD -65.5%, rgba(3, 0, 20, 0.80) 44.94%);
-  border-top: 2px solid #953FFF;
   justify-content: space-between;
   gap: 35px;
 

+ 18 - 2
app/pages/web/products/sdk.vue

@@ -2,8 +2,9 @@
   <section>
     <section class="video-section">
       <div class="left-bg"></div>
-      <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
-        @loadedmetadata="onVideoLoaded"></video>
+      <div class="right-bg"></div>
+      <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video> -->
       <div class="video-title">
         <h1>DDAC游戏盾——让APP自带</h1>
         <div class="video-subtitle">“国家级别”防御</div>
@@ -61,6 +62,7 @@ useHead(() => ({
   width: 100%;
   margin: 0 auto;
   overflow: hidden;
+  height: 790px;
 
   .left-bg {
     position: absolute;
@@ -77,6 +79,20 @@ useHead(() => ({
     opacity: 0.6;
   }
 
+  .right-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1216px;
+    height:840px;
+    background-image: url('/images/products/sdk-bg1.png');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 3;
+    opacity: 0.6;
+  }
+
   .video-bg {
     width: 100%;
     height: auto;

BIN
public/images/products/sdk-bg1.png


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