活动专区

2026-08-09 11:24:20 +08:00
parent 8906cf6abb
commit 0980252b7f
9 changed files with 330 additions and 100 deletions
@@ -127,6 +127,11 @@
    .activity-cards {
      display: flex;
      gap: 20px;
+
+      // 只有一条活动时占满整行
+      &.single .activity-card {
+        flex: 1 1 100%;
+      }
    }

    .activity-card {
@@ -184,6 +189,12 @@
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.25);
        margin-bottom: 14px;
+        overflow: hidden;
+
+        .activity-icon-img {
+          width: 100%;
+          height: 100%;
+        }
      }

      .activity-name {
@@ -219,58 +230,79 @@
  }

  // ========== 5. 底部推荐卡片 ==========
-  .bottom-section {
-    padding: 0 32px;
+  // section-card 通用样式（活动专区 + 底部推荐共用）
+  .section-card {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 18px;
+    padding: 24px 28px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s ease;

-    .section-card {
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .card-icon {
+      font-size: 48px;
+      width: 72px;
+      height: 72px;
      display: flex;
      align-items: center;
-      background: rgba(255, 255, 255, 0.9);
+      justify-content: center;
      border-radius: 18px;
-      padding: 24px 28px;
-      margin-bottom: 16px;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-      transition: transform 0.2s ease;
+      margin-right: 20px;
+      flex-shrink: 0;
+      overflow: hidden;

-      &:active {
-        transform: scale(0.98);
-      }
-
-      .card-icon {
-        font-size: 48px;
-        width: 72px;
-        height: 72px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 18px;
-        margin-right: 20px;
-        flex-shrink: 0;
-      }
-
-      .card-info {
-        flex: 1;
-
-        .card-title {
-          font-size: 30px;
-          font-weight: 600;
-          color: #333;
-          margin-bottom: 6px;
-        }
-
-        .card-desc {
-          font-size: 24px;
-          color: #999;
-        }
-      }
-
-      .card-arrow {
-        font-size: 40px;
-        color: #ccc;
-        flex-shrink: 0;
+      .card-icon-img {
+        width: 100%;
+        height: 100%;
      }
    }

+    .card-info {
+      flex: 1;
+
+      .card-title {
+        font-size: 30px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 6px;
+      }
+
+      .card-desc {
+        font-size: 24px;
+        color: #999;
+      }
+    }
+
+    .card-arrow {
+      font-size: 40px;
+      color: #ccc;
+      flex-shrink: 0;
+    }
+  }
+
+  // 活动专区 section-card 图标底色（循环使用）
+  .card-ic-0 .card-icon {
+    background: #fff0ed;
+  }
+  .card-ic-1 .card-icon {
+    background: #fff7e6;
+  }
+  .card-ic-2 .card-icon {
+    background: #e6f7ff;
+  }
+  .card-ic-3 .card-icon {
+    background: #f0edff;
+  }
+
+  .bottom-section {
+    padding: 0 32px;
+
    // 每张卡片图标不同底色
    .card-hot .card-icon {
      background: #fff0ed;