commit

src/main/resources/views/layouts/v4/home/act.js

@@ -1,7 +1,7 @@
 const act = {
     template: /*language=HTML*/ `
         <!-- 活动 -->
-        <div class="section-wrapper">
+        <div class="activity-section-wrapper">
             <div class="section-act">
                 <!-- Swiper容器 -->
 
@@ -77,8 +77,8 @@ const act = {
         /*初始化Swiper*/
         initSwiper() {
             this.swiper = new Swiper('.activity-swiper', {
-                slidesPerView: 'auto',
-                spaceBetween: 30,
+                slidesPerView: 1,
+                spaceBetween: 18,
                 centeredSlides: false,
                 loop: false,
                 navigation: {
@@ -91,13 +91,13 @@ const act = {
                 },
                 breakpoints: {
                     768: {
-                        slidesPerView: 1,
-                    },
-                    1024: {
                         slidesPerView: 2,
                     },
+                    1024: {
+                        slidesPerView: 4,
+                    },
                     1200: {
-                        slidesPerView: 3,
+                        slidesPerView: 5,
                     }
                 }
             })
@@ -131,7 +131,7 @@ const act = {
         this.listAct()
     },
     style: /*language=CSS*/ `
-        .section-wrapper {
+        .activity-section-wrapper {
             width: 100%;
         }
 
@@ -176,7 +176,7 @@ const act = {
         .activity-swiper-container {
             position: relative;
             width: 100%;
-            padding: 20px;
+            padding: 9px 14px;
             /*margin-top: 30px;*/
         }
 
@@ -217,7 +217,7 @@ const act = {
         /* 进度条样式 */
         .activity-swiper-container .swiper-pagination {
             position: relative;
-            margin-top: 30px;
+            margin-top: 12px;
             height: 4px;
         }
 
@@ -239,8 +239,8 @@ const act = {
 
         .activity-swiper .swiper-slide .item .img-box {
             width: 100%;
-            height: 200px;
-            border-radius: 12px;
+            height: 128px;
+            border-radius: 8px;
             overflow: hidden;
             position: relative;
         }
@@ -250,10 +250,12 @@ const act = {
             left: 0;
             top: 0;
             background: #c11623;
-            padding: 6px 2px;
-            min-width: 50px;
+            padding: 4px 2px;
+            min-width: 42px;
             color: #ffffff;
             border-radius: 0 0 50% 0;
+            font-size: 12px;
+            line-height: 1.2;
         }
 
 
@@ -269,16 +271,16 @@ const act = {
         }
 
         .activity-swiper .swiper-slide .item h4 {
-            font-size: 20px;
-            margin-top: 10px;
-            height: 60px;
+            font-size: 15px;
+            margin: 8px 0 0;
+            height: 42px;
             color: #333;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
-            line-height: 1.5;
+            line-height: 1.4;
             text-align: left;
             transition: color 0.3s ease;
         }
@@ -292,14 +294,14 @@ const act = {
         }
 
         .activity-swiper .swiper-slide .item .time p {
-            font-size: 13px;
+            font-size: 12px;
             margin: 0;
-            /*line-height: 1.5;*/
+            line-height: 1.4;
             color: #666;
         }
 
         .activity-swiper .swiper-slide .item .time i {
-            margin-right: 5px;
+            margin-right: 4px;
             color: var(--color-primary);
         }