diff --git a/src/main/resources/static/assets/mobile/img/benefit/welfare-empty.png b/src/main/resources/static/assets/mobile/img/benefit/welfare-empty.png
new file mode 100644
index 00000000..dbe0c4fc
Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/benefit/welfare-empty.png differ
diff --git a/src/main/resources/static/components/plugins/sysSignature/h5Index.vue b/src/main/resources/static/components/plugins/sysSignature/h5Index.vue
index 6c78cdbf..2354af19 100644
--- a/src/main/resources/static/components/plugins/sysSignature/h5Index.vue
+++ b/src/main/resources/static/components/plugins/sysSignature/h5Index.vue
@@ -1,13 +1,28 @@
 <template>
     <div class="h5-signature">
-        <div v-if="!showSignaturePanel" class="main-panel">
-            <slot v-if="$slots.default"></slot>
-            <template v-else>
-                <van-button @click="openSignature" class="open-button" size="middle" plain native-type="button">打开签字板</van-button>
-                <van-image :src="signatureContent"></van-image>
-            </template>
+        <slot v-if="$slots.default"></slot>
+        <div v-else class="signature-entry">
+            <!-- 未签名时展示统一空状态和入口，组件放入 van-field 时仍保持完整宽度。 -->
+            <div v-if="!signatureContent" class="signature-entry-panel">
+                <van-icon class="signature-placeholder-icon" name="edit"></van-icon>
+                <div class="signature-placeholder-text">请完成本人手写签名</div>
+                <van-button @click="openSignature" class="signature-open-button" block plain
+                            native-type="button">进入签字板</van-button>
+            </div>
+
+            <!-- 已签名时直接预览结果，并在下方提供统一的重新签名入口。 -->
+            <div v-else class="signature-entry-panel signature-entry-panel--completed">
+                <van-image :src="signatureContent" class="signature-preview" fit="contain"></van-image>
+                <div class="signature-completed-text">
+                    <van-icon name="passed"></van-icon>
+                    <span>已完成本人手写签名</span>
+                </div>
+            </div>
+            <button v-if="signatureContent" @click="openSignature" class="signature-reset-button"
+                    type="button">重新签名</button>
         </div>
-        <van-popup v-model="showSignaturePanel" :style="{ height: '100vh', width: '100vw' }">
+        <van-popup v-model="showSignaturePanel" :close-on-click-overlay="false"
+                   :style="{ height: '100vh', width: '100vw' }" @close="handleSignaturePopupClose">
             <signature @save="save"></signature>
         </van-popup>
     </div>
@@ -36,14 +51,39 @@ module.exports = {
     data() {
         return {
             signatureContent: null,
-            showSignaturePanel: false
+            showSignaturePanel: false,
+            historyLayerName: "",
+            historyLayerUnsubscribe: null
         }
     },
     methods: {
+        /**
+         * 打开签字板。
+         * 无请求参数；优先向全局历史栈增加当前签字弹层，返回值为空。
+         */
         openSignature() {
+            const manager = window.h5HistoryLayerManager
+            if (manager && manager.open(this.historyLayerName)) return
             this.showSignaturePanel = true
         },
 
+        // 保存成功或业务主动关闭时同步回退签字弹层历史，管理器不可用时直接关闭 Popup。
+        closeSignaturePanel() {
+            const manager = window.h5HistoryLayerManager
+            if (manager && manager.close(this.historyLayerName)) return
+            this.showSignaturePanel = false
+        },
+
+        // Vant 组件自行关闭时仅处理仍位于栈顶的签字层，避免返回同步触发重复 history.back。
+        handleSignaturePopupClose() {
+            const manager = window.h5HistoryLayerManager
+            if (!manager) return
+            const stack = manager.stack
+            if (stack[stack.length - 1] === this.historyLayerName) {
+                manager.close(this.historyLayerName)
+            }
+        },
+
         save(signature) {
             const file = this.base64ToFile(signature, "signature.png")
             const formData = new FormData()
@@ -59,11 +99,20 @@ module.exports = {
                 })
                 .then((res) => {
                     if (res.code === 0) {
-                        alert("保存成功")
-                        this.showSignaturePanel = false
+                        // 保存成功后使用项目统一的 Vant 反馈，避免浏览器原生弹框阻塞签字流程。
+                        this.$toast.success({
+                            message: "签名保存成功",
+                            duration: 1500,
+                            forbidClick: true
+                        })
                         this.$emit("input", res.data)
+                        this.closeSignaturePanel()
                     } else {
-                        alert("保存失败")
+                        // 接口返回失败时保留签字板，方便用户重试。
+                        this.$toast.fail({
+                            message: res.msg || "签名保存失败，请重试",
+                            duration: 2000
+                        })
                     }
                 })
         },
@@ -86,27 +135,114 @@ module.exports = {
             return new File([blob], filename, { type: contentType })
         }
     },
-    created() {}
+    mounted() {
+        const manager = window.h5HistoryLayerManager
+        if (!manager || typeof manager.ensureRegistered !== "function" || typeof manager.subscribe !== "function") return
+
+        // 每个组件实例使用唯一弹层名称，同一页面存在多个签字组件时互不影响。
+        this.historyLayerName = "h5-signature-" + this._uid
+        manager.ensureRegistered("h5-signature-page-" + window.location.pathname + window.location.search)
+        this.historyLayerUnsubscribe = manager.subscribe((stack) => {
+            this.showSignaturePanel = stack.includes(this.historyLayerName)
+        })
+    },
+    beforeDestroy() {
+        if (typeof this.historyLayerUnsubscribe === "function") {
+            this.historyLayerUnsubscribe()
+        }
+    }
 }
 </script>
 
 <style scoped>
 .h5-signature {
     width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
 }
 
-.main-panel {
-    position: relative;
-    flex-direction: column-reverse;
+.signature-entry {
+    width: 100%;
     display: flex;
-    row-gap: 10px;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
 }
 
-.main-panel .van-image {
+.signature-entry-panel {
+    width: 100%;
     min-height: 150px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: 1px dashed #dfe6ef;
+    border-radius: 9px;
+    background: #fbfcfe;
 }
 
-.main-panel .open-button {
-    color: var(--color-primary);
+.signature-placeholder-icon {
+    margin-bottom: 6px;
+    color: #c7cfda;
+    font-size: 38px;
+}
+
+.signature-placeholder-text {
+    margin-bottom: 12px;
+    color: #9aa4b2;
+    font-size: 13px;
+    line-height: 20px;
+}
+
+.signature-open-button {
+    width: 100%;
+    height: 40px;
+    color: var(--color-primary, #1989fa);
+    font-size: 15px;
+    font-weight: 500;
+    background: linear-gradient(90deg, #f0f7ff, #f5f9ff);
+    border-color: #d8e9ff;
+    border-radius: 7px;
+}
+
+.signature-entry-panel--completed {
+    min-height: 150px;
+    justify-content: space-between;
+}
+
+.signature-preview {
+    width: 100%;
+    height: 96px;
+    background: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.signature-completed-text {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #5f6b7a;
+    font-size: 13px;
+}
+
+.signature-completed-text .van-icon {
+    margin-right: 5px;
+    color: #28a745;
+    font-size: 16px;
+}
+
+.signature-reset-button {
+    align-self: center;
+    margin-top: 10px;
+    padding: 3px 12px;
+    color: var(--color-primary, #1989fa);
+    font-size: 14px;
+    line-height: 22px;
+    background: transparent;
+    border: 0;
 }
 </style>
diff --git a/src/main/resources/static/components/plugins/sysSignature/index.vue b/src/main/resources/static/components/plugins/sysSignature/index.vue
index 4a8ae750..056717ab 100644
--- a/src/main/resources/static/components/plugins/sysSignature/index.vue
+++ b/src/main/resources/static/components/plugins/sysSignature/index.vue
@@ -57,7 +57,16 @@ module.exports = {
         },
         save() {
             if (signature.isEmpty()) {
-                alert("请签字后再保存")
+                // H5 页面使用统一的 Vant 提示；未加载 Vant 的独立签字页保留原生提示作为兼容兜底。
+                if (typeof this.$toast === "function") {
+                    this.$toast({
+                        message: "请先完成手写签名",
+                        icon: "edit",
+                        duration: 2000
+                    })
+                } else {
+                    alert("请先完成手写签名")
+                }
                 return
             }
             // const png = signature.getPNG()
diff --git a/src/main/resources/views/layouts/platform_h5.html b/src/main/resources/views/layouts/platform_h5.html
index b3f97423..4299bde3 100644
--- a/src/main/resources/views/layouts/platform_h5.html
+++ b/src/main/resources/views/layouts/platform_h5.html
@@ -95,6 +95,152 @@
         // toast多例模式
         vant.Toast.allowMultiple()
 
+        /**
+         * H5 弹层历史管理器。
+         * 页面通过 register 注册页面标识和弹层状态回调，通过 open/close/closeAll 维护浏览器历史；
+         * popstate 返回 true 表示本次返回仅用于同步弹层，PJAX 不再执行页面跳转。
+         */
+        window.h5HistoryLayerManager = {
+            pageKey: "",
+            stack: [],
+            onChange: null,
+            afterClose: null,
+            subscribers: [],
+            pendingNavigation: null,
+            register(pageKey, onChange) {
+                const currentState = window.history.state || {}
+                this.pageKey = pageKey
+                this.stack = []
+                this.onChange = onChange
+                this.afterClose = null
+                this.pendingNavigation = null
+                window.history.replaceState({
+                    ...currentState,
+                    url: currentState.url || window.location.href,
+                    h5HistoryLayerPage: pageKey,
+                    h5HistoryLayerStack: []
+                }, "", window.location.href)
+                this.notify()
+            },
+            /**
+             * 确保当前页面已初始化弹层历史。
+             * pageKey 传当前页面的稳定标识；返回 boolean，true 表示已有或已完成页面注册。
+             */
+            ensureRegistered(pageKey) {
+                if (this.pageKey) return true
+                this.register(pageKey, null)
+                return true
+            },
+            /**
+             * 订阅全局弹层栈变化。
+             * onChange 接收当前弹层名称数组；返回 Function 类型的注销方法，组件销毁时必须调用。
+             */
+            subscribe(onChange) {
+                if (typeof onChange !== "function") return () => {}
+                this.subscribers.push(onChange)
+                onChange(this.stack.slice())
+                return () => {
+                    const index = this.subscribers.indexOf(onChange)
+                    if (index !== -1) this.subscribers.splice(index, 1)
+                }
+            },
+            unregister(pageKey) {
+                if (pageKey && this.pageKey !== pageKey) return
+                this.reset()
+            },
+            open(layerName) {
+                if (!this.pageKey || !layerName) return false
+                const currentLayer = this.stack[this.stack.length - 1]
+                if (currentLayer === layerName) return true
+                const nextStack = this.stack.concat(layerName)
+                window.history.pushState({
+                    ...(window.history.state || {}),
+                    url: window.location.href,
+                    h5HistoryLayerPage: this.pageKey,
+                    h5HistoryLayerStack: nextStack
+                }, "", window.location.href)
+                this.stack = nextStack
+                this.notify()
+                return true
+            },
+            close(layerName, afterClose = null) {
+                if (!this.stack.length) {
+                    if (typeof afterClose === "function") afterClose()
+                    return false
+                }
+                const currentLayer = this.stack[this.stack.length - 1]
+                if (layerName && currentLayer !== layerName) return false
+                this.afterClose = afterClose
+                window.history.back()
+                return true
+            },
+            closeAll(afterClose = null) {
+                if (!this.stack.length) {
+                    if (typeof afterClose === "function") afterClose()
+                    return false
+                }
+                this.afterClose = afterClose
+                window.history.go(-this.stack.length)
+                return true
+            },
+            /**
+             * 关闭当前页面全部弹层后跳转业务页面。
+             * url 传目标页面地址，data 传可选的 PJAX 请求参数；返回 boolean，true 表示已接管本次跳转。
+             */
+            closeAllAndNavigate(url, data = null) {
+                if (!url) return false
+                if (!this.stack.length) {
+                    pjaxReplace(url, data)
+                    return true
+                }
+                this.pendingNavigation = {url: url, data: data}
+                this.afterClose = null
+                window.history.go(-this.stack.length)
+                return true
+            },
+            handlePopState(nativeEvent) {
+                const state = nativeEvent && nativeEvent.state ? nativeEvent.state : {}
+                const targetStack = state.h5HistoryLayerPage === this.pageKey && Array.isArray(state.h5HistoryLayerStack)
+                    ? state.h5HistoryLayerStack.slice()
+                    : []
+                const stackChanged = this.stack.length !== targetStack.length ||
+                    this.stack.some((layerName, index) => layerName !== targetStack[index])
+                if (!stackChanged) return false
+                if (!this.stack.length && !targetStack.length) return false
+                this.stack = targetStack
+                this.notify()
+                const callback = this.afterClose
+                const navigation = this.pendingNavigation
+                this.afterClose = null
+                this.pendingNavigation = null
+                if (navigation && navigation.url) {
+                    pjaxReplace(navigation.url, navigation.data)
+                    return true
+                }
+                if (typeof callback === "function") {
+                    setTimeout(() => callback(), 0)
+                }
+                return true
+            },
+            notify() {
+                if (typeof this.onChange === "function") {
+                    this.onChange(this.stack.slice())
+                }
+                this.subscribers.slice().forEach((subscriber) => {
+                    subscriber(this.stack.slice())
+                })
+            },
+            reset() {
+                this.stack = []
+                this.notify()
+                this.pageKey = ""
+                this.onChange = null
+                this.afterClose = null
+                this.subscribers = []
+                this.pendingNavigation = null
+            }
+        }
+
         //初始化pjax
         ;(function initPjax() {
             if ($.support.pjax) {
@@ -106,6 +252,7 @@
                     timeout: 8000
                 })
                 $(document).on("pjax:send", function () {
+                    window.h5HistoryLayerManager.reset()
                     NProgress.start()
                     window.customStyleList = document.querySelectorAll('style[id^="style-"]')
                 })
@@ -121,6 +268,9 @@
 
                 // 监听浏览器的前进和后退操作
                 $(window).on("popstate", function (event) {
+                    if (window.h5HistoryLayerManager.handlePopState(event.originalEvent)) {
+                        return
+                    }
                     if (event.originalEvent.state) {
                         // 如果存在历史记录状态，触发 Pjax 加载对应内容
                         $.pjax({
@@ -466,7 +616,7 @@
     </script>
 
     <script nonce="${cspNonce!}">
-        const h5ComponentVersion = "20260524"
+        const h5ComponentVersion = "20260821_2"
         Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
         Vue.component("h5-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
         Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/h5Index.vue?v=" + h5ComponentVersion))
diff --git a/src/main/resources/views/platform/zhghh5/welfare/address/addressManager.js b/src/main/resources/views/platform/zhghh5/welfare/address/addressManager.js
new file mode 100644
index 00000000..f915bd51
--- /dev/null
+++ b/src/main/resources/views/platform/zhghh5/welfare/address/addressManager.js
@@ -0,0 +1,1065 @@
+const WELFARE_ADDRESS_MANAGER_COMPONENT = {
+    template: /*language=HTML*/ `
+        <div class="welfare-address-manager">
+            <div class="address-list-header">
+                <van-nav-bar :title="pageTitle" left-text="返回" left-arrow
+                             @click-left="handlePageBack"></van-nav-bar>
+            </div>
+
+            <div class="address-list-scroll">
+                <div class="address-list-loading" v-if="addressLoading">
+                    <van-loading type="spinner" size="24px">地址加载中...</van-loading>
+                </div>
+                <template v-else-if="addressList.length">
+                    <div class="address-swipe-row" v-for="address in addressList" :key="address.id"
+                         :class="{ 'is-swipe-active': swipeAddressId === address.id && swipeOffset < 0 }">
+                        <button type="button" class="address-swipe-delete" @click="openDeleteConfirm(address)">
+                            <van-icon name="delete-o"></van-icon>
+                            <span>删除</span>
+                        </button>
+                        <article class="address-card"
+                                  :class="{ 'is-flat-list': flatList, 'is-select-mode': selectable, 'is-selected': showSelectedBadge && isAddressSelected(address), 'is-dragging': swipeDragging && swipeAddressId === address.id }"
+                                 :style="getAddressSwipeStyle(address.id)"
+                                 @touchstart="handleAddressTouchStart($event, address)"
+                                 @touchmove="handleAddressTouchMove($event, address)"
+                                 @touchend="handleAddressTouchEnd(address)"
+                                 @touchcancel="handleAddressTouchEnd(address)"
+                                 @click="handleAddressCardClick(address)">
+                            <template v-if="flatList">
+                                <div class="address-flat__region">
+                                    {{ address.province }} {{ address.city }} {{ address.county }}
+                                </div>
+                                <div class="address-flat__main">
+                                    <div class="address-flat__detail">{{ address.addressDetail }}</div>
+                                    <button type="button" class="address-flat__edit" aria-label="编辑地址"
+                                            @click.stop="openAddressEdit(address)">
+                                        <van-icon name="edit"></van-icon>
+                                    </button>
+                                </div>
+                                <div class="address-flat__meta">
+                                    <span>{{ address.userName }}</span>
+                                    <span>{{ address.tel }}</span>
+                                    <span class="address-flat__default" v-if="showAddressBadge(address)">
+                                        {{ selectable && showSelectedBadge ? '当前选择' : '默认' }}
+                                    </span>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div class="address-card__header">
+                                    <div class="address-card__region-wrap">
+                                        <div class="address-card__location">
+                                            <van-icon name="location-o"></van-icon>
+                                        </div>
+                                        <div class="address-card__region">
+                                            {{ address.province }} {{ address.city }} {{ address.county }}
+                                        </div>
+                                    </div>
+                                    <div class="address-card__default" v-if="showAddressBadge(address)">
+                                        <van-icon name="checked"></van-icon>
+                                        <span>{{ selectable && showSelectedBadge ? '当前选择' : '默认地址' }}</span>
+                                    </div>
+                                </div>
+                                <div class="address-card__detail">{{ address.addressDetail }}</div>
+                                <div class="address-card__footer">
+                                    <div class="address-card__contact">
+                                        <div class="address-card__contact-item">
+                                            <van-icon name="manager"></van-icon>
+                                            <span>{{ address.userName }}</span>
+                                        </div>
+                                        <span class="address-card__divider"></span>
+                                        <div class="address-card__contact-item">
+                                            <van-icon name="phone-o"></van-icon>
+                                            <span>{{ address.tel }}</span>
+                                        </div>
+                                    </div>
+                                    <button type="button" class="address-card__edit" @click.stop="openAddressEdit(address)">
+                                        <van-icon name="edit"></van-icon>
+                                        <span>编辑</span>
+                                    </button>
+                                </div>
+                            </template>
+                        </article>
+                    </div>
+                </template>
+                <div class="address-empty" v-else>
+                    <img src="/assets/mobile/img/benefit/welfare-empty.png" alt="收货地址空状态插画">
+                    <div class="address-empty__title">暂无收货地址</div>
+                    <div class="address-empty__hint">添加收货地址后即可使用</div>
+                </div>
+            </div>
+
+            <button type="button" class="address-add-button" @click="openAddressEdit()">
+                <van-icon name="plus"></van-icon>
+                <span>新增地址</span>
+            </button>
+
+            <van-popup v-model="showAddressEditPopup" class="address-edit-popup" position="right"
+                       :close-on-click-overlay="false" :style="{ width: '100%', height: '100%' }"
+                       @close="handleHistoryLayerComponentClose(historyLayerNames.edit)">
+                <div class="address-edit-page">
+                    <van-nav-bar :title="addressEditTitle" left-text="返回" left-arrow
+                                 @click-left="closeHistoryLayer(historyLayerNames.edit)"></van-nav-bar>
+                    <div class="address-edit-scroll">
+                        <div class="address-recognition-card">
+                            <van-field v-model="addressRecognitionText" type="textarea" rows="3" autosize
+                                       maxlength="300"
+                                       placeholder="试试粘贴收件人姓名、手机号、收货地址，可快速识别您的收货信息"></van-field>
+                            <div class="address-recognition-card__footer">
+                                <van-button type="primary" class="address-recognition-button" round
+                                            @click="recognizeAddress">识别</van-button>
+                            </div>
+                        </div>
+                        <div class="address-form-card">
+                            <van-field v-model="addressForm.userName" label="姓名" left-icon="manager-o"
+                                       placeholder="请输入收货人姓名" maxlength="50"
+                                       :error="addressFormErrors.userName"
+                                       @input="clearAddressFormError('userName')"></van-field>
+                            <van-field v-model="addressForm.tel" label="电话" left-icon="phone-o" type="tel"
+                                       placeholder="请输入收货人手机号" maxlength="11"
+                                       :error="addressFormErrors.tel"
+                                       @input="clearAddressFormError('tel')"></van-field>
+                            <van-field :value="addressRegionText" label="地区" left-icon="location-o"
+                                       right-icon="arrow" placeholder="请选择省 / 市 / 区" readonly clickable
+                                       :error="addressFormErrors.area" @click="openAddressArea"></van-field>
+                            <van-field v-model="addressForm.addressDetail" label="详细地址" left-icon="records"
+                                       type="textarea" rows="1" autosize maxlength="100"
+                                       placeholder="请输入街道门牌、楼层房间号等信息"
+                                       :error="addressFormErrors.addressDetail"
+                                       @input="clearAddressFormError('addressDetail')"></van-field>
+                            <van-cell>
+                                <template #title>
+                                    <div class="address-default-title">
+                                        <van-icon name="shield-o"></van-icon>
+                                        <span>设为默认收货地址</span>
+                                    </div>
+                                </template>
+                                <van-switch v-model="addressForm.isDefault" active-color="#1989fa"
+                                            inactive-color="#d9dee7" size="24px"></van-switch>
+                            </van-cell>
+                        </div>
+                    </div>
+                    <div class="address-edit-footer">
+                        <van-button type="primary" class="address-save-button" block round
+                                    :loading="addressFormLoading" :disabled="addressFormLoading"
+                                    loading-text="保存中..." @click="saveAddress">保存</van-button>
+                    </div>
+                </div>
+            </van-popup>
+
+            <van-popup v-model="showAddressAreaPopup" class="address-area-popup" position="bottom" round
+                       :close-on-click-overlay="false"
+                       @close="handleHistoryLayerComponentClose(historyLayerNames.area)">
+                <van-area title="选择地区" :area-list="areaList" :value="addressAreaCode"
+                          @confirm="confirmAddressArea"
+                          @cancel="closeHistoryLayer(historyLayerNames.area)"></van-area>
+            </van-popup>
+
+            <van-popup v-model="showDeleteDialog" class="address-delete-popup"
+                       :close-on-click-overlay="false"
+                       @close="handleHistoryLayerComponentClose(historyLayerNames.deleteConfirm)">
+                <div class="address-delete-dialog">
+                    <div class="address-delete-dialog__title">删除地址</div>
+                    <div class="address-delete-dialog__message">删除后无法恢复，确定删除当前收货地址吗？</div>
+                    <div class="address-delete-dialog__actions">
+                        <button type="button" class="address-delete-dialog__button is-cancel"
+                                :disabled="addressDeleteLoading"
+                                @click="closeHistoryLayer(historyLayerNames.deleteConfirm)">取消</button>
+                        <button type="button" class="address-delete-dialog__button is-confirm"
+                                :disabled="addressDeleteLoading" @click="deleteAddress">
+                            {{ addressDeleteLoading ? '删除中...' : '确认删除' }}
+                        </button>
+                    </div>
+                </div>
+            </van-popup>
+        </div>
+    `,
+    props: {
+        pageTitle: {
+            type: String,
+            default: "地址管理"
+        },
+        selectable: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * selectable 为 true 时，控制是否展示“当前选择”标记和选中高亮；传 false 仅隐藏视觉状态，不影响 selectable 的点选回填能力。
+         */
+        showSelectedBadge: {
+            type: Boolean,
+            default: true
+        },
+        // 地址管理页和福利选择弹框使用紧凑卡片列表，其他复用入口继续使用原卡片结构。
+        flatList: {
+            type: Boolean,
+            default: false
+        },
+        selectedAddressText: {
+            type: String,
+            default: ""
+        },
+        areaList: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            addressLoading: false,
+            addressList: [],
+            deleteTargetAddress: null,
+            swipeAddressId: "",
+            swipeOffset: 0,
+            swipeStartX: 0,
+            swipeStartY: 0,
+            swipeStartOffset: 0,
+            swipeDirection: "",
+            swipeDragging: false,
+            swipeMoved: false,
+            swipeDeleteWidth: 78,
+            showAddressEditPopup: false,
+            showAddressAreaPopup: false,
+            showDeleteDialog: false,
+            addressEditTitle: "新增地址",
+            addressAreaCode: "",
+            addressRecognitionText: "",
+            addressFormLoading: false,
+            addressDeleteLoading: false,
+            editingSelectedAddress: false,
+            historyLayerUnsubscribe: null,
+            historyLayerNames: {
+                edit: "",
+                area: "",
+                deleteConfirm: ""
+            },
+            addressForm: {
+                id: "",
+                userName: "",
+                tel: "",
+                province: "",
+                city: "",
+                county: "",
+                addressDetail: "",
+                areaCode: "",
+                isDefault: false
+            },
+            addressFormErrors: {
+                userName: false,
+                tel: false,
+                area: false,
+                addressDetail: false
+            }
+        }
+    },
+    computed: {
+        addressRegionText() {
+            return [this.addressForm.province, this.addressForm.city, this.addressForm.county]
+                .filter((item) => !!item)
+                .join(" / ")
+        }
+    },
+    methods: {
+        // 组件只订阅全局历史栈，由所在页面统一注册，避免覆盖父页面的弹层回调。
+        subscribeHistoryLayers() {
+            const manager = window.h5HistoryLayerManager
+            if (!manager || typeof manager.subscribe !== "function") return
+            this.historyLayerNames.edit = "welfare-address-edit-" + this._uid
+            this.historyLayerNames.area = "welfare-address-area-" + this._uid
+            this.historyLayerNames.deleteConfirm = "welfare-address-delete-" + this._uid
+            this.historyLayerUnsubscribe = manager.subscribe((stack) => {
+                this.showAddressEditPopup = stack.includes(this.historyLayerNames.edit)
+                this.showAddressAreaPopup = stack.includes(this.historyLayerNames.area)
+                this.showDeleteDialog = stack.includes(this.historyLayerNames.deleteConfirm)
+            })
+        },
+        openHistoryLayer(layerName) {
+            const manager = window.h5HistoryLayerManager
+            if (manager && manager.open(layerName)) return
+            this.setHistoryLayerVisible(layerName, true)
+        },
+        closeHistoryLayer(layerName, afterClose = null) {
+            const manager = window.h5HistoryLayerManager
+            if (manager && manager.close(layerName, afterClose)) return
+            this.setHistoryLayerVisible(layerName, false)
+            if (typeof afterClose === "function") afterClose()
+        },
+        setHistoryLayerVisible(layerName, visible) {
+            if (layerName === this.historyLayerNames.edit) this.showAddressEditPopup = visible
+            if (layerName === this.historyLayerNames.area) this.showAddressAreaPopup = visible
+            if (layerName === this.historyLayerNames.deleteConfirm) this.showDeleteDialog = visible
+        },
+        handleHistoryLayerComponentClose(layerName) {
+            const manager = window.h5HistoryLayerManager
+            if (!manager) return
+            const stack = manager.stack
+            if (stack[stack.length - 1] === layerName) manager.close(layerName)
+        },
+        handlePageBack() {
+            this.$emit("back")
+        },
+        /**
+         * 查询当前用户地址。请求不传业务参数；接口返回 Result<Array>，data 为地址对象数组；返回 Promise。
+         */
+        selectUserAddress() {
+            if (this.addressLoading) return Promise.resolve()
+            this.addressLoading = true
+            return this.$axios.post("/platform/welfare/addressManage/selectUserAddress", {})
+                .then((resp) => {
+                    if (resp.code === 0) {
+                        this.$set(this, "addressList", resp.data || [])
+                        this.closeAddressSwipe()
+                    } else {
+                        this.$toast.fail(resp.msg)
+                    }
+                })
+                .catch(() => {
+                    this.$toast.fail("地址加载失败，请稍后重试")
+                })
+                .finally(() => {
+                    this.addressLoading = false
+                })
+        },
+        getAddressText(address) {
+            if (!address) return ""
+            return (address.province || "") + (address.city || "") + (address.county || "") +
+                (address.addressDetail || "")
+        },
+        isAddressSelected(address) {
+            return this.selectable && !!this.selectedAddressText &&
+                this.selectedAddressText === this.getAddressText(address)
+        },
+        showAddressBadge(address) {
+            return this.selectable && this.showSelectedBadge ? this.isAddressSelected(address) : !!address.isDefault
+        },
+        getAddressSwipeStyle(addressId) {
+            const offset = this.swipeAddressId === addressId ? this.swipeOffset : 0
+            return {transform: "translate3d(" + offset + "px, 0, 0)"}
+        },
+        /**
+         * 记录卡片触摸起点。event 提供触点坐标，address 提供地址 ID；无返回值。
+         */
+        handleAddressTouchStart(event, address) {
+            const touch = event.touches && event.touches[0]
+            if (!touch || !address || !address.id) return
+            if (this.swipeAddressId && this.swipeAddressId !== address.id) this.closeAddressSwipe()
+            if (this.swipeAddressId !== address.id) {
+                this.swipeAddressId = address.id
+                this.swipeOffset = 0
+            }
+            this.swipeStartX = touch.clientX
+            this.swipeStartY = touch.clientY
+            this.swipeStartOffset = this.swipeOffset
+            this.swipeDirection = ""
+            this.swipeDragging = false
+            this.swipeMoved = false
+        },
+        // 横向位移超过 5 像素后锁定为左滑，纵向手势继续用于列表滚动。
+        handleAddressTouchMove(event, address) {
+            if (!address || this.swipeAddressId !== address.id) return
+            const touch = event.touches && event.touches[0]
+            if (!touch) return
+            const moveX = touch.clientX - this.swipeStartX
+            const moveY = touch.clientY - this.swipeStartY
+            if (!this.swipeDirection) {
+                if (Math.max(Math.abs(moveX), Math.abs(moveY)) < 5) return
+                this.swipeDirection = Math.abs(moveX) > Math.abs(moveY) ? "horizontal" : "vertical"
+            }
+            if (this.swipeDirection !== "horizontal") {
+                this.swipeMoved = true
+                return
+            }
+            event.preventDefault()
+            this.swipeDragging = true
+            this.swipeMoved = true
+            const nextOffset = this.swipeStartOffset + moveX
+            this.swipeOffset = Math.max(-this.swipeDeleteWidth, Math.min(0, nextOffset))
+        },
+        handleAddressTouchEnd(address) {
+            if (!address || this.swipeAddressId !== address.id) return
+            if (this.swipeDirection === "horizontal") {
+                const shouldOpen = this.swipeOffset <= -(this.swipeDeleteWidth / 2)
+                this.swipeOffset = shouldOpen ? -this.swipeDeleteWidth : 0
+                if (!shouldOpen) this.swipeAddressId = ""
+            } else if (this.swipeOffset === 0) {
+                this.swipeAddressId = ""
+            }
+            this.swipeDragging = false
+            this.swipeDirection = ""
+        },
+        handleAddressCardClick(address) {
+            if (this.swipeMoved) {
+                this.swipeMoved = false
+                return
+            }
+            if (this.swipeAddressId === address.id && this.swipeOffset < 0) {
+                this.closeAddressSwipe()
+                return
+            }
+            if (this.selectable) this.$emit("select", address)
+        },
+        closeAddressSwipe() {
+            this.swipeAddressId = ""
+            this.swipeOffset = 0
+            this.swipeStartOffset = 0
+            this.swipeDirection = ""
+            this.swipeDragging = false
+            this.swipeMoved = false
+        },
+        resetAddressFormErrors() {
+            Object.keys(this.addressFormErrors).forEach((fieldName) => {
+                this.$set(this.addressFormErrors, fieldName, false)
+            })
+        },
+        clearAddressFormError(fieldName) {
+            if (!Object.prototype.hasOwnProperty.call(this.addressFormErrors, fieldName)) return
+            this.$set(this.addressFormErrors, fieldName, false)
+        },
+        /**
+         * 打开新增或编辑页。address 为可选地址对象；无返回值，回显后打开组件专属历史层。
+         */
+        openAddressEdit(address = null) {
+            const sourceAddress = address || {}
+            this.closeAddressSwipe()
+            this.addressEditTitle = sourceAddress.id ? "编辑地址" : "新增地址"
+            this.editingSelectedAddress = !!sourceAddress.id && this.isAddressSelected(sourceAddress)
+            this.addressAreaCode = sourceAddress.areaCode || ""
+            this.$set(this, "addressRecognitionText", "")
+            this.$set(this, "addressForm", {
+                id: sourceAddress.id || "",
+                userName: sourceAddress.userName || "",
+                tel: sourceAddress.tel || "",
+                province: sourceAddress.province || "",
+                city: sourceAddress.city || "",
+                county: sourceAddress.county || "",
+                addressDetail: sourceAddress.addressDetail || "",
+                areaCode: sourceAddress.areaCode || "",
+                isDefault: !!sourceAddress.isDefault
+            })
+            this.resetAddressFormErrors()
+            this.openHistoryLayer(this.historyLayerNames.edit)
+        },
+        getRecognitionAreaAliases(name) {
+            const areaName = (name || "").trim()
+            if (!areaName) return []
+            const shortName = areaName.replace(/特别行政区$|维吾尔自治区$|壮族自治区$|回族自治区$|自治区$|自治州$|地区$|盟$|省$|市$|区$|县$/, "")
+            return shortName && shortName !== areaName && shortName.length >= 2
+                ? [areaName, shortName]
+                : [areaName]
+        },
+        /**
+         * 在地区字典中查找文本内最明确的地区。返回匹配对象，未匹配返回 null。
+         */
+        findRecognitionArea(areaMap, sourceText, codePrefix = "") {
+            let bestMatch = null
+            Object.keys(areaMap || {}).forEach((areaCode) => {
+                if (codePrefix && areaCode.indexOf(codePrefix) !== 0) return
+                const areaName = areaMap[areaCode]
+                this.getRecognitionAreaAliases(areaName).forEach((alias) => {
+                    const matchIndex = sourceText.indexOf(alias)
+                    if (matchIndex < 0) return
+                    if (!bestMatch || alias.length > bestMatch.alias.length ||
+                        (alias.length === bestMatch.alias.length && matchIndex < bestMatch.index)) {
+                        bestMatch = {code: areaCode, name: areaName, alias: alias, index: matchIndex}
+                    }
+                })
+            })
+            return bestMatch
+        },
+        parseRecognitionRegion(sourceText) {
+            let provinceMatch = this.findRecognitionArea(this.areaList.province_list, sourceText)
+            const provincePrefix = provinceMatch ? provinceMatch.code.slice(0, 2) : ""
+            let cityMatch = this.findRecognitionArea(this.areaList.city_list, sourceText, provincePrefix)
+            const cityPrefix = cityMatch ? cityMatch.code.slice(0, 4) : provincePrefix
+            const countyMatch = this.findRecognitionArea(this.areaList.county_list, sourceText, cityPrefix)
+            if (!cityMatch && countyMatch) {
+                const cityCode = countyMatch.code.slice(0, 4) + "00"
+                if (this.areaList.city_list[cityCode]) {
+                    cityMatch = {code: cityCode, name: this.areaList.city_list[cityCode], alias: "", index: countyMatch.index}
+                }
+            }
+            if (!provinceMatch && (cityMatch || countyMatch)) {
+                const childCode = cityMatch ? cityMatch.code : countyMatch.code
+                const provinceCode = childCode.slice(0, 2) + "0000"
+                if (this.areaList.province_list[provinceCode]) {
+                    provinceMatch = {
+                        code: provinceCode,
+                        name: this.areaList.province_list[provinceCode],
+                        alias: "",
+                        index: cityMatch ? cityMatch.index : countyMatch.index
+                    }
+                }
+            }
+            if (!provinceMatch || !cityMatch || !countyMatch) return null
+            return {
+                province: provinceMatch.name,
+                city: cityMatch.name,
+                county: countyMatch.name,
+                areaCode: countyMatch.code,
+                matches: [provinceMatch, cityMatch, countyMatch].filter((item) => !!item.alias)
+            }
+        },
+        cleanRecognitionText(value) {
+            return (value || "")
+                .replace(/(?:收件人|收货人|联系人|姓名|手机号码|手机号|联系电话|电话|收货地址|详细地址|地址)\s*[：:]?/g, " ")
+                .replace(/^[\s,，;；、|]+|[\s,，;；、|]+$/g, "")
+                .replace(/\s+/g, " ")
+                .trim()
+        },
+        /**
+         * 识别姓名、11 位手机号、省市区和详细地址；成功后回填 addressForm，无返回值。
+         */
+        recognizeAddress() {
+            const sourceText = (this.addressRecognitionText || "").replace(/[\r\n\t]+/g, " ").replace(/\s+/g, " ").trim()
+            if (!sourceText) {
+                this.$toast.fail("请先粘贴收货信息")
+                return
+            }
+            const mobileMatch = sourceText.match(/(?:\+?86[-\s]?)?(1[3-9]\d{9})/)
+            if (!mobileMatch) {
+                this.$toast.fail("未识别到正确的11位手机号码")
+                return
+            }
+            const regionResult = this.parseRecognitionRegion(sourceText)
+            if (!regionResult || regionResult.matches.length === 0) {
+                this.$toast.fail("未识别到完整的省、市、区，请检查后重试")
+                return
+            }
+            const matchedRegions = regionResult.matches.slice().sort((left, right) => left.index - right.index)
+            const firstRegionIndex = matchedRegions[0].index
+            const lastRegion = matchedRegions[matchedRegions.length - 1]
+            const mobileIndex = sourceText.indexOf(mobileMatch[0])
+            let userName = this.cleanRecognitionText(sourceText.slice(0, Math.min(mobileIndex, firstRegionIndex)))
+            let addressDetail = this.cleanRecognitionText(
+                sourceText.slice(lastRegion.index + lastRegion.alias.length).replace(mobileMatch[0], " ")
+            )
+            if (!userName || !addressDetail) {
+                let remainingText = sourceText.replace(mobileMatch[0], " ")
+                matchedRegions.forEach((item) => {
+                    remainingText = remainingText.replace(item.alias, " ")
+                })
+                const remainingParts = this.cleanRecognitionText(remainingText).split(" ").filter((item) => !!item)
+                if (!userName && remainingParts.length) userName = remainingParts.shift()
+                if (!addressDetail && remainingParts.length) addressDetail = remainingParts.join("")
+            }
+            if (!userName || !addressDetail) {
+                this.$toast.fail("姓名或详细地址识别不完整，请调整内容后重试")
+                return
+            }
+            if (userName.length > 50 || addressDetail.length > 100) {
+                this.$toast.fail("姓名或详细地址内容过长，请精简后重试")
+                return
+            }
+            this.$set(this.addressForm, "userName", userName)
+            this.$set(this.addressForm, "tel", mobileMatch[1])
+            this.$set(this.addressForm, "province", regionResult.province)
+            this.$set(this.addressForm, "city", regionResult.city)
+            this.$set(this.addressForm, "county", regionResult.county)
+            this.$set(this.addressForm, "addressDetail", addressDetail)
+            this.$set(this.addressForm, "areaCode", regionResult.areaCode)
+            this.$set(this, "addressAreaCode", regionResult.areaCode)
+            this.resetAddressFormErrors()
+            this.$toast.success("收货信息识别成功")
+        },
+        openAddressArea() {
+            this.clearAddressFormError("area")
+            this.openHistoryLayer(this.historyLayerNames.area)
+        },
+        /**
+         * values 为省、市、区对象数组；回填名称和编码并关闭地区弹层，无返回值。
+         */
+        confirmAddressArea(values) {
+            if (!Array.isArray(values) || values.length < 3) {
+                this.$toast.fail("请选择完整的省、市、区")
+                return
+            }
+            this.$set(this.addressForm, "province", values[0].name || "")
+            this.$set(this.addressForm, "city", values[1].name || "")
+            this.$set(this.addressForm, "county", values[2].name || "")
+            this.$set(this.addressForm, "areaCode", values[2].code || "")
+            this.addressAreaCode = values[2].code || ""
+            this.clearAddressFormError("area")
+            this.closeHistoryLayer(this.historyLayerNames.area)
+        },
+        validateAddressForm() {
+            const userName = (this.addressForm.userName || "").trim()
+            const tel = (this.addressForm.tel || "").trim()
+            const addressDetail = (this.addressForm.addressDetail || "").trim()
+            this.$set(this.addressForm, "userName", userName)
+            this.$set(this.addressForm, "tel", tel)
+            this.$set(this.addressForm, "addressDetail", addressDetail)
+            this.resetAddressFormErrors()
+            if (!userName) {
+                this.$set(this.addressFormErrors, "userName", true)
+                this.$toast.fail("请输入收货人姓名")
+                return false
+            }
+            if (!/^1[3-9]\d{9}$/.test(tel)) {
+                this.$set(this.addressFormErrors, "tel", true)
+                this.$toast.fail("请输入正确的11位手机号码")
+                return false
+            }
+            if (!this.addressForm.province || !this.addressForm.city || !this.addressForm.county) {
+                this.$set(this.addressFormErrors, "area", true)
+                this.$toast.fail("请选择完整的省、市、区")
+                return false
+            }
+            if (!addressDetail) {
+                this.$set(this.addressFormErrors, "addressDetail", true)
+                this.$toast.fail("请输入详细地址")
+                return false
+            }
+            return true
+        },
+        /**
+         * 保存地址。data 为地址 JSON 字符串；接口返回 Result，code=0 表示成功；返回 Promise。
+         */
+        saveAddress() {
+            if (this.addressFormLoading || !this.validateAddressForm()) return
+            const addressPayload = {
+                userName: this.addressForm.userName,
+                tel: this.addressForm.tel,
+                province: this.addressForm.province,
+                city: this.addressForm.city,
+                county: this.addressForm.county,
+                addressDetail: this.addressForm.addressDetail,
+                areaCode: this.addressForm.areaCode,
+                isDefault: this.addressForm.isDefault
+            }
+            const isEdit = !!this.addressForm.id
+            if (isEdit) addressPayload.id = this.addressForm.id
+            this.addressFormLoading = true
+            return this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", {
+                data: JSON.stringify(addressPayload)
+            }).then((resp) => {
+                if (resp.code !== 0) {
+                    this.$toast.fail(resp.msg)
+                    return
+                }
+                if (this.editingSelectedAddress) this.$emit("selected-address-updated", addressPayload)
+                this.$toast.success(resp.msg || (isEdit ? "地址修改成功" : "地址新增成功"))
+                this.closeHistoryLayer(this.historyLayerNames.edit, () => {
+                    this.selectUserAddress()
+                })
+            }).catch(() => {
+                this.$toast.fail("地址保存失败，请稍后重试")
+            }).finally(() => {
+                this.addressFormLoading = false
+            })
+        },
+        openDeleteConfirm(address) {
+            if (!address || !address.id) return
+            this.$set(this, "deleteTargetAddress", address)
+            this.closeAddressSwipe()
+            this.openHistoryLayer(this.historyLayerNames.deleteConfirm)
+        },
+        /**
+         * 删除当前左滑地址。id 为地址主键；接口返回 Result，code=0 表示成功；返回 Promise。
+         */
+        deleteAddress() {
+            if (this.addressDeleteLoading || !this.deleteTargetAddress || !this.deleteTargetAddress.id) return
+            this.addressDeleteLoading = true
+            return this.$axios.post("/platform/welfare/addressManage/deleteAddress", {
+                id: this.deleteTargetAddress.id
+            }).then((resp) => {
+                if (resp.code !== 0) {
+                    this.$toast.fail(resp.msg)
+                    return
+                }
+                this.$toast.success(resp.msg || "地址删除成功")
+                this.closeHistoryLayer(this.historyLayerNames.deleteConfirm, () => {
+                    this.selectUserAddress()
+                })
+            }).catch(() => {
+                this.$toast.fail("地址删除失败，请稍后重试")
+            }).finally(() => {
+                this.addressDeleteLoading = false
+            })
+        }
+    },
+    created() {
+        this.subscribeHistoryLayers()
+        this.selectUserAddress()
+    },
+    beforeDestroy() {
+        if (typeof this.historyLayerUnsubscribe === "function") this.historyLayerUnsubscribe()
+    },
+    style: /*language=CSS*/ `
+        .welfare-address-manager {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            overflow: hidden;
+            flex-direction: column;
+            background: #f3f7fc;
+        }
+        /deep/ .address-list-header { flex-shrink: 0; }
+        /deep/ .address-list-header .van-nav-bar { z-index: 3; }
+        /deep/ .address-list-header .van-nav-bar__title,
+        /deep/ .address-edit-page .van-nav-bar__title { color: #171d29; font-size: 17px; font-weight: 600; }
+        /deep/ .address-list-header .van-nav-bar .van-icon,
+        /deep/ .address-list-header .van-nav-bar__text,
+        /deep/ .address-edit-page .van-nav-bar .van-icon,
+        /deep/ .address-edit-page .van-nav-bar__text { color: #1989fa; }
+        /deep/ .address-list-scroll {
+            min-height: 0;
+            padding: 18px 14px calc(70px + env(safe-area-inset-bottom));
+            flex: 1;
+            overflow-y: auto;
+            box-sizing: border-box;
+            -webkit-overflow-scrolling: touch;
+        }
+        /deep/ .address-list-loading { display: flex; min-height: 260px; align-items: center; justify-content: center; color: #8c98aa; }
+        /deep/ .address-swipe-row {
+            position: relative;
+            margin-bottom: 14px;
+            overflow: hidden;
+            border-radius: 18px;
+            background: #d94b58;
+            box-shadow: 0 8px 22px rgba(49, 83, 126, .10);
+        }
+        /deep/ .address-swipe-delete {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 78px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            border: 0;
+            outline: none;
+            background: #d94b58;
+            color: #fff;
+            font-size: 14px;
+            /* 删除按钮仅在卡片左滑后显示，避免圆角抗锯齿混入红色背景。 */
+            visibility: hidden;
+            pointer-events: none;
+        }
+        /deep/ .address-swipe-row.is-swipe-active .address-swipe-delete {
+            visibility: visible;
+            pointer-events: auto;
+        }
+        /deep/ .address-swipe-delete .van-icon { margin-bottom: 5px; font-size: 21px; }
+        /deep/ .address-card {
+            position: relative;
+            z-index: 2;
+            padding: 18px 16px 20px;
+            border: 1px solid transparent;
+            border-radius: 18px;
+            background: #fff;
+            box-sizing: border-box;
+            transition: transform .22s ease;
+            touch-action: pan-y;
+        }
+        /deep/ .address-card.is-select-mode { border-color: #fff; }
+        /deep/ .address-card.is-selected { border-color: rgba(25, 137, 250, .32); box-shadow: inset 3px 0 0 #1989fa; }
+        /deep/ .address-card.is-dragging { transition: none; }
+        /deep/ .address-card__header,
+        /deep/ .address-card__footer { display: flex; align-items: center; justify-content: space-between; column-gap: 12px; }
+        /deep/ .address-card__region-wrap,
+        /deep/ .address-card__contact { min-width: 0; display: flex; flex: 1; align-items: center; }
+        /deep/ .address-card__contact { overflow: visible; flex-wrap: wrap; row-gap: 8px; }
+        /deep/ .address-card__location {
+            width: 44px;
+            height: 44px;
+            margin-right: 10px;
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: #e7f1fb;
+            color: #1989fa;
+            font-size: 24px;
+        }
+        /deep/ .address-card__region { min-width: 0; overflow-wrap: anywhere; color: #7f8a99; font-size: 15px; line-height: 23px; }
+        /deep/ .address-card__default {
+            height: 28px;
+            padding: 0 11px;
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            border-radius: 15px;
+            background: #1989fa;
+            color: #fff;
+            font-size: 13px;
+            line-height: 28px;
+            box-shadow: 0 4px 10px rgba(25, 137, 250, .18);
+        }
+        /deep/ .address-card__default .van-icon { margin-right: 5px; font-size: 16px; }
+        /deep/ .address-card__detail { margin: 16px 0 0 54px; overflow-wrap: anywhere; color: #171d29; font-size: 18px; font-weight: 700; line-height: 27px; }
+        /deep/ .address-card__footer { min-height: 28px; margin-top: 22px; }
+        /deep/ .address-card__contact-item { min-width: 0; max-width: 100%; display: flex; flex-shrink: 0; align-items: center; color: #252b36; font-size: 15px; line-height: 22px; }
+        /deep/ .address-card__contact-item .van-icon { margin-right: 8px; flex-shrink: 0; color: #8c98aa; font-size: 18px; }
+        /deep/ .address-card__divider { width: 1px; height: 18px; margin: 0 14px; flex-shrink: 0; background: #d9dee7; }
+        /deep/ .address-card__edit { padding: 4px 0 4px 8px; display: flex; flex-shrink: 0; align-items: center; border: 0; outline: none; background: transparent; color: #1989fa; font-size: 15px; }
+        /deep/ .address-card__edit .van-icon { margin-right: 5px; font-size: 18px; }
+        /deep/ .address-empty { display: flex; min-height: 300px; padding: 28px 18px; align-items: center; justify-content: flex-start; flex-direction: column; box-sizing: border-box; text-align: center; }
+        /deep/ .address-empty img { display: block; width: 86%; max-width: 300px; height: auto; object-fit: contain; }
+        /deep/ .address-empty__title { margin-top: -8px; color: #50627a; font-size: 15px; font-weight: 500; }
+        /deep/ .address-empty__hint { margin-top: 6px; color: #9aa7b8; font-size: 12px; }
+        /deep/ .address-add-button {
+            position: absolute;
+            left: 50%;
+            bottom: calc(12px + env(safe-area-inset-bottom));
+            z-index: 30;
+            width: calc(100% - 32px);
+            height: 46px;
+            padding: 0 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            appearance: none;
+            -webkit-appearance: none;
+            border: 0;
+            border-radius: 23px;
+            outline: none;
+            color: #fff;
+            background: #1989fa;
+            box-shadow: none;
+            font-family: inherit;
+            font-size: 16px;
+            font-weight: 500;
+            transform: translateX(-50%);
+        }
+        /deep/ .address-add-button:active { opacity: .65; background: #1989fa; }
+        /deep/ .address-add-button .van-icon { margin-right: 6px; font-size: 18px; }
+        /deep/ .address-edit-popup,
+        /deep/ .address-edit-page { background: #f3f7fc; }
+        /deep/ .address-edit-page { position: relative; height: 100%; display: flex; overflow: hidden; flex-direction: column; }
+        /deep/ .address-edit-scroll { min-height: 0; padding: 22px 16px calc(76px + env(safe-area-inset-bottom)); flex: 1; overflow-y: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
+        /deep/ .address-recognition-card { margin-bottom: 16px; padding: 18px 16px 14px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(49, 83, 126, .10); }
+        /deep/ .address-recognition-card .van-cell { padding: 0; background: transparent; }
+        /deep/ .address-recognition-card .van-field__control { min-height: 72px; color: #202938; font-size: 15px; line-height: 24px; }
+        /deep/ .address-recognition-card .van-field__control::placeholder { color: #7d7d7d; opacity: 1; }
+        /deep/ .address-recognition-card__footer { margin-top: 12px; display: flex; justify-content: flex-end; }
+        /deep/ .address-recognition-button { width: 82px; height: 38px; border-color: #1989fa; background: #1989fa; font-size: 15px; font-weight: 500; }
+        /deep/ .address-form-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(49, 83, 126, .10); }
+        /deep/ .address-form-card .van-cell { min-height: 68px; padding: 17px 18px; align-items: center; }
+        /deep/ .address-form-card .van-cell::after { right: 18px; left: 18px; border-color: #edf0f5; }
+        /deep/ .address-form-card .van-field__left-icon { margin-right: 12px; }
+        /deep/ .address-form-card .van-field__left-icon .van-icon,
+        /deep/ .address-default-title .van-icon { color: #1989fa; font-size: 22px; }
+        /deep/ .address-form-card .van-field__label { width: 72px; color: #202938; font-size: 15px; font-weight: 500; }
+        /deep/ .address-default-title { display: flex; align-items: center; color: #202938; font-size: 15px; font-weight: 500; }
+        /deep/ .address-default-title .van-icon { margin-right: 12px; }
+        /deep/ .address-edit-footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 30; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); background: transparent; }
+        /deep/ .address-save-button { width: 100%; height: 46px; margin: 0; border-color: #1989fa; background: #1989fa; font-size: 16px; font-weight: 500; }
+        /deep/ .address-area-popup .van-picker__confirm { color: #1989fa; }
+        /deep/ .address-delete-popup { width: calc(100% - 64px); max-width: 340px; overflow: hidden; border-radius: 16px; background: #fff; }
+        /deep/ .address-delete-dialog { padding: 24px 20px 0; text-align: center; }
+        /deep/ .address-delete-dialog__title { color: #202938; font-size: 18px; font-weight: 600; }
+        /deep/ .address-delete-dialog__message { margin-top: 12px; color: #7d899b; font-size: 14px; line-height: 22px; }
+        /deep/ .address-delete-dialog__actions { display: flex; margin: 24px -20px 0; border-top: 1px solid #edf0f5; }
+        /deep/ .address-delete-dialog__button { height: 50px; flex: 1; border: 0; background: #fff; font-size: 16px; }
+        /deep/ .address-delete-dialog__button + .address-delete-dialog__button { border-left: 1px solid #edf0f5; }
+        /deep/ .address-delete-dialog__button.is-cancel { color: #596779; }
+        /deep/ .address-delete-dialog__button.is-confirm { color: #d94b58; font-weight: 500; }
+        /deep/ .address-delete-dialog__button:disabled { opacity: .55; }
+
+        /* 地址管理页和福利选择页共用同一套紧凑、扁平地址列表视觉规范。 */
+        .welfare-address-manager.address-size-compact {
+            font-size: 12px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar {
+            background-color: #fff;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar__title,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar__title {
+            color: #1f2937;
+            font-size: 16px;
+            font-weight: 600;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar .van-icon,
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar__text,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar .van-icon,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar__text {
+            color: #1989fa;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar__left,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar__left {
+            font-size: 14px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-header .van-nav-bar__arrow,
+        .welfare-address-manager.address-size-compact /deep/ .address-edit-page .van-nav-bar__arrow {
+            font-size: 16px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-loading .van-loading__spinner {
+            width: 22px !important;
+            height: 22px !important;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-list-loading .van-loading__text,
+        .welfare-address-manager.address-size-compact /deep/ .address-swipe-delete,
+        .welfare-address-manager.address-size-compact /deep/ .address-delete-dialog__message {
+            font-size: 12px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-swipe-delete .van-icon {
+            font-size: 19px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__location {
+            font-size: 22px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__region,
+        .welfare-address-manager.address-size-compact /deep/ .address-card__contact-item,
+        .welfare-address-manager.address-size-compact /deep/ .address-card__edit,
+        .welfare-address-manager.address-size-compact /deep/ .address-empty__title,
+        .welfare-address-manager.address-size-compact /deep/ .address-recognition-card .van-field__control,
+        .welfare-address-manager.address-size-compact /deep/ .address-recognition-button,
+        .welfare-address-manager.address-size-compact /deep/ .address-form-card .van-field__label,
+        .welfare-address-manager.address-size-compact /deep/ .address-default-title {
+            font-size: 13px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__default {
+            font-size: 11px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__default .van-icon {
+            font-size: 14px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__detail,
+        .welfare-address-manager.address-size-compact /deep/ .address-delete-dialog__title {
+            font-size: 16px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__contact-item .van-icon,
+        .welfare-address-manager.address-size-compact /deep/ .address-card__edit .van-icon,
+        .welfare-address-manager.address-size-compact /deep/ .address-add-button .van-icon {
+            font-size: 16px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-empty__hint {
+            font-size: 10px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-add-button,
+        .welfare-address-manager.address-size-compact /deep/ .address-save-button,
+        .welfare-address-manager.address-size-compact /deep/ .address-delete-dialog__button,
+        .welfare-address-manager.address-size-compact /deep/ .address-area-popup .van-picker-column,
+        .welfare-address-manager.address-size-compact /deep/ .address-area-popup .van-picker__title {
+            font-size: 14px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-form-card .van-cell,
+        .welfare-address-manager.address-size-compact /deep/ .address-area-popup .van-picker__cancel,
+        .welfare-address-manager.address-size-compact /deep/ .address-area-popup .van-picker__confirm {
+            font-size: 12px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-form-card .van-field__left-icon .van-icon,
+        .welfare-address-manager.address-size-compact /deep/ .address-default-title .van-icon {
+            font-size: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-form-card .van-field__right-icon .van-icon {
+            font-size: 14px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-save-button .van-loading__spinner {
+            width: 18px !important;
+            height: 18px !important;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-swipe-row {
+            margin-bottom: 12px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card {
+            padding: 16px 16px 18px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__region {
+            line-height: 21px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__detail {
+            margin-top: 14px;
+            line-height: 25px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__footer {
+            margin-top: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card__contact-item,
+        .welfare-address-manager.address-size-compact /deep/ .address-delete-dialog__message {
+            line-height: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-recognition-card .van-field__control,
+        .welfare-address-manager.address-size-compact /deep/ .address-form-card .van-cell {
+            line-height: 22px;
+        }
+
+        /* 紧凑列表以独立白色卡片展示三层地址信息和右侧编辑入口。 */
+        .welfare-address-manager.address-size-compact /deep/ .address-list-scroll {
+            padding: 12px 12px calc(70px + env(safe-area-inset-bottom));
+            background-color: #f3f7fc;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-swipe-row {
+            margin-bottom: 12px;
+            border-radius: 14px;
+            /* 静止时保持卡片白底，左滑后仅露出右侧红色删除按钮。 */
+            background: #fff;
+            box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-card.is-flat-list {
+            padding: 18px 16px;
+            border: 0;
+            border-radius: 14px;
+            background: #fff;
+            box-shadow: none;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__region {
+            overflow-wrap: anywhere;
+            color: #98a1b0;
+            font-size: 13px;
+            line-height: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__main {
+            min-width: 0;
+            margin-top: 8px;
+            display: flex;
+            align-items: center;
+            column-gap: 10px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__detail {
+            min-width: 0;
+            flex: 1;
+            overflow-wrap: anywhere;
+            color: #20242d;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 24px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__edit {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            outline: none;
+            background: transparent;
+            color: #8c94a3;
+            font-size: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__edit:active {
+            opacity: .65;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__meta {
+            min-width: 0;
+            margin-top: 12px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 6px 12px;
+            color: #7f8794;
+            font-size: 13px;
+            line-height: 20px;
+        }
+        .welfare-address-manager.address-size-compact /deep/ .address-flat__default {
+            height: 22px;
+            padding: 0 7px;
+            display: inline-flex;
+            align-items: center;
+            border-radius: 4px;
+            background-color: #fff0eb;
+            color: #f26b4f;
+            font-size: 11px;
+            line-height: 22px;
+            box-sizing: border-box;
+        }
+    `
+}
diff --git a/src/main/resources/views/platform/zhghh5/welfare/address/list.html b/src/main/resources/views/platform/zhghh5/welfare/address/list.html
index 67c0027a..c252a3df 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/address/list.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/address/list.html
@@ -2,131 +2,73 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
+<style>
+    body {
+        background-color: #f3f7fc;
+    }
+
+    #app {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+    }
+
+    /* 地址列表视觉样式由公共地址组件统一提供，页面仅保留自身容器样式。 */
+</style>
+
 <div id="app" v-cloak>
-    <van-sticky>
-        <van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="地址管理"></van-nav-bar>
-    </van-sticky>
-
-    <van-address-list
-        :list="addressList"
-        @add="onAdd"
-        @edit="onEdit"
-        add-button-text="新增地址"
-        default-tag-text="默认"
-        v-if="addressList && addressList.length>0"
-        v-model="chosenAddressId"
-    ></van-address-list>
-
-    <van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据" v-else>
-        <van-button @click="onAdd" class="mt10" round type="primary">新增地址</van-button>
-    </van-empty>
-
-    <van-action-sheet :close-on-click-overlay="false" :title="title" v-model="editActionSheet">
-        <van-address-edit
-            :address-info="addressInfo"
-            :area-columns-placeholder="['请选择', '请选择', '请选择']"
-            :area-list="areaList"
-            :show-delete="showDelete"
-            @delete="onDelete"
-            @save="onSave"
-            ref="address"
-            show-search-result
-            show-set-default
-            tel-maxlengtfals
-        ></van-address-edit>
-    </van-action-sheet>
+    <welfare-address-manager class="address-size-compact" page-title="地址管理"
+                             flat-list :area-list="areaList" @back="handlePageBack">
+    </welfare-address-manager>
 </div>
 
 <script nonce="${cspNonce!}">
     <!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
+    <!--#include("/platform/zhghh5/welfare/address/addressManager.js"){}#-->
     const vue = new Vue({
         el: "#app",
         store,
+        components: {
+            "welfare-address-manager": WELFARE_ADDRESS_MANAGER_COMPONENT
+        },
         data() {
             return {
-                areaList: areaList,
-                addressInfo: {},
-                addressList: [],
-                editActionSheet: false,
-                showDelete: "",
-                title: "",
-                chosenAddressId: "",
-                projectId: ""
+                projectId: "",
+                historyLayerPageKey: "",
+                areaList: areaList
             }
         },
         methods: {
-            async selectUserAddress() {
-                const loading = this.$toast.loading({
-                    message: "加载中...",
-                    forbidClick: true,
-                    overlay: true,
-                    duration: 0
-                })
-                const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
-                resp.data.map((r) => {
-                    r.name = r.userName
-                    r.default = r.isDefault
-                    r.address = "收货地址:" + r.province + r.city + r.county + r.addressDetail
-                })
-                setTimeout(() => {
-                    this.addressList = resp.data
-                    loading.close()
-                }, 500)
+            /**
+             * 注册地址管理页面历史。
+             * 页面标识由项目 ID 组成，公共地址组件通过 subscribe 接收栈变化；无返回值。
+             */
+            registerHistoryLayers() {
+                this.historyLayerPageKey = "welfare-address-manage-" + (this.projectId || "default")
+                if (!window.h5HistoryLayerManager) return
+                window.h5HistoryLayerManager.register(this.historyLayerPageKey, null)
             },
-            back() {
+
+            // 有子弹框时关闭最上层弹框，没有弹框时返回上一个业务页面。
+            handlePageBack() {
+                if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
+                    window.h5HistoryLayerManager.close()
+                    return
+                }
                 this.historyBack()
-            },
-            onEdit(row) {
-                this.title = "编辑地址"
-                const data = JSON.parse(JSON.stringify(row))
-                this.showDelete = !!data.id
-                this.addressInfo = data
-                this.editActionSheet = true
-            },
-            onAdd() {
-                this.title = "新增地址"
-                this.addressInfo = {}
-                this.editActionSheet = true
-            },
-            async onSave(row) {
-                const loading = this.$toast.loading({
-                    message: "加载中...",
-                    forbidClick: true,
-                    overlay: true,
-                    duration: 0
-                })
-                row.userName = row.name
-                const resp = await this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", { data: JSON.stringify(row) })
-                if (resp.code === 0) {
-                    this.$toast.success(resp.msg)
-                    await this.selectUserAddress()
-                    loading.close()
-                    this.editActionSheet = false
-                } else {
-                    this.$toast.fail(resp.msg)
-                }
-            },
-            async onDelete(row) {
-                const loading = this.$toast.loading({
-                    message: "加载中...",
-                    forbidClick: true,
-                    overlay: true,
-                    duration: 0
-                })
-                const resp = await this.$axios.post("/platform/welfare/addressManage/deleteAddress", { id: row.id })
-                if (resp.code === 0) {
-                    this.$toast.success(resp.msg)
-                    await this.selectUserAddress()
-                    loading.close()
-                    this.editActionSheet = false
-                } else {
-                    this.$toast.fail(resp.msg)
-                }
             }
         },
         created() {
-            this.projectId = GetQueryString("projectId")
-            this.selectUserAddress()
+            this.projectId = GetQueryString("projectId") || ""
+            this.registerHistoryLayers()
+        },
+        beforeDestroy() {
+            if (window.h5HistoryLayerManager) {
+                window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
+            }
         }
     })
 </script>
diff --git a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html
index fdd127a0..f2920c9b 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html
@@ -2,101 +2,416 @@
 layout("/layouts/platform_h5.html"){
 #-->
 <style>
-    /* 列表卡片样式 */
-    .wf-welfare-list {
-        padding: 10px;
+    body {
+        background-color: #f3f7fd;
     }
-    .wf-welfare-card {
+
+    .welfare-list-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .welfare-list-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .welfare-list-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .welfare-list-page .van-nav-bar .van-icon,
+    .welfare-list-page .van-nav-bar__text {
+        color: #1989fa;
+    }
+
+    .welfare-list-content {
+        padding: 12px 12px 0;
+    }
+
+    .welfare-list-hero {
         position: relative;
-        background: #fff;
-        border-radius: 8px;
-        margin-bottom: 15px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        height: 134px;
         overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff0f1;
+        box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
     }
-    /* 左右布局容器 */
-    .wf-card-layout {
+
+    .welfare-list-hero__image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+
+    .welfare-list-hero__copy {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
         display: flex;
-        padding: 15px;
+        padding-left: 18px;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        box-sizing: border-box;
+        text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
     }
-    /* 左侧图片容器 */
-    .wf-card-img-container {
-        width: 120px;
-        height: 120px;
-        flex-shrink: 0;
-        margin-right: 15px;
+
+    .welfare-list-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
     }
-    /* 右侧信息容器 */
-    .wf-card-content {
-        flex: 1;
-        min-width: 0;
+
+    .welfare-list-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+    }
+
+    .welfare-list-filter-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .welfare-list-filter-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-filter {
+        margin-bottom: 10px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+    }
+
+    .welfare-list-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .welfare-list-filter .van-dropdown-menu__title {
+        color: #263548;
+        font-size: 15px;
+    }
+
+    .welfare-list-filter .van-dropdown-menu__title--active,
+    .welfare-list-filter .van-dropdown-item__option--active,
+    .welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .welfare-list-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .welfare-list-filter .van-dropdown-item__option {
+        min-height: 48px;
+        padding: 0 16px;
+        color: #46566c;
+        font-size: 14px;
+    }
+
+    .welfare-list-cards {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        gap: 10px;
     }
-    /* 标题样式 */
-    .wf-card-heading {
+
+    .welfare-list-card {
+        position: relative;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        cursor: pointer;
+    }
+
+    .welfare-list-card__cover {
+        display: block;
+        width: 100%;
+        height: 150px;
+        background-color: #f7f9fc;
+        line-height: 0;
+    }
+
+    /* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
+    .welfare-list-card__cover .van-image__img {
+        width: 100%;
+        height: 100% !important;
+        object-fit: cover !important;
+        object-position: center;
+        background-color: #f7f9fc;
+    }
+
+    .welfare-list-card__cover .van-image__loading,
+    .welfare-list-card__cover .van-image__error {
+        color: #9ba9bc;
+        background-color: #edf4fc;
+        font-size: 13px;
+    }
+
+    /* 空图外层复用 welfare-list-card__cover 的固定高度，避免占位高度被 100% 覆盖。 */
+    .welfare-list-card__cover--empty {
+        display: block;
+    }
+
+    .welfare-list-card__image-empty {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background-color: #edf4fc;
+        color: #9ba9bc;
+        font-size: 13px;
+        line-height: 20px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__image-empty .van-icon {
+        font-size: 34px;
+    }
+
+    .welfare-list-card__image-empty span {
+        margin-top: 7px;
+    }
+
+    .welfare-list-card__body {
+        position: relative;
+        padding: 12px 42px 14px 14px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__head {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        column-gap: 8px;
+    }
+
+    .welfare-list-card__title {
+        min-width: 0;
+        overflow: hidden;
+        flex: 1;
+        color: #202938;
         font-size: 16px;
-        font-weight: bold;
-        margin-bottom: 8px;
-        color: #333;
-        white-space: nowrap;
-        overflow: hidden;
+        line-height: 23px;
+        font-weight: 600;
         text-overflow: ellipsis;
-        width: 100%;
-    }
-    /* 时间信息样式 */
-    .wf-time-row {
-        font-size: 14px;
-        color: #666;
-        margin-bottom: 5px;
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
     }
-    .wf-time-label {
-        color: #999;
-        display: inline-block;
-        width: 70px;
+
+    .welfare-list-card__status {
+        display: inline-flex;
+        min-width: 54px;
+        height: 25px;
+        padding: 0 10px;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        border-radius: 13px;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 25px;
+    }
+
+    .welfare-list-card__status.is-available {
+        color: #1989fa;
+        background-color: #eaf3ff;
+    }
+
+    .welfare-list-card__status.is-selected {
+        color: #2da66f;
+        background-color: #e9f8f0;
+    }
+
+    .welfare-list-card__status.is-upcoming {
+        color: #d78b20;
+        background-color: #fff5e4;
+    }
+
+    .welfare-list-card__status.is-ended {
+        color: #8793a5;
+        background-color: #f0f2f5;
+    }
+
+    .welfare-list-card__time {
+        margin-top: 6px;
+        overflow: hidden;
+        color: #8491a6;
+        font-size: 12px;
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .welfare-list-card__arrow {
+        position: absolute;
+        top: 50%;
+        right: 14px;
+        color: #adb7c6;
+        font-size: 17px;
+        transform: translateY(-50%);
+    }
+
+    .welfare-list-page .van-list__finished-text,
+    .welfare-list-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+    }
+
+    .welfare-list-empty {
+        display: flex;
+        min-height: 300px;
+        padding: 28px 18px;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    /* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
+    .welfare-list-empty img {
+        display: block;
+        width: 86%;
+        max-width: 300px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .welfare-list-empty__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .welfare-list-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
     }
 </style>
 
 <div id="app" v-cloak>
-    <van-sticky>
-        <van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="我的福利"></van-nav-bar>
-        <van-dropdown-menu>
-            <year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
+    <div class="welfare-list-page">
+        <van-nav-bar
+                title="我的福利"
+                left-arrow
+                left-text="返回"
+                fixed
+                placeholder
+                @click-left="goBack"
+        ></van-nav-bar>
 
-    <div>
-        <van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
-            <div class="wf-welfare-list">
-                <div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openView(row)">
-                    <van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
-                        {{row.isChoose?'已选择':'未选择'}}
-                    </van-tag>
-                    <div class="wf-card-layout">
-                        <div class="wf-card-img-container">
-                            <van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
-                        </div>
-                        <div class="wf-card-content">
-                            <div class="wf-card-heading">{{row.name}}</div>
-                            <div class="wf-time-row">
-                                <span class="wf-time-label">开始时间:</span>
-                                {{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
-                            </div>
-                            <div class="wf-time-row">
-                                <span class="wf-time-label">结束时间:</span>
-                                {{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
-                            </div>
-                        </div>
-                    </div>
+        <div class="welfare-list-content">
+            <section class="welfare-list-hero">
+                <img
+                        class="welfare-list-hero__image"
+                        src="/assets/mobile/img/home/v4/feature-benefit.png"
+                        alt="暖心福利插画"
+                >
+                <div class="welfare-list-hero__copy">
+                    <div class="welfare-list-hero__title">暖心福利</div>
+                    <div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
                 </div>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="welfare-list-filter-sticky">
+                    <van-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
+                        <year-van-dropdown-item
+                                :num="5"
+                                v-model="pageForm.year"
+                                @change="doSearch"
+                        ></year-van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
+
+            <van-list
+                    v-if="tableData.length > 0"
+                    v-model="loading"
+                    :finished="finished"
+                    finished-text="没有更多了"
+                    @load="pageData"
+            >
+                <div class="welfare-list-cards">
+                    <article
+                            v-for="row in tableData"
+                            :key="row.id"
+                            class="welfare-list-card"
+                            @click="openView(row)"
+                    >
+                        <van-image
+                                v-if="hasCoverImage(row.cover)"
+                                class="welfare-list-card__cover"
+                                :src="row.cover"
+                                :alt="row.name"
+                                width="100%"
+                        >
+                            <template #loading>
+                                <van-loading type="spinner" size="22"></van-loading>
+                            </template>
+                            <template #error>
+                                <div class="welfare-list-card__image-empty">
+                                    <van-icon name="photo-o"></van-icon>
+                                    <span>暂无图片</span>
+                                </div>
+                            </template>
+                        </van-image>
+                        <div v-else class="welfare-list-card__cover welfare-list-card__cover--empty">
+                            <div class="welfare-list-card__image-empty">
+                                <van-icon name="photo-o"></van-icon>
+                                <span>暂无图片</span>
+                            </div>
+                        </div>
+
+                        <div class="welfare-list-card__body">
+                            <div class="welfare-list-card__head">
+                                <div class="welfare-list-card__title">{{ row.name }}</div>
+                                <span
+                                        class="welfare-list-card__status"
+                                        :class="row.isChoose ? 'is-selected' : 'is-available'"
+                                >{{ row.isChoose ? '已选择' : '未选择' }}</span>
+                            </div>
+                            <div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
+                                选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
+                            </div>
+                            <div class="welfare-list-card__time" v-else>选择时间：未设置</div>
+                            <van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
+                        </div>
+                    </article>
+                </div>
+            </van-list>
+
+            <div class="welfare-list-empty" v-else-if="!loading">
+                <img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
+                <div class="welfare-list-empty__title">暂无福利项目</div>
+                <div class="welfare-list-empty__hint">当前年度暂未发布福利项目</div>
             </div>
-        </van-list>
-        <van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
+        </div>
     </div>
     <select-view ref="selectViewRef"></select-view>
 </div>
@@ -125,34 +440,59 @@ layout("/layouts/platform_h5.html"){
             }
         },
         methods: {
+            goBack() {
+                this.$pjaxReplace("/platform/h5/home")
+            },
             doSearch() {
-                this.tableKey = new Date().getTime()
                 this.pageForm.pageNumber = 1
                 this.pageForm.totalCount = 0
                 this.tableData = []
+                this.finished = false
                 this.pageData()
             },
+
+            /**
+             * 我的福利分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
+             * 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
+             */
             pageData() {
                 this.loading = true
-                this.$axios.post("/platform/welfare/mine/pageData", this.pageForm).then((res) => {
-                    this.tableData = this.tableData.concat(res.data.list)
-                    if (this.tableData.length === res.data.totalCount) {
-                        this.finished = true
-                    } else {
-                        this.pageForm.pageNumber++
-                    }
-                    this.pageForm.totalCount = res.data.totalCount
-                    this.loading = false
-                })
+                this.$axios.post("/platform/welfare/mine/pageData", this.pageForm)
+                    .then((res) => {
+                        if (res.code !== 0 || !res.data) return
+                        const list = res.data.list || []
+                        this.tableData = this.tableData.concat(list)
+                        this.pageForm.totalCount = res.data.totalCount || 0
+                        if (this.tableData.length >= this.pageForm.totalCount) {
+                            this.finished = true
+                        } else {
+                            this.pageForm.pageNumber++
+                        }
+                    })
+                    .finally(() => {
+                        this.loading = false
+                    })
             },
-            async getUserSelection(projectId) {
-                const resp = await this.$axios.post("/platform/welfare/mine/getUserSelection", {
+
+            /**
+             * 查询福利选择详情，projectId 为福利项目 ID，userId 使用当前登录用户 ID。
+             * 返回值为 Axios Promise，响应 data 为用户已选择的福利明细数组。
+             */
+            getUserSelection(projectId) {
+                return this.$axios.post("/platform/welfare/mine/getUserSelection", {
                     projectId: projectId,
                     userId: this.$store.state.user.id
                 })
-                return resp
             },
-            async openView(item) {
+
+            /**
+             * 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
+             */
+            hasCoverImage(cover) {
+                return typeof cover === "string" && !!cover.trim()
+            },
+
+            openView(item) {
                 this.$refs.selectViewRef.onOpen(item.id)
             }
         },
diff --git a/src/main/resources/views/platform/zhghh5/welfare/mine/selectView.js b/src/main/resources/views/platform/zhghh5/welfare/mine/selectView.js
index dac65483..d524d5c4 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/mine/selectView.js
+++ b/src/main/resources/views/platform/zhghh5/welfare/mine/selectView.js
@@ -324,7 +324,7 @@ const selectView = {
         /deep/ .welfare-card__header i {
             font-size: 16px;
             margin-right: 6px;
-            color: var(--color-primary);
+            color: #1989fa;
         }
 
         /deep/ .welfare-card__header span {
diff --git a/src/main/resources/views/platform/zhghh5/welfare/select/index.html b/src/main/resources/views/platform/zhghh5/welfare/select/index.html
index 0d5dd620..218d0d56 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/select/index.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/select/index.html
@@ -4,14 +4,16 @@ layout("/layouts/platform_h5.html"){
 
 <style>
     :root {
-        --primary-color: #2b85e4;
-        --primary-light: #ecf6ff;
-        --primary-gradient: linear-gradient(135deg, #2b85e4, #1665c0);
-        --text-primary: #303133;
-        --text-secondary: #606266;
-        --text-light: #909399;
-        --border-color: #ebeef5;
-        --bg-color: #f5f7fa;
+        /* Vant 原生标签、按钮及步进器统一读取该主色变量。 */
+        --color-primary: #1989fa;
+        --primary-color: #1989fa;
+        --primary-light: #edf6ff;
+        --primary-gradient: linear-gradient(135deg, #1989fa, #1989fa);
+        --text-primary: #202938;
+        --text-secondary: #596779;
+        --text-light: #8c98aa;
+        --border-color: #e6ebf2;
+        --bg-color: #f3f7fd;
         --success-color: #67c23a;
         --warning-color: #e6a23c;
         --danger-color: #f56c6c;
@@ -19,13 +21,81 @@ layout("/layouts/platform_h5.html"){
 
     .page-container {
         min-height: 100vh;
+        padding-bottom: calc(118px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
         background: var(--bg-color);
     }
 
+    .page-container .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .page-container .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .page-container .van-nav-bar .van-icon,
+    .page-container .van-nav-bar__text {
+        color: #1989fa;
+    }
+
+    .welfare-page-skeleton {
+        min-height: calc(100vh - 46px);
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        background: var(--bg-color);
+        box-sizing: border-box;
+    }
+
+    .welfare-page-skeleton .van-skeleton {
+        padding: 0;
+    }
+
+    .welfare-skeleton-hero .van-skeleton__row {
+        height: 154px;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    .welfare-skeleton-option {
+        margin: 12px;
+        padding: 14px;
+        border-radius: 12px;
+        background: #fff;
+        box-sizing: border-box;
+    }
+
+    .welfare-skeleton-section .van-skeleton__title,
+    .welfare-skeleton-option .van-skeleton__title {
+        height: 18px;
+    }
+
+    .welfare-skeleton-section {
+        margin: 20px 12px 10px;
+    }
+
+    .welfare-skeleton-option {
+        min-height: 136px;
+    }
+
+    .welfare-skeleton-option .van-skeleton__avatar {
+        width: 108px;
+        height: 108px;
+        margin-right: 14px;
+        border-radius: 8px;
+    }
+
+    .welfare-skeleton-option .van-skeleton__row {
+        height: 13px;
+        margin-top: 13px;
+    }
+
     .welfare-header {
         position: relative;
-        height: 220px;
+        height: 154px;
         overflow: hidden;
+        background-color: #f7e9ea;
     }
 
     .welfare-header-img {
@@ -41,18 +111,19 @@ layout("/layouts/platform_h5.html"){
         left: 0;
         right: 0;
         bottom: 0;
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
+        background: linear-gradient(to bottom, rgba(18, 32, 51, 0.02) 35%, rgba(20, 31, 48, 0.68) 100%);
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        padding: 20px;
+        padding: 16px 14px;
+        box-sizing: border-box;
         color: #fff;
     }
 
     .welfare-title {
-        font-size: 24px;
-        font-weight: bold;
-        margin-bottom: 8px;
+        font-size: 22px;
+        line-height: 30px;
+        font-weight: 700;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }
 
@@ -73,85 +144,9 @@ layout("/layouts/platform_h5.html"){
         padding: 0;
     }
 
-    .welfare-info-card {
-        background: #fff;
-        overflow: hidden;
-        margin-bottom: 12px;
-        width: 100%;
-        position: relative;
-    }
-
-    .welfare-info-header {
-        /*padding: 16px;*/
-        color: var(--text-primary);
-        font-weight: 600;
-        font-size: 17px;
-        display: flex;
-        align-items: center;
-        position: relative;
-    }
-
-    .welfare-info-header::before {
-        content: "";
-        width: 3px;
-        height: 16px;
-        background: var(--primary-gradient);
-        margin-right: 8px;
-        border-radius: 3px;
-    }
-
-    .welfare-info-header .van-icon {
-        font-size: 18px;
-        margin-right: 6px;
-        color: var(--primary-color);
-        position: relative;
-        top: -1px;
-    }
-
-    .welfare-info-header .header-text {
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-
-    .welfare-cell-group {
-        padding: 0;
-    }
-
-    .welfare-cell-group .van-cell {
-        padding: 14px 16px;
-    }
-
-    .welfare-cell-group .van-cell:not(:last-child)::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 16px;
-        right: 16px;
-        height: 1px;
-        background: var(--border-color);
-        transform: scaleY(0.5);
-    }
-
-    .welfare-cell-group .van-cell__title {
-        color: var(--text-secondary);
-        font-size: 14px;
-    }
-
-    .welfare-cell-group .van-cell__value {
-        color: var(--text-primary);
-        font-size: 14px;
-    }
-
-    .welfare-notice {
-        margin: 12px 16px;
-        border-radius: 8px;
-        overflow: hidden;
-    }
-
     .welfare-options-container {
-        background: #ffffff;
-        padding: 0 16px 80px 16px;
+        padding: 0 12px 16px;
+        background: transparent;
     }
 
     .welfare-option {
@@ -164,12 +159,14 @@ layout("/layouts/platform_h5.html"){
         position: relative;
         display: flex;
         flex-direction: row;
-        min-height: 120px;
+        min-height: 112px;
+        border: 1px solid transparent;
+        box-sizing: border-box;
     }
 
     .welfare-option.selected {
-        box-shadow: 0 4px 16px rgba(25, 137, 250, 0.15);
-        transform: translateY(-2px);
+        border-color: var(--primary-color);
+        box-shadow: 0 5px 16px rgba(25, 137, 250, 0.16);
     }
 
     .welfare-option.selected::after {
@@ -179,24 +176,24 @@ layout("/layouts/platform_h5.html"){
         left: 0;
         right: 0;
         bottom: 0;
-        border: 2px solid var(--primary-color);
+        border: 1px solid var(--primary-color);
         border-radius: 12px;
         pointer-events: none;
     }
 
     .welfare-option-image {
-        width: 100px;
-        height: 100px;
+        width: 92px;
+        height: 92px;
         margin: 10px 0 10px 10px;
         position: relative;
         flex-shrink: 0;
-        border-radius: 8px;
+        border-radius: 9px;
         overflow: hidden;
         background: #f7f8fa;
     }
 
     .welfare-option-content {
-        padding: 10px 12px;
+        padding: 8px 10px;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -208,8 +205,8 @@ layout("/layouts/platform_h5.html"){
         font-size: 15px;
         font-weight: bold;
         color: var(--text-primary);
-        margin-bottom: 5px;
-        padding-right: 34px;
+        margin-bottom: 4px;
+        padding-right: 56px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -223,8 +220,9 @@ layout("/layouts/platform_h5.html"){
         padding: 0 4px;
         margin-right: 5px;
         border-radius: 3px;
-        background: var(--primary-color);
-        color: #fff;
+        border: 1px solid var(--primary-color);
+        background: #fff;
+        color: #1989fa;
         font-size: 11px;
         line-height: 17px;
         vertical-align: 1px;
@@ -232,7 +230,7 @@ layout("/layouts/platform_h5.html"){
 
     .welfare-option-rank {
         margin-bottom: 4px;
-        color: #d6a21e;
+        color: #f29a22;
         font-size: 12px;
         line-height: 1.3;
         display: flex;
@@ -258,8 +256,10 @@ layout("/layouts/platform_h5.html"){
 
     .welfare-option-footer {
         margin-top: auto;
+        padding-top: 5px;
+        border-top: 1px solid #edf1f6;
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
         gap: 10px;
     }
@@ -271,18 +271,10 @@ layout("/layouts/platform_h5.html"){
     .welfare-option-checkbox .van-stepper {
     }
 
-    .welfare-option-radio {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-    }
-
     .welfare-detail-btn {
-        height: 24px;
-        padding: 0 10px;
-        border-radius: 12px;
-        background: var(--primary-color);
-        color: #fff;
+        height: 26px;
+        padding: 0;
+        color: #1989fa;
         font-size: 13px;
         display: flex;
         align-items: center;
@@ -291,10 +283,25 @@ layout("/layouts/platform_h5.html"){
     }
 
     .welfare-detail-btn .van-icon {
-        margin-right: 3px;
+        margin-left: 4px;
         font-size: 14px;
     }
 
+    .welfare-radio-select-btn {
+        min-width: 64px;
+        height: 27px;
+        padding: 0 16px;
+        border-radius: 6px;
+        font-size: 13px;
+        line-height: 25px;
+    }
+
+    .welfare-radio-select-btn.is-selected {
+        color: #fff;
+        border-color: var(--primary-color);
+        background: var(--primary-color);
+    }
+
     .welfare-detail-popup {
         padding: 20px;
         max-height: 70vh;
@@ -318,15 +325,18 @@ layout("/layouts/platform_h5.html"){
 
     .welfare-tag {
         position: absolute;
-        right: 41px;
-        top: -3px;
+        right: 10px;
+        top: 10px;
         z-index: 2;
     }
 
     .welfare-tag .van-tag {
-        padding: 2px 6px;
+        height: 24px;
+        padding: 0 9px;
+        border-radius: 12px;
         font-weight: 500;
         font-size: 12px;
+        line-height: 24px;
     }
 
     .welfare-deadline {
@@ -351,156 +361,295 @@ layout("/layouts/platform_h5.html"){
         left: 0;
         right: 0;
         background: #fff;
-        padding: 12px 16px;
-        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        border-radius: 14px 14px 0 0;
+        box-shadow: 0 -5px 20px rgba(45, 79, 118, .10);
         z-index: 99;
     }
 
+    .welfare-footer-summary {
+        margin-bottom: 9px;
+        color: #303846;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+    }
+
+    .welfare-footer-summary strong {
+        margin: 0 2px;
+        color: #1989fa;
+        font-size: 18px;
+        font-weight: 600;
+    }
+
     .welfare-submit-btn {
         width: 100%;
         height: 44px;
         font-size: 16px;
         font-weight: 500;
         border-radius: 22px;
-        background: var(--primary-gradient);
+        background: linear-gradient(90deg, #1989fa, #1989fa);
         border: none;
     }
 
-    .confirm-action-sheet {
-        padding: 24px 20px 20px;
+    /* 全屏确认页采用固定导航栏、独立滚动内容区和固定操作区，避免页面整体跟随滚动。 */
+    .confirm-full-popup {
+        background: #f5f7fa;
     }
 
-    .confirm-sheet-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--text-primary);
-        margin-bottom: 20px;
-        text-align: center;
+    .confirm-popup-page {
+        height: 100%;
+        padding-top: 46px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .confirm-popup-page .van-nav-bar {
+        z-index: 20;
     }
 
-    /* 调整确认弹窗布局，使按钮固定在底部 */
     .confirm-content-scroll {
-        max-height: calc(70vh - 140px);
+        flex: 1;
+        min-height: 0;
         overflow-y: auto;
-        padding-bottom: 16px;
+        padding: 16px 16px 4px;
+        box-sizing: border-box;
         -webkit-overflow-scrolling: touch; /* 提升iOS滚动体验 */
     }
 
     .confirm-fixed-buttons {
-        position: sticky;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        flex-shrink: 0;
         background: #fff;
-        padding-top: 12px;
+        padding: 12px 16px;
+        padding-bottom: calc(12px + env(safe-area-inset-bottom));
         z-index: 10;
         border-top: 1px solid rgba(0, 0, 0, 0.05);
         display: flex;
         column-gap: 10px;
     }
 
-    /* 手机号输入样式 */
-    .mobile-input-section {
-        margin-bottom: 20px;
+    /* 收货信息与福利清单统一使用白色圆角卡片，保持确认页的信息层级清晰。 */
+    .confirm-card {
+        margin-bottom: 14px;
         background: #fff;
-        border-radius: 8px;
-        overflow: hidden;
-        border: 1px solid #ebeef5;
-    }
-
-    .mobile-input-section .van-field {
-        padding: 12px 16px;
-    }
-
-    .mobile-input-section .van-field__label {
-        width: 70px;
-        color: var(--text-secondary);
-        font-weight: 500;
-    }
-
-    .mobile-input-section .van-field__control {
-        color: var(--text-primary);
-    }
-
-    /* 确认区域样式 */
-    .confirm-section {
-        margin-bottom: 20px;
-        background: #f8f9fa;
         border-radius: 12px;
-        padding: 16px;
+        overflow: hidden;
+        box-shadow: 0 5px 18px rgba(59, 91, 133, 0.06);
     }
 
-    .confirm-section-title {
-        font-size: 15px;
-        font-weight: 500;
-        color: var(--text-primary);
-        margin-bottom: 12px;
-        position: relative;
-        padding-left: 12px;
-    }
-
-    .confirm-section-title::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        height: 14px;
-        width: 3px;
-        background: var(--primary-gradient);
-        border-radius: 3px;
-    }
-
-    .selected-items {
-        margin-bottom: 12px;
-    }
-
-    .selected-item {
-        display: flex;
-        align-items: center;
-        padding: 12px;
-        background: #fff;
-        border-radius: 8px;
-        margin-bottom: 8px;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-    }
-
-    .selected-item:last-child {
-        margin-bottom: 0;
-    }
-
-    .selected-item-name {
-        flex: 1;
-        font-size: 14px;
-        color: var(--text-primary);
-    }
-
-    .selected-item-count {
-        font-size: 14px;
-        color: var(--primary-color);
-        font-weight: 500;
-        margin-left: 12px;
-    }
-
-    .confirm-dialog-total {
+    .confirm-card-header {
+        min-height: 52px;
+        padding: 0 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        background: #fff;
-        padding: 12px;
-        border-radius: 8px;
-        margin-top: 8px;
+        box-sizing: border-box;
     }
 
-    .confirm-dialog-total .total-label {
-        color: var(--text-secondary);
+    .confirm-card-title {
+        display: flex;
+        align-items: center;
+        color: var(--text-primary);
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .confirm-card-title .van-icon {
+        margin-right: 8px;
+        color: #1989fa;
+        font-size: 20px;
+    }
+
+    .confirm-address-select {
+        margin: 0 14px 8px;
+        padding: 13px 12px;
+        display: flex;
+        align-items: center;
+        border-radius: 10px;
+        background: linear-gradient(90deg, #f0f6ff, #f7faff);
+    }
+
+    .confirm-address-icon {
+        width: 46px;
+        height: 46px;
+        margin-right: 12px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: #e2edff;
+        color: #1989fa;
+        font-size: 24px;
+    }
+
+    .confirm-address-content {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .confirm-address-label {
+        margin-bottom: 4px;
+        color: var(--text-primary);
         font-size: 14px;
+        line-height: 20px;
     }
 
-    .confirm-dialog-total .total-value {
+    .confirm-address-value {
+        overflow: hidden;
+        color: var(--text-light);
+        font-size: 13px;
+        line-height: 19px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .confirm-address-arrow {
+        margin-left: 10px;
+        flex-shrink: 0;
+        color: #8a94a3;
+        font-size: 16px;
+    }
+
+    .confirm-receipt-fields {
+        padding: 0 14px 4px;
+    }
+
+    .confirm-receipt-fields .van-field {
+        padding: 13px 2px 13px 12px;
+    }
+
+    /* 当前 Vant 必填伪元素缺少明确纵向位置，在收货卡片内改为固定居中的红色圆点。 */
+    .confirm-receipt-fields .van-cell--required::before {
+        position: absolute;
+        top: 50%;
+        left: 2px;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: #ee0a24;
+        content: "";
+        transform: translateY(-50%);
+    }
+
+    .confirm-receipt-fields .van-field__label {
+        width: 76px;
+        color: var(--text-primary);
         font-weight: 500;
-        color: var(--primary-color);
-        font-size: 15px;
+    }
+
+    .confirm-receipt-fields .van-field__control {
+        color: var(--text-primary);
+    }
+
+    .welfare-list-summary {
+        display: flex;
+        align-items: center;
+        color: var(--text-light);
+        font-size: 13px;
+    }
+
+    .welfare-list-summary strong {
+        margin-left: 8px;
+        padding: 3px 8px;
+        border-radius: 12px;
+        background: var(--primary-color);
+        color: #fff;
+        font-size: 13px;
+        font-weight: 500;
+    }
+
+    .confirm-welfare-list {
+        padding: 0 16px 6px;
+    }
+
+    .confirm-welfare-item {
+        min-height: 52px;
+        display: flex;
+        align-items: center;
+        border-top: 1px solid #eef1f5;
+    }
+
+    .confirm-welfare-item:first-child {
+        border-top: 0;
+    }
+
+    .confirm-welfare-index {
+        width: 25px;
+        height: 25px;
+        margin-right: 10px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        background: var(--primary-color);
+        color: #fff;
+        font-size: 11px;
+        line-height: 25px;
+        text-align: center;
+    }
+
+    .confirm-welfare-name {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+        color: var(--text-primary);
+        font-size: 14px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .confirm-welfare-count {
+        margin-left: 10px;
+        padding: 3px 10px;
+        flex-shrink: 0;
+        border-radius: 12px;
+        background: #f1f6ff;
+        color: #1989fa;
+        font-size: 12px;
+    }
+
+    /* 当前福利确认页只负责签名卡片外壳，签字和重新签名的内部样式由公共组件维护。 */
+    .signature-confirm-card {
+        padding: 0 14px 14px;
+        box-sizing: border-box;
+    }
+
+    .signature-card-header {
+        min-height: 50px;
+        display: flex;
+        align-items: center;
+    }
+
+    .signature-card-title {
+        display: flex;
+        align-items: center;
+        color: var(--text-primary);
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .signature-card-title::before {
+        width: 3px;
+        height: 15px;
+        margin-right: 8px;
+        border-radius: 3px;
+        background: var(--primary-color);
+        content: "";
+    }
+
+    .signature-card-note {
+        margin-left: 7px;
+        color: var(--text-light);
+        font-size: 12px;
+        font-weight: normal;
+    }
+
+    .signature-card-note::before {
+        margin-right: 5px;
+        color: #ee0a24;
+        content: "·";
     }
 
     .action-sheet-buttons {
@@ -511,35 +660,36 @@ layout("/layouts/platform_h5.html"){
         width: 100%;
     }
 
-    .section-divider {
-        height: 8px;
-        background: var(--bg-color);
+    /* 收货地址使用右侧全屏 Popup，顶部导航、地址列表和底部操作区相互独立。 */
+    .address-full-popup {
+        background: #f5f7fa;
+    }
+
+    /* 全局语音入口位于 Popup 之上，当前页面同步使用地址主题色。 */
+    .h5-voice-menu {
+        background: #1989fa;
+        box-shadow: 0 6px 18px rgba(25, 137, 250, 0.35);
     }
 
     .welfare-section-title {
         position: relative;
-        padding: 16px;
-        font-size: 17px;
+        min-height: 40px;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        font-size: 14px;
         font-weight: 600;
         color: var(--text-primary);
         display: flex;
         align-items: center;
-        background: #ffffff;
-    }
-
-    .welfare-section-title::before {
-        content: "";
-        width: 3px;
-        height: 16px;
-        background: var(--primary-gradient);
-        margin-right: 8px;
-        border-radius: 3px;
+        justify-content: space-between;
+        background: var(--bg-color);
+        border-bottom: 1px solid rgba(230, 235, 242, .9);
     }
 
     .welfare-section-title .van-icon {
-        font-size: 18px;
-        margin-right: 6px;
-        color: var(--primary-color);
+        font-size: 16px;
+        margin-right: 5px;
+        color: #1989fa;
         position: relative;
         top: -1px;
     }
@@ -557,111 +707,66 @@ layout("/layouts/platform_h5.html"){
         font-weight: normal;
     }
 
-    /* 签名组件样式 */
-    .h5-signature {
-        margin-top: 8px;
-        border: 1px dashed var(--border-color);
-        border-radius: 8px;
-        background-color: #fff;
-        min-height: 150px;
-    }
-
-    .signature-tips {
-        color: var(--text-light);
+    .welfare-section-title .title-selection {
+        flex: none;
+        color: #7d899b;
         font-size: 13px;
-        text-align: center;
-        margin-top: 6px;
+        font-weight: normal;
     }
 
-    .welfare-info-card .van-collapse-item__content {
-        padding: 0;
-    }
-    .welfare-info-card .welfare-cell-group .van-cell__title {
-        max-width: 70px;
-    }
-    .welfare-info-card .welfare-cell-group .van-cell {
-        padding: 8px 16px;
+    .welfare-section-title .title-selection strong {
+        margin-left: 3px;
+        color: #1989fa;
+        font-size: 17px;
+        font-weight: 600;
     }
+
 </style>
 
 <div id="app" v-cloak>
     <div class="page-container">
-        <van-nav-bar title="福利选择" left-text="返回" left-arrow @click-left="historyBack" fixed
+        <van-nav-bar title="福利选择" left-text="返回" left-arrow @click-left="handlePageBack" fixed
                      placeholder></van-nav-bar>
 
-        <!-- 项目头部信息 -->
-        <div class="welfare-header" v-if="projectInfo.id">
-            <img :src="projectInfo.cover" class="welfare-header-img"/>
-            <div class="welfare-header-overlay">
-                <div class="welfare-title">{{ projectInfo.name }}</div>
-                <div class="welfare-subtitle">
-                    <van-icon name="calendar-o"/>
-                    <span>{{ projectInfo.year }}年</span>
-                </div>
+        <!-- 页面初始化期间展示内容骨架，全局 Loading 继续负责阻止重复操作。 -->
+        <div class="welfare-page-skeleton" v-if="pageLoading">
+            <van-skeleton class="welfare-skeleton-hero" :row="1"></van-skeleton>
+            <div class="welfare-skeleton-section">
+                <van-skeleton title :row="1"></van-skeleton>
+            </div>
+            <div class="welfare-skeleton-option" v-for="index in 3" :key="'welfare-skeleton-' + index">
+                <van-skeleton title avatar :row="3"></van-skeleton>
             </div>
         </div>
 
-        <!-- 加载中 -->
-        <van-empty v-if="!projectInfo.id" description="加载中...">
-            <template #image>
-                <van-loading type="spinner" color="#1989fa"/>
-            </template>
-        </van-empty>
+        <van-empty v-else-if="!projectInfo.id" description="暂无福利信息"></van-empty>
 
-        <div class="main-content" v-if="projectInfo.id">
+        <!-- 项目头部信息 -->
+        <div class="welfare-header" v-if="!pageLoading && projectInfo.id">
+            <img :src="projectInfo.cover" class="welfare-header-img"/>
+            <div class="welfare-header-overlay">
+                <div class="welfare-title">{{ projectInfo.name }}</div>
+            </div>
+        </div>
+
+        <div class="main-content" v-if="!pageLoading && projectInfo.id">
             <!-- 截止时间提醒 -->
             <div class="welfare-deadline" v-if="isDeadlineSoon">
                 <van-icon name="warning-o"/>
                 <span>选择截止时间即将到期，请尽快选择！</span>
             </div>
 
-            <!-- 选择提示 -->
-            <div class="welfare-notice">
-                <van-notice-bar wrapable :scrollable="false" background="#ecf6ff" color="var(--primary-color)">
-                    <van-icon name="info-o" style="margin-right: 5px"></van-icon>
-                    {{ projectInfo.isCheckBox === "radio" ? "请选择一项福利" : "您可以选择多项福利，最多可选 " +
-                    (projectInfo.multiSelectNum ||
-                    projectInfo.options.length) + " 项" }}
-                </van-notice-bar>
-            </div>
-
-            <!-- 项目信息卡片 -->
-            <div class="welfare-info-card">
-
-
-                <van-collapse v-model="activeNames">
-                    <van-collapse-item name="1">
-                        <template #title>
-                            <div class="welfare-info-header">
-                                <div class="header-text">
-                                    <van-icon name="info-o"></van-icon>
-                                    <span>项目信息</span>
-                                </div>
-                            </div>
-                        </template>
-                        <div class="welfare-cell-group">
-                            <van-cell title="选择时间"
-                                      :value="formatTimeRange(projectInfo.choiceTimeStart, projectInfo.choiceTimeEnd)"></van-cell>
-                            <van-cell title="发放时间"
-                                      :value="formatTimeRange(projectInfo.provideTimeStart, projectInfo.provideTimeEnd)"></van-cell>
-                            <van-cell title="发放地点" :value="projectInfo.provideAddress"></van-cell>
-                        </div>
-                    </van-collapse-item>
-                    <!--                    <van-cell title="发放方式" :value="getProvideModeName(projectInfo.provideMode)"></van-cell>-->
-                    <!--                    <van-cell title="签字方式" :value="getSignModeName(projectInfo.signMode)"></van-cell>-->
-                </van-collapse>
-            </div>
-
-            <div class="section-divider"></div>
-
-            <!-- 福利选项标题 -->
-            <div class="welfare-section-title">
-                <div class="title-text">
-                    <van-icon name="gift-o"/>
-                    <span>福利选项</span>
-                    <span class="title-count">共 {{ projectInfo.options.length }} 项</span>
+            <!-- 标题到达顶部导航栏下方后固定，福利卡片继续在标题下方滚动。 -->
+            <van-sticky :offset-top="46" :z-index="30">
+                <div class="welfare-section-title">
+                    <div class="title-text">
+                        <van-icon name="gift-o"/>
+                        <span>福利选项</span>
+                        <span class="title-count">共 {{ projectInfo.options.length }} 项</span>
+                    </div>
+                    <div class="title-selection">已选 <strong>{{ selectedCount }}</strong>/{{ selectionLimit }}</div>
                 </div>
-            </div>
+            </van-sticky>
 
             <!-- 福利选项列表 -->
             <div class="welfare-options-container">
@@ -672,12 +777,14 @@ layout("/layouts/platform_h5.html"){
                         :class="{ selected: projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0 }"
                         @click="projectInfo.isCheckBox === 'radio' && !isDeadlinePassed ? selectRadioOption(option.id) : null"
                 >
-                    <div class="welfare-option-image">
+                    <div class="welfare-option-image" role="button" aria-label="查看福利图片"
+                         @click.stop="previewOptionImage(option)">
                         <van-image :src="option.imgUrl" fit="cover" width="100%" height="100%" radius="4px"></van-image>
-                        <div class="welfare-tag"
-                             v-if="projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0">
-                            <van-tag type="primary" round>已选择</van-tag>
-                        </div>
+                    </div>
+
+                    <div class="welfare-tag"
+                         v-if="projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0">
+                        <van-tag type="primary" round>已选择</van-tag>
                     </div>
 
                     <div class="welfare-option-content">
@@ -692,25 +799,27 @@ layout("/layouts/platform_h5.html"){
 
                         <div class="welfare-option-desc">{{ optionBrief(option) }}</div>
 
-                        <!-- 单选模式使用单选按钮 -->
-                        <div class="welfare-option-radio" v-if="projectInfo.isCheckBox === 'radio'">
-                            <van-radio
-                                    :name="option.id"
-                                    v-model="selectedRadioId"
-                                    @click.stop="isDeadlinePassed ? $toast.fail('已过选择截止时间，无法修改') : selectRadioOption(option.id)"
-                                    :disabled="isDeadlinePassed || (systemDefaultOption && systemDefaultOption.id !== option.id)"
-                            ></van-radio>
-                        </div>
-
                         <div class="welfare-option-footer">
                             <!-- 查看详情按钮 -->
                             <div class="welfare-detail-btn" @click.stop="showOptionDetail(option)">
-                                <van-icon name="info-o"/>
                                 <span style="position: relative; top: -0.5px">查看详情</span>
+                                <van-icon name="arrow"/>
                             </div>
 
+                            <!-- 单选模式通过明确的状态按钮完成选择，截止后保持禁用。 -->
+                            <van-button
+                                    v-if="projectInfo.isCheckBox === 'radio'"
+                                    class="welfare-radio-select-btn"
+                                    :class="{ 'is-selected': selectedRadioId === option.id }"
+                                    :disabled="isDeadlinePassed || (systemDefaultOption && systemDefaultOption.id !== option.id)"
+                                    :type="selectedRadioId === option.id ? 'primary' : 'info'"
+                                    plain
+                                    @click.stop="selectRadioOption(option.id)"
+                            >{{ selectedRadioId === option.id ? '已选择' : '选择' }}</van-button>
+
                             <!-- 多选模式使用步进器 -->
-                            <div class="welfare-option-checkbox" v-if="projectInfo.isCheckBox !== 'radio'">
+                            <div class="welfare-option-checkbox"
+                                 v-if="projectInfo.isCheckBox !== 'radio' && option.selectNum > 0">
                                 <van-stepper
                                         :key="'input-number-'+index+'-'+option.selectNumKey|| 0"
                                         v-model="option.selectNum"
@@ -725,6 +834,14 @@ layout("/layouts/platform_h5.html"){
                                         theme="round"
                                 ></van-stepper>
                             </div>
+                            <van-button
+                                    v-else-if="projectInfo.isCheckBox !== 'radio'"
+                                    class="welfare-radio-select-btn"
+                                    type="info"
+                                    plain
+                                    :disabled="isDeadlinePassed || selectedCount >= selectionLimit"
+                                    @click.stop="selectCheckboxOption(index)"
+                            >选择</van-button>
                         </div>
                     </div>
                 </div>
@@ -732,149 +849,160 @@ layout("/layouts/platform_h5.html"){
         </div>
 
         <!-- 底部提交按钮 -->
-        <div class="welfare-footer" v-if="projectInfo.id">
+        <div class="welfare-footer" v-if="!pageLoading && projectInfo.id">
+            <div class="welfare-footer-summary">
+                已选择 <strong>{{ selectedCount }}</strong> 项，还可选 <strong>{{ remainingSelectionCount }}</strong> 项
+            </div>
             <van-button type="primary" class="welfare-submit-btn" :disabled="submitButtonDisabled"
                         @click="submitSelection" round>
                 {{ isDeadlinePassed ? '已截止' : '确认选择' }}
             </van-button>
         </div>
 
-        <!-- 确认弹窗 -->
-        <van-action-sheet v-model="showConfirmDialog" :close-on-click-overlay="false" :round="true"
-                          :style="{ maxHeight: '90%' }">
-            <div class="confirm-action-sheet">
-                <div class="confirm-sheet-title">确认选择</div>
-
+        <!-- 全屏确认页从右侧滑入；顶部导航栏固定，表单内容在中间区域独立滚动。 -->
+        <van-popup v-model="showConfirmDialog" class="confirm-full-popup" position="right"
+                   :close-on-click-overlay="false" :style="{ width: '100%', height: '100%' }">
+            <div class="confirm-popup-page">
+                <van-nav-bar title="确认选择" left-text="返回" left-arrow fixed
+                             @click-left="closeHistoryLayer('confirm')"></van-nav-bar>
                 <div class="confirm-content-scroll">
-                    <!-- 手机号输入 -->
-                    <div class="mobile-input-section">
-                        <!--收货地址-->
-                        <van-field
-                                v-if="projectInfo.provideMode == 3"
-                                v-model="formData.receiveAddress"
-                                label="收货地址"
-                                rows="2"
-                                type="textarea"
-                                placeholder="请选择收货地址"
-                                readonly
-                                is-link
-                                @click="showAddressSheet = true"
-                                required
-                        ></van-field>
-                        <van-field
-                                v-model="formData.userName"
-                                label="收货人"
-                                placeholder="请输入收货人"
-                                :error="userNameError"
-                                @focus="userNameError = false"
-                                required
-                        ></van-field>
-                        <van-field
-                                v-model="formData.mobile"
-                                label="联系电话"
-                                placeholder="请输入手机号码"
-                                :error="mobileError"
-                                @focus="mobileError = false"
-                                maxlength="11"
-                                required
-                        ></van-field>
-                    </div>
-
-                    <!-- 选择内容 -->
-                    <div class="confirm-section">
-                        <div class="confirm-section-title">已选择项目</div>
-                        <div class="selected-items">
-                            <div v-for="option in selectedOptions" :key="option.id" class="selected-item">
-                                <span class="selected-item-name">{{ option.optionName }}</span>
-                                <span class="selected-item-count" v-if="projectInfo.isCheckBox === 'checkBox'">× {{ option.selectNum }}</span>
+                    <!-- 收货信息不展示状态标签，地址、收货人和联系电话继续复用原有数据与校验。 -->
+                    <div class="confirm-card">
+                        <div class="confirm-card-header">
+                            <div class="confirm-card-title">
+                                <van-icon name="location"></van-icon>
+                                <span>收货信息</span>
                             </div>
                         </div>
 
-                        <div class="confirm-dialog-total" v-if="projectInfo.isCheckBox === 'checkBox'">
-                            <span class="total-label">总数量</span>
-                            <span class="total-value">{{ totalSelectedCount }} 份</span>
+                        <div class="confirm-address-select" v-if="projectInfo.provideMode === 3"
+                             @click="openHistoryLayer('address')">
+                            <div class="confirm-address-icon">
+                                <van-icon name="location"></van-icon>
+                            </div>
+                            <div class="confirm-address-content">
+                                <div class="confirm-address-label">收货地址</div>
+                                <div class="confirm-address-value">
+                                    {{ formData.receiveAddress || '请选择收货地址' }}
+                                </div>
+                            </div>
+                            <van-icon class="confirm-address-arrow" name="arrow"></van-icon>
+                        </div>
+
+                        <div class="confirm-receipt-fields">
+                            <van-field
+                                    v-model="formData.userName"
+                                    label="收货人"
+                                    placeholder="请输入收货人"
+                                    :error="userNameError"
+                                    @focus="userNameError = false"
+                                    required
+                            ></van-field>
+                            <van-field
+                                    v-model="formData.mobile"
+                                    label="联系电话"
+                                    placeholder="请输入手机号码"
+                                    :error="mobileError"
+                                    @focus="mobileError = false"
+                                    maxlength="11"
+                                    required
+                            ></van-field>
                         </div>
                     </div>
 
-                    <!-- 签字组件 -->
-                    <div class="confirm-section" v-if="projectInfo.signMode === 2">
-                        <div class="confirm-section-title">请签字(下滑此页面打开签字版签字)</div>
-                        <h5-signature v-model="formData.userSign" ref="signatureRef"></h5-signature>
-                        <div class="signature-tips">{{ formData.userSign ? '您已完成签名' : '请在上方空白区域完成签名'
-                            }}
+                    <!-- 福利清单汇总已选种类和总份数，每行展示序号、名称及对应数量。 -->
+                    <div class="confirm-card">
+                        <div class="confirm-card-header">
+                            <div class="confirm-card-title">
+                                <van-icon name="gift-o"></van-icon>
+                                <span>福利清单</span>
+                            </div>
+                            <div class="welfare-list-summary">
+                                <span>共{{ selectedOptions.length }}种</span>
+                                <strong>{{ selectedCount }}份</strong>
+                            </div>
                         </div>
-                        <div style="text-align: right; margin-top: 8px">
-                            <van-button size="small" type="default" @click="resetSignature">重新签名</van-button>
+                        <div class="confirm-welfare-list">
+                            <div v-for="(option, index) in selectedOptions" :key="option.id"
+                                 class="confirm-welfare-item">
+                                <span class="confirm-welfare-index">
+                                    {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
+                                </span>
+                                <span class="confirm-welfare-name">{{ option.optionName }}</span>
+                                <span class="confirm-welfare-count">
+                                    × {{ projectInfo.isCheckBox === 'radio' ? 1 : option.selectNum }}
+                                </span>
+                            </div>
                         </div>
                     </div>
+
+                    <!-- 外层标题属于当前业务页，签字入口和重新签名样式由公共组件统一提供。 -->
+                    <div class="confirm-card signature-confirm-card" v-if="projectInfo.signMode === 2">
+                        <div class="signature-card-header">
+                            <div class="signature-card-title">
+                                <span>签名</span>
+                                <span class="signature-card-note">仅用于本次确认</span>
+                            </div>
+                        </div>
+                        <h5-signature v-model="formData.userSign"></h5-signature>
+                    </div>
                 </div>
 
                 <div class="confirm-fixed-buttons">
                     <van-button type="default" block round class="action-sheet-cancel"
-                                @click="showConfirmDialog = false">取消
+                                @click="closeHistoryLayer('confirm')">取消
                     </van-button>
-                    <van-button type="primary" block round @click="doSubmit">
+                    <van-button type="primary" block round :loading="isSubmitting" :disabled="isSubmitting"
+                                loading-text="提交中..." @click="doSubmit">
                         {{ hasSubmittedBefore ? '确认修改' : '确认提交'}}
                     </van-button>
                 </div>
             </div>
-        </van-action-sheet>
+        </van-popup>
 
         <!-- 选项详情弹窗 -->
         <van-popup v-model="showOptionDetailDialog" round closeable close-icon="close" position="bottom"
-                   :style="{ maxHeight: '70%' }">
+                   :style="{ maxHeight: '70%' }" @close="handleHistoryLayerComponentClose('detail')">
             <div class="welfare-detail-popup" v-if="selectedOption">
                 <div class="welfare-detail-title">{{ selectedOption.optionName }}</div>
                 <div class="welfare-detail-content" v-html="selectedOption.description"></div>
             </div>
         </van-popup>
 
-        <!-- 收货地址选择弹窗 -->
-        <van-action-sheet v-model="showAddressSheet" title="选择收货地址" :round="true">
-            <div style="padding: 16px 0 0">
-                <div
-                        v-for="address in addressOptions"
-                        :key="address.id"
-                        class="address-item"
-                        @click="selectAddress(address)"
-                        style="padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer"
-                >
-                    <div style="display: flex; justify-content: space-between; align-items: flex-start">
-                        <div style="flex: 1">
-                            <div style="font-size: 16px; font-weight: 500; color: #323233; margin-bottom: 4px">
-                                收货人：{{ address.userName }}{{ address.tel }}
-                            </div>
-                            <div style="font-size: 14px; color: #646566; line-height: 1.4">
-                                收货地址： {{ address.province }}{{ address.city }}{{ address.county }}
-                                {{address.addressDetail }}
-                            </div>
-                        </div>
-                        <van-tag v-if="address.isDefault" type="primary" size="mini" style="margin-left: 8px">默认
-                        </van-tag>
-                    </div>
-                </div>
-                <div v-if="addressOptions.length === 0" style="text-align: center; padding: 40px 16px; color: #969799">
-                    暂无收货地址
-                </div>
-            </div>
-            <div style="padding: 16px; border-top: 1px solid #f0f0f0; background: #fafafa">
-                <van-button type="info" block round @click="goToAddressManage">收货地址管理</van-button>
-            </div>
-        </van-action-sheet>
+        <!-- 收货地址从右侧全屏滑入，并继续接入页面统一的弹层历史栈。 -->
+        <van-popup v-model="showAddressPopup" class="address-full-popup" position="right"
+                   :close-on-click-overlay="false" :style="{ width: '100%', height: '100%' }"
+                   @close="handleHistoryLayerComponentClose('address')">
+            <welfare-address-manager
+                    class="address-size-compact"
+                    page-title="地址管理"
+                    selectable
+                    flat-list
+                    :show-selected-badge="false"
+                    :area-list="areaList"
+                    :selected-address-text="formData.receiveAddress || ''"
+                    @back="closeHistoryLayer('address')"
+                    @select="selectAddress"
+                    @selected-address-updated="updateSelectedAddress">
+            </welfare-address-manager>
+        </van-popup>
     </div>
 </div>
 
 <script nonce="${cspNonce!}">
+    <!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
+    <!--#include("/platform/zhghh5/welfare/address/addressManager.js"){}#-->
     new Vue({
         el: "#app",
         store,
+        components: {
+            "welfare-address-manager": WELFARE_ADDRESS_MANAGER_COMPONENT
+        },
         data() {
             return {
-                activeNames: [],
+                pageLoading: true,
                 projectInfo: {},
                 userSelection: [],
-                welfareProvideMode: [],
-                welfareSignMode: [],
                 projectId: "",
                 selectedRadioId: "", // 单选模式下选中的选项ID
                 showConfirmDialog: false,
@@ -891,9 +1019,9 @@ layout("/layouts/platform_h5.html"){
                     userName: "",//收货人
                 },
 
-                addressOptions: [],
-                showAddressSheet: false, // 收货地址选择弹窗
-                selectedAddressText: "" // 选中的收货地址显示文本
+                showAddressPopup: false, // 收货地址全屏 Popup
+                areaList: areaList,
+                historyLayerPageKey: ""
             }
         },
 
@@ -940,6 +1068,25 @@ layout("/layouts/platform_h5.html"){
                 return this.projectInfo.options.reduce((sum, option) => sum + (option.selectNum || 0), 0)
             },
 
+            // 选择上限：单选项目固定为 1，多选项目使用后台配置的最大可选数量。
+            selectionLimit() {
+                if (this.projectInfo.isCheckBox === "radio") return 1
+                if (!this.projectInfo.options) return 0
+                return Number(this.projectInfo.multiSelectNum) || this.projectInfo.options.length
+            },
+
+            // 已选数量统一供选项标题和底部操作栏展示，多选模式按实际份数统计。
+            selectedCount() {
+                if (this.projectInfo.isCheckBox === "radio") {
+                    return this.selectedRadioId ? 1 : 0
+                }
+                return this.totalSelectedCount
+            },
+
+            remainingSelectionCount() {
+                return Math.max(0, this.selectionLimit - this.selectedCount)
+            },
+
             isDeadlineSoon() {
                 if (!this.projectInfo.choiceTimeEnd) return false
 
@@ -952,11 +1099,67 @@ layout("/layouts/platform_h5.html"){
         },
 
         methods: {
+            /**
+             * 注册当前福利页面的弹层历史。
+             * 页面标识由固定前缀和福利项目 ID 组成；回调参数是当前弹层名称数组，无返回值。
+             */
+            registerHistoryLayers() {
+                this.historyLayerPageKey = "welfare-user-select-" + this.projectId
+                if (!window.h5HistoryLayerManager) return
+                window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
+                    this.syncHistoryLayerStack(stack)
+                })
+            },
+
+            // 根据浏览器历史中的弹层栈统一显示或关闭弹框，保证返回键与页面状态一致。
+            syncHistoryLayerStack(stack) {
+                this.showConfirmDialog = stack.includes("confirm")
+                this.showAddressPopup = stack.includes("address")
+                this.showOptionDetailDialog = stack.includes("detail")
+            },
+
+            // 打开弹框时同时增加一层当前地址的浏览器历史记录。
+            openHistoryLayer(layerName) {
+                if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
+                this.setHistoryLayerVisible(layerName, true)
+            },
+
+            // 主动关闭弹框时通过 history.back 回退对应弹层记录，回调在状态同步后执行。
+            closeHistoryLayer(layerName, afterClose = null) {
+                if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName, afterClose)) return
+                this.setHistoryLayerVisible(layerName, false)
+                if (typeof afterClose === "function") afterClose()
+            },
+
+            // Vant 关闭图标或遮罩触发关闭时，仅在该弹层仍位于栈顶时同步回退历史。
+            handleHistoryLayerComponentClose(layerName) {
+                if (!window.h5HistoryLayerManager) return
+                const stack = window.h5HistoryLayerManager.stack
+                if (stack[stack.length - 1] === layerName) {
+                    window.h5HistoryLayerManager.close(layerName)
+                }
+            },
+
+            // 页面左上角返回与手机返回键保持一致：有弹框先关弹框，无弹框再返回上一页。
+            handlePageBack() {
+                if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
+                    window.h5HistoryLayerManager.close()
+                    return
+                }
+                this.historyBack()
+            },
+
+            setHistoryLayerVisible(layerName, visible) {
+                if (layerName === "confirm") this.showConfirmDialog = visible
+                if (layerName === "address") this.showAddressPopup = visible
+                if (layerName === "detail") this.showOptionDetailDialog = visible
+            },
+
             optionRankText(option) {
                 if (option.rankNo) {
-                    return "此套餐在本次福利排行第" + option.rankNo + "名"
+                    return "本次福利排行榜第" + option.rankNo + "名"
                 }
-                return "此套餐暂无排行数据"
+                return "本次福利暂无排行数据"
             },
             optionBrief(option) {
                 const content = option.simpleDesc || option.description || option.supplier || ""
@@ -1003,15 +1206,41 @@ layout("/layouts/platform_h5.html"){
                     this.$set(option, 'selectNumKey', (option.selectNumKey || 0) + 1);
                 }
             },
+
+            // 多选项目的“选择”按钮首次加入一份，后续数量继续交由步进器调整。
+            selectCheckboxOption(index) {
+                if (this.isDeadlinePassed) {
+                    this.$toast.fail("已过选择截止时间，无法修改")
+                    return
+                }
+                if (this.selectedCount >= this.selectionLimit) {
+                    this.$toast.fail("所有选项总份数不能超过" + this.selectionLimit + "份")
+                    return
+                }
+                const option = this.projectInfo.options[index]
+                this.$set(option, "selectNum", 1)
+                this.selectNumChange(index, 1)
+            },
+            /**
+             * 初始化福利选择页面。
+             * 请求参数为当前福利项目 ID；返回 Promise，项目、历史选择及必要的地址数据完成后结束骨架屏。
+             */
+            loadPageData() {
+                this.pageLoading = true
+                return this.getProjectInfo()
+                    .catch(() => {
+                        this.$toast.fail("福利信息加载失败，请稍后重试")
+                    })
+                    .finally(() => {
+                        this.pageLoading = false
+                    })
+            },
             getProjectInfo() {
-                this.$axios.post("/platform/welfare/common/projectInfo", {id: this.projectId}).then((res) => {
+                return this.$axios.post("/platform/welfare/common/projectInfo", {id: this.projectId}).then((res) => {
                     if (res.code === 0) {
                         this.projectInfo = res.data
 
-                        // 获取收货地址
-                        if (this.projectInfo.provideMode === 3) {
-                            this.getAddress()
-                        }
+                        const initialRequests = []
 
                         // 初始化选项的selectNum为0
                         if (this.projectInfo.options) {
@@ -1019,8 +1248,9 @@ layout("/layouts/platform_h5.html"){
                                 this.$set(option, "selectNum", 0)
                             })
                             // 获取用户已有的选择
-                            this.getUserSelection()
+                            initialRequests.push(this.getUserSelection())
                         }
+                        return Promise.all(initialRequests)
                     } else {
                         this.$toast.fail(res.msg)
                     }
@@ -1029,7 +1259,7 @@ layout("/layouts/platform_h5.html"){
 
             // 获取用户选择的数据
             getUserSelection() {
-                this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: this.projectId}).then((resp) => {
+                return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: this.projectId}).then((resp) => {
                     if (resp.code === 0) {
                         this.userSelection = resp.data
                         this.hasSubmittedBefore = this.userSelection.length > 0
@@ -1095,7 +1325,7 @@ layout("/layouts/platform_h5.html"){
                 const deadline = new Date(this.projectInfo.choiceTimeEnd)
                 if (now > deadline) {
                     this.$toast.fail("已过选择截止时间，无法修改")
-                    this.showConfirmDialog = false
+                    this.closeHistoryLayer("confirm")
                     return
                 }
 
@@ -1175,22 +1405,22 @@ layout("/layouts/platform_h5.html"){
                         selections: JSON.stringify(selections)
                     })
                     .then((res) => {
-                        loading.clear()
-                        this.isSubmitting = false
-
                         if (res.code === 0) {
-                            this.$toast.success("选择成功")
-                            setTimeout(() => {
-                                this.$pjaxReplace("/platform/h5/welfare/userSelect/success")
-                            }, 1500)
+                            const successUrl = "/platform/h5/welfare/userSelect/success"
+                            // 提交成功后由全局历史管理器清理弹层记录并立即跳转，避免额外等待。
+                            if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.closeAllAndNavigate(successUrl)) return
+                            this.syncHistoryLayerStack([])
+                            this.$pjaxReplace(successUrl)
                         } else {
                             this.$toast.fail(res.msg)
                         }
                     })
                     .catch(() => {
+                        this.$toast.fail("网络错误，请重试")
+                    })
+                    .finally(() => {
                         loading.clear()
                         this.isSubmitting = false
-                        this.$toast.fail("网络错误，请重试")
                     })
             },
 
@@ -1222,34 +1452,6 @@ layout("/layouts/platform_h5.html"){
                 return true;
             },
 
-            // 格式化时间范围
-            formatTimeRange(start, end) {
-                if (!start || !end) return "未设置"
-
-                const startDate = this.$moment(start).format("YYYY-MM-DD")
-                const endDate = this.$moment(end).format("YYYY-MM-DD HH:mm")
-
-                if (startDate === endDate) {
-                    return startDate + " " + this.$moment(start).format("HH:mm") + "~" + this.$moment(end).format("HH:mm")
-                } else {
-                    return startDate + " ~ " + endDate
-                }
-            },
-
-            // 获取发放模式名称
-            getProvideModeName(code) {
-                if (!code || !this.welfareProvideMode.length) return "未设置"
-                const mode = this.welfareProvideMode.find((item) => item.code === code)
-                return mode ? mode.name : "未知"
-            },
-
-            // 获取签字模式名称
-            getSignModeName(code) {
-                if (!code || !this.welfareSignMode.length) return "未设置"
-                const mode = this.welfareSignMode.find((item) => item.code === code)
-                return mode ? mode.name : "未知"
-            },
-
             // 提交选择
             submitSelection() {
                 if (!this.hasSelection) {
@@ -1273,7 +1475,7 @@ layout("/layouts/platform_h5.html"){
                     }
                 }
 
-                this.showConfirmDialog = true
+                this.openHistoryLayer("confirm")
             },
 
             async openChoose(row) {
@@ -1318,30 +1520,47 @@ layout("/layouts/platform_h5.html"){
             // 显示选项详情
             showOptionDetail(option) {
                 this.selectedOption = option
-                this.showOptionDetailDialog = true
+                this.openHistoryLayer("detail")
             },
 
-            // 重置签名
-            resetSignature() {
-                this.formData.userSign = ""
-                // 如果组件有reset方法，调用它
-                if (this.$refs.signatureRef && typeof this.$refs.signatureRef.reset === "function") {
-                    this.$refs.signatureRef.reset()
+            // 点击卡片图片时仅打开 Vant 大图预览，事件停止冒泡后不会触发福利选择。
+            previewOptionImage(option) {
+                const imageUrl = option && option.imgUrl
+                if (!imageUrl) {
+                    this.$toast("暂无可预览图片")
+                    return
                 }
+                vant.ImagePreview([imageUrl])
             },
 
             // 选择收货地址
             selectAddress(address) {
-                // "收货人：" + address.userName + "，联系电话：" + address.tel + "，收货地址：" +
-                this.formData.userName = address.userName
-                this.formData.mobile = address.tel
-                this.formData.receiveAddress = address.province + address.city + address.county + address.addressDetail
-                this.showAddressSheet = false
+                this.$set(this.formData, "userName", address.userName || "")
+                this.$set(this.formData, "mobile", address.tel || "")
+                this.$set(this.formData, "receiveAddress", this.getAddressText(address))
+                this.closeHistoryLayer("address")
             },
 
-            // 跳转到地址管理页面
-            goToAddressManage() {
-                this.$pjaxReplace("/platform/h5/welfare/address/list")
+            /**
+             * 公共地址组件编辑当前选中地址后同步确认表单。
+             * address 包含姓名、手机号、省市区和详细地址；无返回值。
+             */
+            updateSelectedAddress(address) {
+                if (!address) return
+                this.$set(this.formData, "userName", address.userName || "")
+                this.$set(this.formData, "mobile", address.tel || "")
+                this.$set(this.formData, "receiveAddress", this.getAddressText(address))
+            },
+
+            /**
+             * 拼接地址接口返回的省、市、区和详细地址。
+             * @param {Object} address 地址对象，包含 province、city、county、addressDetail 字段。
+             * @returns {String} 用于表单回填和选中状态比较的完整地址文本。
+             */
+            getAddressText(address) {
+                if (!address) return ""
+                return (address.province || "") + (address.city || "") + (address.county || "") +
+                    (address.addressDetail || "")
             },
 
             // 切换选项选中状态
@@ -1382,14 +1601,6 @@ layout("/layouts/platform_h5.html"){
                         }
                     }
                 }
-            },
-
-            // 获取收货地址
-            async getAddress() {
-                const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress")
-                if (resp.code === 0) {
-                    this.addressOptions = resp.data
-                }
             }
         },
 
@@ -1413,39 +1624,26 @@ layout("/layouts/platform_h5.html"){
                         }
                     }
                 }
-            },
-
-            // 监听确认弹窗显示状态
-            showConfirmDialog(val) {
-                if (val && this.projectInfo.signMode === 2) {
-                    // 在下一个渲染周期后更新签名组件
-                    this.$nextTick(() => {
-                        if (this.$refs.signatureRef) {
-                            // 如果组件有setSignature或类似方法可以调用
-                            if (this.formData.userSign && typeof this.$refs.signatureRef.setSignature === "function") {
-                                this.$refs.signatureRef.setSignature(this.formData.userSign)
-                            }
-                        }
-                    })
-                }
             }
         },
 
-        async created() {
+        created() {
             this.projectId = GetQueryString("id")
             if (this.projectId) {
-                // 先获取字典数据
-                this.welfareProvideMode = await this.$businessTool.getDictOptions("welfareProvideMode")
-                this.welfareSignMode = await this.$businessTool.getDictOptions("welfareSignMode")
-
-                // 然后获取项目信息和用户选择
-                this.getProjectInfo()
+                this.registerHistoryLayers()
+                this.loadPageData()
             } else {
+                this.pageLoading = false
                 this.$toast.fail("参数错误")
                 setTimeout(() => {
                     this.historyBack()
                 }, 1500)
             }
+        },
+        beforeDestroy() {
+            if (window.h5HistoryLayerManager) {
+                window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
+            }
         }
     })
 </script>
diff --git a/src/main/resources/views/platform/zhghh5/welfare/select/list.html b/src/main/resources/views/platform/zhghh5/welfare/select/list.html
index e8d34fa4..a62b133c 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/select/list.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/select/list.html
@@ -3,101 +3,379 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
-    /* 列表卡片样式 */
-    .wf-welfare-list {
-        padding: 10px;
+    body {
+        background-color: #f3f7fd;
     }
-    .wf-welfare-card {
+
+    .welfare-list-page {
+        min-height: 100vh;
+        padding-bottom: calc(24px + env(safe-area-inset-bottom));
+        box-sizing: border-box;
+        background-color: #f3f7fd;
+    }
+
+    .welfare-list-page .van-nav-bar {
+        background-color: #fff;
+    }
+
+    .welfare-list-page .van-nav-bar__title {
+        color: #1f2937;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .welfare-list-page .van-nav-bar .van-icon,
+    .welfare-list-page .van-nav-bar__text {
+        color: #1989fa;
+    }
+
+    .welfare-list-content {
+        padding: 12px 12px 0;
+    }
+
+    .welfare-list-hero {
         position: relative;
-        background: #fff;
-        border-radius: 8px;
-        margin-bottom: 15px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        height: 134px;
         overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff0f1;
+        box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
     }
-    /* 左右布局容器 */
-    .wf-card-layout {
+
+    .welfare-list-hero__image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+
+    .welfare-list-hero__copy {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
         display: flex;
-        padding: 15px;
+        padding-left: 18px;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        box-sizing: border-box;
+        text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
     }
-    /* 左侧图片容器 */
-    .wf-card-img-container {
-        width: 120px;
-        height: 120px;
-        flex-shrink: 0;
-        margin-right: 15px;
+
+    .welfare-list-hero__title {
+        font-size: 25px;
+        line-height: 34px;
+        font-weight: 700;
+        letter-spacing: 1px;
     }
-    /* 右侧信息容器 */
-    .wf-card-content {
-        flex: 1;
-        min-width: 0;
+
+    .welfare-list-hero__subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: .5px;
+    }
+
+    .welfare-list-filter-sticky {
+        padding: 10px 0 1px;
+        background-color: #f3f7fd;
+    }
+
+    .van-sticky--fixed .welfare-list-filter-sticky {
+        padding-right: 12px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-filter {
+        margin-bottom: 10px;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
+    }
+
+    .welfare-list-filter .van-dropdown-menu__bar {
+        height: 44px;
+        box-shadow: none;
+    }
+
+    .welfare-list-filter .van-dropdown-menu__title {
+        color: #263548;
+        font-size: 15px;
+    }
+
+    .welfare-list-filter .van-dropdown-menu__title--active,
+    .welfare-list-filter .van-dropdown-item__option--active,
+    .welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
+        color: #1989fa;
+    }
+
+    .welfare-list-filter .van-dropdown-item__content {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        overflow: hidden;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
+    }
+
+    .welfare-list-filter .van-dropdown-item__option {
+        min-height: 48px;
+        padding: 0 16px;
+        color: #46566c;
+        font-size: 14px;
+    }
+
+    .welfare-list-cards {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        gap: 10px;
     }
-    /* 标题样式 */
-    .wf-card-heading {
+
+    .welfare-list-card {
+        position: relative;
+        overflow: hidden;
+        border-radius: 12px;
+        background-color: #fff;
+        box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+        cursor: pointer;
+    }
+
+    .welfare-list-card__cover {
+        display: block;
+        width: 100%;
+        height: 150px;
+        background-color: #f7f9fc;
+        line-height: 0;
+    }
+
+    /* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
+    .welfare-list-card__cover .van-image__img {
+        width: 100%;
+        height: 100% !important;
+        object-fit: cover !important;
+        object-position: center;
+        background-color: #f7f9fc;
+    }
+
+    .welfare-list-card__cover .van-image__loading,
+    .welfare-list-card__cover .van-image__error {
+        color: #9ba9bc;
+        background-color: #edf4fc;
+        font-size: 13px;
+    }
+
+    .welfare-list-card__body {
+        position: relative;
+        padding: 12px 42px 14px 14px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__head {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        column-gap: 8px;
+    }
+
+    .welfare-list-card__title {
+        min-width: 0;
+        overflow: hidden;
+        flex: 1;
+        color: #202938;
         font-size: 16px;
-        font-weight: bold;
-        margin-bottom: 8px;
-        color: #333;
-        white-space: nowrap;
-        overflow: hidden;
+        line-height: 23px;
+        font-weight: 600;
         text-overflow: ellipsis;
-        width: 100%;
-    }
-    /* 时间信息样式 */
-    .wf-time-row {
-        font-size: 14px;
-        color: #666;
-        margin-bottom: 5px;
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
     }
-    .wf-time-label {
-        color: #999;
-        display: inline-block;
-        width: 70px;
+
+    .welfare-list-card__status {
+        display: inline-flex;
+        min-width: 54px;
+        height: 25px;
+        padding: 0 10px;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        border-radius: 13px;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 25px;
+    }
+
+    .welfare-list-card__status.is-available {
+        color: #1989fa;
+        background-color: #eaf3ff;
+    }
+
+    .welfare-list-card__status.is-selected {
+        color: #2da66f;
+        background-color: #e9f8f0;
+    }
+
+    .welfare-list-card__status.is-upcoming {
+        color: #d78b20;
+        background-color: #fff5e4;
+    }
+
+    .welfare-list-card__status.is-ended {
+        color: #8793a5;
+        background-color: #f0f2f5;
+    }
+
+    .welfare-list-card__time {
+        margin-top: 6px;
+        overflow: hidden;
+        color: #8491a6;
+        font-size: 12px;
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .welfare-list-card__arrow {
+        position: absolute;
+        top: 50%;
+        right: 14px;
+        color: #adb7c6;
+        font-size: 17px;
+        transform: translateY(-50%);
+    }
+
+    .welfare-list-page .van-list__finished-text,
+    .welfare-list-page .van-list__loading {
+        color: #9aa7b8;
+        font-size: 13px;
+        line-height: 44px;
+    }
+
+    .welfare-list-empty {
+        display: flex;
+        min-height: 300px;
+        padding: 28px 18px;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    /* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
+    .welfare-list-empty img {
+        display: block;
+        width: 86%;
+        max-width: 300px;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .welfare-list-empty__title {
+        margin-top: -8px;
+        color: #50627a;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+    }
+
+    .welfare-list-empty__hint {
+        margin-top: 6px;
+        color: #9aa7b8;
+        font-size: 12px;
+        line-height: 18px;
     }
 </style>
 
 <div id="app" v-cloak>
-    <van-sticky>
-        <van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
-        <van-dropdown-menu>
-            <year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
-        </van-dropdown-menu>
-    </van-sticky>
+    <div class="welfare-list-page">
+        <van-nav-bar
+                title="福利列表"
+                left-arrow
+                left-text="返回"
+                fixed
+                placeholder
+                @click-left="goBack"
+        ></van-nav-bar>
 
-    <div>
-        <van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
-            <div class="wf-welfare-list">
-                <div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
-                    <van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
-                        {{row.isChoose?'已选择':'未选择'}}
-                    </van-tag>
-                    <div class="wf-card-layout">
-                        <div class="wf-card-img-container">
-                            <van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
-                        </div>
-                        <div class="wf-card-content">
-                            <div class="wf-card-heading">{{row.name}}</div>
-                            <div class="wf-time-row">
-                                <span class="wf-time-label">开始时间:</span>
-                                {{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
-                            </div>
-                            <div class="wf-time-row">
-                                <span class="wf-time-label">结束时间:</span>
-                                {{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
-                            </div>
-                        </div>
-                    </div>
+        <div class="welfare-list-content">
+            <section class="welfare-list-hero">
+                <img
+                        class="welfare-list-hero__image"
+                        src="/assets/mobile/img/home/v4/feature-benefit.png"
+                        alt="暖心福利插画"
+                >
+                <div class="welfare-list-hero__copy">
+                    <div class="welfare-list-hero__title">暖心福利</div>
+                    <div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
                 </div>
+            </section>
+
+            <van-sticky :offset-top="46">
+                <div class="welfare-list-filter-sticky">
+                    <van-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
+                        <year-van-dropdown-item
+                                :num="10"
+                                v-model="pageForm.year"
+                                @change="doSearch"
+                        ></year-van-dropdown-item>
+                    </van-dropdown-menu>
+                </div>
+            </van-sticky>
+
+            <van-list
+                    v-if="tableData.length > 0"
+                    v-model="loading"
+                    :finished="finished"
+                    finished-text="没有更多了"
+                    @load="pageData"
+            >
+                <div class="welfare-list-cards">
+                    <article
+                            v-for="row in tableData"
+                            :key="row.id"
+                            class="welfare-list-card"
+                            @click="openChoose(row)"
+                    >
+                        <van-image
+                                class="welfare-list-card__cover"
+                                :src="row.cover"
+                                :alt="row.name"
+                                width="100%"
+                        >
+                            <template #loading>
+                                <van-loading type="spinner" size="22"></van-loading>
+                            </template>
+                            <template #error>
+                                <van-icon name="photo-o" size="34"></van-icon>
+                            </template>
+                        </van-image>
+
+                        <div class="welfare-list-card__body">
+                            <div class="welfare-list-card__head">
+                                <div class="welfare-list-card__title">{{ row.name }}</div>
+                                <span
+                                        class="welfare-list-card__status"
+                                        :class="'is-' + getWelfareStatus(row).type"
+                                >{{ getWelfareStatus(row).text }}</span>
+                            </div>
+                            <div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
+                                选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
+                            </div>
+                            <div class="welfare-list-card__time" v-else>选择时间：未设置</div>
+                            <van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
+                        </div>
+                    </article>
+                </div>
+            </van-list>
+
+            <div class="welfare-list-empty" v-else-if="!loading">
+                <img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
+                <div class="welfare-list-empty__title">暂无福利项目</div>
+                <div class="welfare-list-empty__hint">当前年度暂未发布可选择的福利项目</div>
             </div>
-        </van-list>
-        <van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
+        </div>
     </div>
 </div>
 
@@ -118,28 +396,63 @@ layout("/layouts/platform_h5.html"){
             }
         },
         methods: {
+            goBack() {
+                this.$pjaxReplace("/platform/h5/home")
+            },
             doSearch() {
-                this.tableKey = new Date().getTime()
                 this.pageForm.pageNumber = 1
                 this.pageForm.totalCount = 0
                 this.tableData = []
+                this.finished = false
                 this.pageData()
             },
+
+            /**
+             * 福利列表分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
+             * 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
+             */
             pageData() {
                 this.loading = true
-                this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
-                    this.tableData = this.tableData.concat(res.data.list)
-                    if (this.tableData.length === res.data.totalCount) {
-                        this.finished = true
-                    } else {
-                        this.pageForm.pageNumber++
-                    }
-                    this.pageForm.totalCount = res.data.totalCount
-                    this.loading = false
-                })
+                this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm)
+                    .then((res) => {
+                        if (res.code !== 0 || !res.data) return
+                        const list = res.data.list || []
+                        this.tableData = this.tableData.concat(list)
+                        this.pageForm.totalCount = res.data.totalCount || 0
+                        if (this.tableData.length >= this.pageForm.totalCount) {
+                            this.finished = true
+                        } else {
+                            this.pageForm.pageNumber++
+                        }
+                    })
+                    .finally(() => {
+                        this.loading = false
+                    })
             },
 
-            async openChoose(row) {
+            /**
+             * 福利状态优先展示用户选择结果，其次根据选择起止时间区分未开始、可选择和已结束。
+             * @param row 福利项目，需包含 isChoose、choiceTimeStart、choiceTimeEnd
+             * @return {{type: string, text: string}} type 用于状态样式，text 为页面展示文案
+             */
+            getWelfareStatus(row) {
+                if (Number(row.isChoose) === 1) {
+                    return {type: "selected", text: "已选择"}
+                }
+
+                const now = new Date().getTime()
+                const startTime = row.choiceTimeStart ? new Date(row.choiceTimeStart).getTime() : null
+                const endTime = row.choiceTimeEnd ? new Date(row.choiceTimeEnd).getTime() : null
+                if (startTime && now < startTime) {
+                    return {type: "upcoming", text: "未开始"}
+                }
+                if (endTime && now > endTime) {
+                    return {type: "ended", text: "已结束"}
+                }
+                return {type: "available", text: "可选择"}
+            },
+
+            openChoose(row) {
                 this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
             }
         },
diff --git a/src/main/resources/views/platform/zhghh5/welfare/select/success.html b/src/main/resources/views/platform/zhghh5/welfare/select/success.html
index 723f6022..300173ba 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/select/success.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/select/success.html
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
+    :root {
+        /* 当前福利成功页覆盖全局 H5 的 Vant 主色。 */
+        --color-primary: #1989fa;
+    }
+
     .success-container {
         min-height: 100vh;
         background-color: #f7f8fa;
diff --git a/src/main/resources/views/platform/zhghh5/welfare/userChoose/index.html b/src/main/resources/views/platform/zhghh5/welfare/userChoose/index.html
index b02454ab..70201b98 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/userChoose/index.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/userChoose/index.html
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
+    :root {
+        /* 当前福利选择页覆盖全局 H5 的 Vant 主色。 */
+        --color-primary: #1989fa;
+    }
+
     .selection:not(:last-child) {
         border-bottom: 1px dashed lightgrey;
     }
diff --git a/src/main/resources/views/platform/zhghh5/welfare/userChoose/list.html b/src/main/resources/views/platform/zhghh5/welfare/userChoose/list.html
index 8adf29b1..f5564dd5 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/userChoose/list.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/userChoose/list.html
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
 #-->
 
 <style>
+    :root {
+        /* 当前福利列表覆盖全局 H5 的 Vant 主色。 */
+        --color-primary: #1989fa;
+    }
+
     .table-card {
         position: relative;
         background: #fff;