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

style(products/web): 调整CDN容器上边距并优化网格背景样式

- 将.cdn-container的上边距从20px减少到10px以优化间距
- 移除.grid-floor和.grid-lines相关样式,改用伪元素实现底部渐变遮罩
- 添加::after伪元素创建从透明到背景色的渐变过渡,使网格动画更平滑地融入下一模块
reaper 1 місяць тому
батько
коміт
5f64c2fed1
1 змінених файлів з 12 додано та 19 видалено
  1. 12 19
      app/pages/web/products/web.vue

+ 12 - 19
app/pages/web/products/web.vue

@@ -250,7 +250,7 @@ const cards = [
 }
 
 .cdn-container {
-  margin-top: 20px;
+  margin-top: 10px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -446,27 +446,20 @@ const cards = [
     background-size: 100px 100px;
     animation: gridMove 4s linear infinite;
   }
-}
-
-  .grid-floor {
-    width: 200%;
-    height: 400px;
-    position: relative;
-    transform: rotateX(60deg);
-    transform-origin: center top;
-    overflow: hidden;
-  }
 
-  .grid-lines {
+  // 底部渐变遮罩,平滑过渡到下一个模块
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 100%;
-    height: 200%;
-    background-image:
-      linear-gradient(rgba(124, 77, 255, 0.3) 2px, transparent 2px),
-      linear-gradient(90deg, rgba(124, 77, 255, 0.3) 2px, transparent 2px);
-    background-size: 50px 50px;
-    animation: gridMove 4s linear infinite;
+    height: 100px;
+    background: linear-gradient(to bottom, transparent 0%, #030014 100%);
+    pointer-events: none;
+    z-index: 1;
   }
-
+}
 
 @keyframes gridMove {
   0% {