diff --git a/pages/attendanceStatus/attendanceStatistics.vue b/pages/attendanceStatus/attendanceStatistics.vue
index 340d5e8..888877a 100644
--- a/pages/attendanceStatus/attendanceStatistics.vue
+++ b/pages/attendanceStatus/attendanceStatistics.vue
@@ -40,7 +40,7 @@
                             <view class="center">
                                 <text class="date-text">{{ selectDate ? $util.cutDate(new Date(selectDate), 'YYYY-MM') :
                                     ""
-                                    }}</text>
+                                }}</text>
                             </view>
                             <view class="arrowBtn" @tap="handleChangeDate(1)">
                                 <image class="arrowIcon" src="https://eshangtech.com/cyy_DIB/rightArrowIcon.png" />
@@ -56,33 +56,37 @@
 
             <!-- 统计汇总卡片 -->
             <view class="summaryCards" v-if="attendanceStatisticsData.length > 0">
-                <view class="summaryCard">
+                <view class="summaryCard clickable" @click="showDetailModal('schedule')">
                     <view class="cardIcon scheduleIcon">📋</view>
                     <view class="cardContent">
                         <text class="cardNumber">{{ getSummaryData().totalSchedule }}</text>
                         <text class="cardLabel">总排班</text>
                     </view>
+                    <view class="cardArrow">›</view>
                 </view>
-                <view class="summaryCard">
+                <view class="summaryCard clickable" @click="showDetailModal('attend')">
                     <view class="cardIcon attendIcon">✅</view>
                     <view class="cardContent">
                         <text class="cardNumber">{{ getSummaryData().totalAttend }}</text>
                         <text class="cardLabel">总出勤</text>
                     </view>
+                    <view class="cardArrow">›</view>
                 </view>
-                <view class="summaryCard">
+                <view class="summaryCard clickable" @click="showDetailModal('late')">
                     <view class="cardIcon lateIcon">⏰</view>
                     <view class="cardContent">
                         <text class="cardNumber">{{ getSummaryData().totalLate }}</text>
                         <text class="cardLabel">迟到次数</text>
                     </view>
+                    <view class="cardArrow">›</view>
                 </view>
-                <view class="summaryCard">
+                <view class="summaryCard clickable" @click="showDetailModal('early')">
                     <view class="cardIcon earlyIcon">🏃</view>
                     <view class="cardContent">
                         <text class="cardNumber">{{ getSummaryData().totalEarly }}</text>
                         <text class="cardLabel">早退次数</text>
                     </view>
+                    <view class="cardArrow">›</view>
                 </view>
             </view>
 
@@ -184,6 +188,47 @@
             </view>
         </view>
 
+        <!-- 详情弹窗 -->
+        <view class="detailModal" v-if="showDetailPopup" @click="closeDetailModal">
+            <view class="modalContent" @click.stop="">
+                <view class="modalHeader">
+                    <text class="modalTitle">{{ getModalTitle() }}</text>
+                    <view class="closeBtn" @click="closeDetailModal">×</view>
+                </view>
+
+                <view class="modalBody">
+                    <view class="summaryInfo">
+                        <text class="totalText">总计：{{ getCurrentModalTotal() }}</text>
+                        <text class="countText">{{ attendanceStatisticsData.length }}人</text>
+                    </view>
+
+                    <view class="employeeRankList">
+                        <view class="rankHeader">
+                            <text class="rankTitle">人员排名</text>
+                        </view>
+
+                        <view class="rankScrollArea">
+                            <view class="rankItem" v-for="(item, index) in getSortedData()" :key="index">
+                                <view class="rankNumber"
+                                    :class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : ''">
+                                    {{ index + 1 }}</view>
+                                <view class="employeeInfo">
+                                    <view class="employeeText">
+                                        <text class="name">{{ item.userName || "-" }}</text>
+                                        <text class="phone">{{ item.phone || item.userCode || "-" }}</text>
+                                    </view>
+                                </view>
+                                <view class="rankValue">
+                                    <text class="numberWithUnit">{{ getCurrentValue(item) }}{{ getCurrentUnit()
+                                        }}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
         <!-- 日历组件 -->
         <uni-calendar ref="calendar" :insert="false" :mask-closable="true" @confirm="onCalendarConfirm"
             @close="onCalendarClose" />
@@ -207,7 +252,10 @@ export default {
             seatInfo: {},
             loading: false,
             hasLoaded: false, // 是否已经完成过初始加载
-            retryCount: 0
+            retryCount: 0,
+            // 详情弹窗相关
+            showDetailPopup: false,
+            currentDetailType: 'schedule' // 'schedule', 'attend', 'late', 'early'
         }
     },
     onLoad() {
@@ -266,6 +314,75 @@ export default {
             }
         },
 
+        // 显示详情弹窗
+        showDetailModal(type) {
+            this.currentDetailType = type
+            this.showDetailPopup = true
+            this.showPopup = true // 禁止页面滚动
+        },
+
+        // 关闭详情弹窗
+        closeDetailModal() {
+            this.showDetailPopup = false
+            this.showPopup = false // 恢复页面滚动
+        },
+
+        // 获取弹窗标题
+        getModalTitle() {
+            const titles = {
+                schedule: '排班情况详情',
+                attend: '出勤情况详情',
+                late: '迟到情况详情',
+                early: '早退情况详情'
+            }
+            return titles[this.currentDetailType] || '详情'
+        },
+
+        // 获取当前模态总数
+        getCurrentModalTotal() {
+            const summary = this.getSummaryData()
+            const totals = {
+                schedule: summary.totalSchedule + '天',
+                attend: summary.totalAttend + '天',
+                late: summary.totalLate + '次',
+                early: summary.totalEarly + '次'
+            }
+            return totals[this.currentDetailType] || '0'
+        },
+
+        // 获取单位
+        getCurrentUnit() {
+            const units = {
+                schedule: '天',
+                attend: '天',
+                late: '次',
+                early: '次'
+            }
+            return units[this.currentDetailType] || '天'
+        },
+
+        // 获取当前项的值
+        getCurrentValue(item) {
+            const values = {
+                schedule: item.scheduleTotal || 0,
+                attend: item.attendTotal || 0,
+                late: item.lateTotal || 0,
+                early: item.earlyTotal || 0
+            }
+            return values[this.currentDetailType] || 0
+        },
+
+        // 获取排序后的数据
+        getSortedData() {
+            const data = [...this.attendanceStatisticsData]
+            return data.sort((a, b) => {
+                const valueA = this.getCurrentValue(a)
+                const valueB = this.getCurrentValue(b)
+                return valueB - valueA // 从大到小排序
+            })
+        },
+
+
         // 显示日历
         showCalendar() {
             this.$refs.calendar.open()
@@ -599,6 +716,17 @@ export default {
                 box-shadow: @shadow;
                 display: flex;
                 align-items: center;
+                position: relative;
+
+                &.clickable {
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+
+                    &:active {
+                        transform: scale(0.98);
+                        background: #f8f9fa;
+                    }
+                }
 
                 .cardIcon {
                     font-size: 40rpx;
@@ -640,6 +768,13 @@ export default {
                         color: @muted;
                     }
                 }
+
+                .cardArrow {
+                    font-size: 32rpx;
+                    color: #ccc;
+                    font-weight: bold;
+                    margin-left: 8rpx;
+                }
             }
         }
 
@@ -955,5 +1090,217 @@ export default {
             }
         }
     }
+
+    // 详情弹窗样式
+    .detailModal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 60rpx 40rpx;
+
+        .modalContent {
+            width: calc(100vw - 64rpx);
+            max-height: 80vh;
+            background: #fff;
+            border-radius: 24rpx;
+            overflow: hidden;
+            box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+
+            .modalHeader {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 32rpx 40rpx;
+                border-bottom: 2rpx solid #f5f5f5;
+                background: linear-gradient(135deg, @primary, @primary2);
+
+                .modalTitle {
+                    font-size: 32rpx;
+                    font-weight: 700;
+                    color: #fff;
+                }
+
+                .closeBtn {
+                    width: 48rpx;
+                    height: 48rpx;
+                    background: rgba(255, 255, 255, 0.2);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 32rpx;
+                    color: #fff;
+                    font-weight: bold;
+                    cursor: pointer;
+
+                    &:active {
+                        background: rgba(255, 255, 255, 0.3);
+                    }
+                }
+            }
+
+            .modalBody {
+                padding: 32rpx 40rpx;
+                max-height: 60vh;
+
+                .summaryInfo {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 24rpx;
+                    background: #f8f9fa;
+                    border-radius: 16rpx;
+                    margin-bottom: 32rpx;
+
+                    .totalText {
+                        font-size: 28rpx;
+                        font-weight: 600;
+                        color: #2c3e50;
+                    }
+
+                    .countText {
+                        font-size: 24rpx;
+                        color: @muted;
+                        background: #fff;
+                        padding: 8rpx 16rpx;
+                        border-radius: 20rpx;
+                    }
+                }
+
+                .employeeRankList {
+                    .rankHeader {
+                        margin-bottom: 24rpx;
+
+                        .rankTitle {
+                            font-size: 28rpx;
+                            font-weight: 600;
+                            color: #2c3e50;
+                        }
+                    }
+
+                    .rankScrollArea {
+                        max-height: 40vh;
+                        overflow-y: auto;
+
+                        /* 隐藏滚动条 */
+                        &::-webkit-scrollbar {
+                            display: none;
+                        }
+
+                        /* 兼容其他浏览器 */
+                        -ms-overflow-style: none;
+                        scrollbar-width: none;
+                    }
+
+                    .rankItem {
+                        display: flex;
+                        align-items: center;
+                        padding: 24rpx 20rpx;
+                        background: #fff;
+                        border-radius: 12rpx;
+                        margin-bottom: 16rpx;
+                        border: 2rpx solid #f5f5f5;
+
+                        &:nth-child(1) {
+                            // 第一名
+                            border-color: #ffd700;
+                            background: linear-gradient(135deg, #fff9e6, #fff);
+                        }
+
+                        &:nth-child(2) {
+                            // 第二名
+                            border-color: #c0c0c0;
+                            background: linear-gradient(135deg, #f8f8f8, #fff);
+                        }
+
+                        &:nth-child(3) {
+                            // 第三名
+                            border-color: #cd7f32;
+                            background: linear-gradient(135deg, #fdf2e9, #fff);
+                        }
+
+                        .rankNumber {
+                            width: 48rpx;
+                            height: 48rpx;
+                            background: @primary;
+                            color: #fff;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            font-size: 24rpx;
+                            font-weight: 700;
+                            margin-right: 20rpx;
+                            flex-shrink: 0;
+
+                            &.rank-1 {
+                                background: linear-gradient(135deg, #ffd700, #ffed4e);
+                                color: #333;
+                                box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
+                            }
+
+                            &.rank-2 {
+                                background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
+                                color: #333;
+                                box-shadow: 0 4rpx 12rpx rgba(192, 192, 192, 0.3);
+                            }
+
+                            &.rank-3 {
+                                background: linear-gradient(135deg, #cd7f32, #daa560);
+                                color: #fff;
+                                box-shadow: 0 4rpx 12rpx rgba(205, 127, 50, 0.3);
+                            }
+                        }
+
+                        .employeeInfo {
+                            flex: 1;
+                            display: flex;
+                            align-items: center;
+
+                            .employeeText {
+                                flex: 1;
+                                display: flex;
+                                flex-direction: column;
+
+                                .name {
+                                    font-size: 28rpx;
+                                    font-weight: 600;
+                                    color: #2c3e50;
+                                    line-height: 1.3;
+                                    margin-bottom: 4rpx;
+                                }
+
+                                .phone {
+                                    font-size: 24rpx;
+                                    color: @muted;
+                                }
+                            }
+                        }
+
+                        .rankValue {
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-end;
+
+                            .numberWithUnit {
+                                font-size: 32rpx;
+                                font-weight: 700;
+                                color: @primary;
+                                line-height: 1.2;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/pages/attendanceStatus/emergencyEvents.vue b/pages/attendanceStatus/emergencyEvents.vue
index bc01744..48f0e04 100644
--- a/pages/attendanceStatus/emergencyEvents.vue
+++ b/pages/attendanceStatus/emergencyEvents.vue
@@ -1,43 +1,38 @@
 <!-- 应急事件 -->
 <template>
     <view class="main">
-        <view class="emergencyList pad15">
-            <view class="emergencyItem" v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)"
-                :style="{
-                    marginBottom: index + 1 === showList.length ? '0' : '',
-                    border: item.state === '完成' ? '2rpx solid #f4db9c' : item.state === '处理中' ? '2rpx solid #d3d3d3' : ''
-                }">
-                <view class="emergencyItemTitle">
-                    <view class="emergencyItemTitleLeft">
-                        {{ type === 1 ? item.title || "" : type === 2 ? item.type || "" : "" }}
+        <view class="emergencyList">
+            <view class="eventCard" v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)">
+                <!-- 事件头部信息 -->
+                <view class="cardHeader">
+                    <view class="eventTitle">{{ type === 1 ? item.title || "" : type === 2 ? item.type || "" : "" }}
                     </view>
-                    <view class="emergencyItemTitleRight">
-                        <view class="emergencyItemStatus" v-if="item.state" :style="{
-                            background: item.state === '完成' ? '#ecbd44' : item.state === '处理中' ? '#d3d3d3' : '',
-                            color: item.state === '完成' ? '#fff' : item.state === '处理中' ? '#fff' : ''
-                        }">
-                            {{ item.state }}</view>
+                    <view class="eventStatus" v-if="item.state" :class="{
+                        'status-completed': item.state === '完成',
+                        'status-processing': item.state === '处理中'
+                    }">
+                        {{ item.state }}
                     </view>
                 </view>
-                <view class="emergencyDesc">{{ item.sceneOverview || "" }}</view>
 
-                <view class="line"></view>
+                <!-- 事件描述 -->
+                <view class="eventDesc" v-if="item.sceneOverview">{{ item.sceneOverview }}</view>
 
-                <view class="otherMessageRow">
-                    <image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
-                    <view class="otherMessageValue">{{ item.userName || item.createUserName }}</view>
+                <!-- 详细信息区域 -->
+                <view class="eventDetails">
+                    <view class="detailItem">
+                        <image class="detailIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
+                        <view class="detailValue">{{ item.userName || item.createUserName || '-' }}</view>
+                    </view>
+                    <view class="detailItem">
+                        <image class="detailIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
+                        <view class="detailValue">{{ item.phone || '-' }}</view>
+                    </view>
+                    <view class="detailItem">
+                        <image class="detailIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
+                        <view class="detailValue">{{ item.createTime || '-' }}</view>
+                    </view>
                 </view>
-
-                <view class="otherMessageRow">
-                    <image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
-                    <view class="otherMessageValue">{{ item.phone }}</view>
-                </view>
-
-                <view class="otherMessageRow" style="margin-bottom: 0;">
-                    <image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
-                    <view class="otherMessageValue">{{ item.createTime }}</view>
-                </view>
-
             </view>
             <view class="noDataBox" v-if="!isLoading && !(showList && showList.length > 0)">
                 <noData :type="1" :text="'暂无数据'" />
@@ -432,214 +427,126 @@ export default {
     }
 }
 </script>
-<style lang="less" scoped>
-@bg: #f8f9fa;
-@muted: #666;
-@card: #fff;
-@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-@primary: #27B25F;
-@primary2: #4CCC7F;
-@ok: #2ed573;
-@warn: #ff9f43;
-@danger: #ff4757;
+<style lang="scss" scoped>
+// 使用项目全局颜色变量
+$bg: #f8f9fa;
+$muted: #666;
+$card: #fff;
+$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+$primary: #27B25F;
+$primary2: #4CCC7F;
+$success: #2ed573;
+$warning: #ff9f43;
+$danger: #ff4757;
+$info: #3742fa;
 
-/* 抽屉页（特情/设施） */
+/* 重新设计的应急事件页面 */
 .main {
     width: 100vw;
-    height: 100vh;
-
-    .emergency-details-header {
-        background: linear-gradient(135deg, @danger, #ff3838);
-        color: #fff;
-        padding: 40rpx;
-        position: relative;
-        box-shadow: @shadow;
-
-        &.facilities-theme {
-            background: linear-gradient(135deg, #20bf6b, #0fb9b1);
-        }
-
-        .emergency-back-btn {
-            position: absolute;
-            left: 30rpx;
-            top: 30rpx;
-            background: rgba(255, 255, 255, .2);
-            border: none;
-            color: #fff;
-            font-size: 36rpx;
-            width: 80rpx;
-            height: 80rpx;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .h1 {
-            text-align: center;
-            display: block;
-            margin-bottom: 6rpx;
-        }
-
-        .current-area {
-            text-align: center;
-            display: block;
-            opacity: .9;
-        }
-    }
+    min-height: 100vh;
+    background-color: $bg;
+    box-sizing: border-box;
+    padding: 32rpx;
+    padding-bottom: env(safe-area-inset-bottom);
 
     .emergencyList {
-        padding: 30rpx;
-        .noDataBox{
+        width: 100%;
+
+        .noDataBox {
             width: 100%;
-            height: 100vh;
+            height: 60vh;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
-        .emergencyItem {
-            width: 100%;
-            border-radius: 8rpx;
-            background-color: #fff;
-            box-shadow: @shadow;
-            box-sizing: border-box;
-            padding: 24rpx;
-            margin-bottom: 24rpx;
+        .eventCard {
+            background: $card;
+            border-radius: 16rpx;
+            margin-bottom: 32rpx;
+            overflow: hidden;
+            box-shadow: $shadow;
 
-            .emergencyItemTitle {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-bottom: 24rpx;
-
-                .emergencyItemTitleLeft {
-                    font-size: 28rpx;
-                    font-weight: 600;
-                    display: inline-block;
-                    width: 80%;
-                }
-
-                .emergencyItemStatus {
-                    font-size: 24rpx;
-                    padding: 4rpx 16rpx;
-                    border-radius: 32rpx;
-                }
-
-            }
-
-            .emergencyDesc {
-                font-size: 24rpx;
-            }
-
-            .line {
-                width: 100%;
-                height: 2rpx;
-                background-color: #dad9d3;
-                margin: 24rpx 0;
-
-            }
-
-            .otherMessageRow {
-                width: 100%;
-                margin-bottom: 8rpx;
+            .cardHeader {
+                padding: 32rpx 32rpx 16rpx;
                 display: flex;
                 align-items: flex-start;
+                justify-content: space-between;
 
-                .otherMessageIcon {
-                    width: 30rpx;
-                    height: 30rpx;
+                .eventTitle {
+                    flex: 1;
+                    font-size: 28rpx;
+                    font-weight: 600;
+                    color: #160002;
+                    line-height: 1.4;
                     margin-right: 16rpx;
-                    margin-top: 6rpx;
                 }
 
-                .otherMessageValue {
-                    font-size: 24rpx;
+                .eventStatus {
+                    font-size: 22rpx;
+                    font-weight: 400;
+                    padding: 6rpx 12rpx;
+                    border-radius: 12rpx;
+                    flex-shrink: 0;
 
+                    &.status-completed {
+                        background: #E7F8EE;
+                        color: $success;
+                    }
+
+                    &.status-processing {
+                        background: #FFF3E0;
+                        color: $warning;
+                    }
+                }
+            }
+
+            .eventDesc {
+                padding: 0 32rpx 16rpx;
+                font-size: 24rpx;
+                font-weight: 400;
+                color: $muted;
+                line-height: 1.5;
+            }
+
+            .eventDetails {
+                padding: 16rpx 32rpx 32rpx;
+                background: #FAFAFA;
+
+                .detailItem {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 16rpx;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .detailIcon {
+                        width: 32rpx;
+                        height: 32rpx;
+                        margin-right: 16rpx;
+                        flex-shrink: 0;
+                    }
+
+                    .detailValue {
+                        font-size: 24rpx;
+                        font-weight: 400;
+                        color: #160002;
+                        flex: 1;
+                    }
                 }
             }
         }
 
     }
 
-    .add-event-btn {
-        position: fixed;
-        bottom: 160rpx;
-        right: 40rpx;
-        width: 96rpx;
-        height: 96rpx;
-        background: linear-gradient(135deg, @primary, @primary2);
-        border-radius: 50%;
-        border: none;
-        color: #fff;
-        font-size: 40rpx;
-        box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, .4);
-    }
-
-    .promo-banner {
-        margin: 30rpx;
-        border-radius: 24rpx;
-        overflow: hidden;
-        box-shadow: @shadow;
-
-        .promo-image {
-            width: 100%;
-            height: 240rpx;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            font-size: 48rpx;
-            position: relative;
-            overflow: hidden;
-
-            .promo-content {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                background: linear-gradient(transparent, rgba(0, 0, 0, .7));
-                padding: 40rpx 30rpx 30rpx;
-                color: #fff;
-
-                .promo-title {
-                    font-size: 32rpx;
-                    font-weight: 700;
-                    margin-bottom: 8rpx;
-                }
-
-                .promo-subtitle {
-                    font-size: 24rpx;
-                    opacity: .9;
-                }
-            }
-        }
-    }
-
-    .facilities-section {
-        margin: 30rpx;
-        background: #fff;
-        border-radius: 24rpx;
-        overflow: hidden;
-        box-shadow: @shadow;
-
-        .facilities-header {
-            background: linear-gradient(135deg, #20bf6b, #0fb9b1);
-            color: #fff;
-            padding: 30rpx;
-            font-weight: 700;
-            font-size: 32rpx;
-            display: flex;
-            align-items: center;
-            gap: 16rpx;
-        }
-    }
 
+    // 弹窗样式保持不变，只是不再使用
     .eventsPopupBox {
         width: 90vw;
         height: 80vh;
-        background-color: #fff;
+        background-color: $card;
         border-radius: 16rpx;
         box-sizing: border-box;
         padding: 24rpx;
@@ -689,10 +596,9 @@ export default {
 
         .line {
             width: 100%;
-            height: 2rpx;
-            background-color: #dad9d3;
-            margin: 24rpx 0;
-
+            height: 1rpx;
+            background-color: #f0f0f0;
+            margin: 16rpx 0;
         }
 
         .eventsSmallTitle {
@@ -730,7 +636,6 @@ export default {
                 }
             }
         }
-
     }
 
 
diff --git a/pages/attendanceStatus/emergencyEventsDetail.vue b/pages/attendanceStatus/emergencyEventsDetail.vue
index 754d96f..1fb2eef 100644
--- a/pages/attendanceStatus/emergencyEventsDetail.vue
+++ b/pages/attendanceStatus/emergencyEventsDetail.vue
@@ -1,157 +1,140 @@
 <template>
     <view class="main">
-        <view class="detailBox">
-            <view class="pageTitle">{{ detailObj.title || "" }}</view>
-
-            <view class="userDetailBox" :style="{ marginTop: pageType === 1 ? '' : '0' }">
-                <view class="userDetailBoxTop">
-                    <view class="userDetailBoxService">{{ detailObj.saName || "" }}</view>
-
-                    <view class="userDetailBoxServiceRight">
-                        <view class="userDetailBoxStatus" :style="{
-                            background: detailObj.state === '完成' ? '#ecbd44' : detailObj.state === '处理中' ? '#d3d3d3' : '',
-                            color: detailObj.state === '完成' ? '#fff' : detailObj.state === '处理中' ? '#fff' : ''
-                        }">
-                            {{ detailObj.state }}</view>
-                    </view>
-                </view>
-
-                <view class="eventsItem" style="margin-top: 24rpx;">
-                    <view class="eventsHaveImgLabel">
-                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
-                        <view class="eventsHaveLabel">联系人：</view>
-                    </view>
-                    <view class="eventsValue">{{ detailObj.userName || detailObj.createUserName || "" }}</view>
-                </view>
-                <view class="eventsItem">
-                    <view class="eventsHaveImgLabel">
-                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
-                        <view class="eventsHaveLabel">联系电话：</view>
-                    </view>
-                    <view class="eventsValue">{{ detailObj.phone || "" }}</view>
-                </view>
-                <view class="eventsItem" style="margin-bottom: 0;">
-                    <view class="eventsHaveImgLabel">
-                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
-                        <view class="eventsHaveLabel">{{ pageType === 1 ? '处理用时：' : pageType === 2 ? '创建时间' : '' }}
-                        </view>
-                    </view>
-                    <view class="eventsValue">{{ detailObj.handlingTime || detailObj.createTime || "" }}</view>
-                </view>
-
-            </view>
-        </view>
-
-        <view class="pageText" v-if="pageType === 1">应急事件</view>
-        <view class="pageText" v-if="pageType === 2">日常问题</view>
-
-        <view class="detailBox" v-if="pageType === 1">
-            <view class="userDetailBox noBoxShow">
-                <!-- <view class="eventsItem">
-                    <view class="eventsLabel">标题：</view>
-                    <view class="eventsValue">{{ detailObj.title || "" }}</view>
-                </view> -->
-                <view class="eventsItem">
-                    <view class="eventsLabel">事件片区：</view>
-                    <view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
-                </view>
-                <!-- <view class="eventsItem">
-                    <view class="eventsLabel">事件服务区：</view>
-                    <view class="eventsValue">{{ detailObj.service || "" }}</view>
-                </view>
-
-                <view class="eventsItem">
-                    <view class="eventsLabel">死亡人数：</view>
-                    <view class="eventsValue">{{ detailObj.diePerson || "" }}</view>
-                </view> -->
-                <view class="eventsItem">
-                    <view class="eventsLabel">事件概况：</view>
-                    <view class="eventsValue">{{ detailObj.sceneOverview || "" }}</view>
-                </view>
-                <view class="eventsItem">
-                    <view class="eventsLabel">事件损失情况：</view>
-                    <view class="eventsValue">{{ detailObj.lossSituation || "" }}</view>
-                </view>
-                <view class="eventsItem">
-                    <view class="eventsLabel">处理结果：</view>
-                    <view class="eventsValue">{{ detailObj.handlingResult || "" }}</view>
-                </view>
-                <view class="eventsItemPic">
-                    <view class="eventsLabel">事件现场照片：</view>
-                    <view class="eventsPic" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
-                        <view class="eventsPicItem" v-for="(item, index) in detailObj.imgUp" :key="index"
-                            @click="showImg(detailObj.imgUp, index)">
-                            <image class="eventsPicImg"
-                                :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
-
-                        </view>
-                    </view>
+        <!-- 事件头部信息 -->
+        <view class="headerCard">
+            <view class="eventTitle">{{ detailObj.title || detailObj.type || "-" }}</view>
+            <view class="headerInfo">
+                <view class="serviceName">{{ detailObj.saName || "-" }}</view>
+                <view class="eventStatus" :class="{
+                    'status-completed': detailObj.state === '完成',
+                    'status-processing': detailObj.state === '处理中'
+                }">
+                    {{ detailObj.state || "-" }}
                 </view>
             </view>
         </view>
 
-        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
-            <view class="userDetailBox noBoxShow">
-                <view class="eventsItem">
-                    <view class="eventsLabel">事件片区：</view>
-                    <view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
+        <!-- 基本信息 -->
+        <view class="infoCard">
+            <view class="cardTitle">基本信息</view>
+            <view class="infoList">
+                <view class="infoItem">
+                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
+                    <view class="infoLabel">联系人</view>
+                    <view class="infoValue">{{ detailObj.userName || detailObj.createUserName || "-" }}</view>
                 </view>
-                <!-- <view class="eventsItem">
-                    <view class="eventsLabel">事件服务区：</view>
-                    <view class="eventsValue">{{ detailObj.service || "" }}</view>
-                </view> -->
-                <view class="eventsItem">
-                    <view class="eventsLabel">类型：</view>
-                    <view class="eventsValue">{{ detailObj.type || "" }}</view>
+                <view class="infoItem">
+                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
+                    <view class="infoLabel">联系电话</view>
+                    <view class="infoValue">{{ detailObj.phone || "-" }}</view>
                 </view>
-                <view class="eventsItem" style="margin-bottom: 0;">
-                    <view class="eventsLabel">问题描述：</view>
-                    <view class="eventsValue">{{ detailObj.describe || "" }}</view>
+                <view class="infoItem">
+                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
+                    <view class="infoLabel">{{ pageType === 1 ? '处理用时' : '创建时间' }}</view>
+                    <view class="infoValue">{{ detailObj.handlingTime || detailObj.createTime || "-" }}</view>
                 </view>
             </view>
-
-        </view>
-
-        <view class="pageText" v-if="pageType === 2">协调处理情况</view>
-
-        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
-            <view class="eventsItem">
-                <view class="eventsLabel">协调处理结果：</view>
-                <view class="eventsValue">{{ detailObj.coorResult || "" }}</view>
-            </view>
-            <view class="eventsItem">
-                <view class="eventsLabel">办理人：</view>
-                <view class="eventsValue">{{ detailObj.coorUserName || "" }}</view>
-            </view>
-            <view class="eventsItem" style="margin-bottom: 0;">
-                <view class="eventsLabel">办理完成时间：</view>
-                <view class="eventsValue">{{ detailObj.coorEndTime || "" }}</view>
-            </view>
         </view>
 
-        <view class="pageText" v-if="pageType === 2">经营公司协调处理情况</view>
+        <!-- 应急事件详情 -->
+        <view class="detailCard" v-if="pageType === 1">
+            <view class="cardTitle">事件详情</view>
+            <view class="detailList">
+                <view class="detailItem">
+                    <view class="detailLabel">事件片区</view>
+                    <view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">事件概况</view>
+                    <view class="detailValue">{{ detailObj.sceneOverview || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">损失情况</view>
+                    <view class="detailValue">{{ detailObj.lossSituation || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">处理结果</view>
+                    <view class="detailValue">{{ detailObj.handlingResult || "-" }}</view>
+                </view>
+            </view>
 
-        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
-            <view class="eventsItem">
-                <view class="eventsLabel">协调处理结果：</view>
-                <view class="eventsPic">{{ detailObj.companyResult || "" }}</view>
-            </view>
-            <view class="eventsItem">
-                <view class="eventsLabel">办理人：</view>
-                <view class="eventsValue">{{ detailObj.companyUserName || "" }}</view>
-            </view>
-            <view class="eventsItem">
-                <view class="eventsLabel">办理完成时间：</view>
-                <view class="eventsValue">{{ detailObj.companyEndTime || "" }}</view>
-            </view>
-            <view class="eventsItemPic" style="margin-bottom: 0;">
-                <view class="eventsLabel">事件现场照片：</view>
-                <view class="eventsPic" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
-                    <view class="eventsPicItem" v-for="(item, index) in detailObj.fileUp" :key="index"
-                        @click="showImg(detailObj.fileUp, index)">
-                        <image class="eventsPicImg"
+            <!-- 现场照片 -->
+            <view class="photoSection" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
+                <view class="photoTitle">事件现场照片</view>
+                <view class="photoGrid">
+                    <view class="photoItem" v-for="(item, index) in detailObj.imgUp" :key="index"
+                        @click="showImg(detailObj.imgUp, index)">
+                        <image class="photoImage" mode="aspectFill"
                             :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
+                    </view>
+                </view>
+            </view>
+        </view>
 
+        <!-- 日常问题详情 -->
+        <view class="detailCard" v-if="pageType === 2">
+            <view class="cardTitle">问题详情</view>
+            <view class="detailList">
+                <view class="detailItem">
+                    <view class="detailLabel">事件片区</view>
+                    <view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">问题类型</view>
+                    <view class="detailValue">{{ detailObj.type || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">问题描述</view>
+                    <view class="detailValue">{{ detailObj.describe || "-" }}</view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 协调处理情况 -->
+        <view class="detailCard" v-if="pageType === 2">
+            <view class="cardTitle">协调处理情况</view>
+            <view class="detailList">
+                <view class="detailItem">
+                    <view class="detailLabel">处理结果</view>
+                    <view class="detailValue">{{ detailObj.coorResult || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">办理人</view>
+                    <view class="detailValue">{{ detailObj.coorUserName || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">完成时间</view>
+                    <view class="detailValue">{{ detailObj.coorEndTime || "-" }}</view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 经营公司处理情况 -->
+        <view class="detailCard" v-if="pageType === 2">
+            <view class="cardTitle">经营公司处理情况</view>
+            <view class="detailList">
+                <view class="detailItem">
+                    <view class="detailLabel">处理结果</view>
+                    <view class="detailValue">{{ detailObj.companyResult || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">办理人</view>
+                    <view class="detailValue">{{ detailObj.companyUserName || "-" }}</view>
+                </view>
+                <view class="detailItem">
+                    <view class="detailLabel">完成时间</view>
+                    <view class="detailValue">{{ detailObj.companyEndTime || "-" }}</view>
+                </view>
+            </view>
+
+            <!-- 现场照片 -->
+            <view class="photoSection" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
+                <view class="photoTitle">事件现场照片</view>
+                <view class="photoGrid">
+                    <view class="photoItem" v-for="(item, index) in detailObj.fileUp" :key="index"
+                        @click="showImg(detailObj.fileUp, index)">
+                        <image class="photoImage" mode="aspectFill"
+                            :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
                     </view>
                 </view>
             </view>
@@ -205,189 +188,202 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+// 使用项目全局颜色变量
+$bg: #f8f9fa;
+$muted: #666;
+$card: #fff;
+$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+$primary: #27B25F;
+$primary2: #4CCC7F;
+$success: #2ed573;
+$warning: #ff9f43;
+$danger: #ff4757;
+$info: #3742fa;
+
 .main {
     width: 100vw;
     min-height: 100vh;
-    background-color: #f0f2f3;
+    background-color: $bg;
     box-sizing: border-box;
-    padding-bottom: constant(safe-area-inset-bottom);
-    /* 兼容旧版 iOS */
+    padding: 32rpx;
     padding-bottom: env(safe-area-inset-bottom);
 
-    /* 兼容新版 */
-    .detailBox {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 24rpx 24rpx 48rpx;
-        background-color: #fff;
+    // 事件头部信息卡片
+    .headerCard {
+        background: $card;
+        border-radius: 16rpx;
+        padding: 32rpx;
+        margin-bottom: 32rpx;
+        box-shadow: $shadow;
 
-        .pageTitle {
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 30rpx;
+        .eventTitle {
+            font-size: 28rpx;
+            font-weight: 600;
+            color: #160002;
+            margin-bottom: 16rpx;
+            line-height: 1.4;
         }
 
-        .userDetailBox {
-            width: calc(100% - 32rpx);
-            margin-top: 24rpx;
-            margin-left: 16rpx;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            box-sizing: border-box;
-            padding: 16rpx 24rpx;
+        .headerInfo {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-            .userDetailBoxTop {
-                width: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .userDetailBoxService {
-                    font-size: 28rpx;
-                }
-
-                .userDetailBoxStatus {
-                    display: inline-block;
-                    font-size: 24rpx;
-                    padding: 4rpx 16rpx;
-                    border-radius: 32rpx;
-                }
+            .serviceName {
+                font-size: 24rpx;
+                font-weight: 400;
+                color: $muted;
+                flex: 1;
             }
 
+            .eventStatus {
+                font-size: 22rpx;
+                font-weight: 400;
+                padding: 6rpx 12rpx;
+                border-radius: 12rpx;
+                flex-shrink: 0;
 
-            .eventsItem {
-                width: 100%;
+                &.status-completed {
+                    background: #E7F8EE;
+                    color: $success;
+                }
+
+                &.status-processing {
+                    background: #FFF3E0;
+                    color: $warning;
+                }
+            }
+        }
+    }
+
+    // 基本信息卡片
+    .infoCard {
+        background: $card;
+        border-radius: 16rpx;
+        margin-bottom: 32rpx;
+        overflow: hidden;
+        box-shadow: $shadow;
+
+        .cardTitle {
+            padding: 32rpx 32rpx 16rpx;
+            font-size: 26rpx;
+            font-weight: 600;
+            color: #160002;
+            border-bottom: 1rpx solid #f0f0f0;
+        }
+
+        .infoList {
+            padding: 16rpx 32rpx 32rpx;
+            background: #FAFAFA;
+
+            .infoItem {
+                display: flex;
+                align-items: center;
                 margin-bottom: 16rpx;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                .infoIcon {
+                    width: 32rpx;
+                    height: 32rpx;
+                    margin-right: 16rpx;
+                    flex-shrink: 0;
+                }
+
+                .infoLabel {
+                    font-size: 24rpx;
+                    font-weight: 600;
+                    color: #160002;
+                    width: 120rpx;
+                    flex-shrink: 0;
+                }
+
+                .infoValue {
+                    font-size: 24rpx;
+                    font-weight: 400;
+                    color: #160002;
+                    flex: 1;
+                }
+            }
+        }
+    }
+
+
+    // 详情卡片
+    .detailCard {
+        background: $card;
+        border-radius: 16rpx;
+        margin-bottom: 32rpx;
+        overflow: hidden;
+        box-shadow: $shadow;
+
+        .cardTitle {
+            padding: 32rpx 32rpx 16rpx;
+            font-size: 26rpx;
+            font-weight: 600;
+            color: #160002;
+            border-bottom: 1rpx solid #f0f0f0;
+        }
+
+        .detailList {
+            padding: 16rpx 32rpx 0;
+
+            .detailItem {
                 display: flex;
                 align-items: flex-start;
+                padding: 16rpx 0;
+                border-bottom: 1rpx solid #f8f8f8;
 
-                .eventsHaveImgLabel {
-                    display: flex;
-                    width: 200rpx;
-                    align-items: center;
-
-                    .eventsHaveImg {
-                        width: 30rpx;
-                        height: 30rpx;
-                        margin-right: 16rpx;
-                        margin-top: 6rpx;
-                    }
-
-                    .eventsHaveLabel {
-                        width: 154rpx;
-                        font-size: 24rpx;
-                    }
+                &:last-child {
+                    border-bottom: none;
                 }
 
-                .eventsLabel {
-                    width: 200rpx;
-                    text-align: left;
+                .detailLabel {
                     font-size: 24rpx;
-                }
-
-                .eventsValue {
-                    flex: 1;
-                    font-size: 24rpx;
-                }
-            }
-
-            .eventsItemPic {
-                width: 100%;
-
-                .eventsLabel {
-                    width: 200rpx;
-                    text-align: left;
-                    font-size: 24rpx;
-                }
-
-                .eventsPic {
-                    flex: 1;
-                    display: flex;
-                    align-items: center;
-                    font-size: 24rpx;
-
-                    .eventsPicItem {
-                        width: 100rpx;
-                        height: 100rpx;
-                        margin-right: 8rpx;
-                        margin-bottom: 8rpx;
-
-                        .eventsPicImg {
-                            width: 100%;
-                            height: 100%;
-                        }
-                    }
-                }
-            }
-        }
-
-        .noBoxShow {
-            box-shadow: none;
-            margin-top: 0;
-            padding: 0 24rpx;
-            margin-left: 0;
-        }
-
-
-        .eventsItem {
-            width: 100%;
-            margin-bottom: 16rpx;
-            display: flex;
-            align-items: flex-start;
-
-            .eventsHaveImgLabel {
-                display: flex;
-                width: 200rpx;
-                align-items: center;
-
-                .eventsHaveImg {
-                    width: 30rpx;
-                    height: 30rpx;
+                    font-weight: 600;
+                    color: #160002;
+                    width: 120rpx;
+                    flex-shrink: 0;
                     margin-right: 16rpx;
-                    margin-top: 6rpx;
                 }
 
-                .eventsHaveLabel {
-                    width: 154rpx;
+                .detailValue {
                     font-size: 24rpx;
+                    font-weight: 400;
+                    color: #160002;
+                    flex: 1;
+                    line-height: 1.5;
                 }
             }
-
-            .eventsLabel {
-                width: 200rpx;
-                text-align: left;
-                font-size: 24rpx;
-            }
-
-            .eventsValue {
-                flex: 1;
-                font-size: 24rpx;
-            }
         }
 
-        .eventsItemPic {
-            width: 100%;
+        // 图片展示区域
+        .photoSection {
+            padding: 16rpx 32rpx 32rpx;
+            border-top: 1rpx solid #f0f0f0;
+            margin-top: 16rpx;
 
-            .eventsLabel {
-                width: 200rpx;
-                text-align: left;
+            .photoTitle {
                 font-size: 24rpx;
+                font-weight: 600;
+                color: #160002;
+                margin-bottom: 16rpx;
             }
 
-            .eventsPic {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                font-size: 24rpx;
+            .photoGrid {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 16rpx;
 
-                .eventsPicItem {
-                    width: 100rpx;
-                    height: 100rpx;
-                    margin-right: 8rpx;
-                    margin-bottom: 8rpx;
+                .photoItem {
+                    aspect-ratio: 1;
+                    border-radius: 8rpx;
+                    overflow: hidden;
+                    background: #f8f8f8;
 
-                    .eventsPicImg {
+                    .photoImage {
                         width: 100%;
                         height: 100%;
                     }
@@ -395,13 +391,5 @@ export default {
             }
         }
     }
-
-    .pageText {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 16rpx 40rpx;
-        font-size: 24rpx;
-        color: #8d8e8e;
-    }
 }
 </style>
\ No newline at end of file
diff --git a/pages/attendanceStatus/index.vue b/pages/attendanceStatus/index.vue
index e48b8d6..3fef38c 100644
--- a/pages/attendanceStatus/index.vue
+++ b/pages/attendanceStatus/index.vue
@@ -34,11 +34,17 @@
                         style="width: 100%; height: 100%">
                         <swiper-item v-for="(img, i) in serviceInfo.ImageLits" :key="i"
                             style="width: 100%; height: 100%">
-                            <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img">
+                            <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
+                                :src="img || 'https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'">
                             </image>
                         </swiper-item>
                     </swiper>
                 </view>
+                <view v-else class="serviceImg">
+                    <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
+                        :src="'https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'">
+                    </image>
+                </view>
             </view>
             <!-- <view class="detailBottom">
                 <view class="detailFirst">
@@ -122,7 +128,7 @@
             <view class="onDutyPersonBoxHeader">
                 <text class="title">{{ selectTab === 1 ? "👥 当前在岗人员" : selectTab === 2 ? "📋 请假人员列表" : selectTab === 3
                     ? "👑 值班经理信息" : ""
-                    }}</text>
+                }}</text>
 
 
                 <!-- 居中的日历时间 -->
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 59a3266..e05da0a 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <view class="main">
-
+    <page-meta :page-style="'overflow:visible'"></page-meta>
+    <view class="main" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
         <!-- 顶部固定的内容 -->
         <view class="topBox" :style="{ height: menu.bottom + 8 + 'px' }">
             <view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
@@ -15,7 +15,8 @@
         </view>
 
         <!-- 月份的轮播框 -->
-        <view class="monthListBox" :style="{ paddingTop: menu.bottom + 8 + 'px' }">
+        <!-- :style="{ paddingTop: menu.bottom + 8 + 'px' }" -->
+        <view class="monthListBox">
             <swiper class="swiperBox" previous-margin="40rpx" next-margin="40rpx" :current="selectIndex"
                 @animationfinish="handleChangeSwiper" :disable-programmatic-animation="false" :duration="300"
                 :easing-function="ease - out">
@@ -79,16 +80,10 @@
                                                                 ? '#97A9C6'
                                                                 : '',
                                             }"></view>
-                                            <span class="itemName">{{
-                                                subItem.name
-                                                }}</span>
+                                            <span class="itemName">{{ subItem.name }}</span>
                                         </view>
                                         <view class="itemCenter">
-                                            {{
-                                                subItem.value
-                                                    ? $util.getMoney(subItem.value / 10000)
-                                                    : ""
-                                            }}
+                                            {{ subItem.value ? $util.getMoney(subItem.value / 10000) : "" }}
                                         </view>
                                         <view class="itemRight" :style="{
                                             color:
@@ -97,33 +92,22 @@
                                                     : subItem.addQOQ < 0
                                                         ? '#0E9976'
                                                         : '',
-                                        }">{{
-                                            subItem.addQOQ ? `${subItem.addQOQ}` : ""
-                                        }}</view>
+                                        }">{{ subItem.addQOQ ? `${subItem.addQOQ}` : "" }}</view>
                                     </view>
                                 </view>
                             </view>
 
-
                             <!-- 年度标题 -->
                             <view class="yearAccountItem" style="margin-bottom: 24rpx">
                                 <view class="itemTop">
-                                    <view class="itemName">{{
-                                        (Math.floor(index / 12) + 2024)
-                                            .toString()
-                                            .slice(2, 4)
+                                    <view class="itemName">{{ (Math.floor(index / 12) + 2024).toString().slice(2, 4)
                                     }}年累计对客销售<span class="unit">/亿元</span></view>
-                                    <!--                            <view class="itemType">累计</view>-->
                                 </view>
                                 <view class="itemBottom">
                                     <span class="revenueNum" v-if="selectIndex === index && hasCurrentMonthData">{{
                                         topShowData && topShowData.MonthRevenueModel &&
-                                            topShowData.MonthRevenueModel.YearRevenueAmount
-                                            ? $util.getMoney(
-                                                topShowData.MonthRevenueModel.YearRevenueAmount /
-                                                100000000
-                                            )
-                                            : ""
+                                            topShowData.MonthRevenueModel.YearRevenueAmount ?
+                                            $util.getMoney(topShowData.MonthRevenueModel.YearRevenueAmount / 100000000) : ""
                                     }}</span>
                                     <span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData" :style="{
                                         color:
@@ -133,22 +117,14 @@
                                                     ? '#0E9976'
                                                     : '',
                                     }">
-                                        <span class="revenueAddNotice">{{
+                                        <span class="revenueAddNotice">{{ topShowData && topShowData.MonthRevenueModel
+                                            && topShowData.MonthRevenueModel.YearRevenueAddNumber > 0 ? "增长" :
                                             topShowData && topShowData.MonthRevenueModel &&
-                                                topShowData.MonthRevenueModel.YearRevenueAddNumber > 0
-                                                ? "增长"
-                                                : topShowData && topShowData.MonthRevenueModel &&
-                                                    topShowData.MonthRevenueModel.YearRevenueAddNumber < 0 ? "下降" : "" }}</span>
-                                                {{
-                                                    topShowData && topShowData.MonthRevenueModel &&
-                                                        topShowData.MonthRevenueModel.YearRevenueAddNumber
-                                                        ? $util.getMoney(
-                                                            topShowData && topShowData.MonthRevenueModel &&
-                                                            topShowData.MonthRevenueModel.YearRevenueAddNumber /
-                                                            100000000
-                                                        )
-                                                        : ""
-                                                }}
+                                                topShowData.MonthRevenueModel.YearRevenueAddNumber < 0 ? "下降" : "" }}</span>
+                                                {{ topShowData && topShowData.MonthRevenueModel &&
+                                                    topShowData.MonthRevenueModel.YearRevenueAddNumber ?
+                                                    $util.getMoney(topShowData && topShowData.MonthRevenueModel &&
+                                                        topShowData.MonthRevenueModel.YearRevenueAddNumber / 100000000) : "" }}
                                         </span>
 
                                         <span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData"
@@ -159,121 +135,61 @@
                                                         : topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd < 0
                                                             ? '#0E9976'
                                                             : '',
-                                            }"><span class="revenueAddNotice">{{
-                                            topShowData && topShowData.MonthRevenueModel &&
-                                                topShowData.MonthRevenueModel.YearRevenueAdd > 0
-                                                ? "增幅"
-                                                : topShowData && topShowData.MonthRevenueModel &&
+                                            }"><span class="revenueAddNotice">{{ topShowData &&
+                                                topShowData.MonthRevenueModel
+                                                && topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "增幅" : topShowData
+                                                    && topShowData.MonthRevenueModel &&
                                                     topShowData.MonthRevenueModel.YearRevenueAdd < 0 ? "降幅" : "" }}</span>
-                                                    {{
-                                                        topShowData && topShowData.MonthRevenueModel &&
-                                                            topShowData.MonthRevenueModel.YearRevenueAdd
-                                                            ? `${topShowData.MonthRevenueModel.YearRevenueAdd > 0
-                                                                ? "+"
-                                                                : ""
-                                                            }${topShowData.MonthRevenueModel.YearRevenueAdd}%`
-                                                            : "-"
-                                                    }}</span>
+                                                    {{ topShowData && topShowData.MonthRevenueModel &&
+                                                        topShowData.MonthRevenueModel.YearRevenueAdd ?
+                                                        `${topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "+" :
+                                                            ""}${topShowData.MonthRevenueModel.YearRevenueAdd}%` : "-" }}</span>
                                 </view>
                             </view>
-
-
-                            <!-- <view class="swiperItemContentYear">
-                                年度累计
-                                <span class="swiperItemContentUnit">/亿元</span>
-                            </view>
-                            <view class="swiperItemContentYearRevenueBox">
-                                <view class="leftRevenueValue">126.32</view>
-
-                                <view class="rightRevenueValue">
-                                    <text class="addValue" :style="{
-                                        color:
-                                            showTableData.add > 0
-                                                ? '#E83944'
-                                                : showTableData.add < 0
-                                                    ? '#0E9976'
-                                                    : '',
-                                    }">{{ showTableData.add ? showTableData.add : "-" }}%</text>
-                                    <text class="rightNav">同比</text>
-
-                                </view>
-                            </view> -->
-
                         </view>
                     </view>
                 </swiper-item>
             </swiper>
         </view>
 
-
-
-        <!--  即时营收 -->
-        <view class="instantRevenue" style="margin-top: 24rpx;">
-            <view class="revenue" @click="handlePage" style="padding-bottom: 0;">
-                <view class="revenueTop">
-                    <view class="revenyeTopLeft">
-                        <image class="monthIcon"
-                            src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/monthIcon.svg" />
-                        <text class="dateText">{{
-                            $util.handleGetMonthDay(nowDay)
-                        }}</text>
-                        <text class="day">/{{ howDay }}</text>
-                    </view>
-                    <view class="revenyeTopRight">
-                        <image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
+        <!-- 实时数据统计 -->
+        <view class="thingBox">
+            <!-- 实时营收 -->
+            <view class="revenue-banner" @click="handlePage">
+                <view class="revenue-header">
+                    <view class="revenue-title">
+                        <text>💰 今日实时营收</text>
                     </view>
+                    <image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
                 </view>
 
-                <view class="revenueMoney">
-                    <!-- <NumberScroll v-if="currentMoney" :number="currentMoney" /> -->
-                    <text class="moneyText">{{ currentMoney }}</text>
-                    <text class="moneyLabel">实时对客销售/元</text>
+                <view
+                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 8rpx;">
+                    <view class="revenue-content">
+                        <view class="revenue-amount">{{ currentMoney }}</view>
+                        <view class="revenue-label">元</view>
+                    </view>
+                    <view class="revenue-date">{{ $util.handleGetMonthDay(nowDay) }}/{{ howDay }}</view>
                 </view>
             </view>
 
-            <!-- <view class="revenue revenueOther">
-                <view class="otherRealDataBox">
-                    <view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
-                        :style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
-                        <view class="revenueMoneyItemLeft">
-                            <image class="leftIcon" :src="subItem.icon" />
-                        </view>
-
-                        <view class="revenueMoneyItemRight">
-                            <view class="moneyLabel">{{ subItem.label || "" }}</view>
-                            <view class="moneyText">{{ subItem.value || "" }}<span class="moneyUnit">{{ subItem.unit
-                                || "" }}</span>
-                            </view>
-                        </view>
+            <!-- 其他实时数据 -->
+            <view class="data-grid" v-if="otherRealData && otherRealData.length > 0">
+                <view class="data-item" v-for="(subItem, subIndex) in otherRealData" :key="subIndex">
+                    <view class="data-icon">
+                        <image class="icon" :src="subItem.icon" />
                     </view>
-                </view>
-            </view> -->
-        </view>
-
-        <!-- 实时水电、加油、尿素、充电 -->
-        <view class="instantRevenue" style="margin-top: 24rpx;" v-if="otherRealData && otherRealData.length > 0">
-            <view class="revenue revenueOther">
-                <view class="otherRealDataBox">
-                    <view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
-                        :style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
-                        <view class="revenueMoneyItemLeft">
-                            <image class="leftIcon" :src="subItem.icon" />
-                        </view>
-
-                        <view class="revenueMoneyItemRight">
-                            <view class="moneyLabel">{{ subItem.label || "" }}</view>
-                            <view class="moneyText">
-                                <span class="money">{{ subItem.value || "" }}</span>
-                                <span class="moneyUnit">/{{ subItem.unit
-                                    || "" }}</span>
-                            </view>
+                    <view class="data-info">
+                        <view class="data-label">{{ subItem.label || "" }}</view>
+                        <view class="data-value">
+                            <span class="value">{{ subItem.value || "" }}</span>
+                            <span class="unit">/{{ subItem.unit || "" }}</span>
                         </view>
                     </view>
                 </view>
             </view>
         </view>
 
-
         <!-- 底部的跳转 -->
         <view class="funBox">
 
@@ -288,35 +204,21 @@
                 </view>
             </view>
 
-
             <view class="funItem" @click="handleGoAttendanceStatus">
                 <view class="funItemContent">
                     <view class="funIconBox">
                         <image class="funIcon"
                             src="https://eshangtech.com/ShopICO/ahyd-BID/warning/operateWarning.svg" />
                     </view>
-                    <text class="funText">出勤情况</text>
+                    <text class="funText">人员管理</text>
                 </view>
             </view>
-
-
-            <!-- <view class="funItem" @click="goToRobot">
-                <view class="funItemContent">
-                    <view class="funIconBox">
-                        <image class="funIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/statistics.svg" />
-                    </view>
-                    <text class="funText">数智助手</text>
-                </view>
-            </view> -->
         </view>
 
-
         <Tabbar ref="tabbar" :page="page"></Tabbar>
     </view>
 </template>
 
-
-
 <script>
 import request from "@/util/index.js";
 import RateCharts from "./components/rateCharts.vue";
@@ -464,7 +366,6 @@ export default {
         console.log('this.singlethis.singlethis.single', this.single);
         uni.setStorageSync("lastDay", this.lastDay);
 
-
         console.log('useruseruseruser', this.user);
 
         // 小程序进来存起来的用户信息
@@ -475,7 +376,6 @@ export default {
 
         console.log('userInfouserInfo', userInfo);
 
-
         if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
             _this.isReturn = false;
         } else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
@@ -732,6 +632,10 @@ export default {
                 this.swiperTransition = false;
             }, 100);
         },
+        formatThousand(num) {
+            if (num === null || num === undefined) return '0';
+            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        },
         // 实时营收
         async handleRealRevenue() {
             try {
@@ -741,7 +645,8 @@ export default {
                 };
                 const res = await request.$webGet("CommercialApi/Revenue/GetCurRevenue", req);
                 // this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2);
-                this.currentMoney = res.Result_Data.CurRevenueAmount.toLocaleString('zh-CN');
+                // this.currentMoney = res.Result_Data.CurRevenueAmount.toLocaleString('zh-CN');
+                this.currentMoney = this.formatThousand(res.Result_Data.CurRevenueAmount)
             } catch (error) {
                 console.error('获取实时营收数据失败:', error);
                 this.currentMoney = '暂无数据';
@@ -800,7 +705,7 @@ export default {
                 resObj.BusinessTypeList.forEach((item) => {
                     // 同比
                     if (item.data) {
-                        let number = ((item.value - item.data) / item.data) * 100;
+                        let number = Number(item.data) ? ((item.value - item.data) / item.data) * 100 : 0;
                         if (number > 0) {
                             item.add = "+" + number.toFixed(2);
                         } else if (number < 0) {
@@ -811,7 +716,7 @@ export default {
                     }
                     // 环比
                     if (item.key) {
-                        let number = ((item.value - item.key) / item.key) * 100;
+                        let number = Number(item.key) ? ((item.value - item.key) / item.key) * 100 : 0;
                         if (number > 0) {
                             item.addQOQ = "+" + number.toFixed(2) + "%";
                         } else if (number < 0) {
@@ -919,11 +824,22 @@ export default {
 }
 </script>
 
+<style scoped lang="less">
+@bg: #f8f9fa;
+@muted: #666;
+@card: #fff;
+@shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+@primary: #27B25F;
+@primary2: #4CCC7F;
+@success: #2ed573;
+@warning: #ff9f43;
+@danger: #ff4757;
+@info: #3742fa;
 
-<style scoped lang="scss">
 .main {
     width: 100vw;
-    height: 100vh;
+    min-height: 100vh;
+    box-sizing: border-box;
     background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -955,24 +871,24 @@ export default {
 
             .topRight {
                 width: 310rpx;
-                height: 72rpx;
+                height: 56rpx;
                 background: #f6f8fa;
                 border-radius: 36rpx;
                 margin-left: 16rpx;
                 box-sizing: border-box;
-                padding: 16rpx 20rpx;
+                padding: 8rpx 16rpx;
                 display: flex;
                 align-items: center;
 
                 .searchIcon {
-                    width: 32rpx;
-                    height: 32rpx;
+                    width: 28rpx;
+                    height: 28rpx;
                 }
 
                 .searchText {
                     font-family: 'PingFangSC';
                     font-weight: 400;
-                    font-size: 28rpx;
+                    font-size: 24rpx;
                     color: #9fa1aa;
                     line-height: 40rpx;
                     text-align: left;
@@ -985,8 +901,8 @@ export default {
 
     .monthListBox {
         width: 100%;
-        // height: 600rpx;
         height: 460rpx;
+        margin-top: 8rpx;
 
         .swiperBox {
             width: 100%;
@@ -998,7 +914,7 @@ export default {
 
                 .swiperItemContent {
                     height: 100%;
-                    padding: 0 10rpx; // 中间间距一半（两边相加=20rpx）
+                    padding: 0 10rpx;
                     box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .06);
 
                     .swiperItemContentBox {
@@ -1071,7 +987,6 @@ export default {
                                     margin-left: 4rpx;
                                 }
                             }
-
                         }
 
                         .monthRevenueBox {
@@ -1124,7 +1039,6 @@ export default {
                             }
 
                             .newRightBox {
-                                // height: 100%;
                                 flex: 1;
 
                                 .newRightItem {
@@ -1188,7 +1102,6 @@ export default {
 
                         .yearAccountItem {
                             width: 100%;
-                            //background: #F9FAFC;
                             box-sizing: border-box;
                             margin-top: 48rpx;
 
@@ -1198,20 +1111,6 @@ export default {
                                 justify-content: space-between;
                                 margin-bottom: 8rpx;
 
-                                .itemType {
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 400;
-                                    font-size: 24rpx;
-                                    color: #ffffff;
-                                    line-height: 24rpx;
-                                    text-align: left;
-                                    font-style: normal;
-                                    padding: 4rpx 8rpx;
-                                    background: #f2792e;
-                                    border-radius: 4rpx;
-                                    margin-right: 8rpx;
-                                }
-
                                 .itemName {
                                     font-family: PingFangSC, PingFang SC;
                                     font-weight: 400;
@@ -1267,90 +1166,194 @@ export default {
                                 }
                             }
                         }
-
-                        .swiperItemContentYear {
-                            margin-top: 24rpx;
-                            font-family: 'PingFangSC';
-                            font-weight: 400;
-                            font-size: 28rpx;
-                            color: #160002;
-                            line-height: 40rpx;
-                            text-align: left;
-                            font-style: normal;
-
-                            .swiperItemContentUnit {
-                                font-family: 'PingFangSC';
-                                font-weight: 400;
-                                font-size: 24rpx;
-                                color: #A69E9F;
-                                line-height: 40rpx;
-                                text-align: left;
-                                font-style: normal;
-                                margin-left: 4rpx;
-                            }
-                        }
-
-                        .swiperItemContentYearRevenueBox {
-                            width: 100%;
-                            margin-top: 12rpx;
-                            display: flex;
-                            align-items: center;
-                            justify-content: space-between;
-
-                            .leftRevenueValue {
-                                font-family: 'DINAlternate';
-                                font-weight: bold;
-                                font-size: 40rpx;
-                                color: #160002;
-                                line-height: 40rpx;
-                                text-align: left;
-                                font-style: normal;
-                            }
-
-                            .rightRevenueValue {
-                                display: flex;
-                                align-items: center;
-
-                                .addValue {
-                                    font-family: 'DINAlternate';
-                                    font-weight: bold;
-                                    font-size: 28rpx;
-                                    line-height: 40rpx;
-                                    text-align: left;
-                                    font-style: normal;
-                                }
-
-                                .rightNav {
-                                    font-family: PingFangSC, PingFang SC;
-                                    font-weight: 400;
-                                    font-size: 28rpx;
-                                    color: #A69E9F;
-                                    line-height: 40rpx;
-                                    text-align: left;
-                                    font-style: normal;
-                                    margin-left: 4rpx;
-                                }
-                            }
-
-                        }
-
                     }
                 }
 
                 .swiperItemContent.is-first {
-                    padding-left: 20rpx; // 左边额外+10rpx，让边距=40rpx
-                }
-
-                .swiperItemContent.is-last {
-                    // padding-right: 20rpx; // 右边额外+10rpx，让边距=40rpx
+                    padding-left: 20rpx;
                 }
             }
         }
     }
 
+    .thingBox {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32rpx;
+        margin-top: 24rpx;
+
+        .revenue-banner {
+            background: #ffffff;
+            color: #160002;
+            padding: 24rpx 24rpx 8rpx;
+            border-radius: 16rpx;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 24rpx;
+            border: 2rpx solid #f0f0f0;
+
+            .revenue-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .revenue-title {
+                    font-weight: 400;
+                    font-size: 28rpx;
+                    color: #160002;
+                }
+
+                .right {
+                    width: 32rpx;
+                    height: 32rpx;
+                }
+            }
+
+            .revenue-content {
+                display: flex;
+                align-items: baseline;
+
+                .revenue-amount {
+                    font-family: DINAlternate-Bold, DINAlternate;
+                    font-size: 36rpx;
+                    font-weight: 600;
+                    margin-right: 12rpx;
+                    color: #27B25F;
+                }
+
+                .revenue-label {
+                    font-size: 24rpx;
+                    color: #666;
+                }
+            }
+
+            .revenue-date {
+                font-size: 24rpx;
+                color: #999;
+            }
+        }
+
+        .data-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16rpx;
+            margin-bottom: 24rpx;
+
+            .data-item {
+                background: #fff;
+                padding: 24rpx;
+                border-radius: 16rpx;
+                box-shadow: @shadow;
+                display: flex;
+                align-items: center;
+
+                .data-icon {
+                    width: 64rpx;
+                    height: 64rpx;
+                    background: linear-gradient(135deg, #DCE6FF, #EEF3FF);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 16rpx;
+
+                    .icon {
+                        width: 32rpx;
+                        height: 32rpx;
+                    }
+                }
+
+                .data-info {
+                    flex: 1;
+
+                    .data-label {
+                        font-size: 24rpx;
+                        color: @muted;
+                        margin-bottom: 8rpx;
+                    }
+
+                    .data-value {
+                        .value {
+                            font-size: 28rpx;
+                            font-weight: 600;
+                            color: #160002;
+                        }
+
+                        .unit {
+                            font-size: 20rpx;
+                            color: #A69E9F;
+                            margin-left: 4rpx;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .thingBox {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32rpx;
+        margin-top: 24rpx;
+
+        .data-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16rpx;
+
+            .data-item {
+                background: #fff;
+                padding: 24rpx;
+                border-radius: 16rpx;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                display: flex;
+                align-items: center;
+
+                .data-icon {
+                    width: 64rpx;
+                    height: 64rpx;
+                    background: linear-gradient(135deg, #DCE6FF, #EEF3FF);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 16rpx;
+
+                    .icon {
+                        width: 32rpx;
+                        height: 32rpx;
+                    }
+                }
+
+                .data-info {
+                    flex: 1;
+
+                    .data-label {
+                        font-size: 24rpx;
+                        color: #666;
+                        margin-bottom: 8rpx;
+                    }
+
+                    .data-value {
+                        .value {
+                            font-size: 28rpx;
+                            font-weight: 600;
+                            color: #160002;
+                        }
+
+                        .unit {
+                            font-size: 20rpx;
+                            color: #A69E9F;
+                            margin-left: 4rpx;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 即时营收
     .instantRevenue {
         width: calc(100% - 80rpx);
-        // height: 104px;
         box-sizing: border-box;
         padding: 2rpx;
         background: #fff;
@@ -1420,7 +1423,6 @@ export default {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                // margin-top: 24rpx;
                 margin-top: 4rpx;
 
                 .moneyText {
@@ -1461,7 +1463,6 @@ export default {
                         width: 88rpx;
                         height: 88rpx;
                         border-radius: 50%;
-                        // border: 1px solid #9FA6A3;
                         display: flex;
                         align-items: center;
                         justify-content: center;
@@ -1483,7 +1484,6 @@ export default {
                             font-weight: 400;
                             color: #000;
                             line-height: 30rpx;
-                            // margin-bottom: 16rpx;
                         }
 
                         .moneyText {
@@ -1516,8 +1516,6 @@ export default {
                             }
                         }
                     }
-
-
                 }
             }
         }
@@ -1527,19 +1525,20 @@ export default {
         }
     }
 
-
     .funBox {
         width: calc(100% - 64rpx);
         margin-left: 32rpx;
+        margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
         background: #ffffff;
         border-radius: 16rpx;
         box-sizing: border-box;
         padding: 32rpx 24rpx;
-        display: flex;
-        flex-flow: wrap;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24rpx;
+        box-shadow: @shadow;
 
         .funItem {
-            width: 25%;
             display: flex;
             justify-content: center;
 
@@ -1552,7 +1551,6 @@ export default {
                 .funIconBox {
                     width: 88rpx;
                     height: 88rpx;
-                    //border-radius: 50%;
                     overflow: hidden;
                     margin-bottom: 16rpx;
 
diff --git a/pages/map/index.vue b/pages/map/index.vue
index b0acea2..779ae98 100644
--- a/pages/map/index.vue
+++ b/pages/map/index.vue
@@ -202,22 +202,35 @@ export default {
     },
     //跳转到腾讯地图
     handleGomap(item) {
-      let seat = uni.getStorageSync('seatInfo')
-      let key = 'STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
-      let referer = 'goMap'
-      let startPoint = {
-        name: '我的位置',
-        latitude: seat.latitude,
-        longitude: seat.longitude
-      }
-      let endPoint = {
-        'name': item.SERVERPART_NAME,
-        latitude: item.SERVERPART_Y,
-        longitude: item.SERVERPART_X
-      }
-      wx.navigateTo({
-        url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
+      let obj = item;
+      uni.openLocation({
+        latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
+        longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
+        scale: 16, // 缩放比例
+        name: obj.SERVERPART_NAME,
+        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
+        success(data) {
+        },
+        fail(err) {
+        },
       });
+
+      // let seat = uni.getStorageSync('seatInfo')
+      // let key = 'STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
+      // let referer = 'goMap'
+      // let startPoint = {
+      //   name: '我的位置',
+      //   latitude: seat.latitude,
+      //   longitude: seat.longitude
+      // }
+      // let endPoint = {
+      //   'name': item.SERVERPART_NAME,
+      //   latitude: item.SERVERPART_Y,
+      //   longitude: item.SERVERPART_X
+      // }
+      // wx.navigateTo({
+      //   url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
+      // });
     },
     //返回上一级页面
     handleBack() {
diff --git a/pages/operatingStatements/detail.vue b/pages/operatingStatements/detail.vue
index 3beab32..389b891 100644
--- a/pages/operatingStatements/detail.vue
+++ b/pages/operatingStatements/detail.vue
@@ -1,282 +1,458 @@
 <template>
-	<view class="page-card" v-if="!isLoading">
-    <!-- 日期筛选 -->
-    <div class="uni-flex ai-center screen-box">
-      <picker mode="date" @change="bindDateChange($event,0)" :value="pageData.searchTime[0]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
-        <text>{{pageData.searchTime[0]}}</text>
-        <text class="uni-icon uni-icon-arrowdown"></text>
-      </picker>
-      <text class="mr20">至</text>
-      <picker mode="date" @change="bindDateChange($event,1)" :value="pageData.searchTime[1]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
-        <text>{{pageData.searchTime[1]}}</text>
-        <text class="uni-icon uni-icon-arrowdown"></text>
-      </picker>
-    </div>
-
-<!--    @tap="toTrend"-->
-		<view class="head-card" v-show="pageMsg.Serverpart_Name">
-			<view class="uni-flex jc-between ai-center text-strong">
-				<view class=""> {{pageMsg.Serverpart_Name}} </view>
-				<view class=""> ¥{{$util.fmoney(pageMsg.Serverpart_Revenue,2)}} </view>
+	<view class="main" v-if="!isLoading">
+		<!-- 时间筛选卡片 -->
+		<view class="filterCard">
+			<view class="filterHeader">
+				<view class="filterTitle">时间筛选</view>
 			</view>
-			<view class="uni-flex jc-between ai-center">
-				<text class="" v-if="pageMsg.Serverpart_S"> {{pageMsg.Serverpart_S}} &nbsp; &nbsp;¥{{$util.fmoney(pageMsg.Serverpart_RevenueS,2)}}</text>
-				<text class="" v-if="pageMsg.Serverpart_N"> {{pageMsg.Serverpart_N}} &nbsp; &nbsp;¥{{$util.fmoney(pageMsg.Serverpart_RevenueN,2)}}</text>
+
+			<view class="dateSelector">
+				<view class="dateRange">
+					<picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
+						:end="pageData.endDate" start="2018-12-01" class="datePicker">
+						<view class="dateInput">
+							<text>{{ pageData.searchTime[0] }}</text>
+							<text class="uni-icon uni-icon-arrowdown"></text>
+						</view>
+					</picker>
+
+					<view class="dateSeparator">至</view>
+
+					<picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
+						:end="pageData.endDate" start="2018-12-01" class="datePicker">
+						<view class="dateInput">
+							<text>{{ pageData.searchTime[1] }}</text>
+							<text class="uni-icon uni-icon-arrowdown"></text>
+						</view>
+					</picker>
+				</view>
 			</view>
 		</view>
-		<view class="page-list" v-if="pageMsg.ShopList && pageMsg.ShopList.length>0">
-<!--			<view v-for="(dateItem,i) in pageMsg.revenueReportDetilsDates" :key="i">-->
-<!--				<text class="list-date"> {{// $util.cutDate(dateItem.Statistics_Date,'MM.DD')}}</text>-->
-				<view class="cell-body uni-flex ai-center" v-for="(item,i) in pageMsg.ShopList" :key="i">
-					<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'" mode="aspectFit"></image>
-					<view class="">
-						<view class="uni-flex ai-center jc-between">
-							<text>{{item.BusinessType_Name}}</text>
-							<text class="shop-total">＋ ¥{{$util.fmoney(item.BusinessType_Revenue,2)}}</text>
-						</view>
-						<view class="uni-flex ai-center jc-between">
-							<text style="display: inline-block;width: 20%" class="type-text" :class="{'scan':item.Upload_Type==1,'port':item.Upload_Type==2}">
-								<template v-if="item.Upload_Type==1">
-									扫码上传
-								</template>
-								<template v-else-if="item.Upload_Type==2" >
-									接口传输
-								</template>
-								<template v-else>
-									自动上传
-								</template>
-								<!-- <text class="type-text scan" v-if="item.Upload_Type==1" >扫码上传</text>
-								<text class="type-text port" >接口传输</text>
-								<text v-else>自动上传</text> -->
-							</text>
-							<view class="uni-flex ai-center" style="display: inline-block;width: 80%">
-                <div style="display: inline-block;width: 48%;text-align: left;margin-right: 4%" class="text-coast">
-                  <text style="display: inline-block;width: 40px;text-align: left">
-                    {{item.Serverpart_RevenueS===0 || item.Serverpart_RevenueS? `${item.Serverpart_S}： `:''}}
-                  </text>
-                  <text  style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
-                    {{item.Serverpart_RevenueS===0 || item.Serverpart_RevenueS? `¥${$util.fmoney(item.Serverpart_RevenueS,2)}`:''}}
-                  </text>
-                </div>
-								<div style="display: inline-block;width: 48%;text-align: right" class="text-coast">
-                  <text style="display: inline-block;width: 40px;text-align: left">
-                    {{item.Serverpart_RevenueN===0 || item.Serverpart_RevenueN? `${item.Serverpart_N}： `:''}}
-                  </text>
-                  <text  style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
-                    {{item.Serverpart_RevenueN===0 || item.Serverpart_RevenueN? `¥${$util.fmoney(item.Serverpart_RevenueN,2)}`:''}}
-                  </text>
-                </div>
-              </view>
+
+		<!-- 服务区信息卡片 -->
+		<view class="serviceCard" v-show="pageMsg.Serverpart_Name">
+			<view class="serviceHeader">
+				<view class="serviceName">{{ pageMsg.Serverpart_Name }}</view>
+				<view class="serviceRevenue">¥{{ $util.fmoney(pageMsg.Serverpart_Revenue, 2) }}</view>
+			</view>
+
+			<view class="serviceDetails" v-if="pageMsg.Serverpart_S || pageMsg.Serverpart_N">
+				<view class="detailItem" v-if="pageMsg.Serverpart_S">
+					<view class="detailLabel">{{ pageMsg.Serverpart_S }}</view>
+					<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueS, 2) }}</view>
+				</view>
+				<view class="detailItem" v-if="pageMsg.Serverpart_N">
+					<view class="detailLabel">{{ pageMsg.Serverpart_N }}</view>
+					<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueN, 2) }}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 商铺列表 -->
+		<view class="shopList" v-if="pageMsg.ShopList && pageMsg.ShopList.length > 0">
+			<view class="shopItem" v-for="(item, i) in pageMsg.ShopList" :key="i">
+				<view class="shopHeader">
+					<view class="shopIcon">
+						<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'"
+							mode="aspectFill" />
+					</view>
+
+					<view class="shopInfo">
+						<view class="shopTop">
+							<view class="shopName">{{ item.BusinessType_Name }}</view>
+							<view class="shopRevenue">+ ¥{{ $util.fmoney(item.BusinessType_Revenue, 2) }}</view>
 						</view>
 
+						<view class="shopBottom">
+							<view class="uploadType" :class="{
+								'scan': item.Upload_Type == 1,
+								'port': item.Upload_Type == 2,
+								'auto': item.Upload_Type != 1 && item.Upload_Type != 2
+							}">
+								<view class="typeIcon"></view>
+								<text class="typeText">
+									<template v-if="item.Upload_Type == 1">扫码上传</template>
+									<template v-else-if="item.Upload_Type == 2">接口传输</template>
+									<template v-else>自动上传</template>
+								</text>
+							</view>
+
+							<view class="revenueDetails">
+								<view class="revenueItem"
+									v-if="item.Serverpart_RevenueS || item.Serverpart_RevenueS === 0">
+									<text class="revenueLabel">{{ item.Serverpart_S }}:</text>
+									<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueS, 2) }}</text>
+								</view>
+								<view class="revenueItem"
+									v-if="item.Serverpart_RevenueN || item.Serverpart_RevenueN === 0">
+									<text class="revenueLabel">{{ item.Serverpart_N }}:</text>
+									<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueN, 2) }}</text>
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
-<!--			</view>-->
+			</view>
 		</view>
-		<view class="" v-if="isLoading && !pageOption.Serverpart_Name">
-			<noFound nodata="true" :text="noDataText"/>
+
+		<!-- 无数据状态 -->
+		<view v-if="isLoading && !pageOption.Serverpart_Name" class="noDataContainer">
+			<noFound nodata="true" :text="noDataText" />
 		</view>
 	</view>
 </template>
 
 <script>
 import request from '@/util/index.js'
-	export default {
-		data() {
-      let now = new Date()
-      let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD',-1)
-      let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
-			return {
+export default {
+	data() {
+		let now = new Date()
+		let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
+		let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
+		return {
+			isLoading: true,
+			pageData: {
+				endDate: nowTime,
+				searchTime: [sTime, nowTime],
+				msg: {},
 				isLoading: true,
-        pageData: {
-          endDate: nowTime,
-          searchTime: [sTime,nowTime],
-          msg: {},
-          isLoading: true,
-          exsideShow: true,
-          insideShow: true,
-        },
-        pageMsg:{},
-				pageOption: {},
-				noDataText: '抱歉，没有数据，请稍后重试'
+				exsideShow: true,
+				insideShow: true,
+			},
+			pageMsg: {},
+			pageOption: {},
+			noDataText: '抱歉，没有数据，请稍后重试'
+		}
+	},
+	methods: {
+		bindDateChange(e, index) {
+			let nowDate = this.pageData.searchTime[index]
+			if (e.detail.value != nowDate) {
+				this.pageData.searchTime[index] = e.detail.value
+				this.$forceUpdate()
+				this.getDetail({ st: this.pageData.searchTime[0], et: this.pageData.searchTime[1], id: this.pageOption.id, pcode: this.pageOption.pcode })
 			}
 		},
-		methods: {
-      bindDateChange(e,index){
-        let nowDate = this.pageData.searchTime[index]
-        if(e.detail.value != nowDate){
-          this.pageData.searchTime[index] = e.detail.value
-          this.$forceUpdate()
-          this.getDetail({st:this.pageData.searchTime[0],et:this.pageData.searchTime[1],id:this.pageOption.id,pcode:this.pageOption.pcode})
-        }
-      },
-      toTrend(){
-				this.$util.toNextRoute('navigateTo','/pages/operatingStatements/operatingTrend?name='+this.pageMsg.Serverpart_Name+'&time='+this.pageOption.et+'&id='+this.pageOption.id+'&ProvinceCode='+this.pageOption.pcode)
-			},
-			getDetail(obj){
-				let _this = this
-				uni.showLoading({
-					title:'正在加载...',
-					mask:true
-				})
-				// _this.$request.$webGet('WeChat/GetRevenueReportDetils',{
-        request.$webGet('CommercialApi/Revenue/GetRevenueReportDetil',{
-          startTime: obj.st,
-          endTime: obj.et,
-          serverpartId: obj.id,
-          provinceCode: obj.pcode,
-          BusinessTrade: obj.BusinessTrade || '',
-          SearchKeyName:_this.pageOption.searchKey,
-          SearchKeyValue:_this.pageOption.searchValue,
-          BusinessType:_this.pageOption.BusinessTypeValue>0?_this.pageOption.BusinessTypeValue:'',
-          SettlementMode:_this.pageOption.SettlementModeValue>0?_this.pageOption.SettlementModeValue:'',
-				}).then(res=>{
-					if(res.Result_Code==100) {
-						_this.pageMsg = res.Result_Data
-
-					}else if(res.Result_Code==200 || res.Result_Code==999){
-            _this.noDataText = '暂无数据'
-          } else{
-						_this.noDataText = res.Result_Desc
-					}
-					uni.hideLoading()
-					_this.isLoading = false
-				})
-			},
+		toTrend() {
+			this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?name=' + this.pageMsg.Serverpart_Name + '&time=' + this.pageOption.et + '&id=' + this.pageOption.id + '&ProvinceCode=' + this.pageOption.pcode)
 		},
-    // 拿到传入的数据
-		onLoad(op) {
-      console.log('op',op)
-			this.pageOption = op
-      if (this.pageOption.st){
-        this.pageData.searchTime[0] = this.pageOption.st
-      }
-      if (this.pageOption.et){
-        this.pageData.searchTime[1] = this.pageOption.et
-      }
-			this.getDetail(op)
+		getDetail(obj) {
+			let _this = this
+			uni.showLoading({
+				title: '正在加载...',
+				mask: true
+			})
+			// _this.$request.$webGet('WeChat/GetRevenueReportDetils',{
+			request.$webGet('CommercialApi/Revenue/GetRevenueReportDetil', {
+				startTime: obj.st,
+				endTime: obj.et,
+				serverpartId: obj.id,
+				provinceCode: obj.pcode,
+				BusinessTrade: obj.BusinessTrade || '',
+				SearchKeyName: _this.pageOption.searchKey,
+				SearchKeyValue: _this.pageOption.searchValue,
+				BusinessType: _this.pageOption.BusinessTypeValue > 0 ? _this.pageOption.BusinessTypeValue : '',
+				SettlementMode: _this.pageOption.SettlementModeValue > 0 ? _this.pageOption.SettlementModeValue : '',
+			}).then(res => {
+				if (res.Result_Code == 100) {
+					_this.pageMsg = res.Result_Data
+
+				} else if (res.Result_Code == 200 || res.Result_Code == 999) {
+					_this.noDataText = '暂无数据'
+				} else {
+					_this.noDataText = res.Result_Desc
+				}
+				uni.hideLoading()
+				_this.isLoading = false
+			})
+		},
+	},
+	// 拿到传入的数据
+	onLoad(op) {
+		console.log('op', op)
+		this.pageOption = op
+		if (this.pageOption.st) {
+			this.pageData.searchTime[0] = this.pageOption.st
 		}
+		if (this.pageOption.et) {
+			this.pageData.searchTime[1] = this.pageOption.et
+		}
+		this.getDetail(op)
 	}
+}
 </script>
 
-<style>
-	page {
-		background-color: #fff;
-	}
-	.page-card {
-		margin: 0 20rpx 30rpx;
+<style lang="scss" scoped>
+// 使用项目全局颜色变量
+$bg: #f8f9fa;
+$muted: #666;
+$card: #fff;
+$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+$primary: #27B25F;
+$primary2: #4CCC7F;
+$success: #2ed573;
+$warning: #ff9f43;
+$danger: #ff4757;
+$info: #3742fa;
 
-	}
-  .screen-box {
-    background-color: #fff;
-    padding: 0 20rpx;
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 9;
-  }
-  .screen-box .screen-unit {
-    display: flex;
-    align-items: center;
-    width: 200rpx;
-    padding: 0 14rpx;
-    line-height: 3;
-  }
-  .screen-box .mr20 {
-    margin-right: 20rpx;
-    color: #95999C;
-  }
-  .uni-icon-arrowdown {
-    font-size: 22rpx;
-    color: #C7C7C7;
-    margin-left: 8rpx;
-  }
-  .screen-box text {
-    line-height: 3;
-  }
-  .screen-box image{
-    width: 12rpx;
-    height: 8rpx;
-    margin: 0 16rpx;
-    vertical-align: middle;
-  }
-	.head-card {
-		padding: 30rpx 35rpx;
-		background: linear-gradient(to left, #f7f6f8 0%, #eceaeb 100%);
-		border-radius: 12rpx 12rpx 0 0 ;
-	}
-	.head-card > view+view {
-		margin-top: 16rpx;
-	}
-	.text-strong {
-		font-weight: bolder;
-	}
-	.head-card > view>text {
-		font-size: 24rpx;
-		color: #333;
-	}
-	.list-date {
-		font-size: 22rpx;
-		background-color: #f8f8f8;
-		border-radius: 4rpx;
-		padding: 4rpx 12rpx;
-		margin-top: 20rpx;
-	}
-	.page-list {
-		border: 1rpx solid #F0F0F0;
-		border-radius: 0 0 12rpx 12rpx;
-		overflow: hidden;
+page {
+	background-color: $bg;
+}
 
-		padding: 30rpx 16rpx 30rpx 16rpx;
+.main {
+	width: 100vw;
+	min-height: 100vh;
+	background-color: $bg;
+	padding: 32rpx;
+	padding-bottom: env(safe-area-inset-bottom);
+	box-sizing: border-box;
+}
+
+// 筛选卡片
+.filterCard {
+	background: $card;
+	border-radius: 16rpx;
+	padding: 24rpx;
+	margin-bottom: 32rpx;
+	box-shadow: $shadow;
+
+	.filterHeader {
+		margin-bottom: 24rpx;
+
+		.filterTitle {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #160002;
+		}
 	}
-	.cell-body {
-		position: relative;
-		padding: 20rpx 20rpx 20rpx 0;
+
+	.dateSelector {
+		.dateRange {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.datePicker {
+				flex: 1;
+
+				.dateInput {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					padding: 16rpx 24rpx;
+					background: #f8f8f8;
+					border-radius: 12rpx;
+
+					text:first-child {
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #160002;
+					}
+
+					.uni-icon-arrowdown {
+						font-size: 20rpx;
+						color: $muted;
+						margin-left: 8rpx;
+					}
+				}
+			}
+
+			.dateSeparator {
+				margin: 0 24rpx;
+				font-size: 24rpx;
+				font-weight: 400;
+				color: $muted;
+			}
+		}
 	}
-	.cell-body image {
-		width: 60rpx;
-		height: 60rpx;
-		border-radius: 50%;
-		margin-right: 16rpx;
-	}
-	.cell-body>view {
-		flex: 1;
-	}
-	.page-list text {
-		font-size: 22rpx;
-		color: #2E2E2E;
-	}
-	text.shop-total {
-		font-size: 24rpx;
-	}
-	text.type-text {
-		color: #DFBE9F;
+}
+
+// 服务区信息卡片
+.serviceCard {
+	background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
+	border-radius: 16rpx;
+	padding: 24rpx;
+	margin-bottom: 32rpx;
+	box-shadow: $shadow;
+
+	.serviceHeader {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+
+		.serviceName {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #fff;
+			flex: 1;
+		}
+
+		.serviceRevenue {
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #fff;
+			font-family: 'DIN Alternate', 'Arial', sans-serif;
+		}
 	}
-	text.type-text.scan::before,text.type-text.port::before {
-		content: '';
-		width: 21rpx;
-		height: 23rpx;
-		margin-right: 8rpx;
+
+	.serviceDetails {
+		display: flex;
+		gap: 32rpx;
+
+		.detailItem {
+			flex: 1;
+
+			.detailLabel {
+				font-size: 24rpx;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.8);
+				margin-bottom: 8rpx;
+			}
+
+			.detailValue {
+				font-size: 24rpx;
+				font-weight: 600;
+				color: #fff;
+				font-family: 'DIN Alternate', 'Arial', sans-serif;
+			}
+		}
 	}
-	text.type-text.scan::before {
-		background: url(/static/images/revenue/scan-up.png) no-repeat center;
-		background-size: contain;
+}
+
+// 商铺列表
+.shopList {
+	.shopItem {
+		background: $card;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		padding: 32rpx;
+		box-shadow: $shadow;
+
+		.shopHeader {
+			display: flex;
+			align-items: flex-start;
+
+			.shopIcon {
+				width: 80rpx;
+				height: 80rpx;
+				margin-right: 24rpx;
+				flex-shrink: 0;
+
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 12rpx;
+				}
+			}
+
+			.shopInfo {
+				flex: 1;
+
+				.shopTop {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 16rpx;
+
+					.shopName {
+						font-size: 26rpx;
+						font-weight: 600;
+						color: #160002;
+						flex: 1;
+					}
+
+					.shopRevenue {
+						font-size: 28rpx;
+						font-weight: 600;
+						color: $primary;
+						font-family: 'DIN Alternate', 'Arial', sans-serif;
+					}
+				}
+
+				.shopBottom {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.uploadType {
+						display: flex;
+						align-items: center;
+
+						.typeIcon {
+							width: 24rpx;
+							height: 24rpx;
+							margin-right: 8rpx;
+							flex-shrink: 0;
+						}
+
+						.typeText {
+							font-size: 22rpx;
+							font-weight: 400;
+						}
+
+						&.scan {
+							.typeIcon {
+								background: url(/static/images/revenue/scan-up.png) no-repeat center;
+								background-size: contain;
+							}
+
+							.typeText {
+								color: #DFBE9F;
+							}
+						}
+
+						&.port {
+							.typeIcon {
+								background: url(/static/images/revenue/port.png) no-repeat center;
+								background-size: contain;
+							}
+
+							.typeText {
+								color: #95BAF2;
+							}
+						}
+
+						&.auto {
+							.typeText {
+								color: $muted;
+							}
+						}
+					}
+
+					.revenueDetails {
+						display: flex;
+						gap: 24rpx;
+
+						.revenueItem {
+							display: flex;
+							align-items: center;
+
+							.revenueLabel {
+								font-size: 22rpx;
+								font-weight: 400;
+								color: $muted;
+								margin-right: 8rpx;
+							}
+
+							.revenueValue {
+								font-size: 22rpx;
+								font-weight: 600;
+								color: #160002;
+								font-family: 'DIN Alternate', 'Arial', sans-serif;
+							}
+						}
+					}
+				}
+			}
+		}
 	}
-	text.type-text.port::before {
-		background: url(/static/images/revenue/port.png) no-repeat center;
-		background-size: contain;
-	}
-	text.type-text.port {
-		color: #95BAF2;
-	}
-	text.text-coast {
-		color: #848484;
-		width: 184rpx;
-    text-align: right;
-	}
-	/*text.text-coast + text.text-coast {*/
-	/*	text-align: right;*/
-	//}
+}
+
+// 无数据状态
+.noDataContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 400rpx;
+}
 </style>
diff --git a/pages/operatingStatements/index.vue b/pages/operatingStatements/index.vue
index f90b1a1..fca1cf7 100644
--- a/pages/operatingStatements/index.vue
+++ b/pages/operatingStatements/index.vue
@@ -1,196 +1,221 @@
 <template>
-  <view class="page-body">
+  <view class="main">
     <view class="meng" v-if="showNotice" @click="handleShowNotice"></view>
-    <!-- 日期筛选 -->
-    <div class="ai-center screen-box" style="padding-bottom: 8rpx">
-      <!--      <view class="searchBtn" @click="handleSelect">查询筛选</view>-->
-      <!--	搜索框内容 -->
-      <div style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0">
-        <!--        <div class="search_box">-->
-        <!--          <img src="/static/images/recons/search_icon.svg" alt="" class="search_icon">-->
-        <!--          <input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="请输入关键字"  class="select_input" clear/>-->
-        <!--          <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">-->
-        <!--        </div>-->
-        <!--        <div class="select_btn" @click="handleSelect" >-->
-        <!--          <img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">-->
-        <!--          筛选-->
-        <!--        </div>-->
-      </div>
-      <!-- 查询时间 -->
-      <div style="display: flex;justify-content: space-between">
-        <view style="display: flex;">
+
+    <!-- 筛选卡片 -->
+    <view class="filterCard">
+      <view class="filterHeader">
+        <view class="filterTitle">查询筛选</view>
+        <view class="filterBtn" @click="handleSelect">
+          <image class="filterIcon" src="/static/images/recons/select_icon.svg" />
+          <text>筛选</text>
+        </view>
+      </view>
+
+      <!-- 时间选择器 -->
+      <view class="dateSelector">
+        <view class="dateRange">
           <picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
-            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
-            <text>{{ pageData.searchTime[0] }}</text>
-            <text class="uni-icon uni-icon-arrowdown"></text>
+            :end="pageData.endDate" start="2018-12-01" class="datePicker">
+            <view class="dateInput">
+              <text>{{ pageData.searchTime[0] }}</text>
+              <text class="uni-icon uni-icon-arrowdown"></text>
+            </view>
           </picker>
-          <text class="mr20">至</text>
+
+          <view class="dateSeparator">至</view>
+
           <picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
-            :end="pageData.endDate" start="2018-12-01" class="screen-unit">
-            <text>{{ pageData.searchTime[1] }}</text>
-            <text class="uni-icon uni-icon-arrowdown"></text>
+            :end="pageData.endDate" start="2018-12-01" class="datePicker">
+            <view class="dateInput">
+              <text>{{ pageData.searchTime[1] }}</text>
+              <text class="uni-icon uni-icon-arrowdown"></text>
+            </view>
           </picker>
         </view>
-
-
-        <div class="select_btn" @click="handleSelect">
-          <img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">
-          筛选
-        </div>
-      </div>
-      <!-- BusinessType【经营模式】  SettlementMode【结算模式】 -->
-      <!--      <view class="searchBox">-->
-      <!--        <view class="searchItem">-->
-      <!--          <span class="searchLabel">经营模式</span>-->
-      <!--          <picker mode="selector" :range="BusinessTypeList" :value="BusinessTypeIndex" range-key="label">-->
-      <!--            {{BusinessTypeList[BusinessTypeIndex].label}}-->
-      <!--          </picker>-->
-      <!--        </view>-->
-      <!--        <view class="searchItem">-->
-      <!--          <span class="searchLabel">结算模式</span>-->
-      <!--          <picker mode="selector" :range="SettlementModeList" :value="SettlementModeIndex" range-key="label">-->
-      <!--            {{SettlementModeList[SettlementModeIndex].label}}-->
-      <!--          </picker>-->
-      <!--        </view>-->
-      <!--      </view>-->
+      </view>
+    </view>
+    <!-- BusinessType【经营模式】  SettlementMode【结算模式】 -->
+    <!--      <view class="searchBox">-->
+    <!--        <view class="searchItem">-->
+    <!--          <span class="searchLabel">经营模式</span>-->
+    <!--          <picker mode="selector" :range="BusinessTypeList" :value="BusinessTypeIndex" range-key="label">-->
+    <!--            {{BusinessTypeList[BusinessTypeIndex].label}}-->
+    <!--          </picker>-->
+    <!--        </view>-->
+    <!--        <view class="searchItem">-->
+    <!--          <span class="searchLabel">结算模式</span>-->
+    <!--          <picker mode="selector" :range="SettlementModeList" :value="SettlementModeIndex" range-key="label">-->
+    <!--            {{SettlementModeList[SettlementModeIndex].label}}-->
+    <!--          </picker>-->
+    <!--        </view>-->
+    <!--      </view>-->
     </div>
     <template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
-      <view class="uni-flex ai-center head-card">
-        <!--        @tap="toTrend()"-->
-        <view class="topDetail" style="width: 100%">
-          <view class="label">实收总额</view>
-          <view class="price-num">¥{{ $util.fmoney(pageData.msg.Total_Revenue, 2) }}</view>
-          <view class="detailBox" style="margin-top: 12px">
+      <!-- 实收总额卡片 -->
+      <view class="revenueCard">
+        <view class="revenueHeader">
+          <view class="revenueTitle">实收总额</view>
+          <view class="revenueAmount">¥{{ $util.fmoney(pageData.msg.Total_Revenue, 2) }}</view>
+        </view>
+
+        <view class="revenueDetails">
+          <view class="detailGrid">
             <view class="detailItem">
-              <view class="value">{{ $util.fmoney(pageData.msg.Different_Price_More, 2) }}</view>
-              <view class="label">长款金额 <span class="unit">/元</span></view>
+              <view class="itemValue">{{ $util.fmoney(pageData.msg.Different_Price_More, 2) }}</view>
+              <view class="itemLabel">长款金额<text class="unit">/元</text></view>
             </view>
             <view class="detailItem">
-              <view class="value">{{ $util.fmoney(pageData.msg.Different_Price_Less, 2) }}</view>
-              <view class="label">短款金额 <span class="unit">/元</span></view>
+              <view class="itemValue">{{ $util.fmoney(pageData.msg.Different_Price_Less, 2) }}</view>
+              <view class="itemLabel">短款金额<text class="unit">/元</text></view>
             </view>
             <view class="detailItem">
-              <view class="value">{{ $util.fmoney(pageData.msg.TotalOffAmount, 2) }}</view>
-              <view class="label">优惠金额 <span class="unit">/元</span></view>
+              <view class="itemValue">{{ $util.fmoney(pageData.msg.TotalOffAmount, 2) }}</view>
+              <view class="itemLabel">优惠金额<text class="unit">/元</text></view>
             </view>
             <view class="detailItem">
-              <view class="value">{{ $util.noDecimal(pageData.msg.TicketCount) }}</view>
-              <view class="label">客单数量<span class="unit">/笔</span></view>
+              <view class="itemValue">{{ $util.noDecimal(pageData.msg.TicketCount) }}</view>
+              <view class="itemLabel">客单数量<text class="unit">/笔</text></view>
             </view>
             <view class="detailItem">
-              <view class="value">{{ $util.fmoney(pageData.msg.TotalCount, 2) }}</view>
-              <view class="label">商品出售 <span class="unit">/件</span></view>
+              <view class="itemValue">{{ $util.fmoney(pageData.msg.TotalCount, 2) }}</view>
+              <view class="itemLabel">商品出售<text class="unit">/件</text></view>
             </view>
             <view class="detailItem">
-              <view class="value">{{ $util.fmoney(pageData.msg.countave, 2) }}</view>
-              <view class="label">商品均价 <span class="unit">/元</span></view>
+              <view class="itemValue">{{ $util.fmoney(pageData.msg.countave, 2) }}</view>
+              <view class="itemLabel">商品均价<text class="unit">/元</text></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 经营报表标题 -->
+      <view class="reportHeader">
+        <view class="reportTitle">
+          <image class="reportIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenue/yestoday-region.png" />
+          <text>经营报表</text>
+        </view>
+
+        <view class="reportInfo"
+          v-if="pageData.msg && (pageData.msg.SearchResult || BusinessTypeValue !== 0 || SettlementModeValue !== 0)">
+          <view v-if="showModal" class="reportText">
+            <text v-if="copySearchText && (BusinessTypeValue || SettlementModeValue)" class="warningText">
+              温馨提示：模糊查询不支持选择经营方法/结算方式
+            </text>
+            <text v-if="pageData.msg.SearchResult && pageData.msg.SearchResult[0]" class="searchResult">{{
+              pageData.msg.SearchResult[0] }}</text>
+            <text v-if="BusinessTypeValue !== 0" class="filterMode">
+              经营模式: {{ getBusinessTypeLabel(BusinessTypeValue) }}
+            </text>
+            <text v-if="SettlementModeValue !== 0" class="filterMode">
+              结算模式: {{ getSettlementModeLabel(SettlementModeValue) }}
+            </text>
+          </view>
+          <view v-else class="reportText">
+            <text v-if="copySearchText && (BusinessTypeValue || SettlementModeValue)" class="warningText">
+              温馨提示：模糊查询不支持选择经营方法/结算方式
+            </text>
+            <view v-for="(item, index) in pageData.msg.SearchResult" :key="index" class="searchResultItem">
+              <text v-for="(subItem, subIndex) in item" :key="subIndex" class="searchResultText">
+                <text class="highlightText" v-if="item.length > 1 && subItem.indexOf('：') === -1">
+                  {{ copySearchText }}
+                </text>
+                {{ subItem }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 区域数据卡片 -->
+      <view class="regionCard" v-if="ServerpartList.length > 0">
+        <!-- 省内区域 -->
+        <view class="regionSection">
+          <view class="regionTitle" :class="{ 'active': pageData.insideShow }"
+            @click="pageData.insideShow = !pageData.insideShow">
+            <view class="titleText">全部片区</view>
+            <view class="expandIcon" :class="{ 'expanded': pageData.insideShow }">
+              <text class="uni-icon uni-icon-arrowdown"></text>
             </view>
           </view>
 
-        </view>
-      </view>
-      <view class="modle-title">
-        <image src="https://eshangtech.com/ShopICO/ahyd-BID/revenue/yestoday-region.png" mode="aspectFit"></image>
-        <text>经营报表</text>
-      </view>
-      <view class="modleText" v-if="pageData.msg.SearchResult">
-        <div v-if="showModal">
-          <span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text"
-            style="color: red;display: block">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
-          <span class="text">{{ pageData.msg.SearchResult[0] }}</span>
-          <view class="text" v-if="BusinessTypeValue !== 0">{{`经营模式: ${BusinessTypeList.filter(item =>
-            item.value === BusinessTypeValue)[0].label}`}}</view>
-          <view class="text" v-if="SettlementModeValue !== 0">{{`结算模式: ${SettlementModeList.filter(item =>
-            item.value === SettlementModeValue)[0].label}`}}</view>
-        </div>
-        <div v-else>
-          <span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text"
-            style="color: red">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
-          <div v-for="(item, index) in pageData.msg.SearchResult" :key="index">
-            <span class="text" v-for="(subItem, subIndex) in item" :key="subIndex">
-              <span class="text" style="color:red" v-if="item.length > 1 && subItem.indexOf('：') === -1">{{
-                copySearchText }}</span>
-              {{ subItem }}
-            </span>
-          </div>
-        </div>
-
-
-
-      </view>
-      <view class="bg-white" v-if="ServerpartList.length > 0">
-        <view class="region-area-title uni-flex ai-center jc-between" v-show="pageData.msg.Province_ExternalAmount"
-          :class="{ 'active': pageData.insideShow }" @tap="pageData.insideShow = !pageData.insideShow">
-          <text>省内区域</text>
-        </view>
-        <view v-show="pageData.insideShow">
-          <view v-for="(item, i) in ServerpartList" :key="i">
-            <div class=" region-cell" @tap="toggleRegion(item)">
-              <div class="region-cell-unit region-title cuIcon-triangledownfill">
-                <text class="">{{ item.Region_Name }}</text>
-                <div class="ct01">
-                  <text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
-                </div>
-              </div>
-              <div class="region-cell-unit">
-                <text>营收占比</text>
-                <div class="ct01">
-                  <text class="strong-text">{{ item.Revenue_Proportion }}</text>
-                </div>
-              </div>
-              <div class="region-cell-unit">
-                <text class="uni-icon uni-icon-arrowright" :class="{ 'active': item.show }"></text>
-              </div>
-            </div>
-            <ul class="region-cell-area" v-show="item.show">
-              <li v-for="(child, index) in item.revenueServerModels" :class="{ 'visited': child.visited }" :key="index"
-                @tap="toDetail(child)">
-                <view>{{ child.Serverpart_Name }}</view>
-                <view class="uni-flex ai-center data-number">
-                  <text class="">{{ child.Revenue_Proportion }}</text>
-                  <text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
+          <view v-show="pageData.insideShow" class="regionList">
+            <view v-for="(item, i) in ServerpartList" :key="i" class="regionItem">
+              <view class="regionHeader" @click="toggleRegion(item)">
+                <view class="regionInfo">
+                  <view class="regionName">{{ item.Region_Name }}</view>
+                  <view class="regionRevenue">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</view>
                 </view>
-              </li>
-            </ul>
-          </view>
+                <view class="regionStats">
+                  <view class="statLabel">营收占比</view>
+                  <view class="statValue">{{ item.Revenue_Proportion }}</view>
+                </view>
+                <view class="expandBtn" :class="{ 'active': item.show }">
+                  <text class="uni-icon uni-icon-arrowright"></text>
+                </view>
+              </view>
 
+              <view class="serverList" v-show="item.show">
+                <view v-for="(child, index) in item.revenueServerModels" :key="index" class="serverItem"
+                  :class="{ 'visited': child.visited }" @tap="toDetail(child)">
+                  <view class="serverInfo">
+                    <view class="serverName">{{ child.Serverpart_Name }}</view>
+                    <view class="serverStats">
+                      <text class="serverProportion">{{ child.Revenue_Proportion }}</text>
+                      <text class="serverRevenue">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
+                    </view>
+                  </view>
+                  <view class="serverArrow">
+                    <text class="uni-icon uni-icon-arrowright"></text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
         </view>
 
+        <!-- 省外区域 -->
         <template v-if="insideRegionList.length > 0">
-          <view class="region-area-title uni-flex ai-center jc-between" :class="{ 'active': pageData.exsideShow }"
-            @tap="pageData.exsideShow = !pageData.exsideShow">
-            <text>省外区域</text>
-          </view>
-          <view v-show="pageData.exsideShow">
-            <view v-for="(item, i) in insideRegionList" :key="i">
-              <div class=" region-cell" @tap="toggleRegion(item)">
-                <div class="region-cell-unit region-title cuIcon-triangledownfill" :class="{ 'active': item.show }">
-                  <text class="">{{ item.Region_Name }}</text>
-                  <div class="ct01">
-                    <text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
-                  </div>
-                </div>
-                <div class="region-cell-unit">
-                  <text>营收占比</text>
-                  <div class="ct01">
-                    <text class="strong-text">{{ item.Revenue_Proportion }}</text>
-                  </div>
-
-                </div>
-                <div class="region-cell-unit"><text class="uni-icon uni-icon-arrowright"
-                    :class="{ 'active': item.show }"></text></div>
-              </div>
-              <ul class="region-cell-area" v-show="item.show">
-                <li v-for="(child, index) in item.revenueServerModels" :class="{ 'visited': child.visited }"
-                  :key="index" @tap="toDetail(child)">
-                  <view>{{ child.Serverpart_Name }}</view>
-                  <view class="uni-flex ai-center data-number">
-                    <text class="">{{ child.Revenue_Proportion }}</text>
-                    <text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
+          <view class="regionSection">
+            <view class="regionTitle" :class="{ 'active': pageData.exsideShow }"
+              @click="pageData.exsideShow = !pageData.exsideShow">
+              <view class="titleText">省外区域</view>
+              <view class="expandIcon" :class="{ 'expanded': pageData.exsideShow }">
+                <text class="uni-icon uni-icon-arrowdown"></text>
+              </view>
+            </view>
 
+            <view v-show="pageData.exsideShow" class="regionList">
+              <view v-for="(item, i) in insideRegionList" :key="i" class="regionItem">
+                <view class="regionHeader" @click="toggleRegion(item)">
+                  <view class="regionInfo">
+                    <view class="regionName">{{ item.Region_Name }}</view>
+                    <view class="regionRevenue">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</view>
                   </view>
-                </li>
-              </ul>
+                  <view class="regionStats">
+                    <view class="statLabel">营收占比</view>
+                    <view class="statValue">{{ item.Revenue_Proportion }}</view>
+                  </view>
+                  <view class="expandBtn" :class="{ 'active': item.show }">
+                    <text class="uni-icon uni-icon-arrowright"></text>
+                  </view>
+                </view>
+
+                <view class="serverList" v-show="item.show">
+                  <view v-for="(child, index) in item.revenueServerModels" :key="index" class="serverItem"
+                    :class="{ 'visited': child.visited }" @click="toDetail(child)">
+                    <view class="serverDot"></view>
+                    <view class="serverInfo">
+                      <view class="serverName">{{ child.Serverpart_Name }}</view>
+                      <view class="serverStats">
+                        <text class="serverProportion">{{ child.Revenue_Proportion }}</text>
+                        <text class="serverRevenue">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
+                      </view>
+                    </view>
+                    <view class="serverArrow">
+                      <text class="uni-icon uni-icon-arrowright"></text>
+                    </view>
+                  </view>
+                </view>
+              </view>
             </view>
           </view>
         </template>
@@ -202,8 +227,8 @@
     </view>
 
 
-    <uni-popup ref="popup" type="bottom" style="background: #fff">
-      <div class="popupBox" style="box-sizing:border-box;height: 550px">
+    <uni-popup ref="popup" type="bottom" background-color="#fff" :safe-area="false">
+      <div class="popupBox">
         <!--        <div style="display: flex;align-items: center;justify-content: space-between">-->
         <!--          <text class="title">查询配置</text>-->
         <!--          <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleClosePopup">-->
@@ -216,7 +241,7 @@
             <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">
           </div>
 
-          <view style="height: 380px;overflow-y: scroll">
+          <view class="scrollContent">
             <view class="popupTitle">日期选择</view>
             <view class="timeList">
               <view :class="selectTime === item.value ? 'timeItem timeSelectItem' : 'timeItem'"
@@ -347,6 +372,16 @@ export default {
     ...mapState({ 'ProvinceCode': (state) => { return state.userData.ProvinceCode } }),
   },
   methods: {
+    // 获取经营模式标签
+    getBusinessTypeLabel(value) {
+      const item = this.BusinessTypeList.find(item => item.value === value)
+      return item ? item.label : ''
+    },
+    // 获取结算模式标签  
+    getSettlementModeLabel(value) {
+      const item = this.SettlementModeList.find(item => item.value === value)
+      return item ? item.label : ''
+    },
     // 是否显示结算模式的悬浮框
     handleShowNotice() {
       this.showNotice = !this.showNotice
@@ -689,11 +724,29 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.page-body {
-  //padding-bottom: 80rpx;
+<style lang="scss" scoped>
+// 使用项目全局颜色变量
+$bg: #f8f9fa;
+$muted: #666;
+$card: #fff;
+$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+$primary: #27B25F;
+$primary2: #4CCC7F;
+$success: #2ed573;
+$warning: #ff9f43;
+$danger: #ff4757;
+$info: #3742fa;
+
+.main {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: $bg;
+  padding: 32rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
 }
 
+// 遮罩层
 .meng {
   width: 100vw;
   height: 100vh;
@@ -701,635 +754,575 @@ export default {
   top: 0;
   left: 0;
   z-index: 101;
+  background: rgba(0, 0, 0, 0.5);
 }
 
-.search_box {
-  position: relative;
-  width: 558rpx;
-  height: 72rpx;
-  background: #F2F4F5;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: 36rpx;
-
-  img {
-    width: 35rpx;
-    height: 35rpx;
-    margin: auto 16rpx auto 24rpx;
-  }
-
-  .select_input {
-    width: 420rpx;
-    border: none;
-    height: 40rpx;
-    font-size: 28rpx;
-  }
-
-  .delete {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 0%;
-    z-index: 99;
-  }
-}
-
-.select_btn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 28rpx;
-  color: #6C737A;
-
-  img {
-    width: 35rpx;
-    height: 35rpx;
-    margin-right: 12rpx;
-  }
-}
-
-.popupBox {
-  width: 100%;
-  background: #fff;
-  box-sizing: border-box;
+// 筛选卡片
+.filterCard {
+  background: $card;
+  border-radius: 16rpx;
   padding: 24rpx;
-  position: relative;
+  margin-bottom: 32rpx;
+  box-shadow: $shadow;
 
-  .popupContent {
-    margin-top: 24rpx;
+  .filterHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
 
-    .search_box {
-      position: relative;
-      width: 100%;
-      height: 72rpx;
-      background: #F2F4F5;
+    .filterTitle {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #160002;
+    }
+
+    .filterBtn {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      border-radius: 36rpx;
+      padding: 12rpx 24rpx;
+      background: transparent;
+      border: 1rpx solid $primary;
+      border-radius: 24rpx;
 
-      img {
-        width: 35rpx;
-        height: 35rpx;
-        margin: auto 16rpx auto 24rpx;
+      .filterIcon {
+        width: 24rpx;
+        height: 24rpx;
+        margin-right: 8rpx;
+        filter: brightness(0) saturate(100%) invert(45%) sepia(67%) saturate(1055%) hue-rotate(113deg) brightness(96%) contrast(86%);
       }
 
-      .select_input {
-        width: 80%;
-        border: none;
-        height: 40rpx;
-        font-size: 28rpx;
+      text {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: $primary;
+      }
+    }
+  }
+
+  .dateSelector {
+    .dateRange {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .datePicker {
+        flex: 1;
+
+        .dateInput {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 16rpx 24rpx;
+          background: #f8f8f8;
+          border-radius: 12rpx;
+
+          text:first-child {
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #160002;
+          }
+
+          .uni-icon-arrowdown {
+            font-size: 20rpx;
+            color: $muted;
+            margin-left: 8rpx;
+          }
+        }
       }
 
-      .delete {
-        width: 20px;
-        height: 20px;
-        position: absolute;
-        right: 0%;
-        z-index: 99;
+      .dateSeparator {
+        margin: 0 24rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: $muted;
+      }
+    }
+  }
+}
+
+// 实收总额卡片
+.revenueCard {
+  background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  box-shadow: $shadow;
+
+  .revenueHeader {
+    text-align: center;
+    margin-bottom: 24rpx;
+
+    .revenueTitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: 12rpx;
+    }
+
+    .revenueAmount {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #fff;
+      font-family: 'DIN Alternate', 'Arial', sans-serif;
+    }
+  }
+
+  .revenueDetails {
+    .detailGrid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24rpx;
+
+      .detailItem {
+        text-align: center;
+
+        .itemValue {
+          font-size: 28rpx;
+          font-weight: 600;
+          color: #fff;
+          margin-bottom: 8rpx;
+          font-family: 'DIN Alternate', 'Arial', sans-serif;
+        }
+
+        .itemLabel {
+          font-size: 24rpx;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 0.8);
+
+          .unit {
+            font-size: 20rpx;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 经营报表标题
+.reportHeader {
+  margin-bottom: 32rpx;
+
+  .reportTitle {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+
+    .reportIcon {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 12rpx;
+    }
+
+    text {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #160002;
+    }
+  }
+
+  .reportInfo {
+    padding-left: 44rpx;
+
+    .reportText {
+      .warningText {
+        display: block;
+        font-size: 22rpx;
+        font-weight: 400;
+        color: $danger;
+        margin-bottom: 8rpx;
+      }
+
+      .searchResult {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: $muted;
+        line-height: 1.5;
+      }
+
+      .filterMode {
+        display: block;
+        font-size: 22rpx;
+        font-weight: 400;
+        color: $muted;
+        margin-top: 4rpx;
+      }
+
+      .searchResultItem {
+        margin-bottom: 8rpx;
+
+        .searchResultText {
+          font-size: 24rpx;
+          font-weight: 400;
+          color: $muted;
+
+          .highlightText {
+            color: $danger;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 区域数据卡片
+.regionCard {
+  background: $card;
+  border-radius: 16rpx;
+  box-shadow: $shadow;
+  overflow: hidden;
+
+  .regionSection {
+    .regionTitle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32rpx;
+      background: #fafafa;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      .titleText {
+        font-size: 26rpx;
+        font-weight: 600;
+        color: #160002;
+      }
+
+      .expandIcon {
+        transition: transform 0.3s ease;
+
+        &.expanded {
+          transform: rotate(180deg);
+        }
+
+        .uni-icon-arrowdown {
+          font-size: 24rpx;
+          color: $muted;
+        }
       }
     }
 
+    .regionList {
+      .regionItem {
+        border-bottom: 1rpx solid #f8f8f8;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .regionHeader {
+          display: flex;
+          align-items: center;
+          padding: 24rpx;
+          background: $card;
+
+          .regionInfo {
+            flex: 2;
+
+            .regionName {
+              font-size: 24rpx;
+              font-weight: 600;
+              color: #160002;
+              margin-bottom: 8rpx;
+            }
+
+            .regionRevenue {
+              font-size: 28rpx;
+              font-weight: 600;
+              color: $primary;
+              font-family: 'DIN Alternate', 'Arial', sans-serif;
+            }
+          }
+
+          .regionStats {
+            flex: 1;
+            text-align: center;
+
+            .statLabel {
+              font-size: 22rpx;
+              font-weight: 400;
+              color: $muted;
+              margin-bottom: 8rpx;
+            }
+
+            .statValue {
+              font-size: 24rpx;
+              font-weight: 600;
+              color: #160002;
+            }
+          }
+
+          .expandBtn {
+            flex: 0 0 64rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: transform 0.3s ease;
+
+            &.active {
+              transform: rotate(90deg);
+            }
+
+            .uni-icon-arrowright {
+              font-size: 24rpx;
+              color: $muted;
+            }
+          }
+        }
+
+        .serverList {
+          background: #fafafa;
+
+          .serverItem {
+            display: flex;
+            align-items: center;
+            padding: 24rpx 32rpx;
+            border-bottom: 1rpx solid #f0f0f0;
+            transition: background-color 0.2s ease;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            &.visited {
+              .serverName {
+                color: $primary;
+              }
+            }
+
+            .serverDot {
+              width: 8rpx;
+              height: 8rpx;
+              border-radius: 50%;
+              background: $primary;
+              margin-right: 16rpx;
+              flex-shrink: 0;
+            }
+
+            .serverInfo {
+              flex: 1;
+
+              .serverName {
+                font-size: 24rpx;
+                font-weight: 400;
+                color: #160002;
+                margin-bottom: 8rpx;
+              }
+
+              .serverStats {
+                display: flex;
+                align-items: center;
+
+                .serverProportion {
+                  font-size: 22rpx;
+                  font-weight: 400;
+                  color: $muted;
+                  margin-right: 16rpx;
+                }
+
+                .serverRevenue {
+                  font-size: 24rpx;
+                  font-weight: 600;
+                  color: $primary;
+                  font-family: 'DIN Alternate', 'Arial', sans-serif;
+                }
+              }
+            }
+
+            .serverArrow {
+              .uni-icon-arrowright {
+                font-size: 20rpx;
+                color: $muted;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 搜索框样式（弹窗内使用）
+.search_box {
+  position: relative;
+  width: 100%;
+  height: 72rpx;
+  background: #F2F4F5;
+  display: flex;
+  align-items: center;
+  border-radius: 36rpx;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+
+  img {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 16rpx;
+    flex-shrink: 0;
+  }
+
+  .select_input {
+    flex: 1;
+    border: none;
+    height: 40rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #160002;
+    background: transparent;
+  }
+
+  .delete {
+    width: 32rpx;
+    height: 32rpx;
+    flex-shrink: 0;
+  }
+}
+
+// 已在 filterCard 中重新定义
+
+// 弹窗样式
+.popupBox {
+  width: 100%;
+  height: 70vh;
+  background: $card;
+  box-sizing: border-box;
+  padding: 32rpx;
+  position: relative;
+  border-radius: 24rpx 24rpx 0 0;
+  display: flex;
+  flex-direction: column;
+
+  .popupContent {
+    flex: 1;
+    margin-top: 24rpx;
+    overflow: hidden;
+
+    .scrollContent {
+      height: calc(100% - 72rpx);
+      overflow-y: auto;
+      padding-bottom: 24rpx;
+    }
+
     .popupTitle {
-      font-size: 32rpx;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: bold;
-      line-height: 40rpx;
-      margin-top: 24rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #160002;
+      margin: 32rpx 0 16rpx;
 
       .title {
-        font-size: 32rpx;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: bold;
-        line-height: 40rpx;
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #160002;
       }
 
       .notice {
-        margin-left: 8rpx;
-        width: 12px;
-        height: 12px;
+        margin-left: 12rpx;
+        width: 24rpx;
+        height: 24rpx;
         display: flex;
         align-items: center;
         justify-content: center;
-        border: 2px solid #A69E9F;
+        border: 2rpx solid $muted;
         border-radius: 50%;
-        color: #A69E9F;
-        font-size: 12px;
+        color: $muted;
+        font-size: 20rpx;
         font-weight: 500;
 
         .noticeBox {
-          max-width: 80%;
+          max-width: 500rpx;
           position: absolute;
-          top: 15px;
+          top: 40rpx;
+          left: 0;
           display: inline-block;
-          padding: 5px 10px;
-          background: #fff;
-          border-radius: 10rpx;
-          box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
+          padding: 16rpx 20rpx;
+          background: $card;
+          border-radius: 12rpx;
+          box-shadow: $shadow;
           z-index: 100;
-          transform: translateY(-100%);
 
           .noticeText {
             display: block;
+            font-size: 22rpx;
+            font-weight: 400;
+            color: #160002;
+            line-height: 1.5;
+            margin-bottom: 8rpx;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
           }
         }
       }
     }
 
     .timeList {
-      width: 100%;
       display: flex;
-      align-items: center;
-      flex-flow: wrap;
-      padding: 12rpx 0;
+      flex-wrap: wrap;
+      gap: 16rpx;
+      margin-bottom: 24rpx;
 
       .timeItem {
-        width: 22%;
-        margin-right: 3%;
-        box-sizing: border-box;
+        flex: 0 0 calc(25% - 12rpx);
+        padding: 16rpx 8rpx;
         text-align: center;
-        background: #ffffff;
-        border: 1rpx solid #efefef;
-        margin-bottom: 8rpx;
+        background: #f8f8f8;
+        border-radius: 12rpx;
+        font-size: 22rpx;
+        font-weight: 400;
+        color: #160002;
+        transition: all 0.2s ease;
       }
 
       .timeSelectItem {
-        background: #e8f3fd;
-        border: 1rpx solid #e8f3fd;
-        color: #4D95F0;
+        background: rgba($primary, 0.1);
+        color: $primary;
+        border: 1rpx solid $primary;
       }
     }
   }
 
-
-  .title {
-    font-size: 32rpx;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: bold;
-    line-height: 40rpx;
-  }
-
-  .delete {
-    width: 20px;
-    height: 20px;
-  }
-
-  .checkBox {
-    padding: 30rpx 0;
-  }
-
   .btn {
-    position: absolute;
-    width: calc(100% - 48px);
-    //margin-left: 24px;
-    padding: 15rpx 0;
+    width: 100%;
+    padding: 24rpx 0;
     text-align: center;
     border-radius: 16rpx;
     color: #fff;
-    background: #0A98D5;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
+    background: $primary;
+    font-size: 28rpx;
+    font-weight: 600;
+    margin-top: 24rpx;
+    flex-shrink: 0;
   }
 }
 
-::v-deep.vue-ref {
-  padding-bottom: 0px !important;
-}
-
+// 时间选择弹窗
 .timePopup {
   width: 80vw;
-  height: 130px;
-  background: #fff;
-  box-sizing: border-box;
+  background: $card;
   border-radius: 16rpx;
-  padding: 24rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  padding: 32rpx;
+  box-shadow: $shadow;
 
   .btn {
-    width: calc(100% - 48px);
-    margin-left: 24px;
-    padding: 15rpx 0;
+    width: 100%;
+    padding: 24rpx 0;
     text-align: center;
     border-radius: 16rpx;
     color: #fff;
-    background: #0A98D5;
-    margin-top: 30rpx;
+    background: $primary;
+    font-size: 28rpx;
+    font-weight: 600;
+    margin-top: 32rpx;
   }
 }
 
-.screen-box {
-  background-color: #fff;
-  padding: 0 20rpx;
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 9;
+// 覆盖uni-popup的默认样式，移除底部间隙
+::v-deep .uni-popup__wrapper-box {
+  padding-bottom: 0 !important;
 }
 
-.screen-box .searchBtn {
-  margin-top: 12rpx;
-  box-sizing: border-box;
-  padding: 2rpx 10rpx;
-  border-radius: 6rpx;
-  background: rgba(22, 155, 213, 1);
-  color: #fff;
-  display: inline-block;
-}
-
-.screen-box .searchBox {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.screen-box .searchBox .searchItem {
-  display: flex;
-  width: 50%;
-  align-items: center;
-}
-
-.searchBox .searchItem .searchLabel {
-  margin-right: 16rpx;
-  font-size: 16px;
-  font-family: DINAlternate-Bold, DINAlternate;
-  font-weight: bold;
-  line-height: 40rpx;
-}
-
-
-
-.screen-box .screen-unit {
-  display: flex;
-  align-items: center;
-  width: 200rpx;
-  padding: 0 14rpx;
-  line-height: 3;
-}
-
-.screen-box .mr20 {
-  margin-right: 20rpx;
-  color: #95999C;
-}
-
-.uni-icon-arrowdown {
-  font-size: 22rpx;
-  color: #C7C7C7;
-  margin-left: 8rpx;
-}
-
-.screen-box text {
-  line-height: 3;
-}
-
-.screen-box image {
-  width: 12rpx;
-  height: 8rpx;
-  margin: 0 16rpx;
-  vertical-align: middle;
-}
-
-.head-card {
-  padding: 12rpx 26rpx 40rpx;
-  background-color: #fff;
-}
-
-.head-card>view {
-  width: 330rpx;
-  //height: 190rpx;
-  color: #fff;
-  text-align: center;
-  padding-top: 30rpx;
-  font-size: 28rpx;
-  border-radius: 24rpx;
-  box-sizing: border-box;
-}
-
-.head-card .topDetail .detailBox {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.head-card .topDetail .label {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #fff;
-  opacity: 0.8;
-  line-height: 40rpx;
-  margin-bottom: 2px;
-}
-
-.detailBox .detailItem {
-  width: 33%;
-  margin-bottom: 16px;
-}
-
-.detailBox .detailItem .value {
-  font-size: 16px;
-  font-family: DINAlternate-Bold, DINAlternate;
-  font-weight: bold;
-  color: #fff;
-  line-height: 40rpx;
-}
-
-.detailBox .detailItem .label {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #fff;
-  opacity: 0.8;
-  line-height: 40rpx;
-  margin-bottom: 2px;
-}
-
-.detailBox .detailItem .label .unit {
-  font-size: 28rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #fff;
-  line-height: 40rpx;
-  margin-left: 2px;
-}
-
-
-.head-card>view:first-child {
-
-  background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
-}
-
-.head-card>view:last-child {
-  //margin-left: 30rpx;
-  background: linear-gradient(to left, #8cdade 0%, #82c2ce 100%);
-  position: relative;
-  //overflow: hidden;
-}
-
-.head-card .price-num {
-  font-family: 'Bahnschrift Regular';
-  font-size: 50rpx;
-  line-height: 1.5;
-}
-
-.all-diff {
-  background: linear-gradient(#f28785, #ee5b4c);
-  height: 36rpx;
-  line-height: 36rpx;
-  width: 126rpx;
-  color: #fff;
-  text-align: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 20rpx;
-  border-radius: 0 0 0 54rpx;
-
-}
-
-.all-diff image {
-  width: 20rpx;
-  height: 17rpx;
-  margin-right: 8rpx;
-}
-
-.modle-title {
-  padding-left: 24rpx;
-  font-size: 30rpx;
-  padding-top: 32rpx;
-  //padding-bottom: 20rpx;
-  font-weight: bolder;
-  display: flex;
-  align-items: center;
-}
-
-.modleText {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 24rpx 18rpx 74rpx;
-
-  .text {
-    font-size: 26rpx;
-    color: #929292;
-    white-space: pre-wrap;
-  }
-}
-
-.modle-title image {
-  max-width: 36rpx;
-  max-height: 36rpx;
-  margin-right: 14rpx;
-}
-
-.bg-white {
-  background-color: #fff;
-  margin: 0 24rpx;
-  border-radius: 12rpx;
-  padding-bottom: 26rpx;
-}
-
-.region-area-title {
-  color: #000;
-  font-weight: bolder;
-  padding: 26rpx 46rpx 0 56rpx;
-  position: relative;
-  display: flex;
-}
-
-/*日结上传*/
-.region-title {
-  position: relative;
-  color: #929292;
-  /* font-weight: bolder; */
-
-}
-
-.region-title,
-.ct01 {
-  color: #000000;
-}
-
-.ct01 {
-  padding-top: 8rpx;
-}
-
-.region-area-title:before {
-  content: '';
-  position: absolute;
-  width: 0rpx;
-  height: 0rpx;
-  border: 0rpx;
-  border-left: 8rpx solid transparent;
-  border-right: 8rpx solid transparent;
-  border-top: 8rpx solid #BBB7B7;
-  left: 22rpx;
-  top: 48rpx;
-  transform: rotate(-90deg);
-  transition: all 0.4s;
-  display: block;
-}
-
-.active.region-area-title:before {
-
-  border-left: 8rpx solid transparent;
-  border-right: 8rpx solid transparent;
-  border-top: 8rpx solid #E0BB97;
-  transform: rotate(0deg);
-}
-
-.region-cell {
-  display: flex;
-  padding: 26rpx 46rpx 16rpx 56rpx;
-  align-items: flex-end;
-}
-
-.region-cell .active.uni-icon-arrowright::before {
-  transform: rotate(90deg);
-
-
-}
-
-.region-cell .uni-icon-arrowdown,
-.region-cell .uni-icon-arrowright {
-  font-size: 36rpx;
-  color: #5A5A5A;
-  /* padding-bottom: 12rpx; */
-  position: relative;
-}
-
-.region-cell .uni-icon-arrowright::before {
-  position: absolute;
-  right: -26rpx;
-  top: -46rpx;
-  transition: all 0.4s;
-}
-
-.region-cell .region-cell-unit {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  color: #929292;
-  font-size: 26rpx;
-  line-height: 1.5;
-  text-align: right;
-}
-
-.region-cell .region-cell-unit:nth-child(1) {
-  flex: 3;
-  text-align: left;
-}
-
-.region-cell .region-cell-unit:nth-child(3) {
-
-  flex: 2.5;
-
-}
-
-.region-cell-image {
-  width: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  height: 50rpx;
-
-}
-
-.region-cell image {
-  width: 14rpx;
-  height: 23rpx;
-}
-
-/*日结上传服务区*/
-.region-cell-area {
-  box-sizing: border-box;
-}
-
-.region-cell-area li:nth-child(2n+1) {
-  background-color: #FCFCFC;
-}
-
-.region-cell-area li view:first-child {
-  display: flex;
-  align-items: center;
-}
-
-.region-cell-area li.visited view:first-child {
-  color: #007AFF;
-
-}
-
-.region-cell-area li:nth-child(2n+1) {
-  background-color: #F9F9FB;
-}
-
-.region-cell-area li:nth-child(2n) view:first-child:before {
-  content: '';
-  background-color: #5596F9;
-  width: 8rpx;
-  height: 8rpx;
-  border-radius: 8rpx;
-  display: block;
-  margin-right: 16rpx;
-  /* position: absolute;
-		left: 0rpx; */
-
-}
-
-.region-cell-area li:nth-child(2n+1) view:first-child:before {
-  content: '';
-  background-color: #FE6D67;
-  width: 8rpx;
-  height: 8rpx;
-  border-radius: 8rpx;
-  display: block;
-  margin-right: 16rpx;
-  /* 	position: absolute;
-		left: 0rpx; */
-}
-
-.region-cell-area li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16rpx 46rpx 16rpx 56rpx;
-  position: relative;
-  text-align: left;
-  color: #2E2E2E;
-}
-
-.region-cell-area li>view {
-  flex: 2;
-  font-size: 22rpx;
-  position: relative;
-}
-
-.region-cell-area li>view text {
-  font-size: 22rpx;
-  flex: 1;
-  text-align: right;
-}
-
-.region-cell-area li>view text:last-child {
-  /* text-align: right; */
-  font-weight: bolder;
-  padding-right: 8rpx;
-  flex: 2;
-}
-
-.region-cell-area li>view:last-child:after {
-  content: '';
-  background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/you-jt.png')no-repeat center;
-  width: 14rpx;
-  height: 24rpx;
-  background-size: contain;
-  display: block;
-  position: absolute;
-  right: -28rpx;
-  top: 8rpx;
+::v-deep .uni-popup--bottom {
+  padding-bottom: 0 !important;
 }
 </style>
diff --git a/pages/summaryOfPortraits/components/mapDetail.vue b/pages/summaryOfPortraits/components/mapDetail.vue
index cd2948d..470d0c7 100644
--- a/pages/summaryOfPortraits/components/mapDetail.vue
+++ b/pages/summaryOfPortraits/components/mapDetail.vue
@@ -1,251 +1,273 @@
 <template>
-  <div class="main">
-    <!--    <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
-    <!--      <commercial-type :have="7"/>-->
-    <!--    </div>-->
-    <div class="leftArrow" v-if="false" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }">
-      <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
-        @click="handleBack"></image>
+  <view class="service-detail-page" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
 
-      <!--          <div class="pickers"  @click="handleChangeService">-->
-      <!--            <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
-      <!--              <div class="pick" :value="selectIndex" :range="array" range-key="name">-->
-      <!--                  <view class="picker">-->
-      <!--                      <p class="pickTitle">{{info.SERVERPART_NAME?info.SERVERPART_NAME:''}}</p>-->
-      <!--                      {{info.SPREGIONTYPE_NAME?info.SPREGIONTYPE_NAME:''}}-->
-      <!--                  </view>-->
-      <!--                  <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
-      <!--              </div>-->
-      <!--          </div>-->
-      <div class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
-        <div class="selectService">
-          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
-          <view class="select">
-            <view class="content">
-              <view class="uni-input">{{ info.SERVERPART_NAME ? info.SERVERPART_NAME : '' }}</view>
-              <p class="area">{{ info.SPREGIONTYPE_NAME ? info.SPREGIONTYPE_NAME : '' }}</p>
-              <text class="noticeText" v-if="info.SERVERPART_NAME === '安徽驿达'">选择您要看的服务区</text>
-              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
+    <!-- 服务区的信息 -->
+    <view class="serviceDetail" style="margin-top: 16rpx;">
+      <view class="detailTop">
+        <view class="serviceImg" v-if="topBg && topBg.length > 0">
+          <swiper scroll-x="true" circular="true" class="banner" indicator-dots="true" indicator-active-color="#272625"
+            autoplay interval="3000" style="width: 100%; height: 100%">
+            <swiper-item v-for="(img, i) in topBg" :key="i" style="width: 100%; height: 100%">
+              <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img"
+                @click="handlePreview"></image>
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+
+      <!-- 服务区基本信息 -->
+      <view class="detailBottom">
+        <view class="detailFirst">
+          <text class="serviceName">{{
+            info.SERVERPART_NAME || ""
+            }}</text>
+          <text class="serviceStatus">营业中</text>
+        </view>
+        <view class="detailSecond">
+          <image class="detailFixedIcon" src="/static/images/home/address.png" />
+          <text class="address">
+            <text class="distance">{{
+              info.SERVERPART_DISTANCE === 0
+                ? 0
+                : info.SERVERPART_DISTANCE || "-"
+            }}km</text>
+            <text class="addressText">{{ info.ServerpartInfo.SERVERPART_ADDRESS || "-"
+              }}{{ info.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</text>
+          </text>
+        </view>
+        <view class="navigationBox" @click="handleGoMap">
+          <image class="navigationIcon" src="/static/images/home/navigationIcon.svg" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 主要内容区域 -->
+    <scroll-view scroll-y="true" class="content-scroll" :style="{ height: `calc(100vh - ${(menu.bottom + 14)}px - 560rpx ) ` }">
+      <view class="content-container">
+
+        <!-- 基本信息卡片 -->
+        <view class="info-card">
+          <view class="card-header">
+            <text class="card-title">📋 基本信息</text>
+          </view>
+
+          <view class="info-grid">
+            <view class="info-item">
+              <text class="info-label">取水方式</text>
+              <text class="info-value">{{ getWaterIntakeType(info.ServerpartInfo &&
+                info.ServerpartInfo.WATERINTAKE_TYPE) }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">污水处理</text>
+              <text class="info-value">{{ getSewageType(info.ServerpartInfo && info.ServerpartInfo.SEWAGEDISPOSAL_TYPE)
+                }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">所在地区</text>
+              <text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.SERVERPART_ADDRESS) || '-'
+                }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">管理单位</text>
+              <text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.MANAGERCOMPANY) || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="info-label">产权单位</text>
+              <text class="info-value">{{ (info.ServerpartInfo && info.ServerpartInfo.OWNEDCOMPANY) || '-' }}</text>
             </view>
           </view>
-        </div>
-      </div>
-    </div>
+        </view>
 
-    <!-- <div class="topImg" :style="{height: (menu.bottom + 62) + 'px'}"> -->
-    <div class="topImg" :style="{ height: (menu.bottom + 14) + 'px' }">
-      <!--          <swiper v-if="topBg && topBg.length>0" :current="currentImg" class="carousel" @change="changeSwiper">-->
-      <!--              <swiper-item class="imgIndex" v-for="(item,index) in topBg" :key="index" :style="{backgroundImage:`url(${item})`}">-->
-      <!--&lt;!&ndash;                  <image class="img" :src="item"></image>&ndash;&gt;-->
-      <!--                <view class="sliderPage" :style="{top: (menu.bottom + 18) + 'px'}">-->
-      <!--                  <SliderPage :index="0"/>-->
-      <!--                </view>-->
-      <!--              </swiper-item>-->
-      <!--          </swiper>-->
-      <!--          <div v-if="topBg && topBg.length>0" class="picNumber" @click="handlePreview">-->
-      <!--              <image class="icon" src="/static/images/noImg.svg"></image>-->
-      <!--            <text class="text"> {{ currentImg<1?1:currentImg>topBgRealLength?topBgRealLength:currentImg }} / {{ topBgRealLength }}</text>-->
-      <!--              <image class="more" src="/static/images/more.svg"></image>-->
-      <!--          </div>-->
-      <!--          <image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>-->
-    </div>
-    <div class="menu">
-      <div class="top">
-        <div class="left">
-          <div class="leftImgBox">
-            <image class="img" :src="topBg[0]" @click="handlePreview" />
-          </div>
-          <div class="serviceInfo">
-            <view class="serviceInfoTop">
-              <p class="title">{{ info.SERVERPART_NAME ? info.SERVERPART_NAME : '-' }}</p>
-              <div class="iconBox" @click="handleGoMap">
-                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
-              </div>
+        <!-- 面积信息卡片 -->
+        <view class="area-card">
+          <view class="card-header">
+            <text class="card-title">📏 面积信息</text>
+          </view>
+
+          <view class="area-stats">
+            <view class="stat-item">
+              <text class="stat-number">{{ formatArea(info.ServerpartInfo && info.ServerpartInfo.FLOORAREA) }}</text>
+              <text class="stat-label">占地面积</text>
+              <text class="stat-unit">m²</text>
             </view>
-            <p class="address">{{ info.ServerpartInfo.EXPRESSWAY_NAME ? info.ServerpartInfo.EXPRESSWAY_NAME : '-' }}</p>
-            <view class="status">营业中</view>
-          </div>
-        </div>
-      </div>
-      <scroll-view scroll-y="true" class="scroll" :style="{ height: `calc(100vh - ${menu.bottom + 176}px)` }">
-        <div class="info">
-          <div class="typeList">
-            <div class="typeItem" v-for="(item, index) in typeList" :key="index" v-if="item.isShow">
-              <image class="img" :src="item.url"></image>
-              <text class="text">{{ item.name }}</text>
-            </div>
-          </div>
-          <div class="baseInfo">
-            <p class="title">基本信息</p>
-            <div class="word">
-              <p class="subTitle">取水方式</p>
-              <text class="value">{{ info.ServerpartInfo.WATERINTAKE_TYPE === 1 ? '自来水' :
-                info.ServerpartInfo.WATERINTAKE_TYPE === 2 ? '井水' : ''
-              }}</text>
-            </div>
-            <div class="word">
-              <p class="subTitle">污水处理</p>
-              <text class="text">{{ info.ServerpartInfo.SEWAGEDISPOSAL_TYPE === 1 ? '市政' :
-                info.ServerpartInfo.SEWAGEDISPOSAL_TYPE === 2 ? '污水处理设备' : '' }}</text>
-            </div>
-            <div class="word">
-              <p class="subTitle">市区县镇</p>
-              <text class="text">{{ info.ServerpartInfo.SERVERPART_ADDRESS ? info.ServerpartInfo.SERVERPART_ADDRESS : ''
+            <view class="stat-divider"></view>
+            <view class="stat-item">
+              <text class="stat-number">{{ formatArea(info.ServerpartInfo && info.ServerpartInfo.SHAREAREA) }}</text>
+              <text class="stat-label">停车场面积</text>
+              <text class="stat-unit">m²</text>
+            </view>
+            <view class="stat-divider"></view>
+            <view class="stat-item">
+              <text class="stat-number">{{ formatArea(info.ServerpartInfo && info.ServerpartInfo.SERVERPART_AREA)
                 }}</text>
-            </div>
-            <div class="word">
-              <p class="subTitle">管理单位</p>
-              <text class="text">{{ info.ServerpartInfo.MANAGERCOMPANY ? info.ServerpartInfo.MANAGERCOMPANY : ''
-              }}</text>
-            </div>
-            <div class="word">
-              <p class="subTitle">产权单位</p>
-              <text class="text">{{ info.ServerpartInfo.OWNEDCOMPANY ? info.ServerpartInfo.OWNEDCOMPANY : '' }}</text>
-            </div>
+              <text class="stat-label">建筑面积</text>
+              <text class="stat-unit">m²</text>
+            </view>
+          </view>
+        </view>
 
-            <!--                      <div class="unqualifiedNeeds">-->
-            <!--                          <text class="subTitle">介绍说明</text>-->
-            <!--                          <text class="unqualNeedText" style="text-indent:28px">{{info.ServerpartInfo.SERVERPART_INFO?info.ServerpartInfo.SERVERPART_INFO:'' }}</text>-->
-            <!--                      </div>-->
-          </div>
-          <div class="areaInfo" style="margin-top: 16px">
-            <p class="title">面积信息</p>
-            <div class="word">
-              <p class="subTitleArea">占地面积</p>
-              <text class="value" v-if="info.ServerpartInfo.FLOORAREA">{{ info.ServerpartInfo.FLOORAREA }}<text
-                  style="margin-left: 4px">m²</text></text>
-              <text class="value" v-else></text>
-            </div>
-            <div class="word">
-              <p class="subTitleArea">停车场面积</p>
-              <text class="value" v-if="info.ServerpartInfo.SHAREAREA">{{ info.ServerpartInfo.SHAREAREA }}<text
-                  style="margin-left: 4px">m²</text></text>
-              <text class="value" v-else></text>
-            </div>
-            <div class="word">
-              <p class="subTitleArea">建筑面积</p>
-              <text class="value" v-if="info.ServerpartInfo.SERVERPART_AREA">{{ info.ServerpartInfo.SERVERPART_AREA
-                }}<text style="margin-left: 4px">m²</text></text>
-              <text class="value" v-else></text>
-            </div>
-          </div>
-        </div>
-        <div class="service">
-          <div class="serviceItem" v-for="(item, index) in info.RegionInfo" :key="index"
-            :style="{ marginTop: index !== 0 ? '32px' : '' }">
-            <p class="title">{{ item.SERVERPART_REGIONNAME ? item.SERVERPART_REGIONNAME : '-' }}</p>
-            <div class="box">
-              <div class="left">
-                <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg"></image>
-                <text class="textTitle">服务信息</text>
-              </div>
-              <div class="right">
-                <div class="item">
-                  <p :class="item.HASPANTRY ? 'text' : 'unText'" style="display: flex;align-items: center">
-                    <image style="width: 16px;height: 16px;margin-right: 4px"
-                      src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg" />男厕<text
-                      style="margin-left: 4px">{{ item.HASPANTRY ? '(' + item.HASPANTRY + ')' : '' }}</text>
-                  </p>
-                  <p :class="item.HASTHIRDTOILETS ? 'text' : 'unText'">第三卫生间</p>
-                  <p :class="item.HASCHILD ? 'text' : 'unText'">车辆维修</p>
-                  <p :class="item.HASWATERROOM ? 'text' : 'unText'">开水器<text style="margin-left: 4px">{{
-                    item.HASWATERROOM ? '(' + item.HASWATERROOM + ')' : '' }}</text></p>
-                </div>
-                <div class="item">
-                  <p :class="item.HASWIFI ? 'text' : 'unText'" style="display: flex;align-items: center">
-                    <image style="width: 16px;height: 16px;margin-right: 4px"
-                      src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg" />女厕<text
-                      style="margin-left: 4px">{{ item.HASWIFI ? '(' + item.HASWIFI + ')' : '' }}</text>
-                  </p>
-                  <p :class="item.TOILETCOUNT ? 'text' : 'unText'">潮汐厕位<text style="margin-left: 4px">{{
-                    item.TOILETCOUNT ? '('
-                      + item.TOILETCOUNT + ')' : '' }}</text></p>
-                  <p :class="item.HASSHOWERROOM ? 'text' : 'unText'">车辆加水</p>
-                </div>
-              </div>
-            </div>
+        <!-- 服务详情卡片 -->
+        <view class="service-card" v-for="(region, regionIndex) in info.RegionInfo" :key="regionIndex">
+          <view class="service-header">
+            <text class="service-title">🏢 {{ region.SERVERPART_REGIONNAME || '服务区域' }}</text>
+          </view>
 
-            <div class="box">
-              <div class="left">
-                <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg"> </image>
-                <text class="textTitle">车位信息</text>
-              </div>
-              <div class="right">
-                <div class="item">
-                  <p :class="item.SMALLPARKING ? 'text' : 'unText'">轿车车位<text style="margin-left: 4px">{{
-                    item.SMALLPARKING ? '(' + item.SMALLPARKING + ')' : '' }}</text></p>
-                  <p :class="item.TRUCKPACKING ? 'text' : 'unText'">货车车位<text style="margin-left: 4px">{{
-                    item.TRUCKPACKING ? '(' + item.TRUCKPACKING + ')' : '' }}</text></p>
+          <!-- 服务信息 -->
+          <view class="service-section">
+            <view class="section-header">
+              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg" /> -->
+              <text class="section-title">🚻 服务设施</text>
+            </view>
 
-                </div>
-                <div class="item">
-                  <p :class="item.PACKING ? 'text' : 'unText'">客车车位<text style="margin-left: 4px">{{ item.PACKING ? '('
-                    +
-                    item.PACKING + ')' : '' }}</text></p>
-                  <p :class="item.DANPACKING ? 'text' : 'unText'">危化品车位<text style="margin-left: 4px">{{ item.DANPACKING
-                    ? '('
-                    + item.DANPACKING + ')' : '' }}</text></p>
-                </div>
-              </div>
-            </div>
+            <view class="service-grid">
+              <view class="service-row">
+                <view class="service-item" :class="{ 'available': region.HASPANTRY, 'unavailable': !region.HASPANTRY }">
+                  <image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg" />
+                  <text class="service-name">男厕</text>
+                  <text class="service-count" v-if="region.HASPANTRY">({{ region.HASPANTRY }})</text>
+                </view>
+                <view class="service-item" :class="{ 'available': region.HASWIFI, 'unavailable': !region.HASWIFI }">
+                  <image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg" />
+                  <text class="service-name">女厕</text>
+                  <text class="service-count" v-if="region.HASWIFI">({{ region.HASWIFI }})</text>
+                </view>
+              </view>
+              <view class="service-row">
+                <view class="service-item"
+                  :class="{ 'available': region.HASTHIRDTOILETS, 'unavailable': !region.HASTHIRDTOILETS }">
+                  <text class="service-name">第三卫生间</text>
+                </view>
+                <view class="service-item"
+                  :class="{ 'available': region.TOILETCOUNT, 'unavailable': !region.TOILETCOUNT }">
+                  <text class="service-name">潮汐厕位</text>
+                  <text class="service-count" v-if="region.TOILETCOUNT">({{ region.TOILETCOUNT }})</text>
+                </view>
+              </view>
+              <view class="service-row">
+                <view class="service-item"
+                  :class="{ 'available': region.HASWATERROOM, 'unavailable': !region.HASWATERROOM }">
+                  <text class="service-name">开水器</text>
+                  <text class="service-count" v-if="region.HASWATERROOM">({{ region.HASWATERROOM }})</text>
+                </view>
+                <view class="service-item" :class="{ 'available': region.HASCHILD, 'unavailable': !region.HASCHILD }">
+                  <text class="service-name">车辆维修</text>
+                </view>
+              </view>
+              <view class="service-row">
+                <view class="service-item"
+                  :class="{ 'available': region.HASSHOWERROOM, 'unavailable': !region.HASSHOWERROOM }">
+                  <text class="service-name">车辆加水</text>
+                </view>
+                <view class="service-item empty-item">
+                  <!-- 空白项保持对齐 -->
+                </view>
+              </view>
+            </view>
+          </view>
 
-            <div class="box">
-              <div class="left">
-                <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg"></image>
-                <text class="textTitle">经营信息</text>
-              </div>
-              <div class="right">
-                <div class="item">
-                  <p :class="item.DININGROOMCOUNT ? 'text' : 'unText'" class="text">餐饮</p>
-                  <p :class="item.HASMESSAGESEARCH ? 'text' : 'unText'" class="text">住宿</p>
-                  <p class="model">{{ item.BUSINESSTYPE }}</p>
-                </div>
-                <div class="item">
-                  <p :class="item.HASBACKGROUNDRADIO ? 'text' : 'unText'">便利店</p>
-                  <p :class="item.DININGBXCOUNT ? 'text' : 'unText'">商铺<text style="margin-left: 4px">{{
-                    item.DININGBXCOUNT ? '(' + item.DININGBXCOUNT + ')' : '' }}</text></p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </scroll-view>
+          <!-- 车位信息 -->
+          <view class="service-section">
+            <view class="section-header">
+              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg" /> -->
+              <text class="section-title">🚗 停车位</text>
+            </view>
 
-    </div>
+            <view class="parking-grid">
+              <view class="parking-row">
+                <view class="parking-item">
+                  <text class="parking-label">轿车车位</text>
+                  <text class="parking-count">{{ region.SMALLPARKING || 0 }}</text>
+                </view>
+                <view class="parking-item">
+                  <text class="parking-label">客车车位</text>
+                  <text class="parking-count">{{ region.PACKING || 0 }}</text>
+                </view>
+              </view>
+              <view class="parking-row">
+                <view class="parking-item">
+                  <text class="parking-label">货车车位</text>
+                  <text class="parking-count">{{ region.TRUCKPACKING || 0 }}</text>
+                </view>
+                <view class="parking-item">
+                  <text class="parking-label">危化品车位</text>
+                  <text class="parking-count">{{ region.DANPACKING || 0 }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
 
-  </div>
+          <!-- 经营信息 -->
+          <view class="service-section">
+            <view class="section-header">
+              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg" /> -->
+              <text class="section-title">🏪 经营服务</text>
+            </view>
+
+            <view class="business-grid">
+              <view class="business-row">
+                <view class="business-item"
+                  :class="{ 'available': region.DININGROOMCOUNT, 'unavailable': !region.DININGROOMCOUNT }">
+                  <text class="business-name">餐饮服务</text>
+                </view>
+                <view class="business-item"
+                  :class="{ 'available': region.HASMESSAGESEARCH, 'unavailable': !region.HASMESSAGESEARCH }">
+                  <text class="business-name">住宿服务</text>
+                </view>
+              </view>
+              <view class="business-row">
+                <view class="business-item"
+                  :class="{ 'available': region.HASBACKGROUNDRADIO, 'unavailable': !region.HASBACKGROUNDRADIO }">
+                  <text class="business-name">便利店</text>
+                </view>
+                <view class="business-item"
+                  :class="{ 'available': region.DININGBXCOUNT, 'unavailable': !region.DININGBXCOUNT }">
+                  <text class="business-name">商铺</text>
+                  <text class="business-count" v-if="region.DININGBXCOUNT">({{ region.DININGBXCOUNT }})</text>
+                </view>
+              </view>
+            </view>
+
+            <view class="business-type" v-if="region.BUSINESSTYPE">
+              <text class="business-type-label">经营模式：</text>
+              <view class="business-type-tag">
+                <text class="business-type-text">{{ region.BUSINESSTYPE }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+
+      </view>
+    </scroll-view>
+  </view>
 </template>
 
 <script>
 import request from '@/util/index.js'
-import commercialType from "./components/commercialType.vue";
-import SliderPage from "./components/sliderPage.vue";
+
 export default {
   name: "mapDetail",
-  components: { SliderPage, commercialType },
   data() {
     return {
       info: {},
-      isShowPicker: false,//判断是否有选择器
-      menu: {},//手机参数
-      array: [],//服务区选择器选择的列表
-      typeList: [{ url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg', name: 'A类', isShow: false },
-      { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg', name: '2015-06-10', isShow: false },
-      { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg', name: '母婴室', isShow: false },
-      { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg', name: '司机之家', isShow: false },
-      { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg', name: '充电桩', isShow: false },
-      { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg', name: '客房', isShow: false }],
-      typeShowList: [],
-      defaultBg: ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
+      menu: {},
+      typeList: [
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg', name: 'A类', isShow: false },
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg', name: '2015-06-10', isShow: false },
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg', name: '母婴室', isShow: false },
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg', name: '司机之家', isShow: false },
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg', name: '充电桩', isShow: false },
+        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg', name: '客房', isShow: false }
+      ],
       topBg: [],
-      selectTopBg: 0,
-      screenWidth: 0,
-      currentImg: 0,//当前选中的图片
-      come: '',// 来自首页还是用户页,
-      topBgRealLength: 0,// 去除添加的上一个 后一个 的真实图片长度
       seatInfo: {}
     }
   },
+
+  onLoad() {
+    this.menu = uni.getMenuButtonBoundingClientRect()
+    this.handleGetPageData()
+  },
   props: {
     selectIndex: {
       type: Number,
@@ -255,7 +277,6 @@ export default {
   watch: {
     selectIndex: {
       handler(value) {
-        console.log('mapValue', value)
         if (value === 0) {
           this.handleGetPageData()
         }
@@ -263,81 +284,43 @@ export default {
       immediate: true,
     }
   },
-  created(option) {
-    //   // this.come = option.come
-    //   // 获取手机参数
-    //   let systemInfo = uni.getSystemInfoSync()
-    //   this.statusBarHeight = Number(systemInfo.statusBarHeight)
-    //   this.menu = uni.getMenuButtonBoundingClientRect()
-    //   this.screenWidth = systemInfo.screenWidth
-    //   // if (option.isPicker==='false'){
-    //   //     this.isShowPicker = false
-    //   // }else if (option.isPicker==='true'){
-    //   //     this.isShowPicker = true
-    //   // }
-    // console.log('created',this.query)
-  },
-  mounted() {
-    // console.log('mounted')
-    // let seat = uni.getStorageSync('currentService')
-    // console.log('seat',seat)
-    // this.handleSearch(seat)
-    // this.topBg = []
-    // this.currentImg = 1
-  },
-  // onShow(){
-  //   console.log('onShow')
-  //     let seat = uni.getStorageSync('currentService')
-  //     this.handleSearch(seat)
-  //   this.topBg = []
-  //   this.currentImg = 1
-  // },
-  // onUnload() {
-  //
-  //     this.$util.addUserBehavior()
-  // },
   methods: {
+    // 跳转导航
+    handleGoMap() {
+      uni.openLocation({
+        latitude: this.info.SERVERPART_Y * 1,
+        longitude: this.info.SERVERPART_X * 1,
+        scale: 16,
+        name: this.info.SERVERPART_NAME,
+        success(data) {
+          console.log(data);
+        },
+        fail(err) {
+          console.log(err);
+        },
+      });
+    },
+    // 改变服务区
+    handleChangeService() {
+      this.$util.toNextRoute("navigateTo", "/pages/map/index?type=attendanceStatus");
+    },
+    // 返回上一页
+    handleBack() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+
+    // 获取页面数据
     handleGetPageData() {
       let systemInfo = uni.getSystemInfoSync()
-      this.statusBarHeight = Number(systemInfo.statusBarHeight)
       this.menu = uni.getMenuButtonBoundingClientRect()
-      this.screenWidth = systemInfo.screenWidth
       let seat = uni.getStorageSync('currentService')
-      console.log('seat', seat)
       this.handleSearch(seat)
       this.topBg = []
-      this.currentImg = 1
-    },
-    // 滚动轮播图
-    changeSwiper(e) {
-      console.log('e', e)
-      this.currentImg = e.detail.current
-      console.log('thisbg', this.topBg[Number(e.detail.current)])
-      let value = this.topBg[Number(e.detail.current)].key
-      if (value === 'previous') {
-        uni.redirectTo({
-          url: `/pages/examine/detail?type=${2}`
-        })
-      } else if (value === 'next') {
-        uni.redirectTo({
-          url: `/pages/commercialBINew/carPortrait`
-        })
-      }
-    },
-    // 点击预览图片
-    handlePreview(type) {
-      if (type === 'default') {
-        uni.previewImage({
-          current: this.defaultBg[this.currentImg], // 图片的地址url
-          urls: this.defaultBg // 预览的地址url
-        })
-      } else {
-        uni.previewImage({
-          current: this.topBg[this.currentImg], // 图片的地址url
-          urls: this.topBg // 预览的地址url
-        })
-      }
     },
+
+    // 搜索服务区信息
     async handleSearch(seat) {
       let currentService = uni.getStorageSync("currentService");
       let seatInfo = uni.getStorageSync("seatInfo");
@@ -348,617 +331,706 @@ export default {
         ServerpartId: currentService.Serverpart_ID || currentService.SERVERPART_ID,
         latitude: this.seatInfo.latitude,
       }
-      const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', reqs)
-      console.log('totalData', totalData)
-      this.info = totalData.Result_Data
-      this.typeList[4].isShow = this.info.HASCHARGE
-      this.typeList[5].isShow = this.info.HASGUESTROOM
-      this.typeList[2].isShow = this.info.HASMOTHER
-      this.typeList[3].isShow = this.info.HASPILOTLOUNGE
-      if (this.info.SERVERPART_TYPE) {
-        this.typeList[0].name = this.info.SERVERPART_TYPE === 1000 ? 'A类' : this.info.SERVERPART_TYPE === 1010 ? 'A类（示范）' :
-          this.info.SERVERPART_TYPE === 2000 ? 'B类' : this.info.SERVERPART_TYPE === 3000 ? 'C类' : this.info.SERVERPART_TYPE === 4000 ? 'D类' : ''
-        this.typeList[0].isShow = this.info.HASCHARGE
-      }
-      this.typeList[1].isShow = this.info.STARTDATE
-      if (this.info && this.info.ImageLits && this.info.ImageLits.length > 0) {
-        this.topBg = this.info.ImageLits
-        // this.topBg.unshift({key:'previous'})
-        // this.topBg.push({key:'next'})
-        // this.currentImg = 1
-        // this.topBgRealLength = this.topBg.length-2
-        console.log('this.topBg', this.topBg)
-        this.$forceUpdate()
-      } else {
-        this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
-        // this.topBg.unshift({key:'previous'})
-        // this.topBg.push({key:'next'})
-        // this.currentImg = 1
-        // this.topBgRealLength = this.topBg.length - 2
-        console.log('this.topBg', this.topBg)
-      }
-      // if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
-      //   console.log('111')
-      //   this.topBg = this.info.ImageLits
-      //   this.topBg.unshift({key:'previous'})
-      //   this.topBg.push({key:'next'})
-      //   this.currentImg = 1
-      //   this.topBgRealLength = this.topBg.length-2
-      //   console.log('this.topBg',this.topBg)
-      //   this.$forceUpdate()
-      // }else{
-      //   this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
-      //   this.topBg.unshift({key:'previous'})
-      //   this.topBg.push({key:'next'})
-      //   this.currentImg = 1
-      //   this.topBgRealLength = this.topBg.length - 2
-      // }
 
-    },
-    //选择服务区
-    handleChangeService() {
-      let currentService = uni.getStorageSync('currentService')
-      let lastDay = uni.getStorageSync('lastDay')
-      let pageList = getCurrentPages()
-      console.log('pageList', pageList)
-      if (pageList.length > 2) {
-        if (this.isShowPicker) {
-          uni.navigateBack({
-            delta: 1
-          })
-        } else {
-          uni.navigateTo({
-            url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
-          })
+      try {
+        const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', reqs)
+        this.info = totalData.Result_Data
+
+        // 设置设施显示状态
+        this.typeList[4].isShow = this.info.HASCHARGE
+        this.typeList[5].isShow = this.info.HASGUESTROOM
+        this.typeList[2].isShow = this.info.HASMOTHER
+        this.typeList[3].isShow = this.info.HASPILOTLOUNGE
+
+        if (this.info.SERVERPART_TYPE) {
+          this.typeList[0].name = this.getServiceType(this.info.SERVERPART_TYPE)
+          this.typeList[0].isShow = true
         }
-      } else {
-        uni.navigateTo({
-          url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
-        })
-      }
-    },
-    async getList(option) {
-      let req = {
-        longitude: option.longitude,
-        ServerpartId: option.SERVERPART_ID,
-        latitude: option.latitude
-      }
-      const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
-      console.log('data', data)
-      this.info = data.Result_Data
-      this.typeList[4].isShow = this.info.HASCHARGE
-      this.typeList[5].isShow = this.info.HASGUESTROOM
-      this.typeList[2].isShow = this.info.HASMOTHER
-      this.typeList[3].isShow = this.info.HASPILOTLOUNGE
-      if (this.info.SERVERPART_TYPE) {
-        this.typeList[0].name = this.info.SERVERPART_TYPE === 1000 ? 'A类' : this.info.SERVERPART_TYPE === 1010 ? 'A类（示范）' :
-          this.info.SERVERPART_TYPE === 2000 ? 'B类' : this.info.SERVERPART_TYPE === 3000 ? 'C类' : this.info.SERVERPART_TYPE === 4000 ? 'D类' : ''
-        this.typeList[0].isShow = this.info.HASCHARGE
-      }
-      this.typeList[1].isShow = this.info.STARTDATE
 
-    },
-    //返回上一级页面
-    handleBack() {
-      if (this.come === 'index') {
-        uni.switchTab({
-          url: '/pages/index/index'
-        })
-      } else if (this.come === 'user') {
-        uni.switchTab({
-          url: '/pages/userCenter/userCenter'
-        })
-      } else {
-        uni.navigateBack({
-          delta: 1
-        });
-      }
+        this.typeList[1].isShow = this.info.STARTDATE
 
+        // 设置图片
+        if (this.info && this.info.ImageLits && this.info.ImageLits.length > 0) {
+          this.topBg = this.info.ImageLits
+        } else {
+          this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
+        }
+      } catch (error) {
+        console.error('获取服务区信息失败:', error)
+      }
     },
-    //点击跳转导航页
-    handleGoMap() {
-      uni.openLocation({
-        latitude: this.info.SERVERPART_Y * 1,
-        longitude: this.info.SERVERPART_X * 1,
-        scale: 16, // 缩放比例
-        name: this.info.SERVERPART_NAME,
-        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
-        success(data) {
-          console.log(data);
-        },
-        fail(err) {
-          console.log(err);
-        },
-      });
-      // let key='STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
-      // let referer ='goMap'
-      // //拿到用户当前的位置
-      // let user = uni.getStorageSync('seatInfo')
-      // let startPoint = {
-      //     name:'我的位置',
-      //     latitude:user.latitude,
-      //     longitude:user.longitude
-      // }
-      // //拿到当前已经选中的服务区的位置 也就是终点
-      // let seat = uni.getStorageSync('currentService')
-      // let endPoint = {
-      //     name:seat.SERVERPART_NAME,
-      //     latitude:seat.latitude,
-      //     longitude:seat.longitude
-      // }
-      // wx.navigateTo({
-      //     url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
-      // });
-    }
+
+    // 获取服务区类型
+    getServiceType(type) {
+      const typeMap = {
+        1000: 'A类',
+        1010: 'A类（示范）',
+        2000: 'B类',
+        3000: 'C类',
+        4000: 'D类'
+      }
+      return typeMap[type] || ''
+    },
+
+    // 获取取水方式
+    getWaterIntakeType(type) {
+      const typeMap = {
+        1: '自来水',
+        2: '井水'
+      }
+      return typeMap[type] || '-'
+    },
+
+    // 获取污水处理方式
+    getSewageType(type) {
+      const typeMap = {
+        1: '市政',
+        2: '污水处理设备'
+      }
+      return typeMap[type] || '-'
+    },
+
+    // 格式化面积
+    formatArea(area) {
+      if (!area) return '-'
+      return parseFloat(area).toLocaleString()
+    },
+
+    // 预览图片
+    handlePreview() {
+      uni.previewImage({
+        current: this.topBg[0],
+        urls: this.topBg
+      })
+    },
+
   }
 }
 </script>
 
-<style scoped lang="scss">
-.main {
-  max-width: 100vw;
-  width: 100%;
-  max-width: 100vw;
-  height: 100vh;
-  box-sizing: border-box;
-  position: relative;
+<style lang="less" scoped>
+@bg: #f8f9fa;
+@muted: #666;
+@card: #fff;
+@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+@primary: #27B25F;
+@primary2: #4CCC7F;
+@ok: #2ed573;
+@warn: #ff9f43;
+@danger: #ff4757;
 
-  .leftArrow {
-    height: 24px;
-    position: absolute;
-    left: 16px;
+.service-detail-page {
+  width: 100vw;
+  background-color: #F5F5F5;
+  box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .summaryTab {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
+    z-index: 99;
     display: flex;
     align-items: center;
-    z-index: 99999999999;
+    box-sizing: border-box;
+    padding-bottom: 16px;
 
-    .img {
-      width: 24px;
+    .leftArrow {
+      width: 100%;
       height: 24px;
-      margin-right: 8px;
-    }
+      position: absolute;
+      z-index: 99999999999;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      padding: 0 32rpx;
 
-    .picker {
-      .selectService {
-        display: flex;
-        align-items: center;
+      .img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        z-index: 99;
+      }
 
-        .img {
-          width: 40px;
-          height: 40px;
-          z-index: 2;
-        }
-
-        .select {
-          height: 32px;
-          background: #F8F8FA;
-          border-radius: 0 16px 16px 0;
-          transform: translateX(-40px);
-          box-sizing: border-box;
-          padding-left: 35px;
-          padding-right: 8rpx;
+      .picker {
+        .selectService {
           display: flex;
           align-items: center;
 
-          .content {
+          .img {
+            width: 40px;
+            height: 40px;
+            z-index: 2;
+          }
+
+          .select {
+            height: 32px;
+            background: #fff;
+            border-radius: 0 16px 16px 0;
+            transform: translateX(-40px);
+            box-sizing: border-box;
+            padding-left: 35px;
+            padding-right: 8rpx;
             display: flex;
             align-items: center;
 
-            .uni-input {
-              padding: 0;
-              background: transparent;
-              font-size: 14px;
-              font-family: PingFangSC-Semibold, PingFang SC;
-              font-weight: 600;
-              color: #160002;
-            }
+            .content {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
 
-            .area {
-              font-size: 12px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #786B6C;
-              line-height: 40px;
-              margin-left: 4px;
-            }
+              .uni-input {
+                padding: 0;
+                background: transparent;
+                font-size: 14px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #160002;
+                line-height: 20px;
+                height: 20px;
+              }
 
-            .rightArrow {
-              width: 12px;
-              height: 12px;
-            }
-
-            .noticeText {
-              font-size: 24rpx;
-              font-family: PingFangSC, PingFang SC;
-              font-weight: 400;
-              color: #B6BACB;
-              line-height: 40rpx;
-              white-space: nowrap;
+              .area {
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #786B6C;
+                line-height: 16px;
+                margin: 0;
+              }
             }
           }
-
         }
       }
     }
   }
 
-  .topImg {
-    width: 100%;
-    position: relative;
-    background: #EEEFF1;
+  .serviceDetail {
+    width: calc(100% - 64rpx);
+    height: 440rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    margin-left: 32rpx;
 
-    .sliderPage {
+    .detailTop {
       width: 100%;
-      z-index: 9;
-      position: absolute;
-      left: 0;
-      background: transparent;
-    }
-
-    .topDefaultBg {
-      width: 100%;
-      height: 100%;
-    }
-
-    .carousel {
-      width: 100%;
-      height: 100%;
+      height: 320rpx;
+      border-radius: 16rpx;
       overflow: hidden;
-      float: left;
 
-      .imgIndex {
+      .serviceImg {
         width: 100%;
         height: 100%;
-        background-size: 100% 100%;
-
-        //.img{
-        //    width: 100%;
-        //    height: 324px;
-        //}
       }
     }
 
-    .picNumber {
-      display: flex;
-      align-items: center;
-      background: #383132;
-      border-radius: 11px;
-      position: absolute;
-      right: 16px;
-      bottom: 32px;
-      padding: 5px 9px;
-
-      .icon {
-        width: 16px;
-        height: 18px;
-        opacity: 0.7;
-        margin-right: 4px;
-      }
-
-      .text {
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: 18px;
-      }
-
-      .more {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  .menu {
-    width: 100%;
-    box-sizing: border-box;
-    background: #EEEFF1;
-
-    .top {
+    .detailBottom {
       width: 100%;
-      margin: 0 auto;
       box-sizing: border-box;
-      padding: 16px 16px;
-      background: #fff;
-      border-radius: 16px 16px 1px 1px;
+      padding: 4rpx 24rpx 24rpx;
+      position: relative;
 
-      .left {
+      .detailFirst {
+        width: 100%;
+
+        .serviceName {
+          width: calc(100% - 190rpx);
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          font-size: 28rpx;
+          color: #130f05;
+          line-height: 36rpx;
+          text-align: left;
+          font-style: normal;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          margin-right: 16rpx;
+        }
+
+        .serviceStatus {
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #009f43;
+          line-height: 32rpx;
+          text-align: justify;
+          font-style: normal;
+          display: inline-block;
+          padding: 2rpx 6rpx;
+          background: #e9f8ee;
+          border-radius: 4rpx;
+        }
+      }
+
+      .detailSecond {
         width: 100%;
         display: flex;
         align-items: center;
 
-        .leftImgBox {
-          width: 160rpx;
-          height: 160rpx;
-          border-radius: 16rpx;
-          overflow: hidden;
-
-          .img {
-            width: 100%;
-            height: 100%;
-          }
+        .detailFixedIcon {
+          width: 24rpx;
+          height: 24rpx;
+          margin-right: 4rpx;
         }
 
-        .serviceInfo {
-          margin-left: 16rpx;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          width: calc(100% - 176rpx);
+        .address {
+          width: calc(100% - 120rpx);
+          display: inline-block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
 
-          .serviceInfoTop {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .title {
-              font-size: 18px;
-              font-family: PingFangSC-Semibold, PingFang SC;
-              font-weight: 600;
-              color: #160002;
-            }
-
-            .iconBox {
-              width: 28px;
-              height: 28px;
-              border: 1px solid #F1F1F1;
-              border-radius: 50%;
-
-              .icon {
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-
-          .address {
-            width: 100%;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
+          .distance {
+            font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            color: #160002;
-            margin-top: 4px;
+            font-size: 24rpx;
+            color: #130f05;
+            line-height: 36rpx;
+            text-align: left;
+            font-style: normal;
+            margin-right: 8rpx;
           }
 
-          .status {
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
+          .addressText {
+            font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            color: #fff;
-            // color: #160002;
-            padding: 0 6px;
-            background: #43C677;
-            border-radius: 2px;
-            display: inline-block;
-            width: 80rpx;
-            text-align: center;
+            font-size: 24rpx;
+            color: #716f69;
+            line-height: 36rpx;
+            text-align: left;
+            font-style: normal;
           }
         }
       }
+
+      .navigationBox {
+        width: 64rpx;
+        height: 64rpx;
+        position: absolute;
+        right: 24rpx;
+        top: 32rpx;
+
+        .navigationIcon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+
+  .content-scroll {
+    background: @bg;
+    margin-top: 24rpx;
+  }
+
+  .content-container {
+    padding: 32rpx;
+  }
+
+  .service-info {
+    background: #fff;
+    margin: 24rpx 32rpx 0;
+    border-radius: 24rpx;
+    padding: 40rpx;
+    box-shadow: @shadow;
+
+    .service-name-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16rpx;
+
+      .service-name {
+        font-size: 36rpx;
+        font-weight: 700;
+        color: #160002;
+        flex: 1;
+      }
+
+      .status-badge {
+        background: linear-gradient(135deg, @primary, @primary2);
+        padding: 8rpx 20rpx;
+        border-radius: 20rpx;
+
+        .status-text {
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #fff;
+        }
+      }
     }
 
-    .scroll {
-      width: 100%;
-      box-sizing: border-box;
-      height: calc();
-      background: #F2F4F5;
+    .service-location {
+      margin-bottom: 32rpx;
 
-      .info {
-        width: 100%;
-        padding: 0 32rpx 32rpx;
-        box-sizing: border-box;
-        background: #FFFFFF;
-        z-index: 100;
+      .location-text {
+        font-size: 28rpx;
+        color: #786B6C;
+        line-height: 1.4;
+      }
+    }
 
-        .typeList {
-          width: 100%;
+    .nav-button-row {
+      .nav-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, @primary, @primary2);
+        color: #fff;
+        padding: 24rpx;
+        border-radius: 20rpx;
+        gap: 16rpx;
+
+        .nav-icon {
+          width: 28rpx;
+          height: 28rpx;
+          filter: brightness(0) invert(1);
+        }
+
+        .nav-text {
+          font-size: 28rpx;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .info-card,
+  .area-card {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 24rpx 24rpx 16rpx;
+    margin-bottom: 32rpx;
+    box-shadow: @shadow;
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8rpx;
+
+      .header-icon {
+        width: 48rpx;
+        height: 48rpx;
+        background: linear-gradient(135deg, @primary, @primary2);
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+
+        .icon {
+          width: 24rpx;
+          height: 24rpx;
+          filter: brightness(0) invert(1);
+        }
+      }
+
+      .card-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #160002;
+      }
+    }
+
+    .info-grid {
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16rpx 0;
+        border-bottom: 2rpx solid #F5F5F5;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .info-label {
+          font-size: 24rpx;
+          color: #786B6C;
+          font-weight: 400;
+        }
+
+        .info-value {
+          font-size: 24rpx;
+          color: #160002;
+          font-weight: 600;
+          text-align: right;
+          flex: 1;
+          margin-left: 30rpx;
+        }
+      }
+    }
+
+    .area-stats {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .stat-item {
+        flex: 1;
+        text-align: center;
+
+        .stat-number {
+          display: block;
+          font-size: 28rpx;
+          font-weight: 600;
+          color: @primary;
+          margin-bottom: 8rpx;
+        }
+
+        .stat-label {
+          display: block;
+          font-size: 24rpx;
+          color: #786B6C;
+          margin-bottom: 4rpx;
+        }
+
+        .stat-unit {
+          font-size: 22rpx;
+          color: #A69E9F;
+        }
+      }
+
+      .stat-divider {
+        width: 2rpx;
+        height: 80rpx;
+        background: #E5E5E5;
+        margin: 0 32rpx;
+      }
+    }
+  }
+
+  .service-card {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 24rpx;
+    margin-bottom: 32rpx;
+    box-shadow: @shadow;
+
+    .service-header {
+      margin-bottom: 16rpx;
+
+      .service-title {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #160002;
+      }
+    }
+
+    .service-section {
+      margin-bottom: 24rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 24rpx;
+
+        .section-icon {
+          width: 32rpx;
+          height: 32rpx;
+          margin-right: 16rpx;
+        }
+
+        .section-title {
+          font-size: 28rpx;
+          font-weight: 600;
+          color: #160002;
+        }
+      }
+
+      .service-grid {
+        .service-row {
           display: flex;
-          flex-flow: wrap;
+          gap: 16rpx;
+          margin-bottom: 16rpx;
 
-          .typeItem {
-            width: calc((100% - 24px)/3);
-            height: 66px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background: #F7F7F7;
-            border-radius: 4px;
-            margin-bottom: 8px;
-            margin-right: 8px;
-
-            .img {
-              width: 24px;
-              height: 24px;
-            }
-
-            .text {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #160002;
-              line-height: 20px;
-            }
+          &:last-child {
+            margin-bottom: 0;
           }
         }
 
-        .baseInfo,
-        .areaInfo {
-          margin-top: 8px;
+        .service-item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          background: #F0F0F0;
+          padding: 16rpx;
+          border-radius: 16rpx;
+          border: 3rpx solid transparent;
 
-          .title {
-            font-size: 14px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
+          &.available {
+            background: linear-gradient(135deg, rgba(@primary, 0.15), rgba(@primary2, 0.1));
+            border: 3rpx solid @primary;
+            box-shadow: 0 4rpx 12rpx rgba(@primary, 0.2);
+          }
+
+          &.unavailable {
+            .service-name {
+              text-decoration: line-through;
+              color: #999;
+            }
+          }
+
+          &.empty-item {
+            background: transparent;
+            border: none;
+            box-shadow: none;
+          }
+
+          .service-icon {
+            width: 28rpx;
+            height: 28rpx;
+            margin-right: 12rpx;
+          }
+
+          .service-name {
+            font-size: 24rpx;
             color: #160002;
-            line-height: 20px;
+            font-weight: 500;
+            flex: 1;
           }
 
-          .word {
-            display: flex;
-            margin-top: 8px;
-
-            .subTitle {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #786B6C;
-              line-height: 20px;
-              margin-right: 8px;
-              min-width: 60px;
-            }
-
-            .text {
-              flex: 1;
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #160002;
-              line-height: 20px;
-              display: inline-block;
-            }
-
-            .subTitleArea {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #786B6C;
-              line-height: 20px;
-              display: inline-block;
-              margin-right: 8px;
-              min-width: 80px;
-
-              .text {
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #160002;
-                line-height: 20px;
-              }
-            }
-
-            .value {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #160002;
-              line-height: 20px;
-            }
-
-          }
-
-          .unqualifiedNeeds {
-            .subTitle {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #786B6C;
-              line-height: 20px;
-              margin-right: 8px;
-              min-width: 60px;
-            }
-
-            .unqualNeedText {
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #160002;
-              line-height: 20px;
-              display: inline-block;
-            }
+          .service-count {
+            font-size: 20rpx;
+            color: #786B6C;
+            margin-left: 8rpx;
           }
         }
       }
 
-      .service {
-        box-sizing: border-box;
-        background: #fff;
-        padding: 32rpx 32rpx;
-        margin-top: 24rpx;
+      .parking-grid {
+        .parking-row {
+          display: flex;
+          gap: 16rpx;
+          margin-bottom: 16rpx;
 
-        .serviceItem {
-          .title {
-            font-size: 14px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-            color: #160002;
-            line-height: 20px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .parking-item {
+          flex: 1;
+          background: #F8F9FA;
+          border-radius: 20rpx;
+          padding: 12rpx 16rpx;
+          text-align: center;
+
+          .parking-icon {
+            width: 56rpx;
+            height: 56rpx;
+            margin: 0 auto 20rpx;
+            border-radius: 16rpx;
+
+            &.car-icon {
+              background: linear-gradient(135deg, #FF6B6B, #FF8787);
+            }
+
+            &.bus-icon {
+              background: linear-gradient(135deg, #4ECDC4, #6BCDB9);
+            }
+
+            &.truck-icon {
+              background: linear-gradient(135deg, #45B7D1, #5DBBCC);
+            }
+
+            &.danger-icon {
+              background: linear-gradient(135deg, #FFA726, #FFB74D);
+            }
           }
 
-          .box {
-            margin-top: 12px;
-            display: flex;
+          .parking-label {
+            display: block;
+            font-size: 24rpx;
+            color: #786B6C;
+          }
 
-            .left {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              width: 60px;
-              margin-right: 36px;
+          .parking-count {
+            font-size: 28rpx;
+            font-weight: 700;
+            color: #160002;
+          }
+        }
+      }
 
-              .boxImg {
-                width: 25px;
-                height: 25px;
-              }
+      .business-grid {
+        margin-bottom: 24rpx;
 
-              .textTitle {
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #160002;
-                line-height: 16px;
-              }
+        .business-row {
+          display: flex;
+          gap: 16rpx;
+          margin-bottom: 16rpx;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .business-item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #F0F0F0;
+          padding: 12rpx 20rpx;
+          border-radius: 16rpx;
+          border: 3rpx solid transparent;
+
+          &.available {
+            background: linear-gradient(135deg, rgba(#1677FE, 0.15), rgba(#1677FE, 0.1));
+            border: 3rpx solid #1677FE;
+            box-shadow: 0 4rpx 12rpx rgba(#1677FE, 0.2);
+          }
+
+          &.unavailable {
+            .business-name {
+              text-decoration: line-through;
+              color: #999;
             }
+          }
 
-            .right {
-              flex: 1;
-              display: flex;
+          .business-name {
+            font-size: 24rpx;
+            color: #160002;
+            font-weight: 400;
+            text-align: center;
+          }
 
-              .item {
-                width: 50%;
+          .business-count {
+            font-size: 20rpx;
+            color: #786B6C;
+            margin-left: 8rpx;
+          }
+        }
+      }
 
-                .text {
-                  font-size: 12px;
-                  font-family: PingFangSC-Regular, PingFang SC;
-                  font-weight: 400;
-                  color: #160002;
-                  line-height: 18px;
-                  margin-bottom: 4px;
-                }
+      .business-type {
+        display: flex;
+        align-items: center;
 
-                .unText {
-                  font-size: 12px;
-                  font-family: PingFangSC-Regular, PingFang SC;
-                  font-weight: 400;
-                  color: #A69E9F;
-                  line-height: 18px;
-                  text-decoration: line-through;
-                }
+        .business-type-label {
+          font-size: 24rpx;
+          color: #786B6C;
+          margin-right: 16rpx;
+        }
 
-                .unit {
-                  font-size: 12px;
-                  font-family: PingFangSC-Semibold, PingFang SC;
-                  font-weight: 600;
-                  color: #160002;
-                  line-height: 18px;
-                }
+        .business-type-tag {
+          background: linear-gradient(135deg, @primary, @primary2);
+          padding: 8rpx 20rpx;
+          border-radius: 20rpx;
 
-                .model {
-                  font-size: 12px;
-                  font-family: PingFangSC-Regular, PingFang SC;
-                  font-weight: 400;
-                  color: #160002;
-                  line-height: 18px;
-                  padding: 0 6px;
-                  background: #EAEAEA;
-                  border-radius: 2px;
-                  display: inline-block;
-                }
-              }
-            }
+          .business-type-text {
+            font-size: 24rpx;
+            color: white;
+            font-weight: 500;
           }
         }
       }
@@ -966,4 +1038,4 @@ export default {
   }
 
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/summaryOfPortraits/index.vue b/pages/summaryOfPortraits/index.vue
index 2c3ae0f..3447716 100644
--- a/pages/summaryOfPortraits/index.vue
+++ b/pages/summaryOfPortraits/index.vue
@@ -1,23 +1,27 @@
 <template>
   <view class="summaryOfPortraitsMain">
-    <view class="summaryTab" v-if="selectPortrait!==6 && selectPortrait!==7" :style="{height: (menu.bottom + 14) + 'px',background:selectPortrait===0?'':
-    selectPortrait===1?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)':'linear-gradient(180deg, #A8BFED 0%, #C3D3F4 100%)':
-    selectPortrait===2?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A0D0C1 0%, #EEF7F8 100%)':'linear-gradient(180deg, #A0D0C1 0%, #C0E0D7 100%)':
-    selectPortrait===3?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':
-    selectPortrait===4?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':
-    selectPortrait===5?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':
-    ''}">
-      <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
-        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
-        <div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleChangeService">
-          <div class="selectService" >
+    <view class="summaryTab" v-if="selectPortrait !== 6 && selectPortrait !== 7" :style="{
+      height: (menu.bottom + 14) + 'px', background: selectPortrait === 0 ? '' :
+        selectPortrait === 1 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)' : 'linear-gradient(180deg, #A8BFED 0%, #C3D3F4 100%)' :
+          selectPortrait === 2 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #A0D0C1 0%, #EEF7F8 100%)' : 'linear-gradient(180deg, #A0D0C1 0%, #C0E0D7 100%)' :
+            selectPortrait === 3 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)' : 'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)' :
+              selectPortrait === 4 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)' : 'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)' :
+                selectPortrait === 5 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)' : 'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)' :
+                  ''
+    }">
+      <div class="leftArrow" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }">
+        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
+          @click="handleBack"></image>
+        <div class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
+          <div class="selectService">
             <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
             <view class="select">
               <view class="content">
-                <view class="uni-input">{{serviceInfo.SERVERPART_NAME?serviceInfo.SERVERPART_NAME:''}}</view>
-                <p class="area">{{serviceInfo.SPREGIONTYPE_NAME?serviceInfo.SPREGIONTYPE_NAME:''}}</p>
-                <text class="noticeText" v-if="serviceInfo.SERVERPART_NAME==='安徽驿达'">选择您要看的服务区</text>
-                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
+                <view class="uni-input">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME : '' }}</view>
+                <p class="area">{{ serviceInfo.SPREGIONTYPE_NAME ? serviceInfo.SPREGIONTYPE_NAME : '' }}</p>
+                <text class="noticeText" v-if="serviceInfo.SERVERPART_NAME === '安徽驿达'">选择您要看的服务区</text>
+                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg">
+                </image>
               </view>
             </view>
           </div>
@@ -33,41 +37,50 @@
       <sliderPage  :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
     </view> -->
 
-    <swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait" >
-      <!-- 服务区基本信息 0-->
-      <swiper-item class="swiperItem">
-        <mapDetail :selectIndex="selectPortrait"/>
-      </swiper-item>
-      <!-- 车流预警 1-->
-      <swiper-item class="swiperItem" >
-        <carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo"/>
-      </swiper-item>
-      <!-- 客群画像 2-->
-      <swiper-item class="swiperItem">
-        <guestPortrait :selectIndex="selectPortrait"/>
-      </swiper-item>
-      <!-- 经营画像 3-->
-      <swiper-item class="swiperItem">
-        <managePortrait :selectIndex="selectPortrait"/>
-      </swiper-item>
-      <!-- 交易画像 4-->
-      <swiper-item class="swiperItem">
-        <businessPortrait :selectIndex="selectPortrait"/>
-      </swiper-item>
-      <!-- 业态品牌 5-->
-      <swiper-item class="swiperItem">
-        <formatPortraitBI v-if="serviceInfo.SERVERPART_NAME!=='安徽驿达'" :selectIndex="selectPortrait"/>
-        <formatPortrait v-else  :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'"/>
-      </swiper-item>
-      <!-- 考评考核 6-->
-      <swiper-item class="swiperItem">
-        <newAmine :selectIndex="selectPortrait" :pageType="1"  />
-      </swiper-item>
-      <!-- 日常巡检 7-->
-      <swiper-item class="swiperItem">
-        <newAmine :selectIndex="selectPortrait" :pageType="2" />
-      </swiper-item>
-    </swiper>
+    <view class="summaryOfPortraitsBox">
+      <view class="swiperItem">
+        <mapDetail :selectIndex="selectPortrait" />
+      </view>
+    </view>
+
+    <template v-if=false>
+      <swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait">
+        <!-- 服务区基本信息 0-->
+        <swiper-item class="swiperItem">
+          <mapDetail :selectIndex="selectPortrait" />
+        </swiper-item>
+        <!-- 车流预警 1-->
+        <swiper-item class="swiperItem" v-if=false>
+          <carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo" />
+        </swiper-item>
+        <!-- 客群画像 2-->
+        <swiper-item class="swiperItem" v-if=false>
+          <guestPortrait :selectIndex="selectPortrait" />
+        </swiper-item>
+        <!-- 经营画像 3-->
+        <swiper-item class="swiperItem" v-if=false>
+          <managePortrait :selectIndex="selectPortrait" />
+        </swiper-item>
+        <!-- 交易画像 4-->
+        <swiper-item class="swiperItem" v-if=false>
+          <businessPortrait :selectIndex="selectPortrait" />
+        </swiper-item>
+        <!-- 业态品牌 5-->
+        <swiper-item class="swiperItem" v-if=false>
+          <formatPortraitBI v-if="serviceInfo.SERVERPART_NAME !== '安徽驿达'" :selectIndex="selectPortrait" />
+          <formatPortrait v-else :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'" />
+        </swiper-item>
+        <!-- 考评考核 6-->
+        <swiper-item class="swiperItem" v-if=false>
+          <newAmine :selectIndex="selectPortrait" :pageType="1" />
+        </swiper-item>
+        <!-- 日常巡检 7-->
+        <swiper-item class="swiperItem" v-if=false>
+          <newAmine :selectIndex="selectPortrait" :pageType="2" />
+        </swiper-item>
+      </swiper>
+    </template>
+
   </view>
 </template>
 <script>
@@ -81,77 +94,77 @@ import formatPortrait from "./components/formatPortrait.vue";
 import newAmine from "./components/newAmine.vue";
 import sliderPage from "./components/components/sliderPage.vue";
 export default {
-  components:{mapDetail,carPortrait,guestPortrait,managePortrait,businessPortrait,formatPortraitBI,newAmine,sliderPage,formatPortrait},
-  data(){
+  components: { mapDetail, carPortrait, guestPortrait, managePortrait, businessPortrait, formatPortraitBI, newAmine, sliderPage, formatPortrait },
+  data() {
     return {
       selectPortrait: 0,// 选择要看的商业画像
-      query:'',// 传入的页面元素
-      isShowSwiper:false,// 是否显示滑动块
-      menu:{},
-      serviceInfo:{},// 当前选中服务区
+      query: '',// 传入的页面元素
+      isShowSwiper: false,// 是否显示滑动块
+      menu: {},
+      serviceInfo: {},// 当前选中服务区
       isHandleOnShow: true,// 是否调用onShow的方法
     }
   },
-  onLoad(query){
-    console.log('query',query)
-    if (query.index){
+  onLoad(query) {
+    console.log('query', query)
+    if (query.index) {
       this.selectPortrait = Number(query.index)
-    }else{
+    } else {
       let seat = uni.getStorageSync('currentService')
-      this.selectPortrait = seat.SERVERPART_NAME==='安徽驿达' ? 1:0
+      this.selectPortrait = seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
     }
     this.query = query
     console.log('onLoad')
     this.menu = uni.getMenuButtonBoundingClientRect()
 
   },
-  onShow(){
-      console.log('onShow')
-      console.log('selectPortrait',this.selectPortrait)
-      this.isShowSwiper = true
-      let seat = uni.getStorageSync('currentService')
-      console.log('seat',seat)
-      this.serviceInfo = seat
-      if(this.selectPortrait){
+  onShow() {
+    console.log('onShow')
+    console.log('selectPortrait', this.selectPortrait)
+    this.isShowSwiper = true
+    let seat = uni.getStorageSync('currentService')
+    console.log('seat', seat)
+    this.serviceInfo = seat
+    if (this.selectPortrait) {
 
-      }else{
-        this.selectPortrait = this.query.index ? this.query.index: seat.SERVERPART_NAME==='安徽驿达' ? 1:0
-      }
+    } else {
+      this.selectPortrait = this.query.index ? this.query.index : seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
+    }
   },
-  onHide(){
+  onHide() {
     this.isShowSwiper = false
   },
-  methods:{
+  methods: {
     // 商业汇总的滑动方法
-    handleChangeSelect(e){
-      console.log('e',e)
+    handleChangeSelect(e) {
+      console.log('e', e)
       // this.handleChangePreview(true)
       this.selectPortrait = e.detail.current
     },
     // 切换页码
-    handleChangeIndex(e){
+    handleChangeIndex(e) {
       this.selectPortrait = e
       this.$forceUpdate()
     },
     // 返回
-    handleBack(){
+    handleBack() {
       uni.navigateBack({
         delta: 1
       });
     },
     // 服务区跳转
-    handleChangeService(){
+    handleChangeService() {
       let currentService = uni.getStorageSync('currentService')
       let lastDay = uni.getStorageSync('lastDay')
       let pageList = getCurrentPages()
-      console.log('pageList',pageList)
-      if (pageList.length>2){
+      console.log('pageList', pageList)
+      if (pageList.length > 2) {
         uni.navigateBack({
           delta: 1
         })
-      }else{
+      } else {
         uni.navigateTo({
-          url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
+          url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
         })
       }
     }
@@ -159,41 +172,48 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.summaryOfPortraitsMain{
+.summaryOfPortraitsMain {
   width: 100%;
   height: 100%;
-  .summaryTab{
+
+  .summaryTab {
     position: fixed;
-    left:0;top: 0;
+    left: 0;
+    top: 0;
     width: 100vw;
-    background: transparent;
+    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
     z-index: 99;
     display: flex;
     align-items: flex-end;
     box-sizing: border-box;
     padding-bottom: 16px;
-    .leftArrow{
+
+    .leftArrow {
       height: 24px;
       position: absolute;
       left: 16px;
       display: flex;
       align-items: center;
-      z-index:99999999999;
-      .img{
+      z-index: 99999999999;
+
+      .img {
         width: 24px;
         height: 24px;
         margin-right: 8px;
       }
-      .picker{
-        .selectService{
+
+      .picker {
+        .selectService {
           display: flex;
           align-items: center;
-          .img{
+
+          .img {
             width: 40px;
             height: 40px;
             z-index: 2;
           }
-          .select{
+
+          .select {
             height: 32px;
             background: #F8F8FA;
             border-radius: 0 16px 16px 0;
@@ -203,10 +223,12 @@ export default {
             padding-right: 8rpx;
             display: flex;
             align-items: center;
-            .content{
+
+            .content {
               display: flex;
               align-items: center;
-              .uni-input{
+
+              .uni-input {
                 padding: 0;
                 background: transparent;
                 font-size: 14px;
@@ -214,7 +236,8 @@ export default {
                 font-weight: 600;
                 color: #160002;
               }
-              .area{
+
+              .area {
                 font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
@@ -222,11 +245,13 @@ export default {
                 line-height: 40px;
                 margin-left: 4px;
               }
-              .rightArrow{
+
+              .rightArrow {
                 width: 12px;
                 height: 12px;
               }
-              .noticeText{
+
+              .noticeText {
                 font-size: 24rpx;
                 font-family: PingFangSC, PingFang SC;
                 font-weight: 400;
@@ -241,10 +266,12 @@ export default {
       }
     }
   }
-  .summaryOfPortraitsBox{
+
+  .summaryOfPortraitsBox {
     width: 100%;
     height: 100%;
-    .swiperItem{
+
+    .swiperItem {
       width: 100%;
       height: 100vh;
     }
diff --git a/pages/userCenter/userCenter.vue b/pages/userCenter/userCenter.vue
index 746ac57..bb93cf4 100644
--- a/pages/userCenter/userCenter.vue
+++ b/pages/userCenter/userCenter.vue
@@ -183,6 +183,19 @@ export default {
               summaryOfPortraits: true,
               value: 4,
             },
+            {
+              id: "",
+              name: "人员管理",
+              // homeUrl: "/pages/map/detail?come=user",
+              homeUrl: "/pages/attendanceStatus/index",
+              imagePath:
+                "https://eshangtech.com/ShopICO/ahyd-BID/user/assessment.svg",
+              isNotice: true,
+              notice: 0,
+              type: 0,
+              summaryOfPortraits: true,
+              value: 4,
+            },
           ],
         },
       ],