diff --git a/src/main/java/com/budwk/app/zhgh/democratic/congress/service/impl/CongressH5ServiceImpl.java b/src/main/java/com/budwk/app/zhgh/democratic/congress/service/impl/CongressH5ServiceImpl.java
index 6a32a516..5aae6068 100644
--- a/src/main/java/com/budwk/app/zhgh/democratic/congress/service/impl/CongressH5ServiceImpl.java
+++ b/src/main/java/com/budwk/app/zhgh/democratic/congress/service/impl/CongressH5ServiceImpl.java
@@ -111,6 +111,13 @@ public class CongressH5ServiceImpl implements CongressH5Service {
                     cm.file_type AS fileType,
                     cm.file_size AS fileSize,
                     cm.create_time AS uploadTime,
+                    CASE
+                        WHEN cvi.id IS NULL THEN NULL
+                        WHEN cvr.id IS NOT NULL THEN 'voted'
+                        WHEN cvi.voting_start_time IS NOT NULL AND cvi.voting_start_time > NOW() THEN 'upcoming'
+                        WHEN cvi.voting_end_time IS NOT NULL AND cvi.voting_end_time < NOW() THEN 'ended'
+                        ELSE 'pending'
+                    END AS voteStatus,
                     CASE
                         WHEN cvi.id IS NULL THEN NULL
                         WHEN cvr.id IS NOT NULL THEN true
@@ -132,8 +139,7 @@ public class CongressH5ServiceImpl implements CongressH5Service {
                 WHERE COALESCE(cm.deleted, 0) = 0
                   AND cm.type_id = @typeId
                   AND (cm.session_id = @sessionId OR cm.time_id = @sessionId)
-                  AND (@searchKeyword = '' OR cm.name LIKE CONCAT('%%', @searchKeyword, '%%')
-                      OR cm.file_name LIKE CONCAT('%%', @searchKeyword, '%%'))
+                  AND (@searchKeyword = '' OR cm.name LIKE CONCAT('%%', @searchKeyword, '%%'))
                   AND (@fileType = '' OR FIND_IN_SET(LOWER(REPLACE(cm.file_type, '.', '')), @fileType) > 0
                       OR FIND_IN_SET(LOWER(SUBSTRING_INDEX(cm.file_name, '.', -1)), @fileType) > 0)
                 ORDER BY cm.create_time %s, cm.id DESC
@@ -349,6 +355,11 @@ public class CongressH5ServiceImpl implements CongressH5Service {
                     i.voting_type AS votingType,
                     i.voting_start_time AS votingStartTime,
                     i.voting_end_time AS votingEndTime,
+                    CASE
+                        WHEN i.voting_start_time IS NOT NULL AND i.voting_start_time > NOW() THEN 'upcoming'
+                        WHEN i.voting_end_time IS NOT NULL AND i.voting_end_time < NOW() THEN 'ended'
+                        ELSE 'ongoing'
+                    END AS votingStatus,
                     i.voting_content AS votingContent,
                     i.voting_content_item_header AS votingContentItemHeader,
                     i.voting_content_option_header AS votingContentOptionHeader,
@@ -385,7 +396,14 @@ public class CongressH5ServiceImpl implements CongressH5Service {
             return Result.error("投票参数不完整");
         }
         NutMap issue = fetchMap("""
-                SELECT id, session_id AS sessionId, COALESCE(time_id, session_id) AS timeId
+                SELECT id,
+                       session_id AS sessionId,
+                       COALESCE(time_id, session_id) AS timeId,
+                       CASE
+                           WHEN voting_start_time IS NOT NULL AND voting_start_time > NOW() THEN 'upcoming'
+                           WHEN voting_end_time IS NOT NULL AND voting_end_time < NOW() THEN 'ended'
+                           ELSE 'ongoing'
+                       END AS votingStatus
                 FROM congress_voting_issue
                 WHERE id = @issueId
                   AND session_id = @sessionId
@@ -395,6 +413,12 @@ public class CongressH5ServiceImpl implements CongressH5Service {
         if (issue == null) {
             return Result.error("投票议题不存在");
         }
+        if ("upcoming".equals(issue.getString("votingStatus"))) {
+            return Result.error("投票尚未开始");
+        }
+        if ("ended".equals(issue.getString("votingStatus"))) {
+            return Result.error("投票已结束，无法继续投票");
+        }
 
         NutMap rep = fetchMap("""
                 SELECT id, userId, loginName, userName, delegationId
diff --git a/src/main/resources/static/images/congress/empty/evaluation-vote-empty.png b/src/main/resources/static/images/congress/empty/evaluation-vote-empty.png
new file mode 100644
index 00000000..91df0273
Binary files /dev/null and b/src/main/resources/static/images/congress/empty/evaluation-vote-empty.png differ
diff --git a/src/main/resources/static/images/congress/empty/file-notice-empty.png b/src/main/resources/static/images/congress/empty/file-notice-empty.png
new file mode 100644
index 00000000..ffc7f3f0
Binary files /dev/null and b/src/main/resources/static/images/congress/empty/file-notice-empty.png differ
diff --git a/src/main/resources/static/images/congress/empty/meeting-sign-empty.png b/src/main/resources/static/images/congress/empty/meeting-sign-empty.png
new file mode 100644
index 00000000..91c5d536
Binary files /dev/null and b/src/main/resources/static/images/congress/empty/meeting-sign-empty.png differ
diff --git a/src/main/resources/static/images/congress/empty/topic-vote-empty.png b/src/main/resources/static/images/congress/empty/topic-vote-empty.png
new file mode 100644
index 00000000..88b32801
Binary files /dev/null and b/src/main/resources/static/images/congress/empty/topic-vote-empty.png differ
diff --git a/src/main/resources/static/images/congress/empty/vote-notice-empty.png b/src/main/resources/static/images/congress/empty/vote-notice-empty.png
new file mode 100644
index 00000000..b476de3e
Binary files /dev/null and b/src/main/resources/static/images/congress/empty/vote-notice-empty.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v2.png b/src/main/resources/static/images/congress/home/congress-hero-v2.png
new file mode 100644
index 00000000..9e8701c9
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v3.png b/src/main/resources/static/images/congress/home/congress-hero-v3.png
new file mode 100644
index 00000000..c1d519b5
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v4.png b/src/main/resources/static/images/congress/home/congress-hero-v4.png
new file mode 100644
index 00000000..65ef39a6
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v4.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v5.png b/src/main/resources/static/images/congress/home/congress-hero-v5.png
new file mode 100644
index 00000000..d7d53f55
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v5.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v6.png b/src/main/resources/static/images/congress/home/congress-hero-v6.png
new file mode 100644
index 00000000..ea7d61cd
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v6.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v7.png b/src/main/resources/static/images/congress/home/congress-hero-v7.png
new file mode 100644
index 00000000..052a38ad
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v7.png differ
diff --git a/src/main/resources/static/images/congress/home/congress-hero-v8.png b/src/main/resources/static/images/congress/home/congress-hero-v8.png
new file mode 100644
index 00000000..0631fca7
Binary files /dev/null and b/src/main/resources/static/images/congress/home/congress-hero-v8.png differ
diff --git a/src/main/resources/static/images/congress/home/evaluation-vote-bg-v1.png b/src/main/resources/static/images/congress/home/evaluation-vote-bg-v1.png
new file mode 100644
index 00000000..256e100d
Binary files /dev/null and b/src/main/resources/static/images/congress/home/evaluation-vote-bg-v1.png differ
diff --git a/src/main/resources/static/images/congress/home/evaluation-vote-v2.png b/src/main/resources/static/images/congress/home/evaluation-vote-v2.png
new file mode 100644
index 00000000..1cebafe7
Binary files /dev/null and b/src/main/resources/static/images/congress/home/evaluation-vote-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/evaluation-vote-v3.png b/src/main/resources/static/images/congress/home/evaluation-vote-v3.png
new file mode 100644
index 00000000..2d5dcd55
Binary files /dev/null and b/src/main/resources/static/images/congress/home/evaluation-vote-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/evaluation-vote-v4.png b/src/main/resources/static/images/congress/home/evaluation-vote-v4.png
new file mode 100644
index 00000000..1c6fdb91
Binary files /dev/null and b/src/main/resources/static/images/congress/home/evaluation-vote-v4.png differ
diff --git a/src/main/resources/static/images/congress/home/file-notice-bg-v1.png b/src/main/resources/static/images/congress/home/file-notice-bg-v1.png
new file mode 100644
index 00000000..c5fc1007
Binary files /dev/null and b/src/main/resources/static/images/congress/home/file-notice-bg-v1.png differ
diff --git a/src/main/resources/static/images/congress/home/file-notice-v2.png b/src/main/resources/static/images/congress/home/file-notice-v2.png
new file mode 100644
index 00000000..5a455756
Binary files /dev/null and b/src/main/resources/static/images/congress/home/file-notice-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/file-notice-v3.png b/src/main/resources/static/images/congress/home/file-notice-v3.png
new file mode 100644
index 00000000..c404acd4
Binary files /dev/null and b/src/main/resources/static/images/congress/home/file-notice-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/file-notice-v4.png b/src/main/resources/static/images/congress/home/file-notice-v4.png
new file mode 100644
index 00000000..d36c1748
Binary files /dev/null and b/src/main/resources/static/images/congress/home/file-notice-v4.png differ
diff --git a/src/main/resources/static/images/congress/home/meeting-sign-bg-v1.png b/src/main/resources/static/images/congress/home/meeting-sign-bg-v1.png
new file mode 100644
index 00000000..98e7c8d9
Binary files /dev/null and b/src/main/resources/static/images/congress/home/meeting-sign-bg-v1.png differ
diff --git a/src/main/resources/static/images/congress/home/meeting-sign-v2.png b/src/main/resources/static/images/congress/home/meeting-sign-v2.png
new file mode 100644
index 00000000..bc00c30f
Binary files /dev/null and b/src/main/resources/static/images/congress/home/meeting-sign-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/meeting-sign-v3.png b/src/main/resources/static/images/congress/home/meeting-sign-v3.png
new file mode 100644
index 00000000..c8690b91
Binary files /dev/null and b/src/main/resources/static/images/congress/home/meeting-sign-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/meeting-sign-v4.png b/src/main/resources/static/images/congress/home/meeting-sign-v4.png
new file mode 100644
index 00000000..f3910c6a
Binary files /dev/null and b/src/main/resources/static/images/congress/home/meeting-sign-v4.png differ
diff --git a/src/main/resources/static/images/congress/home/topic-vote-bg-v1.png b/src/main/resources/static/images/congress/home/topic-vote-bg-v1.png
new file mode 100644
index 00000000..a3eb1347
Binary files /dev/null and b/src/main/resources/static/images/congress/home/topic-vote-bg-v1.png differ
diff --git a/src/main/resources/static/images/congress/home/topic-vote-v2.png b/src/main/resources/static/images/congress/home/topic-vote-v2.png
new file mode 100644
index 00000000..ebee0546
Binary files /dev/null and b/src/main/resources/static/images/congress/home/topic-vote-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/topic-vote-v3.png b/src/main/resources/static/images/congress/home/topic-vote-v3.png
new file mode 100644
index 00000000..fc612865
Binary files /dev/null and b/src/main/resources/static/images/congress/home/topic-vote-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/topic-vote-v4.png b/src/main/resources/static/images/congress/home/topic-vote-v4.png
new file mode 100644
index 00000000..1bc73714
Binary files /dev/null and b/src/main/resources/static/images/congress/home/topic-vote-v4.png differ
diff --git a/src/main/resources/static/images/congress/home/vote-notice-bg-v1.png b/src/main/resources/static/images/congress/home/vote-notice-bg-v1.png
new file mode 100644
index 00000000..0f7b2f49
Binary files /dev/null and b/src/main/resources/static/images/congress/home/vote-notice-bg-v1.png differ
diff --git a/src/main/resources/static/images/congress/home/vote-notice-v2.png b/src/main/resources/static/images/congress/home/vote-notice-v2.png
new file mode 100644
index 00000000..86832645
Binary files /dev/null and b/src/main/resources/static/images/congress/home/vote-notice-v2.png differ
diff --git a/src/main/resources/static/images/congress/home/vote-notice-v3.png b/src/main/resources/static/images/congress/home/vote-notice-v3.png
new file mode 100644
index 00000000..f0ab675c
Binary files /dev/null and b/src/main/resources/static/images/congress/home/vote-notice-v3.png differ
diff --git a/src/main/resources/static/images/congress/home/vote-notice-v4.png b/src/main/resources/static/images/congress/home/vote-notice-v4.png
new file mode 100644
index 00000000..6727e211
Binary files /dev/null and b/src/main/resources/static/images/congress/home/vote-notice-v4.png differ
diff --git a/src/main/resources/views/platform/zhghh5/democratic/congress/index.html b/src/main/resources/views/platform/zhghh5/democratic/congress/index.html
index 9b349572..3941e539 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/congress/index.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/congress/index.html
@@ -6,15 +6,29 @@ layout("/layouts/platform_h5.html"){
     <van-nav-bar title="职代会" left-text="返回" left-arrow @click-left="returnH5Home('apps')" placeholder fixed></van-nav-bar>
 
     <div class="congress-page">
-        <div class="empty-box" v-if="!loading && timesList.length === 0">
+        <div v-if="loading" class="congress-skeleton">
+            <div class="congress-skeleton__hero">
+                <van-skeleton title :row="2"></van-skeleton>
+            </div>
+            <div class="congress-skeleton__list">
+                <div v-for="index in 5" :key="'congress-skeleton-' + index" class="congress-skeleton__card">
+                    <van-skeleton avatar avatar-size="56px" title :row="1"></van-skeleton>
+                </div>
+            </div>
+        </div>
+
+        <div class="empty-box" v-else-if="timesList.length === 0">
             <van-icon name="notes-o" class="empty-icon"></van-icon>
             <p class="empty-text">暂无参与届次信息</p>
         </div>
 
         <template v-else>
             <div class="page-header">
+                <img class="page-header__bg" src="${base!}/images/congress/home/congress-hero-v8.png" alt="">
+                <div class="page-header__color-layer" aria-hidden="true"></div>
                 <div class="session-info-card">
-                    <h2 class="session-title">{{ selectedSessionName }}</h2>
+                    <h2 class="session-title">{{ selectedTimeText || selectedSessionName }}</h2>
+                    <p class="session-subtitle">凝聚共识 · 共谋发展</p>
                     <button v-if="timesList.length > 1" type="button" class="header-switch-btn" @click="showTimePicker = true">
                         <span>切换届次</span>
                         <van-icon name="arrow-down" size="12"></van-icon>
@@ -31,9 +45,10 @@ layout("/layouts/platform_h5.html"){
                             :class="resolveTheme(module.name)"
                             @click="handleModuleClick(module)"
                     >
+                        <img class="module-card__bg" :src="module.background" alt="">
                         <div class="module-header">
                             <div class="icon-wrapper">
-                                <van-icon :name="module.icon" size="36"></van-icon>
+                                <img :src="module.image" :alt="module.name">
                             </div>
                             <div class="module-info">
                                 <h4 class="module-title">{{ module.name }}</h4>
@@ -85,7 +100,6 @@ layout("/layouts/platform_h5.html"){
         },
         methods: {
             async initPage() {
-                const loading = this.$toast.loading({message: "加载中...", forbidClick: true, duration: 0})
                 try {
                     await this.fetchRepTimes()
                     if (this.timesList.length > 0) {
@@ -95,7 +109,6 @@ layout("/layouts/platform_h5.html"){
                     }
                 } finally {
                     this.loading = false
-                    loading.close()
                 }
             },
             loginName() {
@@ -121,14 +134,16 @@ layout("/layouts/platform_h5.html"){
                 const modules = (res.data || []).map((item) => ({
                     id: item.id,
                     name: item.name,
-                    icon: this.resolveIcon(item.name),
+                    image: this.resolveImage(item.name),
+                    background: this.resolveBackground(item.name),
                     desc: this.resolveDesc(item.name)
                 }))
                 const hasSignin = modules.some((item) => item.name && item.name.indexOf("会议签到") > -1)
                 this.moduleList = hasSignin ? modules : [{
                     id: "signin",
                     name: "会议签到",
-                    icon: "completed",
+                    image: this.resolveImage("会议签到"),
+                    background: this.resolveBackground("会议签到"),
                     desc: "点击进行会议签到"
                 }].concat(modules)
             },
@@ -184,15 +199,23 @@ layout("/layouts/platform_h5.html"){
                     "&timeId=" + encodeURIComponent(this.selectedTimeId) +
                     "&sessionId=" + encodeURIComponent(this.selectedSessionId))
             },
-            resolveIcon(name) {
-                if (!name) return "orders-o"
-                if (name.indexOf("会议签到") > -1) return "completed"
-                if (name.indexOf("评议") > -1) return "star"
-                if (name.indexOf("议题") > -1) return "todo-list"
-                if (name.indexOf("资料") > -1) return "notes"
-                if (name.indexOf("公告") > -1 || name.indexOf("结果") > -1) return "bell"
-                if (name.indexOf("文件") > -1) return "description"
-                return "orders"
+            resolveImage(name) {
+                const imageRoot = "${base!}/images/congress/home/"
+                if (!name) return imageRoot + "file-notice-v4.png"
+                if (name.indexOf("会议签到") > -1) return imageRoot + "meeting-sign-v4.png"
+                if (name.indexOf("评议") > -1) return imageRoot + "evaluation-vote-v4.png"
+                if (name.indexOf("议题") > -1) return imageRoot + "topic-vote-v4.png"
+                if (name.indexOf("表决公告") > -1 || name.indexOf("结果") > -1) return imageRoot + "vote-notice-v4.png"
+                return imageRoot + "file-notice-v4.png"
+            },
+            resolveBackground(name) {
+                const imageRoot = "${base!}/images/congress/home/"
+                if (!name) return imageRoot + "file-notice-bg-v1.png"
+                if (name.indexOf("会议签到") > -1) return imageRoot + "meeting-sign-bg-v1.png"
+                if (name.indexOf("评议") > -1) return imageRoot + "evaluation-vote-bg-v1.png"
+                if (name.indexOf("议题") > -1) return imageRoot + "topic-vote-bg-v1.png"
+                if (name.indexOf("表决公告") > -1 || name.indexOf("结果") > -1) return imageRoot + "vote-notice-bg-v1.png"
+                return imageRoot + "file-notice-bg-v1.png"
             },
             resolveDesc(name) {
                 if (!name) return ""
@@ -223,18 +246,74 @@ layout("/layouts/platform_h5.html"){
 <style id="style-congress-h5">
     .congress-page {
         height: calc(100vh - 46px);
-        background: #f4f8ff;
+        background: #f3f7fd;
         overflow: hidden;
         display: flex;
         flex-direction: column;
     }
 
+    .congress-skeleton {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        background: #f3f7fd;
+    }
+
+    .congress-skeleton__hero {
+        height: 220px;
+        padding: 0 24px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        background: #e8eef7;
+    }
+
+    .congress-skeleton__hero .van-skeleton {
+        width: 52%;
+        padding: 0;
+    }
+
+    .congress-skeleton__list {
+        padding: 12px;
+        display: grid;
+        gap: 12px;
+        box-sizing: border-box;
+    }
+
+    .congress-skeleton__card {
+        min-height: 104px;
+        padding: 18px 16px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        border: 1px solid #e5edf8;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.06);
+    }
+
+    .congress-skeleton__card .van-skeleton {
+        width: 100%;
+        padding: 0;
+    }
+
+    #app > .van-nav-bar .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    #app > .van-nav-bar .van-icon,
+    #app > .van-nav-bar .van-nav-bar__text {
+        color: #1989fa;
+    }
+
     .page-header {
-        min-height: 192px;
-        background: #1686ff url("${base!}/images/congress/h5-congress-header.png") center center / cover no-repeat;
-        padding: 0px 15px 50px;
+        min-height: 220px;
+        background-color: #1458ad;
+        padding: 18px 24px 24px;
+        box-sizing: border-box;
         color: #fff;
-        box-shadow: 0 12px 28px rgba(25, 137, 250, 0.18);
         display: flex;
         justify-content: flex-start;
         align-items: center;
@@ -243,6 +322,30 @@ layout("/layouts/platform_h5.html"){
         flex-shrink: 0;
     }
 
+    .page-header__bg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 88% center;
+        display: block;
+    }
+
+    .page-header__color-layer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 64%;
+        z-index: 1;
+        pointer-events: none;
+        background: linear-gradient(90deg,
+            rgba(22, 112, 232, 0.98) 0%,
+            rgba(22, 112, 232, 0.88) 52%,
+            rgba(22, 112, 232, 0) 100%);
+    }
+
     .session-info-card {
         display: flex;
         flex-direction: column;
@@ -250,34 +353,41 @@ layout("/layouts/platform_h5.html"){
         text-align: left;
         position: relative;
         z-index: 3;
-        max-width: 50%;
+        max-width: 52%;
     }
 
     .session-title {
         font-size: 25px;
         font-weight: 700;
-        line-height: 1.25;
+        line-height: 1.32;
         color: #fff;
-        margin: 0 0 10px;
-        text-shadow: 0 4px 12px rgba(3, 77, 168, 0.18);
+        margin: 0;
+        text-shadow: 0 3px 10px rgba(3, 77, 168, 0.2);
+    }
+
+    .session-subtitle {
+        margin: 8px 0 0;
+        font-size: 14px;
+        line-height: 1.4;
+        color: rgba(255, 255, 255, 0.88);
+        white-space: nowrap;
     }
 
     .header-switch-btn {
-        margin-top: 6px;
-        height: 34px;
-        padding: 0 14px;
-        border: 0;
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.18);
+        margin-top: 15px;
+        height: 36px;
+        padding: 0 15px;
+        border: 1px solid rgba(255, 255, 255, 0.56);
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.12);
         color: #fff;
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        font-size: 14px;
-        font-weight: 600;
+        font-size: 13px;
         line-height: 1;
         cursor: pointer;
-        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 8px 18px rgba(0, 66, 160, 0.12);
+        box-shadow: 0 8px 18px rgba(0, 66, 160, 0.12);
         backdrop-filter: blur(8px);
     }
 
@@ -291,9 +401,9 @@ layout("/layouts/platform_h5.html"){
         z-index: 2;
         flex: 1;
         min-height: 0;
-        margin: -72px 0 0;
-        padding: 18px 16px 24px;
-        background: #fff;
+        margin: 0;
+        padding: 12px 12px 24px;
+        background: #f3f7fd;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }
@@ -305,14 +415,18 @@ layout("/layouts/platform_h5.html"){
     }
 
     .module-card {
-        min-height: 98px;
-        background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
-        border-radius: 14px;
-        box-shadow: 0 8px 18px rgba(27, 56, 105, 0.06);
+        --module-color: #1989fa;
+        --module-bg: #fff;
+        --module-icon-bg: #edf5ff;
+        --module-border: #e5edf8;
+        min-height: 104px;
+        background: var(--module-bg);
+        border-radius: 12px;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08);
         overflow: hidden;
         cursor: pointer;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(237, 242, 250, 0.88);
+        border: 1px solid var(--module-border);
         position: relative;
     }
 
@@ -325,25 +439,49 @@ layout("/layouts/platform_h5.html"){
         box-shadow: 0 4px 16px rgba(25, 137, 250, 0.08);
     }
 
+    .module-card__bg {
+        position: absolute;
+        top: 50%;
+        right: 38px;
+        z-index: 0;
+        width: 42%;
+        height: 88%;
+        display: block;
+        object-fit: contain;
+        object-position: right center;
+        opacity: 1;
+        pointer-events: none;
+        transform: translateY(-50%);
+    }
+
     .module-header {
-        min-height: 60px;
-        padding: 14px;
+        min-height: 72px;
+        padding: 16px 15px;
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 14px;
+        position: relative;
+        z-index: 2;
     }
 
     .icon-wrapper {
-        width: 54px;
-        height: 54px;
-        border-radius: 16px;
+        width: 58px;
+        height: 58px;
+        border-radius: 14px;
         display: flex;
         align-items: center;
         justify-content: center;
-        background: #eef5ff;
         flex-shrink: 0;
-        box-shadow: 0 8px 18px rgba(25, 137, 250, 0.1);
-        color: #1989fa;
+        overflow: hidden;
+        background: #eef3fb;
+        box-shadow: 0 4px 12px rgba(42, 74, 117, 0.1);
+    }
+
+    .icon-wrapper img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
     }
 
     .module-info {
@@ -352,9 +490,9 @@ layout("/layouts/platform_h5.html"){
     }
 
     .module-title {
-        font-size: 16px;
-        font-weight: 700;
-        color: #111a3a;
+        font-size: 17px;
+        font-weight: 600;
+        color: #23344a;
         margin: 0 0 6px;
         line-height: 1.4;
         overflow: hidden;
@@ -363,7 +501,7 @@ layout("/layouts/platform_h5.html"){
     }
 
     .module-desc {
-        font-size: 12px;
+        font-size: 13px;
         color: #7d89a6;
         margin: 0;
         line-height: 1.5;
@@ -373,62 +511,38 @@ layout("/layouts/platform_h5.html"){
     }
 
     .arrow-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 50%;
-        display: flex;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        display: inline-flex;
         align-items: center;
         justify-content: center;
-        font-size: 16px;
-        color: #1989fa;
-        background: rgba(25, 137, 250, 0.1);
         flex-shrink: 0;
-        transition: all 0.3s ease;
+        color: #aab6c5;
+        background: transparent;
+        font-size: 16px;
+        line-height: 16px;
     }
 
     .theme-green {
-        background: linear-gradient(135deg, #f3fff9 0%, #fff 100%);
-    }
-
-    .theme-green .icon-wrapper {
-        color: #17c979;
-        background: #eafbf2;
-        box-shadow: 0 8px 18px rgba(23, 201, 121, 0.12);
-    }
-
-    .theme-green .arrow-icon {
-        color: #17b977;
-        background: rgba(23, 201, 121, 0.12);
+        --module-color: #3d9182;
+        --module-bg: #fff;
+        --module-icon-bg: #edf6f3;
+        --module-border: #e4eee9;
     }
 
     .theme-purple {
-        background: linear-gradient(135deg, #fbf7ff 0%, #fff 100%);
-    }
-
-    .theme-purple .icon-wrapper {
-        color: #8756e9;
-        background: #f1eaff;
-        box-shadow: 0 8px 18px rgba(135, 86, 233, 0.12);
-    }
-
-    .theme-purple .arrow-icon {
-        color: #8756e9;
-        background: rgba(135, 86, 233, 0.12);
+        --module-color: #6c6fa3;
+        --module-bg: #fff;
+        --module-icon-bg: #f0f0f7;
+        --module-border: #e9e7f1;
     }
 
     .theme-orange {
-        background: linear-gradient(135deg, #fff8ed 0%, #fff 100%);
-    }
-
-    .theme-orange .icon-wrapper {
-        color: #ff9f1a;
-        background: #fff2df;
-        box-shadow: 0 8px 18px rgba(255, 159, 26, 0.12);
-    }
-
-    .theme-orange .arrow-icon {
-        color: #d9a05b;
-        background: rgba(255, 159, 26, 0.12);
+        --module-color: #a78345;
+        --module-bg: #fff;
+        --module-icon-bg: #f7f2e9;
+        --module-border: #eee9df;
     }
 
     .empty-box {
diff --git a/src/main/resources/views/platform/zhghh5/democratic/congress/materials/list.html b/src/main/resources/views/platform/zhghh5/democratic/congress/materials/list.html
index 5a05e913..a3857deb 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/congress/materials/list.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/congress/materials/list.html
@@ -6,48 +6,97 @@ layout("/layouts/platform_h5.html"){
     <van-nav-bar :title="pageTitle" left-text="返回" left-arrow @click-left="backToCongress" placeholder fixed></van-nav-bar>
 
     <div class="file-list-page">
-        <van-sticky :offset-top="46">
-        <div class="file-filter-bar">
-            <van-search v-model="keyword" placeholder="搜索文件名" shape="round" class="file-search" @input="onKeywordChange"></van-search>
-            <van-dropdown-menu class="file-filter-menu">
-                <van-dropdown-item v-model="selectedFileType" :options="fileTypeOptions" @change="resetList"></van-dropdown-item>
-                <van-dropdown-item v-model="uploadTimeOrder" :options="uploadTimeSortOptions" @change="resetList"></van-dropdown-item>
-            </van-dropdown-menu>
+        <div class="file-summary">
+            <div class="file-summary__icon">
+                <img :src="summaryIcon" :alt="pageTitle">
+            </div>
+            <div class="file-summary__body">
+                <div class="file-summary__title">{{ pageTitle }}</div>
+                <div class="file-summary__subtitle">{{ summarySubtitle }}</div>
+            </div>
         </div>
+
+        <van-sticky :offset-top="46">
+            <div class="file-sticky">
+                <van-search v-model="keyword" placeholder="搜索文件名" shape="round" class="file-search" @search="resetList"></van-search>
+                <div class="file-filter" :class="{'is-open': filterOpened}">
+                    <van-dropdown-menu class="file-filter-menu" active-color="#1989fa">
+                        <van-dropdown-item v-model="selectedFileType" :options="fileTypeOptions" @change="resetList" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                        <van-dropdown-item v-model="uploadTimeOrder" :options="uploadTimeSortOptions" @change="resetList" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+                <div class="file-list-head">
+                    <button type="button" class="file-view-toggle" @click="toggleViewMode">
+                        <i :class="viewMode === 'card' ? 'fa fa-list' : (viewMode === 'list' ? 'fa fa-th-large' : 'fa fa-square-o')"></i>
+                        <span>{{ viewMode === 'card' ? '列表' : (viewMode === 'list' ? '宫格' : '卡片') }}</span>
+                    </button>
+                    <span v-if="loadedOnce" class="file-list-head__count">共 {{ pageForm.totalCount }} 项</span>
+                </div>
+            </div>
         </van-sticky>
-        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-            <van-list v-model="loading" :finished="finished" :finished-text="fileList.length > 0 ? '没有更多了' : ''" @load="onLoad">
-                <div v-for="item in fileList" :key="item.id" class="file-card" @click="handleFileClick(item)">
-                    <div class="card-left">
-                        <div class="icon-wrapper">
-                            <img :src="getFileIconUrl(item)" :alt="resolveFileSuffix(item) || 'file'" class="file-type-icon">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="{'file-list-mode': viewMode === 'list', 'file-card-mode': viewMode === 'card', 'file-grid-mode': viewMode === 'grid'}">
+            <van-list ref="fileList" v-model="loading" :finished="finished" finished-text="" :class="{'is-skeleton-loading': loading && !loadedOnce}" @load="onLoad">
+                <div v-if="loading && !loadedOnce" class="file-list-skeleton">
+                    <div v-for="index in viewMode === 'grid' ? 16 : (viewMode === 'list' ? 10 : 4)" :key="'file-skeleton-' + index" class="file-list-skeleton__card">
+                        <div class="file-list-skeleton__side">
+                            <span class="file-list-skeleton__icon"></span>
+                            <span class="file-list-skeleton__type"></span>
                         </div>
-                    </div>
-                    <div class="card-content">
-                        <div class="card-header">
-                            <span class="file-name">{{ formatFileName(item.name || item.fileName) }}</span>
-                            <div class="card-actions">
-                                <span v-if="item.hasVoted !== null && item.hasVoted !== undefined" class="vote-status" :class="isVoted(item.hasVoted) ? 'voted' : 'pending'">
-                                    <van-icon :name="isVoted(item.hasVoted) ? 'checked' : 'clock-o'" size="12"></van-icon>
-                                    {{ isVoted(item.hasVoted) ? '已投票' : '待投票' }}
-                                </span>
-                                <van-icon name="arrow" class="arrow-icon"></van-icon>
+                        <span class="file-list-skeleton__separator"></span>
+                        <div class="file-list-skeleton__main">
+                            <div class="file-list-skeleton__title-row">
+                                <span class="file-list-skeleton__title"></span>
+                                <span class="file-list-skeleton__status"></span>
+                                <span class="file-list-skeleton__arrow"></span>
                             </div>
-                        </div>
-                        <div class="file-info">
-                            <div class="info-row">
-                                <van-icon name="description" size="14"></van-icon>
-                                <span class="info-text">文件类型：<span class="info-value">{{ fileTypeText(item) }}</span></span>
-                            </div>
-                            <div v-if="item.uploadTime" class="info-row">
-                                <van-icon name="clock-o" size="14"></van-icon>
-                                <span class="info-text">上传时间：<span class="info-value">{{ formatTime(item.uploadTime) }}</span></span>
+                            <div class="file-list-skeleton__details">
+                                <span></span>
+                                <span></span>
                             </div>
                         </div>
                     </div>
                 </div>
-                <van-empty v-if="!loading && fileList.length === 0" :description="hasFilter ? '未找到匹配文件' : '暂无文件'"></van-empty>
+                <div v-else class="file-list-content">
+                    <div v-for="item in fileList" :key="item.id" class="file-card"
+                        :class="{'has-vote-status': !!getVoteStatus(item)}"
+                         @click="handleFileClick(item)">
+                        <div class="file-card__header">
+                            <div class="file-card__side">
+                                <div class="file-card__icon">
+                                    <img :src="getFileIconUrl(item)" :alt="resolveFileSuffix(item) || 'file'" class="file-type-icon">
+                                </div>
+                                <span class="file-card__type">{{ resolveFileSuffix(item) ? fileTypeText(item) : '--' }}</span>
+                            </div>
+                            <span class="file-card__separator"></span>
+                            <div class="file-card__main">
+                                <div class="file-card__title-row">
+                                    <span class="file-name">{{ formatFileName(item.name || item.fileName) }}</span>
+                                    <span v-if="getVoteStatus(item)" class="vote-status" :class="getVoteStatus(item)">
+                                        <span class="vote-status__text">{{ getVoteStatusText(item) }}</span>
+                                    </span>
+                                    <van-icon name="arrow" class="file-card__arrow"></van-icon>
+                                </div>
+                                <div class="file-card__details">
+                                    <div class="file-card__detail-row">
+                                        <span class="file-card__detail-label">上传时间</span>
+                                        <span class="file-card__detail-value">{{ item.uploadTime ? formatTime(item.uploadTime) : '--' }}</span>
+                                    </div>
+                                    <div class="file-card__detail-row">
+                                        <span class="file-card__detail-label">文件大小</span>
+                                        <span class="file-card__detail-value">{{ item.fileSize !== null && item.fileSize !== undefined && item.fileSize !== '' ? formatFileSize(item.fileSize) : '--' }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="!loading && loadedOnce && fileList.length === 0" class="file-empty">
+                        <img :src="emptyImage" :alt="pageTitle + '空状态插画'">
+                        <div class="file-empty__title">{{ hasFilter ? '未找到匹配内容' : emptyTitle }}</div>
+                        <div class="file-empty__hint">{{ hasFilter ? '可以调整搜索或筛选条件后重试' : emptyHint }}</div>
+                    </div>
+                </div>
             </van-list>
+            <div v-if="finished && fileList.length > 0" class="file-finished">没有更多了</div>
         </van-pull-refresh>
     </div>
 </div>
@@ -70,7 +119,8 @@ layout("/layouts/platform_h5.html"){
                 keyword: "",
                 selectedFileType: "",
                 uploadTimeOrder: "desc",
-                searchTimer: null,
+                filterOpened: false,
+                viewMode: "card",
                 queryVersion: 0,
                 pageForm: {
                     pageNumber: 1,
@@ -99,6 +149,62 @@ layout("/layouts/platform_h5.html"){
             },
             hasFilter() {
                 return !!(this.keyword || this.selectedFileType)
+            },
+            moduleKind() {
+                if (this.pageTitle.indexOf("表决公告") > -1) return "voteNotice"
+                if (this.pageTitle.indexOf("议题") > -1) return "topicVote"
+                if (this.pageTitle.indexOf("评议") > -1) return "evaluationVote"
+                return "fileNotice"
+            },
+            summaryIcon() {
+                const imageRoot = "${base!}/images/congress/home/"
+                return {
+                    fileNotice: imageRoot + "file-notice-v4.png",
+                    voteNotice: imageRoot + "vote-notice-v4.png",
+                    topicVote: imageRoot + "topic-vote-v4.png",
+                    evaluationVote: imageRoot + "evaluation-vote-v4.png"
+                }[this.moduleKind]
+            },
+            summarySubtitle() {
+                return {
+                    fileNotice: "查看会议文件与相关公告",
+                    voteNotice: "查看已发布的表决结果公告",
+                    topicVote: "查看议题材料并参与表决",
+                    evaluationVote: "查看评议材料并参与表决"
+                }[this.moduleKind]
+            },
+            listSectionTitle() {
+                return {
+                    fileNotice: "公告文件",
+                    voteNotice: "表决结果",
+                    topicVote: "议题文件",
+                    evaluationVote: "评议文件"
+                }[this.moduleKind]
+            },
+            emptyImage() {
+                const imageName = {
+                    fileNotice: "file-notice-empty.png",
+                    voteNotice: "vote-notice-empty.png",
+                    topicVote: "topic-vote-empty.png",
+                    evaluationVote: "evaluation-vote-empty.png"
+                }[this.moduleKind]
+                return "${base!}/images/congress/empty/" + imageName
+            },
+            emptyTitle() {
+                return {
+                    fileNotice: "暂无文件公告",
+                    voteNotice: "暂无表决公告",
+                    topicVote: "暂无议题表决",
+                    evaluationVote: "暂无评议表决"
+                }[this.moduleKind]
+            },
+            emptyHint() {
+                return {
+                    fileNotice: "当前届次暂时没有可查看的会议文件",
+                    voteNotice: "当前届次暂时没有已发布的表决结果",
+                    topicVote: "当前届次暂时没有需要参与的议题表决",
+                    evaluationVote: "当前届次暂时没有需要参与的评议表决"
+                }[this.moduleKind]
             }
         },
         methods: {
@@ -109,6 +215,16 @@ layout("/layouts/platform_h5.html"){
                 this.timeId = params.get("timeId") || ""
                 this.sessionId = params.get("sessionId") || this.timeId
             },
+            viewModeStorageKey() {
+                // 按资料模块和届次隔离排列状态，避免不同页面之间相互覆盖。
+                return ["congressMaterialsViewMode", this.moduleKind, this.typeId, this.timeId || this.sessionId].join(":")
+            },
+            restoreViewMode() {
+                const cachedViewMode = window.sessionStorage.getItem(this.viewModeStorageKey())
+                if (["card", "list", "grid"].indexOf(cachedViewMode) > -1) {
+                    this.viewMode = cachedViewMode
+                }
+            },
             backToCongress() {
                 const timeId = this.timeId || this.sessionId || window.localStorage.getItem("congressTimeId") || ""
                 this.$pjaxReplace("/platform/h5/congress" + (timeId ? "?timeId=" + encodeURIComponent(timeId) : ""))
@@ -125,9 +241,18 @@ layout("/layouts/platform_h5.html"){
                     this.fetchFileList()
                 }
             },
-            onKeywordChange() {
-                clearTimeout(this.searchTimer)
-                this.searchTimer = setTimeout(() => this.resetList(), 300)
+            toggleViewMode() {
+                const viewModes = ["card", "list", "grid"]
+                const currentIndex = viewModes.indexOf(this.viewMode)
+                this.viewMode = viewModes[(currentIndex + 1) % viewModes.length]
+                window.sessionStorage.setItem(this.viewModeStorageKey(), this.viewMode)
+                this.$nextTick(() => {
+                    // 宫格会显著缩短列表高度，需要在布局完成后重新检查是否应加载下一页。
+                    const fileList = this.$refs.fileList
+                    if (fileList && typeof fileList.check === "function") {
+                        fileList.check()
+                    }
+                })
             },
             resetList() {
                 this.queryVersion++
@@ -159,7 +284,7 @@ layout("/layouts/platform_h5.html"){
                         const records = pageData.list || []
                         this.fileList = this.fileList.concat(records)
                         this.pageForm.totalCount = pageData.totalCount || 0
-                        if (this.fileList.length >= this.pageForm.totalCount) {
+                        if (records.length === 0 || this.fileList.length >= this.pageForm.totalCount) {
                             this.finished = true
                         } else {
                             this.pageForm.pageNumber++
@@ -213,6 +338,15 @@ layout("/layouts/platform_h5.html"){
                 const suffix = this.resolveFileSuffix(item)
                 return suffix ? suffix.toUpperCase() : "未知类型"
             },
+            formatFileSize(fileSize) {
+                if (fileSize === null || fileSize === undefined || fileSize === "") return "--"
+                const size = Number(fileSize)
+                if (!Number.isFinite(size)) return String(fileSize)
+                if (size < 1024) return size + " B"
+                if (size < 1024 * 1024) return (size / 1024).toFixed(size < 10240 ? 1 : 0) + " KB"
+                if (size < 1024 * 1024 * 1024) return (size / 1024 / 1024).toFixed(size < 10 * 1024 * 1024 ? 1 : 0) + " MB"
+                return (size / 1024 / 1024 / 1024).toFixed(1) + " GB"
+            },
             formatTime(time) {
                 if (!time) return ""
                 const date = new Date(time)
@@ -223,6 +357,23 @@ layout("/layouts/platform_h5.html"){
             formatFileName(fileName) {
                 return fileName ? String(fileName).trim().replace(/\s/g, "") : ""
             },
+            getVoteStatus(item) {
+                const status = String(item.voteStatus || "").toLowerCase()
+                if (["voted", "upcoming", "ended", "pending"].indexOf(status) > -1) return status
+                if (item.hasVoted === null || item.hasVoted === undefined) return ""
+                return this.isVoted(item.hasVoted) ? "voted" : "pending"
+            },
+            getVoteStatusText(item) {
+                return {
+                    voted: "已投票",
+                    upcoming: "未开始",
+                    ended: "已结束",
+                    pending: "待投票"
+                }[this.getVoteStatus(item)] || ""
+            },
+            getVoteStatusIcon(item) {
+                return this.getVoteStatus(item) === "voted" ? "checked" : "clock-o"
+            },
             handleFileClick(item) {
                 if (item.hasVoted !== null && item.hasVoted !== undefined) {
                     this.openVotePdf(item)
@@ -260,6 +411,7 @@ layout("/layouts/platform_h5.html"){
         },
         created() {
             this.initQuery()
+            this.restoreViewMode()
         }
     })
 </script>
@@ -425,6 +577,935 @@ layout("/layouts/platform_h5.html"){
         color: #646566;
         font-weight: 500;
     }
+
+    body {
+        background: #f3f7fd;
+    }
+
+    #app > .van-nav-bar .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    #app > .van-nav-bar .van-nav-bar__text,
+    #app > .van-nav-bar .van-icon {
+        color: #397fbd;
+    }
+
+    .file-list-page {
+        padding: 1px 0 calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background: #f3f7fd;
+    }
+
+    .file-summary {
+        min-height: 82px;
+        margin: 12px 12px 0;
+        padding: 16px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 7px 20px rgba(45, 126, 234, 0.18);
+    }
+
+    .file-summary__icon {
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        border-radius: 11px;
+        color: #2d7eea;
+        font-size: 25px;
+        background: rgba(255, 255, 255, 0.92);
+    }
+
+    .file-summary__icon img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: inherit;
+        object-fit: cover;
+    }
+
+    .file-summary__body {
+        min-width: 0;
+    }
+
+    .file-summary__title {
+        overflow: hidden;
+        color: #fff;
+        font-size: 17px;
+        font-weight: 600;
+        line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-summary__subtitle {
+        margin-top: 4px;
+        overflow: hidden;
+        color: rgba(255, 255, 255, 0.84);
+        font-size: 12px;
+        line-height: 18px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-sticky {
+        padding: 10px 0 8px;
+        background: #f3f7fd;
+    }
+
+    .file-search {
+        margin: 0 12px;
+        padding: 0;
+    }
+
+    .file-search .van-search__content {
+        height: 42px;
+        padding-left: 13px;
+        align-items: center;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 4px 14px rgba(55, 85, 126, 0.07);
+    }
+
+    .file-filter {
+        padding: 10px 12px 0;
+    }
+
+    .file-filter-menu {
+        height: auto;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 4px 14px rgba(55, 85, 126, 0.06);
+        transition: border-radius 0.2s ease;
+    }
+
+    .file-filter.is-open .file-filter-menu {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .file-filter-menu .van-dropdown-menu__bar {
+        height: 44px;
+        border-top: 0;
+        background: #fff;
+    }
+
+    .file-filter-menu .van-dropdown-menu__title {
+        color: #52637a;
+        font-size: 13px;
+    }
+
+    .file-filter-menu .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px 12px;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 22px rgba(55, 85, 126, 0.12);
+    }
+
+    .file-list-head {
+        padding: 14px 12px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .file-list-head__title {
+        color: #23344a;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .file-list-head__count {
+        color: #94a2b5;
+        font-size: 12px;
+    }
+
+    .file-list-page .van-list {
+        padding-top: 12px;
+    }
+
+    .file-list-skeleton {
+        padding: 0 12px;
+        display: grid;
+        gap: 12px;
+        box-sizing: border-box;
+    }
+
+    .file-list-skeleton__card {
+        min-height: 164px;
+        padding: 16px 12px;
+        display: flex;
+        align-items: stretch;
+        box-sizing: border-box;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.06);
+    }
+
+    .file-list-skeleton__side {
+        width: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        flex-shrink: 0;
+        gap: 10px;
+    }
+
+    .file-list-skeleton__icon,
+    .file-list-skeleton__type,
+    .file-list-skeleton__title,
+    .file-list-skeleton__status,
+    .file-list-skeleton__details span {
+        display: block;
+        background: linear-gradient(90deg, #f1f3f5 25%, #e7eaee 37%, #f1f3f5 63%);
+        background-size: 400% 100%;
+        animation: file-skeleton-loading 1.4s ease infinite;
+    }
+
+    .file-list-skeleton__icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 10px;
+    }
+
+    .file-list-skeleton__type {
+        width: 34px;
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    .file-list-skeleton__separator {
+        width: 1px;
+        margin: 0 12px 0 4px;
+        flex-shrink: 0;
+        background: #e6ebf2;
+    }
+
+    .file-list-skeleton__main {
+        min-width: 0;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .file-list-skeleton__title-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .file-list-skeleton__title {
+        width: 56%;
+        height: 16px;
+        border-radius: 4px;
+    }
+
+    .file-list-skeleton__status {
+        width: 38px;
+        height: 18px;
+        border-radius: 3px;
+    }
+
+    .file-list-skeleton__arrow {
+        width: 7px;
+        height: 7px;
+        margin-left: auto;
+        display: block;
+        flex-shrink: 0;
+        border-top: 2px solid #e5e9ee;
+        border-right: 2px solid #e5e9ee;
+        transform: rotate(45deg);
+    }
+
+    .file-list-skeleton__details {
+        margin-top: 24px;
+        display: grid;
+        gap: 12px;
+    }
+
+    .file-list-skeleton__details span {
+        width: 72%;
+        height: 12px;
+        border-radius: 4px;
+    }
+
+    .file-list-skeleton__details span:last-child {
+        width: 48%;
+    }
+
+    .file-list-page .van-list.is-skeleton-loading .van-list__loading {
+        display: none;
+    }
+
+    @keyframes file-skeleton-loading {
+        0% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0 50%;
+        }
+    }
+
+    .file-card {
+        margin: 0 12px 12px;
+        padding: 16px;
+        gap: 14px;
+        border-radius: 12px;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08);
+        transition: transform 0.15s ease;
+        border: 1px solid rgba(71, 111, 164, 0.05);
+    }
+
+    .file-card::before {
+        display: none;
+    }
+
+    .file-card:active {
+        transform: scale(0.99);
+        box-shadow: 0 5px 15px rgba(55, 85, 126, 0.08);
+    }
+
+    .icon-wrapper {
+        width: 50px;
+        height: 50px;
+        border-radius: 11px;
+        background: #f6f9fd;
+        border-color: #edf2f8;
+    }
+
+    .file-type-icon {
+        width: 36px;
+        height: 36px;
+    }
+
+    .card-header {
+        margin-bottom: 9px;
+    }
+
+    .file-name {
+        color: #23344a;
+        font-size: 16px;
+        line-height: 22px;
+    }
+
+    .vote-status {
+        padding: 4px 8px;
+        border-radius: 11px;
+        font-weight: 500;
+    }
+
+    .arrow-icon {
+        color: #aab6c5;
+    }
+
+    .info-row {
+        color: #8795a8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .info-row .van-icon {
+        color: #9aa7b8;
+    }
+
+    .info-value {
+        color: #64758b;
+        font-weight: 400;
+    }
+
+    .file-empty {
+        min-height: 300px;
+        padding: 28px 18px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .file-empty img {
+        width: 82%;
+        max-width: 300px;
+        height: auto;
+        display: block;
+        object-fit: contain;
+    }
+
+    .file-empty__title {
+        margin-top: 8px;
+        color: #50627a;
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 22px;
+    }
+
+    .file-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .file-list-page .van-list__finished-text,
+    .file-list-page .van-list__loading {
+        color: #9aa7b8;
+    }
+
+    .file-view-toggle {
+        width: 70px;
+        height: 28px;
+        padding: 0;
+        border: 0;
+        border-radius: 14px;
+        color: #397de0;
+        background: #eaf3ff;
+        font-size: 12px;
+        line-height: 28px;
+        text-align: center;
+    }
+
+    .file-view-toggle i {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
+    .file-card-mode .file-card {
+        display: block;
+        padding: 16px 12px;
+    }
+
+    .file-card__header {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        min-width: 0;
+    }
+
+    .file-card__side {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .file-card__icon {
+        width: 46px;
+        height: 46px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .file-card__icon .file-type-icon {
+        width: 34px;
+        height: 34px;
+    }
+
+    .file-card-mode .file-card__icon {
+        width: 56px;
+        height: 56px;
+    }
+
+    .file-card-mode .file-card__icon .file-type-icon {
+        width: 50px;
+        height: 50px;
+    }
+
+    .file-card__type,
+    .file-card__separator {
+        display: none;
+    }
+
+    .file-card-mode .file-card__header {
+        min-height: 132px;
+        align-items: stretch;
+        gap: 0;
+    }
+
+    .file-card-mode .file-card__side {
+        width: 64px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+    }
+
+    .file-card-mode .file-card__type {
+        display: block;
+        max-width: 72px;
+        overflow: hidden;
+        color: #45556b;
+        font-size: 13px;
+        line-height: 18px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-card-mode .file-card__separator {
+        width: 1px;
+        margin: 0 12px 0 4px;
+        display: block;
+        flex-shrink: 0;
+        background: #e6ebf2;
+    }
+
+    .file-card__main {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .file-card-mode .file-card__main {
+        padding-right: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .file-card__title-row {
+        min-width: 0;
+        padding-right: 24px;
+        display: flex;
+        align-items: center;
+    }
+
+    .file-card-mode .file-card__title-row {
+        padding-right: 0;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .file-card__header .file-name {
+        min-width: 0;
+        margin-right: 0;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+
+    .file-card__details {
+        margin-top: 24px;
+        display: grid;
+        gap: 9px;
+    }
+
+    .file-card__detail-row {
+        min-width: 0;
+        display: grid;
+        grid-template-columns: 72px minmax(0, 1fr);
+        align-items: center;
+        gap: 8px;
+    }
+
+    .file-card__detail-label,
+    .file-card__detail-value {
+        overflow: hidden;
+        font-size: 13px;
+        line-height: 18px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-card__detail-label {
+        color: #8c99aa;
+    }
+
+    .file-card__detail-value {
+        color: #45556b;
+    }
+
+    .file-card__arrow {
+        position: static;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        margin-left: auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: #aab6c5;
+        font-size: 16px;
+        line-height: 16px;
+    }
+
+    .file-card-mode .vote-status {
+        position: static;
+        width: auto;
+        height: 22px;
+        padding: 3px 7px;
+        box-sizing: border-box;
+        border-radius: 3px;
+        color: #397de0;
+        background: #eaf3ff;
+        box-shadow: none;
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 16px;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
+    .file-card-mode .vote-status__text {
+        line-height: 16px;
+    }
+
+    .file-card-mode .vote-status.voted {
+        color: #17a65b;
+        background: #edf9f1;
+    }
+
+    .file-card-mode .vote-status.pending,
+    .file-card-mode .vote-status.upcoming {
+        color: #d98a00;
+        background: #fff6e5;
+    }
+
+    .file-card-mode .vote-status.ended {
+        color: #8e9aa8;
+        background: #f0f2f5;
+    }
+
+    .file-list-mode .van-list {
+        margin: 12px;
+        padding-top: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08);
+    }
+
+    .file-list-mode .file-list-skeleton {
+        padding: 0;
+        gap: 0;
+    }
+
+    .file-list-mode .file-list-skeleton__card {
+        min-height: 68px;
+        padding: 12px 14px;
+        align-items: center;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .file-list-mode .file-list-skeleton__card + .file-list-skeleton__card {
+        border-top: 1px solid #edf1f6;
+    }
+
+    .file-list-mode .file-list-skeleton__side {
+        width: 46px;
+        margin-right: 11px;
+    }
+
+    .file-list-mode .file-list-skeleton__icon {
+        width: 34px;
+        height: 34px;
+        border-radius: 7px;
+    }
+
+    .file-list-mode .file-list-skeleton__type,
+    .file-list-mode .file-list-skeleton__separator,
+    .file-list-mode .file-list-skeleton__details {
+        display: none;
+    }
+
+    .file-list-mode .file-list-skeleton__title {
+        width: 54%;
+        height: 14px;
+    }
+
+    .file-list-mode .file-list-skeleton__status {
+        width: 34px;
+        height: 16px;
+    }
+
+    .file-list-mode .file-card {
+        min-height: 68px;
+        margin: 0;
+        padding: 12px 14px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        box-sizing: border-box;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .file-list-mode .file-card + .file-card {
+        border-top: 1px solid #edf1f6;
+    }
+
+    .file-list-mode .file-card__header {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .file-list-mode .file-card__details,
+    .file-list-mode .file-card__type,
+    .file-list-mode .file-card__separator {
+        display: none;
+    }
+
+    .file-list-mode .file-card__title-row {
+        padding-right: 0;
+        gap: 6px;
+    }
+
+    .file-list-mode .file-card__header .file-name {
+        min-width: 0;
+        flex: 1;
+        display: block;
+        overflow: hidden;
+        color: #23344a;
+        font-size: 15px;
+        line-height: 22px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-list-mode .vote-status {
+        height: 18px;
+        padding: 1px 6px;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        border-radius: 3px;
+        color: #397de0;
+        background: #eef5ff;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 16px;
+    }
+
+    .file-list-mode .vote-status.voted {
+        color: #17a65b;
+        background: #edf9f1;
+    }
+
+    .file-list-mode .vote-status.pending,
+    .file-list-mode .vote-status.upcoming {
+        color: #d98a00;
+        background: #fff6e5;
+    }
+
+    .file-list-mode .vote-status.ended {
+        color: #8e9aa8;
+        background: #f0f2f5;
+    }
+
+    .file-grid-mode .van-list {
+        padding: 12px;
+    }
+
+    .file-grid-mode .file-list-skeleton {
+        padding: 0;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 8px;
+    }
+
+    .file-grid-mode .file-list-skeleton__card {
+        min-width: 0;
+        min-height: 150px;
+        padding: 10px 5px;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .file-grid-mode .file-list-skeleton__side {
+        width: 100%;
+        gap: 5px;
+    }
+
+    .file-grid-mode .file-list-skeleton__icon {
+        width: 38px;
+        height: 38px;
+        border-radius: 8px;
+    }
+
+    .file-grid-mode .file-list-skeleton__type {
+        width: 28px;
+        height: 8px;
+    }
+
+    .file-grid-mode .file-list-skeleton__separator,
+    .file-grid-mode .file-list-skeleton__details,
+    .file-grid-mode .file-list-skeleton__arrow {
+        display: none;
+    }
+
+    .file-grid-mode .file-list-skeleton__main {
+        width: 100%;
+    }
+
+    .file-grid-mode .file-list-skeleton__title-row {
+        height: 64px;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 6px;
+    }
+
+    .file-grid-mode .file-list-skeleton__title {
+        width: 76%;
+        height: 24px;
+        margin-top: 5px;
+    }
+
+    .file-grid-mode .file-list-skeleton__status {
+        width: 42px;
+        height: 18px;
+        border-radius: 9px;
+    }
+
+    .file-grid-mode .file-list-content {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 8px;
+    }
+
+    .file-grid-mode .file-card {
+        min-width: 0;
+        min-height: 150px;
+        margin: 0;
+        padding: 10px 5px;
+        display: block;
+        box-sizing: border-box;
+    }
+
+    .file-grid-mode .file-card__header {
+        min-height: 128px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+    }
+
+    .file-grid-mode .file-card__side {
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .file-grid-mode .file-card__icon {
+        width: 42px;
+        height: 42px;
+    }
+
+    .file-grid-mode .file-card__icon .file-type-icon {
+        width: 38px;
+        height: 38px;
+    }
+
+    .file-grid-mode .file-card__type {
+        max-width: 100px;
+        display: block;
+        overflow: hidden;
+        color: #64758b;
+        font-size: 11px;
+        line-height: 16px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .file-grid-mode .file-card__separator {
+        display: none;
+    }
+
+    .file-grid-mode .file-card__main {
+        width: 100%;
+        min-width: 0;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    .file-grid-mode .file-card__title-row {
+        padding: 0;
+        flex: 1;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 6px;
+    }
+
+    .file-grid-mode .file-card__header .file-name {
+        width: 100%;
+        display: -webkit-box;
+        overflow: hidden;
+        color: #23344a;
+        font-size: 12px;
+        line-height: 17px;
+        text-align: center;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+
+    .file-grid-mode .file-card__details {
+        display: none;
+    }
+
+    .file-grid-mode .vote-status {
+        min-width: 48px;
+        height: 20px;
+        padding: 2px 7px;
+        justify-content: center;
+        margin-top: auto;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        border-radius: 10px;
+        color: #397de0;
+        background: #eef5ff;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 16px;
+        white-space: nowrap;
+    }
+
+    .file-grid-mode .vote-status__text {
+        white-space: nowrap;
+    }
+
+    .file-grid-mode .vote-status.voted {
+        color: #17a65b;
+        background: #edf9f1;
+    }
+
+    .file-grid-mode .vote-status.pending,
+    .file-grid-mode .vote-status.upcoming {
+        color: #d98a00;
+        background: #fff6e5;
+    }
+
+    .file-grid-mode .vote-status.ended {
+        color: #8e9aa8;
+        background: #f0f2f5;
+    }
+
+    .file-grid-mode .file-card__arrow {
+        display: none;
+    }
+
+    .file-grid-mode .file-empty {
+        grid-column: 1 / -1;
+    }
+
+    .file-finished {
+        padding: 4px 0 18px;
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 20px;
+        text-align: center;
+    }
 </style>
 
 <!--#
diff --git a/src/main/resources/views/platform/zhghh5/democratic/congress/meeting/list.html b/src/main/resources/views/platform/zhghh5/democratic/congress/meeting/list.html
index fd5057ad..07e852b6 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/congress/meeting/list.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/congress/meeting/list.html
@@ -6,67 +6,124 @@ layout("/layouts/platform_h5.html"){
     <van-nav-bar title="会议签到" left-text="返回" left-arrow @click-left="backToCongress" placeholder fixed></van-nav-bar>
 
     <div class="meeting-list-page">
-        <van-sticky :offset-top="46">
-        <div class="meeting-filter-bar">
-            <van-search v-model="keyword" placeholder="搜索会议名称" shape="round" class="meeting-search" @input="onKeywordChange"></van-search>
-            <van-dropdown-menu class="meeting-filter-menu">
-                <van-dropdown-item v-model="signTimeStatus" :options="signTimeOptions" @change="resetList"></van-dropdown-item>
-                <van-dropdown-item v-model="signInCountStatus" :options="signInCountOptions" @change="resetList"></van-dropdown-item>
-                <van-dropdown-item v-model="signStatus" :options="signStatusOptions" @change="resetList"></van-dropdown-item>
-            </van-dropdown-menu>
+        <div class="meeting-summary">
+            <div class="meeting-summary__icon">
+                <img src="${base!}/images/congress/home/meeting-sign-v4.png" alt="会议签到">
+            </div>
+            <div class="meeting-summary__body">
+                <div class="meeting-summary__title">会议签到</div>
+                <div class="meeting-summary__subtitle">查看会议安排，在规定时间内完成签到</div>
+            </div>
         </div>
+
+        <van-sticky :offset-top="46">
+            <div class="meeting-sticky">
+                <van-search v-model="keyword" placeholder="搜索会议名称" shape="round" class="meeting-search" @search="resetList"></van-search>
+                <div class="meeting-filter" :class="{'is-open': filterOpened}">
+                    <van-dropdown-menu class="meeting-filter-menu" active-color="#1989fa">
+                        <van-dropdown-item v-model="signTimeStatus" :options="signTimeOptions" @change="resetList" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                        <van-dropdown-item v-model="signInCountStatus" :options="signInCountOptions" @change="resetList" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                        <van-dropdown-item v-model="signStatus" :options="signStatusOptions" @change="resetList" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+                <div class="meeting-list-head">
+                    <button type="button" class="meeting-view-toggle" @click="toggleViewMode">
+                        <i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
+                        <span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
+                    </button>
+                    <span v-if="loadedOnce" class="meeting-list-head__count">共 {{ pageForm.totalCount }} 场</span>
+                </div>
+            </div>
         </van-sticky>
-        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-            <van-list v-model="loading" :finished="finished" :finished-text="meetingList.length > 0 ? '没有更多了' : ''" @load="onLoad">
-                <div v-for="item in meetingList" :key="item.id" class="meeting-card" :class="{'meeting-card-disabled': !item.signInId && !canSignIn(item)}">
+        <van-pull-refresh v-model="refreshing" :class="{'meeting-list-mode': viewMode === 'list', 'meeting-card-mode': viewMode === 'card'}" @refresh="onRefresh">
+            <van-list v-model="loading" :finished="finished" finished-text="" :class="{'is-skeleton-loading': loading && !loadedOnce}" @load="onLoad">
+                <div v-if="loading && !loadedOnce" class="meeting-list-skeleton">
+                    <div v-for="index in viewMode === 'list' ? 10 : 3" :key="'meeting-skeleton-' + index" class="meeting-list-skeleton__card">
+                        <span class="meeting-list-skeleton__title"></span>
+                        <div class="meeting-list-skeleton__time">
+                            <div class="meeting-list-skeleton__time-point">
+                                <span class="meeting-list-skeleton__date"></span>
+                                <span class="meeting-list-skeleton__clock"></span>
+                                <span class="meeting-list-skeleton__caption"></span>
+                            </div>
+                            <span class="meeting-list-skeleton__axis"></span>
+                            <div class="meeting-list-skeleton__time-point meeting-list-skeleton__time-point--end">
+                                <span class="meeting-list-skeleton__date"></span>
+                                <span class="meeting-list-skeleton__clock"></span>
+                                <span class="meeting-list-skeleton__caption"></span>
+                            </div>
+                        </div>
+                        <div class="meeting-list-skeleton__meta">
+                            <span></span>
+                            <span></span>
+                        </div>
+                        <div class="meeting-list-skeleton__action">
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="meeting-list-content">
+                    <div v-for="item in meetingList" :key="item.id" class="meeting-card" :class="{'meeting-card-disabled': !item.signInId && !canSignIn(item), 'meeting-card-ended': !(item.signInId || item.userSignInTime) && isMeetingEnded(item)}">
                     <div class="card-content">
-                        <div class="card-header">
-                            <div class="card-left">
-                                <div class="icon-wrapper" :class="{'signed-icon': item.signInId}">
-                                    <van-icon name="completed" size="26"></van-icon>
+                        <div class="meeting-card__header">
+                            <span class="meeting-name">{{ item.meetingName }}</span>
+                        </div>
+
+                        <div class="meeting-card__time" v-if="item.signInStartTime || item.signInEndTime">
+                            <div class="meeting-card__time-range">
+                                <div class="meeting-card__time-point">
+                                    <div class="meeting-card__point-date">{{ formatPointDate(item.signInStartTime) }}</div>
+                                    <div class="meeting-card__clock">{{ formatClockTime(item.signInStartTime) }}</div>
+                                    <div class="meeting-card__time-caption">签到开始</div>
+                                </div>
+                                <div class="meeting-card__time-axis"></div>
+                                <div class="meeting-card__time-point meeting-card__time-point--end">
+                                    <div class="meeting-card__point-date">{{ formatPointDate(item.signInEndTime) }}</div>
+                                    <div class="meeting-card__clock">{{ formatClockTime(item.signInEndTime) }}</div>
+                                    <div class="meeting-card__time-caption">签到结束</div>
                                 </div>
                             </div>
-                            <span class="meeting-name">{{ item.meetingName }}</span>
+                        </div>
+
+                        <div class="meeting-card__meta">
+                            <div class="meeting-card__meta-item">
+                                <van-icon name="friends-o"></van-icon>
+                                <span>已签到 {{ item.signInCount || 0 }} 人</span>
+                            </div>
                             <button v-if="item.remark" type="button" class="remark-link" @click.stop="openRemark(item)">
-                                <van-icon name="notes-o" size="14"></van-icon>
-                                <span>备注</span>
-                                <van-icon name="arrow" size="12"></van-icon>
+                                <van-icon name="notes-o"></van-icon>
+                                <span>查看备注</span>
+                                <van-icon name="arrow"></van-icon>
                             </button>
                         </div>
 
-                        <div class="info-list">
-                            <div v-if="item.signInStartTime" class="info-row">
-                                <van-icon name="clock-o" size="14" color="#969799"></van-icon>
-                                <span class="info-text">签到开始：<span class="info-value">{{ formatTime(item.signInStartTime) }}</span></span>
-                            </div>
-                            <div v-if="item.signInEndTime" class="info-row">
-                                <van-icon name="clock-o" size="14" color="#969799"></van-icon>
-                                <span class="info-text">签到结束：<span class="info-value">{{ formatTime(item.signInEndTime) }}</span></span>
-                            </div>
-                            <div class="info-row count">
-                                <van-icon name="friends-o" size="14" color="#1989fa"></van-icon>
-                                <span class="info-text">签到人数：<span class="info-value">{{ item.signInCount || 0 }} 人</span></span>
-                            </div>
-                        </div>
-
-                        <div v-if="item.userSignInTime" class="action-section signin-status signed-status">
-                            <van-icon name="checked" size="16"></van-icon>
-                            <span>已签到：{{ formatTime(item.userSignInTime) }}</span>
+                        <div v-if="item.userSignInTime" class="action-section">
+                            <span class="signin-record-time">签到于 {{ formatShortTime(item.userSignInTime) }}</span>
+                            <van-button disabled class="signin-btn signin-btn--status signin-btn--signed">
+                                <van-icon name="checked" size="16"></van-icon>
+                                已签到
+                            </van-button>
                         </div>
                         <div v-else class="action-section">
-                            <div v-if="!canSignIn(item)" class="signin-status disabled-status">
+                            <van-button v-if="!canSignIn(item)" disabled class="signin-btn signin-btn--status signin-btn--disabled">
                                 <van-icon name="clock-o" size="16"></van-icon>
                                 {{ getSignInButtonText(item) }}
-                            </div>
+                            </van-button>
                             <van-button v-else type="primary" class="signin-btn" @click.stop="handleSignInClick(item)">
-                                <van-icon name="checked" size="16"></van-icon>
+                                <i class="fa fa-sign-in"></i>
                                 立即签到
                             </van-button>
                         </div>
                     </div>
+                    </div>
+                    <div v-if="!loading && loadedOnce && meetingList.length === 0" class="meeting-empty">
+                        <img src="${base!}/images/congress/empty/meeting-sign-empty.png" alt="会议签到空状态插画">
+                        <div class="meeting-empty__title">{{ hasFilter ? '未找到匹配会议' : '暂无会议安排' }}</div>
+                        <div class="meeting-empty__hint">{{ hasFilter ? '可以调整搜索或筛选条件后重试' : '当前届次暂时没有需要签到的会议' }}</div>
+                    </div>
                 </div>
-                <van-empty v-if="!loading && meetingList.length === 0" :description="hasFilter ? '未找到匹配会议' : '暂无会议'"></van-empty>
             </van-list>
+            <div v-if="finished && meetingList.length > 0" class="meeting-finished">没有更多了</div>
         </van-pull-refresh>
     </div>
 </div>
@@ -88,7 +145,8 @@ layout("/layouts/platform_h5.html"){
                 signTimeStatus: "",
                 signInCountStatus: "",
                 signStatus: "",
-                searchTimer: null,
+                filterOpened: false,
+                viewMode: "card",
                 queryVersion: 0,
                 pageForm: {
                     pageNumber: 1,
@@ -125,6 +183,9 @@ layout("/layouts/platform_h5.html"){
             }
         },
         methods: {
+            toggleViewMode() {
+                this.viewMode = this.viewMode === "card" ? "list" : "card"
+            },
             initQuery() {
                 const params = new URLSearchParams(window.location.search)
                 this.timeId = params.get("timeId") || ""
@@ -146,10 +207,6 @@ layout("/layouts/platform_h5.html"){
                     this.fetchMeetingList()
                 }
             },
-            onKeywordChange() {
-                clearTimeout(this.searchTimer)
-                this.searchTimer = setTimeout(() => this.resetList(), 300)
-            },
             resetList() {
                 this.queryVersion++
                 this.pageForm.pageNumber = 1
@@ -247,9 +304,30 @@ layout("/layouts/platform_h5.html"){
                 const end = new Date(item.signInEndTime).getTime()
                 if (Number.isNaN(start) || Number.isNaN(end)) return "立即签到"
                 if (now < start) return "未到签到时间"
-                if (now > end) return "已过签到时间"
+                if (now > end) return "已结束"
                 return "立即签到"
             },
+            isMeetingEnded(item) {
+                if (!item.signInEndTime) return false
+                const end = new Date(item.signInEndTime).getTime()
+                return !Number.isNaN(end) && Date.now() > end
+            },
+            formatPointDate(time) {
+                if (!time) return "日期待定"
+                const date = new Date(time)
+                if (Number.isNaN(date.getTime())) return "日期待定"
+                return date.getFullYear() + "年" + String(date.getMonth() + 1).padStart(2, "0") + "月" + String(date.getDate()).padStart(2, "0") + "日"
+            },
+            formatClockTime(time) {
+                if (!time) return "--:--"
+                const date = new Date(time)
+                if (Number.isNaN(date.getTime())) return "--:--"
+                return String(date.getHours()).padStart(2, "0") + ":" + String(date.getMinutes()).padStart(2, "0")
+            },
+            formatShortTime(time) {
+                const formatted = this.formatTime(time)
+                return formatted ? formatted.slice(5) : ""
+            },
             formatTimeRange(startTime, endTime) {
                 if (!startTime || !endTime) return ""
                 const start = this.formatTime(startTime)
@@ -459,6 +537,968 @@ layout("/layouts/platform_h5.html"){
         transform: translateY(4px);
     }
 
+    body {
+        background: #f3f7fd;
+    }
+
+    #app > .van-nav-bar .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    #app > .van-nav-bar .van-nav-bar__text,
+    #app > .van-nav-bar .van-icon {
+        color: #397fbd;
+    }
+
+    .meeting-list-page {
+        padding: 1px 0 calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background: #f3f7fd;
+    }
+
+    .meeting-summary {
+        min-height: 82px;
+        margin: 12px 12px 0;
+        padding: 16px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        border-radius: 12px;
+        color: #fff;
+        background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
+        box-shadow: 0 7px 20px rgba(45, 126, 234, 0.18);
+    }
+
+    .meeting-summary__icon {
+        width: 44px;
+        height: 44px;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        border-radius: 11px;
+        color: #2d7eea;
+        font-size: 25px;
+        background: rgba(255, 255, 255, 0.92);
+    }
+
+    .meeting-summary__icon img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: inherit;
+        object-fit: cover;
+    }
+
+    .meeting-summary__body {
+        min-width: 0;
+    }
+
+    .meeting-summary__title {
+        font-size: 17px;
+        font-weight: 600;
+        line-height: 24px;
+    }
+
+    .meeting-summary__subtitle {
+        margin-top: 4px;
+        color: rgba(255, 255, 255, 0.84);
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .meeting-sticky {
+        padding: 10px 0 8px;
+        background: #f3f7fd;
+    }
+
+    .meeting-search {
+        margin: 0 12px;
+        padding: 0;
+    }
+
+    .meeting-search .van-search__content {
+        height: 42px;
+        padding-left: 13px;
+        align-items: center;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 4px 14px rgba(55, 85, 126, 0.07);
+    }
+
+    .meeting-filter {
+        padding: 10px 12px 0;
+    }
+
+    .meeting-filter-menu {
+        height: auto;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 4px 14px rgba(55, 85, 126, 0.06);
+        transition: border-radius 0.2s ease;
+    }
+
+    .meeting-filter.is-open .meeting-filter-menu {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .meeting-filter-menu .van-dropdown-menu__bar {
+        height: 44px;
+        border-top: 0;
+        background: #fff;
+    }
+
+    .meeting-filter-menu .van-dropdown-menu__title {
+        color: #52637a;
+        font-size: 13px;
+    }
+
+    .meeting-filter-menu .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px 12px;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 22px rgba(55, 85, 126, 0.12);
+    }
+
+    .meeting-list-head {
+        padding: 14px 12px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .meeting-list-head__title {
+        color: #23344a;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .meeting-list-head__count {
+        color: #94a2b5;
+        font-size: 12px;
+    }
+
+    .meeting-list-page .van-list {
+        padding-top: 12px;
+    }
+
+    .meeting-list-skeleton {
+        padding: 0 12px;
+        display: grid;
+        gap: 12px;
+        box-sizing: border-box;
+    }
+
+    .meeting-list-skeleton__card {
+        min-height: 248px;
+        padding: 16px;
+        box-sizing: border-box;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.06);
+    }
+
+    .meeting-list-skeleton__title,
+    .meeting-list-skeleton__date,
+    .meeting-list-skeleton__clock,
+    .meeting-list-skeleton__caption,
+    .meeting-list-skeleton__meta span,
+    .meeting-list-skeleton__action span {
+        display: block;
+        background: linear-gradient(90deg, #f1f3f5 25%, #e7eaee 37%, #f1f3f5 63%);
+        background-size: 400% 100%;
+        animation: meeting-skeleton-loading 1.4s ease infinite;
+    }
+
+    .meeting-list-skeleton__title {
+        width: 42%;
+        height: 16px;
+        border-radius: 4px;
+    }
+
+    .meeting-list-skeleton__time {
+        min-height: 94px;
+        margin-top: 14px;
+        padding: 12px 14px 10px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        border: 1px solid #eaf2fc;
+        border-radius: 10px;
+        background: linear-gradient(180deg, #f5faff 0%, #fbfdff 100%);
+    }
+
+    .meeting-list-skeleton__time-point {
+        width: 82px;
+        display: grid;
+        flex: 0 0 82px;
+        gap: 5px;
+    }
+
+    .meeting-list-skeleton__time-point--end {
+        justify-items: end;
+    }
+
+    .meeting-list-skeleton__date {
+        width: 76px;
+        height: 10px;
+        border-radius: 3px;
+    }
+
+    .meeting-list-skeleton__clock {
+        width: 58px;
+        height: 25px;
+        border-radius: 5px;
+    }
+
+    .meeting-list-skeleton__caption {
+        width: 42px;
+        height: 8px;
+        border-radius: 3px;
+    }
+
+    .meeting-list-skeleton__axis {
+        height: 2px;
+        margin: 0 8px;
+        display: block;
+        flex: 1;
+        background: linear-gradient(90deg, #dce3ec 0%, #b4bfcd 100%);
+    }
+
+    .meeting-list-skeleton__meta {
+        margin-top: 12px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .meeting-list-skeleton__meta span {
+        width: 74px;
+        height: 11px;
+        border-radius: 4px;
+    }
+
+    .meeting-list-skeleton__meta span:last-child {
+        width: 62px;
+    }
+
+    .meeting-list-skeleton__action {
+        min-height: 47px;
+        margin-top: 13px;
+        padding-top: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        box-sizing: border-box;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .meeting-list-skeleton__action span {
+        width: 104px;
+        height: 34px;
+        border-radius: 17px;
+    }
+
+    .meeting-list-page .van-list.is-skeleton-loading .van-list__loading {
+        display: none;
+    }
+
+    @keyframes meeting-skeleton-loading {
+        0% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0 50%;
+        }
+    }
+
+    .meeting-card {
+        margin: 0 12px 12px;
+        min-height: 188px;
+        height: auto;
+        padding: 16px;
+        border-radius: 12px;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08);
+        transition: none;
+        border: 1px solid rgba(71, 111, 164, 0.05);
+    }
+
+    .meeting-card::before {
+        display: none;
+    }
+
+    .icon-wrapper {
+        border-radius: 11px;
+        box-shadow: none;
+    }
+
+    .card-header {
+        margin-bottom: 12px;
+    }
+
+    .meeting-name {
+        color: #23344a;
+        font-size: 16px;
+    }
+
+    .remark-link {
+        color: #8795a8;
+    }
+
+    .info-list {
+        gap: 8px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        background: #f7faff;
+    }
+
+    .info-text {
+        color: #64758b;
+    }
+
+    .action-section {
+        min-height: 34px;
+        margin-top: 12px;
+        padding-top: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .signin-status {
+        min-height: 28px;
+        padding: 0 10px;
+        border-radius: 14px;
+        box-sizing: border-box;
+    }
+
+    .signed-status {
+        color: #07a955;
+        background: #edf9f2;
+    }
+
+    .disabled-status {
+        color: #9aa7b8;
+        background: #f4f6f9;
+    }
+
+    .signin-btn {
+        width: auto;
+        height: 34px;
+        padding: 0 18px;
+        border-radius: 17px;
+        box-shadow: 0 4px 10px rgba(25, 137, 250, 0.2);
+        transform: none;
+    }
+
+    .meeting-empty {
+        min-height: 300px;
+        padding: 28px 18px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .meeting-empty img {
+        width: 82%;
+        max-width: 300px;
+        height: auto;
+        display: block;
+        object-fit: contain;
+    }
+
+    .meeting-empty__title {
+        margin-top: 8px;
+        color: #50627a;
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 22px;
+    }
+
+    .meeting-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .meeting-list-page .van-list__finished-text,
+    .meeting-list-page .van-list__loading {
+        color: #9aa7b8;
+    }
+
+    .meeting-card {
+        min-height: 0;
+    }
+
+    .meeting-card__header {
+        display: flex;
+        min-width: 0;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .meeting-card__header .meeting-name {
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+
+    .meeting-status {
+        min-height: 24px;
+        padding: 3px 9px;
+        flex: 0 0 auto;
+        border-radius: 12px;
+        font-size: 11px;
+        line-height: 18px;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .meeting-status.is-ongoing {
+        color: #397de0;
+        background: #edf5ff;
+    }
+
+    .meeting-status.is-upcoming {
+        color: #d98a00;
+        background: #fff6e5;
+    }
+
+    .meeting-status.is-ended {
+        color: #8c98aa;
+        background: #f2f4f7;
+    }
+
+    .meeting-status.is-signed {
+        color: #17a65b;
+        background: #edf9f1;
+    }
+
+    .meeting-card__time {
+        display: flex;
+        min-width: 0;
+        margin-top: 13px;
+        padding: 10px 12px;
+        align-items: center;
+        border-radius: 10px;
+        background: #f7faff;
+        box-sizing: border-box;
+    }
+
+    .meeting-card__time > .van-icon {
+        margin-right: 9px;
+        flex: 0 0 auto;
+        color: #4b8fe8;
+        font-size: 18px;
+    }
+
+    .meeting-card__time-copy {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .meeting-card__time-label {
+        color: #7b899b;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .meeting-card__time-value {
+        margin-top: 2px;
+        overflow: hidden;
+        color: #33445a;
+        font-size: 12px;
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-card__meta {
+        display: flex;
+        min-width: 0;
+        margin-top: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px 14px;
+    }
+
+    .meeting-card__meta-item {
+        display: inline-flex;
+        min-width: 0;
+        align-items: center;
+        color: #66758a;
+        font-size: 12px;
+        line-height: 18px;
+        white-space: nowrap;
+    }
+
+    .meeting-card__meta-item .van-icon {
+        margin-right: 5px;
+        color: #7f9fc9;
+        font-size: 14px;
+    }
+
+    .meeting-card__meta-item--signed,
+    .meeting-card__meta-item--signed .van-icon {
+        color: #17a65b;
+    }
+
+    .meeting-card__meta .remark-link {
+        margin-left: auto;
+        color: #397de0;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .meeting-card__meta .remark-link .van-icon:first-child {
+        margin-right: 3px;
+        font-size: 14px;
+    }
+
+    .meeting-card__meta .remark-link .van-icon:last-child {
+        margin-left: 1px;
+        font-size: 11px;
+    }
+
+    .meeting-card .action-section {
+        margin-top: 13px;
+        padding-top: 12px;
+    }
+
+    .meeting-card__time {
+        display: block;
+        margin-top: 14px;
+        padding: 12px 14px 10px;
+        border: 1px solid #eaf2fc;
+        border-radius: 10px;
+        background: linear-gradient(180deg, #f5faff 0%, #fbfdff 100%);
+    }
+
+    .meeting-card__date {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        color: #8391a4;
+        font-size: 12px;
+        line-height: 18px;
+        text-align: center;
+    }
+
+    .meeting-card__date::before,
+    .meeting-card__date::after {
+        content: "";
+        height: 1px;
+        flex: 1;
+        background: #e3eaf3;
+    }
+
+    .meeting-card__date span {
+        margin: 0 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-card__time-range {
+        display: flex;
+        margin-top: 8px;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .meeting-card__time-point {
+        width: 78px;
+        flex: 0 0 78px;
+        text-align: left;
+    }
+
+    .meeting-card__time-point--end {
+        text-align: right;
+    }
+
+    .meeting-card__clock {
+        color: #27384d;
+        font-size: 25px;
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        line-height: 34px;
+        letter-spacing: -0.5px;
+    }
+
+    .meeting-card__time-caption {
+        margin-top: 1px;
+        color: #9aa6b5;
+        font-size: 10px;
+        line-height: 15px;
+    }
+
+    .meeting-card__time-axis {
+        display: flex;
+        min-width: 38px;
+        margin: 0 9px;
+        align-items: center;
+        flex: 1;
+        color: #9ba8b8;
+    }
+
+    .meeting-card__time-axis span {
+        height: 1px;
+        flex: 1;
+        background: linear-gradient(90deg, #cdd7e4 0%, #9ba8b8 100%);
+    }
+
+    .meeting-card__time-axis .van-icon {
+        margin-left: -2px;
+        font-size: 12px;
+    }
+
+    .meeting-card__duration {
+        margin-top: 3px;
+        color: #9aa6b5;
+        font-size: 11px;
+        line-height: 16px;
+        text-align: center;
+    }
+
+    .signin-record-time {
+        margin-right: auto;
+        color: #17a65b;
+        font-size: 12px;
+        line-height: 18px;
+        white-space: nowrap;
+    }
+
+    .signin-btn .van-button__content,
+    .signin-btn .van-button__text {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        vertical-align: middle;
+    }
+
+    .signin-btn .van-icon {
+        margin-right: 5px;
+        font-size: 16px;
+    }
+
+    .signin-btn--status {
+        min-width: 104px;
+        opacity: 1 !important;
+        box-shadow: none;
+    }
+
+    .signin-btn--signed {
+        border-color: #d8f0e2;
+        color: #17a65b;
+        background: #edf9f1;
+    }
+
+    .signin-btn--disabled {
+        border-color: #e7ebf0;
+        color: #8c98aa;
+        background: #f2f4f7;
+    }
+
+    .meeting-card-ended {
+        border-color: #dfe4eb;
+        box-shadow: 0 3px 10px rgba(79, 91, 108, 0.04);
+    }
+
+    .meeting-card-ended .card-content {
+        opacity: 0.84;
+        filter: grayscale(0.25);
+    }
+
+    .meeting-card-ended::after {
+        content: "";
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+        border-radius: inherit;
+        background: rgba(229, 233, 238, 0.3);
+        pointer-events: none;
+    }
+
+    .meeting-card__duration-head {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        color: #7c8ca1;
+        font-size: 12px;
+        line-height: 18px;
+        text-align: center;
+    }
+
+    .meeting-card__duration-head::before,
+    .meeting-card__duration-head::after {
+        content: "";
+        height: 1px;
+        flex: 1;
+        background: #e3eaf3;
+    }
+
+    .meeting-card__duration-head span {
+        margin: 0 10px;
+        white-space: nowrap;
+    }
+
+    .meeting-card__time-range {
+        margin-top: 10px;
+    }
+
+    .meeting-card__time-point {
+        width: 104px;
+        flex-basis: 104px;
+    }
+
+    .meeting-card__point-date {
+        overflow: hidden;
+        color: #7f8da0;
+        font-size: 10px;
+        line-height: 16px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-card__clock {
+        margin-top: 1px;
+    }
+
+    .meeting-card__time-axis {
+        position: relative;
+        display: block;
+        height: 9px;
+        min-width: 32px;
+        margin: 0 7px;
+        overflow: visible;
+    }
+
+    .meeting-card__time-axis::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 9px;
+        background: linear-gradient(90deg, #d8e0ea 0%, #b6c2d0 52%, #8798ad 100%);
+        clip-path: polygon(0 46%, 84% 34%, 84% 5%, 100% 50%, 84% 95%, 84% 66%, 0 54%);
+        transform: translateY(-50%);
+    }
+
+    .signin-btn,
+    .signin-btn--status {
+        width: 108px;
+        min-width: 108px;
+        height: 32px;
+        min-height: 32px;
+        padding: 0 12px;
+        border-radius: 16px;
+        font-size: 13px;
+        line-height: 1;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    .signin-btn .van-icon,
+    .signin-btn .fa {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
+    .meeting-card__time-range {
+        margin-top: 0;
+        align-items: flex-start;
+    }
+
+    .meeting-card__time-point {
+        width: 116px;
+        flex-basis: 116px;
+    }
+
+    .meeting-card__point-date {
+        color: #64758b;
+        font-size: 13px;
+        line-height: 20px;
+    }
+
+    .meeting-card__time-axis {
+        height: 36px;
+        margin: 14px 5px 0;
+    }
+
+    .meeting-card__time-axis::before {
+        top: 26px;
+    }
+
+    .meeting-view-toggle {
+        width: 70px;
+        height: 28px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 14px;
+        color: #397de0;
+        background: #eaf3ff;
+        font-size: 12px;
+        line-height: 28px;
+    }
+
+    .meeting-view-toggle i {
+        margin-right: 5px;
+        font-size: 13px;
+    }
+
+    .meeting-list-mode .van-list {
+        margin: 12px;
+        padding-top: 0;
+        overflow: hidden;
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08);
+    }
+
+    .meeting-list-mode .meeting-list-skeleton {
+        padding: 0;
+        gap: 0;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__card {
+        min-height: 68px;
+        padding: 12px 14px;
+        display: flex;
+        align-items: center;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__card + .meeting-list-skeleton__card {
+        border-top: 1px solid #edf1f6;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__title {
+        width: 46%;
+        height: 14px;
+        flex: 1;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__time,
+    .meeting-list-mode .meeting-list-skeleton__meta {
+        display: none;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__action {
+        min-height: 28px;
+        margin: 0 0 0 16px;
+        padding: 0;
+        border-top: 0;
+    }
+
+    .meeting-list-mode .meeting-list-skeleton__action span {
+        width: 80px;
+        height: 28px;
+        border-radius: 14px;
+    }
+
+    .meeting-list-mode .meeting-card {
+        min-height: 68px;
+        margin: 0;
+        padding: 12px 14px;
+        align-items: center;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .meeting-list-mode .meeting-card + .meeting-card {
+        border-top: 1px solid #edf1f6;
+    }
+
+    .meeting-list-mode .card-content {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        flex-direction: row;
+        gap: 12px;
+    }
+
+    .meeting-list-mode .meeting-card__header {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .meeting-list-mode .meeting-card__header .meeting-name {
+        display: block;
+        overflow: hidden;
+        font-size: 15px;
+        line-height: 22px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-list-mode .meeting-card__time,
+    .meeting-list-mode .meeting-card__meta,
+    .meeting-list-mode .signin-record-time {
+        display: none;
+    }
+
+    .meeting-list-mode .meeting-card .action-section {
+        min-height: 28px;
+        margin: 0 0 0 auto;
+        padding: 0;
+        flex: 0 0 auto;
+        border-top: 0;
+    }
+
+    .meeting-list-mode .signin-btn,
+    .meeting-list-mode .signin-btn--status {
+        width: auto;
+        min-width: 80px;
+        height: 28px;
+        min-height: 28px;
+        padding: 0 10px;
+        border-radius: 14px;
+        font-size: 12px;
+        box-shadow: none;
+    }
+
+    .meeting-list-mode .signin-btn:not(.signin-btn--status) {
+        color: #397de0;
+        background: #edf5ff;
+    }
+
+    .meeting-list-mode .meeting-card-ended .card-content {
+        opacity: 1;
+        filter: none;
+    }
+
+    .meeting-list-mode .meeting-card-ended::after {
+        display: none;
+    }
+
+    .meeting-finished {
+        height: 44px;
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+        text-align: center;
+    }
+
 </style>
 
 <!--#
diff --git a/src/main/resources/views/platform/zhghh5/democratic/congress/pdf.html b/src/main/resources/views/platform/zhghh5/democratic/congress/pdf.html
index 81d1eacd..5d0c5ed1 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/congress/pdf.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/congress/pdf.html
@@ -16,7 +16,7 @@ layout("/layouts/platform_h5.html"){
         </div>
 
         <div v-if="voteInfo" class="footer-bar">
-            <van-button type="primary" block @click="handleVoteClick">{{ isVoted(voteInfo.voted) ? '查看投票' : '投票' }}</van-button>
+            <van-button type="primary" block :disabled="voteDisabled" @click="handleVoteClick">{{ voteButtonText }}</van-button>
         </div>
     </div>
 </div>
@@ -45,6 +45,20 @@ layout("/layouts/platform_h5.html"){
                 const source = name.indexOf(".") > -1 ? name : url
                 const index = source.lastIndexOf(".")
                 return index > -1 ? source.substring(index + 1).toLowerCase() : ""
+            },
+            voteState() {
+                if (!this.voteInfo) return ""
+                if (this.isVoted(this.voteInfo.voted)) return "voted"
+                return this.voteInfo.votingStatus || "ongoing"
+            },
+            voteDisabled() {
+                return this.voteState === "upcoming" || this.voteState === "ended"
+            },
+            voteButtonText() {
+                if (this.voteState === "voted") return "查看投票"
+                if (this.voteState === "upcoming") return "投票未开始"
+                if (this.voteState === "ended") return "投票已结束"
+                return "投票"
             }
         },
         methods: {
@@ -159,6 +173,14 @@ layout("/layouts/platform_h5.html"){
                     this.$toast("投票信息未加载")
                     return
                 }
+                if (this.voteState === "upcoming") {
+                    this.$toast("投票尚未开始")
+                    return
+                }
+                if (this.voteState === "ended") {
+                    this.$toast("投票已结束，无法继续投票")
+                    return
+                }
                 window.localStorage.setItem("voteInfo", JSON.stringify(this.voteInfo))
                 this.$pjaxReplace(this.isVoted(this.voteInfo.voted) ? "/platform/h5/congress/voted" : "/platform/h5/congress/vote")
             },
@@ -247,6 +269,13 @@ layout("/layouts/platform_h5.html"){
         font-weight: 600;
         box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
     }
+
+    .footer-bar .van-button.van-button--disabled {
+        color: #fff;
+        background: #b8c1cc;
+        box-shadow: none;
+        opacity: 1;
+    }
 </style>
 
 <!--#
diff --git a/src/main/resources/views/platform/zhghh5/democratic/congress/vote.html b/src/main/resources/views/platform/zhghh5/democratic/congress/vote.html
index b2af2978..631f84c9 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/congress/vote.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/congress/vote.html
@@ -157,6 +157,14 @@ layout("/layouts/platform_h5.html"){
                 return Math.ceil(item.options.length / 2)
             },
             submitVote() {
+                if (this.voteInfo.votingStatus === "upcoming") {
+                    this.$toast("投票尚未开始")
+                    return
+                }
+                if (this.voteInfo.votingStatus === "ended") {
+                    this.$toast("投票已结束，无法继续投票")
+                    return
+                }
                 const missing = this.voteItems.filter((_, index) => !this.selectedVotes[index])
                 if (missing.length > 0) {
                     this.$toast("请完成所有投票项的选择")