diff --git a/src/main/java/com/budwk/app/zhgh/activity/family/controller/manage/FamilyActivityApplyController.java b/src/main/java/com/budwk/app/zhgh/activity/family/controller/manage/FamilyActivityApplyController.java
index 8d2004dc..f6fa95eb 100644
--- a/src/main/java/com/budwk/app/zhgh/activity/family/controller/manage/FamilyActivityApplyController.java
+++ b/src/main/java/com/budwk/app/zhgh/activity/family/controller/manage/FamilyActivityApplyController.java
@@ -87,6 +87,9 @@ public class FamilyActivityApplyController {
 		Cnd cnd = Cnd.NEW();
 		cnd.andEX("id", "=", id);
 		cnd.andEX("`year`", "=", year);
+		if (StrUtil.isNotBlank(pageForm.getSearchKeyword())) {
+			cnd.and("activityName", "like", "%" + pageForm.getSearchKeyword().trim() + "%");
+		}
 		//查询报名中
 		if (activityType == 2) {
 			cnd.and(new Static("now() < activitySignUpEndTime"));
@@ -117,6 +120,7 @@ public class FamilyActivityApplyController {
 						   @Param(value = "courseTypeId") String courseTypeId,
 						   @Param(value = "activityId") String activityId,
 						   @Param(value = "assortTypes") String[] assortTypes,
+						   @Param(value = "searchKeyword") String searchKeyword,
 						   @Param(value = "dataType") String dataType) {
 		FamilyActivity activity = dao.fetch(FamilyActivity.class, activityId);
 		Sql sql = Sqls.create("""
@@ -131,6 +135,9 @@ public class FamilyActivityApplyController {
 		Cnd cnd = Cnd.NEW();
 		cnd.andEX("type.id", "=", courseTypeId);
 		cnd.and("tsuc.activityId", "=", activityId);
+		if (StrUtil.isNotBlank(searchKeyword)) {
+			cnd.and("tsuc.courseName", "like", "%" + searchKeyword.trim() + "%");
+		}
 		if(Lang.isNotEmpty(assortTypes)) {
 			cnd.and("tsuc.assort", "in", assortTypes);
 		}
diff --git a/src/main/java/com/budwk/app/zhgh/activity/sports/param/ActivitySportsApplyUserPageParam.java b/src/main/java/com/budwk/app/zhgh/activity/sports/param/ActivitySportsApplyUserPageParam.java
index 2182ddb6..dbcb592a 100644
--- a/src/main/java/com/budwk/app/zhgh/activity/sports/param/ActivitySportsApplyUserPageParam.java
+++ b/src/main/java/com/budwk/app/zhgh/activity/sports/param/ActivitySportsApplyUserPageParam.java
@@ -18,6 +18,7 @@ public class ActivitySportsApplyUserPageParam extends PageForm {
     private String applyType;
     private String isAudit;
     private String groupName;
+    private String searchKeyword;
     private String activityId;
     private String eventId;
     private String year;
diff --git a/src/main/java/com/budwk/app/zhgh/activity/sports/service/impl/ActivitySportsApplyUserServiceImpl.java b/src/main/java/com/budwk/app/zhgh/activity/sports/service/impl/ActivitySportsApplyUserServiceImpl.java
index 8e6e1a43..6a6b2383 100644
--- a/src/main/java/com/budwk/app/zhgh/activity/sports/service/impl/ActivitySportsApplyUserServiceImpl.java
+++ b/src/main/java/com/budwk/app/zhgh/activity/sports/service/impl/ActivitySportsApplyUserServiceImpl.java
@@ -122,6 +122,9 @@ public class ActivitySportsApplyUserServiceImpl extends BaseServiceImpl<Activity
             cnd.and(new Static("(SELECT COUNT(1) FROM activity_school_apply WHERE eventId = ase.eventId AND activityId = ase.activityId AND userId='%s')%s0".formatted(SecurityUtil.getUserId(), (pageParam.getIsAudit().equals("true") ? ">" : "="))));
         }
         cnd.and("ase.activityId", "=", pageParam.getActivityId());
+        if (StrUtil.isNotBlank(pageParam.getSearchKeyword())) {
+            cnd.and("eve.allName", "like", "%" + pageParam.getSearchKeyword().trim() + "%");
+        }
         cnd.andEX("ase.eventId", "=", pageParam.getEventId());
         cnd.andEX("YEAR(school.applyStartTime)", "=", pageParam.getYear());
 
diff --git a/src/main/java/com/budwk/app/zhgh/activity/trainSignUp/controller/manage/TrainSignUpApplyController.java b/src/main/java/com/budwk/app/zhgh/activity/trainSignUp/controller/manage/TrainSignUpApplyController.java
index 2b5c931e..7aca142e 100644
--- a/src/main/java/com/budwk/app/zhgh/activity/trainSignUp/controller/manage/TrainSignUpApplyController.java
+++ b/src/main/java/com/budwk/app/zhgh/activity/trainSignUp/controller/manage/TrainSignUpApplyController.java
@@ -126,6 +126,7 @@ public class TrainSignUpApplyController {
 						   @Param(value = "courseTypeId") String courseTypeId,
 						   @Param(value = "activityId") String activityId,
 						   @Param(value = "assortTypes") String[] assortTypes,
+						   @Param(value = "searchKeyword") String searchKeyword,
 						   @Param(value = "dataType") String dataType) {
 		Sql sql = Sqls.create("""
 				SELECT
@@ -159,6 +160,9 @@ public class TrainSignUpApplyController {
 		Cnd cnd = Cnd.NEW();
 		cnd.andEX("type.id", "=", courseTypeId);
 		cnd.and("tsuc.activityId", "=", activityId);
+		if (StrUtil.isNotBlank(searchKeyword)) {
+			cnd.and("tsuc.courseName", "like", "%" + searchKeyword.trim() + "%");
+		}
 
 		if (Lang.isNotEmpty(assortTypes)) {
 			cnd.and("tsuc.assort", "in", assortTypes);
diff --git a/src/main/resources/static/assets/mobile/img/activity/family-empty.png b/src/main/resources/static/assets/mobile/img/activity/family-empty.png
new file mode 100644
index 00000000..0a6d35c7
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/family-empty.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/brand-hero-v2.png b/src/main/resources/static/assets/mobile/img/activity/hero/brand-hero-v2.png
new file mode 100644
index 00000000..cf56618c
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/brand-hero-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v2.png b/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v2.png
new file mode 100644
index 00000000..1b690574
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v3.png b/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v3.png
new file mode 100644
index 00000000..a9b3777c
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/culture-hero-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v2.png b/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v2.png
new file mode 100644
index 00000000..21468506
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v3.png b/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v3.png
new file mode 100644
index 00000000..41b2d42a
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/family-hero-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/hero/sports-hero-v2.png b/src/main/resources/static/assets/mobile/img/activity/hero/sports-hero-v2.png
new file mode 100644
index 00000000..1384656e
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/hero/sports-hero-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/activity/schedule-empty.png b/src/main/resources/static/assets/mobile/img/activity/schedule-empty.png
new file mode 100644
index 00000000..c3a5a471
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/activity/schedule-empty.png differ
diff --git a/src/main/resources/static/assets/mobile/img/common/smart-union-loading-red.svg b/src/main/resources/static/assets/mobile/img/common/smart-union-loading-red.svg
index e806911b..25c2a727 100644
--- a/src/main/resources/static/assets/mobile/img/common/smart-union-loading-red.svg
+++ b/src/main/resources/static/assets/mobile/img/common/smart-union-loading-red.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" fill="none">
-    <circle cx="64" cy="64" r="53" stroke="#F5222D" stroke-width="3"/>
+    <circle cx="64" cy="64" r="58" stroke="#F5222D" stroke-width="3"/>
     <path d="M21 54A44 44 0 0 1 107 54" stroke="#F5222D" stroke-width="9" stroke-linecap="round"/>
     <path d="M21 74A44 44 0 0 0 107 74" stroke="#F5222D" stroke-width="9" stroke-linecap="round"/>
     <circle cx="64" cy="64" r="27" stroke="#F5222D" stroke-width="9"/>
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/app-center-empty-v4.png b/src/main/resources/static/assets/mobile/img/home/v4/app-center-empty-v4.png
new file mode 100644
index 00000000..34375bf8
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/app-center-empty-v4.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v2.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v2.png
new file mode 100644
index 00000000..016c82b9
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v3.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v3.png
new file mode 100644
index 00000000..9b7ec1cb
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v4.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v4.png
new file mode 100644
index 00000000..0178d17d
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v4.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v5.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v5.png
new file mode 100644
index 00000000..9724d80e
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-activity-v5.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v2.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v2.png
new file mode 100644
index 00000000..d917fb4b
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v3.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v3.png
new file mode 100644
index 00000000..01b89191
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v4.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v4.png
new file mode 100644
index 00000000..c4451a12
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v4.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v5.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v5.png
new file mode 100644
index 00000000..7098f633
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-benefit-v5.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v2.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v2.png
new file mode 100644
index 00000000..2a73111d
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v3.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v3.png
new file mode 100644
index 00000000..d43df616
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v4.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v4.png
new file mode 100644
index 00000000..1520d577
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v4.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v5.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v5.png
new file mode 100644
index 00000000..532b1ad1
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-inclusive-v5.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v2.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v2.png
new file mode 100644
index 00000000..d2720632
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v2.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v3.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v3.png
new file mode 100644
index 00000000..bb1f60a6
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v3.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v4.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v4.png
new file mode 100644
index 00000000..22532c68
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v4.png differ
diff --git a/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v5.png b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v5.png
new file mode 100644
index 00000000..92999376
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/home/v4/feature-model-v5.png differ
diff --git a/src/main/resources/static/components/module/activity/ActivityScheduleCalendar.vue b/src/main/resources/static/components/module/activity/ActivityScheduleCalendar.vue
new file mode 100644
index 00000000..371d58e6
--- /dev/null
+++ b/src/main/resources/static/components/module/activity/ActivityScheduleCalendar.vue
@@ -0,0 +1,634 @@
+<template>
+  <div>
+    <van-action-sheet
+        v-model="visible"
+        class="activity-schedule-calendar"
+        :style="{ height: '78%' }"
+        :close-on-click-overlay="true"
+        title="活动日历"
+        closeable>
+      <div class="activity-schedule-calendar__body">
+        <div class="activity-schedule-calendar__month-bar">
+          <button type="button" class="activity-schedule-calendar__month-btn" @click="changeMonth(-1)">
+            <van-icon name="arrow-left"></van-icon>
+          </button>
+          <div class="activity-schedule-calendar__month-title">{{ currentYear }}年{{ currentMonth }}月</div>
+          <button type="button" class="activity-schedule-calendar__month-btn" @click="changeMonth(1)">
+            <van-icon name="arrow"></van-icon>
+          </button>
+        </div>
+
+        <div class="activity-schedule-calendar__weekdays">
+          <span v-for="item in weekdays" :key="item">{{ item }}</span>
+        </div>
+        <div class="activity-schedule-calendar__days">
+          <button
+              v-for="day in calendarDays"
+              :key="day.key"
+              type="button"
+              class="activity-schedule-calendar__day"
+              :class="{
+                'is-other-month': !day.currentMonth,
+                'is-selected': day.key === selectedDate,
+                'is-today': day.isToday
+              }"
+              @click="selectDay(day)">
+            <span>
+              <span class="activity-schedule-calendar__day-number">{{ day.day }}</span>
+              <small v-if="day.isToday" class="activity-schedule-calendar__today-label">今</small>
+            </span>
+            <i v-if="day.status" class="activity-schedule-calendar__day-status" :class="'is-' + day.status"></i>
+          </button>
+        </div>
+
+        <div class="activity-schedule-calendar__legend">
+          <span><i class="is-solid"></i>已签到</span>
+          <span><i class="is-outline"></i>可签到</span>
+          <span><i class="is-muted"></i>未开始</span>
+        </div>
+
+        <div v-if="showMap" :id="mapContainerId" class="activity-schedule-calendar__map"></div>
+
+        <section class="activity-schedule-calendar__schedule-card">
+          <div class="activity-schedule-calendar__schedule-title">
+            {{ selectedDate ? selectedDate + ' 的活动时段' : '活动时段' }}
+          </div>
+          <div v-if="selectedTimes.length" class="activity-schedule-calendar__schedule-list">
+            <div v-for="item in selectedTimes" :key="item.id" class="activity-schedule-calendar__schedule-item">
+              <div class="activity-schedule-calendar__schedule-main">
+                <van-icon :name="item.isAttend === true ? 'checked' : 'clock-o'"></van-icon>
+                <div class="activity-schedule-calendar__schedule-copy">
+                  <div class="activity-schedule-calendar__schedule-time">
+                    {{ formatTime(item.courseStartTime) }} - {{ formatTime(item.courseEndTime) }}
+                  </div>
+                  <div v-if="row && row.courseLocation" class="activity-schedule-calendar__schedule-location">
+                    <van-icon name="location-o"></van-icon>
+                    <span>{{ row.courseLocation }}</span>
+                  </div>
+                </div>
+              </div>
+              <span v-if="item.isAttend === true" class="activity-schedule-calendar__status is-success">已签到</span>
+              <button
+                  v-else-if="canSignItem(item)"
+                  type="button"
+                  class="activity-schedule-calendar__sign-btn"
+                  @click.stop="onSign(item)">签到</button>
+              <span v-else class="activity-schedule-calendar__status" :class="{
+                'is-ended': getScheduleStatus(item) === '已结束',
+                'is-progressing': getScheduleStatus(item) === '进行中'
+              }">
+                {{ getScheduleStatus(item) }}
+              </span>
+            </div>
+          </div>
+          <div v-else class="activity-schedule-calendar__empty">
+            <img src="/assets/mobile/img/activity/schedule-empty.png?v=20260821-transparent" alt="">
+            <div class="activity-schedule-calendar__empty-title">当天暂无签到时段</div>
+            <div class="activity-schedule-calendar__empty-desc">当前日期没有需要签到的活动安排</div>
+          </div>
+        </section>
+      </div>
+    </van-action-sheet>
+
+    <van-popup
+        v-model="signVisible"
+        round
+        closeable
+        :safe-area-inset-bottom="true"
+        :close-on-click-overlay="false"
+        :style="{ width: '80%', height: '66%' }"
+        get-container="#app"
+        @close="onSignClose">
+      <scan-code ref="scanCodeRef"></scan-code>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: "ActivityScheduleCalendar",
+  props: {
+    moduleType: {
+      type: String,
+      default: "brand"
+    }
+  },
+  components: {
+    "scan-code": httpVueLoader("/components/plugins/sysScanCode/index.vue?v=" + new Date().getTime())
+  },
+  data() {
+    return {
+      visible: false,
+      row: null,
+      currentYear: new Date().getFullYear(),
+      currentMonth: new Date().getMonth() + 1,
+      selectedDate: "",
+      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+      selectCourseTime: null,
+      signVisible: false,
+      markerLayer: null,
+      map: null,
+      circle: null,
+      mapContainerId: "activityScheduleMap_" + Math.random().toString(36).slice(2)
+    }
+  },
+  computed: {
+    courseTimes() {
+      return this.row && Array.isArray(this.row.courseTimes) ? this.row.courseTimes : []
+    },
+    scheduleDateMap() {
+      const map = {}
+      this.courseTimes.forEach(item => {
+        const key = this.dateKey(item)
+        if (!key) return
+        if (!map[key]) map[key] = []
+        map[key].push(item)
+      })
+      return map
+    },
+    selectedTimes() {
+      return this.scheduleDateMap[this.selectedDate] || []
+    },
+    canSign() {
+      return !!(this.row && this.row.isSign === true && this.row.isMobileSign === true)
+    },
+    showMap() {
+      return !!(this.moduleType === "brand" && this.row && this.row.isMobileSign === true && this.row.signType === 3)
+    },
+    calendarDays() {
+      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1)
+      const startDate = new Date(this.currentYear, this.currentMonth - 1, 1 - firstDay.getDay())
+      const todayKey = this.formatDateKey(new Date())
+      return Array.from({ length: 42 }, (_, index) => {
+        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + index)
+        const key = this.formatDateKey(date)
+        return {
+          key,
+          day: date.getDate(),
+          currentMonth: date.getFullYear() === this.currentYear && date.getMonth() + 1 === this.currentMonth,
+          isToday: key === todayKey,
+          status: this.getDayStatus(this.scheduleDateMap[key] || [])
+        }
+      })
+    }
+  },
+  methods: {
+    onOpen(row) {
+      this.row = row
+      const initialDate = this.formatDateKey(new Date())
+      const date = this.$moment(initialDate)
+      this.currentYear = date.year()
+      this.currentMonth = date.month() + 1
+      this.selectedDate = initialDate
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.showMap) this.initMap()
+      })
+    },
+    dateKey(item) {
+      const value = item && (item.courseDate || item.courseStartTime)
+      return value ? this.$moment(value).format("YYYY-MM-DD") : ""
+    },
+    formatDateKey(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, "0")
+      const day = String(date.getDate()).padStart(2, "0")
+      return `${year}-${month}-${day}`
+    },
+    formatTime(value) {
+      return value ? this.$moment(value).format("HH:mm") : "--"
+    },
+    canSignItem(item) {
+      if (!this.canSign || !item || !item.courseStartTime || !item.courseEndTime) return false
+      const now = this.$moment()
+      return !now.isBefore(this.$moment(item.courseStartTime)) && !now.isAfter(this.$moment(item.courseEndTime))
+    },
+    getScheduleStatus(item) {
+      if (!item || !item.courseStartTime || !item.courseEndTime) return "待开始"
+      const now = this.$moment()
+      if (now.isBefore(this.$moment(item.courseStartTime))) return "待开始"
+      if (now.isAfter(this.$moment(item.courseEndTime))) return "已结束"
+      return "进行中"
+    },
+    getDayStatus(items) {
+      if (items.some(item => item.isAttend === true)) return "signed"
+      if (items.some(item => this.canSignItem(item))) return "available"
+      if (items.some(item => item.courseStartTime && this.$moment().isBefore(this.$moment(item.courseStartTime)))) return "pending"
+      return ""
+    },
+    changeMonth(offset) {
+      const date = new Date(this.currentYear, this.currentMonth - 1 + offset, 1)
+      this.currentYear = date.getFullYear()
+      this.currentMonth = date.getMonth() + 1
+    },
+    selectDay(day) {
+      this.selectedDate = day.key
+      if (!day.currentMonth) {
+        const date = this.$moment(day.key)
+        this.currentYear = date.year()
+        this.currentMonth = date.month() + 1
+      }
+    },
+    onSign(courseTime) {
+      this.selectCourseTime = courseTime
+      if (this.row.signType === 1) {
+        this.signVisible = true
+        this.$nextTick(() => this.$refs.scanCodeRef.init())
+      } else if (this.row.signType === 2) {
+        this.makeCode()
+      } else if (this.row.signType === 3 && this.moduleType === "brand") {
+        this.positionSign()
+      } else {
+        this.$toast("此签到模式正在升级中")
+      }
+    },
+    onSignClose() {
+      if (this.$refs.scanCodeRef) this.$refs.scanCodeRef.closeScan()
+    },
+    makeCode() {
+      const baseUrl = this.moduleType === "family"
+          ? "/platform/family/mine/passiveScan"
+          : "/platform/trainSignUp/mine/passiveScan"
+      const content = jrQrcode.getQrBase64(baseUrl + "?id=" + this.selectCourseTime.id)
+      vant.ImagePreview([content])
+    },
+    positionSign() {
+      this.getLocation(coords => {
+        if (!coords) return
+        this.$axios.post("/platform/trainSignUp/mine/positionSign", {
+          timeId: this.selectCourseTime.id,
+          courseId: this.row.id,
+          lat: coords.lat,
+          lng: coords.lng
+        }).then(res => {
+          if (res.code === 0) {
+            this.selectCourseTime.isAttend = true
+            this.$toast("签到成功")
+          } else {
+            this.$toast(res.msg)
+          }
+        })
+      })
+    },
+    getLocation(callback) {
+      if (!navigator.geolocation) {
+        this.$toast("当前浏览器不支持定位功能")
+        callback(null)
+        return
+      }
+      const loading = vant.Toast.loading({ message: "获取定位中...", forbidClick: false, duration: 0 })
+      navigator.geolocation.getCurrentPosition(position => {
+        loading.close()
+        callback({ lat: position.coords.latitude, lng: position.coords.longitude })
+      }, error => {
+        loading.close()
+        const messageMap = {
+          1: "请允许浏览器获取位置信息",
+          2: "无法获取当前位置",
+          3: "定位超时，请重试"
+        }
+        this.$toast(messageMap[error.code] || "定位失败，请稍后重试")
+        callback(null)
+      }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 })
+    },
+    initMap() {
+      if (!this.row.courseLocationCoordinates || typeof TMap === "undefined") return
+      const position = JSON.parse(this.row.courseLocationCoordinates)
+      const center = new TMap.LatLng(position[0], position[1])
+      if (this.map) this.map.destroy()
+      this.map = new TMap.Map(this.mapContainerId, { zoom: 16, center })
+      this.markerLayer = new TMap.MultiMarker({
+        map: this.map,
+        geometries: [{ id: "activity", position: center }]
+      })
+      this.circle = new TMap.MultiCircle({
+        map: this.map,
+        geometries: [{ center, radius: this.row.radius || 100 }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.activity-schedule-calendar {
+  overflow: hidden;
+  border-radius: 18px 18px 0 0;
+  background: #f4f7fc;
+}
+
+.activity-schedule-calendar /deep/ .van-action-sheet__header {
+  height: 50px;
+  color: #1f2f43;
+  background: #fff;
+  font-size: 16px;
+  line-height: 50px;
+}
+
+.activity-schedule-calendar /deep/ .van-action-sheet__close {
+  top: 14px;
+  color: #7e899a;
+  font-size: 21px;
+}
+
+.activity-schedule-calendar__body {
+  height: 100%;
+  padding: 14px 14px 24px;
+  overflow-y: auto;
+  overflow-anchor: none;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__month-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.activity-schedule-calendar__month-btn {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #edf1f6;
+  border-radius: 50%;
+  color: #263548;
+  background: #fff;
+  box-shadow: 0 5px 14px rgba(55, 85, 126, .08);
+}
+
+.activity-schedule-calendar__month-title {
+  color: #1f2f43;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.activity-schedule-calendar__weekdays,
+.activity-schedule-calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  text-align: center;
+}
+
+.activity-schedule-calendar__weekdays {
+  margin-bottom: 5px;
+  color: #58677b;
+  font-size: 12px;
+  line-height: 28px;
+}
+
+.activity-schedule-calendar__day {
+  position: relative;
+  display: flex;
+  width: 38px;
+  height: 48px;
+  margin: 1px auto;
+  padding: 0;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  border: 0;
+  color: #263548;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__day > span {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__day-number {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 14px;
+}
+
+.activity-schedule-calendar__today-label {
+  position: absolute;
+  top: 2px;
+  right: 0;
+  left: 0;
+  color: #1989fa;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.activity-schedule-calendar__day.is-other-month > span {
+  color: #bdc5d0;
+}
+
+.activity-schedule-calendar__day.is-selected > span {
+  flex: 0 0 40px;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  color: #fff;
+  background: #1989fa;
+  box-shadow: 0 5px 12px rgba(25, 137, 250, .22);
+}
+
+.activity-schedule-calendar__day.is-selected .activity-schedule-calendar__today-label {
+  top: 2px;
+  color: #fff;
+}
+
+.activity-schedule-calendar__day-status {
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__day-status.is-signed {
+  background: #1989fa;
+}
+
+.activity-schedule-calendar__day-status.is-available {
+  border: 1px solid #1989fa;
+  background: #fff;
+}
+
+.activity-schedule-calendar__day-status.is-pending {
+  background: #d8dde5;
+}
+
+.activity-schedule-calendar__legend {
+  display: flex;
+  margin: 12px 4px 16px;
+  align-items: center;
+  justify-content: space-around;
+  color: #78869a;
+  font-size: 11px;
+}
+
+.activity-schedule-calendar__legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.activity-schedule-calendar__legend i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__legend .is-solid { background: #1989fa; }
+.activity-schedule-calendar__legend .is-outline { border: 1px solid #1989fa; }
+.activity-schedule-calendar__legend .is-muted { background: #d8dde5; }
+
+.activity-schedule-calendar__map {
+  width: 100%;
+  height: 150px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.activity-schedule-calendar__schedule-card {
+  overflow: hidden;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 7px 20px rgba(55, 85, 126, .07);
+}
+
+.activity-schedule-calendar__schedule-title {
+  padding: 12px 14px;
+  border-bottom: 1px solid #edf1f6;
+  color: #263548;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.activity-schedule-calendar__schedule-item {
+  display: flex;
+  min-height: 70px;
+  padding: 12px 14px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #edf1f6;
+  box-sizing: border-box;
+}
+
+.activity-schedule-calendar__schedule-item:last-child { border-bottom: 0; }
+
+.activity-schedule-calendar__schedule-main {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 9px;
+}
+
+.activity-schedule-calendar__schedule-main > .van-icon {
+  margin-top: 2px;
+  color: #1989fa;
+  font-size: 18px;
+}
+
+.activity-schedule-calendar__schedule-time {
+  color: #263548;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.activity-schedule-calendar__schedule-location {
+  display: flex;
+  margin-top: 5px;
+  align-items: center;
+  gap: 4px;
+  color: #7d899a;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.activity-schedule-calendar__status {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border-radius: 5px;
+  color: #8b96a7;
+  background: #f1f4f8;
+  font-size: 11px;
+}
+
+.activity-schedule-calendar__status.is-success {
+  color: #19a965;
+  background: #eaf8f1;
+}
+
+.activity-schedule-calendar__status.is-progressing {
+  color: #ff8a00;
+  background: #fff4e6;
+}
+
+.activity-schedule-calendar__status.is-ended {
+  color: #98a2b2;
+  background: #eef1f5;
+}
+
+.activity-schedule-calendar__sign-btn {
+  display: inline-flex;
+  min-width: 42px !important;
+  height: 24px !important;
+  padding: 0 8px !important;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #1989fa !important;
+  border-radius: 5px !important;
+  color: #fff !important;
+  background-color: #1989fa !important;
+  box-shadow: none !important;
+  font-size: 11px !important;
+}
+
+.activity-schedule-calendar__empty {
+  padding: 18px 14px 22px;
+  color: #9aa5b5;
+  text-align: center;
+}
+
+.activity-schedule-calendar__empty img {
+  display: block;
+  width: 142px;
+  height: 94px;
+  margin: 0 auto 4px;
+  object-fit: contain;
+}
+
+.activity-schedule-calendar__empty-title {
+  color: #58677b;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.activity-schedule-calendar__empty-desc {
+  margin-top: 2px;
+  color: #a2adbc;
+  font-size: 11px;
+  line-height: 18px;
+}
+</style>
diff --git a/src/main/resources/static/components/plugins/h5/TableList.vue b/src/main/resources/static/components/plugins/h5/TableList.vue
index 4695055b..cc20e4a5 100644
--- a/src/main/resources/static/components/plugins/h5/TableList.vue
+++ b/src/main/resources/static/components/plugins/h5/TableList.vue
@@ -1,7 +1,9 @@
 <template>
   <van-pull-refresh class="table-list" v-model="tableRefreshing" @refresh="onRefresh">
     <div v-if="tableData.length === 0" class="empty-state">
-      <van-empty description="暂无数据"></van-empty>
+      <slot name="empty">
+        <van-empty description="暂无数据"></van-empty>
+      </slot>
     </div>
     <van-list v-if="tableData && tableData.length>0"
               v-model="tableLoading"
diff --git a/src/main/resources/views/layouts/platform_h5.html b/src/main/resources/views/layouts/platform_h5.html
index 4299bde3..b5f16e09 100644
--- a/src/main/resources/views/layouts/platform_h5.html
+++ b/src/main/resources/views/layouts/platform_h5.html
@@ -666,10 +666,10 @@
         <div id="container">${layoutContent}</div>
     </div>
 </div>
-<button type="button" class="h5-voice-menu" id="voice-menu-btn" data-platform="H5" title="语音打开菜单">
-    <i class="fa fa-microphone"></i>
-    <span class="voice-menu-text">语音</span>
-</button>
+<!--<button type="button" class="h5-voice-menu" id="voice-menu-btn" data-platform="H5" title="语音打开菜单">-->
+<!--    <i class="fa fa-microphone"></i>-->
+<!--    <span class="voice-menu-text">语音</span>-->
+<!--</button>-->
 <script nonce="${cspNonce!}">
     toggleShowBar()
 </script>
diff --git a/src/main/resources/views/platform/zhghh5/activity/culture/applyUser.html b/src/main/resources/views/platform/zhghh5/activity/culture/applyUser.html
index 5fa37652..0f631add 100644
--- a/src/main/resources/views/platform/zhghh5/activity/culture/applyUser.html
+++ b/src/main/resources/views/platform/zhghh5/activity/culture/applyUser.html
@@ -38,31 +38,31 @@ layout("/layouts/platform_h5.html"){
         overflow: hidden;
         border-radius: 10px;
         color: #fff;
-        background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
+        background-color: #247fe8;
         box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
     }
 
     .culture-activity-hero__image {
         position: absolute;
         top: 0;
-        right: 0;
-        width: 67%;
+        left: 0;
+        width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: right center;
-        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
-        mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
+        object-position: center;
     }
 
     .culture-activity-hero__copy {
         position: relative;
         z-index: 1;
         display: flex;
+        width: 64%;
         height: 100%;
         padding-left: 16px;
         flex-direction: column;
         justify-content: center;
         box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
     }
 
     .culture-activity-hero__title {
@@ -368,7 +368,7 @@ layout("/layouts/platform_h5.html"){
 
         <div class="culture-activity-content">
             <section class="culture-activity-hero">
-                <img class="culture-activity-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="文化活动插画">
+                <img class="culture-activity-hero__image" src="/assets/mobile/img/activity/hero/culture-hero-v3.png" alt="文化活动插画">
                 <div class="culture-activity-hero__copy">
                     <div class="culture-activity-hero__title">文化活动</div>
                     <div class="culture-activity-hero__subtitle">丰富生活 · 乐享校园</div>
diff --git a/src/main/resources/views/platform/zhghh5/activity/family/apply/index.html b/src/main/resources/views/platform/zhghh5/activity/family/apply/index.html
index 050ab587..e70d35cd 100644
--- a/src/main/resources/views/platform/zhghh5/activity/family/apply/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/family/apply/index.html
@@ -2,112 +2,572 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
-<style scoped>
-    .info-title {
-        font-weight: bold;
-        background-color: white;
-        padding: 13px;
-        box-shadow: 0 8px 12px #ebedf0;
-        text-align: center !important;
+<style>
+    body {
+        background-color: #f3f7fd;
     }
-    .info-container {
-        margin-bottom: 60px;
+
+    .family-activity-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
     }
-    .button {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
+
+    .family-activity-page .van-nav-bar {
+        background-color: #fff;
     }
-    .info-img {
-        display: block;
+
+    .family-activity-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
     }
-    .van-count-down {
+
+    .family-activity-page .van-nav-bar .van-icon,
+    .family-activity-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .family-activity-content {
+        padding: 12px 12px 0;
+    }
+
+    .family-activity-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        border-radius: 10px;
         color: #fff;
+        background-color: #247fe8;
+        box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
     }
-    .item-header .van-tag {
+
+    .family-activity-hero__image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: left center;
+    }
+
+    .family-activity-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        width: 64%;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
+    }
+
+    .family-activity-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
+        text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
+    }
+
+    .family-activity-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .family-activity-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .family-activity-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .family-activity-search {
+        margin: 0 0 8px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
+    }
+
+    .family-activity-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .family-activity-filter {
+        margin-bottom: 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .family-activity-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .family-activity-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .family-activity-filter .van-dropdown-menu__title {
+        color: #66758a;
+        font-size: 14px;
+    }
+
+    .family-activity-filter .van-dropdown-menu__title--active,
+    .family-activity-filter .van-dropdown-item__option--active,
+    .family-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .family-activity-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+        box-sizing: border-box;
+    }
+
+    .family-activity-list .table-list-container {
+        display: flex;
+        margin-top: 0 !important;
+        padding: 0 !important;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .family-activity-list .table-list-item {
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: hidden;
+        border: 0 !important;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .family-activity-list .table-list-item .item-header {
+        display: block !important;
+        margin: 0 !important;
+    }
+
+    .family-activity-list .table-list-item .item-actions:empty {
+        display: none;
+    }
+
+    .family-activity-card__cover,
+    .family-activity-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        background-color: #edf4fc;
+    }
+
+    .family-activity-card__cover {
+        display: block;
+        object-fit: cover;
+    }
+
+    .family-activity-card__cover-state {
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        font-size: 13px;
+    }
+
+    .family-activity-card__cover-state .van-icon {
+        font-size: 34px;
+    }
+
+    .family-activity-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
+    }
+
+    .family-activity-card__body {
+        position: relative;
+        width: 100%;
+        min-width: 0;
+        padding: 12px 38px 14px 14px;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+
+    .family-activity-card__title {
+        overflow: hidden;
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .family-activity-card__time {
+        margin-top: 4px;
+        overflow: hidden;
+        color: #98a2b2;
         font-size: 12px;
-        padding: 3px 6px;
-        border-radius: 6px;
+        line-height: 17px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .family-activity-card__meta {
+        display: flex;
+        margin-top: 10px;
+        padding-top: 9px;
+        flex-wrap: wrap;
+        gap: 6px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .family-activity-card__tag {
+        display: inline-flex;
+        padding: 3px 8px;
+        align-items: center;
+        border-radius: 4px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .family-activity-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
+    }
+
+    .family-activity-card__arrow {
+        position: absolute;
+        top: 16px;
+        right: 14px;
+        color: #b4bdca;
+        font-size: 16px;
+    }
+
+    .family-activity-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .family-activity-empty img {
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .family-activity-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .family-activity-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .family-intro-popup,
+    .family-intro-page {
+        background-color: #f3f7fd;
+    }
+
+    .family-intro-page {
+        position: relative;
+        min-height: 100vh;
+    }
+
+    .family-intro-scroll {
+        height: calc(100vh - 46px);
+        padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .family-intro-hero {
+        display: flex;
+        min-height: 82px;
+        padding: 16px;
+        align-items: center;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+        box-sizing: border-box;
+    }
+
+    .family-intro-hero__icon {
+        display: flex;
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        flex: 0 0 44px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 11px;
+        color: #2d7eea;
+        background-color: rgba(255, 255, 255, .92);
+        font-size: 25px;
+    }
+
+    .family-intro-hero__title {
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    .family-intro-hero__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .family-intro-card {
+        margin-top: 12px;
+        padding: 16px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .family-intro-card .content {
+        padding: 0 !important;
+        color: #3f4c5e !important;
+        word-break: break-word;
+    }
+
+    .family-intro-card .content div,
+    .family-intro-card .content p,
+    .family-intro-card .content span,
+    .family-intro-card .content li {
+        color: #3f4c5e !important;
+        font-size: 14px !important;
+        line-height: 1.8 !important;
+        white-space: normal !important;
+        word-break: break-word;
+    }
+
+    .family-intro-card .content h1,
+    .family-intro-card .content h2,
+    .family-intro-card .content h3,
+    .family-intro-card .content h4 {
+        margin: 16px 0 9px !important;
+        color: #1f2f43 !important;
+        font-size: 18px !important;
+        line-height: 1.5 !important;
+        font-weight: 600 !important;
+    }
+
+    .family-intro-card .content > :first-child {
+        margin-top: 0 !important;
+    }
+
+    .family-intro-card .content p {
+        margin: 0 0 8px !important;
+    }
+
+    .family-intro-card .content ul,
+    .family-intro-card .content ol {
+        margin: 8px 0 !important;
+        padding-left: 22px !important;
+    }
+
+    .family-intro-card .content img {
+        max-width: 100% !important;
+        height: auto !important;
+        margin: 8px auto !important;
+        border-radius: 8px;
+    }
+
+    .family-intro-card .content table {
+        display: block;
+        max-width: 100%;
+        overflow-x: auto;
+        border-collapse: collapse;
+    }
+
+    .family-intro-empty {
+        display: flex;
+        min-height: 180px;
+        margin-top: 12px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        row-gap: 10px;
+        border-radius: 12px;
+        color: #9aa7b8;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        font-size: 14px;
+    }
+
+    .family-intro-empty .van-icon {
+        color: #83b5f4;
+        font-size: 36px;
+    }
+
+    .family-intro-footer {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 5;
+        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+        border-top: 1px solid #edf1f6;
+        background-color: rgba(255, 255, 255, .96);
+        box-sizing: border-box;
+    }
+
+    .family-intro-footer .van-button {
+        height: 42px;
+        border: 0;
+        border-radius: 21px;
+        font-size: 15px;
+        background-color: #1989fa;
+        box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
+    }
+
+    .family-intro-footer .van-button--disabled {
+        color: #8b98aa !important;
+        background-color: #eef2f7 !important;
+        opacity: 1;
+        box-shadow: none;
+    }
+
+    .family-intro-footer .van-count-down {
+        display: inline-block;
+        margin-left: 4px;
+        color: #fff;
+        font-size: 13px;
+        vertical-align: middle;
     }
 </style>
 
-<div id="app">
-    <van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+<div id="app" v-cloak>
+    <div class="family-activity-page">
+        <van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
 
-    <van-sticky offset-top="46px">
-        <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
-            <year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
-            <van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
-                               @change="doSearch"></van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
-
-    <table-list api="/platform/family/apply/activityPageData"
-                :page_form.sync="pageForm"
-                ref="tableListRef"
-                img="cover"
-                @ready="onReady"
-    >
-        <template #header="{index,row}">
-            <div class="item-header">
-                <div class="item-title">{{ row.activityName }}</div>
-                <div>
-                    <van-tag type="primary" v-if="$moment().isBefore($moment(row.activitySignUpStartTime))">
-                        即将开始
-                    </van-tag>
-                    <van-tag type="success" v-if="$moment().isAfter($moment(row.activitySignUpStartTime)) && $moment().isBefore($moment(row.activitySignUpEndTime))">
-                        进行中
-                    </van-tag>
-                    <van-tag class="grey" v-if="$moment().isAfter($moment(row.activitySignUpEndTime))">
-                        已结束
-                    </van-tag>
+        <div class="family-activity-content">
+            <section class="family-activity-hero">
+                <img class="family-activity-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
+                <div class="family-activity-hero__copy">
+                    <div class="family-activity-hero__title">亲子活动</div>
+                    <div class="family-activity-hero__subtitle">温馨陪伴 · 快乐成长</div>
                 </div>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="family-activity-sticky">
+                    <van-search v-model="pageForm.searchKeyword" class="family-activity-search" placeholder="搜索亲子活动"
+                                shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+                    <van-dropdown-menu class="family-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
+                        <year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
+                        <van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
+                                           @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
+
+            <table-list class="family-activity-list" api="/platform/family/apply/activityPageData"
+                        :page_form.sync="pageForm" ref="tableListRef" @ready="onReady">
+        <template #empty>
+            <div class="family-activity-empty">
+                <img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动空状态插画">
+                <div class="family-activity-empty__title">暂无亲子活动</div>
+                <div class="family-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
+            </div>
+        </template>
+        <template #header="{index,row}">
+            <img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-activity-card__cover"
+                 :src="row.cover" :alt="row.activityName" @error="handleImageError(row)" @click="onView(row)">
+            <div v-else class="family-activity-card__cover-state" :class="{'is-error': hasCover(row)}" @click="onView(row)">
+                <van-icon name="photo-o"></van-icon>
+                <span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
             </div>
         </template>
         <template v-slot="{index,row}">
-            <table-column label="面向对象">{{row.activityGroupName}}</table-column>
-            <table-column label="报名时间">
-                {{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
-            </table-column>
-            <table-column label="活动时间">
-                {{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
-            </table-column>
-        </template>
-        <template #actions="{index,row}">
-            <template v-if="$moment().isBefore($moment(row.activitySignUpEndTime))">
-                <div class="action-btn" @click="onView(row)">
-                    <i class="fa fa-eye"></i>
-                    <span>查看介绍</span>
+            <div class="family-activity-card__body" @click="onView(row)">
+                <div class="family-activity-card__title">{{ row.activityName }}</div>
+                <div class="family-activity-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
+                    报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
                 </div>
-                <div class="action-btn" @click="onApply(row)">
-                    <i class="fa fa-edit"></i>
-                    <span>去报名</span>
+                <div class="family-activity-card__time" v-if="row.activityStartTime && row.activityEndTime">
+                    活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
                 </div>
-            </template>
+                <div class="family-activity-card__meta" v-if="row.activityGroupName || row.trainType">
+                    <span class="family-activity-card__tag" v-if="row.activityGroupName"><span class="family-activity-card__tag-label">面向对象</span>{{row.activityGroupName}}</span>
+                    <span class="family-activity-card__tag" v-if="row.trainType"><span class="family-activity-card__tag-label">活动类型</span>{{row.trainType}}</span>
+                </div>
+                <van-icon class="family-activity-card__arrow" name="arrow"></van-icon>
+            </div>
         </template>
     </table-list>
+        </div>
+    </div>
 
-    <van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
-
-        <div class="info-container">
-            <div>
-                <van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
-                <div class="info-title">{{infoRow.activityName}}</div>
-                <pdf-preview :content="infoRow.introduce"></pdf-preview>
+    <van-popup class="family-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
+        <div class="family-intro-page">
+            <van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
+            <div class="family-intro-scroll">
+                <div class="family-intro-hero">
+                    <div class="family-intro-hero__icon"><van-icon name="description"></van-icon></div>
+                    <div>
+                        <div class="family-intro-hero__title">亲子活动报名须知</div>
+                        <div class="family-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
+                    </div>
+                </div>
+                <div class="family-intro-card" v-if="infoRow.introduce">
+                    <pdf-preview :content="infoRow.introduce"></pdf-preview>
+                </div>
+                <div v-else class="family-intro-empty">
+                    <van-icon name="description"></van-icon>
+                    <span>暂无活动介绍</span>
+                </div>
             </div>
-            <div class="button">
-                <van-button @click="onApply(infoRow)" type="primary" block>
-                    <span v-if="time >= 0">
-                        去报名
-                    </span>
-                    <template v-else>
-                        距离开始
-                        <van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
-                    </template>
+            <div class="family-intro-footer">
+                <van-button v-if="canApply(infoRow)" @click="onApply(infoRow)" type="primary" block round>进入报名</van-button>
+                <van-button v-else-if="time < 0" @click="onApply(infoRow)" type="primary" block round>
+                    距离开始
+                    <van-count-down :time="Math.abs(time)" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
                 </van-button>
+                <van-button v-else disabled block round>{{ registrationStatusText(infoRow) }}</van-button>
             </div>
         </div>
-    </van-action-sheet>
+    </van-popup>
 
 </div>
 
@@ -136,17 +596,48 @@ layout("/layouts/platform_h5.html"){
                 ],
                 infoVisible: false,
                 infoRow: {},
+                imageLoadErrors: {},
+                filterOpened: false,
 
                 id: GetQueryString('id')
             }
         },
         methods: {
+            hasCover(row) {
+                return !!(row && row.cover && String(row.cover).trim())
+            },
+            handleImageError(row) {
+                this.$set(this.imageLoadErrors, row.id, true)
+            },
+            isRegistrationClosed(row) {
+                return !!(row && row.activitySignUpEndTime && !this.$moment().isBefore(this.$moment(row.activitySignUpEndTime)))
+            },
+            canApply(row) {
+                if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
+                    return false
+                }
+                const now = Date.now()
+                return now >= this.$moment(row.activitySignUpStartTime).valueOf()
+                    && now <= this.$moment(row.activitySignUpEndTime).valueOf()
+            },
+            registrationStatusText(row) {
+                if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
+                    return '当前不可报名'
+                }
+                if(Date.now() < this.$moment(row.activitySignUpStartTime).valueOf()) {
+                    return '报名未开始'
+                }
+                return '已过报名时间'
+            },
             onView(row) {
                 this.infoRow = row
                 this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
                 this.infoVisible = true
             },
             onApply(row) {
+                if(this.isRegistrationClosed(row)) {
+                    return
+                }
                 if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
                     this.onView(row)
                     return
diff --git a/src/main/resources/views/platform/zhghh5/activity/family/common/times.js b/src/main/resources/views/platform/zhghh5/activity/family/common/times.js
index 73d02aca..26c2565b 100644
--- a/src/main/resources/views/platform/zhghh5/activity/family/common/times.js
+++ b/src/main/resources/views/platform/zhghh5/activity/family/common/times.js
@@ -3,8 +3,9 @@ const times = {
     /*language=HTML*/
         `
             <div>
-                <van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
-                    <button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
+                <van-action-sheet class="family-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
+                    <div class="family-course-times-list">
+                    <button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item family-course-time-item">
                         <div style="display: flex; justify-content: space-between; align-items: center">
                             <div>
                                 <div class="van-action-sheet__name">
@@ -21,6 +22,7 @@ const times = {
                             </div>
                         </div>
                     </button>
+                    </div>
                 </van-action-sheet>
 
                 <van-popup round :safe-area-inset-bottom="true" 
@@ -84,6 +86,84 @@ const times = {
         },
     },
     style: /*language=CSS*/ `
-       
+        .family-course-times-sheet {
+            overflow: hidden;
+            border-radius: 16px 16px 0 0;
+            background-color: #f3f7fd;
+        }
+
+        .family-course-times-sheet /deep/ .van-action-sheet__header {
+            height: 48px;
+            color: #1f2f43;
+            background-color: #fff;
+            font-size: 16px;
+            line-height: 48px;
+        }
+
+        .family-course-times-sheet /deep/ .van-action-sheet__close {
+            top: 13px;
+            color: #b5bdc9;
+            font-size: 20px;
+        }
+
+        .family-course-times-list {
+            height: calc(100% - 98px);
+            padding: 10px 12px 0;
+            overflow-y: auto;
+            box-sizing: border-box;
+        }
+
+        .family-course-times-sheet /deep/ .family-course-time-item {
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 14px;
+            border-radius: 10px;
+            color: #263548;
+            background-color: #fff;
+            box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
+            box-sizing: border-box;
+        }
+
+        .family-course-times-sheet /deep/ .van-action-sheet__name {
+            color: #263548;
+            font-size: 14px;
+            line-height: 21px;
+            text-align: left;
+        }
+
+        .family-course-times-sheet /deep/ .van-action-sheet__subname {
+            margin-top: 5px;
+            color: #98a2b2;
+            font-size: 12px;
+            line-height: 18px;
+            text-align: left;
+        }
+
+        .family-course-times-sheet /deep/ .sign_button .van-button {
+            min-width: 48px;
+            height: 28px;
+            padding: 0 12px;
+            border: 0;
+            border-radius: 14px;
+            color: #fff;
+            background-color: #1989fa;
+            font-size: 12px;
+            line-height: 28px;
+            box-shadow: 0 4px 10px rgba(25, 137, 250, .18);
+        }
+
+        .family-course-times-sheet /deep/ .sign_button .van-button--disabled {
+            color: #8b98aa;
+            background-color: #eef2f7;
+            opacity: 1;
+            box-shadow: none;
+        }
+
+        .family-course-times-sheet /deep/ .van-action-sheet__cancel {
+            height: 50px;
+            color: #66758a;
+            background-color: #fff;
+            font-size: 14px;
+        }
     `
 }
diff --git a/src/main/resources/views/platform/zhghh5/activity/family/list/applyForm.js b/src/main/resources/views/platform/zhghh5/activity/family/list/applyForm.js
index 3ffb94a4..1d9d9fae 100644
--- a/src/main/resources/views/platform/zhghh5/activity/family/list/applyForm.js
+++ b/src/main/resources/views/platform/zhghh5/activity/family/list/applyForm.js
@@ -3,7 +3,7 @@ const applyForm = {
     /*language=HTML*/
         `
             <div>
-                <van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
+                <van-action-sheet class="family-course-form-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="报名信息" v-model="visible">
                     <van-form ref="formRef" class="form-container">
                         <van-cell-group title="活动信息" class="form-section">
                             <van-field label="活动名称" readonly v-model="row.courseName"></van-field>
@@ -39,16 +39,20 @@ const applyForm = {
 
                         <van-cell-group class="form-section">
                             <template #title>
-                                <div style="display: flex; align-items: center; justify-content: space-between">
+                                <div class="family-member-section-title">
                                     <div>{{activity.keyWord}}信息</div>
-                                    <div>
-                                        <van-tag @click="delFamily" size="large" type="primary" color="#ff3b30">删除{{activity.keyWord}}</van-tag>
-                                        <van-tag @click="addFamily" size="large" type="primary" color="#1867b0">添加{{activity.keyWord}}</van-tag>
+                                    <div class="family-member-actions">
+                                        <button type="button" class="family-member-action family-member-action--delete" :aria-label="'删除' + activity.keyWord" @click="delFamily">
+                                            <van-icon name="delete-o"></van-icon>
+                                        </button>
+                                        <button type="button" class="family-member-action family-member-action--add" :aria-label="'添加' + activity.keyWord" @click="addFamily">
+                                            <van-icon name="plus"></van-icon>
+                                        </button>
                                     </div>
                                 </div>
                             </template>
                             <div v-if="formData.mobileColumnsValue && formData.mobileColumnsValue.length > 0" class="mt10">
-                                <van-tabs v-model="familyActive" type="card" color="#0e78c5" animated>
+                                <van-tabs v-model="familyActive" color="#1989fa" title-active-color="#1989fa" animated>
                                     <van-tab v-for="item, index in formData.mobileColumnsValue"
                                              :name="index + ''"
                                              :title="activity.keyWord + (index + 1)"
@@ -328,16 +332,117 @@ const applyForm = {
         },
     },
     style: /*language=CSS*/ `
+        .family-course-form-sheet {
+            overflow: hidden;
+            border-radius: 16px 16px 0 0;
+            background-color: #f3f7fd;
+        }
+
+        .family-course-form-sheet /deep/ .van-action-sheet__header {
+            height: 48px;
+            color: #1f2f43;
+            background-color: #fff;
+            font-size: 16px;
+            line-height: 48px;
+        }
+
+        .family-course-form-sheet /deep/ .van-action-sheet__close {
+            top: 13px;
+            color: #b5bdc9;
+            font-size: 20px;
+        }
+
+        .family-course-form-sheet /deep/ .form-container {
+            height: calc(100% - 48px);
+            padding: 10px 12px 72px;
+            overflow-y: auto;
+            background-color: #f3f7fd;
+            box-sizing: border-box;
+        }
+
+        .family-course-form-sheet /deep/ .form-section {
+            margin-bottom: 10px;
+            overflow: hidden;
+            border-radius: 10px;
+            background-color: #fff;
+            box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
+        }
+
+        .family-course-form-sheet /deep/ .van-cell-group__title {
+            padding: 12px 14px 8px;
+            color: #263548;
+            background-color: #fff;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 600;
+        }
+
+        .family-course-form-sheet /deep/ .van-cell-group__title::before {
+            display: none;
+        }
+
+        .family-course-form-sheet /deep/ .van-cell {
+            padding: 11px 14px;
+            color: #263548;
+            background-color: #fff;
+            font-size: 13px;
+        }
+
+        .family-course-form-sheet /deep/ .van-field__label {
+            color: #66758a;
+            font-size: 13px;
+        }
+
+        .family-course-form-sheet /deep/ .van-field__control {
+            color: #263548;
+            font-size: 13px;
+        }
+
+        .family-course-form-sheet /deep/ .van-tabs__nav--card {
+            overflow: hidden;
+            border: 0;
+            border-radius: 16px;
+            background-color: #eef3f9;
+        }
+
+        .family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab {
+            border-right: 0;
+            color: #66758a;
+        }
+
+        .family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab--active {
+            color: #1989fa;
+            background-color: #e7f2ff;
+        }
+
         /deep/ .companionList_empty_text {
             text-align: center;
             padding: 10px 0;
             font-size: 14px;
             color: grey;
         }
-        /deep/ .button {
-            position: fixed;
+
+        .family-course-form-sheet /deep/ .button {
+            position: absolute;
+            right: 0;
             bottom: 0;
-            width: 100%;
+            left: 0;
+            z-index: 2;
+            width: auto;
+            padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+            border-top: 1px solid #edf1f6;
+            background-color: rgba(255, 255, 255, .96);
+            box-sizing: border-box;
+        }
+
+        .family-course-form-sheet /deep/ .button .van-button {
+            height: 42px;
+            border: 0;
+            border-radius: 21px;
+            color: #fff;
+            background-color: #1989fa;
+            font-size: 15px;
+            box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
         }
     `
 }
diff --git a/src/main/resources/views/platform/zhghh5/activity/family/list/index.html b/src/main/resources/views/platform/zhghh5/activity/family/list/index.html
index d1653e73..51ae9c1f 100644
--- a/src/main/resources/views/platform/zhghh5/activity/family/list/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/family/list/index.html
@@ -2,88 +2,912 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
-<style scoped>
-    .primary-color {
-        color: var(--color-primary);
+<style>
+    body {
+        background-color: #f3f7fd;
     }
-    .sign_button .van-button{
-        width: 66px;
-        height: 30px;
+
+    .family-course-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .family-course-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .family-course-page .van-nav-bar .van-icon,
+    .family-course-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .family-course-summary {
+        display: flex;
+        min-height: 82px;
+        margin: 12px 12px 0;
+        padding: 16px;
+        align-items: center;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+        box-sizing: border-box;
+    }
+
+    .family-course-summary__icon {
+        display: flex;
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        flex: 0 0 44px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 11px;
+        color: #2d7eea;
+        background-color: rgba(255, 255, 255, .92);
+        font-size: 25px;
+    }
+
+    .family-course-summary__body {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .family-course-summary__title {
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    .family-course-summary__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .family-course-sticky {
+        padding: 10px 0 8px;
+        background-color: #f3f7fd;
+    }
+
+    .family-course-search {
+        margin: 0 12px;
+        padding: 0;
+        background: transparent;
+    }
+
+    .family-course-search .van-search__content {
+        height: 42px;
+        padding-left: 13px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(55, 85, 126, .07);
+    }
+
+    .family-course-filter {
+        padding: 10px 12px 0;
+    }
+
+    .family-course-filter .van-dropdown-menu {
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .family-course-filter.is-open .van-dropdown-menu {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .family-course-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .family-course-filter .van-dropdown-menu__title {
+        color: #66758a;
+        font-size: 13px;
+    }
+
+    .family-course-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+        box-sizing: border-box;
+    }
+
+    .family-course-list-head {
+        display: flex;
+        width: 100%;
+        margin-top: 14px;
+        padding: 0 12px;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+    }
+
+    .family-course-list-head__count {
+        color: #8d9aad;
+        font-size: 12px;
+    }
+
+    .family-course-view-toggle {
+        display: inline-flex;
+        height: 28px;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 14px;
+        color: #397de0;
+        background-color: #eaf3ff;
+        font-size: 12px;
+        line-height: 28px;
+    }
+
+    .family-course-view-toggle i {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
+    .family-course-page .table-list-container {
+        margin-top: 0;
+        padding: 0 12px;
+    }
+
+    .family-course-page .table-list-container .table-list-item {
+        margin-bottom: 12px;
+        padding: 16px;
+        overflow: hidden;
+        border: 0;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .family-course-page .table-list-container .table-list-item > div:nth-child(2) {
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
+    .family-course-page .table-list-container .table-list-item .item-header {
+        margin-bottom: 8px;
+        padding-bottom: 0;
+        align-items: center;
+        border-bottom: 0;
+    }
+
+    .family-course-page .table-list-container .table-list-item .item-title {
+        color: #23344a;
+        font-size: 16px;
+        line-height: 23px;
+        font-weight: 600;
+    }
+
+    .family-course-card__heading {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .family-course-card__title-row {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .family-course-card__location {
+        display: flex;
+        margin-top: 5px;
+        align-items: center;
+        color: #78879a;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .family-course-card__location .van-icon {
+        margin-right: 5px;
         font-size: 14px;
-        border-radius: 6px;
     }
-    .sign-success .label{
-        color: #0e9558;
+
+    .family-course-card__tags {
+        display: flex;
+        width: 100%;
+        margin-bottom: 8px;
+        flex-wrap: wrap;
+        gap: 6px;
+        box-sizing: border-box;
     }
-    .sign-success .value{
-        color: #0e9558;
+
+    .family-course-card__body {
+        width: 100%;
+        min-width: 0;
+        flex: 0 0 100%;
+    }
+
+    .family-course-card__tag {
+        display: inline-flex;
+        min-height: 24px;
+        padding: 3px 8px;
+        align-items: center;
+        border-radius: 5px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 12px;
+        line-height: 18px;
+        box-sizing: border-box;
+    }
+
+    .family-course-card__tag-label {
+        margin-right: 4px;
+        color: #7f9fc9;
+    }
+
+    .family-course-card__tag.is-success {
+        color: #168b56;
+        background-color: #eaf8f1;
+    }
+
+    .family-course-page .table-list-container .table-list-item .family-course-card__body > .family-course-card__details {
+        display: grid !important;
+        width: 100% !important;
+        max-width: 100%;
+        margin-top: 10px;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
+        flex: 0 0 100% !important;
+        align-items: stretch;
+        box-sizing: border-box;
+    }
+
+    .family-course-page .table-list-container .table-list-item .family-course-card__details > .family-course-card__detail {
+        width: auto !important;
+        max-width: none !important;
+        min-width: 0;
+        flex: none !important;
+    }
+
+    .family-course-card__detail {
+        display: flex;
+        min-width: 0;
+        padding: 2px 10px;
+        align-items: center;
+        gap: 7px;
+        box-sizing: border-box;
+    }
+
+    .family-course-card__detail:first-child {
+        padding-left: 0;
+    }
+
+    .family-course-card__detail + .family-course-card__detail {
+        border-left: 1px solid #edf1f6;
+    }
+
+    .family-course-card__detail > .van-icon {
+        flex: 0 0 auto;
+        font-size: 18px;
+    }
+
+    .family-course-card__detail-copy {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .family-course-card__detail-label {
+        color: #7b899b;
+        font-size: 11px;
+        line-height: 16px;
+        white-space: nowrap;
+    }
+
+    .family-course-card__detail-value {
+        margin-top: 2px;
+        overflow: hidden;
+        color: #33445a;
+        font-size: 12px;
+        line-height: 17px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .family-course-card__links {
+        padding-right: 0;
+        align-items: stretch;
+        justify-content: center;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .family-course-card__link {
+        display: grid;
+        min-width: 0;
+        grid-template-columns: 15px auto minmax(0, 1fr);
+        align-items: center;
+        column-gap: 5px;
+        color: #66758a;
+        font-size: 11px;
+        line-height: 17px;
+    }
+
+    .family-course-card__link-value {
+        overflow: hidden;
+        color: #397de0;
+        text-align: right;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .family-course-quota-group {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .family-course-quota {
+        display: inline-flex;
+        min-height: 26px;
+        padding: 3px 9px;
+        align-items: center;
+        border-radius: 13px;
+        color: #e15b5b;
+        background-color: #fff0f0;
+        font-size: 12px;
+        line-height: 18px;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .family-course-quota.is-waiting {
+        color: #d9822b;
+        background-color: #fff6e8;
+    }
+
+    .family-course-quota.is-unlimited {
+        color: #397de0;
+        background-color: #edf5ff;
+    }
+
+    .family-course-page .table-list-container .table-list-item .item-actions {
+        margin: 14px -16px -16px;
+        padding: 12px 16px;
+        align-items: center;
+        border-top: 1px solid #edf1f6;
+        background-color: #f8fbff;
+    }
+
+    .family-course-page .table-list-container .table-list-item .action-btn {
+        min-height: 32px;
+        padding: 0 14px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        font-size: 13px;
+        box-sizing: border-box;
+    }
+
+    .family-course-page .table-list-container .table-list-item .family-course-apply,
+    .family-course-page .table-list-container .table-list-item .family-course-sign {
+        color: #fff;
+        background-color: #1989fa;
+        box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
+    }
+
+    .family-course-page .table-list-container .table-list-item .family-course-qr {
+        color: #fff;
+        background-color: #07c160;
+        box-shadow: 0 5px 12px rgba(7, 193, 96, .18);
+    }
+
+    .family-course-page .table-list-container .table-list-item .family-course-cancel {
+        color: #fff !important;
+        background-color: #e84d4f !important;
+        box-shadow: 0 5px 12px rgba(221, 99, 99, .16);
+    }
+
+    .family-course-page .family-course-card-mode .table-list-item .family-course-apply,
+    .family-course-page .family-course-card-mode .table-list-item .family-course-cancel {
+        width: 108px;
+        height: 32px;
+        min-height: 32px;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .family-course-page .family-course-card-mode .table-list-item .family-course-apply span,
+    .family-course-page .family-course-card-mode .table-list-item .family-course-cancel span {
+        white-space: nowrap;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-container {
+        margin: 0 12px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item {
+        display: flex;
+        min-height: 68px;
+        margin: 0;
+        padding: 12px 14px;
+        align-items: center;
+        gap: 12px;
+        border-bottom: 1px solid #edf1f6;
+        border-radius: 0;
+        box-shadow: none;
+        box-sizing: border-box;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item:last-child {
+        border-bottom: 0;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item > div:nth-child(2) {
+        display: none !important;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .item-header {
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        flex: 1;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .item-actions {
+        margin: 0 0 0 auto;
+        padding: 0;
+        flex: 0 0 auto;
+        gap: 8px;
+        border-top: 0;
+        background-color: #fff;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .action-btn {
+        min-height: 28px;
+        padding: 0 10px;
+        border-radius: 14px;
+        font-size: 12px;
+        box-shadow: none;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .action-btn i {
+        margin-right: 4px;
+        font-size: 13px;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .family-course-apply,
+    .family-course-page .family-course-list-mode .table-list-item .family-course-sign {
+        color: #397de0;
+        background-color: #edf5ff;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .family-course-qr {
+        color: #159957;
+        background-color: #eaf8f1;
+    }
+
+    .family-course-page .family-course-list-mode .table-list-item .family-course-cancel {
+        color: #df5b59 !important;
+        background-color: #fff1f0 !important;
+    }
+
+    .family-course-empty {
+        display: flex;
+        min-height: 300px;
+        padding: 28px 18px;
+        align-items: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .family-course-empty img {
+        width: 82%;
+        max-width: 300px;
+        height: auto;
+    }
+
+    .family-course-empty__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .family-course-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .primary-color {
+        color: #1989fa;
+    }
+
+    .family-course-introduce-sheet {
+        overflow: hidden;
+        border-radius: 16px 16px 0 0;
+        background-color: #f3f7fd;
+    }
+
+    .family-course-introduce-sheet .van-action-sheet__header {
+        height: 48px;
+        color: #1f2f43;
+        background-color: #fff;
+        font-size: 16px;
+        line-height: 48px;
+    }
+
+    .family-course-introduce-content {
+        position: absolute;
+        top: 58px;
+        right: 12px;
+        bottom: 60px;
+        left: 12px;
+        padding: 16px;
+        overflow-y: auto;
+        border-radius: 10px;
+        color: #3f4c5e;
+        background-color: #fff;
+        box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
+        font-size: 14px;
+        line-height: 1.8;
+        box-sizing: border-box;
+    }
+
+    .family-course-introduce-sheet .van-action-sheet__cancel {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 50px;
+        margin: 0;
+        color: #66758a;
+        background-color: #fff;
+        text-align: center;
+    }
+
+    .family-course-form-sheet,
+    .family-course-times-sheet,
+    .family-course-introduce-sheet {
+        overflow: hidden !important;
+        border-radius: 16px 16px 0 0 !important;
+        background-color: #f3f7fd !important;
+    }
+
+    .family-course-form-sheet .van-action-sheet__header,
+    .family-course-times-sheet .van-action-sheet__header,
+    .family-course-introduce-sheet .van-action-sheet__header {
+        height: 48px;
+        color: #1f2f43;
+        background-color: #fff;
+        font-size: 16px;
+        line-height: 48px;
+    }
+
+    .family-course-form-sheet .van-action-sheet__close,
+    .family-course-times-sheet .van-action-sheet__close,
+    .family-course-introduce-sheet .van-action-sheet__close {
+        top: 0;
+        right: 16px;
+        display: flex;
+        height: 48px;
+        align-items: center;
+        color: #b5bdc9;
+        font-size: 20px;
+    }
+
+    .family-course-times-sheet .family-course-times-list {
+        height: calc(100% - 98px);
+        padding: 10px 12px 0;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .family-course-times-sheet .family-course-time-item {
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 14px;
+        border-radius: 10px;
+        color: #263548;
+        background-color: #fff;
+        box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
+        box-sizing: border-box;
+    }
+
+    .family-course-times-sheet .family-course-time-item::before {
+        display: none;
+    }
+
+    .family-course-times-sheet .van-action-sheet__name {
+        color: #263548;
+        font-size: 14px;
+        line-height: 21px;
+        text-align: left;
+    }
+
+    .family-course-times-sheet .van-action-sheet__subname {
+        margin-top: 5px;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 18px;
+        text-align: left;
+    }
+
+    .family-course-times-sheet .sign_button .van-button {
+        min-width: 48px;
+        height: 28px;
+        padding: 0 12px;
+        border: 0;
+        border-radius: 14px;
+        color: #fff;
+        background-color: #1989fa;
+        font-size: 12px;
+        line-height: 28px;
+        box-shadow: 0 4px 10px rgba(25, 137, 250, .18);
+    }
+
+    .family-course-times-sheet .sign_button .van-button--disabled {
+        color: #8b98aa;
+        background-color: #eef2f7;
+        opacity: 1;
+        box-shadow: none;
+    }
+
+    .family-course-times-sheet .van-action-sheet__cancel,
+    .family-course-introduce-sheet .van-action-sheet__cancel {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 50px;
+        margin: 0;
+        color: #66758a;
+        background-color: #fff;
+        text-align: center;
+    }
+
+    .family-course-form-sheet .form-container {
+        height: calc(100% - 48px) !important;
+        padding: 10px 12px 72px !important;
+        overflow-y: auto;
+        background-color: #f3f7fd !important;
+        box-sizing: border-box;
+    }
+
+    .family-course-form-sheet .form-section {
+        margin-bottom: 10px !important;
+        overflow: hidden;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
+    }
+
+    .family-course-form-sheet .van-cell-group__title {
+        padding: 12px 14px 8px !important;
+        color: #263548 !important;
+        background-color: #fff;
+        font-size: 14px !important;
+        line-height: 20px;
+        font-weight: 600;
+    }
+
+    .family-course-form-sheet .van-cell-group__title::before {
+        display: none !important;
+    }
+
+    .family-course-form-sheet .van-cell {
+        padding: 11px 14px !important;
+        color: #263548;
+        background-color: #fff;
+        font-size: 13px;
+    }
+
+    .family-course-form-sheet .van-cell::after {
+        right: 14px;
+        left: 14px;
+        border-color: #edf1f6;
+    }
+
+    .family-course-form-sheet .van-field__label {
+        color: #66758a;
+        font-size: 13px;
+    }
+
+    .family-course-form-sheet .van-field__control {
+        color: #263548;
+        font-size: 13px;
+    }
+
+    .family-course-form-sheet .family-member-section-title {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .family-course-form-sheet .family-member-actions {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .family-course-form-sheet .family-member-action {
+        display: inline-flex;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 0;
+        outline: none;
+        background-color: transparent;
+        font-size: 19px;
+        line-height: 28px;
+        appearance: none;
+        box-sizing: border-box;
+    }
+
+    .family-course-form-sheet .family-member-action--delete {
+        color: #df5b59 !important;
+    }
+
+    .family-course-form-sheet .family-member-action--add {
+        color: #397de0 !important;
+    }
+
+    .family-course-form-sheet .companionList_empty_text {
+        padding: 12px 0;
+        color: #98a2b2;
+        font-size: 13px;
+        text-align: center;
+    }
+
+    .family-course-form-sheet .button {
+        position: absolute !important;
+        right: 0;
+        bottom: 0 !important;
+        left: 0;
+        z-index: 3;
+        width: auto !important;
+        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+        border-top: 1px solid #edf1f6;
+        background-color: rgba(255, 255, 255, .96);
+        box-sizing: border-box;
+    }
+
+    .family-course-form-sheet .button .van-button {
+        width: 100%;
+        height: 42px;
+        border: 0;
+        border-radius: 21px;
+        color: #fff;
+        background-color: #1989fa;
+        font-size: 15px;
+        box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
     }
 </style>
 
-<div id="app">
+<div id="app" v-cloak>
+    <div class="family-course-page">
     <van-nav-bar title="活动报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
 
+    <div class="family-course-summary">
+        <div class="family-course-summary__icon"><van-icon name="friends-o"></van-icon></div>
+        <div class="family-course-summary__body">
+            <div class="family-course-summary__title">亲子活动项目</div>
+            <div class="family-course-summary__subtitle">选择适合的项目，共享亲子时光</div>
+        </div>
+    </div>
+
     <van-sticky offset-top="46px">
-        <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
-            <van-dropdown-item v-model="pageForm.courseTypeId" :options="typeOptions" :multiple="false"
-                               @change="doSearch"></van-dropdown-item>
-        </van-dropdown-menu>
+        <div class="family-course-sticky">
+            <van-search v-model="pageForm.searchKeyword" class="family-course-search" placeholder="搜索项目名称"
+                        shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+            <div class="family-course-filter" :class="{'is-open': filterOpened}">
+                <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false" active-color="#1989fa">
+                    <van-dropdown-item v-model="pageForm.courseTypeId" :options="typeOptions" :multiple="false"
+                                       @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                    <van-dropdown-item v-model="activeAssort" :options="assortOptions" :multiple="false"
+                                       @change="onAssortChange" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                </van-dropdown-menu>
+            </div>
+            <div class="family-course-list-head">
+                <button type="button" class="family-course-view-toggle" @click="toggleViewMode">
+                    <i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
+                    <span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
+                </button>
+                <div class="family-course-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
+            </div>
+        </div>
     </van-sticky>
 
-    <van-tabs v-if="assortList.length > 0" type="card" color="#1867B0"
-              style="margin-top: 10px" @click="tabClick">
-        <van-tab v-for="item,index in assortList" :name="item" :title="item" :key="index">
-        </van-tab>
-    </van-tabs>
-
+    <div :class="{'family-course-list-mode': viewMode === 'list', 'family-course-card-mode': viewMode === 'card'}">
     <table-list api="/platform/family/apply/pageData"
                 :page_form.sync="pageForm"
                 ref="tableListRef"
                 @ready="onReady"
     >
+        <template #empty>
+            <div class="family-course-empty">
+                <img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动项目空状态插画">
+                <div class="family-course-empty__title">暂无亲子活动项目</div>
+                <div class="family-course-empty__hint">当前筛选条件下暂时没有可报名项目</div>
+            </div>
+        </template>
         <template #header="{index,row}">
             <div class="item-header">
-                <div class="item-title">{{ row.courseName }}</div>
-                <div v-html="calcSignUpCount(row)"></div>
+                <div class="family-course-card__heading">
+                    <div class="family-course-card__title-row">
+                        <div class="item-title">{{ row.courseName }}</div>
+                        <div v-if="viewMode === 'card'" v-html="calcSignUpCount(row)"></div>
+                    </div>
+                    <div class="family-course-card__location" v-if="viewMode === 'card' && row.courseLocation">
+                        <van-icon name="location-o"></van-icon><span>{{ row.courseLocation }}</span>
+                    </div>
+                </div>
             </div>
         </template>
         <template v-slot="{index,row}">
-            <table-column label="类型">{{row.typeName}}</table-column>
-            <table-column label="校区">{{row.campus}}</table-column>
-            <table-column label="地点">{{row.courseLocation}}</table-column>
-            <table-column label="联系人">{{row.courseInstructor}}</table-column>
-            <table-column label="时间">
-                <span v-if="row.courseTimes && row.courseTimes.length === 1" class="primary-color" @click="onTime(row)">
-                      {{ weekdayCNMap[$moment(row.courseTimes[0].courseDate).day()]
-                    + ' '
-                    + $moment(row.courseTimes[0].courseStartTime).format('MM月DD日 HH:mm')
-                    + '~'
-                    + $moment(row.courseTimes[0].courseEndTime).format('HH:mm') }}
-                </span>
-                <span v-else @click="onTime(row)" class="primary-color">点我查看</span>
-            </table-column>
-            <table-column v-if="row.introduce?.trim()" label="详细信息">
-                <span @click="introduceRow = row; introduceVisible = true" class="primary-color">点我查看</span>
-            </table-column>
-            <table-column label="报名成功" v-if="row.signValue" class="sign-success">{{row.signValue}}</table-column>
+            <div v-if="viewMode === 'card'" class="family-course-card__body">
+                <div class="family-course-card__tags" v-if="row.typeName || row.campus ">
+                    <span class="family-course-card__tag" v-if="row.typeName"><span class="family-course-card__tag-label">类型</span>{{row.typeName}}</span>
+                    <span class="family-course-card__tag" v-if="row.campus"><span class="family-course-card__tag-label">校区</span>{{row.campus}}</span>
+                </div>
+                <div class="family-course-card__details">
+                    <div class="family-course-card__detail">
+                        <van-icon name="friends-o"></van-icon>
+                        <div class="family-course-card__detail-copy">
+                            <div class="family-course-card__detail-label">联系人</div>
+                            <div class="family-course-card__detail-value">{{row.courseInstructor || '暂无'}}</div>
+                        </div>
+                    </div>
+                    <div class="family-course-card__detail family-course-card__links">
+                        <div class="family-course-card__link">
+                            <van-icon name="clock-o"></van-icon><span>时间</span>
+                            <span class="family-course-card__link-value" @click="onTime(row)">点我查看</span>
+                        </div>
+                        <div class="family-course-card__link" v-if="row.introduce && row.introduce.trim()">
+                            <van-icon name="notes-o"></van-icon><span>详细信息</span>
+                            <span class="family-course-card__link-value" @click="introduceRow = row; introduceVisible = true">点我查看</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </template>
         <template #actions="{index,row}">
-            <div v-if="activity.wechat && row.isSign" class="action-btn" @click="this.vant.ImagePreview([activity.wechat])">
+            <div v-if="activity.wechat && row.isSign" class="action-btn family-course-qr" @click="this.vant.ImagePreview([activity.wechat])">
                 <i class="fa fa-wechat"></i>
                 <span>微信群二维码</span>
             </div>
             <template v-if="$moment().isBefore($moment(activity.activitySignUpEndTime))">
-                <div v-if="row.isSign === false" class="action-btn" @click="onApply(row)">
+                <div v-if="row.isSign === false" class="action-btn family-course-apply" @click="onApply(row)">
                     <i class="fa fa-sign-in"></i>
                     <span>我要报名</span>
                 </div>
-                <div v-if="row.isSign === true" class="action-btn delete" @click="onCancel(row)">
+                <div v-if="row.isSign === true" class="action-btn delete family-course-cancel" @click="onCancel(row)">
                     <i class="fa fa-trash"></i>
                     <span>取消报名</span>
                 </div>
             </template>
             <div v-if="row.isSign === true && row.isMobileSign === true && $moment().isAfter($moment(activity.activitySignUpEndTime))"
-                 class="action-btn"
+                 class="action-btn family-course-sign"
                  @click="onTime(row)"
             >
                 <i class="fa fa-sign-in"></i>
@@ -91,24 +915,25 @@ layout("/layouts/platform_h5.html"){
             </div>
         </template>
     </table-list>
+    </div>
+    </div>
 
-    <van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="introduceVisible" cancel-text="取消">
-        <pdf-preview :content="introduceRow.introduce"></pdf-preview>
+    <van-action-sheet class="family-course-introduce-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="课程介绍" v-model="introduceVisible" cancel-text="取消">
+        <div class="family-course-introduce-content"><pdf-preview :content="introduceRow.introduce"></pdf-preview></div>
     </van-action-sheet>
 
-    <times ref="timesRef"></times>
+    <times ref="timesRef" module-type="family"></times>
     <apply-form ref="formRef" @refresh="refresh"></apply-form>
 </div>
 
 <script src="${base!}/assets/platform/plugins/jr-qrcode/jr-qrcode.js"></script>
 <script nonce="${cspNonce!}">
-    <!--#include('../common/times.js'){}#-->
     <!--#include('applyForm.js'){}#-->
     const vue = new Vue({
         el: "#app",
         store,
         components: {
-            'times': times,
+            'times': httpVueLoader("/components/module/activity/ActivityScheduleCalendar.vue?v=" + new Date().getTime()),
             'apply-form': applyForm,
             "pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
         },
@@ -132,16 +957,19 @@ layout("/layouts/platform_h5.html"){
 
                 introduceRow: {},
                 activity: {},
-                assortList: [],
+                activeAssort: null,
+                filterOpened: false,
+                viewMode: 'card',
 
                 weekdayCNMap: {0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六'},
             }
         },
         methods: {
-            tabClick(name) {
-                this.pageForm.assortTypes = []
-                this.pageForm.assortTypes.push(name)
-                this.pageForm.assortTypes = JSON.stringify(this.pageForm.assortTypes)
+            toggleViewMode() {
+                this.viewMode = this.viewMode === 'card' ? 'list' : 'card'
+            },
+            onAssortChange(name) {
+                this.pageForm.assortTypes = name ? JSON.stringify([name]) : []
                 this.doSearch()
             },
             refresh() {
@@ -200,15 +1028,17 @@ layout("/layouts/platform_h5.html"){
             },
             calcSignUpCount(row) {
                 if(!row.coursePeopleNumber || row.coursePeopleNumber === 0) {
-                    return "名额数不限制"
+                    return "<div class='family-course-quota-group'><span class='family-course-quota is-unlimited'>名额不限</span></div>"
                 }
                 let lave = row.coursePeopleNumber - (row.hasRegisterNum + row.courseReservedNumber)
                 if(row.reserveMode === 2) {
                     let lave2 = row.waitingNum - row.hasWaitingNum
-                    return "<span style='color: red'>余" + lave +"</span>/" + row.coursePeopleNumber + "人"
-                        + "，<span style='color: red'>候补余" + lave2 + "</span>/" + row.waitingNum + "人"
+                    return "<div class='family-course-quota-group'>"
+                        + "<span class='family-course-quota'>余<strong>" + lave + "</strong>/" + row.coursePeopleNumber + "人</span>"
+                        + "<span class='family-course-quota is-waiting'>候补余<strong>" + lave2 + "</strong>/" + row.waitingNum + "人</span>"
+                        + "</div>"
                 } else {
-                    return "<span style='color: red'>余" + lave +"</span>/" + row.coursePeopleNumber + "人"
+                    return "<div class='family-course-quota-group'><span class='family-course-quota'>余<strong>" + lave + "</strong>/" + row.coursePeopleNumber + "人</span></div>"
                 }
             },
             async onReady() {
@@ -240,10 +1070,9 @@ layout("/layouts/platform_h5.html"){
             queryCourseAssort() {
                 this.$axios.post("/platform/family/apply/queryCourseAssort", {activityId: this.pageForm.activityId})
                     .then((resp) => {
-                        this.assortList = resp.data
-                        if(this.assortList.length > 0) {
-                            this.pageForm.assortTypes = JSON.stringify([this.assortList[0]])
-                        }
+                        this.assortOptions = [{text: '全部分类', value: null}].concat(
+                            resp.data.map((item) => ({text: item, value: item}))
+                        )
                     })
             },
             doSearch() {
diff --git a/src/main/resources/views/platform/zhghh5/activity/family/mine/index.html b/src/main/resources/views/platform/zhghh5/activity/family/mine/index.html
index 854e3bed..661a1e58 100644
--- a/src/main/resources/views/platform/zhghh5/activity/family/mine/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/family/mine/index.html
@@ -2,296 +2,475 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
-<style scoped>
-    .info-title {
-        font-weight: bold;
-        background-color: white;
-        padding: 13px;
-        box-shadow: 0 8px 12px #ebedf0;
-        text-align: center !important;
-    }
-    .info-container {
-
-    }
-    .button {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-    }
-    .info-img {
-        display: block;
-    }
-    .van-count-down {
-        color: #fff;
-    }
-    .table-list-container {
-        padding: 0;
-        margin-top: 10px;
+<style>
+    body {
+        background-color: #f3f7fd;
     }
 
-    .table-list-container .table-list-item {
+    .family-mine-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .family-mine-page .van-nav-bar {
         background-color: #fff;
-        border-bottom: 1px solid #eaecef;
-        padding: 16px;
-        position: relative;
-        margin-bottom: 10px;
     }
 
-    .table-list-container .table-list-item:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-    }
-
-    .table-list-container .table-list-item .item-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 10px;
-    }
-
-    .table-list-container .table-list-item .item-title {
+    .family-mine-page .van-nav-bar__title {
+        color: #1f2937;
         font-size: 16px;
-        font-weight: 500;
-        color: #1f2f3d;
+    }
+
+    .family-mine-page .van-nav-bar .van-icon,
+    .family-mine-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .family-mine-content {
+        padding: 12px 12px 0;
+    }
+
+    .family-mine-hero {
+        position: relative;
+        height: 134px;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex: 1;
-        padding-right: 10px;
+        border-radius: 10px;
+        color: #fff;
+        background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
+        box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
     }
 
-    .table-list-container .table-list-item .img-container {
-        width: 100px;
-        height: 100px;
-        flex-shrink: 0;
-        border-radius: 6px;
-    }
-
-    .table-list-container .table-list-item .img-container img {
-        width: 100%;
+    .family-mine-hero__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67%;
         height: 100%;
-        border-radius: 6px;
+        object-fit: cover;
+        object-position: right center;
+        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
+        mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
     }
 
-
-    .table-list-container .table-list-item .item-meta {
+    .family-mine-hero__copy {
+        position: relative;
+        z-index: 1;
         display: flex;
-        color: #606266;
-        font-size: 14px;
-        margin-bottom: 5px;
-        padding: 4px 0;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
     }
 
-    .table-list-container .table-list-item .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        width: 100%;
+    .family-mine-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
     }
 
-    .table-list-container .table-list-item .meta-item i {
-        font-size: 14px;
-        color: #909399;
-        width: 16px;
-        text-align: center;
+    .family-mine-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
     }
 
-    .table-list-container .table-list-item .item-content {
-        color: #606266;
-        font-size: 14px;
+    .family-mine-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .family-mine-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .family-mine-search {
+        margin-bottom: 8px;
+        padding: 0;
         overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 1.5;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
     }
 
-    .table-list-container .table-list-item .item-footer {
+    .family-mine-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .family-mine-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .family-mine-filter {
+        margin-bottom: 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .family-mine-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .family-mine-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .family-mine-filter .van-dropdown-menu__title {
+        width: auto;
+        max-width: calc(100% - 24px);
+        padding: 0 12px 0 0;
+        color: #66758a;
+        font-size: 14px;
+    }
+
+    .family-mine-filter .van-dropdown-menu__title::after {
+        right: 0;
+    }
+
+    .family-mine-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+        box-sizing: border-box;
+    }
+
+    .family-mine-list {
         display: flex;
-        justify-content: space-between;
-        margin-top: 12px;
-        padding-top: 8px;
-        border-top: 1px dashed #eaecef;
-        color: #909399;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .family-mine-card {
+        overflow: hidden;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .family-mine-card__cover,
+    .family-mine-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        background-color: #edf4fc;
+    }
+
+    .family-mine-card__cover {
+        display: block;
+        object-fit: cover;
+    }
+
+    .family-mine-card__cover-state {
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
         font-size: 13px;
     }
 
-    .table-list-container .table-list-item .item-actions {
-        display: flex;
-        column-gap: 20px;
-        justify-content: end;
-        margin-top: 15px;
-        padding-top: 12px;
-        border-top: 1px solid #eaecef;
+    .family-mine-card__cover-state .van-icon {
+        font-size: 34px;
     }
 
-    .table-list-container .table-list-item .action-btn {
-        display: flex;
-        align-items: center;
-        justify-content: end;
-        font-size: 14px;
-        color: var(--color-primary);
-        padding: 4px 0;
+    .family-mine-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
     }
 
-    .table-list-container .table-list-item .action-btn i {
-        margin-right: 6px;
-        font-size: 16px;
+    .family-mine-card__body {
+        padding: 12px 14px 14px;
     }
 
-    .table-list-container .table-list-item .action-btn.delete {
-        color: #ff0000;
-    }
-
-    .table-list-container .table-list-item .action-btn.review {
-        color: #67c23a;
-    }
-
-    .table-list-container .empty-state {
-        text-align: center;
-        padding: 60px 20px;
-        color: #909399;
-    }
-
-    .table-list-container .empty-state i {
-        font-size: 60px;
-        margin-bottom: 16px;
-        color: #dcdee0;
-    }
-
-    .table-list-container .empty-state p {
-        margin-top: 10px;
-        font-size: 14px;
-    }
-    .table-column {
-        display: flex;
-        padding: 6px 0;
-        align-items: center;
-    }
-
-    .label {
-        color: #333;
-        font-size: 14px;
-        flex-shrink: 0;
-        max-width: 120px;
-        white-space: nowrap;
+    .family-mine-card__title {
         overflow: hidden;
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    .value {
-        color: #555;
+    .family-mine-card__time {
+        margin-top: 4px;
+        overflow: hidden;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 17px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .family-mine-card__meta {
+        display: flex;
+        margin-top: 10px;
+        padding-top: 9px;
+        flex-wrap: wrap;
+        gap: 6px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .family-mine-card__tag {
+        display: inline-flex;
+        padding: 3px 8px;
+        border-radius: 4px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .family-mine-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
+    }
+
+    .family-mine-card__actions {
+        display: flex;
+        padding: 12px 14px;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10px;
+        border-top: 1px solid #edf1f6;
+        background-color: #f8fbff;
+    }
+
+    .family-mine-card__action {
+        display: inline-flex;
+        min-width: 82px;
+        height: 32px;
+        padding: 0 14px;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 16px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 13px;
+        box-sizing: border-box;
+    }
+
+    .family-mine-card__action .van-icon {
+        margin-right: 6px;
+        font-size: 15px;
+    }
+
+    .family-mine-card__action.is-primary {
+        color: #fff;
+        background-color: #1989fa;
+        box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
+    }
+
+    .family-mine-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .family-mine-empty img {
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .family-mine-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .family-mine-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .family-mine-intro-page {
+        min-height: 100vh;
+        background-color: #f3f7fd;
+    }
+
+    .family-mine-intro-scroll {
+        height: calc(100vh - 46px);
+        padding: 12px;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .family-mine-intro-hero {
+        display: flex;
+        min-height: 82px;
+        padding: 16px;
+        align-items: center;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+        box-sizing: border-box;
+    }
+
+    .family-mine-intro-hero__icon {
+        display: flex;
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 44px;
+        border-radius: 11px;
+        color: #2d7eea;
+        background-color: rgba(255, 255, 255, .92);
+        font-size: 25px;
+    }
+
+    .family-mine-intro-hero__title {
+        font-size: 17px;
+        line-height: 24px;
+    }
+
+    .family-mine-intro-hero__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .family-mine-intro-card {
+        margin-top: 12px;
+        padding: 18px 16px;
+        overflow: hidden;
+        border-radius: 12px;
+        color: #3f4c5e;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
         font-size: 14px;
-        flex-grow: 1; /* 动态占据剩余部分 */
-        white-space: nowrap; /* 防止换行 */
-        overflow: hidden; /* 隐藏溢出的部分 */
-        text-overflow: ellipsis; /* 省略号 */
+        line-height: 1.8;
+        word-break: break-word;
+    }
+
+    .family-mine-intro-card img {
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 8px;
     }
 </style>
 
-<div id="app">
-    <van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+<div id="app" v-cloak>
+    <div class="family-mine-page">
+        <van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
 
-    <van-sticky offset-top="46px">
-        <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
-            <year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
-            <van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
-                               @change="doSearch"></van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
-
-    <table-list api="/platform/family/apply/activityPageData"
-                :page_form.sync="pageForm"
-                ref="tableListRef"
-                title="activityName"
-                img="cover"
-                @ready="onReady"
-    >
-        <template v-slot="{index,row}">
-            <table-column label="面向对象">{{row.activityGroupName}}</table-column>
-            <table-column label="报名时间">
-                {{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
-            </table-column>
-            <table-column label="活动时间">
-                {{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
-            </table-column>
-        </template>
-        <template #actions="{index,row}">
-            <div class="action-btn" @click="onView(row)">
-                <i class="fa fa-eye"></i>
-                <span>活动介绍</span>
-            </div>
-            <div class="action-btn" @click="onInfo(row)">
-                <i class="fa fa-eye"></i>
-                <span>{{row.keyWord}}信息</span>
-            </div>
-            <div class="action-btn" @click="onApply(row)">
-                <i class="fa fa-edit"></i>
-                <span>操作</span>
-            </div>
-        </template>
-    </table-list>
-
-    <van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
-
-        <div class="info-container">
-            <div>
-                <van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
-                <div class="info-title">{{infoRow.activityName}}</div>
-                <pdf-preview :content="infoRow.introduce"></pdf-preview>
-            </div>
-        </div>
-    </van-action-sheet>
-
-    <van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="courseVisible" cancel-text="取消">
-        <div class="table-list-container">
-            <div v-for="(row, index) in mineCourses" :key="index" class="table-list-item">
-                <div class="item-header">
-                    <div class="item-title" style="white-space: normal">{{ row.courseName }}</div>
+        <div class="family-mine-content">
+            <section class="family-mine-hero">
+                <img class="family-mine-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
+                <div class="family-mine-hero__copy">
+                    <div class="family-mine-hero__title">我的报名</div>
+                    <div class="family-mine-hero__subtitle">亲子活动 · 报名记录</div>
                 </div>
-                <div style="display: flex;column-gap: 10px">
-                    <div class="table-column">
-                        <div class="label">校区：</div>
-                        <div class="value">{{ row.campus }}</div>
-                    </div>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="family-mine-sticky">
+                    <van-search v-model="pageForm.searchKeyword" class="family-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+                    <van-dropdown-menu class="family-mine-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
+                        <year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
+                        <van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                    </van-dropdown-menu>
                 </div>
-                <div style="display: flex;column-gap: 10px">
-                    <div class="table-column">
-                        <div class="label">地点：</div>
-                        <div class="value">{{ row.courseLocation }}</div>
-                    </div>
-                </div>
-                <div style="display: flex;column-gap: 10px">
-                    <div class="table-column">
-                        <div class="label">联系人：</div>
-                        <div class="value">{{ row.courseInstructor }}</div>
-                    </div>
-                </div>
-                <div style="display: flex;column-gap: 10px">
-                    <div class="table-column">
-                        <div class="label">家属人数：</div>
-                        <div class="value">
-                            {{ row.mobileColumnsValue ? JSON.parse(row.mobileColumnsValue).length : '暂无' }}
+            </van-sticky>
+
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
+                    <div class="family-mine-list">
+                        <div v-for="row in tableData" :key="row.id" class="family-mine-card">
+                            <img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
+                            <div v-else class="family-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
+                                <van-icon name="photo-o"></van-icon>
+                                <span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
+                            </div>
+                            <div class="family-mine-card__body">
+                                <div class="family-mine-card__title">{{ row.activityName }}</div>
+                                <div class="family-mine-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
+                                    报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
+                                </div>
+                                <div class="family-mine-card__time" v-if="row.activityStartTime && row.activityEndTime">
+                                    活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
+                                </div>
+                                <div class="family-mine-card__meta" v-if="row.activityGroupName || row.trainType">
+                                    <span class="family-mine-card__tag" v-if="row.activityGroupName"><span class="family-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
+                                    <span class="family-mine-card__tag" v-if="row.trainType"><span class="family-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
+                                </div>
+                            </div>
+                            <div class="family-mine-card__actions">
+                                <button type="button" class="family-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
+                                <button type="button" class="family-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
+                            </div>
                         </div>
                     </div>
+                </van-list>
+                <div v-if="!loading && tableData.length === 0" class="family-mine-empty">
+                    <img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动报名空状态插画">
+                    <div class="family-mine-empty__title">暂无报名记录</div>
+                    <div class="family-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
                 </div>
-            </div>
-            <div class="item-actions"></div>
+            </van-pull-refresh>
         </div>
-    </van-action-sheet>
+    </div>
 
+    <van-popup :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
+        <div class="family-mine-intro-page">
+            <van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
+            <div class="family-mine-intro-scroll">
+                <div class="family-mine-intro-hero">
+                    <div class="family-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
+                    <div>
+                        <div class="family-mine-intro-hero__title">亲子活动报名须知</div>
+                        <div class="family-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
+                    </div>
+                </div>
+                <div v-if="infoRow.introduce" class="family-mine-intro-card" v-html="infoRow.introduce"></div>
+                <div v-else class="family-mine-intro-card">暂无活动介绍</div>
+            </div>
+        </div>
+    </van-popup>
 </div>
 
 <script nonce="${cspNonce!}">
     const vue = new Vue({
         el: "#app",
         store,
-        components: {
-            "pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
-        },
         data() {
             return {
+                tableData: [],
+                loading: false,
+                finished: false,
+                refreshing: false,
+                imageLoadErrors: {},
+                filterOpened: false,
                 pageForm: {
                     pageNumber: 1,
                     pageSize: 10,
@@ -308,12 +487,15 @@ layout("/layouts/platform_h5.html"){
                 ],
                 infoVisible: false,
                 infoRow: {},
-
-                mineCourses: [],
-                courseVisible: false,
             }
         },
         methods: {
+            hasCover(row) {
+                return !!(row && row.cover && String(row.cover).trim())
+            },
+            handleImageError(row) {
+                this.$set(this.imageLoadErrors, row.id, true)
+            },
             onView(row) {
                 this.infoRow = row
                 this.infoVisible = true
@@ -321,24 +503,45 @@ layout("/layouts/platform_h5.html"){
             onApply(row) {
                 this.$pjaxReplace('/platform/family/apply/list/h5?id=' + row.id + '&dataType=mine')
             },
-            onInfo(row) {
-                this.$axios.post('/platform/family/mine/queryMineCourse', {activityId: row.id})
-                    .then((res) => {
-                        this.mineCourses = res.data
-                        this.courseVisible = true
-                    })
+            onLoad() {
+                if(!this.finished) {
+                    this.loadActivities(false)
+                }
             },
-            onReady() {
-                this.doSearch()
+            onRefresh() {
+                this.loadActivities(true)
             },
-            doSearch() {
-                this.$nextTick(() => {
+            loadActivities(reset) {
+                if(reset) {
                     this.pageForm.pageNumber = 1
                     this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
+                    this.tableData = []
+                    this.finished = false
+                    this.imageLoadErrors = {}
+                }
+                this.loading = true
+                this.$axios.post('/platform/family/apply/activityPageData', this.pageForm).then((res) => {
+                    if(res.code === 0) {
+                        const list = res.data && res.data.list ? res.data.list : []
+                        this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
+                        this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
+                        this.finished = this.tableData.length >= this.pageForm.totalCount
+                        if(!this.finished) {
+                            this.pageForm.pageNumber++
+                        }
+                    }
+                }).finally(() => {
+                    this.loading = false
+                    this.refreshing = false
                 })
+            },
+            doSearch() {
+                this.loadActivities(true)
             }
         },
+        created() {
+            this.loadActivities(true)
+        }
     })
 </script>
 
diff --git a/src/main/resources/views/platform/zhghh5/activity/sports/applyUser.html b/src/main/resources/views/platform/zhghh5/activity/sports/applyUser.html
index 2edf4338..983b681b 100644
--- a/src/main/resources/views/platform/zhghh5/activity/sports/applyUser.html
+++ b/src/main/resources/views/platform/zhghh5/activity/sports/applyUser.html
@@ -37,31 +37,31 @@ layout("/layouts/platform_h5.html"){
         overflow: hidden;
         border-radius: 10px;
         color: #fff;
-        background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
+        background-color: #247fe8;
         box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
     }
 
     .sports-activity-hero__image {
         position: absolute;
         top: 0;
-        right: 0;
-        width: 67%;
+        left: 0;
+        width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: right center;
-        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
-        mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
+        object-position: center;
     }
 
     .sports-activity-hero__copy {
         position: relative;
         z-index: 1;
         display: flex;
+        width: 64%;
         height: 100%;
         padding-left: 16px;
         flex-direction: column;
         justify-content: center;
         box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
     }
 
     .sports-activity-hero__title {
@@ -352,8 +352,8 @@ layout("/layouts/platform_h5.html"){
 
     .sports-activity-empty-illustration img {
         display: block;
-        width: 86%;
-        max-width: 300px;
+        width: 82%;
+        max-width: 280px;
         height: auto;
         object-fit: contain;
     }
@@ -560,7 +560,7 @@ layout("/layouts/platform_h5.html"){
             <section class="sports-activity-hero">
                 <img
                         class="sports-activity-hero__image"
-                        src="/assets/mobile/img/home/v4/feature-activity.png"
+                        src="/assets/mobile/img/activity/hero/sports-hero-v2.png"
                         alt="体育活动插画"
                 >
                 <div class="sports-activity-hero__copy">
diff --git a/src/main/resources/views/platform/zhghh5/activity/sports/eventList.html b/src/main/resources/views/platform/zhghh5/activity/sports/eventList.html
index 21781d06..ded3bea3 100644
--- a/src/main/resources/views/platform/zhghh5/activity/sports/eventList.html
+++ b/src/main/resources/views/platform/zhghh5/activity/sports/eventList.html
@@ -77,11 +77,38 @@ layout("/layouts/platform_h5.html"){
         opacity: .9;
     }
 
+    .sports-event-sticky {
+        padding: 10px 0 8px;
+        background-color: #f3f7fd;
+    }
+
+    .sports-event-search {
+        margin: 0 12px;
+        padding: 0;
+        background: transparent;
+    }
+
+    .sports-event-search .van-search__content {
+        height: 42px;
+        padding-left: 13px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(55, 85, 126, .07);
+    }
+
+    .sports-event-search .van-field__control {
+        font-size: 14px;
+    }
+
     .sports-event-list-head {
         display: flex;
-        margin: 16px 14px 8px;
+        width: 100%;
+        margin: 16px 0 0;
+        padding: 0 12px;
         align-items: center;
         justify-content: space-between;
+        box-sizing: border-box;
     }
 
     .sports-event-list-head__title {
@@ -96,7 +123,32 @@ layout("/layouts/platform_h5.html"){
         font-size: 12px;
     }
 
-    .sports-event-page .table-list {
+    .sports-event-list-head__tools {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .sports-event-view-toggle {
+        display: inline-flex;
+        height: 28px;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 14px;
+        color: #397de0;
+        background-color: #eaf3ff;
+        font-size: 12px;
+        line-height: 28px;
+    }
+
+    .sports-event-view-toggle i {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
+    .sports-event-page .sports-event-card-list {
         padding: 0 12px;
     }
 
@@ -172,13 +224,182 @@ layout("/layouts/platform_h5.html"){
         background-color: #fff1f0;
     }
 
-    .sports-event-page .table-card-footer {
-        padding: 12px 16px;
-        background-color: #f8fbff;
+    .sports-event-card__body {
+        padding: 16px;
     }
 
-    .sports-event-page .table-card-footer .van-cell__value {
+    .sports-event-card__title-row {
         display: flex;
+        min-width: 0;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .sports-event-card__title {
+        min-width: 0;
+        flex: 1;
+        color: #23344a;
+        font-size: 16px;
+        line-height: 23px;
+        font-weight: 600;
+    }
+
+    .sports-event-card__status {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+    }
+
+    .sports-event-card__activity {
+        display: flex;
+        margin-top: 5px;
+        align-items: center;
+        color: #78879a;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .sports-event-card__activity .van-icon {
+        margin-right: 5px;
+        font-size: 14px;
+    }
+
+    .sports-event-card__tags,
+    .sports-event-card__config {
+        display: flex;
+        margin-top: 10px;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .sports-event-card__tag,
+    .sports-event-card__config-tag {
+        display: inline-flex;
+        min-height: 24px;
+        padding: 3px 8px;
+        align-items: center;
+        border-radius: 5px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 12px;
+        line-height: 18px;
+        box-sizing: border-box;
+    }
+
+    .sports-event-card__tag-label {
+        margin-right: 4px;
+        color: #7f9fc9;
+    }
+
+    .sports-event-card__stats {
+        display: grid;
+        margin-top: 12px;
+        padding: 12px 0;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        border-top: 1px solid #edf1f6;
+        border-bottom: 1px solid #edf1f6;
+    }
+
+    .sports-event-card__stat {
+        min-width: 0;
+        padding: 0 10px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .sports-event-card__stat:first-child {
+        padding-left: 0;
+    }
+
+    .sports-event-card__stat:last-child {
+        padding-right: 0;
+    }
+
+    .sports-event-card__stat + .sports-event-card__stat {
+        border-left: 1px solid #edf1f6;
+    }
+
+    .sports-event-card__stat-label {
+        color: #7b899b;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .sports-event-card__stat-value {
+        margin-top: 3px;
+        overflow: hidden;
+        color: #33445a;
+        font-size: 13px;
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sports-event-card__config-tag {
+        color: #66758a;
+        background-color: #f5f7fa;
+    }
+
+    .sports-event-card__extra {
+        margin-top: 10px;
+    }
+
+    .sports-event-card__extra-row {
+        display: flex;
+        padding: 4px 0;
+        align-items: flex-start;
+        color: #66758a;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .sports-event-card__extra-row .van-icon {
+        margin: 2px 6px 0 0;
+        flex: 0 0 auto;
+        font-size: 14px;
+    }
+
+    .sports-event-card__extra-label {
+        margin-right: 8px;
+        flex: 0 0 auto;
+        color: #7b899b;
+    }
+
+    .sports-event-card__extra-value {
+        min-width: 0;
+        flex: 1;
+        color: #33445a;
+        overflow-wrap: anywhere;
+    }
+
+    .sports-event-page .table-card .table-card-footer {
+        min-height: 56px;
+        margin-top: 4px;
+        padding: 12px 16px;
+        align-items: center;
+        border-top: 1px solid #edf1f6;
+        background-color: #f8fbff;
+        box-sizing: border-box;
+    }
+
+    .sports-event-page .table-card .table-card-footer::after {
+        display: none;
+    }
+
+    .sports-event-card__footer {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .sports-event-card__footer > div {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .sports-event-page .table-card .table-card-footer .van-cell__value {
+        display: flex;
+        align-items: center;
         justify-content: flex-end;
     }
 
@@ -197,6 +418,9 @@ layout("/layouts/platform_h5.html"){
     }
 
     .sports-event-page .table-card-footer .sports-event-apply-button {
+        width: 108px;
+        min-width: 108px;
+        height: 32px;
         color: #fff !important;
         border-color: #1989fa !important;
         background-color: #1989fa !important;
@@ -204,12 +428,92 @@ layout("/layouts/platform_h5.html"){
     }
 
     .sports-event-page .table-card-footer .sports-event-cancel-button {
+        width: 108px;
+        min-width: 108px;
+        height: 32px;
         color: #fff !important;
         border-color: #e84d4f !important;
         background-color: #e84d4f !important;
         box-shadow: 0 5px 12px rgba(232, 77, 79, .16);
     }
 
+    .sports-event-page .table-card-footer .van-button__content {
+        white-space: nowrap;
+    }
+
+    .sports-event-compact-list {
+        margin: 0 12px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .sports-event-compact-item {
+        display: flex;
+        min-height: 68px;
+        padding: 12px 14px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #edf1f6;
+        background-color: #fff;
+    }
+
+    .sports-event-compact-item:last-child {
+        border-bottom: 0;
+    }
+
+    .sports-event-compact-item__name {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+        color: #23344a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sports-event-compact-item__action {
+        flex: 0 0 auto;
+    }
+
+    .sports-event-page .sports-event-compact-list .sports-event-compact-button.van-button {
+        min-width: 0;
+        height: 28px !important;
+        padding: 0 10px !important;
+        border: 0 !important;
+        border-radius: 14px;
+        font-size: 12px;
+        line-height: 28px;
+        box-shadow: none !important;
+    }
+
+    .sports-event-compact-button i {
+        margin-right: 4px;
+        font-size: 13px;
+    }
+
+    .sports-event-page .sports-event-compact-list .sports-event-compact-button--apply.van-button {
+        color: #397de0 !important;
+        background: #edf5ff !important;
+        box-shadow: none !important;
+    }
+
+    .sports-event-page .sports-event-compact-list .sports-event-compact-button--cancel.van-button {
+        color: #df5b59 !important;
+        background: #fff1f0 !important;
+        box-shadow: none !important;
+    }
+
+    .sports-event-compact-button .van-button__content {
+        white-space: nowrap;
+    }
+
     .sports-event-page .van-list__finished-text,
     .sports-event-page .van-list__loading {
         color: #9aa7b8;
@@ -217,6 +521,10 @@ layout("/layouts/platform_h5.html"){
         line-height: 44px;
     }
 
+    .sports-event-refresh {
+        min-height: calc(100vh - 226px);
+    }
+
     .sports-event-empty {
         display: flex;
         min-height: 300px;
@@ -274,72 +582,96 @@ layout("/layouts/platform_h5.html"){
         </div>
     </div>
 
-    <div class="sports-event-list-head">
-        <div class="sports-event-list-head__title">可报名项目</div>
-        <div class="sports-event-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
-    </div>
+    <van-sticky :offset-top="46">
+        <div class="sports-event-sticky">
+            <van-search
+                    v-model="pageForm.searchKeyword"
+                    class="sports-event-search"
+                    placeholder="搜索项目名称"
+                    shape="round"
+                    clearable
+                    @search="doSearch"
+                    @clear="doSearch"
+            ></van-search>
 
+            <div class="sports-event-list-head">
+                <button type="button" class="sports-event-view-toggle" @click="toggleViewMode">
+                    <i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
+                    <span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
+                </button>
+                <div class="sports-event-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
+            </div>
+        </div>
+    </van-sticky>
+
+    <van-pull-refresh class="sports-event-refresh" v-model="refreshing" @refresh="onRefresh">
     <div>
         <van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0"
                   v-model="loading">
-            <div class="table-list">
+            <div class="sports-event-card-list" v-if="viewMode === 'card'">
                 <div :key="row.id" class="table-card" v-for="row in tableData">
-                    <van-image :src="row.image" fit="cover" height="200" v-if="row.image" width="100%"></van-image>
-                    <van-cell>
-                        <template slot="title">
-                            <div class="flex-align">
-                                <span class="font-size3 bold">{{row.allName}}</span>
+                    <div class="sports-event-card__body">
+                        <div class="sports-event-card__title-row">
+                            <div class="sports-event-card__title">{{row.allName}}</div>
+                            <div class="sports-event-card__status">
+                                <template v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
+                                    <van-tag class="sports-event-status-tag is-pending" v-if="row.status===1">待审核</van-tag>
+                                    <van-tag class="sports-event-status-tag is-success" v-if="row.status===2">已成功报名</van-tag>
+                                    <van-tag class="sports-event-status-tag is-rejected" v-if="row.status===3">审核不通过</van-tag>
+                                </template>
+                                <template v-else>
+                                    <van-tag class="sports-event-status-tag is-pending" v-if="row.status2===0">待审核</van-tag>
+                                    <van-tag class="sports-event-status-tag is-success" v-if="row.status2===2">已成功报名</van-tag>
+                                    <van-tag class="sports-event-status-tag is-rejected" v-if="row.status2===3">审核不通过</van-tag>
+                                </template>
                             </div>
-                        </template>
-                        <template #right-icon>
-                            <div style="display: flex; justify-content: flex-end"
-                                 v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
-                                <van-tag class="sports-event-status-tag is-pending" v-if="row.status===1">待审核</van-tag>
-                                <van-tag class="sports-event-status-tag is-success" v-if="row.status===2">已成功报名</van-tag>
-                                <van-tag class="sports-event-status-tag is-rejected" v-if="row.status===3">审核不通过</van-tag>
+                        </div>
+                        <div class="sports-event-card__activity" v-if="row.name">
+                            <van-icon name="flag-o"></van-icon>
+                            <span>{{row.name}}</span>
+                        </div>
+                        <div class="sports-event-card__tags">
+                            <span class="sports-event-card__tag" v-if="row.eveProjectType"><span class="sports-event-card__tag-label">项目</span>{{row.eveProjectType == 2 ? '团体' : '单项'}}</span>
+                            <span class="sports-event-card__tag"><span class="sports-event-card__tag-label">性别</span>{{row.isMenWomen == 1 ? '男子' : row.isMenWomen == 2 ? '女子' : '不限'}}</span>
+                            <span class="sports-event-card__tag" v-if="row.isInterest">趣味项目</span>
+                            <span class="sports-event-card__tag" v-if="row.registrationWays"><span class="sports-event-card__tag-label">报名</span>{{row.registrationWays == 2 ? '双人' : '单人'}}</span>
+                            <span class="sports-event-card__tag" v-if="row.applyType"><span class="sports-event-card__tag-label">活动</span>{{row.applyType == 2 ? '综合类' : '单一类'}}</span>
+                            <span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(1)">个人报名</span>
+                            <span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(2)">分工会报名</span>
+                            <span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(3)">小程序报名</span>
+                        </div>
+                        <div class="sports-event-card__stats">
+                            <div class="sports-event-card__stat">
+                                <div class="sports-event-card__stat-label">可报队数</div>
+                                <div class="sports-event-card__stat-value">{{row.eveProjectType == 2 && row.restrictTotalTeam != null ? row.restrictTotalTeam + '队' : '不适用'}}</div>
                             </div>
-                            <div style="display: flex; justify-content: flex-end" v-else>
-                                <van-tag class="sports-event-status-tag is-pending" v-if="row.status2===0">待审核</van-tag>
-                                <van-tag class="sports-event-status-tag is-success" v-if="row.status2===2">已成功报名</van-tag>
-                                <van-tag class="sports-event-status-tag is-rejected" v-if="row.status2===3">审核不通过</van-tag>
+                            <div class="sports-event-card__stat">
+                                <div class="sports-event-card__stat-label">运动员人数</div>
+                                <div class="sports-event-card__stat-value" v-if="row.athletesMinNum != null && row.athletesMaxNum != null">{{row.athletesMinNum}}-{{row.athletesMaxNum}}人</div>
+                                <div class="sports-event-card__stat-value" v-else-if="row.athletesMaxNum != null">最多{{row.athletesMaxNum}}人</div>
+                                <div class="sports-event-card__stat-value" v-else>暂无限制</div>
                             </div>
-                        </template>
-                    </van-cell>
-                    <van-cell title="可报队数" v-if="row.eveProjectType==='2'">
-                        <template #right-icon>{{ row.restrictTotalTeam }}队</template>
-                    </van-cell>
-                    <van-cell title="每队可报人数" v-if="row.athletesMaxNum<=99">
-                        <template #right-icon>
-                            <span v-if="row.athletesMaxNum">{{ row.athletesMaxNum }}人</span>
-                            <span v-else-if="row.applyType===1">{{ row.athletesMaxNum * row.restrictTotalTeam}}人</span>
-                            <span v-else-if="row.applyType===2&&row.eveProjectType==='1'">{{row.athletesMaxNum}}人</span>
-                            <span v-else-if="row.applyType===2&&row.eveProjectType==='2'">
-                                {{(row.restrictGirlNum ? row.restrictGirlNum : 0) + (row.restrictBoyNum ? row.restrictBoyNum : 0)}}人
-                            </span>
-                            <span v-else>暂无</span>
-                        </template>
-                    </van-cell>
-<!--                    <van-cell title="已报名总人数">-->
-<!--                        <template #right-icon>-->
-<!--                            <span v-if="row.successUserApply>0&&row.applyType!==3">{{ row.successUserApply }}人</span>-->
-<!--                            <span v-else-if="JSON.parse(row.applyWay).length===2&&row.applyWay.includes(1)">{{row.totalApplyNum}}人</span>-->
-<!--                            <span v-else-if="row.totalApplyNum>0&&row.applyType===3">{{ row.totalApplyNum }}人</span>-->
-<!--                            <span v-else>0人</span>-->
-<!--                        </template>-->
-<!--                    </van-cell>-->
-                    <van-cell title="暂保存人数">
-                        <template #right-icon>
-                            <span v-if="row.apply_num_bc>0">已保存（{{row.apply_num_bc}}）人</span>
-                            <span v-else>暂无已保存人数</span>
-                        </template>
-                    </van-cell>
-                    <van-cell title="已报名人员" v-if="JSON.parse(row.applyWay).length===1">
-                        <template #right-icon>
-                            <span @click="openApplyUser(row)" v-if="row.userApplyNames">{{ row.userApplyNames}}</span>
-                            <span v-else>暂无</span>
-                        </template>
-                    </van-cell>
-                    <van-cell class="table-card-footer">
+                            <div class="sports-event-card__stat">
+                                <div class="sports-event-card__stat-label">每人限报</div>
+                                <div class="sports-event-card__stat-value">{{row.restrictRegNumber != null ? row.restrictRegNumber + '项' : '暂无限制'}}</div>
+                            </div>
+                        </div>
+                        <div class="sports-event-card__config" v-if="row.restrictBoyNum != null || row.restrictGirlNum != null || row.coachNum != null || row.leanderNum != null || row.substituteNum != null || row.isLeader || row.isManGirlNum">
+                            <span class="sports-event-card__config-tag" v-if="row.restrictBoyNum != null">男子 {{row.restrictBoyNum}}人</span>
+                            <span class="sports-event-card__config-tag" v-if="row.restrictGirlNum != null">女子 {{row.restrictGirlNum}}人</span>
+                            <span class="sports-event-card__config-tag" v-if="row.coachNum != null">教练 {{row.coachNum}}人</span>
+                            <span class="sports-event-card__config-tag" v-if="row.leanderNum != null">领队 {{row.leanderNum}}人</span>
+                            <span class="sports-event-card__config-tag" v-if="row.substituteNum != null">替补 {{row.substituteNum}}人</span>
+                            <span class="sports-event-card__config-tag" v-if="row.isLeader">仅报领队</span>
+                            <span class="sports-event-card__config-tag" v-if="row.isManGirlNum">男女不限</span>
+                        </div>
+                        <div class="sports-event-card__extra">
+                            <div class="sports-event-card__extra-row" v-if="row.startAgeDate || row.endAgeDate"><van-icon name="calendar-o"></van-icon><span class="sports-event-card__extra-label">出生日期</span><span class="sports-event-card__extra-value">{{row.startAgeDate || '不限'}} 至 {{row.endAgeDate || '不限'}}</span></div>
+                            <div class="sports-event-card__extra-row" v-if="row.activityTeamName"><van-icon name="friends-o"></van-icon><span class="sports-event-card__extra-label">当前小队</span><span class="sports-event-card__extra-value">{{row.activityTeamName}}</span></div>
+                            <div class="sports-event-card__extra-row" v-if="row.userApplyNames"><van-icon name="contact-o"></van-icon><span class="sports-event-card__extra-label">已报名人员</span><span class="sports-event-card__extra-value" @click="openApplyUser(row)">{{row.userApplyNames}}</span></div>
+                        </div>
+                    </div>
+                    <div class="table-card-footer sports-event-card__footer">
                         <div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
                             <van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
                                         size="small"
@@ -368,7 +700,38 @@ layout("/layouts/platform_h5.html"){
                                 取消报名
                             </van-button>
                         </div>
-                    </van-cell>
+                    </div>
+                </div>
+            </div>
+            <div class="sports-event-compact-list" v-else>
+                <div :key="row.id" class="sports-event-compact-item" v-for="row in tableData">
+                    <div class="sports-event-compact-item__name">{{ row.allName }}</div>
+                    <div class="sports-event-compact-item__action">
+                        <div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
+                            <van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
+                                        size="small" type="default"
+                                        v-if="activityData.applyWay.includes(1)&&row.userApply===0">
+                                <i class="fa fa-sign-in"></i>我要报名
+                            </van-button>
+                            <van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
+                                        size="small" type="default"
+                                        v-if="activityData.applyWay.includes(1)&&row.userApply>0">
+                                <i class="fa fa-trash"></i>取消报名
+                            </van-button>
+                        </div>
+                        <div v-else>
+                            <van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
+                                        size="small" type="default"
+                                        v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
+                                <i class="fa fa-sign-in"></i>我要报名
+                            </van-button>
+                            <van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
+                                        size="small" type="default"
+                                        v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
+                                <i class="fa fa-trash"></i>取消报名
+                            </van-button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </van-list>
@@ -378,6 +741,7 @@ layout("/layouts/platform_h5.html"){
             <div class="sports-event-empty__hint">当前活动暂未发布可报名项目</div>
         </div>
     </div>
+    </van-pull-refresh>
     </div>
 </div>
 
@@ -390,18 +754,24 @@ layout("/layouts/platform_h5.html"){
                 tableData: [],
                 finished: false,
                 loading: false,
+                refreshing: false,
                 pageForm: {
                     activityId: GetQueryString("activityId"),
+                    searchKeyword: "",
                     pageNumber: 1,
                     pageSize: 5,
                     totalCount: 0
                 },
                 subLoading: false,
-                activityData: {}
+                activityData: {},
+                viewMode: "card"
             }
         },
         components: {},
         methods: {
+            toggleViewMode() {
+                this.viewMode = this.viewMode === "card" ? "list" : "card"
+            },
             openApplyUser() {
             },
             cancelApply(row) {
@@ -473,9 +843,13 @@ layout("/layouts/platform_h5.html"){
                 this.tableKey = new Date().getTime()
                 this.pageForm.pageNumber = 1
                 this.pageForm.totalCount = 0
+                this.finished = false
                 this.tableData = []
                 this.pageData()
             },
+            onRefresh() {
+                this.doSearch()
+            },
             pageData() {
                 this.loading = true
                 this.$axios.post("/platform/activity/apply/h5/pageData", {data: JSON.stringify(this.pageForm)}).then((res) => {
@@ -486,7 +860,9 @@ layout("/layouts/platform_h5.html"){
                         this.pageForm.pageNumber++
                     }
                     this.pageForm.totalCount = res.data.totalCount
+                }).finally(() => {
                     this.loading = false
+                    this.refreshing = false
                 })
             },
 
diff --git a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/apply/index.html b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/apply/index.html
index a516c6bd..a4c3a391 100644
--- a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/apply/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/apply/index.html
@@ -38,31 +38,31 @@ layout("/layouts/platform_h5.html"){
         overflow: hidden;
         border-radius: 10px;
         color: #fff;
-        background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
+        background-color: #247fe8;
         box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
     }
 
     .brand-activity-hero__image {
         position: absolute;
         top: 0;
-        right: 0;
-        width: 67%;
+        left: 0;
+        width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: right center;
-        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
-        mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
+        object-position: center;
     }
 
     .brand-activity-hero__copy {
         position: relative;
         z-index: 1;
         display: flex;
+        width: 64%;
         height: 100%;
         padding-left: 16px;
         flex-direction: column;
         justify-content: center;
         box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
     }
 
     .brand-activity-hero__title {
@@ -146,7 +146,7 @@ layout("/layouts/platform_h5.html"){
         padding: 0 12px 0 0;
         overflow: hidden;
         color: #66758a;
-        font-size: 12px;
+        font-size: 14px;
         text-align: center;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -514,7 +514,7 @@ layout("/layouts/platform_h5.html"){
 
         <div class="brand-activity-content">
             <section class="brand-activity-hero">
-                <img class="brand-activity-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="品牌活动插画">
+                <img class="brand-activity-hero__image" src="/assets/mobile/img/activity/hero/brand-hero-v2.png" alt="品牌活动插画">
                 <div class="brand-activity-hero__copy">
                     <div class="brand-activity-hero__title">品牌活动</div>
                     <div class="brand-activity-hero__subtitle">品牌引领 · 成长同行</div>
diff --git a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/list/index.html b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/list/index.html
index 014cf257..c6832332 100644
--- a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/list/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/list/index.html
@@ -76,6 +76,30 @@ layout("/layouts/platform_h5.html"){
         opacity: .9;
     }
 
+    .brand-course-sticky {
+        padding: 10px 0 8px;
+        background-color: #f3f7fd;
+    }
+
+    .brand-course-search {
+        margin: 0 12px;
+        padding: 0;
+        background: transparent;
+    }
+
+    .brand-course-search .van-search__content {
+        height: 42px;
+        padding-left: 13px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(55, 85, 126, .07);
+    }
+
+    .brand-course-search .van-field__control {
+        font-size: 14px;
+    }
+
     .brand-course-filter {
         padding: 10px 12px 0;
         background-color: #f3f7fd;
@@ -111,48 +135,14 @@ layout("/layouts/platform_h5.html"){
         box-sizing: border-box;
     }
 
-    .brand-course-assort {
-        display: flex;
-        margin-top: 8px;
-        padding: 2px 0 10px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        gap: 8px;
-        scrollbar-width: none;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .brand-course-assort::-webkit-scrollbar {
-        display: none;
-    }
-
-    .brand-course-assort__item {
-        min-width: 72px;
-        height: 32px;
-        padding: 0 16px;
-        flex: 0 0 auto;
-        border: 0;
-        border-radius: 16px;
-        color: #6c7c91;
-        background-color: #eef2f7;
-        font-size: 13px;
-        line-height: 32px;
-        text-align: center;
-        white-space: nowrap;
-        box-sizing: border-box;
-    }
-
-    .brand-course-assort__item.is-active {
-        color: #1989fa;
-        background-color: #deecff;
-        font-weight: 500;
-    }
-
     .brand-course-list-head {
         display: flex;
-        margin: 16px 14px 8px;
+        width: 100%;
+        margin: 16px 0 0;
+        padding: 0 12px;
         align-items: center;
         justify-content: space-between;
+        box-sizing: border-box;
     }
 
     .brand-course-list-head__title {
@@ -167,6 +157,31 @@ layout("/layouts/platform_h5.html"){
         font-size: 12px;
     }
 
+    .brand-course-list-head__tools {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .brand-course-view-toggle {
+        display: inline-flex;
+        height: 28px;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 14px;
+        color: #397de0;
+        background-color: #eaf3ff;
+        font-size: 12px;
+        line-height: 28px;
+    }
+
+    .brand-course-view-toggle i {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
     .brand-course-page .table-list-container {
         margin-top: 0;
         padding: 0 12px;
@@ -188,10 +203,10 @@ layout("/layouts/platform_h5.html"){
     }
 
     .brand-course-page .table-list-container .table-list-item .item-header {
-        margin-bottom: 10px;
-        padding-bottom: 12px;
+        margin-bottom: 8px;
+        padding-bottom: 0;
         align-items: center;
-        border-bottom: 1px solid #edf1f6;
+        border-bottom: 0;
     }
 
     .brand-course-page .table-list-container .table-list-item .item-title {
@@ -201,6 +216,192 @@ layout("/layouts/platform_h5.html"){
         font-weight: 600;
     }
 
+    .brand-course-card__heading {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .brand-course-card__title-row {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .brand-course-card__location {
+        display: flex;
+        margin-top: 5px;
+        align-items: center;
+        color: #78879a;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .brand-course-card__location .van-icon {
+        margin-right: 5px;
+        font-size: 14px;
+    }
+
+    .brand-course-card__tags {
+        display: flex;
+        margin-bottom: 8px;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .brand-course-card__tag {
+        display: inline-flex;
+        min-height: 24px;
+        padding: 3px 8px;
+        align-items: center;
+        border-radius: 5px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 12px;
+        line-height: 18px;
+        box-sizing: border-box;
+    }
+
+    .brand-course-card__tag-label {
+        margin-right: 4px;
+        color: #7f9fc9;
+    }
+
+    .brand-course-card__body {
+        width: 100%;
+        min-width: 0;
+        flex: 0 0 100%;
+        box-sizing: border-box;
+    }
+
+    .brand-course-card__details {
+        display: grid;
+        margin-top: 10px;
+        grid-template-columns: minmax(72px, .75fr) minmax(118px, 1.2fr) minmax(82px, 1fr);
+        align-items: stretch;
+    }
+
+    .brand-course-card__detail {
+        display: flex;
+        min-width: 0;
+        padding: 2px 10px;
+        align-items: center;
+        gap: 7px;
+        box-sizing: border-box;
+    }
+
+    .brand-course-card__detail:first-child {
+        padding-left: 0;
+    }
+
+    .brand-course-card__detail + .brand-course-card__detail {
+        border-left: 1px solid #edf1f6;
+    }
+
+    .brand-course-card__detail > .van-icon {
+        flex: 0 0 auto;
+        font-size: 18px;
+    }
+
+    .brand-course-card__detail-copy {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .brand-course-card__detail-label {
+        color: #7b899b;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .brand-course-card__detail-value {
+        margin-top: 2px;
+        overflow-wrap: anywhere;
+        color: #33445a;
+        font-size: 12px;
+        line-height: 17px;
+    }
+
+    .brand-course-card__detail:nth-child(-n + 2) .brand-course-card__detail-label,
+    .brand-course-card__detail:nth-child(-n + 2) .brand-course-card__detail-value {
+        overflow-wrap: normal;
+        white-space: nowrap;
+    }
+
+    .brand-course-card__links {
+        display: flex;
+        min-width: 0;
+        padding-right: 0;
+        align-items: stretch;
+        justify-content: center;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .brand-course-card__link {
+        display: grid;
+        min-width: 0;
+        grid-template-columns: 15px auto minmax(0, 1fr);
+        align-items: center;
+        column-gap: 5px;
+        color: #66758a;
+        font-size: 11px;
+        line-height: 17px;
+    }
+
+    .brand-course-card__link .van-icon {
+        font-size: 14px;
+    }
+
+    .brand-course-card__link-value {
+        min-width: 0;
+        overflow: hidden;
+        color: #397de0;
+        text-align: right;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-course-quota-group {
+        display: flex;
+        margin-left: 10px;
+        align-items: flex-end;
+        flex-direction: column;
+        flex: 0 0 auto;
+        gap: 5px;
+    }
+
+    .brand-course-quota {
+        display: inline-flex;
+        min-height: 24px;
+        padding: 3px 8px;
+        align-items: center;
+        border-radius: 12px;
+        color: #df5b59;
+        background-color: #fff1f0;
+        font-size: 11px;
+        line-height: 18px;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .brand-course-quota strong {
+        margin: 0 2px;
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .brand-course-quota.is-waiting {
+        color: #d9822b;
+        background-color: #fff6e8;
+    }
+
+    .brand-course-quota.is-unlimited {
+        color: #397de0;
+        background-color: #edf5ff;
+    }
+
     .brand-course-page .table-column {
         padding: 6px 0;
         font-size: 13px;
@@ -245,12 +446,111 @@ layout("/layouts/platform_h5.html"){
         box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
     }
 
+    .brand-course-page .table-list-container .table-list-item .brand-course-qr {
+        color: #fff;
+        background-color: #07c160;
+        box-shadow: 0 5px 12px rgba(7, 193, 96, .18);
+    }
+
     .brand-course-page .table-list-container .table-list-item .brand-course-cancel {
         color: #fff !important;
         background-color: #e84d4f !important;
         box-shadow: 0 5px 12px rgba(221, 99, 99, .16);
     }
 
+    .brand-course-page .brand-course-card-mode .table-list-item .brand-course-apply,
+    .brand-course-page .brand-course-card-mode .table-list-item .brand-course-cancel {
+        width: 108px;
+        height: 32px;
+        min-height: 32px;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .brand-course-page .brand-course-card-mode .table-list-item .brand-course-apply span,
+    .brand-course-page .brand-course-card-mode .table-list-item .brand-course-cancel span {
+        white-space: nowrap;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-container {
+        margin: 0 12px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item {
+        display: flex;
+        min-height: 68px;
+        margin: 0;
+        padding: 12px 14px;
+        align-items: center;
+        gap: 12px;
+        border-bottom: 1px solid #edf1f6;
+        border-radius: 0;
+        box-shadow: none;
+        box-sizing: border-box;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item:last-child {
+        border-bottom: 0;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item > div:nth-child(2) {
+        display: none !important;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .item-header {
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        border-bottom: 0;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .item-actions {
+        margin: 0 0 0 auto;
+        padding: 0;
+        flex: 0 0 auto;
+        gap: 8px;
+        border-top: 0;
+        background-color: #fff;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .action-btn {
+        min-height: 28px;
+        padding: 0 10px;
+        border-radius: 14px;
+        font-size: 12px;
+        box-shadow: none;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .action-btn i {
+        margin-right: 4px;
+        font-size: 13px;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .brand-course-apply,
+    .brand-course-page .brand-course-list-mode .table-list-item .brand-course-sign {
+        color: #397de0;
+        background-color: #edf5ff;
+        box-shadow: none;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .brand-course-qr {
+        color: #159957;
+        background-color: #eaf8f1;
+        box-shadow: none;
+    }
+
+    .brand-course-page .brand-course-list-mode .table-list-item .brand-course-cancel {
+        color: #df5b59 !important;
+        background-color: #fff1f0 !important;
+        box-shadow: none;
+    }
+
     .brand-course-page .van-list__finished-text,
     .brand-course-page .van-list__loading {
         color: #9aa7b8;
@@ -258,6 +558,44 @@ layout("/layouts/platform_h5.html"){
         line-height: 44px;
     }
 
+    .brand-course-page .empty-state {
+        padding: 0;
+    }
+
+    .brand-course-empty {
+        display: flex;
+        min-height: 300px;
+        padding: 28px 18px;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .brand-course-empty img {
+        display: block;
+        width: 82%;
+        max-width: 300px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .brand-course-empty__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .brand-course-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
     .primary-color {
         color: #1989fa;
     }
@@ -509,59 +847,96 @@ layout("/layouts/platform_h5.html"){
     </div>
 
     <van-sticky offset-top="46px">
+        <div class="brand-course-sticky">
+            <van-search
+                    v-model="pageForm.searchKeyword"
+                    class="brand-course-search"
+                    placeholder="搜索项目名称"
+                    shape="round"
+                    clearable
+                    @search="doSearch"
+                    @clear="doSearch"
+            ></van-search>
         <div class="brand-course-filter" :class="{'is-open': filterOpened}">
             <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false" active-color="#1989fa">
                 <van-dropdown-item v-model="pageForm.courseTypeId" :options="typeOptions" :multiple="false"
                                    @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                <van-dropdown-item v-model="activeAssort" :options="assortOptions" :multiple="false"
+                                   @change="onAssortChange" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
             </van-dropdown-menu>
-            <div v-if="assortList.length > 0" class="brand-course-assort">
-                <button
-                        v-for="item,index in assortList"
-                        :key="index"
-                        type="button"
-                        class="brand-course-assort__item"
-                        :class="{'is-active': activeAssort === item}"
-                        @click="tabClick(item)"
-                >{{ item }}</button>
+        </div>
+            <div class="brand-course-list-head">
+                <button type="button" class="brand-course-view-toggle" @click="toggleViewMode">
+                    <i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
+                    <span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
+                </button>
+                <div class="brand-course-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
             </div>
         </div>
     </van-sticky>
 
-    <div class="brand-course-list-head">
-        <div class="brand-course-list-head__title">可报名课程</div>
-        <div class="brand-course-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
-    </div>
-
+    <div :class="{'brand-course-list-mode': viewMode === 'list', 'brand-course-card-mode': viewMode === 'card'}">
     <table-list api="/platform/trainSignUp/apply/pageData"
                 :page_form.sync="pageForm"
                 ref="tableListRef"
                 @ready="onReady"
     >
+        <template #empty>
+            <div class="brand-course-empty">
+                <img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动项目空状态插画">
+                <div class="brand-course-empty__title">暂无品牌活动项目</div>
+                <div class="brand-course-empty__hint">当前筛选条件下暂时没有可报名项目</div>
+            </div>
+        </template>
         <template #header="{index,row}">
             <div class="item-header">
-                <div class="item-title">{{ row.courseName }}</div>
-                <div v-html="calcSignUpCount(row)"></div>
+                <div class="brand-course-card__heading">
+                    <div class="brand-course-card__title-row">
+                        <div class="item-title">{{ row.courseName }}</div>
+                        <div v-if="viewMode === 'card'" v-html="calcSignUpCount(row)"></div>
+                    </div>
+                    <div class="brand-course-card__location" v-if="viewMode === 'card' && row.courseLocation">
+                        <van-icon name="location-o"></van-icon>
+                        <span>{{ row.courseLocation }}</span>
+                    </div>
+                </div>
             </div>
         </template>
         <template v-slot="{index,row}">
-            <table-column label="类型">{{row.typeName}}</table-column>
-            <table-column label="校区">{{row.campus}}</table-column>
-            <table-column label="地点">{{row.courseLocation}}</table-column>
-            <table-column label="联系人">{{row.courseInstructor}}</table-column>
-            <table-column v-if="row.courseInstructorMobile" label="联系方式">{{row.courseInstructorMobile}}</table-column>
-            <table-column label="时间">
-                <span v-if="row.courseTimes && row.courseTimes.length === 1" class="primary-color" @click="onTime(row)">
-                   {{ weekdayCNMap[$moment(row.courseTimes[0].courseDate).day()]
-                    + ' '
-                    + $moment(row.courseTimes[0].courseStartTime).format('MM月DD日 HH:mm')
-                    + '~'
-                    + $moment(row.courseTimes[0].courseEndTime).format('HH:mm') }}
-                </span>
-                <span v-else @click="onTime(row)" class="primary-color">点我查看</span>
-            </table-column>
-            <table-column v-if="row.introduce" label="详细信息">
-                <span @click="introduceRow = row; introduceVisible = true" class="primary-color">点我查看</span>
-            </table-column>
+            <div v-if="viewMode === 'card'" class="brand-course-card__body">
+            <div class="brand-course-card__tags" v-if="row.typeName || row.campus">
+                <span class="brand-course-card__tag" v-if="row.typeName"><span class="brand-course-card__tag-label">类型</span>{{row.typeName}}</span>
+                <span class="brand-course-card__tag" v-if="row.campus"><span class="brand-course-card__tag-label">校区</span>{{row.campus}}</span>
+            </div>
+            <div class="brand-course-card__details">
+                <div class="brand-course-card__detail">
+                    <van-icon name="friends-o"></van-icon>
+                    <div class="brand-course-card__detail-copy">
+                        <div class="brand-course-card__detail-label">联系人</div>
+                        <div class="brand-course-card__detail-value">{{row.courseInstructor}}</div>
+                    </div>
+                </div>
+                <div class="brand-course-card__detail">
+                    <van-icon name="phone-o"></van-icon>
+                    <div class="brand-course-card__detail-copy">
+                        <div class="brand-course-card__detail-label">联系方式</div>
+                        <div class="brand-course-card__detail-value">{{row.courseInstructorMobile || '暂无'}}</div>
+                    </div>
+                </div>
+                <div class="brand-course-card__detail brand-course-card__links">
+                    <div class="brand-course-card__link">
+                        <van-icon name="clock-o"></van-icon>
+                        <span>时间</span>
+                        <span class="brand-course-card__link-value" @click="onTime(row)">点我查看</span>
+                    </div>
+                    <div class="brand-course-card__link" v-if="row.introduce">
+                        <van-icon name="notes-o"></van-icon>
+                        <span>详细信息</span>
+                        <span class="brand-course-card__link-value" @click="introduceRow = row; introduceVisible = true">点我查看</span>
+                    </div>
+                </div>
+            </div>
+            </div>
         </template>
         <template #actions="{index,row}">
             <div v-if="activity.wechat && row.isSign" class="action-btn brand-course-qr" @click="this.vant.ImagePreview([activity.wechat])">
@@ -588,6 +963,7 @@ layout("/layouts/platform_h5.html"){
         </template>
     </table-list>
     </div>
+    </div>
 
     <van-action-sheet class="brand-course-introduce-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="课程介绍" v-model="introduceVisible" cancel-text="取消">
         <div class="brand-course-introduce-content">
@@ -595,19 +971,18 @@ layout("/layouts/platform_h5.html"){
         </div>
     </van-action-sheet>
 
-    <times ref="timesRef"></times>
+    <times ref="timesRef" module-type="brand"></times>
     <apply-form ref="formRef" @refresh="refresh"></apply-form>
 </div>
 
 <script src="${base!}/assets/platform/plugins/jr-qrcode/jr-qrcode.js"></script>
 <script nonce="${cspNonce!}">
-    <!--#include('../common/times.js'){}#-->
     <!--#include('applyForm.js'){}#-->
     const vue = new Vue({
         el: "#app",
         store,
         components: {
-            'times': times,
+            'times': httpVueLoader("/components/module/activity/ActivityScheduleCalendar.vue?v=" + new Date().getTime()),
             'apply-form': applyForm,
             "pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
         },
@@ -631,19 +1006,19 @@ layout("/layouts/platform_h5.html"){
 
                 introduceRow: {},
                 activity: {},
-                assortList: [],
-                activeAssort: '',
+                activeAssort: null,
                 filterOpened: false,
+                viewMode: 'card',
 
                 weekdayCNMap: {0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六'},
             }
         },
         methods: {
-            tabClick(name) {
-                this.activeAssort = name
-                this.pageForm.assortTypes = []
-                this.pageForm.assortTypes.push(name)
-                this.pageForm.assortTypes = JSON.stringify(this.pageForm.assortTypes)
+            toggleViewMode() {
+                this.viewMode = this.viewMode === 'card' ? 'list' : 'card'
+            },
+            onAssortChange(name) {
+                this.pageForm.assortTypes = name ? JSON.stringify([name]) : []
                 this.doSearch()
             },
             refresh() {
@@ -702,15 +1077,17 @@ layout("/layouts/platform_h5.html"){
             },
             calcSignUpCount(row) {
                 if(!row.coursePeopleNumber || row.coursePeopleNumber === 0) {
-                    return "名额数不限制"
+                    return "<div class='brand-course-quota-group'><span class='brand-course-quota is-unlimited'>名额不限</span></div>"
                 }
                 let lave = row.coursePeopleNumber - (row.hasRegisterNum + row.courseReservedNumber)
                 if(row.reserveMode === 2) {
                     let lave2 = row.waitingNum - row.hasWaitingNum
-                    return "<span style='color: red'>余" + lave +"</span>/" + row.coursePeopleNumber + "人"
-                        + "，<span style='color: red'>候补余" + lave2 + "</span>/" + row.waitingNum + "人"
+                    return "<div class='brand-course-quota-group'>"
+                        + "<span class='brand-course-quota'>余<strong>" + lave + "</strong>/" + row.coursePeopleNumber + "人</span>"
+                        + "<span class='brand-course-quota is-waiting'>候补余<strong>" + lave2 + "</strong>/" + row.waitingNum + "人</span>"
+                        + "</div>"
                 } else {
-                    return "<span style='color: red'>余" + lave +"</span>/" + row.coursePeopleNumber + "人"
+                    return "<div class='brand-course-quota-group'><span class='brand-course-quota'>余<strong>" + lave + "</strong>/" + row.coursePeopleNumber + "人</span></div>"
                 }
             },
             async onReady() {
@@ -742,11 +1119,9 @@ layout("/layouts/platform_h5.html"){
             queryCourseAssort() {
                 this.$axios.post("/platform/trainSignUp/apply/queryCourseAssort", {activityId: this.pageForm.activityId})
                     .then((resp) => {
-                        this.assortList = resp.data
-                        if(this.assortList.length > 0) {
-                            this.activeAssort = this.assortList[0]
-                            this.pageForm.assortTypes = JSON.stringify([this.assortList[0]])
-                        }
+                        this.assortOptions = [{text: '全部分类', value: null}].concat(
+                            resp.data.map((item) => ({text: item, value: item}))
+                        )
                     })
             },
             doSearch() {
diff --git a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/mine/index.html b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/mine/index.html
index 533b7437..8d6d80a0 100644
--- a/src/main/resources/views/platform/zhghh5/activity/trainSignUp/mine/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/trainSignUp/mine/index.html
@@ -135,7 +135,7 @@ layout("/layouts/platform_h5.html"){
         max-width: calc(100% - 24px);
         padding: 0 12px 0 0;
         color: #66758a;
-        font-size: 12px;
+        font-size: 14px;
     }
 
     .brand-mine-filter .van-dropdown-menu__title::after {
@@ -267,7 +267,7 @@ layout("/layouts/platform_h5.html"){
         box-sizing: border-box;
     }
 
-    .brand-mine-card__action i {
+    .brand-mine-card__action .van-icon {
         margin-right: 6px;
         font-size: 15px;
     }
@@ -426,8 +426,8 @@ layout("/layouts/platform_h5.html"){
                                 </div>
                             </div>
                             <div class="brand-mine-card__actions">
-                                <button type="button" class="brand-mine-card__action" @click="onView(row)"><i class="fa fa-eye"></i>查看介绍</button>
-                                <button type="button" class="brand-mine-card__action is-primary" @click="onApply(row)"><i class="fa fa-edit"></i>查看报名</button>
+                                <button type="button" class="brand-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
+                                <button type="button" class="brand-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
                             </div>
                         </div>
                     </div>
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/apps.js b/src/main/resources/views/platform/zhghh5/sys/home/apps.js
index dae7e792..25e932e8 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/apps.js
+++ b/src/main/resources/views/platform/zhghh5/sys/home/apps.js
@@ -22,14 +22,21 @@ const apps = {
             <div class="custom-tree-select">
                 <!-- 左侧导航 -->
                 <div class="tree-nav">
-                    <div
-                            v-for="(category, index) in allCategories"
-                            :key="category.id"
-                            :class="['nav-item', { active: activeTab === index }]"
-                            @click="onClickNav(index)"
-                    >
-                        <div class="nav-text">{{ category.name }}</div>
+                    <div v-if="categoryLoading" class="tree-nav-skeleton">
+                        <div v-for="index in 9" :key="'nav-skeleton-' + index" class="tree-nav-skeleton__item">
+                            <div class="tree-nav-skeleton__line app-skeleton__block"></div>
+                        </div>
                     </div>
+                    <template v-else>
+                        <div
+                                v-for="(category, index) in allCategories"
+                                :key="category.id"
+                                :class="['nav-item', { active: activeTab === index }]"
+                                @click="onClickNav(index)"
+                        >
+                            <div class="nav-text">{{ category.name }}</div>
+                        </div>
+                    </template>
                 </div>
 
                 <!-- 右侧内容 -->
@@ -37,8 +44,14 @@ const apps = {
                     <div class="tree-content-title">
                         {{ allCategories[activeTab] ? allCategories[activeTab].name : '全部应用' }}
                     </div>
-                    <div v-if="loading" class="module-loading">
-                        <van-loading size="24px">加载中...</van-loading>
+                    <div v-if="loading" class="app-skeleton">
+                        <div v-for="index in 9" :key="'app-skeleton-' + index" class="app-skeleton__item">
+                            <div class="app-skeleton__icon app-skeleton__block"></div>
+                            <div class="app-skeleton__info">
+                                <div class="app-skeleton__title app-skeleton__block"></div>
+                                <div class="app-skeleton__desc app-skeleton__block"></div>
+                            </div>
+                        </div>
                     </div>
 
                     <div class="app-grid"
@@ -47,10 +60,11 @@ const apps = {
                              :key="app.id"
                              class="app-grid-item"
                              :class="{ 'is-favorite': app.isFavorite }"
-                             @click="openApp(app)"
-                             @touchstart="onTouchStart(app)"
-                            @touchend="onTouchEnd"
-                            @touchmove="onTouchMove">
+                             @click="onAppClick(app)"
+                             @touchstart.passive="onTouchStart(app, $event)"
+                             @touchmove.passive="onTouchMove"
+                             @touchend="onTouchEnd"
+                             @touchcancel="onTouchCancel">
                             <div class="app-grid-icon">
                                 <img v-if="app.picIcon" :src="app.picIcon" :alt="app.name || ''"/>
                                 <van-icon v-else-if="app.icon" :name="app.icon" size="28"></van-icon>
@@ -90,7 +104,13 @@ const apps = {
                     </div>
 
                     <!-- 空状态 -->
-                    <van-empty v-else description="暂无应用"></van-empty>
+                    <div v-else class="app-empty">
+                        <img class="app-empty__image"
+                             src="/assets/mobile/img/home/v4/app-center-empty-v4.png"
+                             alt="暂无应用">
+                        <div class="app-empty__title">暂无应用</div>
+                        <div class="app-empty__hint">当前分类下暂时没有可用应用</div>
+                    </div>
 
                 </div>
             </div>
@@ -145,6 +165,7 @@ const apps = {
             searchKeyword: "",
             // 列表相关
             loading: true,
+            categoryLoading: true,
             // 弹框相关
             showMenuPopup: false,
             currentApp: {},
@@ -153,6 +174,16 @@ const apps = {
 
             touchTimer: null,
             isTouchMoved: false,
+            isLongPressTriggered: false,
+            touchStartX: 0,
+            touchStartY: 0,
+            appsStateCacheKey: "zhgh:h5:apps:center-state",
+            cachedCategoryId: "all",
+            cachedNavScrollTop: 0,
+            cachedContentScrollTop: 0,
+            cachedMenuScrollTop: 0,
+            cachedPopupVisible: false,
+            shouldRestoreAppsState: false,
         }
     },
     computed: {
@@ -169,19 +200,96 @@ const apps = {
         }
     },
     mounted() {
-        // 页面加载时获取分类和应用数据
-        this.loadCategories()
-        this.loadApps()
+        // 动态分类加载完成后再恢复分类，避免把缓存的动态分类误判为“全部应用”
+        this.restoreAppsState()
+        this.loadCategories().finally(() => {
+            this.restoreActiveCategory()
+            this.loadApps()
+        })
     },
     methods: {
+        // 缓存分类、搜索、左右滚动位置及子菜单弹层，供业务页面返回时恢复
+        cacheAppsState() {
+            const nav = this.$el && this.$el.querySelector(".tree-nav")
+            const content = this.$el && this.$el.querySelector(".tree-content")
+            const menu = (this.$el && this.$el.querySelector(".menu-grid")) || document.querySelector(".menu-grid")
+            const state = {
+                categoryId: this.currentCategoryId,
+                searchKeyword: this.searchKeyword,
+                navScrollTop: nav ? nav.scrollTop : 0,
+                contentScrollTop: content ? content.scrollTop : 0,
+                menuScrollTop: menu ? menu.scrollTop : 0,
+                popupVisible: this.showMenuPopup,
+                currentApp: this.currentApp,
+                currentMenus: this.currentMenus
+            }
+            try {
+                sessionStorage.setItem(this.appsStateCacheKey, JSON.stringify(state))
+            } catch (e) {
+                console.warn("缓存应用中心状态失败:", e)
+            }
+        },
+
+        restoreAppsState() {
+            try {
+                const state = JSON.parse(sessionStorage.getItem(this.appsStateCacheKey) || "null")
+                if (!state) return
+                this.cachedCategoryId = state.categoryId || "all"
+                this.searchKeyword = state.searchKeyword || ""
+                this.cachedNavScrollTop = Number(state.navScrollTop) || 0
+                this.cachedContentScrollTop = Number(state.contentScrollTop) || 0
+                this.cachedMenuScrollTop = Number(state.menuScrollTop) || 0
+                this.cachedPopupVisible = !!state.popupVisible
+                this.currentApp = state.currentApp || {}
+                this.currentMenus = state.currentMenus || []
+                this.shouldRestoreAppsState = true
+            } catch (e) {
+                sessionStorage.removeItem(this.appsStateCacheKey)
+            }
+        },
+
+        restoreActiveCategory() {
+            const index = this.allCategories.findIndex(item => String(item.id) === String(this.cachedCategoryId))
+            this.activeTab = index >= 0 ? index : 0
+        },
+
+        restoreScrollPosition() {
+            if (!this.shouldRestoreAppsState) return
+            this.$nextTick(() => {
+                const nav = this.$el && this.$el.querySelector(".tree-nav")
+                const content = this.$el && this.$el.querySelector(".tree-content")
+                if (nav) nav.scrollTop = this.cachedNavScrollTop
+                if (content) content.scrollTop = this.cachedContentScrollTop
+                this.showMenuPopup = this.cachedPopupVisible && this.currentMenus.length > 0
+                this.$nextTick(() => {
+                    const menu = (this.$el && this.$el.querySelector(".menu-grid")) || document.querySelector(".menu-grid")
+                    if (menu) menu.scrollTop = this.cachedMenuScrollTop
+                })
+                this.shouldRestoreAppsState = false
+            })
+        },
+
+        resetContentScroll() {
+            this.shouldRestoreAppsState = false
+            this.cachedPopupVisible = false
+            this.showMenuPopup = false
+            this.$nextTick(() => {
+                const content = this.$el && this.$el.querySelector(".tree-content")
+                if (content) content.scrollTop = 0
+            })
+        },
+
         // 加载分类数据
         loadCategories() {
-            this.$axios.post("/platform/v4/apps/categories", {platform: "H5"}).then((res) => {
+            this.categoryLoading = true
+            return this.$axios.post("/platform/v4/apps/categories", {platform: "H5"}).then((res) => {
                 if (res.code === 0) {
                     this.dynamicCategories = res.data || []
                 } else {
                     console.error("获取应用分类失败:", res.msg)
                 }
+            }).finally(() => {
+                this.categoryLoading = false
             })
         },
 
@@ -263,6 +371,7 @@ const apps = {
             if (this.isFixedCategory) {
                 this.moduleSections = []
                 this.loading = false
+                this.restoreScrollPosition()
                 return
             }
             this.loadModuleSections(this.applications, requestSeq)
@@ -274,6 +383,7 @@ const apps = {
             if (!list.length) {
                 this.moduleSections = []
                 this.loading = false
+                this.restoreScrollPosition()
                 return
             }
             Promise.all(list.map(app => {
@@ -297,6 +407,7 @@ const apps = {
                 if (requestSeq !== this.requestSeq) return
                 this.moduleSections = sections.filter(section => section.menus.length > 0)
                 this.loading = false
+                this.restoreScrollPosition()
             })
         },
 
@@ -352,30 +463,63 @@ const apps = {
                 })
         },
 
-        // 长按开始
-        onTouchStart(app) {
+        // 记录起始坐标，只有手指保持静止时才允许触发长按收藏
+        onTouchStart(app, event) {
+            this.clearTouchTimer()
             this.isTouchMoved = false
+            this.isLongPressTriggered = false
+            const touch = event.touches && event.touches[0]
+            this.touchStartX = touch ? touch.clientX : 0
+            this.touchStartY = touch ? touch.clientY : 0
             this.touchTimer = setTimeout(() => {
+                this.touchTimer = null
+                this.isLongPressTriggered = true
                 this.toggleFavorite(app.id)
             }, 800) // 长按 800ms 触发
         },
 
-        // 触摸移动（判断是否滑动，避免误触长按）
-        onTouchMove() {
-            this.isTouchMoved = true
+        // 超过移动阈值即视为滚动，立即取消长按，避免列表重绘打断手势
+        onTouchMove(event) {
+            const touch = event.touches && event.touches[0]
+            if (!touch) return
+            const moveX = Math.abs(touch.clientX - this.touchStartX)
+            const moveY = Math.abs(touch.clientY - this.touchStartY)
+            if (moveX > 8 || moveY > 8) {
+                this.isTouchMoved = true
+                this.clearTouchTimer()
+            }
         },
 
-        // 触摸结束（清除计时器）
+        // 触摸结束或被系统中断时统一清理长按状态
         onTouchEnd() {
-            if (this.touchTimer) {
-                clearTimeout(this.touchTimer)
-                this.touchTimer = null
+            this.clearTouchTimer()
+        },
+
+        onTouchCancel() {
+            this.isTouchMoved = true
+            this.clearTouchTimer()
+        },
+
+        clearTouchTimer() {
+            if (!this.touchTimer) return
+            clearTimeout(this.touchTimer)
+            this.touchTimer = null
+        },
+
+        // 滑动或长按结束后不再执行合成 click，防止误开应用或弹框
+        onAppClick(app) {
+            if (this.isTouchMoved || this.isLongPressTriggered) {
+                this.isTouchMoved = false
+                this.isLongPressTriggered = false
+                return
             }
+            this.openApp(app)
         },
 
 
         // 搜索
         onSearch() {
+            this.resetContentScroll()
             this.applications = []
             this.moduleSections = []
             this.loadApps()
@@ -390,6 +534,7 @@ const apps = {
         // 切换标签页 - TreeSelect导航点击事件
         onClickNav(index) {
             this.activeTab = index
+            this.resetContentScroll()
             this.applications = []
             this.moduleSections = []
             this.loadApps()
@@ -407,6 +552,7 @@ const apps = {
         // 显示应用菜单弹框
         showAppMenus(app, menus) {
             if(app.href && menus.length === 0){
+                this.cacheAppsState()
                 this.$pjaxReplace(app.href)
                 return;
             }
@@ -426,6 +572,7 @@ const apps = {
             // 关闭弹框
             // this.showMenuPopup = false
             if (menu.href) {
+                this.cacheAppsState()
                 if(menu.href.startsWith('http://') || menu.href.startsWith('https://')){
                     window.open(menu.href, '_blank')
                 }else{
@@ -438,9 +585,8 @@ const apps = {
     },
     // 初始加载消除长按收藏
     beforeDestroy() {
-        if (this.touchTimer) {
-            clearTimeout(this.touchTimer)
-        }
+        this.cacheAppsState()
+        this.clearTouchTimer()
     },
     style: /*language=CSS*/ `
         .apps-container {
@@ -524,12 +670,25 @@ const apps = {
             overflow-y: auto;
             scrollbar-width: none; /* Firefox */
             -ms-overflow-style: none; /* IE and Edge */
+            padding-bottom: 80px;
         }
 
         .tree-nav::-webkit-scrollbar {
             display: none; /* Chrome, Safari and Opera */
         }
 
+        .tree-nav-skeleton__item {
+            min-height: 54px;
+            padding: 20px 14px;
+            box-sizing: border-box;
+        }
+
+        .tree-nav-skeleton__line {
+            width: 100%;
+            height: 14px;
+            border-radius: 4px;
+        }
+
         .nav-item {
             position: relative;
             min-height: 54px;
@@ -582,12 +741,104 @@ const apps = {
             background: #fff;
         }
 
-        .module-loading {
-            min-height: 180px;
+        .app-skeleton {
+            min-height: calc(100% - 38px);
+            padding: 0 12px 80px;
+            box-sizing: border-box;
+            background: #fff;
+        }
+
+        .app-skeleton__item {
             display: flex;
             align-items: center;
-            justify-content: center;
-            color: #8a94a6;
+            min-height: 68px;
+            padding: 9px 2px;
+            box-sizing: border-box;
+            border-bottom: 1px solid #edf1f5;
+        }
+
+        .app-skeleton__block {
+            background: linear-gradient(90deg, #f1f3f6 25%, #fafbfc 37%, #f1f3f6 63%);
+            background-size: 400% 100%;
+            animation: app-skeleton-loading 1.4s ease infinite;
+        }
+
+        .app-skeleton__icon {
+            flex: 0 0 45px;
+            width: 45px;
+            height: 45px;
+            border-radius: 12px;
+            margin-right: 10px;
+        }
+
+        .app-skeleton__info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .app-skeleton__title {
+            width: 54%;
+            height: 14px;
+            border-radius: 4px;
+        }
+
+        .app-skeleton__desc {
+            width: 78%;
+            height: 10px;
+            margin-top: 8px;
+            border-radius: 4px;
+        }
+
+        .app-skeleton__arrow {
+            flex: 0 0 7px;
+            width: 7px;
+            height: 12px;
+            margin-left: 10px;
+            border-radius: 4px;
+        }
+
+        @keyframes app-skeleton-loading {
+            0% {
+                background-position: 100% 50%;
+            }
+
+            100% {
+                background-position: 0 50%;
+            }
+        }
+
+        .app-empty {
+            min-height: 280px;
+            padding: 28px 12px 80px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            text-align: center;
+        }
+
+        .app-empty__image {
+            display: block;
+            width: 100%;
+            max-width: 300px;
+            height: auto;
+            object-fit: contain;
+        }
+
+        .app-empty__title {
+            margin-top: -6px;
+            color: #50627a;
+            font-size: 15px;
+            line-height: 22px;
+            font-weight: 500;
+        }
+
+        .app-empty__hint {
+            margin-top: 6px;
+            color: #9aa7b8;
+            font-size: 12px;
+            line-height: 18px;
         }
 
         .module-sections {
@@ -691,9 +942,8 @@ const apps = {
 
         .app-grid {
             display: block;
-            padding: 0 12px 18px;
+            padding: 0 12px 80px;
             background: #fff;
-            overflow-x: hidden;
         }
 
         .app-grid-item {
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/home.js b/src/main/resources/views/platform/zhghh5/sys/home/home.js
index 684f9cde..082fe2dc 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/home.js
+++ b/src/main/resources/views/platform/zhghh5/sys/home/home.js
@@ -51,9 +51,9 @@ const home = {
             <div class="feature-panel">
                 <div
                     class="feature-card"
-                    :class="item.className"
+                    :class="[item.className, { 'feature-card--primary': index === 0 }]"
                     :style="{ backgroundImage: 'url(' + item.asset + ')' }"
-                    v-for="item in featuredEntries"
+                    v-for="(item, index) in featuredEntries"
                     :key="item.name"
                     @click="featureClick(item)">
                     <div class="feature-card__text">
@@ -255,7 +255,7 @@ const home = {
                     name: "精彩活动",
                     desc: "更多精彩活动等你参与",
                     action: "立即参与",
-                    asset: "/assets/mobile/img/home/v4/feature-activity.png",
+                    asset: "/assets/mobile/img/home/v4/feature-activity-v5.png",
                     className: "feature-card--activity",
                     href: "/platform/h5/featuredActivity"
                 },
@@ -263,7 +263,7 @@ const home = {
                     name: "节日福利",
                     desc: "专属福利 放送温暖",
                     action: "查看福利",
-                    asset: "/assets/mobile/img/home/v4/feature-benefit.png",
+                    asset: "/assets/mobile/img/home/v4/feature-benefit-v5.png",
                     className: "feature-card--benefit",
                     href: "/platform/h5/festivalBenefit"
                 },
@@ -271,7 +271,7 @@ const home = {
                     name: "劳模先进",
                     desc: "致敬榜样力量",
                     action: "了解更多",
-                    asset: "/assets/mobile/img/home/v4/feature-model.png",
+                    asset: "/assets/mobile/img/home/v4/feature-model-v5.png",
                     className: "feature-card--model",
                     href: "/platform/honor/manage/h5"
                 },
@@ -279,7 +279,7 @@ const home = {
                     name: "普惠信息",
                     desc: "普惠服务信息",
                     action: "查看信息",
-                    asset: "/assets/mobile/img/home/v4/feature-inclusive.png",
+                    asset: "/assets/mobile/img/home/v4/feature-inclusive-v5.png",
                     className: "feature-card--inclusive",
                     href: ""
                 }
@@ -887,9 +887,9 @@ const home = {
         .feature-panel {
             margin: 0 12px 7px;
             display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            grid-auto-rows: 95px;
-            gap: 10px 8px;
+            grid-template-columns: 1.08fr 1fr;
+            grid-template-rows: 86px 86px 92px;
+            gap: 8px;
         }
 
         .feature-card {
@@ -904,6 +904,88 @@ const home = {
             background-size: cover;
         }
 
+        .feature-card--primary {
+            grid-column: 1;
+            grid-row: 1 / 3;
+            padding: 16px 12px;
+            background-position: 72% center;
+        }
+
+        .feature-card--primary .feature-card__text {
+            width: 58%;
+        }
+
+        .feature-card--primary .feature-card__title {
+            font-size: 18px;
+            line-height: 24px;
+        }
+
+        .feature-card--primary .feature-card__desc {
+            margin-top: 3px;
+            font-size: 11px;
+            line-height: 16px;
+        }
+
+        .feature-card--primary .feature-card__action {
+            margin-top: 62px;
+        }
+
+        .feature-card:not(.feature-card--primary) {
+            padding: 10px 8px;
+            background-position: center;
+        }
+
+        .feature-card:not(.feature-card--primary) .feature-card__text {
+            width: 100%;
+        }
+
+        .feature-card:not(.feature-card--primary) .feature-card__title {
+            font-size: 13px;
+            line-height: 18px;
+        }
+
+        .feature-card:not(.feature-card--primary) .feature-card__desc {
+            display: none;
+        }
+
+        .feature-card:not(.feature-card--primary) .feature-card__action {
+            height: 19px;
+            margin-top: 24px;
+            padding: 0 5px;
+            font-size: 9px;
+            line-height: 19px;
+        }
+
+        .feature-card:nth-child(4) {
+            grid-column: 1 / -1;
+            grid-row: 3;
+            padding: 12px;
+            background-position: center;
+        }
+
+        .feature-card:nth-child(4) .feature-card__text {
+            width: 48%;
+        }
+
+        .feature-card:nth-child(4) .feature-card__title {
+            font-size: 16px;
+            line-height: 22px;
+        }
+
+        .feature-card:nth-child(4) .feature-card__desc {
+            display: block;
+            font-size: 11px;
+            line-height: 16px;
+        }
+
+        .feature-card:nth-child(4) .feature-card__action {
+            margin-top: 12px;
+            height: 21px;
+            padding: 0 7px;
+            font-size: 10px;
+            line-height: 21px;
+        }
+
         .feature-card:active {
             transform: scale(.985);
         }
@@ -990,6 +1072,27 @@ const home = {
 
         .feature-card--activity {
             color: #087af4;
+            background-color: #eaf4ff;
+            background-position: center;
+            background-size: cover;
+        }
+
+        .feature-card--benefit {
+            background-color: #fff3f4;
+            background-position: center;
+            background-size: cover;
+        }
+
+        .feature-card--model {
+            background-color: #eef5ff;
+            background-position: center;
+            background-size: cover;
+        }
+
+        .feature-card--inclusive {
+            background-color: #f4f1ff;
+            background-position: center;
+            background-size: cover;
         }
 
         .classroom-section {
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/index.html b/src/main/resources/views/platform/zhghh5/sys/home/index.html
index 0e6b8395..579c1abb 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/index.html
+++ b/src/main/resources/views/platform/zhghh5/sys/home/index.html
@@ -51,26 +51,39 @@ layout("/layouts/platform_h5.html"){
         margin-bottom: 2px;
         font-size: 21px;
     }
+
+    .page-tarbar .van-info--dot {
+        width: 8px;
+        min-width: 8px;
+        max-width: 8px;
+        height: 8px;
+        padding: 0;
+        line-height: 8px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        background-color: #ff3b30;
+        border: 1px solid #fff;
+    }
 </style>
 
 <div id="app" v-cloak>
     <div>
         <div>
             <home v-if="homeTabbarActive === 'home'" @module-click="moduleClick"></home>
-            <todo v-if="homeTabbarActive === 'todo'"></todo>
+            <todo v-if="homeTabbarActive === 'todo'" @todo-count-change="updateTodoCount"></todo>
             <work v-if="homeTabbarActive === 'work'"></work>
             <mine v-if="homeTabbarActive === 'mine'" @switch-tab="switchHomeTab"></mine>
             <apps v-if="homeTabbarActive === 'apps'"></apps>
-            <msg v-if="homeTabbarActive === 'msg'"></msg>
+            <msg v-if="homeTabbarActive === 'msg'" @unread-count-change="updateUnreadMessageCount"></msg>
         </div>
 
         <div id="page-tarbar" class="page-tarbar">
             <van-tabbar v-model="homeTabbarActive" :safe-area-inset-bottom="false" @change="homeTabbarChange">
                 <van-tabbar-item name="apps" icon="apps-o">应用</van-tabbar-item>
 <!--                <van-tabbar-item name="work" icon="gem">工作台</van-tabbar-item>-->
-                <van-tabbar-item name="todo" icon="records-o">待办</van-tabbar-item>
+                <van-tabbar-item name="todo" icon="records-o" :dot="todoCount > 0">待办</van-tabbar-item>
                 <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
-                <van-tabbar-item name="msg" icon="envelop-o">消息</van-tabbar-item>
+                <van-tabbar-item name="msg" icon="envelop-o" :dot="unreadMessageCount > 0">消息</van-tabbar-item>
                 <van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
             </van-tabbar>
         </div>
@@ -97,7 +110,9 @@ layout("/layouts/platform_h5.html"){
         },
         data() {
             return {
-                homeTabbarActive: "home"
+                homeTabbarActive: "home",
+                todoCount: 0,
+                unreadMessageCount: 0
             }
         },
         methods: {
@@ -111,6 +126,24 @@ layout("/layouts/platform_h5.html"){
             moduleClick(val) {
                 this.homeTabbarActive = "apps"
                 this.$store.commit("setActiveTarBar", "apps")
+            },
+            updateTodoCount(count) {
+                this.todoCount = Number(count) || 0
+            },
+            updateUnreadMessageCount(count) {
+                this.unreadMessageCount = Number(count) || 0
+            },
+            async loadTabbarBadges() {
+                try {
+                    const [todoResp, messageResp] = await Promise.all([
+                        this.$axios.post("/flow/todoCenter/statistics"),
+                        this.$axios.get("/platform/v4/msg/stats")
+                    ])
+                    if (todoResp.code === 0) this.updateTodoCount(todoResp.data.todoCount)
+                    if (messageResp.code === 0) this.updateUnreadMessageCount(messageResp.data.unread)
+                } catch (error) {
+                    console.error("加载金刚区角标失败:", error)
+                }
             }
         },
         created() {
@@ -119,6 +152,7 @@ layout("/layouts/platform_h5.html"){
             } else {
                 this.homeTabbarActive = this.$store.state.activeTarBar
             }
+            this.loadTabbarBadges()
         },
         style: /*language=CSS*/ `
 
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/msg.js b/src/main/resources/views/platform/zhghh5/sys/home/msg.js
index 92f8ad77..c211221b 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/msg.js
+++ b/src/main/resources/views/platform/zhghh5/sys/home/msg.js
@@ -179,6 +179,7 @@ const msg = {
                 const resp = await this.$axios.get("/platform/v4/msg/stats")
                 if (resp.code === 0) {
                     this.stats = resp.data
+                    this.$emit("unread-count-change", Number(this.stats.unread) || 0)
                 }
             } catch (error) {
                 console.error("加载统计数据失败:", error)
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/todo.js b/src/main/resources/views/platform/zhghh5/sys/home/todo.js
index 44b859d3..ec7c3f44 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/todo.js
+++ b/src/main/resources/views/platform/zhghh5/sys/home/todo.js
@@ -197,6 +197,7 @@ const todo = {
                     this.todoCount = todoCount;
                     this.doneCount = doneCount;
                     this.startedCount = startedCount;
+                    this.$emit("todo-count-change", this.todoCount)
                 }
             } catch (error) {
                 this.$toast("获取统计数据失败");
@@ -650,6 +651,7 @@ const todo = {
         /deep/ .table-list-container .table-list-item .action-btn {
             padding: 0 !important;
             color: #2783ef !important;
+            background: transparent !important;
             font-size: 13px !important;
         }