From b0182731bdecc62931c462fdee3c83debb1f81b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=8C=E5=85=88=E8=88=9C?= <2499071264@qq.com>
Date: Sun, 30 Aug 2026 15:49:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=9A=E8=AE=AE=E9=80=89=E5=BA=A7?=
 =?UTF-8?q?=E3=80=81=E4=BB=A3=E8=A1=A8=E9=98=85=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GuildHallMeetingController.java           |   35 +
 .../GuildHallSelectSeatController.java        |   15 +-
 .../teachercongress/delegate/read/index.html  |  506 ++++++-
 .../guildhall/selectSeat/index.html           | 1160 ++++++++++++++---
 .../guildhall/selectSeat/list.html            |  612 +++++++++
 5 files changed, 2098 insertions(+), 230 deletions(-)
 create mode 100644 src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/list.html

diff --git a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallMeetingController.java b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallMeetingController.java
index 6f9b3dae..ca030775 100644
--- a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallMeetingController.java
+++ b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallMeetingController.java
@@ -3,6 +3,7 @@ package com.budwk.app.zhgh.democratic.teachercongress.guildhall.controller;
 import cn.dev33.satoken.annotation.SaCheckPermission;
 import cn.hutool.core.bean.BeanUtil;
 import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.util.StrUtil;
 import com.budwk.app.base.annotation.SLog;
 import com.budwk.app.base.page.Pagination;
 import com.budwk.app.base.param.PageForm;
@@ -126,4 +127,38 @@ public class GuildHallMeetingController {
 		}
 		return Result.success(results);
 	}
+
+    @At
+    @SaCheckPermission("h5.guildHall.metting")
+    @ApiOperation("H5进行中会议分页")
+    public Result selectPage(PageForm pageForm) {
+        int pageNumber = pageForm.getPageNumber() == null ? 1 : pageForm.getPageNumber();
+        int pageSize = 10;
+        Cnd cnd = Cnd.where(GuildHallMeeting::getStartTime, "<=", DateUtil.date())
+                .and(GuildHallMeeting::getEndTime, ">=", DateUtil.date());
+        if (StrUtil.isNotBlank(pageForm.getSearchKeyword())) {
+            cnd.and(GuildHallMeeting::getName, "like", "%" + pageForm.getSearchKeyword().trim() + "%");
+        }
+        cnd.desc(GuildHallMeeting::getStartTime);
+
+        List<NutMap> availableMeetings = new ArrayList<>();
+        List<GuildHallMeeting> meetings = dao.query(GuildHallMeeting.class, cnd);
+        for (GuildHallMeeting meeting : meetings) {
+            if (meeting.getGroupId() != null
+                    && !activityBasicScopeService.isUserInGroup(meeting.getGroupId(), SecurityUtil.getUserId())) {
+                continue;
+            }
+            NutMap meetingMap = Lang.obj2nutmap(meeting);
+            GuildHall hall = dao.fetch(GuildHall.class, meeting.getHallId());
+            meetingMap.put("address", hall == null ? null : hall.getAddress());
+            availableMeetings.add(meetingMap);
+        }
+
+        int totalCount = availableMeetings.size();
+        int fromIndex = Math.min((pageNumber - 1) * pageSize, totalCount);
+        int toIndex = Math.min(fromIndex + pageSize, totalCount);
+        Pagination<NutMap> pagination = new Pagination<>(pageNumber, pageSize, totalCount,
+                availableMeetings.subList(fromIndex, toIndex));
+        return Result.success(pagination);
+    }
 }
diff --git a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallSelectSeatController.java b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallSelectSeatController.java
index 9ddf6cb3..c15e64a8 100644
--- a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallSelectSeatController.java
+++ b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/guildhall/controller/GuildHallSelectSeatController.java
@@ -1,6 +1,7 @@
 package com.budwk.app.zhgh.democratic.teachercongress.guildhall.controller;
 
 import cn.dev33.satoken.annotation.SaCheckPermission;
+import cn.dev33.satoken.annotation.SaMode;
 import com.budwk.app.base.result.Result;
 import com.budwk.app.web.commons.auth.utils.SecurityUtil;
 import com.budwk.app.zhgh.activity.basic.service.ActivityBasicScopeService;
@@ -49,14 +50,14 @@ public class GuildHallSelectSeatController {
 	}
 
 	@At("/h5")
-	@SaCheckPermission("h5.guildHall.selectSeat")
+	@SaCheckPermission(value = {"h5.guildHall.metting", "h5.guildHall.selectSeat"}, mode = SaMode.OR)
 	@Ok("beetl:/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/index.html")
 	public void h5Index() {
 	}
 
-	@At
-	@SaCheckPermission("guildHall.selectSeat")
-	public Result loadSeats(@Param("meetingId") String meetingId) {
+        @At
+        @SaCheckPermission(value = {"guildHall.selectSeat", "h5.guildHall.metting"}, mode = SaMode.OR)
+        public Result loadSeats(@Param("meetingId") String meetingId) {
 		Result permissionResult = checkMeetingPermission(meetingId);
 		if (permissionResult != null) {
 			return permissionResult;
@@ -87,10 +88,10 @@ public class GuildHallSelectSeatController {
 		return Result.success(selectedSeats);
 	}
 
-	@At
-	@SaCheckPermission("guildHall.selectSeat")
+        @At
+	@SaCheckPermission(value = {"guildHall.selectSeat", "h5.guildHall.metting"}, mode = SaMode.OR)
 	@Aop(TransAop.READ_COMMITTED)
-	public Result doSelect(@Param("meetingId") String meetingId, Integer rowNumber, Integer colNumber) {
+        public Result doSelect(@Param("meetingId") String meetingId, Integer rowNumber, Integer colNumber) {
 		Result permissionResult = checkMeetingPermission(meetingId);
 		if (permissionResult != null) {
 			return permissionResult;
diff --git a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/read/index.html b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/read/index.html
index 5879c88d..93e8400d 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/read/index.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/read/index.html
@@ -2,63 +2,465 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
-<div id="app" v-cloak style="padding-bottom: 70px;">
-    <van-nav-bar title="代表阅览" left-text="返回" left-arrow @click-left="historyBack" placeholder fixed></van-nav-bar>
-    <van-sticky offset-top="46px">
-        <van-search
-                v-model="pageForm.searchKeyword"
-                :show-action="false"
-                :reverse-color="false"
-                input-align="left"
-                placeholder="请输入姓名/工号搜索"
-                @search="doSearch"
-        ></van-search>
-        <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
-            <van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions"
-                               @change="sessionChange"></van-dropdown-item>
-            <van-dropdown-item
-                    v-if="pageForm.sessionId"
-                    v-model="pageForm.delegationId"
-                    :options="delegationOptions"
-                    @change="doSearch"
-            ></van-dropdown-item>
+<style>
+    body {
+        background-color: #f3f7fd;
+    }
+
+    .delegate-read-page {
+        min-height: 100vh;
+        padding-bottom: calc(86px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .delegate-read-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .delegate-read-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .delegate-read-page .van-nav-bar .van-icon,
+    .delegate-read-page .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .delegate-read-content {
+        padding: 12px 12px 0;
+    }
+
+    .delegate-read-hero {
+        position: relative;
+        height: 134px;
+        overflow: hidden;
+        border-radius: 10px;
+        color: #fff;
+        background-color: #247fe8;
+        box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
+    }
+
+    .delegate-read-hero__image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+
+    .delegate-read-hero__copy {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        width: 68%;
+        height: 100%;
+        padding-left: 16px;
+        flex-direction: column;
+        justify-content: center;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
+    }
+
+    .delegate-read-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
+        text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
+    }
+
+    .delegate-read-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+        opacity: .95;
+    }
+
+    .delegate-read-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .delegate-read-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .delegate-read-search {
+        margin: 0 0 10px;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 9px;
+        background-color: #fff;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .delegate-read-search .van-search__content {
+        height: 40px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 9px;
+        background-color: #fff;
+    }
+
+    .delegate-read-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .delegate-read-search .van-field__control::placeholder {
+        color: #a7b0bf;
+    }
+
+    .delegate-read-filter {
+        margin: 0 0 10px;
+        overflow: hidden;
+        border-radius: 10px;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        transition: border-radius .18s ease;
+    }
+
+    .delegate-read-filter.is-open {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .delegate-read-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .delegate-read-filter .van-dropdown-menu__item {
+        min-width: 0;
+        flex: 1 1 0;
+    }
+
+    .delegate-read-filter .van-dropdown-menu__title {
+        width: auto;
+        max-width: calc(100% - 24px);
+        padding: 0 12px 0 0;
+        color: #66758a;
+        font-size: 14px;
+    }
+
+    .delegate-read-filter .van-dropdown-menu__title::after {
+        right: 0;
+    }
+
+    .delegate-read-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        max-height: 80%;
+        margin: 0 12px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        box-sizing: border-box;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .delegate-read-list .empty-state {
+        padding: 0;
+    }
+
+    .delegate-read-list .table-list.is-empty {
+        height: calc(100vh - 400px - env(safe-area-inset-bottom));
+        min-height: 300px;
+        box-sizing: border-box;
+    }
+
+    .delegate-read-list .table-list-container {
+        margin-top: 0;
+    }
+
+    .delegate-read-list .table-list-container .table-list-item {
+        margin-bottom: 10px;
+        padding: 12px;
+        border: 0;
+        border-radius: 9px;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .delegate-read-list .table-list-container .table-list-item .table-list-content,
+    .delegate-read-list .table-list-container .table-list-item .table-list-columns {
+        display: block;
+        width: 100%;
+    }
+
+    .delegate-read-list .table-list-container .table-list-item .item-header,
+    .delegate-read-list .table-list-container .table-list-item .item-actions {
+        display: none;
+    }
+
+    .delegate-card {
+        display: grid;
+        grid-template-columns: 58px minmax(0, 1fr);
+        gap: 12px;
+        width: 100%;
+        min-height: 76px;
+        align-items: center;
+        box-sizing: border-box;
+    }
+
+    .delegate-card__avatar {
+        display: flex;
+        width: 58px;
+        height: 58px;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 50%;
+        color: #6ca8f2;
+        background-color: #eaf3ff;
+    }
+
+    .delegate-card__avatar.is-female {
+        color: #ee9cab;
+        background-color: #fff0f3;
+    }
+
+    .delegate-card__avatar .van-icon {
+        font-size: 34px;
+    }
+
+    .delegate-card__body {
+        min-width: 0;
+    }
+
+    .delegate-card__name {
+        margin-bottom: 4px;
+        overflow: hidden;
+        color: #1e2c43;
+        font-size: 16px;
+        line-height: 22px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .delegate-card__row {
+        display: grid;
+        grid-template-columns: 76px minmax(0, 1fr);
+        min-height: 20px;
+        align-items: center;
+        color: #52637c;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .delegate-card__label {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        color: #91a0b3;
+        white-space: nowrap;
+    }
+
+    .delegate-card__label i {
+        width: 15px;
+        margin-right: 5px;
+        color: #8da2bd;
+        font-size: 11px;
+        text-align: center;
+    }
+
+    .delegate-card__value {
+        min-width: 0;
+        overflow: hidden;
+        color: #435570;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .delegate-read-empty {
+        display: flex;
+        min-height: 260px;
+        padding: 26px 18px 32px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .delegate-read-empty img {
+        display: block;
+        width: 82%;
+        max-width: 280px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .delegate-read-empty__title {
+        margin-top: 14px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .delegate-read-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .delegate-read-actions {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        display: flex;
+        gap: 10px;
+        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background: #fff;
+        border-top: 1px solid #edf1f6;
+        box-shadow: 0 -5px 16px rgba(43, 73, 112, .08);
+    }
+
+    .delegate-read-actions .van-button {
+        flex: 1;
+        height: 44px;
+        border-radius: 9px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    .delegate-read-actions .delegate-read-action.is-excel {
+        color: #217346;
+        border-color: #8fc6a8;
+        background-color: #eef8f2;
+        box-shadow: inset 0 0 0 1px rgba(33, 115, 70, .06);
+    }
+
+    .delegate-read-actions .delegate-read-action.is-word {
+        color: #2b579a;
+        border-color: #91afd4;
+        background-color: #eef4fb;
+        box-shadow: inset 0 0 0 1px rgba(43, 87, 154, .06);
+    }
+
+    .delegate-read-actions .is-excel i {
+        color: #217346;
+    }
+
+    .delegate-read-actions .is-word i {
+        color: #2b579a;
+    }
+
+    .delegate-read-actions i {
+        margin-right: 7px;
+        font-size: 17px;
+        vertical-align: -1px;
+    }
+</style>
+
+<div id="app" v-cloak>
+    <div class="delegate-read-page">
+        <van-nav-bar title="代表阅览" left-text="返回" left-arrow @click-left="historyBack" placeholder fixed></van-nav-bar>
+
+        <div class="delegate-read-content">
+            <section class="delegate-read-hero">
+                <img class="delegate-read-hero__image" src="/assets/mobile/img/democratic/teachercongress/delegate-read-hero.png" alt="代表阅览插画">
+                <div class="delegate-read-hero__copy">
+                    <div class="delegate-read-hero__title">代表阅览</div>
+                    <div class="delegate-read-hero__subtitle">查阅教代会代表信息</div>
+                </div>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="delegate-read-sticky">
+                    <van-search
+                            v-model="pageForm.searchKeyword"
+                            class="delegate-read-search"
+                            :show-action="false"
+                            :reverse-color="false"
+                            input-align="left"
+                            placeholder="请输入姓名/工号搜索"
+                            shape="round"
+                            clearable
+                            @search="doSearch"
+                            @clear="doSearch"
+                    ></van-search>
+                    <van-dropdown-menu class="delegate-read-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
+                        <van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions"
+                                           @change="sessionChange" @open="setFilterOpened(true)" @close="setFilterOpened(false)"></van-dropdown-item>
+                        <van-dropdown-item
+                                v-if="pageForm.sessionId"
+                                v-model="pageForm.delegationId"
+                                :options="delegationOptions"
+                                @change="doSearch"
+                                @open="setFilterOpened(true)"
+                                @close="setFilterOpened(false)"
+                        ></van-dropdown-item>
 <!--            <van-dropdown-item ref="moreDropDownItemOption" title="更多查询" multiple :options="moreOptions"-->
 <!--                               @change="moreOptionChange">-->
 <!--                <van-button type="primary" class="margin-top20 width100" @click="$refs.moreDropDownItemOption.toggle()">-->
 <!--                    查询-->
 <!--                </van-button>-->
 <!--            </van-dropdown-item>-->
-        </van-dropdown-menu>
-    </van-sticky>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
 
-    <div class="export-buttons" style="position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; display: flex; gap: 10px; background: white; border-top: 1px solid #eee; z-index: 1000; box-shadow: 0 -2px 8px rgba(0,0,0,0.1);">
-        <van-button type="primary" size="medium" @click="exportXlsx" style="flex: 1;">
-            <i class="fa fa-file-excel-o"></i> 导出Excel
-        </van-button>
-        <van-button type="info" size="medium" @click="exportDocx" style="flex: 1;">
-            <i class="fa fa-file-word-o"></i> 导出Word
-        </van-button>
-    </div>
-
-    <table-list api="/platform/teacherCongress/delegate/read/pageData" :page_form.sync="pageForm" json
-                @ready="onReady"
-                ref="tableListRef"
-                style="padding-bottom: 65px">
-        <template v-slot="{index,row}">
-            <table-column label="代表姓名">{{row.userName}}</table-column>
-            <table-column label="代表工号">{{row.loginName}}</table-column>
-            <table-column label="代表团">{{delegationOptions.find(v=>v.id===row.delegationId)?.name}}</table-column>
-            <table-column label="代表身份">
-                {{moreOptions.find(v=>v.title==='代表身份')?.options.find(v=>v.id===row.roleId)?.name}}
-            </table-column>
-        </template>
-        <template #actions="{index,row}">
-            <div class="action-btn">
-                <i class="fa fa-eye"></i>
-                <span>查看</span>
+            <div class="delegate-read-list">
+                <table-list api="/platform/teacherCongress/delegate/read/pageData" :page_form.sync="pageForm"
+                            :class="{'is-empty': pageForm.totalCount === 0}" json
+                            @ready="onReady"
+                            ref="tableListRef"
+                            title="userName">
+                    <template #empty>
+                        <div class="delegate-read-empty">
+                            <img src="/assets/mobile/img/democratic/teachercongress/delegate-read-empty.png" alt="暂无代表信息插画">
+                            <div class="delegate-read-empty__title">暂无代表信息</div>
+                            <div class="delegate-read-empty__hint">当前筛选条件下暂时没有可阅览的代表</div>
+                        </div>
+                    </template>
+                    <template #header></template>
+                    <template v-slot="{index,row}">
+                        <div class="delegate-card">
+                            <div class="delegate-card__avatar" :class="{'is-female': row.sex === '女'}">
+                                <van-icon name="manager"></van-icon>
+                            </div>
+                            <div class="delegate-card__body">
+                                <div class="delegate-card__name">{{row.userName || '--'}}</div>
+                                <div class="delegate-card__row">
+                                    <div class="delegate-card__label"><i class="fa fa-id-card-o"></i>代表工号</div>
+                                    <div class="delegate-card__value">{{row.loginName || '--'}}</div>
+                                </div>
+                                <div class="delegate-card__row">
+                                    <div class="delegate-card__label"><i class="fa fa-sitemap"></i>代表团</div>
+                                    <div class="delegate-card__value">{{delegationOptions.find(v=>v.id===row.delegationId)?.name || '--'}}</div>
+                                </div>
+                                <div class="delegate-card__row">
+                                    <div class="delegate-card__label"><i class="fa fa-user-o"></i>代表身份</div>
+                                    <div class="delegate-card__value">{{moreOptions.find(v=>v.title==='代表身份')?.options.find(v=>v.id===row.roleId)?.name || '--'}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </table-list>
             </div>
-        </template>
-    </table-list>
+        </div>
+
+        <div class="delegate-read-actions">
+            <van-button class="delegate-read-action is-excel" size="medium" @click="exportXlsx">
+                <i class="fa fa-file-excel-o"></i> 导出Excel
+            </van-button>
+            <van-button class="delegate-read-action is-word" type="primary" size="medium" @click="exportDocx">
+                <i class="fa fa-file-word-o"></i> 导出Word
+            </van-button>
+        </div>
+    </div>
 </div>
 
 <script nonce="${cspNonce!}">
@@ -81,11 +483,15 @@ layout("/layouts/platform_h5.html"){
                 delegationOptions: [],
                 roleOptions: [],
 
-                moreOptions: []
+                moreOptions: [],
+                filterOpened: false
             }
         },
         methods: {
             historyBack,
+            setFilterOpened(value) {
+                this.$set(this, "filterOpened", value)
+            },
 
             moreOptionChange(options) {
                 this.moreOptions = options
diff --git a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/index.html b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/index.html
index bff79fb8..7a3f24f7 100644
--- a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/index.html
+++ b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/index.html
@@ -434,47 +434,830 @@ layout("/layouts/platform_h5.html"){
             font-size: 8px;
         }
     }
+
+    body {
+        background-color: #f3f7fd;
+    }
+
+    #app > .van-nav-bar,
+    #app .van-nav-bar--fixed {
+        background-color: #fff;
+    }
+
+    #app .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    #app .van-nav-bar .van-icon,
+    #app .van-nav-bar__text {
+        color: #397fbd;
+    }
+
+    .meeting-list-page {
+        min-height: 100vh;
+        padding-bottom: calc(20px + env(safe-area-inset-bottom));
+        background-color: #f3f7fd;
+    }
+
+    .meeting-list-toolbar {
+        position: sticky;
+        top: 46px;
+        z-index: 20;
+        padding: 10px 12px 0;
+        background-color: #f3f7fd;
+    }
+
+    .meeting-list-search-row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 8px;
+        align-items: center;
+    }
+
+    .meeting-list-search {
+        padding: 0;
+        overflow: hidden;
+        border-radius: 9px;
+        background-color: #fff;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .meeting-list-search .van-search__content {
+        height: 40px;
+        padding-left: 12px;
+        align-items: center;
+        border-radius: 9px;
+        background-color: #fff;
+    }
+
+    .meeting-mine-button {
+        height: 40px;
+        padding: 0 11px;
+        border: 0;
+        border-radius: 9px;
+        color: #397de0;
+        background-color: #eaf3ff;
+        font-size: 12px;
+        white-space: nowrap;
+    }
+
+    .meeting-mine-button.is-active {
+        color: #fff;
+        background-color: #397de0;
+    }
+
+    .meeting-mine-button .van-icon {
+        margin-right: 4px;
+        font-size: 14px;
+        vertical-align: -2px;
+    }
+
+    .meeting-status-tabs {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        margin-top: 8px;
+        border-bottom: 1px solid #e8edf4;
+        background-color: #fff;
+        border-radius: 9px 9px 0 0;
+    }
+
+    .meeting-status-tab {
+        position: relative;
+        height: 40px;
+        padding: 0;
+        border: 0;
+        color: #77869a;
+        background-color: transparent;
+        font-size: 12px;
+    }
+
+    .meeting-status-tab.is-active {
+        color: #1976e9;
+        font-weight: 600;
+    }
+
+    .meeting-status-tab.is-active::after {
+        position: absolute;
+        right: 25%;
+        bottom: 0;
+        left: 25%;
+        height: 3px;
+        border-radius: 2px;
+        background-color: #1976e9;
+        content: '';
+    }
+
+    .meeting-list-content {
+        padding: 10px 12px;
+    }
+
+    .meeting-list-card {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 78px;
+        gap: 10px;
+        min-height: 132px;
+        margin-bottom: 10px;
+        padding: 15px 12px 12px;
+        overflow: hidden;
+        border: 0;
+        border-radius: 9px;
+        background-color: #fff;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .meeting-list-card.is-current {
+        box-shadow: 0 4px 14px rgba(44, 126, 226, .12);
+    }
+
+    .meeting-card-status {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 2px 8px;
+        border-radius: 9px 0 8px 0;
+        color: #fff;
+        background-color: #aeb7c3;
+        font-size: 10px;
+        line-height: 17px;
+    }
+
+    .meeting-card-status.is-current {
+        background-color: #36b980;
+    }
+
+    .meeting-card-status.is-upcoming {
+        background-color: #7e91aa;
+    }
+
+    .meeting-card-status.is-ended {
+        background-color: #b5bac2;
+    }
+
+    .meeting-card-main {
+        min-width: 0;
+        padding-top: 4px;
+    }
+
+    .meeting-card-title {
+        overflow: hidden;
+        color: #263548;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-card-meta {
+        display: flex;
+        margin-top: 7px;
+        align-items: flex-start;
+        color: #8794a7;
+        font-size: 11px;
+        line-height: 17px;
+    }
+
+    .meeting-card-meta .van-icon {
+        width: 15px;
+        margin-top: 1px;
+        flex: 0 0 15px;
+        color: #91a4ba;
+        font-size: 13px;
+    }
+
+    .meeting-card-available {
+        margin-top: 8px;
+        color: #2476d8;
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 600;
+    }
+
+    .meeting-card-side {
+        display: flex;
+        padding-top: 13px;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: column;
+    }
+
+    .meeting-card-visual {
+        display: flex;
+        width: 68px;
+        height: 54px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        color: #2f83e7;
+        background-color: #e8f3ff;
+    }
+
+    .meeting-card-visual .van-icon {
+        font-size: 34px;
+    }
+
+    .meeting-list-card.is-current .meeting-card-visual {
+        color: #2aa873;
+        background-color: #e8f8f0;
+    }
+
+    .meeting-card-action {
+        display: inline-flex;
+        height: 28px;
+        padding: 0 10px;
+        align-items: center;
+        border: 0;
+        border-radius: 7px;
+        color: #2879dc;
+        background-color: #edf5ff;
+        font-size: 12px;
+    }
+
+    .meeting-card-action .van-icon {
+        margin-left: 3px;
+        font-size: 12px;
+    }
+
+    .meeting-list-empty {
+        min-height: 360px;
+        padding-top: 42px;
+    }
+
+    .mobile-seat-container {
+        min-height: 100vh;
+        padding: 12px 12px calc(94px + env(safe-area-inset-bottom));
+        background-color: #f3f7fd;
+    }
+
+    .mobile-header {
+        position: relative;
+        min-height: 112px;
+        padding: 16px 92px 14px 14px;
+        overflow: hidden;
+        border: 0;
+        border-radius: 9px;
+        background-color: #fff;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .mobile-header .meeting-title {
+        margin-bottom: 8px;
+        font-size: 16px;
+        line-height: 23px;
+    }
+
+    .mobile-header .meeting-time,
+    .mobile-header .meeting-address {
+        display: flex;
+        margin-top: 5px;
+        align-items: flex-start;
+        color: #7f8da1;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .mobile-header .van-icon {
+        width: 17px;
+        margin-top: 1px;
+        flex: 0 0 17px;
+        color: #8398b1;
+    }
+
+    .mobile-header-visual {
+        position: absolute;
+        right: 14px;
+        bottom: 14px;
+        display: flex;
+        width: 66px;
+        height: 52px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        color: #2f83e7;
+        background-color: #e8f3ff;
+    }
+
+    .mobile-header-visual .van-icon {
+        width: auto;
+        margin: 0;
+        color: inherit;
+        font-size: 34px;
+    }
+
+    .mobile-stage {
+        margin: 13px 8px 10px;
+        padding: 0;
+        overflow: visible;
+    }
+
+    .mobile-stage .stage-svg,
+    .mobile-stage .stage-text {
+        display: none;
+    }
+
+    .mobile-screen {
+        display: flex;
+        height: 34px;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #d2e2f4;
+        border-radius: 50%;
+        color: #42546b;
+        background-color: #e8f2fd;
+        box-shadow: 0 5px 12px rgba(61, 121, 187, .1);
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .mobile-legend {
+        margin: 0 0 12px;
+        padding: 10px 8px;
+        align-items: center;
+        border: 1px solid #e7edf5;
+        border-radius: 9px;
+        box-shadow: none;
+    }
+
+    .mobile-legend-item {
+        flex-direction: row;
+        gap: 4px;
+        color: #526177;
+        font-size: 11px;
+    }
+
+    .mobile-legend-seat {
+        width: 18px;
+        height: 18px;
+    }
+
+    .seat-grid-container {
+        min-height: 0;
+        padding: 4px 0 12px;
+    }
+
+    .seat-matrix {
+        width: 100%;
+        padding: 6px 2px 12px;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+
+    .seat-matrix::-webkit-scrollbar {
+        display: none;
+    }
+
+    .seat-matrix-header,
+    .seat-matrix-row {
+        display: flex;
+        width: max-content;
+        min-width: 100%;
+        align-items: center;
+    }
+
+    .seat-matrix-header {
+        margin-bottom: 4px;
+    }
+
+    .seat-matrix-row {
+        min-height: 39px;
+    }
+
+    .seat-row-label,
+    .seat-column-label {
+        width: 30px;
+        flex: 0 0 30px;
+        color: #263548;
+        font-size: 11px;
+        text-align: center;
+    }
+
+    .seat-row-label {
+        font-weight: 600;
+    }
+
+    .mobile-seat {
+        width: 28px;
+        height: 30px;
+        margin-right: 6px;
+        flex: 0 0 28px;
+        border-radius: 4px;
+    }
+
+    .mobile-seat.has-aisle,
+    .seat-column-label.has-aisle {
+        margin-left: 14px;
+    }
+
+    .mobile-seat-icon {
+        width: 25px;
+        height: 25px;
+        margin: 0;
+    }
+
+    .mobile-seat-number {
+        display: none;
+    }
+
+    .mobile-seat-check {
+        position: absolute;
+        top: 6px;
+        color: #fff;
+        font-size: 12px;
+    }
+
+    .mobile-seat.seat-placeholder {
+        visibility: hidden;
+    }
+
+    .mobile-bottom-panel {
+        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
+        border-top-color: #e7edf5;
+        box-shadow: 0 -5px 18px rgba(42, 67, 99, .08);
+    }
+
+    .mobile-bottom-summary {
+        display: flex;
+        min-height: 22px;
+        margin-bottom: 9px;
+        align-items: center;
+        justify-content: space-between;
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .mobile-bottom-summary strong {
+        margin: 0 3px;
+        color: #1677ee;
+        font-size: 18px;
+    }
+
+    .mobile-bottom-seat {
+        max-width: 65%;
+        overflow: hidden;
+        color: #65758b;
+        font-size: 12px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .mobile-confirm-button {
+        height: 46px;
+        border-radius: 9px;
+        font-size: 15px;
+        font-weight: 600;
+    }
+
+    .mobile-my-seat-info {
+        margin: 0 0 8px !important;
+        border-radius: 9px;
+    }
+
+    @media (max-width: 375px) {
+        .meeting-list-card {
+            grid-template-columns: minmax(0, 1fr) 70px;
+        }
+
+        .mobile-seat {
+            width: 25px;
+            height: 28px;
+            margin-right: 5px;
+            flex-basis: 25px;
+        }
+
+        .mobile-seat-icon {
+            width: 23px;
+            height: 23px;
+        }
+
+        .mobile-seat.has-aisle,
+        .seat-column-label.has-aisle {
+            margin-left: 10px;
+        }
+    }
+
+    html,
+    body,
+    #app {
+        min-height: 100%;
+        background: #fff;
+    }
+
+    .mobile-seat-container {
+        min-height: calc(100vh - 46px);
+        padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
+        background: #fff;
+    }
+
+    .mobile-header {
+        min-height: 118px;
+        padding: 17px 94px 14px 14px;
+        border: 1px solid #e8eef6;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(33, 62, 96, .04);
+    }
+
+    .mobile-header .meeting-title {
+        margin-bottom: 9px;
+        color: #151b26;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 23px;
+    }
+
+    .mobile-header .meeting-time,
+    .mobile-header .meeting-address {
+        margin-top: 6px;
+        align-items: center;
+        color: #738096;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .mobile-header .meeting-time .van-icon,
+    .mobile-header .meeting-address .van-icon {
+        display: inline-flex;
+        height: 18px;
+        margin-top: 0;
+        align-items: center;
+        justify-content: flex-start;
+        line-height: 18px;
+    }
+
+    .mobile-header-visual {
+        right: 14px;
+        bottom: 11px;
+        width: 82px;
+        height: 62px;
+        background: transparent;
+        border-radius: 0;
+    }
+
+    .mobile-header-visual::after {
+        display: none;
+    }
+
+    .mobile-header-visual img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transform: scale(1.45);
+        transform-origin: center;
+    }
+
+    .mobile-stage {
+        margin: 13px 5px 11px;
+    }
+
+    .mobile-screen {
+        height: 27px;
+        color: #25364c;
+        background: #e1eefb;
+        border: 0;
+        border-radius: 50% / 68%;
+        box-shadow: inset 0 5px 9px rgba(255, 255, 255, .72), 0 5px 9px rgba(68, 119, 174, .16);
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .mobile-legend {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 2px;
+        margin: 0 0 14px;
+        padding: 10px 5px;
+        border: 1px solid #e8edf4;
+        border-radius: 8px;
+        background: #fff;
+    }
+
+    .mobile-legend-item {
+        justify-content: center;
+        gap: 3px;
+        color: #39485d;
+        white-space: nowrap;
+    }
+
+    .mobile-legend-seat {
+        width: 19px;
+        height: 19px;
+    }
+
+    .mobile-seat-area {
+        min-height: 380px;
+    }
+
+    .seat-grid-container {
+        padding: 3px 0 0;
+    }
+
+    .seat-matrix {
+        padding: 4px 0 4px;
+    }
+
+    .seat-matrix-header {
+        margin-bottom: 6px;
+    }
+
+    .seat-matrix-row {
+        min-height: var(--seat-row-height);
+    }
+
+    .seat-row-label {
+        width: var(--row-label-width);
+        flex: 0 0 var(--row-label-width);
+        color: #202b3c;
+        font-size: 11px;
+        line-height: var(--seat-size);
+        text-align: center;
+    }
+
+    .seat-column-label {
+        width: var(--seat-size);
+        margin-right: var(--seat-gap);
+        flex: 0 0 var(--seat-size);
+        color: #202b3c;
+        font-size: 11px;
+        line-height: var(--seat-size);
+        text-align: center;
+    }
+
+    .mobile-seat {
+        width: var(--seat-size);
+        height: var(--seat-height);
+        margin-right: var(--seat-gap);
+        flex: 0 0 var(--seat-size);
+    }
+
+    .mobile-seat.has-aisle,
+    .seat-column-label.has-aisle {
+        margin-left: var(--aisle-gap);
+    }
+
+    .mobile-seat-icon {
+        width: var(--seat-icon-size);
+        height: var(--seat-icon-size);
+    }
+
+    .mobile-seat.selected .seat-back,
+    .mobile-seat.selected .seat-armrest {
+        fill: #0b6ff2;
+        stroke: #0b6ff2;
+    }
+
+    .mobile-seat.selected .seat-cushion {
+        fill: #1677ff;
+        stroke: #0b6ff2;
+    }
+
+    .mobile-seat.my-seat .seat-back,
+    .mobile-seat.my-seat .seat-armrest {
+        fill: #ff4d5a;
+        stroke: #ff3344;
+    }
+
+    .mobile-seat.my-seat .seat-cushion {
+        fill: #ff6671;
+        stroke: #ff3344;
+    }
+
+    .mobile-bottom-panel {
+        padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
+        border-top: 1px solid #edf0f5;
+        background: #fff;
+        box-shadow: 0 -5px 18px rgba(36, 55, 80, .08);
+    }
+
+    .mobile-bottom-panel.is-empty {
+        padding-top: 12px;
+    }
+
+    .mobile-bottom-selected {
+        display: grid;
+        grid-template-columns: 105px minmax(0, 1fr);
+        gap: 12px;
+        align-items: center;
+    }
+
+    .mobile-bottom-summary {
+        display: block;
+        min-height: auto;
+        margin: 0;
+        color: #202b3c;
+        font-size: 15px;
+        white-space: nowrap;
+    }
+
+    .mobile-bottom-summary strong {
+        margin: 0 4px;
+        color: #1677ff;
+        font-size: 19px;
+        font-weight: 600;
+    }
+
+    .mobile-confirm-button {
+        height: 46px;
+        border: 0;
+        border-radius: 8px;
+        background: #1677ff;
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .mobile-confirm-button.van-button--disabled {
+        color: #8d98a9;
+        background: #e8edf5;
+        opacity: 1;
+    }
+
+    .seat-confirm-sheet {
+        border-radius: 18px 18px 0 0;
+    }
+
+    .seat-confirm-content {
+        padding: 21px 18px calc(18px + env(safe-area-inset-bottom));
+    }
+
+    .seat-confirm-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #171f2c;
+        font-size: 17px;
+        font-weight: 600;
+    }
+
+    .seat-confirm-clear {
+        padding: 4px 0;
+        color: #1677ff;
+        font-size: 15px;
+        font-weight: 400;
+        background: transparent;
+        border: 0;
+    }
+
+    .seat-confirm-value {
+        padding: 17px 0 14px;
+        color: #202b3c;
+        font-size: 15px;
+        line-height: 22px;
+        border-bottom: 1px solid #e9edf3;
+    }
+
+    .seat-confirm-tip {
+        padding: 15px 0 16px;
+        color: #7b8799;
+        font-size: 14px;
+    }
+
+    .seat-confirm-submit {
+        height: 46px;
+        border: 0;
+        border-radius: 8px;
+        background: #ff3344;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    @media (max-width: 375px) {
+        .mobile-bottom-selected {
+            grid-template-columns: 95px minmax(0, 1fr);
+            gap: 9px;
+        }
+
+        .mobile-seat {
+            margin-right: var(--seat-gap);
+        }
+
+        .mobile-seat.has-aisle,
+        .seat-column-label.has-aisle {
+            margin-left: var(--aisle-gap);
+        }
+    }
 </style>
 
 <div id="app" v-cloak>
-    <van-nav-bar title="会议选座" left-text="返回" left-arrow @click-left="historyBack" placeholder fixed></van-nav-bar>
-
-    <!-- 会议选择弹窗 -->
-    <van-popup v-model="showMeetingModal" position="bottom" :close-on-click-overlay="false">
-        <div class="meeting-modal-content">
-            <van-nav-bar title="选择会议"></van-nav-bar>
-            <div style="padding: 16px;">
-                <div v-for="meeting in meetings" :key="meeting.id"
-                     :class="['meeting-item', { selected: selectedMeetingId === meeting.id }]"
-                     @click="selectMeeting(meeting)">
-                    <div class="meeting-name">{{ meeting.name }}</div>
-                    <div class="meeting-info">地点：{{ meeting.address }}</div>
-                    <div class="meeting-time">时间：{{ meeting.startTime }} 至 {{ meeting.endTime }}</div>
-                </div>
-
-                <div style="display: flex; gap: 22px">
-                    <van-button block @click="showMeetingModal = false" style="margin-top: 16px;">
-                        取消选择
-                    </van-button>
-
-                    <van-button block type="info" :disabled="!selectedMeetingId"
-                                @click="confirmMeetingSelection" style="margin-top: 16px;">
-                        确认选择
-                    </van-button>
-                </div>
-            </div>
-        </div>
-    </van-popup>
+    <van-nav-bar title="会议选座" left-text="返回" left-arrow
+                 @click-left="handleBack" placeholder fixed></van-nav-bar>
 
     <div class="mobile-seat-container">
         <!-- 头部信息 -->
         <div class="mobile-header" v-if="meeting">
             <div class="meeting-title">{{ meeting.name }}</div>
-            <div class="meeting-time">{{ meeting.startTime }} 至 {{ meeting.endTime }}</div>
+            <div class="meeting-time"><van-icon name="clock-o"></van-icon>{{ formatMeetingRange(meeting) }}</div>
+            <div class="meeting-address"><van-icon name="location-o"></van-icon>{{ meeting.address || '会议地点待定' }}</div>
+            <div class="mobile-header-visual">
+                <img src="/assets/mobile/img/democratic/teachercongress/meeting-dais.png" alt="会议主席台">
+            </div>
         </div>
 
         <!-- 主席台 -->
         <div class="mobile-stage">
+            <div class="mobile-screen">主席台</div>
             <svg class="stage-svg" viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
                 <!-- 背景装饰 -->
                 <rect x="0" y="0" width="320" height="100" fill="url(#bgGradient)" rx="12" ry="12"/>
@@ -626,73 +1409,67 @@ layout("/layouts/platform_h5.html"){
                 正在加载座位信息...
             </van-loading>
 
-            <div v-else class="seat-grid-container">
-                <div class="mobile-seat-grid" id="seatGrid" :style="gridStyle">
-                    <div v-for="seat in seats" :key="seat.id"
-                         :class="getSeatClass(seat)"
-                         class="mobile-seat"
-                         @click="selectSeat(seat)">
-                        <svg class="mobile-seat-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="8" y="5" width="34" height="20" rx="3" ry="3" class="seat-back"/>
-                            <rect x="5" y="22" width="40" height="18" rx="4" ry="4" class="seat-cushion"/>
-                            <rect x="2" y="20" width="6" height="15" rx="2" ry="2" class="seat-armrest"/>
-                            <rect x="42" y="20" width="6" height="15" rx="2" ry="2" class="seat-armrest"/>
-                        </svg>
-                        <span class="mobile-seat-number">{{ seat.rowNumber }}-{{ seat.colNumber }}</span>
+            <div v-else class="seat-grid-container"
+                 @touchstart="handleSeatTouchStart"
+                 @touchmove="handleSeatTouchMove"
+                 @touchend="handleSeatTouchEnd"
+                 @touchcancel="handleSeatTouchEnd">
+                <div class="seat-matrix" :style="seatMatrixStyle">
+                    <div class="seat-matrix-header">
+                        <span class="seat-row-label"></span>
+                        <span v-for="column in seatConfig.cols" :key="'column-' + column"
+                              class="seat-column-label" :class="{'has-aisle': column === aisleStartColumn}">{{ column }}</span>
+                    </div>
+                    <div v-for="seatRow in seatRows" :key="'row-' + seatRow.rowNumber" class="seat-matrix-row">
+                        <span class="seat-row-label">{{ seatRow.rowNumber }}排</span>
+                        <div v-for="(seat, seatIndex) in seatRow.seats" :key="seat ? seat.id : seatRow.rowNumber + '-' + seatIndex"
+                             class="mobile-seat"
+                             :class="[seat ? getSeatClass(seat) : 'seat-placeholder', {'has-aisle': seatIndex + 1 === aisleStartColumn}]"
+                             @click="seat && selectSeat(seat)">
+                            <svg class="mobile-seat-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="8" y="5" width="34" height="20" rx="3" ry="3" class="seat-back"/>
+                                <rect x="5" y="22" width="40" height="18" rx="4" ry="4" class="seat-cushion"/>
+                                <rect x="2" y="20" width="6" height="15" rx="2" ry="2" class="seat-armrest"/>
+                                <rect x="42" y="20" width="6" height="15" rx="2" ry="2" class="seat-armrest"/>
+                            </svg>
+                            <van-icon v-if="seat === selectedSeat" class="mobile-seat-check" name="success"></van-icon>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- 缩放控制按钮 -->
-        <div class="zoom-controls">
-            <van-button type="default" size="mini" @click="zoomOut" :disabled="currentScale <= 0.5">
-                <van-icon name="minus" size="12" />
-                缩小
-            </van-button>
-            <div class="zoom-level">
-                <van-icon name="search" size="12" />
-                {{ Math.round(currentScale * 100) }}%
-            </div>
-            <van-button type="default" size="mini" @click="resetZoom">
-                <van-icon name="replay" size="12" />
-                重置
-            </van-button>
-            <van-button type="default" size="mini" @click="zoomIn" :disabled="currentScale >= 3">
-                <van-icon name="plus" size="12" />
-                放大
-            </van-button>
-        </div>
-
-        <!-- 我的座位信息 -->
-        <div v-if="myCurrentSeat" class="mobile-my-seat-info" style="margin: 16px;">
-            <div style="margin-bottom: 4px;">我的座位</div>
-            <div class="seat-info">{{ myCurrentSeat.rowNumber }}-{{ myCurrentSeat.colNumber }} (第{{ myCurrentSeat.rowNumber }}排第{{
-                myCurrentSeat.colNumber }}列)
-            </div>
-        </div>
     </div>
 
     <!-- 底部操作面板 -->
-    <div class="mobile-bottom-panel">
-        <div v-if="selectedSeat" class="mobile-selected-info">
-            <div style="margin-bottom: 4px;">已选择座位</div>
-            <div class="seat-info">{{ selectedSeat.rowNumber }}-{{ selectedSeat.colNumber }} (第{{ selectedSeat.rowNumber }}排第{{
-                selectedSeat.colNumber }}列)
+    <div class="mobile-bottom-panel" :class="{'is-empty': !selectedSeat}">
+        <div class="mobile-bottom-selected">
+            <div class="mobile-bottom-summary">
+                <template v-if="myCurrentSeat">{{ myCurrentSeat.rowNumber }}排{{ myCurrentSeat.colNumber }}列(已选)</template>
+                <template v-else>未选择</template>
             </div>
-        </div>
-
-        <div style="display: flex; gap: 22px">
-            <van-button type="info" block @click="showMeetingModal = true">
-                切换会议
-            </van-button>
-
-            <van-button type="info" block :disabled="!selectedSeat || submitting"
-                        :loading="submitting" @click="confirmSelection">
-                {{ submitting ? '提交中...' : '确认选座' }}
+            <van-button class="mobile-confirm-button" type="info" block :disabled="!selectedSeat"
+                        @click="openSeatConfirm">
+                <template v-if="selectedSeat">确认换座 {{ selectedSeat.rowNumber }}排{{ selectedSeat.colNumber }}列</template>
+                <template v-else>{{ myCurrentSeat ? '点击座位更新' : '请先选择座位' }}</template>
             </van-button>
         </div>
     </div>
+
+    <van-action-sheet v-model="showSeatConfirm" class="seat-confirm-sheet" safe-area-inset-bottom>
+        <div class="seat-confirm-content">
+            <div class="seat-confirm-header">
+                <span>已选座位</span>
+                <button type="button" class="seat-confirm-clear" @click="clearSelectedSeat">清空</button>
+            </div>
+            <div class="seat-confirm-value" v-if="selectedSeat">
+                {{ selectedSeat.rowNumber }}排{{ selectedSeat.colNumber }}座
+            </div>
+            <div class="seat-confirm-tip">请确认座位信息</div>
+            <van-button class="seat-confirm-submit" type="danger" block :loading="submitting"
+                        @click="confirmSelection">确认选座</van-button>
+        </div>
+    </van-action-sheet>
 </div>
 
 <script nonce="${cspNonce!}">
@@ -700,16 +1477,17 @@ layout("/layouts/platform_h5.html"){
         el: '#app',
         data() {
             return {
-                meetings: [], // 会议列表
-                selectedMeetingId: null, // 选中的会议ID
-                showMeetingModal: true, // 显示会议选择弹窗
                 meeting: null,
                 seats: [],
                 selectedSeat: null,
                 myCurrentSeat: null,
+                showSeatConfirm: false,
+                currentScale: 1,
+                pinchStartDistance: 0,
+                pinchStartScale: 1,
+                isPinching: false,
                 loading: false,
                 submitting: false,
-                currentScale: 1, // 当前缩放比例
                 seatConfig: {
                     rows: 8,
                     cols: 12
@@ -717,72 +1495,105 @@ layout("/layouts/platform_h5.html"){
             }
         },
         mounted() {
-            this.loadMeetings();
-            this.$nextTick(() => {
-                this.initPinchZoom();
-            });
+            this.loadMeeting()
         },
         computed: {
-            gridStyle() {
+            aisleStartColumn() {
+                return Math.floor(this.seatConfig.cols / 2) + 1
+            },
+            seatRows() {
+                const seatMap = {}
+                this.seats.forEach((seat) => {
+                    seatMap[seat.rowNumber + '-' + seat.colNumber] = seat
+                })
+                return Array.from({length: this.seatConfig.rows}, (_, rowIndex) => ({
+                    rowNumber: rowIndex + 1,
+                    seats: Array.from({length: this.seatConfig.cols}, (_, colIndex) => {
+                        return seatMap[(rowIndex + 1) + '-' + (colIndex + 1)] || null
+                    })
+                }))
+            },
+            seatMatrixStyle() {
+                const scale = this.currentScale
                 return {
-                    'grid-template-columns': 'repeat(' + this.seatConfig.cols + ', 1fr)'
+                    '--seat-size': (28 * scale) + 'px',
+                    '--seat-height': (30 * scale) + 'px',
+                    '--seat-icon-size': (25 * scale) + 'px',
+                    '--seat-gap': (5 * scale) + 'px',
+                    '--aisle-gap': (13 * scale) + 'px',
+                    '--seat-row-height': (39 * scale) + 'px',
+                    '--row-label-width': (29 * scale) + 'px'
                 }
             }
         },
         methods: {
-            // 加载会议列表
-            loadMeetings() {
+            handleBack() {
+                historyBack()
+            },
+            loadMeeting() {
+                const meetingId = new URLSearchParams(window.location.search).get('meetingId')
+                if (!meetingId) {
+                    this.$toast('缺少会议参数')
+                    this.$pjaxReplace('/platform/guildHall/metting/h5')
+                    return
+                }
+
+                const loading = createListLoading()
+                this.loading = true
                 $.post('/platform/guildHall/meeting/selectList').then(res => {
                     if (res.code === 0) {
-                        this.meetings = res.data
+                        this.meeting = (res.data || []).find((item) => String(item.id) === String(meetingId))
+                        if (this.meeting) {
+                            this.loadSeats(loading)
+                            return
+                        }
+                    }
+                    this.$toast.fail(res.msg || '会议不存在或已结束')
+                    this.$pjaxReplace('/platform/guildHall/metting/h5')
+                }).always(() => {
+                    if (!this.meeting) {
+                        this.loading = false
+                        loading.clear()
                     }
                 })
             },
-
-            // 选择会议
-            selectMeeting(meeting) {
-                this.selectedMeetingId = meeting.id;
+            formatMeetingRange(item) {
+                if (!item) return ''
+                const start = item.startTime ? this.$moment(item.startTime).format('YYYY-MM-DD HH:mm') : '--'
+                const end = item.endTime ? this.$moment(item.endTime).format('YYYY-MM-DD HH:mm') : '--'
+                return start + ' 至 ' + end
             },
-
-            // 确认会议选择
-            confirmMeetingSelection() {
-                if (!this.selectedMeetingId) {
-                    this.$toast('请选择一个会议');
-                    return;
-                }
-
-                const selectedMeeting = this.meetings.find(m => m.id === this.selectedMeetingId);
-                if (selectedMeeting) {
-                    this.meeting = selectedMeeting
-                    this.loadSeats();
-                }
-            },
-
             // 查询选座情况
-            async loadSeats() {
+            async loadSeats(loading = createListLoading()) {
                 if (!this.meeting.id) {
+                    loading.clear()
                     return;
                 }
 
                 this.loading = true;
 
-                const {
-                    code,
-                    data,
-                    msg
-                } = await $.post('/platform/guildHall/selectSeat/loadSeats', {meetingId: this.meeting.id})
-                if (code === 0) {
-                    this.seats = data;
-                    this.myCurrentSeat = this.seats.find(seat => seat.isMine);
-                    // 根据现有数据计算行列数
-                    const maxRow = Math.max(...this.seats.map(s => parseInt(s.rowNumber)))
-                    const maxCol = Math.max(...this.seats.map(s => parseInt(s.colNumber)))
-                    this.seatConfig.rows = maxRow
-                    this.seatConfig.cols = maxCol
+                try {
+                    const {
+                        code,
+                        data,
+                        msg
+                    } = await $.post('/platform/guildHall/selectSeat/loadSeats', {meetingId: this.meeting.id})
+                    if (code === 0) {
+                        this.seats = Array.isArray(data) ? data : []
+                        this.myCurrentSeat = this.seats.find(seat => seat.isMine);
+                        this.$set(this.meeting, 'availableCount', this.seats.filter((seat) => {
+                            return seat.enable && !seat.isOccupied
+                        }).length)
+                        this.$set(this.meeting, 'hasMySeat', !!this.myCurrentSeat)
+                        if (this.seats.length) {
+                            this.seatConfig.rows = Math.max(...this.seats.map(s => parseInt(s.rowNumber)))
+                            this.seatConfig.cols = Math.max(...this.seats.map(s => parseInt(s.colNumber)))
+                        }
+                    }
+                } finally {
+                    this.loading = false
+                    loading.clear()
                 }
-
-                this.loading = false
-                this.showMeetingModal = false;
             },
 
             selectSeat(seat) {
@@ -801,13 +1612,30 @@ layout("/layouts/platform_h5.html"){
                     return;
                 }
 
-                this.selectedSeat = seat;
+                this.selectedSeat = this.selectedSeat === seat ? null : seat
+                if (this.selectedSeat) {
+                    this.$toast({
+                        message: '已选 ' + seat.rowNumber + '排' + seat.colNumber + '座',
+                        position: 'bottom',
+                        duration: 1200
+                    })
+                }
                 // 添加触觉反馈
                 if (navigator.vibrate) {
                     navigator.vibrate(50);
                 }
             },
 
+            openSeatConfirm() {
+                if (!this.selectedSeat) return
+                this.showSeatConfirm = true
+            },
+
+            clearSelectedSeat() {
+                this.selectedSeat = null
+                this.showSeatConfirm = false
+            },
+
             async confirmSelection() {
                 if (!this.selectedSeat) {
                     this.$toast('请先选择座位');
@@ -824,8 +1652,9 @@ layout("/layouts/platform_h5.html"){
 
                 if (code === 0) {
                     this.$toast.success("选座成功")
+                    this.showSeatConfirm = false
                     this.selectedSeat = null;
-                    this.loadSeats();
+                    this.loadSeats()
                 } else {
                     this.$toast.fail(msg || '选座失败');
                 }
@@ -853,51 +1682,36 @@ layout("/layouts/platform_h5.html"){
                 return new Date(time).toLocaleString('zh-CN');
             },
 
-            // 放大
-            zoomIn() {
-                if (this.currentScale < 3) {
-                    this.currentScale = Math.min(3, this.currentScale + 0.2);
-                    this.applyZoom();
+            getTouchDistance(touches) {
+                const x = touches[0].clientX - touches[1].clientX
+                const y = touches[0].clientY - touches[1].clientY
+                return Math.sqrt(x * x + y * y)
+            },
+
+            handleSeatTouchStart(event) {
+                if (event.touches.length !== 2) {
+                    return
                 }
+                this.isPinching = true
+                this.pinchStartDistance = this.getTouchDistance(event.touches)
+                this.pinchStartScale = this.currentScale
             },
 
-            // 缩小
-            zoomOut() {
-                if (this.currentScale > 0.5) {
-                    this.currentScale = Math.max(0.5, this.currentScale - 0.2);
-                    this.applyZoom();
+            handleSeatTouchMove(event) {
+                if (!this.isPinching || event.touches.length !== 2 || !this.pinchStartDistance) {
+                    return
                 }
+                event.preventDefault()
+                const distance = this.getTouchDistance(event.touches)
+                const scale = this.pinchStartScale * (distance / this.pinchStartDistance)
+                this.currentScale = Math.min(1.4, Math.max(0.8, Number(scale.toFixed(2))))
             },
 
-            // 重置缩放
-            resetZoom() {
-                this.currentScale = 1;
-                this.applyZoom();
-            },
-
-            // 应用缩放
-            applyZoom() {
-                const seats = document.querySelectorAll('.mobile-seat');
-                const seatGrid = document.querySelector('.mobile-seat-grid');
-
-                seats.forEach(seat => {
-                    seat.style.transform = 'scale(' + this.currentScale + ')';
-                    seat.style.transformOrigin = 'center center';
-                    seat.style.transition = 'transform 0.2s ease';
-                });
-
-                // 动态调整网格间距
-                if (seatGrid) {
-                    const baseGap = 4;
-                    const adjustedGap = baseGap * this.currentScale * 5;
-                    seatGrid.style.gap = adjustedGap + 'px';
+            handleSeatTouchEnd(event) {
+                if (event.touches.length < 2) {
+                    this.isPinching = false
+                    this.pinchStartDistance = 0
                 }
-            },
-
-            // 初始化双指缩放功能（已替换为按钮控制）
-            initPinchZoom() {
-                // 双指缩放功能已被按钮控制替代，保留此方法以避免错误
-                console.log('双指缩放功能已替换为按钮控制');
             }
         }
     })
diff --git a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/list.html b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/list.html
new file mode 100644
index 00000000..db14f887
--- /dev/null
+++ b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/guildhall/selectSeat/list.html
@@ -0,0 +1,612 @@
+<!--#
+layout("/layouts/platform_h5.html"){
+#-->
+<style>
+    html,
+    body,
+    #app {
+        height: 100%;
+        min-height: 100%;
+        background: #f3f7fd;
+    }
+
+    [v-cloak] {
+        display: none;
+    }
+
+    #app .van-nav-bar {
+        background: #fff;
+    }
+
+    #app .van-nav-bar__title {
+        color: #17233d;
+        font-size: 17px;
+        font-weight: 600;
+    }
+
+    #app .van-nav-bar__text,
+    #app .van-nav-bar .van-icon {
+        color: #1677ff;
+    }
+
+    .meeting-list-page {
+        display: flex;
+        height: calc(100vh - 46px);
+        min-height: calc(100vh - 46px);
+        padding: 12px 12px 18px;
+        flex-direction: column;
+        background: #f3f7fd;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .meeting-list-hero {
+        position: relative;
+        height: 132px;
+        margin: 0;
+        overflow: hidden;
+        border-radius: 8px;
+        background: #1677e9;
+        box-shadow: 0 4px 14px rgba(24, 104, 196, .14);
+    }
+
+    .meeting-list-hero__image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .meeting-list-hero__copy {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        z-index: 1;
+        width: 68%;
+        padding-left: 18px;
+        flex-direction: column;
+        justify-content: center;
+        color: #fff;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .86) 52%, rgba(22, 112, 232, 0) 100%);
+    }
+
+    .meeting-list-hero__title {
+        font-size: 25px;
+        font-weight: 700;
+        line-height: 34px;
+    }
+
+    .meeting-list-hero__subtitle {
+        margin-top: 5px;
+        font-size: 12px;
+        line-height: 18px;
+        opacity: .92;
+    }
+
+    .meeting-list-toolbar {
+        padding: 10px 0 1px;
+        background: #f3f7fd;
+    }
+
+    .van-sticky--fixed .meeting-list-toolbar {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .meeting-list-search-row {
+        display: block;
+    }
+
+    .meeting-list-search {
+        flex: 1;
+        min-width: 0;
+        margin: 0 0 10px;
+        padding: 0;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 3px 12px rgba(43, 73, 112, .06);
+    }
+
+    .meeting-list-search .van-search__content {
+        height: 40px;
+        padding-left: 12px;
+        align-items: center;
+        background: #fff;
+        border-radius: 8px;
+    }
+
+    .meeting-list-search .van-field__control {
+        color: #263548;
+        font-size: 14px;
+    }
+
+    .meeting-list-search .van-field__control::placeholder {
+        color: #a7b0bf;
+    }
+
+    .meeting-mine-button {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        height: 38px;
+        padding: 0 10px;
+        color: #37648e;
+        font-size: 12px;
+        background: #fff;
+        border: 1px solid #dce8f5;
+        border-radius: 6px;
+    }
+
+    .meeting-mine-button.is-active {
+        color: #1677ff;
+        background: #edf5ff;
+        border-color: #8fc2ff;
+    }
+
+    .meeting-status-tabs {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        margin-top: 10px;
+    }
+
+    .meeting-status-tab {
+        position: relative;
+        height: 40px;
+        padding: 0;
+        color: #667085;
+        font-size: 13px;
+        background: transparent;
+        border: 0;
+    }
+
+    .meeting-status-tab.is-active {
+        color: #1677ff;
+        font-weight: 600;
+    }
+
+    .meeting-status-tab.is-active::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 24px;
+        height: 3px;
+        background: #1677ff;
+        border-radius: 2px;
+        transform: translateX(-50%);
+        content: '';
+    }
+
+    .meeting-list-content {
+        flex: 1;
+        min-height: 0;
+        padding: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .meeting-list-content .van-pull-refresh,
+    .meeting-list-content .van-pull-refresh__track,
+    .meeting-list-content .van-list {
+        min-height: 100%;
+    }
+
+    .meeting-list-card {
+        position: relative;
+        display: flex;
+        min-height: 214px;
+        margin: 0 4px 12px;
+        padding: 18px 16px;
+        flex-direction: column;
+        overflow: hidden;
+        background: #fff;
+        border: 0;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
+        box-sizing: border-box;
+        transition: transform .15s ease;
+    }
+
+    .meeting-list-card.is-current {
+        border-color: #4096ff;
+        box-shadow: 0 3px 10px rgba(22, 119, 255, .12);
+    }
+
+    .meeting-list-card:active {
+        transform: scale(.99);
+        box-shadow: 0 4px 16px rgba(25, 137, 250, .08);
+    }
+
+    .meeting-card-status {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 3px 9px;
+        color: #fff;
+        font-size: 10px;
+        line-height: 17px;
+        background: #aab2bd;
+        border-radius: 6px 0 6px 0;
+    }
+
+    .meeting-card-status.is-current {
+        background: #27ae7a;
+    }
+
+    .meeting-card-status.is-upcoming {
+        background: #1677ff;
+    }
+
+    .meeting-card-status.is-ended {
+        background: #a8adb5;
+    }
+
+    .meeting-card-main {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .meeting-card-title {
+        margin-bottom: 12px;
+        overflow: hidden;
+        color: #17233d;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .meeting-card-location {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        gap: 9px;
+        overflow: visible;
+        color: #17233d;
+    }
+
+    .meeting-card-location .van-icon {
+        flex: none;
+        display: inline-flex;
+        width: 30px;
+        height: 30px;
+        align-items: center;
+        justify-content: center;
+        color: #1677ff;
+        font-size: 16px;
+        background: #e8f3ff;
+        border-radius: 50%;
+    }
+
+    .meeting-card-location__value {
+        overflow: visible;
+        color: #17233d;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 19px;
+        white-space: normal;
+        word-break: break-all;
+    }
+
+    .meeting-card-time {
+        display: flex;
+        min-height: 86px;
+        padding: 12px 12px 10px;
+        align-items: center;
+        justify-content: space-between;
+        background: #f6faff;
+        border-radius: 8px;
+        box-sizing: border-box;
+    }
+
+    .meeting-card-time__item {
+        flex: 0 0 92px;
+        min-width: 0;
+    }
+
+    .meeting-card-time__item:last-child {
+        text-align: right;
+    }
+
+    .meeting-card-date {
+        color: #73849b;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .meeting-card-hour {
+        margin-top: 4px;
+        color: #17233d;
+        font-size: 25px;
+        font-weight: 600;
+        line-height: 32px;
+    }
+
+    .meeting-card-time__label {
+        margin-top: 1px;
+        color: #9aa7b8;
+        font-size: 11px;
+        line-height: 16px;
+    }
+
+    .meeting-card-time__arrow {
+        position: relative;
+        flex: 1;
+        height: 1px;
+        margin: 0 12px;
+        background: #cfdae8;
+    }
+
+    .meeting-card-time__arrow::after {
+        position: absolute;
+        top: 50%;
+        right: -1px;
+        width: 0;
+        height: 0;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        border-left: 18px solid #aab8c8;
+        transform: translateY(-50%);
+        content: '';
+    }
+
+    .meeting-card-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 13px;
+        padding: 12px;
+        background: #f4f9ff;
+        border: 1px solid #d9eaff;
+        border-radius: 8px;
+        box-sizing: border-box;
+    }
+
+    .meeting-card-available {
+        margin-top: 9px;
+        color: #1677ff;
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    .meeting-card-side {
+        display: flex;
+        flex: none;
+        justify-content: flex-end;
+        margin-left: 10px;
+    }
+
+    .meeting-card-status.is-ended ~ .meeting-card-main .meeting-card-available {
+        color: #8c939e;
+    }
+
+    .meeting-card-action {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        height: 32px;
+        min-width: 78px;
+        padding: 0 10px;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 32px;
+        white-space: nowrap;
+        background: linear-gradient(135deg, #1989fa 0%, #0d6efd 100%);
+        border: 0;
+        border-radius: 18px;
+        box-shadow: 0 4px 12px rgba(25, 137, 250, .22);
+    }
+
+    .meeting-card-action .van-icon,
+    .meeting-card-action i {
+        font-size: 13px;
+    }
+
+    .mobile-loading {
+        display: flex;
+        justify-content: center;
+        padding: 80px 0;
+        color: #8a96a8;
+    }
+
+    .meeting-list-empty {
+        display: flex;
+        min-height: 310px;
+        padding: 28px 18px 36px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .meeting-list-empty img {
+        display: block;
+        width: 82%;
+        max-width: 270px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .meeting-list-empty__title {
+        margin-top: 12px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 600;
+    }
+
+    .meeting-list-empty__hint {
+        margin-top: 5px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
+    }
+</style>
+
+<div id="app" v-cloak>
+    <van-nav-bar title="会议列表" left-text="返回" left-arrow
+                 @click-left="historyBack" placeholder fixed></van-nav-bar>
+
+    <div class="meeting-list-page">
+        <section class="meeting-list-hero">
+            <img class="meeting-list-hero__image"
+                 src="/assets/mobile/img/democratic/teachercongress/meeting-list-hero.png" alt="会议选座插画">
+            <div class="meeting-list-hero__copy">
+                <div class="meeting-list-hero__title">会议选座</div>
+                <div class="meeting-list-hero__subtitle">查看会议安排并选择座位</div>
+            </div>
+        </section>
+
+        <van-sticky :offset-top="46">
+            <div class="meeting-list-toolbar">
+                <div class="meeting-list-search-row">
+                    <van-search v-model="meetingKeyword" class="meeting-list-search" placeholder="搜索会议名称"
+                                :show-action="false" input-align="left" shape="round" clearable
+                                @search="doSearch" @clear="doSearch"></van-search>
+                </div>
+            </div>
+        </van-sticky>
+
+        <div class="meeting-list-content">
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                <van-list v-model="listLoading" :finished="finished" :immediate-check="false"
+                          :finished-text="meetings.length ? '没有更多会议了' : ''" @load="onLoad">
+                    <div v-for="item in meetings" :key="item.id" class="meeting-list-card"
+                        @click="enterMeeting(item)">
+                        <div class="meeting-card-main">
+                            <div class="meeting-card-title">{{ item.name }}</div>
+                            <div class="meeting-card-time">
+                                <div class="meeting-card-time__item">
+                                    <div class="meeting-card-date">{{ formatMeetingDate(item.startTime) }}</div>
+                                    <div class="meeting-card-hour">{{ formatMeetingHour(item.startTime) }}</div>
+                                    <div class="meeting-card-time__label">会议开始</div>
+                                </div>
+                                <div class="meeting-card-time__arrow"></div>
+                                <div class="meeting-card-time__item">
+                                    <div class="meeting-card-date">{{ formatMeetingDate(item.endTime) }}</div>
+                                    <div class="meeting-card-hour">{{ formatMeetingHour(item.endTime) }}</div>
+                                    <div class="meeting-card-time__label">会议结束</div>
+                                </div>
+                            </div>
+                            <div class="meeting-card-bottom">
+                                <div class="meeting-card-location">
+                                    <van-icon name="location"></van-icon>
+                                    <div class="meeting-card-location__text">
+                                        <div class="meeting-card-location__value">{{ item.address || '会议地点待定' }}</div>
+                                    </div>
+                                </div>
+                                <div class="meeting-card-side">
+                                    <button type="button" class="meeting-card-action">
+                                        <i class="fa fa-sign-in"></i>去选座
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </van-list>
+                <div v-if="!listLoading && meetings.length === 0" class="meeting-list-empty">
+                    <img src="/assets/mobile/img/democratic/teachercongress/delegate-read-empty.png" alt="暂无会议插画">
+                    <div class="meeting-list-empty__title">暂无进行中的会议</div>
+                    <div class="meeting-list-empty__hint">当前没有可选座的会议安排</div>
+                </div>
+            </van-pull-refresh>
+        </div>
+    </div>
+</div>
+
+<script nonce="${cspNonce!}">
+    const vue = new Vue({
+        el: '#app',
+        data() {
+            return {
+                meetings: [],
+                meetingKeyword: '',
+                listLoading: false,
+                refreshing: false,
+                finished: false,
+                pageNumber: 1,
+                pageSize: 10,
+                totalCount: 0
+            }
+        },
+        mounted() {
+            this.loadMeetings(true)
+        },
+        methods: {
+            historyBack,
+            loadMeetings(reset) {
+                const loading = createListLoading()
+                if (reset) {
+                    this.pageNumber = 1
+                    this.totalCount = 0
+                    this.meetings = []
+                    this.finished = false
+                }
+                this.listLoading = true
+                $.post('/platform/guildHall/meeting/selectPage', {
+                    pageNumber: this.pageNumber,
+                    pageSize: this.pageSize,
+                    searchKeyword: String(this.meetingKeyword || '').trim()
+                }).then((res) => {
+                    if (res.code === 0) {
+                        const pageData = res.data || {}
+                        const list = Array.isArray(pageData.list) ? pageData.list : []
+                        this.meetings = reset ? list : this.meetings.concat(list)
+                        this.totalCount = pageData.totalCount || 0
+                        this.finished = this.meetings.length >= this.totalCount
+                        if (!this.finished) {
+                            this.pageNumber++
+                        }
+                    } else {
+                        this.$toast.fail(res.msg || '会议加载失败')
+                    }
+                }).always(() => {
+                    this.listLoading = false
+                    this.refreshing = false
+                    loading.clear()
+                })
+            },
+            onLoad() {
+                if (!this.finished) {
+                    this.loadMeetings(false)
+                }
+            },
+            onRefresh() {
+                this.refreshing = true
+                this.loadMeetings(true)
+            },
+            doSearch() {
+                this.loadMeetings(true)
+            },
+            formatMeetingRange(item) {
+                const start = item.startTime ? this.$moment(item.startTime).format('YYYY-MM-DD HH:mm') : '--'
+                const end = item.endTime ? this.$moment(item.endTime).format('YYYY-MM-DD HH:mm') : '--'
+                return start + ' 至 ' + end
+            },
+            formatMeetingDate(time) {
+                return time ? this.$moment(time).format('YYYY年MM月DD日') : '--'
+            },
+            formatMeetingHour(time) {
+                return time ? this.$moment(time).format('HH:mm') : '--'
+            },
+            enterMeeting(item) {
+                this.$pjaxReplace('/platform/guildHall/selectSeat/h5?meetingId=' + encodeURIComponent(item.id))
+            }
+        }
+    })
+</script>
+
+<!--#
+}
+#-->