feat:体育活动、文化活动、品牌活动、系统金刚区 UI优化

src/main/java/com/budwk/app/zhgh/activity/sports/h5Controller/H5ActivitySportsApplyUserController.java

@@ -64,8 +64,8 @@ public class H5ActivitySportsApplyUserController {
 
     @At
     @SaCheckPermission("h5.activity.sports.applyUser")
-    public Result activityData(Integer year, Integer isActivity, Integer applyStatus) {
-        return Result.success(activitySportsApplyUserService.activityData(year, isActivity, applyStatus));
+    public Result activityData(Integer year, Integer isActivity, Integer applyStatus, String searchKeyword) {
+        return Result.success(activitySportsApplyUserService.activityData(year, isActivity, applyStatus, searchKeyword));
 
     }
 

src/main/java/com/budwk/app/zhgh/activity/sports/service/ActivitySportsApplyUserService.java

@@ -19,6 +19,17 @@ public interface ActivitySportsApplyUserService extends BaseService<ActivityScho
 
     Pagination activityData(Integer year, Integer isActivity,Integer applyStatus);
 
+    /**
+     * 根据年份、活动状态、报名状态和活动名称查询体育活动。
+     *
+     * @param year          活动年份
+     * @param isActivity    活动状态
+     * @param applyStatus   当前用户报名状态
+     * @param searchKeyword 活动名称模糊查询关键词
+     * @return 体育活动分页数据
+     */
+    Pagination activityData(Integer year, Integer isActivity, Integer applyStatus, String searchKeyword);
+
     List<NutMap> getEvents(String activityId);
 
     Object getUnionCoachLeaderHead(String activityId,String unionId);

src/main/java/com/budwk/app/zhgh/activity/sports/service/impl/ActivitySportsApplyUserServiceImpl.java

@@ -144,6 +144,20 @@ public class ActivitySportsApplyUserServiceImpl extends BaseServiceImpl<Activity
 
     @Override
     public Pagination activityData(Integer year, Integer isActivity, Integer applyStatus) {
+        return activityData(year, isActivity, applyStatus, null);
+    }
+
+    /**
+     * 根据筛选条件及活动名称查询当前用户可见的体育活动。
+     *
+     * @param year          活动年份
+     * @param isActivity    活动状态
+     * @param applyStatus   当前用户报名状态
+     * @param searchKeyword 活动名称模糊查询关键词
+     * @return 体育活动分页数据
+     */
+    @Override
+    public Pagination activityData(Integer year, Integer isActivity, Integer applyStatus, String searchKeyword) {
 
         Sql sql = Sqls.create("""
                 SELECT
@@ -183,6 +197,10 @@ public class ActivitySportsApplyUserServiceImpl extends BaseServiceImpl<Activity
 
         cnd.and("school.isSave", "!=", true);
 
+        if (Lang.isNotEmpty(searchKeyword)) {
+            cnd.and("school.NAME", "like", "%" + searchKeyword.trim() + "%");
+        }
+
         //查询报名中
         if (isActivity == 2) {
             cnd.and(new Static("now() >applyStartTime and now() < applyEndTime"));

src/main/java/com/budwk/app/zhgh/activity/trainSignUp/controller/manage/TrainSignUpApplyController.java

@@ -93,6 +93,9 @@ public class TrainSignUpApplyController {
 		Cnd cnd = Cnd.NEW();
 		cnd.andEX("id", "=", id);
 		cnd.andEX("`year`", "=", year);
+		if (StrUtil.isNotBlank(pageForm.getSearchKeyword())) {
+			cnd.and(Cnd.likeEX("activityName", pageForm.getSearchKeyword()));
+		}
 		//查询报名中
 		if (activityType == 2) {
 			cnd.and(new Static("now() < activitySignUpEndTime"));

src/main/java/com/budwk/app/zhgh/spread/h5controller/H5SpreadDisplayController.java

@@ -34,6 +34,15 @@ public class H5SpreadDisplayController {
     public void index() {
     }
 
+    /**
+     * 打开工会动态 H5 详情页面。
+     */
+    @At("/detail")
+    @Ok("beetl:/platform/zhghh5/spread/display/detail.html")
+    @SaCheckLogin
+    public void detail() {
+    }
+
     /**
      * 查询 H5 端可见栏目树。
      *
@@ -52,13 +61,18 @@ public class H5SpreadDisplayController {
      * @param pageForm 分页参数
      * @param categoryId 栏目 ID
      * @param title 标题模糊查询条件
+     * @param sortType 排序方式
+     * @param publishDays 发布时间范围天数
+     * @param contentFlag 内容属性筛选
      * @return 已发布内容分页数据
      */
     @At
     @SaCheckLogin
     @ApiOperation("H5已发布内容分页")
-    public Result pageData(PageForm pageForm, String categoryId, String title) {
-        return Result.success(contentService.pagePublished(pageForm, categoryId, title));
+    public Result pageData(PageForm pageForm, String categoryId, String title,
+                           String sortType, Integer publishDays, String contentFlag) {
+        return Result.success(contentService.pagePublished(pageForm, categoryId, title,
+                sortType, publishDays, contentFlag));
     }
 
     /**

src/main/java/com/budwk/app/zhgh/spread/service/SpreadContentService.java

@@ -26,6 +26,20 @@ public interface SpreadContentService extends BaseService<SpreadContent> {
      */
     Pagination<NutMap> pagePublished(PageForm pageForm, String categoryId, String title);
 
+    /**
+     * 按 H5 筛选条件分页查询已发布内容。
+     *
+     * @param pageForm 分页参数
+     * @param categoryId 栏目 ID，查询时包含该栏目的直接子栏目
+     * @param title 标题模糊查询条件
+     * @param sortType 排序方式：comprehensive、latest、views
+     * @param publishDays 发布时间范围天数，空或 0 表示不限
+     * @param contentFlag 内容属性：all、recommend、headline、top
+     * @return 已发布内容分页数据
+     */
+    Pagination<NutMap> pagePublished(PageForm pageForm, String categoryId, String title,
+                                     String sortType, Integer publishDays, String contentFlag);
+
     SpreadContent getContent(String id);
 
     void saveContent(SpreadContent content);

src/main/java/com/budwk/app/zhgh/spread/service/impl/SpreadContentServiceImpl.java

@@ -62,7 +62,7 @@ public class SpreadContentServiceImpl extends BaseServiceImpl<SpreadContent> imp
 
     @Override
     public Pagination<NutMap> pagePublished(PageForm pageForm, String categoryId) {
-        return pagePublished(pageForm, categoryId, null);
+        return pagePublished(pageForm, categoryId, null, null, null, null);
     }
 
     /**
@@ -75,22 +75,54 @@ public class SpreadContentServiceImpl extends BaseServiceImpl<SpreadContent> imp
      */
     @Override
     public Pagination<NutMap> pagePublished(PageForm pageForm, String categoryId, String title) {
+        return pagePublished(pageForm, categoryId, title, null, null, null);
+    }
+
+    /**
+     * 按 H5 筛选条件分页查询已发布内容。
+     *
+     * @param pageForm 分页参数
+     * @param categoryId 栏目 ID，查询时包含该栏目的直接子栏目
+     * @param title 标题模糊查询条件
+     * @param sortType 排序方式
+     * @param publishDays 发布时间范围天数
+     * @param contentFlag 内容属性筛选
+     * @return 已发布内容分页数据
+     */
+    @Override
+    public Pagination<NutMap> pagePublished(PageForm pageForm, String categoryId, String title,
+                                            String sortType, Integer publishDays, String contentFlag) {
         SpreadContentQuery query = new SpreadContentQuery();
         query.setCategoryId(categoryId);
         query.setTitle(title);
         query.setIsPublished(1);
         Cnd cnd = buildCondition(query);
+        if (publishDays != null && publishDays > 0) {
+            cnd.and("c.publishedAt", ">=", System.currentTimeMillis() - publishDays * 24L * 60L * 60L * 1000L);
+        }
+        if ("recommend".equals(contentFlag)) {
+            cnd.and("c.isRecommend", "=", 1);
+        } else if ("headline".equals(contentFlag)) {
+            cnd.and("c.isHeadline", "=", 1);
+        } else if ("top".equals(contentFlag)) {
+            cnd.and("c.isTop", "=", 1);
+        }
         Sql countSql = Sqls.create("SELECT COUNT(1) FROM spread_content c $condition");
         countSql.setCondition(cnd);
         countSql.setCallback(Sqls.callback.integer());
         dao().execute(countSql);
 
+        String orderBy = resolvePublishedOrder(sortType);
         Sql listSql = Sqls.create("""
-                SELECT c.*
+                SELECT c.*,
+                       CASE WHEN child.parentId = '0' OR parent.id IS NULL THEN child.name ELSE parent.name END AS parentCategoryName,
+                       CASE WHEN child.parentId = '0' OR parent.id IS NULL THEN NULL ELSE child.name END AS childCategoryName
                 FROM spread_content c
+                LEFT JOIN spread_category child ON child.id = c.categoryId AND child.delFlag = 0
+                LEFT JOIN spread_category parent ON parent.id = child.parentId AND parent.delFlag = 0
                 $condition
-                ORDER BY c.isTop DESC, c.publishedAt DESC, c.sortOrder ASC, c.createdAt DESC
-                """);
+                ORDER BY
+                """ + orderBy);
         listSql.setCondition(cnd);
         listSql.setPager(dao().createPager(pageForm.getPageNumber(), pageForm.getPageSize()));
         listSql.setCallback(Sqls.callback.maps());
@@ -99,6 +131,19 @@ public class SpreadContentServiceImpl extends BaseServiceImpl<SpreadContent> imp
                 countSql.getInt(), listSql.getList(NutMap.class));
     }
 
+    /**
+     * 将前端排序标识转换为固定 SQL 排序片段，避免客户端直接控制排序字段。
+     */
+    private String resolvePublishedOrder(String sortType) {
+        if ("latest".equals(sortType)) {
+            return "c.publishedAt DESC, c.createdAt DESC";
+        }
+        if ("views".equals(sortType)) {
+            return "c.viewCount DESC, c.publishedAt DESC, c.createdAt DESC";
+        }
+        return "c.isTop DESC, c.publishedAt DESC, c.sortOrder ASC, c.createdAt DESC";
+    }
+
     @Override
     public SpreadContent getContent(String id) {
         if (StrUtil.isBlank(id)) {

src/main/resources/static/components/plugins/h5/TableList.vue

@@ -66,6 +66,10 @@ module.exports = {
     img: {
       type: String,
       default: ""
+    },
+    show_loading_overlay: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {
@@ -111,9 +115,15 @@ module.exports = {
 
     pageData() {
       this.tableLoading = true
+      const isInitialLoad = this.tableData.length === 0
+      this.$emit("loading-change", {loading: true, initial: isInitialLoad})
 
-      const loading = createListLoading()
-      this.$axios.post(this.api, this.json ? ({pageForm: JSON.stringify(this.localPageForm)}) : this.localPageForm).then((res) => {
+      const loading = this.show_loading_overlay ? createListLoading() : null
+      this.$axios.post(
+          this.api,
+          this.json ? ({pageForm: JSON.stringify(this.localPageForm)}) : this.localPageForm,
+          {h5SkeletonLoading: !this.show_loading_overlay}
+      ).then((res) => {
         if (res.code === 0) {
           this.tableData = this.tableData.concat(res.data.list)
           this.localPageForm.totalCount = res.data.totalCount
@@ -123,11 +133,10 @@ module.exports = {
           this.$emit("update:page_form", {...this.localPageForm})
         }
       }).finally(() => {
-        loading.close()
-        console.log(this.tableLoading)
+        if (loading) loading.close()
         this.tableLoading = false
-        console.log(this.tableLoading)
         this.tableRefreshing = false
+        this.$emit("loading-change", {loading: false, initial: isInitialLoad})
       })
     },
     doSearch() {

src/main/resources/static/components/plugins/vantMore/yearVanDropDownItem.vue

@@ -1,5 +1,11 @@
 <template>
-    <van-dropdown-item :options="yearOptions" @change="yearChange" v-model="year"></van-dropdown-item>
+    <van-dropdown-item
+        :options="yearOptions"
+        v-model="year"
+        @change="yearChange"
+        @open="$emit('open')"
+        @close="$emit('close')"
+    ></van-dropdown-item>
 </template>
 
 <script>

src/main/resources/views/layouts/platform_h5.html

@@ -174,6 +174,12 @@
         // 所有 H5 Axios 请求先展示 Loading，等待 200ms 后再真正发出请求。
         window.bindH5AxiosLoading = function(axiosService) {
             axiosService.interceptors.request.use((config) => {
+                // 页面自行展示骨架屏时保留请求延迟，但不叠加全局 Loading 遮罩。
+                if (config.h5SkeletonLoading) {
+                    return new Promise((resolve) => {
+                        setTimeout(() => resolve(config), 200)
+                    })
+                }
                 h5PendingRequestCount++
                 showH5GlobalLoading()
                 return new Promise((resolve) => {
@@ -184,12 +190,16 @@
             })
 
             axiosService.interceptors.response.use((response) => {
-                h5PendingRequestCount = Math.max(0, h5PendingRequestCount - 1)
-                closeH5GlobalLoading()
+                if (!response.config || !response.config.h5SkeletonLoading) {
+                    h5PendingRequestCount = Math.max(0, h5PendingRequestCount - 1)
+                    closeH5GlobalLoading()
+                }
                 return response
             }, (error) => {
-                h5PendingRequestCount = Math.max(0, h5PendingRequestCount - 1)
-                closeH5GlobalLoading()
+                if (!error.config || !error.config.h5SkeletonLoading) {
+                    h5PendingRequestCount = Math.max(0, h5PendingRequestCount - 1)
+                    closeH5GlobalLoading()
+                }
                 return Promise.reject(error)
             })
         }

src/main/resources/views/platform/zhghh5/activity/culture/applyUser.html

@@ -3,79 +3,448 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
-    .list-card {
-        border-radius: 0;
+    body {
+        background-color: #f3f7fd;
     }
 
-    .list-card-body {
-        /* width: calc(100% - 140px);
-         display: flex;*/
-        width: calc(100% - 140px);
+    .culture-activity-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .culture-activity-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .culture-activity-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .culture-activity-page .van-nav-bar .van-icon,
+    .culture-activity-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .culture-activity-content {
+        padding: 12px 12px 0;
+    }
+
+    .culture-activity-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        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);
+    }
+
+    .culture-activity-hero__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67%;
+        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%);
+    }
+
+    .culture-activity-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    .culture-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);
+    }
+
+    .culture-activity-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .culture-activity-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .culture-activity-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .culture-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);
+    }
+
+    .culture-activity-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .culture-activity-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .culture-activity-search .van-field__control::placeholder {
+        color: #a7b0bf;
+    }
+
+    .culture-activity-filter {
+        margin: 0 0 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .culture-activity-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__item {
+        min-width: 0;
+        flex: 1 1 0;
+        overflow: hidden;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__item:last-child {
+        flex-grow: 1.35;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__title {
+        width: 100%;
+        max-width: 100%;
+        padding: 0 15px 0 4px;
+        overflow: hidden;
+        color: #66758a;
+        font-size: 12px;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__title::after {
+        right: 5px;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__title--active,
+    .culture-activity-filter .van-dropdown-item__option--active,
+    .culture-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .culture-activity-filter .van-dropdown-menu__title--down::after {
+        border-color: transparent transparent #1989fa #1989fa;
+    }
+
+    .culture-activity-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        box-sizing: border-box;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .culture-activity-filter .van-dropdown-item__option {
+        min-height: 48px;
+        padding: 0 16px;
+        color: #46566c;
+        font-size: 14px;
+    }
+
+    .culture-activity-filter .van-cell::after {
+        right: 16px;
+        left: 16px;
+    }
+
+    .culture-activity-list {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        gap: 10px;
     }
 
-    .list-card-body .title {
+    .culture-activity-card {
+        position: relative;
+        overflow: hidden;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .culture-activity-card__cover,
+    .culture-activity-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        background-color: #edf4fc;
+    }
+
+    .culture-activity-card__cover {
+        display: block;
+        object-fit: cover;
+    }
+
+    .culture-activity-card__cover-state {
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        font-size: 13px;
+    }
+
+    .culture-activity-card__cover-state .van-icon {
+        font-size: 34px;
+    }
+
+    .culture-activity-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
+    }
+
+    .culture-activity-card__body {
+        padding: 12px 38px 14px 14px;
+    }
+
+    .culture-activity-card__title {
+        min-width: 0;
+        overflow: hidden;
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
+        text-overflow: ellipsis;
         white-space: nowrap;
+    }
+
+    .culture-activity-card__time {
+        margin-top: 4px;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 17px;
+        white-space: nowrap;
+    }
+
+    .culture-activity-card__meta {
+        margin-top: 10px;
+        padding-top: 9px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .culture-activity-card__address {
+        display: flex;
+        align-items: flex-start;
+        color: #69788d;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .culture-activity-card__address .van-icon {
+        margin: 2px 5px 0 0;
+        flex: none;
+        color: #6c9ff8;
+        font-size: 14px;
+    }
+
+    .culture-activity-card__address span {
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 1.1em;
+        white-space: nowrap;
     }
 
-    .list-card-body .time {
-        color: #9a9696;
-        line-height: 20px;
+    .culture-activity-card__tags {
+        display: flex;
+        margin-top: 8px;
+        flex-wrap: wrap;
+        gap: 6px;
     }
 
-    .list-card-body .footer {
-        text-align: right;
+    .culture-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;
     }
 
-    .list-card-body .footer .tag {
-        border: 1px solid transparent;
-        padding: 5px;
-        border-radius: 5px;
+    .culture-activity-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
     }
-    .list-card-img img{
-        width: 100%;
+
+    .culture-activity-card__arrow {
+        position: absolute;
+        top: 164px;
+        right: 14px;
+        color: #b4bdca;
+        font-size: 16px;
+    }
+
+    .culture-activity-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .culture-activity-empty img {
+        display: block;
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        border-radius: 12px;
+        object-fit: contain;
+    }
+
+    .culture-activity-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .culture-activity-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .culture-activity-page .van-list__finished-text,
+    .culture-activity-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
     }
 </style>
 
 <div id="app" v-cloak>
-    <van-nav-bar title="活动列表" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
-    <van-sticky offset-top="46px">
-        <van-dropdown-menu>
-            <year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
-            <van-dropdown-item :options="stateList" @change="doSearch" v-model="pageForm.state"></van-dropdown-item>
-            <van-dropdown-item :options="isEnrolledOptions" @change="doSearch" v-model="pageForm.isEnrolled"></van-dropdown-item>
-            <van-dropdown-item :options="activityTypeOptions" @change="doSearch" v-model="pageForm.activity_type"></van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
-    <table-list api="/platform/activity/culture/applyUser/pageData"
-                :page_form.sync="pageForm"
-                ref="tableListRef"
-                title="name"
-                img="cover"
-                @ready="onReady"
-    >
-        <template v-slot="{index,row}">
-            <table-column label="报名开始时间">
-                {{$moment(row.startTime).format('MM/DD HH:mm')}}
-            </table-column>
-            <table-column label="报名结束时间">
-                {{$moment(row.endTime).format('MM/DD HH:mm')}}
-            </table-column>
-        </template>
-        <template #actions="{index,row}">
-            <template v-if="$moment().isBefore($moment(row.endTime))">
-                <div class="action-btn" @click="openDetail(row)">
-                    <i class="fa fa-edit"></i>
-                    <span>去报名</span>
+    <div class="culture-activity-page">
+        <van-nav-bar title="文化活动" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
+
+        <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="文化活动插画">
+                <div class="culture-activity-hero__copy">
+                    <div class="culture-activity-hero__title">文化活动</div>
+                    <div class="culture-activity-hero__subtitle">丰富生活 · 乐享校园</div>
                 </div>
-            </template>
-        </template>
-    </table-list>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="culture-activity-sticky">
+                    <van-search
+                            v-model="searchKeyword"
+                            class="culture-activity-search"
+                            placeholder="搜索文化活动"
+                            shape="round"
+                            clearable
+                            @search="doSearch"
+                            @clear="doSearch"
+                    ></van-search>
+                    <van-dropdown-menu class="culture-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 :options="stateList" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.state"></van-dropdown-item>
+                        <van-dropdown-item :options="isEnrolledOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.isEnrolled"></van-dropdown-item>
+                        <van-dropdown-item :options="activityTypeOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.activity_type"></van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
+
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="loading" :finished="finished" @load="onLoad">
+                    <div class="culture-activity-list">
+                        <div v-for="row in tableData" :key="row.id" class="culture-activity-card" @click="openDetail(row)">
+                            <img
+                                    v-if="hasCover(row) && !imageLoadErrors[row.id]"
+                                    class="culture-activity-card__cover"
+                                    :src="row.cover"
+                                    :alt="row.name"
+                                    @error="handleImageError(row)"
+                            >
+                            <div v-else class="culture-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
+                                <van-icon name="photo-o"></van-icon>
+                                <span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
+                            </div>
+                            <div class="culture-activity-card__body">
+                                <div class="culture-activity-card__title">{{ row.name }}</div>
+                                <div class="culture-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
+                                    报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
+                                </div>
+                                <div class="culture-activity-card__time" v-if="row.startTime && row.endTime">
+                                    活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
+                                </div>
+                                <div class="culture-activity-card__meta" v-if="row.address || row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
+                                    <div class="culture-activity-card__address" v-if="row.address">
+                                        <van-icon name="location-o"></van-icon>
+                                        <span>{{ row.address }}</span>
+                                    </div>
+                                    <div class="culture-activity-card__tags" v-if="row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
+                                        <span class="culture-activity-card__tag" v-if="row.projectTypeName">
+                                            <span class="culture-activity-card__tag-label">活动类型</span>{{ row.projectTypeName }}
+                                        </span>
+                                        <span class="culture-activity-card__tag" v-if="formatSignUpMethod(row.signUpMethod)">
+                                            <span class="culture-activity-card__tag-label">报名方式</span>{{ formatSignUpMethod(row.signUpMethod) }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <van-icon class="culture-activity-card__arrow" name="arrow"></van-icon>
+                        </div>
+                    </div>
+                </van-list>
+                <div v-if="!loading && tableData.length === 0" class="culture-activity-empty">
+                    <img src="/assets/mobile/img/activity/culture-empty.png" alt="文化活动空状态插画">
+                    <div class="culture-activity-empty__title">暂无文化活动</div>
+                    <div class="culture-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
+                </div>
+            </van-pull-refresh>
+        </div>
+    </div>
 
     <van-popup :style="{ height: '100%',width: '100%'}" position="right" v-model="viewShow">
         <mobile-culture-apply-user :id="viewData.id" @back="back" @submit_back="submit_back" ref="viewInfo"></mobile-culture-apply-user>
@@ -92,10 +461,14 @@ layout("/layouts/platform_h5.html"){
                 finished: false,
                 loading: false,
                 refreshing: false,
+                searchKeyword: "",
+                imageLoadErrors: {},
+                filterOpened: false,
                 pageForm: {
                     state: 2,
                     isEnrolled: 0,
                     year: new Date().getFullYear(),
+                    name: "",
                     pageNumber: 1,
                     pageSize: 5,
                     totalCount: 0,
@@ -128,6 +501,47 @@ layout("/layouts/platform_h5.html"){
             onReady() {
                 this.doSearch()
             },
+            hasCover(row) {
+                return !!(row && row.cover && String(row.cover).trim())
+            },
+            handleImageError(row) {
+                this.$set(this.imageLoadErrors, row.id, true)
+            },
+            formatSignUpMethod(value) {
+                return {
+                    1: "个人报名",
+                    2: "组队报名",
+                    3: "分工会报名"
+                }[Number(value)] || ""
+            },
+            onLoad() {
+                if (!this.finished) this.loadActivities(false)
+            },
+            onRefresh() {
+                this.loadActivities(true)
+            },
+            loadActivities(reset) {
+                if (reset) {
+                    this.pageForm.pageNumber = 1
+                    this.pageForm.totalCount = 0
+                    this.tableData = []
+                    this.finished = false
+                    this.imageLoadErrors = {}
+                }
+                this.loading = true
+                this.$axios.post("/platform/activity/culture/applyUser/pageData", 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
+                })
+            },
 
             openDetail(row) {
                 this.$axios.post('/platform/activity/basic/scope/getScopeUser',{activityGroupId:row.groupId}).then(res=>{
@@ -216,11 +630,8 @@ layout("/layouts/platform_h5.html"){
                     .catch(() => {})
             },
             doSearch() {
-                this.$nextTick(() => {
-                    this.pageForm.pageNumber = 1
-                    this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
-                })
+                this.pageForm.name = this.searchKeyword.trim()
+                this.loadActivities(true)
             }
         },
         created() {

src/main/resources/views/platform/zhghh5/activity/culture/signUp.html

@@ -3,44 +3,182 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
-    .title {
-        padding: 10px;
-        font-size: 1.2em;
-        font-weight: bold;
-        background: #ffffff;
+    body {
+        background-color: #f3f7fd;
+    }
+
+    .culture-detail-page {
+        min-height: 100vh;
+        padding-bottom: calc(78px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .culture-detail-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .culture-detail-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .culture-detail-page .van-nav-bar .van-icon,
+    .culture-detail-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .culture-detail-content {
+        padding: 12px;
+    }
+
+    .culture-detail-overview,
+    .notice,
+    .block,
+    .form-create-h5 {
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .culture-detail-cover {
+        display: block;
+        width: 100%;
+        height: 216px;
+        background-color: #edf4fc;
+    }
+
+    .culture-detail-cover img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .culture-detail-cover-state {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        font-size: 13px;
+    }
+
+    .culture-detail-cover-state .van-icon {
+        font-size: 36px;
+    }
+
+    .culture-detail-summary {
+        padding: 15px 14px 14px;
+    }
+
+    .culture-detail-title {
+        color: #23344a;
+        font-size: 18px;
+        line-height: 26px;
+        font-weight: 600;
+    }
+
+    .culture-detail-tags {
+        display: flex;
+        margin-top: 9px;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .culture-detail-tag {
+        display: inline-flex;
+        padding: 3px 9px;
+        align-items: center;
+        border-radius: 4px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 11px;
+        line-height: 17px;
+    }
+
+    .culture-detail-info {
+        margin-top: 13px;
+        padding-top: 3px;
+        border-top: 1px solid #edf1f6;
     }
 
     .info-item {
         display: flex;
+        min-height: 46px;
+        padding: 10px 0;
+        align-items: flex-start;
+        box-sizing: border-box;
+        border-bottom: 1px solid #edf1f6;
+    }
+
+    .info-item:last-child {
+        border-bottom: 0;
+    }
+
+    .info-item__icon {
+        display: flex;
+        width: 28px;
+        height: 28px;
+        margin-right: 10px;
+        flex: 0 0 28px;
         align-items: center;
-        padding: 20px 15px;
-        border-bottom: 1px solid #ededed;
-        column-gap: 10px;
-        background: #ffffff;
+        justify-content: center;
+        border-radius: 8px;
+        color: #4389e8;
+        background-color: #edf5ff;
+        font-size: 16px;
+    }
+
+    .info-item__content {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .info-item__label {
+        color: #8b98aa;
+        font-size: 12px;
+        line-height: 17px;
+    }
+
+    .info-item__value {
+        margin-top: 2px;
+        color: #34445a;
+        font-size: 13px;
+        line-height: 19px;
+        word-break: break-word;
     }
 
     .left-tag-title::before {
         content: "";
-        width: 5px;
-        background: var(--color-primary);
-        display: inline-block;
         position: absolute;
         left: 0;
-        top: 0;
-        bottom: 0;
+        top: 3px;
+        width: 4px;
+        height: 18px;
+        border-radius: 2px;
+        background: var(--color-primary);
     }
 
     .users {
-        padding: 10px;
-        margin-top: 10px;
-        border-top: 1px solid #e8e0e0;
+        padding: 14px;
+        margin-top: 12px;
+        border-radius: 12px;
         background: #ffffff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
     }
 
     .users-title {
-        font-size: 1.1em;
         position: relative;
-        padding-left: 10px;
+        padding-left: 11px;
+        color: #263548;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
     }
 
     .users-content {
@@ -64,60 +202,133 @@ layout("/layouts/platform_h5.html"){
     }
 
     .block {
-        padding: 10px;
-        margin-top: 10px;
-        border-top: 1px solid #e8e0e0;
-        background: #ffffff;
+        padding: 15px 14px;
+        margin-top: 12px;
     }
 
     .notice {
-        padding: 10px;
-        margin-top: 10px;
-        border-top: 1px solid #e8e0e0;
-        background: #ffffff;
+        margin-top: 12px;
+        padding: 15px 14px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
     }
 
     .notice-title {
-        font-size: 1.1em;
         position: relative;
-        padding-left: 10px;
+        padding: 0 0 10px 11px;
+        border-bottom: 1px solid #edf1f6;
+        color: #263548;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
     }
 
     .notice-content {
-        padding: 10px;
+        padding: 10px 0 0;
         box-sizing: border-box;
     }
 
+    .notice-content,
+    .notice-content div,
+    .notice-content p,
+    .notice-content span,
+    .notice-content li {
+        color: #3f4c5e !important;
+        font-size: 14px !important;
+        line-height: 1.8 !important;
+        word-break: break-word;
+    }
+
+    .notice-content h1,
+    .notice-content h2,
+    .notice-content h3,
+    .notice-content h4,
+    .notice-content h5,
+    .notice-content h6 {
+        margin: 16px 0 10px !important;
+        color: #1f2f43 !important;
+        font-size: 19px !important;
+        line-height: 1.5 !important;
+        font-weight: 600 !important;
+    }
+
+    .notice-content > :first-child,
+    .notice-content > rich-text > :first-child {
+        margin-top: 0 !important;
+    }
+
+    .notice-content p {
+        margin-top: 0 !important;
+        margin-bottom: 8px !important;
+    }
+
     .notice-content img {
         max-width: 100% !important;
+        height: auto !important;
+        border-radius: 8px;
+    }
+
+    .notice-content table {
+        display: block;
+        max-width: 100%;
+        overflow-x: auto;
+        border-collapse: collapse;
     }
 
     .footer {
         position: fixed;
-        background: #ffffff;
-        height: 56px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        right: 0;
         bottom: 0;
         left: 0;
-        right: 0;
+        z-index: 10;
+        display: flex;
+        min-height: 64px;
+        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+        align-items: center;
+        gap: 10px;
+        box-sizing: border-box;
+        border-top: 1px solid #e8eef6;
+        background: rgba(255, 255, 255, .97);
+        box-shadow: 0 -6px 18px rgba(36, 65, 102, .08);
     }
 
     .footer .bottom-button {
-        flex: 1;
         display: flex;
+        min-width: 0;
+        height: 46px;
+        flex: 1;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        color: rgb(255, 255, 255);
-        height: 100%;
+        border-radius: 23px;
+        color: #fff;
+        font-size: 14px;
+        line-height: 18px;
+        box-shadow: 0 6px 16px rgba(25, 137, 250, .2);
+    }
+
+    .footer .bottom-button.is-primary {
+        background-color: var(--color-primary);
+    }
+
+    .footer .bottom-button.is-danger {
+        color: #fff;
+        border: 1px solid #ee5a5a;
+        background-color: #ee5a5a;
+        box-shadow: 0 6px 16px rgba(238, 90, 90, .2);
+    }
+
+    .footer .bottom-button.is-disabled {
+        color: #8b98aa;
+        background-color: #eef2f7;
+        box-shadow: none;
     }
 
     .form-create-h5 {
-        background-color: #ffffff;
-        margin-top: 10px;
-        padding: 10px 10px 56px 10px;
+        margin-top: 12px;
+        padding: 15px 14px;
     }
 
     .form-create-h5 .el-form {
@@ -159,58 +370,139 @@ layout("/layouts/platform_h5.html"){
         margin-right: 0;
     }
 
+    .block .el-select {
+        width: calc(100% - 88px);
+        margin-top: 12px;
+    }
+
+    .block > .el-button,
+    .block > div > .el-button {
+        margin-top: 12px;
+        border-color: var(--color-primary);
+        background-color: var(--color-primary);
+    }
+
+    .block .el-input__inner {
+        border-radius: 8px;
+    }
+
+    .block .el-table {
+        overflow: hidden;
+        border-radius: 8px;
+        color: #566579;
+        font-size: 12px;
+    }
+
+    .block .text-primary {
+        display: block;
+        margin-top: 10px;
+        color: #7b8ba1;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
 </style>
 
 <div id="app" v-cloak>
-    <van-nav-bar @click-left="historyBack" placeholder fixed left-arrow left-text="返回" placeholder
-                 title="活动详情"></van-nav-bar>
+    <div class="culture-detail-page">
+        <van-nav-bar @click-left="historyBack" fixed left-arrow left-text="返回" placeholder title="活动详情"></van-nav-bar>
 
-    <div style="background: #ededed; padding-bottom: 56px">
-        <van-image :src="viewData.cover"></van-image>
-        <div class="title">{{viewData.name}}</div>
-        <div class="info">
+        <main class="culture-detail-content">
+            <section class="culture-detail-overview">
+                <van-image class="culture-detail-cover" :src="viewData.cover" fit="cover">
+                    <template #loading>
+                        <div class="culture-detail-cover-state">
+                            <van-loading type="spinner" color="#1989fa"></van-loading>
+                            <span>图片加载中</span>
+                        </div>
+                    </template>
+                    <template #error>
+                        <div class="culture-detail-cover-state">
+                            <van-icon name="photo-o"></van-icon>
+                            <span>{{ viewData.cover ? '图片加载失败' : '暂无图片' }}</span>
+                        </div>
+                    </template>
+                </van-image>
+                <div class="culture-detail-summary">
+                    <div class="culture-detail-title">{{viewData.name}}</div>
+                    <div class="culture-detail-tags">
+                        <span class="culture-detail-tag" v-if="viewData.projectTypeName">{{viewData.projectTypeName}}</span>
+                        <span class="culture-detail-tag" v-if="viewData.signUpMethod===1">个人报名</span>
+                        <span class="culture-detail-tag" v-else-if="viewData.signUpMethod===2">组队报名</span>
+                        <span class="culture-detail-tag" v-else-if="viewData.signUpMethod===3">分工会报名</span>
+                    </div>
+                    <div class="culture-detail-info">
             <div class="info-item">
-                <van-icon name="underway-o"></van-icon>
-                <div>{{viewData.startTime}}至{{viewData.endTime}}</div>
+                            <div class="info-item__icon"><van-icon name="underway-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">活动时间</div>
+                                <div class="info-item__value">
+                                    {{viewData.startTime ? $moment(viewData.startTime).format('YYYY-MM-DD HH:mm') : '待定'}}
+                                    至
+                                    {{viewData.endTime ? $moment(viewData.endTime).format('YYYY-MM-DD HH:mm') : '待定'}}
+                                </div>
+                            </div>
             </div>
+                        <div class="info-item" v-if="viewData.applyStartTime || viewData.applyEndTime">
+                            <div class="info-item__icon"><van-icon name="clock-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">报名时间</div>
+                                <div class="info-item__value">
+                                    {{viewData.applyStartTime ? $moment(viewData.applyStartTime).format('YYYY-MM-DD HH:mm') : '待定'}}
+                                    至
+                                    {{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('YYYY-MM-DD HH:mm') : '待定'}}
+                                </div>
+                            </div>
+                        </div>
             <div class="info-item">
-                <van-icon name="location-o"></van-icon>
-                <div>{{viewData.address}}</div>
+                            <div class="info-item__icon"><van-icon name="location-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">活动地点</div>
+                                <div class="info-item__value">{{viewData.address || '待定'}}</div>
+                            </div>
             </div>
             <div class="info-item" v-if="viewData.userNumberLimit===1">
-                <van-icon name="location-o"></van-icon>
-                活动限制人数
-                <span>{{viewData.totalUserNumberLimit}}人</span>
+                            <div class="info-item__icon"><van-icon name="friends-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">活动限制人数</div>
+                                <div class="info-item__value">{{viewData.totalUserNumberLimit}}人</div>
+                            </div>
             </div>
             <div class="info-item" v-if="viewData.userNumberLimit===2">
-                <van-icon name="location-o"></van-icon>
-                本工会限制名额
-                <span>{{viewData.unionLimitNum}}人</span>
+                            <div class="info-item__icon"><van-icon name="friends-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">本工会限制名额</div>
+                                <div class="info-item__value">{{viewData.unionLimitNum}}人</div>
+                            </div>
             </div>
             <div class="info-item">
-                <van-icon name="location-o"></van-icon>
-                报名方式：
-                <span v-if="viewData.signUpMethod===1" style="color: var(--color-primary)">个人报名</span>
-                <span v-if="viewData.signUpMethod===2" style="color: var(--color-primary)">组队报名</span>
-                <span v-if="viewData.signUpMethod===3" style="color: var(--color-primary)">分工会报名</span>
+                            <div class="info-item__icon"><van-icon name="records"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">报名方式</div>
+                                <div class="info-item__value">
+                                    <span v-if="viewData.signUpMethod===1">个人报名</span>
+                                    <span v-else-if="viewData.signUpMethod===2">组队报名</span>
+                                    <span v-else-if="viewData.signUpMethod===3">分工会报名</span>
+                                    <span v-else>无需报名</span>
+                                </div>
+                            </div>
             </div>
             <div class="info-item" v-if="viewData.signUpMethod==3">
-                <van-icon name="location-o"></van-icon>
-                组队人数：
-                <span style="color: var(--color-primary)">{{viewData.teamNum}}</span>
-                人
+                            <div class="info-item__icon"><van-icon name="cluster-o"></van-icon></div>
+                            <div class="info-item__content">
+                                <div class="info-item__label">组队人数</div>
+                                <div class="info-item__value">{{viewData.teamNum}}人</div>
+                            </div>
             </div>
-            <!--            <div class="info-item" v-if="viewData.signUpMethod==1">-->
-            <!--                <van-icon name="location-o"></van-icon>-->
-            <!--                报名人数：-->
-            <!--                <span style="color: var(&#45;&#45;color-primary)">2</span>-->
-            <!--                人-->
-            <!--            </div>-->
-        </div>
+                    </div>
+                </div>
+            </section>
 
         <div class="notice">
             <div class="notice-title left-tag-title">活动详情</div>
-            <rich-text :value="viewData.activityContent" :height="300"></rich-text>
+            <div class="notice-content">
+                <rich-text :value="viewData.activityContent" :height="300"></rich-text>
+            </div>
         </div>
 
         <!-- 个人报名 啥也不要-->
@@ -327,27 +619,31 @@ layout("/layouts/platform_h5.html"){
             <form-create :value.sync="dynamicFormData" v-model="fapi" :rule="formCreateRule"
                          :option="formCreateOption"></form-create>
         </div>
-    </div>
+        </main>
 
-    <div class="footer">
-        <div class="bottom-button" style="background: var(--color-primary)" v-if="!isSignUp && inApplyTime"
-             @click="onConfirm">
-            <span>立即报名</span>
-            <span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
+        <div class="footer">
+            <div class="bottom-button is-primary" v-if="!isSignUp && inApplyTime" @click="onConfirm">
+                <span>立即报名</span>
+                <span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
+            </div>
+
+            <div class="bottom-button is-primary" v-if="isSignUp && inApplyTime" @click="onConfirmAgain">
+                <span>重新提交</span>
+                <span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
+            </div>
+
+            <div class="bottom-button is-danger" v-if="isSignUp && inApplyTime" @click="onCancel">
+                <span>取消报名</span>
+                <span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
+            </div>
+
+            <div class="bottom-button is-disabled"
+                 v-if="viewData.applyEndTime && $moment(viewData.applyEndTime).valueOf() < $moment().valueOf() && $moment(viewData.endTime).valueOf() >= $moment().valueOf()">
+                已过报名时间
+            </div>
+
+            <div class="bottom-button is-disabled" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
         </div>
-
-        <div class="bottom-button" style="background: var(--color-primary)" v-if="isSignUp && inApplyTime"
-             @click="onConfirmAgain">
-            <span>重新提交</span>
-            <span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
-        </div>
-
-        <div class="bottom-button" style="background: red" v-if="isSignUp && inApplyTime" @click="onCancel">
-            <span>取消报名</span>
-            <span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
-        </div>
-
-        <div class="bottom-button" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
     </div>
 </div>
 

src/main/resources/views/platform/zhghh5/activity/sports/applyUser.html

@@ -2,53 +2,682 @@
 layout("/layouts/platform_h5.html"){
 #-->
 <style>
-    .van-tag--default {
-        background-color: #f1f1f1 !important;
+    body {
+        background-color: #f3f7fd;
+    }
+
+    .sports-activity-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .sports-activity-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .sports-activity-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .sports-activity-page .van-nav-bar .van-icon,
+    .sports-activity-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .sports-activity-content {
+        padding: 12px 12px 0;
+    }
+
+    .sports-activity-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        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);
+    }
+
+    .sports-activity-hero__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67%;
+        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%);
+    }
+
+    .sports-activity-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    .sports-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);
+    }
+
+    .sports-activity-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .sports-activity-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .sports-activity-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .sports-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);
+    }
+
+    .sports-activity-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .sports-activity-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .sports-activity-search .van-field__control::placeholder {
+        color: #a7b0bf;
+    }
+
+    .sports-activity-filter {
+        margin: 0 0 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .sports-activity-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .sports-activity-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .sports-activity-filter .van-dropdown-menu__title {
+        color: #66758a;
+        font-size: 14px;
+    }
+
+    .sports-activity-filter .van-dropdown-menu__title--active,
+    .sports-activity-filter .van-dropdown-item__option--active,
+    .sports-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .sports-activity-filter .van-dropdown-menu__title--down::after {
+        border-color: transparent transparent #1989fa #1989fa;
+    }
+
+    .sports-activity-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        box-sizing: border-box;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .sports-activity-filter .van-dropdown-item__option {
+        min-height: 48px;
+        padding: 0 16px;
+        color: #46566c;
+        font-size: 14px;
+    }
+
+    .sports-activity-filter .van-cell::after {
+        right: 16px;
+        left: 16px;
+    }
+
+    .sports-activity-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .sports-activity-card {
+        display: flex;
+        min-height: 74px;
+        padding: 14px;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .sports-activity-card {
+        position: relative;
+        min-height: 0;
+        padding: 0;
+        overflow: hidden;
+        align-items: stretch;
+        flex-direction: column;
+        cursor: pointer;
+    }
+
+    .sports-activity-card__icon {
+        display: flex;
+        width: 38px;
+        height: 38px;
+        margin-right: 12px;
+        flex: 0 0 38px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9px;
+        color: #4d91ef;
+        background-color: #edf4ff;
+        font-size: 24px;
+    }
+
+    .sports-activity-card__body {
+        min-width: 0;
+        padding: 12px 38px 14px 14px;
+        box-sizing: border-box;
+        flex: none;
+    }
+
+    .sports-activity-card__cover {
+        display: block;
+        width: 100%;
+        height: 150px;
+        margin: 0;
+        flex: 0 0 150px;
+        object-fit: cover;
+        border-radius: 0;
+        background-color: #edf4ff;
+    }
+
+    .sports-activity-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        flex: 0 0 150px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        background-color: #edf4fc;
+        font-size: 13px;
+    }
+
+    .sports-activity-card__cover-state .van-icon {
+        font-size: 34px;
+    }
+
+    .sports-activity-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
+    }
+
+    .sports-activity-card > .sports-activity-card__icon {
+        width: 100%;
+        height: 150px;
+        margin: 0;
+        flex: 0 0 150px;
+        border-radius: 0;
+        font-size: 40px;
+    }
+
+    .sports-activity-card__title {
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
+    }
+
+    .sports-activity-card__title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sports-activity-card__time {
+        margin-top: 4px;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 17px;
+        white-space: nowrap;
+    }
+
+    .sports-activity-card__meta {
+        margin-top: 10px;
+        padding-top: 9px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .sports-activity-card__address {
+        display: flex;
+        align-items: flex-start;
+        color: #69788d;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .sports-activity-card__address .van-icon {
+        margin: 2px 5px 0 0;
+        flex: none;
+        color: #6c9ff8;
+        font-size: 14px;
+    }
+
+    .sports-activity-card__address span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sports-activity-card__tags {
+        display: flex;
+        margin-top: 8px;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .sports-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;
+    }
+
+    .sports-activity-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
+    }
+
+    .sports-activity-card__arrow {
+        position: absolute;
+        top: 164px;
+        right: 14px;
+        color: #b4bdca;
+        font-size: 16px;
+    }
+
+    .sports-activity-empty-illustration {
+        display: flex;
+        min-height: 250px;
+        padding: 24px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .sports-activity-empty-illustration img {
+        display: block;
+        width: 86%;
+        max-width: 300px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .sports-activity-empty-illustration__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .sports-activity-empty-illustration__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .activity-notification-popup,
+    .activity-notification-page {
+        background-color: #f3f7fd;
+    }
+
+    .activity-notification-page {
+        position: relative;
+        min-height: 100vh;
+    }
+
+    .activity-notification-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .activity-notification-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .activity-notification-page .van-nav-bar .van-icon,
+    .activity-notification-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .activity-notification-scroll {
+        height: calc(100vh - 46px);
+        padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .activity-notification-hero {
+        display: flex;
+        min-height: 82px;
+        padding: 16px;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+    }
+
+    .activity-notification-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;
+    }
+
+    .activity-notification-hero__title {
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    .activity-notification-hero__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .activity-notification-card {
+        margin-top: 12px;
+        padding: 18px 16px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .activity-notification-content,
+    .activity-notification-content div,
+    .activity-notification-content p,
+    .activity-notification-content span,
+    .activity-notification-content li {
+        color: #3f4c5e !important;
+        font-size: 14px !important;
+        line-height: 1.8 !important;
+        word-break: break-word;
+    }
+
+    .activity-notification-content h1,
+    .activity-notification-content h2,
+    .activity-notification-content h3 {
+        margin: 16px 0 10px !important;
+        color: #1f2f43 !important;
+        font-size: 19px !important;
+        line-height: 1.5 !important;
+        font-weight: 600 !important;
+    }
+
+    .activity-notification-content > :first-child {
+        margin-top: 0 !important;
+    }
+
+    .activity-notification-content p {
+        margin-top: 0 !important;
+        margin-bottom: 8px !important;
+    }
+
+    .activity-notification-content img {
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 8px;
+    }
+
+    .activity-notification-content table {
+        display: block;
+        max-width: 100%;
+        overflow-x: auto;
+        border-collapse: collapse;
+    }
+
+    .activity-notification-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;
+    }
+
+    .activity-notification-empty .van-icon {
+        color: #83b5f4;
+        font-size: 36px;
+    }
+
+    .activity-notification-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;
+    }
+
+    .activity-notification-footer .van-button {
+        height: 42px;
+        border: 0;
+        font-size: 15px;
+        background-color: #1989fa;
+        box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
+    }
+
+    .activity-notification-footer .van-button.is-disabled,
+    .activity-notification-footer .van-button--disabled {
+        color: #8b98aa !important;
+        background-color: #eef2f7 !important;
+        opacity: 1;
+        box-shadow: none;
     }
 </style>
 
 <div id="app" v-cloak>
-    <van-nav-bar title="活动列表" @click-left="()=>this.$pjaxReplace('/platform/home')" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
-    <van-sticky offset-top="46px">
-        <van-dropdown-menu>
-            <year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
-            <van-dropdown-item :options="stateList" @change="doSearch"
-                               v-model="pageForm.isActivity"></van-dropdown-item>
-            <van-dropdown-item :options="applyStatusOptions" @change="doSearch"
-                               v-model="pageForm.applyStatus"></van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
+    <div class="sports-activity-page">
+        <van-nav-bar
+                title="体育活动"
+                left-arrow
+                left-text="返回"
+                fixed
+                placeholder
+                @click-left="goBack"
+        ></van-nav-bar>
 
-    <table-list api="/platform/activity/apply/h5/activityData"
-                :page_form.sync="pageForm"
-                ref="tableListRef"
-                title="NAME"
-                img="image"
-                @ready="onReady"
-    >
-        <template v-slot="{index,row}">
-            <table-column label="报名时间">
-                {{$moment(row.applyStartTime).format('MM/DD HH:mm') + '~' + $moment(row.applyEndTime).format('MM/DD HH:mm')}}
-            </table-column>
-            <table-column label="活动时间">
-                {{$moment(row.startTime).format('MM/DD HH:mm') + '~' + $moment(row.endTime).format('MM/DD HH:mm')}}
-            </table-column>
-        </template>
-        <template #actions="{index,row}">
-            <template v-if="$moment().isBefore($moment(row.applyEndTime))">
-                <div class="action-btn" @click="openView(row)">
-                    <i class="fa fa-edit"></i>
-                    <span>去报名</span>
+        <div class="sports-activity-content">
+            <section class="sports-activity-hero">
+                <img
+                        class="sports-activity-hero__image"
+                        src="/assets/mobile/img/home/v4/feature-activity.png"
+                        alt="体育活动插画"
+                >
+                <div class="sports-activity-hero__copy">
+                    <div class="sports-activity-hero__title">体育活动</div>
+                    <div class="sports-activity-hero__subtitle">强健体魄 · 运动同行</div>
                 </div>
-            </template>
-        </template>
-    </table-list>
+            </section>
 
-    <activity_event_notification
-            :event_notification="viewData.eventNotification"
-            :id="viewData.id"
-            ref="eventNotification"
-    ></activity_event_notification>
+            <van-sticky :offset-top="46">
+                <div class="sports-activity-sticky">
+                    <van-search
+                            v-model="searchKeyword"
+                            class="sports-activity-search"
+                            placeholder="搜索体育活动"
+                            shape="round"
+                            clearable
+                            @search="doSearch"
+                            @clear="doSearch"
+                    ></van-search>
+
+                    <van-dropdown-menu
+                            class="sports-activity-filter"
+                            :class="{'is-open': filterOpened}"
+                            active-color="#1989fa"
+                    >
+                        <year-van-dropdown-item
+                                :num="5"
+                                v-model="pageForm.year"
+                                @change="doSearch"
+                                @open="filterOpened = true"
+                                @close="filterOpened = false"
+                        ></year-van-dropdown-item>
+                        <van-dropdown-item
+                                v-model="pageForm.isActivity"
+                                :options="stateList"
+                                @change="doSearch"
+                                @open="filterOpened = true"
+                                @close="filterOpened = false"
+                        ></van-dropdown-item>
+                        <van-dropdown-item
+                                v-model="pageForm.applyStatus"
+                                :options="applyStatusOptions"
+                                @change="doSearch"
+                                @open="filterOpened = true"
+                                @close="filterOpened = false"
+                        ></van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
+
+            <div class="sports-activity-list">
+                <div
+                        v-for="row in activityList"
+                        :key="row.id"
+                        class="sports-activity-card"
+                        @click="openView(row)"
+                >
+                    <img
+                            v-if="hasActivityImage(row) && !imageLoadErrors[row.id]"
+                            class="sports-activity-card__cover"
+                            :src="row.image"
+                            :alt="row.NAME || row.name"
+                            @error="handleImageError(row)"
+                    >
+                    <div
+                            v-else
+                            class="sports-activity-card__cover-state"
+                            :class="{'is-error': hasActivityImage(row)}"
+                    >
+                        <van-icon name="photo-o"></van-icon>
+                        <span>{{ hasActivityImage(row) ? '图片加载失败' : '暂无图片' }}</span>
+                    </div>
+                    <div class="sports-activity-card__body">
+                        <div class="sports-activity-card__title">{{ row.NAME || row.name }}</div>
+                        <div class="sports-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
+                            报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
+                        </div>
+                        <div class="sports-activity-card__time" v-if="row.startTime && row.endTime">
+                            活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
+                        </div>
+                        <div class="sports-activity-card__meta" v-if="row.address || formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
+                            <div class="sports-activity-card__address" v-if="row.address">
+                                <van-icon name="location-o"></van-icon>
+                                <span>{{ row.address }}</span>
+                            </div>
+                            <div class="sports-activity-card__tags" v-if="formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
+                                <span class="sports-activity-card__tag" v-if="formatGameStyle(row.gameStyle)">
+                                    <span class="sports-activity-card__tag-label">竞赛方式</span>{{ formatGameStyle(row.gameStyle) }}
+                                </span>
+                                <span class="sports-activity-card__tag" v-if="formatApplyType(row.applyType)">
+                                    <span class="sports-activity-card__tag-label">活动类型</span>{{ formatApplyType(row.applyType) }}
+                                </span>
+                                <span class="sports-activity-card__tag" v-if="formatApplyWay(row.applyWay)">
+                                    <span class="sports-activity-card__tag-label">报名方式</span>{{ formatApplyWay(row.applyWay) }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <van-icon class="sports-activity-card__arrow" name="arrow"></van-icon>
+                </div>
+
+                <div v-if="activityList.length === 0" class="sports-activity-empty-illustration">
+                    <img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动空状态插画">
+                    <div class="sports-activity-empty-illustration__title">{{ emptyText }}</div>
+                    <div class="sports-activity-empty-illustration__hint">{{ emptyHint }}</div>
+                </div>
+            </div>
+        </div>
+
+        <activity_event_notification
+                :event_notification="viewData.eventNotification"
+                :id="viewData.id"
+                :apply_start_time="viewData.applyStartTime"
+                :apply_end_time="viewData.applyEndTime"
+                ref="eventNotification"
+        ></activity_event_notification>
+    </div>
 </div>
 
 <script nonce="${cspNonce!}">
@@ -57,52 +686,106 @@ layout("/layouts/platform_h5.html"){
         el: "#app",
         data() {
             return {
-                tableData: [],
-                finished: false,
-                loading: false,
+                activityList: [],
+                searchKeyword: "",
+                imageLoadErrors: {},
+                filterOpened: false,
                 pageForm: {
                     isActivity: 2,
                     applyStatus: 1,
-                    year: new Date().getFullYear(),
-                    pageNumber: 1,
-                    pageSize: 5,
-                    totalCount: 0
+                    year: new Date().getFullYear()
                 },
-                yearList: [],
+                stateList: [
+                    {value: 1, text: "全部活动"},
+                    {value: 2, text: "报名中"},
+                    {value: 3, text: "报名已结束"}
+                ],
                 applyStatusOptions: [
                     {value: 1, text: "未报名"},
                     {value: 2, text: "已报名"}
                 ],
-                stateList: [
-                    {value: 1, text: "全部"},
-                    {value: 2, text: "报名中"},
-                    {value: 3, text: "报名已结束"}
-                ],
-                subLoading: false,
-                viewShow: false,
                 viewData: {}
             }
         },
+        computed: {
+            emptyText() {
+                if (this.searchKeyword.trim()) return "未找到相关体育活动"
+                if (this.pageForm.isActivity === 3) return "暂无已结束的体育活动"
+                if (this.pageForm.isActivity === 2) return "暂无报名中的体育活动"
+                return "暂无体育活动"
+            },
+            emptyHint() {
+                return this.searchKeyword.trim() ? "请尝试更换搜索关键词" : "当前筛选条件下暂时没有活动"
+            }
+        },
         components: {
             activity_event_notification: ACTIVITY_EVENT_NOTIFICATION
         },
         methods: {
+            goBack() {
+                this.$pjaxReplace("/platform/home")
+            },
             openView(row) {
                 this.viewData = row
-                this.$refs.eventNotification.viewShow = true
-            },
-            doSearch() {
                 this.$nextTick(() => {
-                    this.pageForm.pageNumber = 1
-                    this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
+                    this.$refs.eventNotification.viewShow = true
                 })
             },
-            onReady() {
-                this.doSearch()
+            doSearch() {
+                this.loadActivities()
             },
+            hasActivityImage(row) {
+                return !!(row && row.image && String(row.image).trim())
+            },
+            handleImageError(row) {
+                this.$set(this.imageLoadErrors, row.id, true)
+            },
+            formatGameStyle(value) {
+                return {
+                    1: "竞赛类",
+                    2: "非竞赛类"
+                }[Number(value)] || ""
+            },
+            formatApplyType(value) {
+                return {
+                    1: "单一团体赛",
+                    2: "综合赛",
+                    3: "个人赛"
+                }[Number(value)] || ""
+            },
+            formatApplyWay(value) {
+                if (value === null || value === undefined || value === "") return ""
+                let values = value
+                if (typeof values === "string") {
+                    try {
+                        values = JSON.parse(values)
+                    } catch (e) {
+                        values = values.split(",")
+                    }
+                }
+                if (!Array.isArray(values)) values = [values]
+                const labels = {
+                    1: "个人报名",
+                    2: "分工会报名",
+                    3: "小程序报名"
+                }
+                return values.map(item => labels[Number(item)]).filter(Boolean).join("、")
+            },
+            loadActivities() {
+                this.activityList = []
+                this.imageLoadErrors = {}
+                const queryForm = Object.assign({}, this.pageForm, {
+                    searchKeyword: this.searchKeyword.trim()
+                })
+                this.$axios.post("/platform/activity/apply/h5/activityData", queryForm).then((res) => {
+                    if (res.code === 0) {
+                        this.activityList = res.data && res.data.list ? res.data.list : []
+                    }
+                })
+            }
         },
         created() {
+            this.loadActivities()
         }
     })
 </script>

src/main/resources/views/platform/zhghh5/activity/sports/eventList.html

@@ -1,8 +1,259 @@
 <!--#
 layout("/layouts/platform_h5.html"){
 #-->
+<style>
+    body {
+        background-color: #f3f7fd;
+    }
+
+    .sports-event-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .sports-event-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .sports-event-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .sports-event-page .van-nav-bar .van-icon,
+    .sports-event-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .sports-event-summary {
+        display: flex;
+        min-height: 82px;
+        margin: 12px 12px 0;
+        padding: 16px;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+    }
+
+    .sports-event-summary__icon {
+        display: flex;
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        overflow: hidden;
+        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;
+    }
+
+    .sports-event-summary__body {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .sports-event-summary__title {
+        overflow: hidden;
+        color: #fff;
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sports-event-summary__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .sports-event-list-head {
+        display: flex;
+        margin: 16px 14px 8px;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .sports-event-list-head__title {
+        color: #263548;
+        font-size: 16px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .sports-event-list-head__count {
+        color: #8d9aad;
+        font-size: 12px;
+    }
+
+    .sports-event-page .table-list {
+        padding: 0 12px;
+    }
+
+    .sports-event-page .table-card {
+        margin-bottom: 12px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .sports-event-page .table-card > .van-image,
+    .sports-event-page .table-card > .van-image img {
+        display: block;
+        border-radius: 12px 12px 0 0;
+    }
+
+    .sports-event-page .table-card .van-cell {
+        padding: 9px 16px;
+        color: #566579;
+        font-size: 13px;
+        background-color: #fff;
+    }
+
+    .sports-event-page .table-card .van-cell:first-of-type {
+        padding-top: 15px;
+        padding-bottom: 12px;
+    }
+
+    .sports-event-page .table-card .van-cell::after {
+        right: 16px;
+        left: 16px;
+        border-color: #edf1f6;
+    }
+
+    .sports-event-page .table-card .van-cell__title {
+        color: #66758a;
+    }
+
+    .sports-event-page .table-card .van-cell__value,
+    .sports-event-page .table-card .van-cell__right-icon {
+        color: #263548;
+    }
+
+    .sports-event-page .table-card .font-size3 {
+        color: #23344a;
+        font-size: 16px;
+        line-height: 23px;
+        font-weight: 600;
+    }
+
+    .sports-event-page .table-card .van-tag {
+        padding: 3px 7px;
+        justify-content: center;
+        border: 0;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 11px;
+    }
+
+    .sports-event-page .table-card .sports-event-status-tag.is-pending {
+        color: #397de0;
+        background-color: #edf5ff;
+    }
+
+    .sports-event-page .table-card .sports-event-status-tag.is-success {
+        color: #35a86b;
+        background-color: #eaf8f1;
+    }
+
+    .sports-event-page .table-card .sports-event-status-tag.is-rejected {
+        color: #df5b59;
+        background-color: #fff1f0;
+    }
+
+    .sports-event-page .table-card-footer {
+        padding: 12px 16px;
+        background-color: #f8fbff;
+    }
+
+    .sports-event-page .table-card-footer .van-cell__value {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .sports-event-page .table-card-footer .van-button {
+        min-width: 78px;
+        height: 32px;
+        padding: 0 14px;
+        border: 0;
+        border-radius: 16px;
+        font-size: 13px;
+    }
+
+    .sports-event-page .table-card-footer .van-button i {
+        margin-right: 6px;
+        font-size: 16px;
+    }
+
+    .sports-event-page .table-card-footer .sports-event-apply-button {
+        color: #fff !important;
+        border-color: #1989fa !important;
+        background-color: #1989fa !important;
+        box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
+    }
+
+    .sports-event-page .table-card-footer .sports-event-cancel-button {
+        color: #fff !important;
+        border-color: #e84d4f !important;
+        background-color: #e84d4f !important;
+        box-shadow: 0 5px 12px rgba(232, 77, 79, .16);
+    }
+
+    .sports-event-page .van-list__finished-text,
+    .sports-event-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+    }
+
+    .sports-event-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;
+    }
+
+    .sports-event-empty img {
+        display: block;
+        width: 82%;
+        max-width: 300px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .sports-event-empty__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .sports-event-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+</style>
 
 <div id="app" v-cloak>
+    <div class="sports-event-page">
     <van-sticky>
         <van-nav-bar
                 @click-left="historyBack"
@@ -13,6 +264,21 @@ layout("/layouts/platform_h5.html"){
         ></van-nav-bar>
     </van-sticky>
 
+    <div class="sports-event-summary">
+        <div class="sports-event-summary__icon">
+            <van-icon name="award-o"></van-icon>
+        </div>
+        <div class="sports-event-summary__body">
+            <div class="sports-event-summary__title">体育活动项目</div>
+            <div class="sports-event-summary__subtitle">选择适合的项目，参与健康运动</div>
+        </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>
+
     <div>
         <van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0"
                   v-model="loading">
@@ -28,14 +294,14 @@ layout("/layouts/platform_h5.html"){
                         <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 type="primary" v-if="row.status===1">待审核</van-tag>
-                                <van-tag type="success" v-if="row.status===2">已成功报名</van-tag>
-                                <van-tag type="danger" v-if="row.status===3">审核不通过</van-tag>
+                                <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 style="display: flex; justify-content: flex-end" v-else>
-                                <van-tag type="primary" v-if="row.status2===0">待审核</van-tag>
-                                <van-tag type="success" v-if="row.status2===2">已成功报名</van-tag>
-                                <van-tag type="danger" v-if="row.status2===3">审核不通过</van-tag>
+                                <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>
                         </template>
                     </van-cell>
@@ -75,28 +341,30 @@ layout("/layouts/platform_h5.html"){
                     </van-cell>
                     <van-cell class="table-card-footer">
                         <div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
-                            <van-button :loading="subLoading" @click="signUpUser(row)" round
+                            <van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
                                         size="small"
                                         type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply===0">
-                                报 名
+                                <i class="fa fa-sign-in"></i>
+                                我要报名
                             </van-button>
-                            <van-button :loading="subLoading" @click="cancelApply(row)" round
+                            <van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
                                         size="small"
-                                        color="#dd6363"
                                         type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply>0">
+                                <i class="fa fa-trash"></i>
                                 取消报名
                             </van-button>
                         </div>
                         <div v-else>
-                            <van-button :loading="subLoading" @click="signUpUser(row)" round
+                            <van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
                                         size="small"
                                         type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
-                                报 名
+                                <i class="fa fa-sign-in"></i>
+                                我要报名
                             </van-button>
-                            <van-button :loading="subLoading" @click="cancelApply(row)" round
+                            <van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
                                         size="small"
-                                        color="#dd6363"
                                         type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
+                                <i class="fa fa-trash"></i>
                                 取消报名
                             </van-button>
                         </div>
@@ -104,8 +372,12 @@ layout("/layouts/platform_h5.html"){
                 </div>
             </div>
         </van-list>
-        <van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"
-                   v-else></van-empty>
+        <div class="sports-event-empty" v-else>
+            <img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动项目空状态插画">
+            <div class="sports-event-empty__title">暂无可报名项目</div>
+            <div class="sports-event-empty__hint">当前活动暂未发布可报名项目</div>
+        </div>
+    </div>
     </div>
 </div>
 

src/main/resources/views/platform/zhghh5/activity/sports/eventNotification.js

@@ -1,16 +1,47 @@
 let ACTIVITY_EVENT_NOTIFICATION = {
     template: `
-    <div>
-        <van-popup :style="{ height: '100%',width: '100%'}" position="right"  safe-area-inset-bottom v-model="viewShow">
-          <van-sticky>
-            <van-nav-bar @click-left="viewShow=false" left-arrow left-text="返回" title="活动通知"></van-nav-bar>
-          </van-sticky>
-            <div style="height: calc(100vh - 44px); overflow-y: auto">
-                <div v-html="event_notification"class="paddingX10" style="padding-bottom: 44px;white-space: pre-wrap;overflow-x: hidden" v-if="event_notification"></div>    
-                <div v-else>暂无</div>
-            <van-button @click="openReg" block style="position: fixed; bottom: 0;"
-                            type="primary">进入报名
-            </van-button>
+    <div class="activity-notification-component">
+        <van-popup
+                v-model="viewShow"
+                class="activity-notification-popup"
+                :style="{ height: '100%', width: '100%' }"
+                position="right"
+                safe-area-inset-bottom
+        >
+            <div class="activity-notification-page">
+                <van-sticky>
+                    <van-nav-bar
+                            title="活动通知"
+                            left-arrow
+                            left-text="返回"
+                            @click-left="viewShow = false"
+                    ></van-nav-bar>
+                </van-sticky>
+
+                <div class="activity-notification-scroll">
+                    <div class="activity-notification-hero">
+                        <div class="activity-notification-hero__icon">
+                            <van-icon name="description"></van-icon>
+                        </div>
+                        <div>
+                            <div class="activity-notification-hero__title">活动报名须知</div>
+                            <div class="activity-notification-hero__subtitle">请仔细阅读活动安排与报名要求</div>
+                        </div>
+                    </div>
+
+                    <article v-if="event_notification" class="activity-notification-card">
+                        <div class="activity-notification-content" v-html="event_notification"></div>
+                    </article>
+                    <div v-else class="activity-notification-empty">
+                        <van-icon name="description"></van-icon>
+                        <span>暂无活动通知</span>
+                    </div>
+                </div>
+
+                <div class="activity-notification-footer">
+                    <van-button v-if="inApplyTime" type="primary" round block @click="openReg">进入报名</van-button>
+                    <van-button v-else class="is-disabled" disabled round block>{{ applyStatusText }}</van-button>
+                </div>
             </div>
         </van-popup>
     </div>
@@ -21,6 +52,12 @@ let ACTIVITY_EVENT_NOTIFICATION = {
         },
         id: {
             value: { type: String, default: "暂无" }
+        },
+        apply_start_time: {
+            value: { type: String, default: "" }
+        },
+        apply_end_time: {
+            value: { type: String, default: "" }
         }
     },
     data() {
@@ -28,9 +65,189 @@ let ACTIVITY_EVENT_NOTIFICATION = {
             viewShow: false
         }
     },
+    computed: {
+        // 详情页统一控制报名入口状态，活动列表仅负责进入详情。
+        inApplyTime() {
+            if (!this.apply_start_time || !this.apply_end_time) return false
+            const now = Date.now()
+            return now >= this.$moment(this.apply_start_time).valueOf()
+                && now <= this.$moment(this.apply_end_time).valueOf()
+        },
+        applyStatusText() {
+            if (!this.apply_start_time || !this.apply_end_time) return "当前不可报名"
+            if (Date.now() < this.$moment(this.apply_start_time).valueOf()) return "报名未开始"
+            return "已过报名时间"
+        }
+    },
     methods: {
         openReg() {
             this.$pjaxReplace("/platform/activity/apply/h5/eventList?activityId=" + this.id)
         }
-    }
+    },
+    style: /*language=CSS*/ `
+        .activity-notification-popup {
+            background-color: #f3f7fd;
+        }
+
+        .activity-notification-page {
+            position: relative;
+            min-height: 100vh;
+            background-color: #f3f7fd;
+        }
+
+        .activity-notification-page /deep/ .van-nav-bar {
+            background-color: #fff;
+        }
+
+        .activity-notification-page /deep/ .van-nav-bar__title {
+            color: #1f2937;
+            font-size: 16px;
+        }
+
+        .activity-notification-page /deep/ .van-nav-bar .van-icon,
+        .activity-notification-page /deep/ .van-nav-bar__text {
+            color: #397fbd;
+        }
+
+        .activity-notification-scroll {
+            height: calc(100vh - 46px);
+            padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
+            overflow-x: hidden;
+            overflow-y: auto;
+            box-sizing: border-box;
+        }
+
+        .activity-notification-hero {
+            display: flex;
+            min-height: 82px;
+            padding: 16px;
+            align-items: center;
+            box-sizing: border-box;
+            border-radius: 12px;
+            color: #fff;
+            background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+            box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+        }
+
+        .activity-notification-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;
+        }
+
+        .activity-notification-hero__title {
+            font-size: 17px;
+            line-height: 24px;
+            font-weight: 600;
+        }
+
+        .activity-notification-hero__subtitle {
+            margin-top: 3px;
+            font-size: 12px;
+            line-height: 18px;
+            opacity: .9;
+        }
+
+        .activity-notification-card {
+            margin-top: 12px;
+            padding: 18px 16px;
+            overflow: hidden;
+            border-radius: 12px;
+            background-color: #fff;
+            box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        }
+
+        .activity-notification-content {
+            color: #3f4c5e;
+            font-size: 14px;
+            line-height: 1.8;
+            white-space: normal;
+            word-break: break-word;
+        }
+
+        .activity-notification-content /deep/ h1,
+        .activity-notification-content /deep/ h2,
+        .activity-notification-content /deep/ h3 {
+            margin: 0 0 12px !important;
+            color: #1f2f43 !important;
+            font-size: 20px !important;
+            line-height: 1.5 !important;
+            font-weight: 600 !important;
+        }
+
+        .activity-notification-content /deep/ p {
+            margin: 0 0 8px !important;
+            font-size: 14px !important;
+            line-height: 1.8 !important;
+        }
+
+        .activity-notification-content /deep/ img {
+            max-width: 100% !important;
+            height: auto !important;
+            border-radius: 8px;
+        }
+
+        .activity-notification-content /deep/ table {
+            display: block;
+            max-width: 100%;
+            overflow-x: auto;
+            border-collapse: collapse;
+        }
+
+        .activity-notification-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;
+        }
+
+        .activity-notification-empty /deep/ .van-icon {
+            color: #83b5f4;
+            font-size: 36px;
+        }
+
+        .activity-notification-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;
+        }
+
+        .activity-notification-footer /deep/ .van-button {
+            height: 42px;
+            border: 0;
+            font-size: 15px;
+            background-color: #1989fa;
+            box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
+        }
+
+        .activity-notification-footer /deep/ .van-button.is-disabled,
+        .activity-notification-footer /deep/ .van-button--disabled {
+            color: #8b98aa !important;
+            background-color: #eef2f7 !important;
+            opacity: 1;
+            box-shadow: none;
+        }
+    `
 }

src/main/resources/views/platform/zhghh5/activity/trainSignUp/apply/index.html

@@ -2,93 +2,621 @@
 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;
+
+    .brand-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%;
+
+    .brand-activity-page .van-nav-bar {
+        background-color: #fff;
     }
-    .info-img {
-        display: block;
+
+    .brand-activity-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
     }
-    .van-count-down {
+
+    .brand-activity-page .van-nav-bar .van-icon,
+    .brand-activity-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .brand-activity-content {
+        padding: 12px 12px 0;
+    }
+
+    .brand-activity-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        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);
+    }
+
+    .brand-activity-hero__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67%;
+        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%);
+    }
+
+    .brand-activity-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    .brand-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);
+    }
+
+    .brand-activity-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .brand-activity-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .brand-activity-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .brand-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);
+    }
+
+    .brand-activity-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .brand-activity-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .brand-activity-search .van-field__control::placeholder {
+        color: #a7b0bf;
+    }
+
+    .brand-activity-filter {
+        margin: 0 0 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .brand-activity-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__item {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__title {
+        width: auto;
+        max-width: calc(100% - 24px);
+        padding: 0 12px 0 0;
+        overflow: hidden;
+        color: #66758a;
+        font-size: 12px;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__title::after {
+        right: 0;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__title--active,
+    .brand-activity-filter .van-dropdown-item__option--active,
+    .brand-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .brand-activity-filter .van-dropdown-menu__title--down::after {
+        border-color: transparent transparent #1989fa #1989fa;
+    }
+
+    .brand-activity-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        box-sizing: border-box;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .brand-activity-filter .van-dropdown-item__option {
+        min-height: 48px;
+        padding: 0 16px;
+        color: #46566c;
+        font-size: 14px;
+    }
+
+    .brand-activity-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .brand-activity-card {
+        position: relative;
+        overflow: hidden;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        cursor: pointer;
+    }
+
+    .brand-activity-card__cover,
+    .brand-activity-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        background-color: #edf4fc;
+    }
+
+    .brand-activity-card__cover {
+        display: block;
+        object-fit: cover;
+    }
+
+    .brand-activity-card__cover-state {
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        font-size: 13px;
+    }
+
+    .brand-activity-card__cover-state .van-icon {
+        font-size: 34px;
+    }
+
+    .brand-activity-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
+    }
+
+    .brand-activity-card__body {
+        padding: 12px 38px 14px 14px;
+    }
+
+    .brand-activity-card__title {
+        min-width: 0;
+        overflow: hidden;
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-activity-card__time {
+        margin-top: 4px;
+        overflow: hidden;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 17px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-activity-card__meta {
+        display: flex;
+        margin-top: 10px;
+        padding-top: 9px;
+        flex-wrap: wrap;
+        gap: 6px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .brand-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;
+    }
+
+    .brand-activity-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
+    }
+
+    .brand-activity-card__arrow {
+        position: absolute;
+        top: 164px;
+        right: 14px;
+        color: #b4bdca;
+        font-size: 16px;
+    }
+
+    .brand-activity-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .brand-activity-empty img {
+        display: block;
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .brand-activity-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .brand-activity-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .brand-activity-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+    }
+
+    .brand-intro-popup,
+    .brand-intro-page {
+        background-color: #f3f7fd;
+    }
+
+    .brand-intro-page {
+        position: relative;
+        min-height: 100vh;
+    }
+
+    .brand-intro-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .brand-intro-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .brand-intro-page .van-nav-bar .van-icon,
+    .brand-intro-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .brand-intro-scroll {
+        height: calc(100vh - 46px);
+        padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .brand-intro-hero {
+        display: flex;
+        min-height: 82px;
+        padding: 16px;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+    }
+
+    .brand-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;
+    }
+
+    .brand-intro-hero__title {
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    .brand-intro-hero__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .brand-intro-card {
+        margin-top: 12px;
+        padding: 18px 16px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .brand-intro-content,
+    .brand-intro-content div,
+    .brand-intro-content p,
+    .brand-intro-content span,
+    .brand-intro-content li {
+        color: #3f4c5e !important;
+        font-size: 14px !important;
+        line-height: 1.8 !important;
+        white-space: normal;
+        word-break: break-word;
+    }
+
+    .brand-intro-content h1,
+    .brand-intro-content h2,
+    .brand-intro-content h3 {
+        margin: 16px 0 10px !important;
+        color: #1f2f43 !important;
+        font-size: 19px !important;
+        line-height: 1.5 !important;
+        font-weight: 600 !important;
+    }
+
+    .brand-intro-content > :first-child {
+        margin-top: 0 !important;
+    }
+
+    .brand-intro-content p {
+        margin-top: 0 !important;
+        margin-bottom: 8px !important;
+    }
+
+    .brand-intro-content img {
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 8px;
+    }
+
+    .brand-intro-content table {
+        display: block;
+        max-width: 100%;
+        overflow-x: auto;
+        border-collapse: collapse;
+    }
+
+    .brand-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;
+    }
+
+    .brand-intro-empty .van-icon {
+        color: #83b5f4;
+        font-size: 36px;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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);
+    }
+
+    .brand-intro-footer .van-button--disabled {
+        color: #8b98aa !important;
+        background-color: #eef2f7 !important;
+        opacity: 1;
+        box-shadow: none;
+    }
+
+    .brand-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="brand-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/trainSignUp/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}">
-            <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="brand-activity-content">
+            <section class="brand-activity-hero">
+                <img class="brand-activity-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="品牌活动插画">
+                <div class="brand-activity-hero__copy">
+                    <div class="brand-activity-hero__title">品牌活动</div>
+                    <div class="brand-activity-hero__subtitle">品牌引领 · 成长同行</div>
                 </div>
-                <div class="action-btn" @click="onApply(row)">
-                    <i class="fa fa-edit"></i>
-                    <span>去报名</span>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="brand-activity-sticky">
+                    <van-search
+                            v-model="pageForm.searchKeyword"
+                            class="brand-activity-search"
+                            placeholder="搜索品牌活动"
+                            shape="round"
+                            clearable
+                            @search="doSearch"
+                            @clear="doSearch"
+                    ></van-search>
+                    <van-dropdown-menu class="brand-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>
-            </template>
-        </template>
-    </table-list>
+            </van-sticky>
 
-    <van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
+                    <div class="brand-activity-list">
+                        <div v-for="row in tableData" :key="row.id" class="brand-activity-card" @click="onView(row)">
+                            <img
+                                    v-if="hasCover(row) && !imageLoadErrors[row.id]"
+                                    class="brand-activity-card__cover"
+                                    :src="row.cover"
+                                    :alt="row.activityName"
+                                    @error="handleImageError(row)"
+                            >
+                            <div v-else class="brand-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
+                                <van-icon name="photo-o"></van-icon>
+                                <span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
+                            </div>
+                            <div class="brand-activity-card__body">
+                                <div class="brand-activity-card__title">{{ row.activityName }}</div>
+                                <div class="brand-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="brand-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>
+                                <div class="brand-activity-card__meta" v-if="row.activityGroupName || row.trainType">
+                                    <span class="brand-activity-card__tag" v-if="row.activityGroupName">
+                                        <span class="brand-activity-card__tag-label">面向对象</span>{{ row.activityGroupName }}
+                                    </span>
+                                    <span class="brand-activity-card__tag" v-if="row.trainType">
+                                        <span class="brand-activity-card__tag-label">活动类型</span>{{ row.trainType }}
+                                    </span>
+                                </div>
+                            </div>
+                            <van-icon class="brand-activity-card__arrow" name="arrow"></van-icon>
+                        </div>
+                    </div>
+                </van-list>
+                <div v-if="!loading && tableData.length === 0" class="brand-activity-empty">
+                    <img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动空状态插画">
+                    <div class="brand-activity-empty__title">暂无品牌活动</div>
+                    <div class="brand-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
+                </div>
+            </van-pull-refresh>
+        </div>
+    </div>
 
-        <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="brand-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
+        <div class="brand-intro-page">
+            <van-sticky>
+                <van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
+            </van-sticky>
+            <div class="brand-intro-scroll">
+                <div class="brand-intro-hero">
+                    <div class="brand-intro-hero__icon">
+                        <van-icon name="description"></van-icon>
+                    </div>
+                    <div>
+                        <div class="brand-intro-hero__title">活动报名须知</div>
+                        <div class="brand-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
+                    </div>
+                </div>
+                <article v-if="infoRow.introduce" class="brand-intro-card">
+                    <div class="brand-intro-content" v-html="infoRow.introduce"></div>
+                </article>
+                <div v-else class="brand-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="brand-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>
 
 <script nonce="${cspNonce!}">
@@ -96,11 +624,16 @@ layout("/layouts/platform_h5.html"){
         el: "#app",
         store,
         components: {
-            "pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
         },
         data() {
             return {
                 time: 0,
+                tableData: [],
+                loading: false,
+                finished: false,
+                refreshing: false,
+                imageLoadErrors: {},
+                filterOpened: false,
                 pageForm: {
                     pageNumber: 1,
                     pageSize: 10,
@@ -121,12 +654,41 @@ layout("/layouts/platform_h5.html"){
             }
         },
         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
@@ -151,22 +713,47 @@ layout("/layouts/platform_h5.html"){
                     }
                 })
             },
-            onReady() {
-                this.doSearch()
-                if(this.id) {
-                    this.fetchOne()
+            onLoad() {
+                if(!this.finished) {
+                    this.loadActivities(false)
                 }
             },
-            doSearch() {
-                this.$nextTick(() => {
+            onRefresh() {
+                this.loadActivities(true)
+            },
+            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/trainSignUp/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)
             }
         },
-        mounted() {
-
+        created() {
+            this.loadActivities(true)
+            if(this.id) {
+                this.fetchOne()
+            }
         }
     })
 </script>

src/main/resources/views/platform/zhghh5/activity/trainSignUp/common/times.js

@@ -3,9 +3,10 @@ const times = {
     /*language=HTML*/
         `
             <div>
-                <van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
-                    <div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" style="width: 100%; height: 250px"></div>
-                    <button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
+                <van-action-sheet class="brand-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
+                    <div class="brand-course-times-list">
+                    <div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" class="brand-course-times-map"></div>
+                    <button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item brand-course-time-item">
                         <div style="display: flex; justify-content: space-between; align-items: center">
                             <div>
                                 <div class="van-action-sheet__name">
@@ -22,6 +23,7 @@ const times = {
                             </div>
                         </div>
                     </button>
+                    </div>
                 </van-action-sheet>
 
                 <van-popup round :safe-area-inset-bottom="true" 
@@ -215,6 +217,70 @@ const times = {
         },
     },
     style: /*language=CSS*/ `
-       
+        .brand-course-times-sheet {
+            overflow: hidden;
+            border-radius: 16px 16px 0 0;
+            background-color: #f3f7fd;
+        }
+
+        .brand-course-times-sheet /deep/ .van-action-sheet__header {
+            height: 48px;
+            color: #1f2f43;
+            background-color: #fff;
+            font-size: 16px;
+            line-height: 48px;
+        }
+
+        .brand-course-times-sheet /deep/ .van-action-sheet__close {
+            top: 13px;
+            color: #b5bdc9;
+            font-size: 20px;
+        }
+
+        .brand-course-times-list {
+            height: calc(100% - 98px);
+            padding: 10px 12px 0;
+            overflow-y: auto;
+            box-sizing: border-box;
+        }
+
+        .brand-course-times-map {
+            width: 100%;
+            height: 180px;
+            margin-bottom: 10px;
+            overflow: hidden;
+            border-radius: 10px;
+        }
+
+        .brand-course-times-sheet /deep/ .brand-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;
+        }
+
+        .brand-course-times-sheet /deep/ .van-action-sheet__name {
+            color: #263548;
+            font-size: 14px;
+            line-height: 21px;
+        }
+
+        .brand-course-times-sheet /deep/ .van-action-sheet__subname {
+            margin-top: 5px;
+            color: #98a2b2;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .brand-course-times-sheet /deep/ .van-action-sheet__cancel {
+            height: 50px;
+            color: #66758a;
+            background-color: #fff;
+            font-size: 14px;
+        }
     `
 }

src/main/resources/views/platform/zhghh5/activity/trainSignUp/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="brand-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>
@@ -150,10 +150,90 @@ const applyForm = {
         },
     },
     style: /*language=CSS*/ `
-        /deep/ .button {
-            position: fixed;
+        .brand-course-form-sheet {
+            overflow: hidden;
+            border-radius: 16px 16px 0 0;
+            background-color: #f3f7fd;
+        }
+
+        .brand-course-form-sheet /deep/ .van-action-sheet__header {
+            height: 48px;
+            color: #1f2f43;
+            background-color: #fff;
+            font-size: 16px;
+            line-height: 48px;
+        }
+
+        .brand-course-form-sheet /deep/ .van-action-sheet__close {
+            top: 13px;
+            color: #b5bdc9;
+            font-size: 20px;
+        }
+
+        .brand-course-form-sheet /deep/ .form-container {
+            height: calc(100% - 48px);
+            padding: 10px 12px 72px;
+            overflow-y: auto;
+            background-color: #f3f7fd;
+            box-sizing: border-box;
+        }
+
+        .brand-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);
+        }
+
+        .brand-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;
+        }
+
+        .brand-course-form-sheet /deep/ .van-cell-group__title::before {
+            width: 3px;
+            top: 12px;
+            bottom: 8px;
+            border-radius: 2px;
+            background-color: #1989fa;
+        }
+
+        .brand-course-form-sheet /deep/ .van-cell {
+            padding: 11px 14px;
+            color: #263548;
+            font-size: 13px;
+        }
+
+        .brand-course-form-sheet /deep/ .van-field__label {
+            color: #66758a;
+            font-size: 13px;
+        }
+
+        .brand-course-form-sheet /deep/ .button {
+            position: absolute;
+            right: 0;
             bottom: 0;
-            width: 100%;
+            left: 0;
+            z-index: 2;
+            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;
+        }
+
+        .brand-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);
         }
     `
 }

src/main/resources/views/platform/zhghh5/activity/trainSignUp/list/index.html

@@ -2,33 +2,535 @@
 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;
+
+    .brand-course-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .brand-course-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .brand-course-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+    }
+
+    .brand-course-page .van-nav-bar .van-icon,
+    .brand-course-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .brand-course-summary {
+        display: flex;
+        min-height: 82px;
+        margin: 12px 12px 0;
+        padding: 16px;
+        align-items: center;
+        box-sizing: border-box;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
+    }
+
+    .brand-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;
+    }
+
+    .brand-course-summary__body {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .brand-course-summary__title {
+        overflow: hidden;
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-course-summary__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .brand-course-filter {
+        padding: 10px 12px 0;
+        background-color: #f3f7fd;
+    }
+
+    .brand-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;
+    }
+
+    .brand-course-filter.is-open .van-dropdown-menu {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .brand-course-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .brand-course-filter .van-dropdown-menu__title {
+        color: #66758a;
+        font-size: 13px;
+    }
+
+    .brand-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;
+    }
+
+    .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;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .brand-course-list-head__title {
+        color: #263548;
+        font-size: 16px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .brand-course-list-head__count {
+        color: #8d9aad;
+        font-size: 12px;
+    }
+
+    .brand-course-page .table-list-container {
+        margin-top: 0;
+        padding: 0 12px;
+    }
+
+    .brand-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);
+    }
+
+    .brand-course-page .table-list-container .table-list-item > div:nth-child(2) {
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
+    .brand-course-page .table-list-container .table-list-item .item-header {
+        margin-bottom: 10px;
+        padding-bottom: 12px;
+        align-items: center;
+        border-bottom: 1px solid #edf1f6;
+    }
+
+    .brand-course-page .table-list-container .table-list-item .item-title {
+        color: #23344a;
+        font-size: 16px;
+        line-height: 23px;
+        font-weight: 600;
+    }
+
+    .brand-course-page .table-column {
+        padding: 6px 0;
+        font-size: 13px;
+    }
+
+    .brand-course-page .table-column .label {
+        width: 76px;
+        color: #66758a;
+        font-size: 13px;
+    }
+
+    .brand-course-page .table-column .value {
+        color: #263548;
+        font-size: 13px;
+        text-align: right;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 13px;
+        box-sizing: border-box;
+    }
+
+    .brand-course-page .table-list-container .table-list-item .brand-course-apply,
+    .brand-course-page .table-list-container .table-list-item .brand-course-sign {
+        color: #fff;
+        background-color: #1989fa;
+        box-shadow: 0 5px 12px rgba(25, 137, 250, .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 .van-list__finished-text,
+    .brand-course-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+    }
+
+    .primary-color {
+        color: #1989fa;
+    }
+
+    .brand-course-introduce-sheet {
+        overflow: hidden;
+        border-radius: 16px 16px 0 0;
+        background-color: #f3f7fd;
+    }
+
+    .brand-course-introduce-sheet .van-action-sheet__header {
+        color: #1f2f43;
+        font-size: 16px;
+    }
+
+    .brand-course-introduce-content {
+        height: calc(100% - 110px);
+        margin: 10px 12px 0;
+        padding: 16px;
+        overflow-y: auto;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        box-sizing: border-box;
+    }
+
+    .brand-course-introduce-sheet .van-action-sheet__close {
+        top: 13px;
+        color: #b5bdc9;
+        font-size: 20px;
+    }
+
+    .brand-course-introduce-sheet .van-action-sheet__cancel {
+        height: 50px;
+        color: #66758a;
+        background-color: #fff;
         font-size: 14px;
-        border-radius: 6px;
+    }
+
+    .brand-course-form-sheet,
+    .brand-course-times-sheet,
+    .brand-course-introduce-sheet {
+        overflow: hidden !important;
+        border-radius: 16px 16px 0 0 !important;
+        background-color: #f3f7fd !important;
+    }
+
+    .brand-course-form-sheet .van-action-sheet__header,
+    .brand-course-times-sheet .van-action-sheet__header,
+    .brand-course-introduce-sheet .van-action-sheet__header {
+        height: 48px;
+        color: #1f2f43;
+        background-color: #fff;
+        font-size: 16px;
+        line-height: 48px;
+    }
+
+    .brand-course-form-sheet .van-action-sheet__close,
+    .brand-course-times-sheet .van-action-sheet__close,
+    .brand-course-introduce-sheet .van-action-sheet__close {
+        top: 0;
+        right: 16px;
+        display: flex;
+        height: 48px;
+        align-items: center;
+        color: #b5bdc9;
+        font-size: 20px;
+    }
+
+    .brand-course-times-sheet .brand-course-times-list {
+        height: calc(100% - 98px);
+        padding: 10px 12px 0;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .brand-course-times-sheet .brand-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;
+    }
+
+    .brand-course-times-sheet .brand-course-time-item::before {
+        display: none;
+    }
+
+    .brand-course-times-sheet .van-action-sheet__name {
+        color: #263548;
+        font-size: 14px;
+        line-height: 21px;
+        text-align: left;
+    }
+
+    .brand-course-times-sheet .van-action-sheet__subname {
+        margin-top: 5px;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 18px;
+        text-align: left;
+    }
+
+    .brand-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);
+    }
+
+    .brand-course-times-sheet .sign_button .van-button--disabled {
+        color: #8b98aa;
+        background-color: #eef2f7;
+        opacity: 1;
+        box-shadow: none;
+    }
+
+    .brand-course-times-sheet .van-action-sheet__cancel,
+    .brand-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;
+    }
+
+    .brand-course-introduce-sheet .brand-course-introduce-content {
+        position: absolute;
+        top: 58px;
+        right: 12px;
+        bottom: 60px;
+        left: 12px;
+        width: auto;
+        height: auto;
+        margin: 0;
+        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;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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);
+    }
+
+    .brand-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;
+    }
+
+    .brand-course-form-sheet .van-cell-group__title::before {
+        display: none !important;
+    }
+
+    .brand-course-form-sheet .van-cell {
+        padding: 11px 14px !important;
+        color: #263548;
+        background-color: #fff;
+        font-size: 13px;
+    }
+
+    .brand-course-form-sheet .van-cell::after {
+        right: 14px;
+        left: 14px;
+        border-color: #edf1f6;
+    }
+
+    .brand-course-form-sheet .van-field__label {
+        color: #66758a;
+        font-size: 13px;
+    }
+
+    .brand-course-form-sheet .van-field__control {
+        color: #263548;
+        font-size: 13px;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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="brand-course-page">
     <van-nav-bar title="活动报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
 
+    <div class="brand-course-summary">
+        <div class="brand-course-summary__icon">
+            <van-icon name="award-o"></van-icon>
+        </div>
+        <div class="brand-course-summary__body">
+            <div class="brand-course-summary__title">品牌活动项目</div>
+            <div class="brand-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="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-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>
     </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="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>
 
     <table-list api="/platform/trainSignUp/apply/pageData"
                 :page_form.sync="pageForm"
@@ -62,22 +564,22 @@ layout("/layouts/platform_h5.html"){
             </table-column>
         </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 brand-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 brand-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 brand-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 brand-course-sign"
                  @click="onTime(row)"
             >
                 <i class="fa fa-sign-in"></i>
@@ -85,9 +587,12 @@ layout("/layouts/platform_h5.html"){
             </div>
         </template>
     </table-list>
+    </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="brand-course-introduce-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="课程介绍" v-model="introduceVisible" cancel-text="取消">
+        <div class="brand-course-introduce-content">
+            <pdf-preview :content="introduceRow.introduce"></pdf-preview>
+        </div>
     </van-action-sheet>
 
     <times ref="timesRef"></times>
@@ -127,12 +632,15 @@ layout("/layouts/platform_h5.html"){
                 introduceRow: {},
                 activity: {},
                 assortList: [],
+                activeAssort: '',
+                filterOpened: false,
 
                 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)
@@ -236,6 +744,7 @@ layout("/layouts/platform_h5.html"){
                     .then((resp) => {
                         this.assortList = resp.data
                         if(this.assortList.length > 0) {
+                            this.activeAssort = this.assortList[0]
                             this.pageForm.assortTypes = JSON.stringify([this.assortList[0]])
                         }
                     })

src/main/resources/views/platform/zhghh5/activity/trainSignUp/mine/index.html

@@ -2,91 +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;
+<style>
+    body {
+        background-color: #f3f7fd;
     }
-    .info-container {
 
+    .brand-mine-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%;
+
+    .brand-mine-page .van-nav-bar {
+        background-color: #fff;
     }
-    .info-img {
-        display: block;
+
+    .brand-mine-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
     }
-    .van-count-down {
+
+    .brand-mine-page .van-nav-bar .van-icon,
+    .brand-mine-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .brand-mine-content {
+        padding: 12px 12px 0;
+    }
+
+    .brand-mine-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        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);
+    }
+
+    .brand-mine-hero__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67%;
+        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%);
+    }
+
+    .brand-mine-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    .brand-mine-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
+    }
+
+    .brand-mine-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .brand-mine-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .brand-mine-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .brand-mine-search {
+        margin-bottom: 8px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
+    }
+
+    .brand-mine-search .van-search__content {
+        height: 42px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 12px;
+        background-color: #fff;
+    }
+
+    .brand-mine-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .brand-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;
+    }
+
+    .brand-mine-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .brand-mine-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .brand-mine-filter .van-dropdown-menu__title {
+        width: auto;
+        max-width: calc(100% - 24px);
+        padding: 0 12px 0 0;
+        color: #66758a;
+        font-size: 12px;
+    }
+
+    .brand-mine-filter .van-dropdown-menu__title::after {
+        right: 0;
+    }
+
+    .brand-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;
+    }
+
+    .brand-mine-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .brand-mine-card {
+        overflow: hidden;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+    }
+
+    .brand-mine-card__cover,
+    .brand-mine-card__cover-state {
+        display: flex;
+        width: 100%;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        background-color: #edf4fc;
+    }
+
+    .brand-mine-card__cover {
+        display: block;
+        object-fit: cover;
+    }
+
+    .brand-mine-card__cover-state {
+        flex-direction: column;
+        row-gap: 8px;
+        color: #8da1ba;
+        font-size: 13px;
+    }
+
+    .brand-mine-card__cover-state .van-icon {
+        font-size: 34px;
+    }
+
+    .brand-mine-card__cover-state.is-error {
+        color: #c27b75;
+        background-color: #fff3f1;
+    }
+
+    .brand-mine-card__body {
+        padding: 12px 14px 14px;
+    }
+
+    .brand-mine-card__title {
+        overflow: hidden;
+        color: #303846;
+        font-size: 14px;
+        line-height: 21px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-mine-card__time {
+        margin-top: 4px;
+        overflow: hidden;
+        color: #98a2b2;
+        font-size: 12px;
+        line-height: 17px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .brand-mine-card__meta {
+        display: flex;
+        margin-top: 10px;
+        padding-top: 9px;
+        flex-wrap: wrap;
+        gap: 6px;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .brand-mine-card__tag {
+        display: inline-flex;
+        padding: 3px 8px;
+        border-radius: 4px;
+        color: #397de0;
+        background-color: #edf5ff;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .brand-mine-card__tag-label {
+        margin-right: 4px;
+        color: #8aa7cf;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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;
+    }
+
+    .brand-mine-card__action i {
+        margin-right: 6px;
+        font-size: 15px;
+    }
+
+    .brand-mine-card__action.is-primary {
+        color: #fff;
+        background-color: #1989fa;
+        box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
+    }
+
+    .brand-mine-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .brand-mine-empty img {
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .brand-mine-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .brand-mine-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .brand-mine-intro-page {
+        min-height: 100vh;
+        background-color: #f3f7fd;
+    }
+
+    .brand-mine-intro-scroll {
+        height: calc(100vh - 46px);
+        padding: 12px;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    .brand-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;
+    }
+
+    .brand-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;
+    }
+
+    .brand-mine-intro-hero__title {
+        font-size: 17px;
+        line-height: 24px;
+    }
+
+    .brand-mine-intro-hero__subtitle {
+        margin-top: 3px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .9;
+    }
+
+    .brand-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;
+        line-height: 1.8;
+        word-break: break-word;
+    }
+
+    .brand-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="brand-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>
+        <div class="brand-mine-content">
+            <section class="brand-mine-hero">
+                <img class="brand-mine-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="品牌活动插画">
+                <div class="brand-mine-hero__copy">
+                    <div class="brand-mine-hero__title">我的报名</div>
+                    <div class="brand-mine-hero__subtitle">品牌活动 · 报名记录</div>
+                </div>
+            </section>
 
-    <table-list api="/platform/trainSignUp/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="onApply(row)">
-                <i class="fa fa-edit"></i>
-                <span>查看</span>
-            </div>
-        </template>
-    </table-list>
+            <van-sticky :offset-top="46">
+                <div class="brand-mine-sticky">
+                    <van-search v-model="pageForm.searchKeyword" class="brand-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+                    <van-dropdown-menu class="brand-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>
+            </van-sticky>
 
-    <van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
+                    <div class="brand-mine-list">
+                        <div v-for="row in tableData" :key="row.id" class="brand-mine-card">
+                            <img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="brand-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
+                            <div v-else class="brand-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
+                                <van-icon name="photo-o"></van-icon>
+                                <span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
+                            </div>
+                            <div class="brand-mine-card__body">
+                                <div class="brand-mine-card__title">{{ row.activityName }}</div>
+                                <div class="brand-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="brand-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="brand-mine-card__meta" v-if="row.activityGroupName || row.trainType">
+                                    <span class="brand-mine-card__tag" v-if="row.activityGroupName"><span class="brand-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
+                                    <span class="brand-mine-card__tag" v-if="row.trainType"><span class="brand-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
+                                </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>
+                            </div>
+                        </div>
+                    </div>
+                </van-list>
+                <div v-if="!loading && tableData.length === 0" class="brand-mine-empty">
+                    <img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动报名空状态插画">
+                    <div class="brand-mine-empty__title">暂无报名记录</div>
+                    <div class="brand-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
+                </div>
+            </van-pull-refresh>
+        </div>
+    </div>
 
-        <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 :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
+        <div class="brand-mine-intro-page">
+            <van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
+            <div class="brand-mine-intro-scroll">
+                <div class="brand-mine-intro-hero">
+                    <div class="brand-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
+                    <div>
+                        <div class="brand-mine-intro-hero__title">活动报名须知</div>
+                        <div class="brand-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
+                    </div>
+                </div>
+                <div v-if="infoRow.introduce" class="brand-mine-intro-card" v-html="infoRow.introduce"></div>
+                <div v-else class="brand-mine-intro-card">暂无活动介绍</div>
             </div>
         </div>
-    </van-action-sheet>
-
+    </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,
@@ -106,6 +490,12 @@ layout("/layouts/platform_h5.html"){
             }
         },
         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
@@ -113,17 +503,45 @@ layout("/layouts/platform_h5.html"){
             onApply(row) {
                 this.$pjaxReplace('/platform/trainSignUp/apply/list/h5?id=' + row.id + '&dataType=mine')
             },
-            onReady() {
-                this.doSearch()
+            onLoad() {
+                if(!this.finished) {
+                    this.loadActivities(false)
+                }
             },
-            doSearch() {
-                this.$nextTick(() => {
+            onRefresh() {
+                this.loadActivities(true)
+            },
+            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/trainSignUp/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>
 

src/main/resources/views/platform/zhghh5/spread/display/detail.html

@@ -0,0 +1,145 @@
+<!--#
+layout("/layouts/platform_h5.html"){
+#-->
+<style>
+    body { background: #f5f7fa; }
+    .spread-detail-h5 { min-height: 100vh; color: #202124; background: #f5f7fa; }
+    .spread-h5__detail { margin: 10px 12px 24px; padding: 18px 15px 24px; border-radius: 10px; background: #fff; }
+    .spread-h5__detail-title { margin: 0; color: #202124; font-size: 20px; line-height: 29px; text-align: center; word-break: break-word; }
+    .spread-h5__detail-meta { margin-top: 10px; padding-bottom: 14px; color: #9aa2af; font-size: 11px; line-height: 17px; text-align: center; border-bottom: 1px solid #edf1f6; }
+    .spread-h5__detail-summary { margin: 15px 0 0; padding: 10px 12px; color: #697386; font-size: 14px; line-height: 22px; border-radius: 6px; background: #f7f9fc; }
+    .spread-h5__detail-cover { width: 100%; max-height: 240px; margin: 16px 0 0; display: block; border-radius: 6px; object-fit: contain; }
+    .spread-h5__slider { height: 220px; margin-top: 16px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
+    .spread-h5__slide { position: relative; height: 220px; }
+    .spread-h5__slide img { width: 100%; height: 100%; display: block; object-fit: contain; }
+    .spread-h5__slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(to top, rgba(15,23,42,.72), transparent); box-sizing: border-box; }
+    .spread-h5__detail-body { margin-top: 16px; overflow: hidden; color: #323233; font-size: 15px; line-height: 1.8; word-break: break-word; }
+    .spread-h5__detail-body img, .spread-h5__detail-body video { max-width: 100% !important; height: auto !important; }
+    .spread-h5__detail-body table { max-width: 100% !important; }
+    .spread-h5__detail--skeleton .van-skeleton { padding: 0; }
+    .spread-h5__detail-skeleton-cover { margin-top: 18px; }
+    .spread-h5__detail-skeleton-cover .van-skeleton__row { height: 180px; border-radius: 6px; }
+    .spread-h5__detail-skeleton-body { margin-top: 18px; }
+    .spread-h5__detail-empty { padding: 80px 20px; color: #9aa2af; font-size: 14px; text-align: center; }
+</style>
+
+<div id="app" class="spread-detail-h5" v-cloak>
+    <van-nav-bar title="动态详情" left-arrow left-text="返回" fixed placeholder :z-index="20" @click-left="handleBack"></van-nav-bar>
+
+    <article v-if="detailLoading" class="spread-h5__detail spread-h5__detail--skeleton">
+        <van-skeleton title :row="2"></van-skeleton>
+        <van-skeleton class="spread-h5__detail-skeleton-cover" :row="1"></van-skeleton>
+        <van-skeleton class="spread-h5__detail-skeleton-body" title :row="6"></van-skeleton>
+    </article>
+
+    <article v-else-if="detail" class="spread-h5__detail">
+        <h1 class="spread-h5__detail-title">{{detail.title}}</h1>
+        <div class="spread-h5__detail-meta">
+            {{formatDate(detail.publishedAt || detail.createdAt)}}　{{detail.categoryName}}　
+            <van-icon name="eye-o"></van-icon> {{detail.viewCount || 0}}
+        </div>
+        <img v-if="getCoverUrl(detail.thumbUrl)" class="spread-h5__detail-cover" :src="getCoverUrl(detail.thumbUrl)" :alt="detail.title">
+        <div v-if="detail.summary" class="spread-h5__detail-summary">{{detail.summary}}</div>
+        <van-swipe v-if="detailSlides.length"
+                   class="spread-h5__slider"
+                   :autoplay="3000"
+                   :show-indicators="detailSlides.length > 1"
+                   indicator-color="#1989fa">
+            <van-swipe-item v-for="(slide, index) in detailSlides" :key="slide.src + '-' + index">
+                <div class="spread-h5__slide">
+                    <img :src="slide.src" :alt="slide.title || detail.title">
+                    <div v-if="slide.title" class="spread-h5__slide-caption">{{slide.title}}</div>
+                </div>
+            </van-swipe-item>
+        </van-swipe>
+        <div class="spread-h5__detail-body" v-html="detail.contentBody"></div>
+    </article>
+
+    <div v-else class="spread-h5__detail-empty">动态不存在或已下架</div>
+</div>
+
+<script nonce="${cspNonce!}">
+    new Vue({
+        el: "#app",
+        data() {
+            return {
+                apiBase: "/platform/h5/spread",
+                detailLoading: true,
+                detail: null
+            }
+        },
+        computed: {
+            detailSlides() {
+                return this.getSliderEntries(this.detail && this.detail.sliderImages)
+            }
+        },
+        methods: {
+            loadDetail() {
+                const id = new URLSearchParams(window.location.search).get("id")
+                if (!id) {
+                    this.detailLoading = false
+                    return
+                }
+                this.detailLoading = true
+                Promise.all([
+                    this.$axios.post(this.apiBase + "/detailData", {id: id}),
+                    this.$axios.post(this.apiBase + "/addView", {id: id})
+                ]).then(values => {
+                    if (values[0].code === 0) {
+                        this.detail = values[0].data
+                        this.detail.viewCount = Number(this.detail.viewCount || 0) + 1
+                    }
+                }).finally(() => {
+                    this.detailLoading = false
+                })
+            },
+            handleBack() {
+                const source = new URLSearchParams(window.location.search).get("from")
+                this.$pjaxReplace(source === "home" ? "/platform/h5/home" : "/platform/h5/spread")
+            },
+            getCoverUrl(value) {
+                if (!value) return ""
+                let files = value
+                if (typeof value === "string" && value.trim().startsWith("[")) {
+                    try {
+                        files = JSON.parse(value)
+                    } catch (e) {
+                        files = []
+                    }
+                }
+                if (!Array.isArray(files)) files = String(files).split(",")
+                const first = files[0]
+                if (typeof first === "string") return first.trim()
+                return first && (first.src || first.url || first.data || (first.response && first.response.data)) || ""
+            },
+            getSliderEntries(value) {
+                if (!value) return []
+                let items = value
+                if (!Array.isArray(items)) {
+                    try {
+                        items = JSON.parse(value)
+                    } catch (e) {
+                        items = String(value).split(",").filter(Boolean)
+                    }
+                }
+                if (!Array.isArray(items)) return []
+                return items.map(item => {
+                    if (typeof item === "string") return {src: item.trim(), title: ""}
+                    return {
+                        src: item.src || item.url || item.data || (item.response && item.response.data) || "",
+                        title: item.title || item.description || ""
+                    }
+                }).filter(item => item.src)
+            },
+            formatDate(value) {
+                return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : ""
+            }
+        },
+        created() {
+            this.loadDetail()
+        }
+    })
+</script>
+<!--#
+}
+#-->

src/main/resources/views/platform/zhghh5/spread/display/index.html

@@ -7,15 +7,24 @@ layout("/layouts/platform_h5.html"){
     .spread-h5__toolbar { position: sticky; top: 46px; z-index: 15; background: #fff; box-shadow: 0 3px 10px rgba(31,72,122,.06); }
     .spread-h5__search { padding: 8px 12px 2px; background: #fff; }
     .spread-h5__search .van-search { padding: 0; }
-    .spread-h5__categories { padding: 2px 12px 10px; background: #fff; }
+    .spread-h5__categories { padding: 2px 12px 8px; background: #fff; }
+    .spread-h5__tabs-nav { display: flex; align-items: center; border-bottom: 1px solid #edf1f6; }
     .spread-h5__tabs { height: 36px; padding: 0; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #edf1f6; border-radius: 0; background: transparent; box-sizing: border-box; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+    .spread-h5__tabs-nav .spread-h5__tabs { min-width: 0; flex: 1; border-bottom: 0; }
+    .spread-h5__tabs-arrow { width: 26px; height: 30px; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #8d98a8; font-size: 14px; line-height: 1; border: 0; background: transparent; }
+    .spread-h5__tabs-arrow .van-icon { display: block; line-height: 1; }
+    .spread-h5__tabs-arrow:active { color: #087af4; background: #f3f8ff; }
     .spread-h5__tabs::-webkit-scrollbar { display: none; }
     .spread-h5__tab { position: relative; min-width: 92px; height: 30px; padding: 0 8px; flex: 1 0 calc((100% - 8px) / 3); display: flex; align-items: center; justify-content: center; color: #7d8797; font-size: 13px; white-space: nowrap; border-radius: 6px; box-sizing: border-box; }
     .spread-h5__tab--active { color: #087af4; font-weight: 600; background: transparent; box-shadow: none; }
     .spread-h5__tabs:not(.spread-h5__tabs--secondary) .spread-h5__tab--active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 2px; border-radius: 2px; background: #087af4; transform: translateX(-50%); }
-    .spread-h5__tabs--secondary { height: 30px; margin-top: 7px; padding: 1px 0; gap: 6px; border-bottom: 0; border-radius: 0; background: transparent; }
-    .spread-h5__tabs--secondary .spread-h5__tab { min-width: 84px; height: 26px; padding: 0 10px; flex: 1 0 calc((100% - 12px) / 3); color: #969daa; font-size: 11px; border: 1px solid #e7ecf3; border-radius: 999px; background: #fafbfd; box-shadow: none; }
-    .spread-h5__tabs--secondary .spread-h5__tab--active { color: #087af4; border-color: #b9d8ff; background: #edf6ff; }
+    .spread-h5__filters { height: 42px; margin-top: 8px; display: flex; overflow: hidden;  border-radius: 10px; box-sizing: border-box; }
+    .spread-h5__filter-menu { min-width: 0; flex: 1; background: transparent; }
+    .spread-h5__filter-menu .van-dropdown-menu__bar { height: 40px; background: transparent; box-shadow: none; }
+    .spread-h5__filter-menu .van-dropdown-menu__item { position: relative; min-width: 0; }
+    .spread-h5__filter-menu .van-dropdown-menu__title { max-width: 100%; padding: 0 16px 0 8px; color: #5f6978; font-size: 12px; line-height: 28px; box-sizing: border-box; }
+    .spread-h5__filter-menu .van-dropdown-menu__title::after { right: 6px; border-color: transparent transparent #8d98a8 #8d98a8; }
+    .spread-h5__filter-menu .van-dropdown-menu__title--active::after { border-color: transparent transparent currentColor currentColor; }
     .spread-h5__list { margin: 10px 12px 20px; padding: 0 12px; border-radius: 10px; background: #fff; }
     .spread-h5__item { min-height: 82px; padding: 11px 0; display: flex; align-items: center; box-sizing: border-box; }
     .spread-h5__item + .spread-h5__item { border-top: 1px solid #f0f2f5; }
@@ -26,27 +35,23 @@ layout("/layouts/platform_h5.html"){
     .spread-h5__item-meta { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; color: #9aa2af; font-size: 10px; line-height: 14px; }
     .spread-h5__views { display: inline-flex; align-items: center; }
     .spread-h5__views .van-icon { margin-right: 3px; }
+    .spread-h5__skeleton-list { margin: 10px 12px 20px; padding: 0 12px; border-radius: 10px; background: #fff; }
+    .spread-h5__skeleton-item { min-height: 82px; padding: 11px 0; box-sizing: border-box; }
+    .spread-h5__skeleton-item + .spread-h5__skeleton-item { border-top: 1px solid #f0f2f5; }
+    .spread-h5__skeleton-item .van-skeleton { padding: 0; }
+    .spread-h5__skeleton-item .van-skeleton__avatar { width: 96px; height: 60px; margin-right: 11px; border-radius: 5px; }
     .spread-h5__loading { padding: 35px 0; text-align: center; }
     .spread-h5__finished { padding: 10px 0 18px; color: #b0b6c0; font-size: 11px; line-height: 16px; text-align: center; }
-    .spread-h5__empty { padding: 36px 0; color: #9aa2af; font-size: 13px; line-height: 20px; text-align: center; }
-    .spread-h5__detail { margin: 10px 12px 24px; padding: 18px 15px 24px; border-radius: 10px; background: #fff; }
-    .spread-h5__detail-title { margin: 0; color: #202124; font-size: 20px; line-height: 29px; text-align: center; word-break: break-word; }
-    .spread-h5__detail-meta { margin-top: 10px; padding-bottom: 14px; color: #9aa2af; font-size: 11px; line-height: 17px; text-align: center; border-bottom: 1px solid #edf1f6; }
-    .spread-h5__detail-summary { margin: 15px 0 0; padding: 10px 12px; color: #697386; font-size: 14px; line-height: 22px; border-radius: 6px; background: #f7f9fc; }
-    .spread-h5__detail-cover { width: 100%; max-height: 240px; margin: 16px 0 0; display: block; border-radius: 6px; object-fit: contain; }
-    .spread-h5__slider { height: 220px; margin-top: 16px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
-    .spread-h5__slide { position: relative; height: 220px; }
-    .spread-h5__slide img { width: 100%; height: 100%; display: block; object-fit: contain; }
-    .spread-h5__slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(to top, rgba(15,23,42,.72), transparent); box-sizing: border-box; }
-    .spread-h5__detail-body { margin-top: 16px; overflow: hidden; color: #323233; font-size: 15px; line-height: 1.8; word-break: break-word; }
-    .spread-h5__detail-body img, .spread-h5__detail-body video { max-width: 100% !important; height: auto !important; }
-    .spread-h5__detail-body table { max-width: 100% !important; }
+    .spread-h5__empty { min-height: 250px; padding: 28px 18px 36px; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; text-align: center; }
+    .spread-h5__empty-image { display: block; width: 82%; max-width: 280px; height: auto; object-fit: contain; }
+    .spread-h5__empty-title { margin-top: 8px; color: #50627a; font-size: 15px; line-height: 22px; font-weight: 500; }
+    .spread-h5__empty-hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
 </style>
 
 <div id="app" class="spread-h5" v-cloak>
-    <van-nav-bar :title="detail ? '动态详情' : '工会动态'" left-arrow left-text="返回" fixed placeholder :z-index="20" @click-left="handleBack"></van-nav-bar>
+    <van-nav-bar title="工会动态" left-arrow left-text="返回" fixed placeholder :z-index="20" @click-left="handleBack"></van-nav-bar>
 
-    <template v-if="!detail">
+    <template>
         <div class="spread-h5__toolbar">
             <div class="spread-h5__search">
                 <van-search v-model.trim="keyword"
@@ -56,25 +61,44 @@ layout("/layouts/platform_h5.html"){
                             @clear="doSearch"></van-search>
             </div>
             <div class="spread-h5__categories" v-if="categories.length">
-                <div class="spread-h5__tabs">
-                    <div class="spread-h5__tab"
-                         v-for="category in categories"
-                         :key="category.id"
-                         :class="{'spread-h5__tab--active': parentId === category.id}"
-                         @click="selectParent(category)">{{category.name}}</div>
+                <div class="spread-h5__tabs-nav">
+                    <button type="button" class="spread-h5__tabs-arrow" @click="scrollTabs(-1)">
+                        <van-icon name="arrow-left"></van-icon>
+                    </button>
+                    <div ref="spreadTabs" class="spread-h5__tabs">
+                        <div class="spread-h5__tab"
+                             v-for="category in categories"
+                             :key="category.id"
+                             :class="{'spread-h5__tab--active': parentId === category.id}"
+                             @click="selectParent(category)">{{category.name}}</div>
+                    </div>
+                    <button type="button" class="spread-h5__tabs-arrow" @click="scrollTabs(1)">
+                        <van-icon name="arrow"></van-icon>
+                    </button>
                 </div>
-                <div class="spread-h5__tabs spread-h5__tabs--secondary" v-if="currentChildren.length">
-                    <div class="spread-h5__tab"
-                         v-for="category in currentChildren"
-                         :key="category.id"
-                         :class="{'spread-h5__tab--active': categoryId === category.id}"
-                         @click="selectCategory(category)">{{category.name}}</div>
+                <div class="spread-h5__filters">
+                    <van-dropdown-menu class="spread-h5__filter-menu" active-color="#087af4">
+                        <van-dropdown-item v-model="categoryId"
+                                           :options="typeOptions"
+                                           @change="handleFilterChange"></van-dropdown-item>
+                        <van-dropdown-item v-model="sortType"
+                                           :options="sortOptions"
+                                           @change="handleFilterChange"></van-dropdown-item>
+                        <van-dropdown-item v-model="publishDays"
+                                           :options="publishTimeOptions"
+                                           @change="handleFilterChange"></van-dropdown-item>
+                    </van-dropdown-menu>
                 </div>
             </div>
         </div>
 
-        <div v-if="pageData.list.length" class="spread-h5__list">
-            <div class="spread-h5__item" v-for="item in pageData.list" :key="item.id" @click="openDetail(item)">
+        <div v-if="listSkeletonLoading" class="spread-h5__skeleton-list">
+            <div class="spread-h5__skeleton-item" v-for="index in 4" :key="'spread-list-skeleton-' + index">
+                <van-skeleton title avatar :row="2"></van-skeleton>
+            </div>
+        </div>
+        <div v-if="!listSkeletonLoading && pageData.list.length" class="spread-h5__list">
+            <div class="spread-h5__item" v-for="item in pageData.list" :key="item.id" @click="enterDetail(item)">
                 <img v-if="getCoverUrl(item.thumbUrl)" class="spread-h5__cover" :src="getCoverUrl(item.thumbUrl)" :alt="item.title">
                 <div class="spread-h5__item-content">
                     <div class="spread-h5__item-title">{{item.title}}</div>
@@ -86,33 +110,17 @@ layout("/layouts/platform_h5.html"){
                 </div>
             </div>
         </div>
-        <div v-if="loading" class="spread-h5__loading"><van-loading size="22px">加载中...</van-loading></div>
+        <div v-if="loading && !listSkeletonLoading" class="spread-h5__loading"><van-loading size="22px">加载中...</van-loading></div>
         <div v-if="!loading && finished && pageData.list.length" class="spread-h5__finished">没有更多了</div>
-        <div v-if="!loading && finished && !pageData.list.length" class="spread-h5__empty">暂无动态</div>
+        <div v-if="!loading && finished && !pageData.list.length" class="spread-h5__empty">
+            <img class="spread-h5__empty-image"
+                 src="/assets/mobile/img/home/v4/union-news-empty-v4.png"
+                 alt="暂无工会动态">
+            <div class="spread-h5__empty-title">暂无工会动态</div>
+            <div class="spread-h5__empty-hint">当前筛选条件下暂无可展示的动态</div>
+        </div>
     </template>
 
-    <article v-else class="spread-h5__detail">
-        <h1 class="spread-h5__detail-title">{{detail.title}}</h1>
-        <div class="spread-h5__detail-meta">
-            {{formatDate(detail.publishedAt || detail.createdAt)}}　{{detail.categoryName}}　
-            <van-icon name="eye-o"></van-icon> {{detail.viewCount || 0}}
-        </div>
-        <img v-if="getCoverUrl(detail.thumbUrl)" class="spread-h5__detail-cover" :src="getCoverUrl(detail.thumbUrl)" :alt="detail.title">
-        <div v-if="detail.summary" class="spread-h5__detail-summary">{{detail.summary}}</div>
-        <van-swipe v-if="detailSlides.length"
-                   class="spread-h5__slider"
-                   :autoplay="3000"
-                   :show-indicators="detailSlides.length > 1"
-                   indicator-color="#1989fa">
-            <van-swipe-item v-for="(slide, index) in detailSlides" :key="slide.src + '-' + index">
-                <div class="spread-h5__slide">
-                    <img :src="slide.src" :alt="slide.title || detail.title">
-                    <div v-if="slide.title" class="spread-h5__slide-caption">{{slide.title}}</div>
-                </div>
-            </van-swipe-item>
-        </van-swipe>
-        <div class="spread-h5__detail-body" v-html="detail.contentBody"></div>
-    </article>
 </div>
 
 <script nonce="${cspNonce!}">
@@ -125,11 +133,25 @@ layout("/layouts/platform_h5.html"){
                 parentId: "",
                 categoryId: "",
                 keyword: "",
+                sortType: "comprehensive",
+                publishDays: 0,
+                sortOptions: [
+                    {text: "综合排序", value: "comprehensive"},
+                    {text: "最新发布", value: "latest"},
+                    {text: "浏览最多", value: "views"}
+                ],
+                publishTimeOptions: [
+                    {text: "发布时间", value: 0},
+                    {text: "近7天", value: 7},
+                    {text: "近30天", value: 30},
+                    {text: "近半年", value: 180},
+                    {text: "近一年", value: 365}
+                ],
                 loading: false,
+                listSkeletonLoading: true,
                 finished: false,
                 scrollContainer: null,
                 requestSeq: 0,
-                detail: null,
                 pageData: {pageNumber: 1, pageSize: 10, totalCount: 0, list: []}
             }
         },
@@ -138,8 +160,10 @@ layout("/layouts/platform_h5.html"){
                 const parent = this.categories.find(item => item.id === this.parentId)
                 return parent && parent.children ? parent.children : []
             },
-            detailSlides() {
-                return this.getSliderEntries(this.detail && this.detail.sliderImages)
+            typeOptions() {
+                return [{text: "全部类型", value: this.parentId}].concat(
+                    this.currentChildren.map(item => ({text: item.name, value: item.id}))
+                )
             }
         },
         methods: {
@@ -150,19 +174,26 @@ layout("/layouts/platform_h5.html"){
                     const firstParent = this.categories[0]
                     if (!firstParent) return
                     this.parentId = firstParent.id
-                    const children = firstParent.children || []
-                    this.categoryId = children.length ? children[0].id : firstParent.id
+                    this.categoryId = firstParent.id
                 })
             },
             loadPage() {
-                if (!this.categoryId || this.loading || this.finished) {
+                if (!this.categoryId) {
+                    this.listSkeletonLoading = false
                     return
                 }
+                if (this.loading || this.finished) {
+                    return
+                }
+                const showSkeleton = this.pageData.pageNumber === 1 && !this.pageData.list.length
+                if (showSkeleton) this.listSkeletonLoading = true
                 this.loading = true
                 const requestSeq = ++this.requestSeq
                 this.$axios.post(this.apiBase + "/pageData", {
                     categoryId: this.categoryId,
                     title: this.keyword,
+                    sortType: this.sortType,
+                    publishDays: this.publishDays,
                     pageNumber: this.pageData.pageNumber,
                     pageSize: this.pageData.pageSize
                 }).then(resp => {
@@ -178,18 +209,22 @@ layout("/layouts/platform_h5.html"){
                         this.finished = true
                     }
                 }).finally(() => {
-                    if (requestSeq === this.requestSeq) this.loading = false
+                    if (requestSeq === this.requestSeq) {
+                        this.loading = false
+                        if (showSkeleton) this.listSkeletonLoading = false
+                    }
                 })
             },
             resetPage() {
                 this.requestSeq += 1
                 this.loading = false
+                this.listSkeletonLoading = true
                 this.finished = false
                 this.pageData = {pageNumber: 1, pageSize: 10, totalCount: 0, list: []}
                 this.$nextTick(() => this.loadPage())
             },
             handlePageScroll() {
-                if (!this.scrollContainer || this.loading || this.finished || this.detail) return
+                if (!this.scrollContainer || this.loading || this.finished) return
                 const remaining = this.scrollContainer.scrollHeight
                     - this.scrollContainer.scrollTop
                     - this.scrollContainer.clientHeight
@@ -198,42 +233,27 @@ layout("/layouts/platform_h5.html"){
             doSearch() {
                 this.resetPage()
             },
+            scrollTabs(direction) {
+                const tabs = this.$refs.spreadTabs
+                if (!tabs) return
+                tabs.scrollTo({
+                    left: tabs.scrollLeft + direction * tabs.clientWidth * 0.75,
+                    behavior: "smooth"
+                })
+            },
             selectParent(category) {
                 if (this.parentId === category.id) return
                 this.parentId = category.id
-                const children = category.children || []
-                this.categoryId = children.length ? children[0].id : category.id
-                this.resetPage()
-            },
-            selectCategory(category) {
-                if (this.categoryId === category.id) return
                 this.categoryId = category.id
                 this.resetPage()
             },
-            openDetail(item) {
-                this.loading = true
-                Promise.all([
-                    this.$axios.post(this.apiBase + "/detailData", {id: item.id}),
-                    this.$axios.post(this.apiBase + "/addView", {id: item.id})
-                ]).then(values => {
-                    if (values[0].code === 0) {
-                        this.detail = values[0].data
-                        this.detail.viewCount = Number(this.detail.viewCount || 0) + 1
-                    }
-                }).finally(() => this.loading = false)
+            handleFilterChange() {
+                this.resetPage()
             },
-            loadRequestedDetail() {
-                const id = new URLSearchParams(window.location.search).get("id")
-                if (!id) return false
-                this.openDetail({id: id})
-                return true
+            enterDetail(item) {
+                this.$pjaxReplace(this.apiBase + "/detail?id=" + encodeURIComponent(item.id) + "&from=list")
             },
             handleBack() {
-                if (this.detail) {
-                    this.detail = null
-                    if (!this.pageData.list.length) this.resetPage()
-                    return
-                }
                 this.$pjaxReplace("/platform/h5/home")
             },
             getCoverUrl(value) {
@@ -251,33 +271,12 @@ layout("/layouts/platform_h5.html"){
                 if (typeof first === "string") return first.trim()
                 return first && (first.src || first.url || first.data || (first.response && first.response.data)) || ""
             },
-            getSliderEntries(value) {
-                if (!value) return []
-                let items = value
-                if (!Array.isArray(items)) {
-                    try {
-                        items = JSON.parse(value)
-                    } catch (e) {
-                        items = String(value).split(",").filter(Boolean)
-                    }
-                }
-                if (!Array.isArray(items)) return []
-                return items.map(item => {
-                    if (typeof item === "string") return {src: item.trim(), title: ""}
-                    return {
-                        src: item.src || item.url || item.data || (item.response && item.response.data) || "",
-                        title: item.title || item.description || ""
-                    }
-                }).filter(item => item.src)
-            },
             formatDate(value) {
                 return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : ""
             }
         },
         created() {
-            this.loadCategories().then(() => {
-                if (!this.loadRequestedDetail()) this.resetPage()
-            })
+            this.loadCategories().then(() => this.resetPage())
         },
         mounted() {
             this.scrollContainer = document.querySelector("body > .main-page .page-wrapper")

src/main/resources/views/platform/zhghh5/sys/home/apps.js

@@ -446,7 +446,7 @@ const apps = {
         .apps-container {
             display: flex;
             flex-direction: column;
-            height: calc(100vh - 50px);
+            height: 100vh;
             overflow: hidden;
             background: #f5f7fa;
         }

src/main/resources/views/platform/zhghh5/sys/home/home.js

@@ -67,6 +67,71 @@ const home = {
                 </div>
             </div>
 
+            <div class="union-news-panel">
+                <div class="union-news-panel__head">
+                    <div class="union-news-panel__title">工会动态</div>
+                    <div class="union-news-panel__more" @click="enterSpreadList">
+                        <span>全部动态</span>
+                        <van-icon name="arrow"></van-icon>
+                    </div>
+                </div>
+                <div v-if="spreadLoading && !spreadDynamics.length" class="union-news-list union-news-list--skeleton">
+                    <div class="union-news-item union-news-item--skeleton"
+                         v-for="index in 2"
+                         :key="'union-news-skeleton-' + index">
+                        <span class="union-news-skeleton__cover home-card-skeleton"></span>
+                        <div class="union-news-skeleton__content">
+                            <div class="union-news-skeleton__tags">
+                                <span class="union-news-skeleton__tag home-card-skeleton"></span>
+                                <span class="union-news-skeleton__tag union-news-skeleton__tag--short home-card-skeleton"></span>
+                            </div>
+                            <span class="union-news-skeleton__line union-news-skeleton__line--title home-card-skeleton"></span>
+                            <span class="union-news-skeleton__line union-news-skeleton__line--summary home-card-skeleton"></span>
+                            <div class="union-news-skeleton__meta">
+                                <span class="home-card-skeleton"></span>
+                                <span class="home-card-skeleton"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="union-news-list" v-else-if="spreadDynamics.length">
+                    <div class="union-news-item"
+                         v-for="item in spreadDynamics"
+                         :key="item.id"
+                         @click="enterSpreadDetail(item)">
+                        <img v-if="getSpreadCover(item.thumbUrl)"
+                             class="union-news-item__cover"
+                             :src="getSpreadCover(item.thumbUrl)"
+                             :alt="item.title">
+                        <div class="union-news-item__content">
+                            <div class="union-news-item__tags">
+                                <span class="union-news-item__tag"
+                                      v-for="(label, index) in getSpreadCategoryLabels(item)"
+                                      :key="label + '-' + index"
+                                      :class="{'union-news-item__tag--secondary': index > 0}">{{ label }}</span>
+                            </div>
+                            <div class="union-news-item__title">{{ item.title }}</div>
+                            <div v-if="item.summary || item.subTitle" class="union-news-item__summary">
+                                {{ item.summary || item.subTitle }}
+                            </div>
+                            <div class="union-news-item__meta">
+                                <span>{{ formatSpreadDate(item.publishedAt || item.createdAt) }}</span>
+                                <span class="union-news-item__views">
+                                    <van-icon name="eye-o"></van-icon>
+                                    {{ item.viewCount || 0 }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="!spreadLoading" class="union-news-empty">
+                    <img class="union-news-empty__image"
+                         src="/assets/mobile/img/home/v4/union-news-empty-v4.png"
+                         alt="暂无工会动态">
+                    <span class="union-news-empty__text">暂无工会动态</span>
+                </div>
+            </div>
+            
             <div class="classroom-section">
                 <div class="classroom-section__head">
                     <div class="classroom-section__title">我的课堂</div>
@@ -75,7 +140,27 @@ const home = {
                         <van-icon name="arrow"></van-icon>
                     </div>
                 </div>
-                <div v-if="classroomCourses.length" class="classroom-course-scroll">
+                <div v-if="classroomLoading"
+                     class="classroom-course-scroll classroom-course-scroll--skeleton">
+                    <div class="classroom-course-card classroom-course-card--skeleton"
+                         v-for="index in 2"
+                         :key="'classroom-skeleton-' + index">
+                        <div class="classroom-course-skeleton__cover home-card-skeleton"></div>
+                        <div class="classroom-course-skeleton__content">
+                            <span class="classroom-course-skeleton__name home-card-skeleton"></span>
+                            <div class="classroom-course-skeleton__tags">
+                                <span class="classroom-course-skeleton__type home-card-skeleton"></span>
+                                <span class="classroom-course-skeleton__lecturer home-card-skeleton"></span>
+                            </div>
+                            <div class="classroom-course-skeleton__stats">
+                                <span class="home-card-skeleton"></span>
+                                <span class="home-card-skeleton"></span>
+                            </div>
+                            <span class="classroom-course-skeleton__progress home-card-skeleton"></span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="classroomCourses.length" class="classroom-course-scroll">
                     <div class="classroom-course-card"
                          v-for="course in classroomCourses"
                          :key="course.id"
@@ -103,56 +188,7 @@ const home = {
                         </div>
                     </div>
                 </div>
-                <div v-else class="classroom-empty">暂无课程</div>
-            </div>
-
-            <div class="union-news-panel">
-                <div class="union-news-panel__head">
-                    <div class="union-news-panel__title">工会动态</div>
-                    <div class="union-news-panel__more" @click="enterSpreadList">
-                        <span>全部动态</span>
-                        <van-icon name="arrow"></van-icon>
-                    </div>
-                </div>
-                <div class="union-news-tabs union-news-tabs--primary">
-                    <div class="union-news-tab"
-                         v-for="category in spreadCategories"
-                         :key="category.id"
-                         :class="{'union-news-tab--active': spreadParentId === category.id}"
-                         @click="changeSpreadParent(category)">{{ category.name }}</div>
-                </div>
-                <div class="union-news-tabs union-news-tabs--secondary" v-if="spreadChildren.length">
-                    <div class="union-news-tab union-news-tab--secondary"
-                         v-for="category in spreadChildren"
-                         :key="category.id"
-                         :class="{'union-news-tab--active': spreadCategoryId === category.id}"
-                         @click="changeSpreadCategory(category)">{{ category.name }}</div>
-                </div>
-                <div class="union-news-list" v-if="spreadDynamics.length">
-                    <div class="union-news-item"
-                         v-for="item in spreadDynamics"
-                         :key="item.id"
-                         @click="enterSpreadDetail(item)">
-                        <img v-if="getSpreadCover(item.thumbUrl)"
-                             class="union-news-item__cover"
-                             :src="getSpreadCover(item.thumbUrl)"
-                             :alt="item.title">
-                        <div class="union-news-item__content">
-                            <div class="union-news-item__title">{{ item.title }}</div>
-                            <div v-if="item.summary || item.subTitle" class="union-news-item__summary">
-                                {{ item.summary || item.subTitle }}
-                            </div>
-                            <div class="union-news-item__meta">
-                                <span>{{ formatSpreadDate(item.publishedAt || item.createdAt) }}</span>
-                                <span class="union-news-item__views">
-                                    <van-icon name="eye-o"></van-icon>
-                                    {{ item.viewCount || 0 }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-else-if="!spreadLoading" class="union-news-empty">暂无动态</div>
+                <div v-else-if="!classroomLoading" class="classroom-empty">暂无课程</div>
             </div>
 
             <div class="policy-panel">
@@ -206,14 +242,12 @@ const home = {
             activityOptions: [],
             quickEntries: [],
             classroomCourses: [],
+            classroomLoading: true,
             classroomRecommendOptions: [],
             showHomeSummary: false,
             homeScrollContainer: null,
-            spreadCategories: [],
-            spreadParentId: "",
-            spreadCategoryId: "",
             spreadDynamics: [],
-            spreadLoading: false,
+            spreadLoading: true,
             spreadLoadSeq: 0,
             showLatestActivity: false,
             featuredEntries: [
@@ -278,10 +312,6 @@ const home = {
     computed: {
         currentBanner() {
             return this.bannerList[this.activeBannerIndex] || this.bannerList[0] || {}
-        },
-        spreadChildren() {
-            const parent = this.spreadCategories.find(item => item.id === this.spreadParentId)
-            return parent && parent.children ? parent.children : []
         }
     },
     methods: {
@@ -433,9 +463,7 @@ const home = {
         },
         listClassroomCourses() {
             const cached = this.readHomeCache("classroom")
-            if (cached && cached.length) {
-                this.classroomCourses = cached
-            }
+            this.classroomLoading = true
             this.$axios.post("/platform/learning/course/display/pageData", {
                 pageNumber: 1,
                 pageSize: 20
@@ -446,9 +474,9 @@ const home = {
                     this.writeHomeCache("classroom", this.classroomCourses, this.homeCacheTtl.classroom)
                 }
             }).catch(() => {
-                if (!cached) {
-                    this.classroomCourses = []
-                }
+                this.classroomCourses = cached || []
+            }).finally(() => {
+                this.classroomLoading = false
             })
         },
         listClassroomRecommendOptions() {
@@ -484,33 +512,13 @@ const home = {
             const option = this.classroomRecommendOptions.find(item => item.code === code)
             return option ? option.name : code
         },
-        listSpreadCategories() {
-            this.$axios.post("/platform/h5/spread/categoryTree").then((res) => {
-                if (res.code !== 0) {
-                    return
-                }
-                this.spreadCategories = res.data || []
-                const firstParent = this.spreadCategories[0]
-                if (!firstParent) {
-                    this.spreadDynamics = []
-                    return
-                }
-                this.spreadParentId = firstParent.id
-                const children = firstParent.children || []
-                this.spreadCategoryId = children.length ? children[0].id : firstParent.id
-                this.listSpreadHomeContent(this.spreadCategoryId)
-            }).catch(() => {
-                this.spreadCategories = []
-                this.spreadDynamics = []
-            })
-        },
-        listSpreadHomeContent(categoryId) {
+        listSpreadHomeContent() {
             const loadSeq = ++this.spreadLoadSeq
             this.spreadLoading = true
             this.$axios.post("/platform/h5/spread/pageData", {
-                categoryId: categoryId,
+                sortType: "latest",
                 pageNumber: 1,
-                pageSize: 5
+                pageSize: 10
             }).then((res) => {
                 if (loadSeq === this.spreadLoadSeq && res.code === 0) {
                     const data = res.data || {}
@@ -526,21 +534,9 @@ const home = {
                 }
             })
         },
-        changeSpreadParent(category) {
-            if (this.spreadParentId === category.id) {
-                return
-            }
-            this.spreadParentId = category.id
-            const children = category.children || []
-            this.spreadCategoryId = children.length ? children[0].id : category.id
-            this.listSpreadHomeContent(this.spreadCategoryId)
-        },
-        changeSpreadCategory(category) {
-            if (this.spreadCategoryId === category.id) {
-                return
-            }
-            this.spreadCategoryId = category.id
-            this.listSpreadHomeContent(category.id)
+        getSpreadCategoryLabels(item) {
+            const labels = [item.parentCategoryName, item.childCategoryName].filter(Boolean)
+            return labels.length ? labels : (item.categoryName ? [item.categoryName] : [])
         },
         getSpreadCover(value) {
             if (!value) {
@@ -567,7 +563,7 @@ const home = {
             return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : ""
         },
         enterSpreadDetail(item) {
-            this.$pjaxReplace("/platform/h5/spread?id=" + encodeURIComponent(item.id))
+            this.$pjaxReplace("/platform/h5/spread/detail?id=" + encodeURIComponent(item.id) + "&from=home")
         },
         enterSpreadList() {
             this.$pjaxReplace("/platform/h5/spread")
@@ -613,7 +609,7 @@ const home = {
         this.listRecommendApp()
         this.listClassroomCourses()
         this.listClassroomRecommendOptions()
-        this.listSpreadCategories()
+        this.listSpreadHomeContent()
         if (this.showLatestActivity) {
             this.listActivity()
         }
@@ -1046,6 +1042,43 @@ const home = {
             display: none;
         }
 
+        @keyframes home-card-skeleton-loading {
+            0% { background-position: 100% 50%; }
+            100% { background-position: 0 50%; }
+        }
+
+        .home-card-skeleton {
+            display: block;
+            background: linear-gradient(90deg, #f2f3f5 25%, #e6e8eb 37%, #f2f3f5 63%);
+            background-size: 400% 100%;
+            animation: home-card-skeleton-loading 1.4s ease infinite;
+        }
+
+        .classroom-course-card--skeleton {
+            height: 202px;
+            box-sizing: border-box;
+        }
+
+        .classroom-course-skeleton__cover {
+            width: 100%;
+            height: 104px;
+        }
+
+        .classroom-course-skeleton__content {
+            height: 96px;
+            padding: 9px 10px 10px;
+            box-sizing: border-box;
+        }
+
+        .classroom-course-skeleton__name { width: 72%; height: 14px; border-radius: 3px; }
+        .classroom-course-skeleton__tags { height: 22px; margin-top: 5px; display: flex; align-items: center; gap: 7px; }
+        .classroom-course-skeleton__type { width: 48px; height: 16px; border-radius: 3px; }
+        .classroom-course-skeleton__lecturer { width: 76px; height: 10px; border-radius: 3px; }
+        .classroom-course-skeleton__stats { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; }
+        .classroom-course-skeleton__stats span { width: 64px; height: 10px; border-radius: 3px; }
+        .classroom-course-skeleton__stats span:last-child { width: 70px; }
+        .classroom-course-skeleton__progress { width: 100%; height: 3px; margin-top: 7px; border-radius: 3px; }
+
         .classroom-course-card {
             width: 238px;
             flex: 0 0 238px;
@@ -1274,102 +1307,65 @@ const home = {
             font-size: 13px;
         }
 
-        .union-news-tabs {
-            height: 38px;
-            padding: 0;
+        .union-news-list {
+            margin-top: 7px;
+            padding-bottom: 3px;
             display: flex;
+            gap: 10px;
             overflow-x: auto;
             overflow-y: hidden;
-            gap: 0;
-            border-bottom: 1px solid #edf1f6;
-            border-radius: 0;
-            background-color: transparent;
-            box-sizing: border-box;
             scrollbar-width: none;
             -webkit-overflow-scrolling: touch;
         }
 
-        .union-news-tabs::-webkit-scrollbar {
+        .union-news-list::-webkit-scrollbar {
             display: none;
         }
 
-        .union-news-tabs--secondary {
-            height: 32px;
-            margin-top: 8px;
-            padding: 0;
-            gap: 6px;
-            border-bottom: 0;
-            border-radius: 0;
-            background-color: transparent;
+        .union-news-item--skeleton {
+            height: 96px;
+            min-height: 96px;
         }
 
-        .union-news-tab {
-            position: relative;
-            min-width: 96px;
-            padding: 0 8px;
-            flex: 1 0 calc((100% - 6px) / 3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #7d8797;
-            font-size: 12px;
-            line-height: 18px;
-            white-space: nowrap;
-            border-radius: 7px;
-            box-sizing: border-box;
+        .union-news-skeleton__cover {
+            width: 80px;
+            height: 48px;
+            margin-right: 10px;
+            flex-shrink: 0;
+            border-radius: 4px;
         }
 
-        .union-news-tab--secondary {
-            min-width: 88px;
-            height: 28px;
-            padding: 0 12px;
-            flex: 1 0 calc((100% - 12px) / 3);
-            color: #969daa;
-            font-size: 11px;
-            border: 1px solid #e7ecf3;
-            border-radius: 999px;
-            background-color: #fafbfd;
+        .union-news-skeleton__content {
+            min-width: 0;
+            flex: 1;
         }
 
-        .union-news-tab--active {
-            color: #087af4;
-            font-weight: 600;
-        }
-
-        .union-news-tabs--primary .union-news-tab--active {
-            color: #087af4;
-            background-color: transparent;
-            background-image: linear-gradient(#087af4, #087af4);
-            background-repeat: no-repeat;
-            background-position: center bottom;
-            background-size: 24px 2px;
-            box-shadow: none;
-        }
-
-        .union-news-tabs--primary .union-news-tab--active::after {
-            content: none;
-        }
-
-        .union-news-tabs--secondary .union-news-tab--active {
-            color: #087af4;
-            border-color: #b9d8ff;
-            background-color: #edf6ff;
-        }
-
-        .union-news-list {
-            margin-top: 7px;
-        }
+        .union-news-skeleton__tags { height: 15px; margin-bottom: 4px; display: flex; gap: 4px; }
+        .union-news-skeleton__tag { width: 48px; height: 15px; border-radius: 999px; }
+        .union-news-skeleton__tag--short { width: 38px; }
+        .union-news-skeleton__line { height: 10px; border-radius: 3px; }
+        .union-news-skeleton__line--title { width: 88%; }
+        .union-news-skeleton__line--summary { width: 72%; margin-top: 7px; }
+        .union-news-skeleton__meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
+        .union-news-skeleton__meta span { width: 55px; height: 8px; border-radius: 3px; }
+        .union-news-skeleton__meta span:last-child { width: 28px; }
 
         .union-news-item {
-            min-height: 58px;
-            padding: 8px 0;
+            width: calc(100% - 32px);
+            min-width: calc(100% - 32px);
+            min-height: 96px;
+            padding: 10px;
+            flex-shrink: 0;
             display: flex;
             align-items: center;
+            border: 1px solid #edf1f6;
+            border-radius: 9px;
+            background-color: #fff;
             box-sizing: border-box;
         }
 
         .union-news-item + .union-news-item {
-            border-top: 1px solid #f2f4f7;
+            border-top: 1px solid #edf1f6;
         }
 
         .union-news-item:active {
@@ -1390,6 +1386,31 @@ const home = {
             flex: 1;
         }
 
+        .union-news-item__tags {
+            margin-bottom: 4px;
+            display: flex;
+            gap: 4px;
+            overflow: hidden;
+        }
+
+        .union-news-item__tag {
+            max-width: 46%;
+            padding: 1px 6px;
+            overflow: hidden;
+            color: #087af4;
+            font-size: 9px;
+            line-height: 15px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            border-radius: 999px;
+            background-color: #eaf4ff;
+        }
+
+        .union-news-item__tag--secondary {
+            color: #627ea4;
+            background-color: #f0f4f9;
+        }
+
         .union-news-item__title {
             overflow: hidden;
             color: #202124;
@@ -1431,13 +1452,28 @@ const home = {
         }
 
         .union-news-empty {
-            padding: 18px 0 14px;
+            display: flex;
+            padding: 12px 0 16px;
+            flex-direction: column;
+            align-items: center;
             color: #9aa2af;
             font-size: 12px;
             line-height: 18px;
             text-align: center;
         }
 
+        .union-news-empty__image {
+            display: block;
+            width: 82%;
+            max-width: 280px;
+            height: auto;
+            object-fit: contain;
+        }
+
+        .union-news-empty__text {
+            margin-top: 2px;
+        }
+
         .act-list {
             background-color: #fff;
             margin: 10px;

src/main/resources/views/platform/zhghh5/sys/home/index.html

@@ -7,6 +7,50 @@ layout("/layouts/platform_h5.html"){
         background: #0a84ff;
         color: #0b5a2c;
     }
+
+    .page-showtabbar .page-wrapper {
+        height: 100%;
+        padding-bottom: calc(78px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+    }
+
+    .page-tarbar .van-tabbar {
+        left: 12px;
+        bottom: calc(10px + env(safe-area-inset-bottom));
+        width: calc(100% - 24px);
+        height: 58px;
+        padding: 4px 6px;
+        overflow: hidden;
+        box-sizing: border-box;
+        border: 1px solid rgba(255, 255, 255, .72);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, .66);
+        -webkit-backdrop-filter: blur(5px) saturate(20%);
+        backdrop-filter: blur(5px) saturate(20%);
+        box-shadow: 0 10px 30px rgba(38, 66, 105, .18), 0 2px 8px rgba(38, 66, 105, .08);
+    }
+
+    .page-tarbar .van-tabbar::after {
+        display: none;
+    }
+
+    .page-tarbar .van-tabbar-item {
+        border-radius: 999px;
+        color: #718096;
+        background-color: transparent;
+        font-size: 11px;
+        transition: color .2s ease, background-color .2s ease;
+    }
+
+    .page-tarbar .van-tabbar-item--active {
+        color: #1677ff;
+        background-color: rgba(22, 119, 255, .1);
+    }
+
+    .page-tarbar .van-tabbar-item__icon {
+        margin-bottom: 2px;
+        font-size: 21px;
+    }
 </style>
 
 <div id="app" v-cloak>
@@ -21,7 +65,7 @@ layout("/layouts/platform_h5.html"){
         </div>
 
         <div id="page-tarbar" class="page-tarbar">
-            <van-tabbar v-model="homeTabbarActive" @change="homeTabbarChange">
+            <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>

src/main/resources/views/platform/zhghh5/sys/home/mine.js

@@ -1,6 +1,6 @@
 const mine = {
     template: /*language=HTML*/ `
-        <div class="home-mine">
+        <div class="home-mine" v-show="styleReady">
             <van-nav-bar title="我的" class="mine-nav" placeholder fixed :border="false"></van-nav-bar>
             <section class="mine-hero">
                 <div class="mine-user-summary">
@@ -107,6 +107,17 @@ const mine = {
             </main>
         </div>
     `,
+    data() {
+        return {
+            styleReady: false
+        }
+    },
+    mounted() {
+        // 等全局 styleMixin 完成作用域样式注入后再显示页面，避免刷新首帧闪现无样式内容。
+        this.$nextTick(() => {
+            this.styleReady = true
+        })
+    },
     computed: {
         user() {
             return this.$store.state.user || {}

src/main/resources/views/platform/zhghh5/sys/home/msg.js

@@ -49,7 +49,12 @@ const msg = {
 
             <van-pull-refresh v-model="refreshing" @refresh="onRefresh"
                               :style="{paddingTop: 44 * tabRevealProgress + 'px'}">
-                <van-list class="message-list"
+                <div v-if="skeletonLoading" class="message-skeleton-list">
+                    <div v-for="index in 4" :key="index" class="message-skeleton-card">
+                        <van-skeleton title :row="3"></van-skeleton>
+                    </div>
+                </div>
+                <van-list v-else class="message-list"
                           v-model="loading"
                           :finished="finished"
                           :immediate-check="false"
@@ -119,6 +124,7 @@ const msg = {
             tabRevealProgress: 0,
             scrollContainer: null,
             loading: false,
+            skeletonLoading: true,
             refreshing: false,
             finished: false,
             messages: [],
@@ -179,6 +185,8 @@ const msg = {
             }
         },
         async loadMessages(isRefresh = false) {
+            const showSkeleton = isRefresh || !this.messages.length
+            if (showSkeleton) this.skeletonLoading = true
             if (isRefresh) {
                 this.pageForm.pageNumber = 1
                 this.messages = []
@@ -201,6 +209,7 @@ const msg = {
             } finally {
                 this.loading = false
                 this.refreshing = false
+                if (showSkeleton) this.skeletonLoading = false
             }
         },
         async viewMessage(message) {
@@ -524,6 +533,20 @@ const msg = {
             padding: 8px 12px 0;
         }
 
+        /deep/ .message-skeleton-list {
+            min-height: calc(100vh - 140px);
+            padding: 8px 12px 0;
+            box-sizing: border-box;
+        }
+
+        /deep/ .message-skeleton-card {
+            margin-bottom: 10px;
+            padding: 18px 4px;
+            border-radius: 10px;
+            background: #fff;
+            box-shadow: 0 2px 10px rgba(31, 68, 113, .07);
+        }
+
         /deep/ .message-card {
             margin-bottom: 9px;
             padding: 11px 12px 8px;

src/main/resources/views/platform/zhghh5/sys/home/todo.js

@@ -70,9 +70,16 @@ const todo = {
 
             <!-- 任务列表区域 -->
             <div class="task-list-offset" :style="{paddingTop: 44 * tabRevealProgress + 'px'}">
+                <div v-if="skeletonLoading" class="task-skeleton-list">
+                    <div v-for="index in 4" :key="index" class="task-skeleton-card">
+                        <van-skeleton title :row="3"></van-skeleton>
+                    </div>
+                </div>
                 <table-list :api="'/flow/todoCenter/'+ activeTab" :page_form.sync="pageForm"
+                            v-show="!skeletonLoading"
                             ref="tableListRef"
                             @ready="doSearch"
+                            @loading-change="handleListLoadingChange"
                             title="variable.instanceName">
                     <template #header="{row}">
                         <div class="todo-item-header">
@@ -125,6 +132,7 @@ const todo = {
             // 任务列表
             tasks: [],
             loading: false,
+            skeletonLoading: true,
             finished: false,
             refreshing: false,
 
@@ -250,6 +258,10 @@ const todo = {
             })
         },
 
+        handleListLoadingChange(state) {
+            if (state.initial) this.skeletonLoading = state.loading
+        },
+
         // 重置搜索
         reset() {
             this.pageForm.searchKeyword = "";
@@ -542,6 +554,18 @@ const todo = {
             box-sizing: border-box;
         }
 
+        .task-skeleton-list {
+            padding: 10px 12px 0;
+        }
+
+        .task-skeleton-card {
+            margin-bottom: 10px;
+            padding: 18px 4px;
+            border-radius: 10px;
+            background: #fff;
+            box-shadow: 0 2px 10px rgba(31, 68, 113, .07);
+        }
+
         /deep/ .table-list-container {
             min-height: calc(100vh - 140px);
             margin-top: 8px !important;