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 2fe646ca..63039c7e 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html
@@ -167,9 +167,136 @@ layout("/layouts/platform_h5.html"){
     }
 
     .welfare-list-card__summary {
-        display: flex;
-        min-height: 120px;
         padding: 14px;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__choices-wrap {
+        display: flex;
+        min-width: 0;
+        margin-top: 10px;
+        padding-top: 2px;
+        align-items: center;
+        border-top: 1px solid #edf1f6;
+    }
+
+    .welfare-list-card__choices {
+        display: flex;
+        min-width: 0;
+        flex: 1;
+        gap: 10px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+    }
+
+    .welfare-list-card__choices::-webkit-scrollbar {
+        display: none;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection {
+        width: 82px;
+        min-width: 82px;
+        min-height: 112px;
+        padding: 8px 0;
+        flex-direction: column;
+        align-items: stretch;
+        border-bottom: 0;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__image {
+        width: 82px;
+        height: 64px;
+        margin-right: 0;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__image--name {
+        display: flex;
+        padding: 8px;
+        align-items: center;
+        justify-content: center;
+        color: #9aa7b8;
+        background: linear-gradient(145deg, #f7faff 0%, #edf4fc 100%);
+        font-size: 12px;
+        line-height: 17px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__image--name span {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__content {
+        margin-top: 6px;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__name {
+        font-weight: 400;
+    }
+
+    .welfare-list-card__choices .welfare-inline-selection__meta {
+        margin-top: 5px;
+    }
+
+    .welfare-list-card__order-head {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+    }
+
+    .welfare-list-card__order-info {
+        min-width: 0;
+        flex: 1;
+    }
+
+    .welfare-list-card__select-time {
+        display: flex;
+        margin-top: 5px;
+        align-items: center;
+        color: #8491a6;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .welfare-list-card__select-time .van-icon {
+        margin-right: 5px;
+        color: #8da2bd;
+        font-size: 13px;
+    }
+
+    .welfare-list-card__order-status {
+        margin-left: 10px;
+        flex: none;
+        color: #1989fa;
+        font-size: 13px;
+    }
+
+    .welfare-list-card__choices-arrow {
+        margin-left: 10px;
+        flex: none;
+        transition: transform .2s ease;
+    }
+
+    .welfare-list-card__choices-arrow.is-expanded {
+        transform: rotate(90deg);
+    }
+
+    .welfare-list-card__choices > .welfare-inline-loading,
+    .welfare-list-card__choices > .welfare-inline-empty {
+        width: 100%;
+        flex: none;
+    }
+
+    .welfare-list-card__product {
+        display: flex;
+        min-width: 0;
+        margin-top: 12px;
+        padding: 0;
         align-items: center;
         box-sizing: border-box;
     }
@@ -231,7 +358,7 @@ layout("/layouts/platform_h5.html"){
     .welfare-list-card__body {
         position: relative;
         min-width: 0;
-        padding: 4px 0 4px 14px;
+        padding-left: 12px;
         flex: 1;
         box-sizing: border-box;
     }
@@ -250,11 +377,29 @@ layout("/layouts/platform_h5.html"){
         color: #202938;
         font-size: 16px;
         line-height: 23px;
-        font-weight: 600;
+        font-weight: 400;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
+    .welfare-list-card__selection-title {
+        display: -webkit-box;
+        overflow: hidden;
+        color: #263548;
+        font-size: 14px;
+        line-height: 20px;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+
+    .welfare-list-card__selection-count {
+        margin-top: 12px;
+        color: #8491a6;
+        font-size: 13px;
+        text-align: right;
+    }
+
     .welfare-list-card__status {
         display: inline-flex;
         min-width: 54px;
@@ -302,6 +447,32 @@ layout("/layouts/platform_h5.html"){
         white-space: nowrap;
     }
 
+    .welfare-list-card__actions {
+        display: flex;
+        min-height: 42px;
+        margin-top: 10px;
+        padding-top: 10px;
+        align-items: center;
+        justify-content: flex-end;
+        border-top: 1px solid #edf1f6;
+        box-sizing: border-box;
+    }
+
+    .welfare-list-card__detail-button {
+        display: inline-flex;
+        height: 30px;
+        padding: 0 14px;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #1989fa;
+        border-radius: 16px;
+        color: #1989fa;
+        background-color: #fff;
+        font-size: 13px;
+        line-height: 28px;
+        box-sizing: border-box;
+    }
+
     .welfare-list-card__time .van-icon {
         margin-right: 5px;
         flex: none;
@@ -612,42 +783,37 @@ layout("/layouts/platform_h5.html"){
                             class="welfare-list-card"
                     >
                         <div class="welfare-list-card__summary" @click="toggleRow(row)">
-                            <van-image
-                                    v-if="hasCoverImage(row.cover)"
-                                    class="welfare-list-card__cover"
-                                    :src="row.cover"
-                                    :alt="row.name"
-                            >
-                                <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 class="welfare-list-card__order-head">
+                                <div class="welfare-list-card__order-info">
+                                    <div class="welfare-list-card__title">{{ row.name }}</div>
+                                    <div class="welfare-list-card__select-time">
+                                        <van-icon name="clock-o"></van-icon>
+                                        <span>选择时间：{{ formatDate(row.selectTime) }}</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>
-                                    <van-icon class="welfare-list-card__arrow" :name="row.expanded ? 'arrow-up' : 'arrow-down'"></van-icon>
-                                </div>
-                                <div class="welfare-list-card__time" v-if="row.selectTime">
-                                    <van-icon name="clock-o"></van-icon>
-                                    <span>选择时间：{{ $moment(row.selectTime).format('YYYY-MM-DD HH:mm') }}</span>
-                                </div>
-                                <div class="welfare-list-card__time" v-else>
-                                    <van-icon name="clock-o"></van-icon>
-                                    <span>选择时间：暂无记录</span>
+                            <div class="welfare-list-card__choices-wrap">
+                                <div class="welfare-list-card__choices">
+                                    <div class="welfare-inline-loading" v-if="row.detailLoading">
+                                        <van-loading size="20" color="#1989fa">加载中...</van-loading>
+                                    </div>
+                                    <template v-else-if="row.selections.length > 0">
+                                        <div class="welfare-inline-selection" v-for="item in row.selections" :key="item.id">
+                                            <van-image v-if="item.imgUrl" class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
+                                                <template #error><van-icon name="photo-o" size="24"></van-icon></template>
+                                            </van-image>
+                                            <div v-else class="welfare-inline-selection__image welfare-inline-selection__image--name">
+                                                <span>{{ item.optionName || '未知选项' }}</span>
+                                            </div>
+                                            <div class="welfare-inline-selection__content">
+                                                <div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    <div v-else class="welfare-inline-empty">暂无福利选择记录</div>
                                 </div>
+                                <van-icon class="welfare-list-card__arrow welfare-list-card__choices-arrow" :class="{'is-expanded': row.expanded}" name="arrow"></van-icon>
                             </div>
                         </div>
 
@@ -692,14 +858,13 @@ layout("/layouts/platform_h5.html"){
                                     <div class="welfare-inline-card__title">我的选择</div>
                                     <div v-if="row.selections.length > 0">
                                         <div class="welfare-inline-selection" v-for="item in row.selections" :key="item.selectId || item.id">
-                                            <van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
+                                            <van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover" @click.stop="previewSelectionImage(item.imgUrl)">
                                                 <template #error><van-icon name="photo-o" size="24"></van-icon></template>
                                             </van-image>
                                             <div class="welfare-inline-selection__content">
                                                 <div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
                                                 <div class="welfare-inline-selection__meta">
                                                     <span class="welfare-inline-selection__tag">× {{ item.selectNum || 0 }}</span>
-                                                    <span>{{ formatDate(item.selectTime) }}</span>
                                                 </div>
                                             </div>
                                         </div>
@@ -771,6 +936,7 @@ layout("/layouts/platform_h5.html"){
                             selections: []
                         }))
                         this.tableData = this.tableData.concat(list)
+                        list.forEach((row) => this.loadRowSelections(row))
                         this.pageForm.totalCount = res.data.totalCount || 0
                         if (this.tableData.length >= this.pageForm.totalCount) {
                             this.finished = true
@@ -790,6 +956,14 @@ layout("/layouts/platform_h5.html"){
                 return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId})
             },
 
+            /**
+             * 根据列表接口返回的福利选择摘要计算卡片展示项数，不额外请求接口。
+             */
+            getSelectionCount(row) {
+                const gist = row.gist_list || row.gistList || ""
+                return gist ? gist.split(",").filter(Boolean).length : 1
+            },
+
             /**
              * 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
              */
@@ -798,12 +972,11 @@ layout("/layouts/platform_h5.html"){
             },
 
             /**
-             * 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。
+             * 加载福利项目及用户选择数据，供卡片直接展示已选择的福利明细。
              * @param row 当前福利项目
              */
-            async toggleRow(row) {
-                row.expanded = !row.expanded
-                if (!row.expanded || row.detailLoaded || row.detailLoading) return
+            async loadRowSelections(row) {
+                if (row.detailLoaded || row.detailLoading) return
                 this.$set(row, "detailLoading", true)
                 try {
                     const [projectRes, selectionRes] = await Promise.all([
@@ -829,6 +1002,18 @@ layout("/layouts/platform_h5.html"){
                 }
             },
 
+            /**
+             * 展开或收起当前福利卡片的内容详情。
+             * @param row 当前福利项目
+             */
+            toggleRow(row) {
+                row.expanded = !row.expanded
+            },
+
+            previewSelectionImage(imageUrl) {
+                if (imageUrl) vant.ImagePreview([imageUrl])
+            },
+
             /**
              * 获取当前福利的首条选择记录，用于展示联系电话和收货地址。
              * @param row 当前福利项目
@@ -855,7 +1040,7 @@ layout("/layouts/platform_h5.html"){
              * @return {string} 选择时间文本
              */
             formatDate(dateTime) {
-                return dateTime ? this.$moment(dateTime).format("MM-DD HH:mm") : "时间未知"
+                return dateTime ? this.$moment(dateTime).format("YYYY-MM-DD HH:mm") : "时间未知"
             },
 
             /**