style(red-bag): 优化红包活动相关组件的样式和布局

调整表格列宽和样式，优化统计卡片布局，移除冗余卡片组件
统一表格内边距和样式，增加响应式设计

src/views/marketing/redBag/components/red-bag-activity.vue

@@ -5,7 +5,7 @@
             :body-style="{ padding: '10px 0' }">
             <template #toolbar>
                 <div style="display: flex; align-items: center; gap: 10px">
-                    <el-select v-model="activityStatus" placeholder="活动状态" clearable style="width: 150px">
+                    <el-select v-model="activityStatus" placeholder="活动状态" clearable style="width: 250px">
                         <el-option label="进行中" :value="1" />
                         <el-option label="已结束" :value="0" />
                     </el-select>
@@ -58,7 +58,7 @@
         </el-dialog>
 
         <!-- 红包码详情弹窗 -->
-        <el-dialog v-model="detailDialogVisible" title="红包码详情" width="800px" :close-on-click-modal="false">
+        <el-dialog v-model="detailDialogVisible" title="红包码详情" width="1440px" :close-on-click-modal="false">
             <red-bag-detail :activity-id="currentActivityId" />
         </el-dialog>
     </div>
@@ -86,61 +86,61 @@ const columns = ref([
         label: '红包码名称',
         prop: 'name',
         align: 'center',
-        minWidth: 140
+        minWidth: 180
     },
     {
         label: '创建日期',
         prop: 'createTime',
         align: 'center',
-        width: 180
+        minWidth: 160
     },
     {
         label: '活动状态',
         prop: 'activityStatus',
         align: 'center',
         slot: 'activityStatus',
-        width: 100
+        minWidth: 100
     },
     {
         label: '红包码数量',
         prop: 'redNum',
         align: 'center',
-        width: 100
+        minWidth: 120
     },
     {
         label: '扫码次数',
         prop: 'scanNum',
         align: 'center',
-        width: 100
+        minWidth: 100
     },
     {
         label: '扫码人数',
         prop: 'scanUserNum',
         align: 'center',
-        width: 100
+        minWidth: 100
     },
     {
         label: '累计扫码红包金额',
         prop: 'scillSumNum',
         align: 'center',
-        width: 140
+        minWidth: 150
     },
     {
         label: '累计现金红包金额',
         prop: 'cashSumNum',
         align: 'center',
-        width: 140
+        minWidth: 150
     },
     {
         label: '人均红包金额',
         prop: 'userAvgNum',
         align: 'center',
-        width: 120
+        minWidth: 120
     },
     {
         columnKey: 'action',
         label: '操作',
-        width: 280,
+        width: 270,
         align: 'center',
         slot: 'action',
         fixed: 'right'

src/views/marketing/redBag/components/red-bag-detail.vue

@@ -2,81 +2,62 @@
 <template>
     <div class="red-bag-detail">
         <!-- 统计卡片 -->
-        <ele-card :body-style="{ padding: '20px' }" style="margin-bottom: 16px">
-            <div class="stats-row">
-                <div class="stat-item">
-                    <div class="stat-label">扫码领取用户数</div>
-                    <div class="stat-value">{{ stats.scanDrawSumUserNum || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">领取总用户数</div>
-                    <div class="stat-value">{{ stats.drawSumUserNum || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">扫码总次数</div>
-                    <div class="stat-value">{{ stats.scanSumNum || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">A 分享红包数量</div>
-                    <div class="stat-value">{{ stats.shareUserNum || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">B 被分享红包数量</div>
-                    <div class="stat-value">{{ stats.sharedUserNum || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">扫码领取小程序红包金额</div>
-                    <div class="stat-value">{{ stats.scanMiniProgramPrice || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">扫码领取现金红包金额</div>
-                    <div class="stat-value">{{ stats.scanRedCashPrice || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">A 分享得金额</div>
-                    <div class="stat-value">{{ stats.shareUserPrice || 0 }}</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">B 被分享得金额</div>
-                    <div class="stat-value">{{ stats.sharedUserPrice || 0 }}</div>
-                </div>
+        <div class="stats-row">
+            <div class="stat-item">
+                <div class="stat-label">扫码领取用户数</div>
+                <div class="stat-value">{{ stats.scanDrawSumUserNum || 0 }}</div>
             </div>
-        </ele-card>
+            <div class="stat-item">
+                <div class="stat-label">领取总用户数</div>
+                <div class="stat-value">{{ stats.drawSumUserNum || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">扫码总次数</div>
+                <div class="stat-value">{{ stats.scanSumNum || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">A 分享红包数量</div>
+                <div class="stat-value">{{ stats.shareUserNum || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">B 被分享红包数量</div>
+                <div class="stat-value">{{ stats.sharedUserNum || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">扫码领取小程序红包金额</div>
+                <div class="stat-value">{{ stats.scanMiniProgramPrice || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">扫码领取现金红包金额</div>
+                <div class="stat-value">{{ stats.scanRedCashPrice || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">A 分享得金额</div>
+                <div class="stat-value">{{ stats.shareUserPrice || 0 }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">B 被分享得金额</div>
+                <div class="stat-value">{{ stats.sharedUserPrice || 0 }}</div>
+            </div>
+        </div>
 
         <!-- 搜索栏 -->
-        <ele-card :body-style="{ padding: '8px' }" style="margin-bottom: 16px">
-            <div style="display: flex; gap: 10px; align-items: center">
-                <el-input
-                    v-model="searchForm.userName"
-                    placeholder="用户名"
-                    style="width: 200px"
-                    clearable
-                />
-                <el-select
-                    v-model="searchForm.redType"
-                    placeholder="红包类型"
-                    clearable
-                    style="width: 150px"
-                >
-                    <el-option label="无门槛" :value="0" />
-                    <el-option label="现金" :value="1" />
-                </el-select>
-                <el-select
-                    v-model="searchForm.drawStatus"
-                    placeholder="领取状态"
-                    clearable
-                    style="width: 150px"
-                >
-                    <el-option label="未领取" :value="0" />
-                    <el-option label="已领取" :value="1" />
-                </el-select>
-                <el-button type="primary" @click="reload()">查询</el-button>
-                <el-button type="primary" plain @click="resetSearch">重置</el-button>
-            </div>
-        </ele-card>
+        <div style="display: flex; gap: 10px; align-items: center">
+            <el-input v-model="searchForm.userName" placeholder="用户名" style="width: 200px" clearable />
+            <el-select v-model="searchForm.redType" placeholder="红包类型" clearable style="width: 150px">
+                <el-option label="无门槛" :value="0" />
+                <el-option label="现金" :value="1" />
+            </el-select>
+            <el-select v-model="searchForm.drawStatus" placeholder="领取状态" clearable style="width: 150px">
+                <el-option label="未领取" :value="0" />
+                <el-option label="已领取" :value="1" />
+            </el-select>
+            <el-button type="primary" @click="reload()">查询</el-button>
+            <el-button type="primary" plain @click="resetSearch">重置</el-button>
+        </div>
 
         <!-- 表格 -->
-        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false">
+        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false" :body-style="{ padding: '0' }">
             <template #redType="{ row }">
                 <el-tag :type="row.redType === 1 ? 'success' : 'primary'">
                     {{ row.redType === 1 ? '现金' : '无门槛' }}
@@ -90,236 +71,221 @@
             </template>
 
             <template #action="{ row }">
-                <el-button
-                    link
-                    type="primary"
-                    v-permission="'marketing:redBag:shareDetail'"
-                    @click="handleShareDetail(row)"
-                >
+                <el-button link type="primary" v-permission="'marketing:redBag:shareDetail'"
+                    @click="handleShareDetail(row)">
                     [分享信息]
                 </el-button>
             </template>
         </common-table>
 
         <!-- 分享信息弹窗 -->
-        <el-dialog
-            v-model="shareDialogVisible"
-            title="分享信息"
-            width="800px"
-            :close-on-click-modal="false"
-        >
+        <el-dialog v-model="shareDialogVisible" title="分享信息" width="800px" :close-on-click-modal="false">
             <red-bag-share :red-id="currentRedId" />
         </el-dialog>
     </div>
 </template>
 
 <script setup>
-    import { ref, reactive, watch } from 'vue';
-    import CommonTable from '@/components/CommonPage/CommonTable.vue';
-    import RedBagShare from './red-bag-share.vue';
-    import request from '@/utils/request';
+import { ref, reactive, watch } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+import RedBagShare from './red-bag-share.vue';
+import request from '@/utils/request';
 
-    const props = defineProps({
-        activityId: {
-            type: Number,
-            required: true
-        }
-    });
+const props = defineProps({
+    activityId: {
+        type: Number,
+        required: true
+    }
+});
 
-    // 统计数据
-    const stats = ref({});
+// 统计数据
+const stats = ref({});
 
-    // 搜索表单
-    const searchForm = ref({
+// 搜索表单
+const searchForm = ref({
+    userName: '',
+    redType: undefined,
+    drawStatus: undefined
+});
+
+const resetSearch = () => {
+    searchForm.value = {
         userName: '',
         redType: undefined,
         drawStatus: undefined
-    });
-
-    const resetSearch = () => {
-        searchForm.value = {
-            userName: '',
-            redType: undefined,
-            drawStatus: undefined
-        };
-        reload();
     };
+    reload();
+};
 
-    // 表格列配置
-    const columns = ref([
-        {
-            label: '红包 ID',
-            prop: 'id',
-            align: 'center',
-            width: 120
-        },
-        {
-            label: '红包链接',
-            prop: 'redLink',
-            align: 'center',
-            minWidth: 200,
-            showOverflowTooltip: true
-        },
-        {
-            label: '用户名',
-            prop: 'userName',
-            align: 'center',
-            width: 120
-        },
-        {
-            label: '红包类型',
-            prop: 'redType',
-            align: 'center',
-            slot: 'redType',
-            width: 100
-        },
-        {
-            label: '红包金额',
-            prop: 'redPrice',
-            align: 'center',
-            width: 100
-        },
-        {
-            label: '生成时间',
-            prop: 'createTime',
-            align: 'center',
-            width: 180
-        },
-        {
-            label: '领取时间',
-            prop: 'drawTime',
-            align: 'center',
-            width: 180
-        },
-        {
-            label: '领取状态',
-            prop: 'drawStatus',
-            align: 'center',
-            slot: 'drawStatus',
-            width: 100
-        },
-        {
-            label: '分享人数',
-            prop: 'shareUserNum',
-            align: 'center',
-            minWidth: 110
-        },
-        {
-            label: '扫码次数',
-            prop: 'scanNum',
-            align: 'center',
-            minWidth: 110
-        },
-        {
-            columnKey: 'action',
-            label: '操作',
-            width: 120,
-            align: 'center',
-            slot: 'action',
-            fixed: 'right'
-        }
-    ]);
+// 表格列配置
+const columns = ref([
+    {
+        label: '红包 ID',
+        prop: 'id',
+        align: 'center',
+        width: 120
+    },
+    {
+        label: '红包链接',
+        prop: 'redLink',
+        align: 'center',
+        minWidth: 200,
+        showOverflowTooltip: true
+    },
+    {
+        label: '用户名',
+        prop: 'userName',
+        align: 'center',
+        minWidth: 120,
+        showOverflowTooltip: true
+    },
+    {
+        label: '红包类型',
+        prop: 'redType',
+        align: 'center',
+        slot: 'redType',
+        width: 100
+    },
+    {
+        label: '红包金额',
+        prop: 'redPrice',
+        align: 'center',
+        width: 100
+    },
+    {
+        label: '生成时间',
+        prop: 'createTime',
+        align: 'center',
+        width: 160
+    },
+    {
+        label: '领取时间',
+        prop: 'drawTime',
+        align: 'center',
+        width: 160
+    },
+    {
+        label: '领取状态',
+        prop: 'drawStatus',
+        align: 'center',
+        slot: 'drawStatus',
+        width: 100
+    },
+    {
+        label: '分享人数',
+        prop: 'shareUserNum',
+        align: 'center',
+        minWidth: 90
+    },
+    {
+        label: '扫码次数',
+        prop: 'scanNum',
+        align: 'center',
+        minWidth: 110
+    },
+    {
+        columnKey: 'action',
+        label: '操作',
+        width: 120,
+        align: 'center',
+        slot: 'action',
+        fixed: 'right'
+    }
+]);
+
+// 页面配置
+const pageRef = ref(null);
+const pageConfig = reactive({
+    pageUrl: '/activity/red/bag/detail/activity/redBag/detail/pagelist',
+    fileName: '红包码详情',
+    cacheKey: 'redBagDetailTable'
+});
 
-    // 页面配置
-    const pageRef = ref(null);
-    const pageConfig = reactive({
-        pageUrl: '/activity/red/bag/detail/activity/redBag/detail/pagelist',
-        fileName: '红包码详情',
-        cacheKey: 'redBagDetailTable'
+// 刷新表格
+function reload() {
+    pageRef.value?.reload({
+        activityId: props.activityId,
+        ...searchForm.value
     });
+}
 
-    // 刷新表格
-    function reload() {
-        pageRef.value?.reload({
-            activityId: props.activityId,
-            ...searchForm.value
+// 加载统计数据
+const loadStats = () => {
+    request
+        .get('/activity/red/bag/detail/activity/redBag/detail/sum', {
+            params: { activityId: props.activityId }
+        })
+        .then((res) => {
+            if (res.data.code === 200) {
+                stats.value = res.data.data || {};
+            }
         });
-    }
+};
 
-    // 加载统计数据
-    const loadStats = () => {
-        request
-            .get('/activity/red/bag/detail/activity/redBag/detail/sum', {
-                params: { activityId: props.activityId }
-            })
-            .then((res) => {
-                if (res.data.code === 200) {
-                    stats.value = res.data.data || {};
-                }
-            });
-    };
-
-    // 监听 activityId 变化
-    watch(
-        () => props.activityId,
-        (newVal) => {
-            if (newVal) {
-                loadStats();
-                reload();
-            }
-        },
-        { immediate: true }
-    );
+// 监听 activityId 变化
+watch(
+    () => props.activityId,
+    (newVal) => {
+        if (newVal) {
+            loadStats();
+            reload();
+        }
+    },
+    { immediate: true }
+);
 
-    // 分享信息相关
-    const shareDialogVisible = ref(false);
-    const currentRedId = ref(null);
+// 分享信息相关
+const shareDialogVisible = ref(false);
+const currentRedId = ref(null);
 
-    const handleShareDetail = (row) => {
-        currentRedId.value = row.id;
-        shareDialogVisible.value = true;
-    };
+const handleShareDetail = (row) => {
+    currentRedId.value = row.id;
+    shareDialogVisible.value = true;
+};
 </script>
 
 <style lang="scss" scoped>
-    .red-bag-detail {
-        .stats-row {
+.red-bag-detail {
+    .stats-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        margin-bottom: 20px;
+
+        .stat-item {
             display: flex;
-            flex-wrap: wrap;
-            gap: 24px;
+            flex-direction: column;
+            align-items: center;
+            min-width: 110px;
+            flex: 0 0 auto;
 
-            .stat-item {
+            .stat-label {
+                font-size: 13px;
+                color: #666;
+                margin-bottom: 10px;
+                text-align: center;
+                line-height: 1.4;
+                min-height: 36px;
                 display: flex;
-                flex-direction: column;
                 align-items: center;
-                min-width: 140px;
-                flex: 0 0 auto;
-
-                .stat-label {
-                    font-size: 13px;
-                    color: #666;
-                    margin-bottom: 10px;
-                    text-align: center;
-                    line-height: 1.4;
-                    min-height: 36px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                .stat-value {
-                    font-size: 26px;
-                    font-weight: bold;
-                    color: #409eff;
-                    line-height: 1.2;
-                }
+                justify-content: center;
             }
-        }
 
-        // 表格样式优化
-        :deep(.el-table) {
-            .el-table__header th {
-                font-size: 13px;
-                font-weight: 600;
-                color: #333;
-                padding: 12px 8px;
-                background-color: #fafafa;
+            .stat-value {
+                font-size: 26px;
+                font-weight: bold;
+                color: #409eff;
+                line-height: 1.2;
             }
+        }
+    }
 
-            .el-table__body td {
-                font-size: 13px;
-                padding: 10px 8px;
-            }
+    // 表格样式优化
+    :deep(.ele-pro-table) {
+        .el-table .cell.el-tooltip {
+            width: 200px;
+            white-space: nowrap;
         }
     }
+}
 </style>

src/views/marketing/redBag/components/red-bag-share.vue

@@ -1,7 +1,7 @@
 <!-- 红包码分享列表 -->
 <template>
     <div class="red-bag-share">
-        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false">
+        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false" :body-style="{ padding: '0' }">
             <template #shareType="{ row }">
                 <el-tag :type="row.shareType === 1 ? 'success' : 'primary'">
                     {{ row.shareType === 1 ? 'A 分享' : 'B 被分享' }}
@@ -28,32 +28,33 @@
             label: '用户 ID',
             prop: 'userId',
             align: 'center',
-            width: 120
+            minWidth: 120
         },
         {
             label: '用户名称',
             prop: 'userName',
             align: 'center',
-            width: 120
+            minWidth: 120,
+            showOverflowTooltip: true
         },
         {
             label: '红包金额',
             prop: 'redPrice',
             align: 'center',
-            width: 100
+            minWidth: 100
         },
         {
             label: '分享类型',
             prop: 'shareType',
             align: 'center',
             slot: 'shareType',
-            width: 100
+            minWidth: 100
         },
         {
             label: '领取时间',
             prop: 'drawTime',
             align: 'center',
-            width: 180
+            minWidth: 180
         }
     ]);
 
@@ -75,4 +76,22 @@
     .red-bag-share {
         padding: 0;
     }
+
+    // 表格样式优化
+    :deep(.el-table) {
+        .el-table__header th {
+            font-size: 13px;
+            font-weight: 600;
+            color: #333;
+            padding: 12px 8px;
+            background-color: #fafafa;
+            white-space: nowrap;
+        }
+
+        .el-table__body td {
+            font-size: 13px;
+            padding: 10px 8px;
+            white-space: nowrap;
+        }
+    }
 </style>