From 8100227e2be959454faa4fe1ea79e6cb46b69bcb Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Sat, 31 May 2025 14:37:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=A5=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CheckinDialog.vue               | 761 +++++++++++++++------
 1 file changed, 542 insertions(+), 219 deletions(-)

diff --git a/CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue b/CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue
index 6a4a9bd..1c4f0fc 100644
--- a/CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue
+++ b/CatmDogd-Mall-Front-test/src/components/CheckinDialog.vue
@@ -1,221 +1,232 @@
 <template>
-    <el-dialog title="打卡信息" :visible.sync="visible" width="80%" :before-close="handleClose" class="checkin-dialog">
-        <div v-loading="loading" class="checkin-content">
-            <!-- 个人准备 -->
-            <div class="section">
-                <div class="section-title">
-                    <span class="title-text">个人准备</span>
-                </div>
+    <div>
+        <el-dialog title="打卡信息" :visible.sync="visible" width="80%" :before-close="handleClose" class="checkin-dialog">
+            <div v-loading="loading" class="checkin-content">
+                <!-- 个人准备 -->
+                <div class="section">
+                    <div class="section-title">
+                        <span class="title-text">个人准备</span>
+                    </div>
 
-                <div class="upload-group">
-                    <div class="upload-item">
-                        <div class="upload-label">手套照片</div>
-                        <div class="image-gallery">
-                            <div v-if="checkinData.gloveImages && checkinData.gloveImages.length > 0"
-                                class="image-list">
-                                <div v-for="(image, index) in checkinData.gloveImages" :key="index" class="image-item"
-                                    @click="previewImage(image)">
-                                    <img :src="image" alt="手套照片" />
+                    <div class="upload-group">
+                        <div class="upload-item">
+                            <div class="upload-label">手套照片</div>
+                            <div class="image-gallery">
+                                <div v-if="checkinData.gloveImages && checkinData.gloveImages.length > 0"
+                                    class="image-list">
+                                    <div v-for="(image, index) in checkinData.gloveImages" :key="index" class="image-item"
+                                        @click="previewImage(image)">
+                                        <img :src="image" alt="手套照片" />
+                                    </div>
                                 </div>
+                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                            <div v-else class="no-data">暂无图片</div>
                         </div>
-                    </div>
 
-                    <div class="upload-item">
-                        <div class="upload-label">鞋套照片</div>
-                        <div class="image-gallery">
-                            <div v-if="checkinData.shoeImages && checkinData.shoeImages.length > 0" class="image-list">
-                                <div v-for="(image, index) in checkinData.shoeImages" :key="index" class="image-item"
-                                    @click="previewImage(image)">
-                                    <img :src="image" alt="鞋套照片" />
+                        <div class="upload-item">
+                            <div class="upload-label">鞋套照片</div>
+                            <div class="image-gallery">
+                                <div v-if="checkinData.shoeImages && checkinData.shoeImages.length > 0" class="image-list">
+                                    <div v-for="(image, index) in checkinData.shoeImages" :key="index" class="image-item"
+                                        @click="previewImage(image)">
+                                        <img :src="image" alt="鞋套照片" />
+                                    </div>
                                 </div>
+                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                            <div v-else class="no-data">暂无图片</div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- 宠物状态记录 -->
-            <div class="section">
-                <div class="section-title">
-                    <span class="title-text">宠物状态记录</span>
-                </div>
-                
-                <div v-if="checkinData.petList && checkinData.petList.length > 0">
-                    <div v-for="(pet, index) in checkinData.petList" :key="index" class="pet-item">
-                        <div class="upload-label">{{ pet.title }}照片</div>
-                        <div class="image-gallery">
-                            <div v-if="pet.images && pet.images.length > 0" class="image-list">
-                                <div 
-                                    v-for="(image, imgIndex) in pet.images" 
-                                    :key="imgIndex" 
-                                    class="image-item"
-                                    @click="previewImage(image)"
-                                >
-                                    <img :src="image" alt="宠物状态照片" />
+                <!-- 宠物状态记录 -->
+                <div class="section">
+                    <div class="section-title">
+                        <span class="title-text">宠物状态记录</span>
+                    </div>
+                    
+                    <div v-if="checkinData.petList && checkinData.petList.length > 0">
+                        <div v-for="(pet, index) in checkinData.petList" :key="index" class="pet-item">
+                            <div class="upload-label">{{ pet.title }}照片</div>
+                            <div class="image-gallery">
+                                <div v-if="pet.images && pet.images.length > 0" class="image-list">
+                                    <div 
+                                        v-for="(image, imgIndex) in pet.images" 
+                                        :key="imgIndex" 
+                                        class="image-item"
+                                        @click="previewImage(image)"
+                                    >
+                                        <img :src="image" alt="宠物状态照片" />
+                                    </div>
                                 </div>
+                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                            <div v-else class="no-data">暂无图片</div>
                         </div>
                     </div>
+                    <div v-else class="no-data">暂无宠物数据</div>
                 </div>
-                <div v-else class="no-data">暂无宠物数据</div>
-            </div>
 
-            <!-- 基础服务记录 -->
-            <div class="section">
-                <div class="section-title">
-                    <span class="title-text">基础服务记录</span>
-                </div>
-                
-                <div class="service-item">
-                    <div class="service-label">粮碗前后对比</div>
-                    <div class="compare-container">
-                        <div class="compare-item">
-                            <div class="compare-label">前</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.groomingBeforeImages && checkinData.groomingBeforeImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.groomingBeforeImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="粮碗前照片" />
+                <!-- 基础服务记录 -->
+                <div class="section">
+                    <div class="section-title">
+                        <span class="title-text">基础服务记录</span>
+                    </div>
+                    
+                    <div class="service-item">
+                        <div class="service-label">粮碗前后对比</div>
+                        <div class="compare-container">
+                            <div class="compare-item">
+                                <div class="compare-label">前</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.groomingBeforeImages && checkinData.groomingBeforeImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.groomingBeforeImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="粮碗前照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                        </div>
-                        
-                        <div class="compare-item">
-                            <div class="compare-label">后</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.groomingAfterImages && checkinData.groomingAfterImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.groomingAfterImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="粮碗后照片" />
+                            
+                            <div class="compare-item">
+                                <div class="compare-label">后</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.groomingAfterImages && checkinData.groomingAfterImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.groomingAfterImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="粮碗后照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
                         </div>
                     </div>
-                </div>
-                
-                <div class="service-item">
-                    <div class="service-label">水碗前后对比</div>
-                    <div class="compare-container">
-                        <div class="compare-item">
-                            <div class="compare-label">前</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.waterBowlBeforeImages && checkinData.waterBowlBeforeImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.waterBowlBeforeImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="水碗前照片" />
+                    
+                    <div class="service-item">
+                        <div class="service-label">水碗前后对比</div>
+                        <div class="compare-container">
+                            <div class="compare-item">
+                                <div class="compare-label">前</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.waterBowlBeforeImages && checkinData.waterBowlBeforeImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.waterBowlBeforeImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="水碗前照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                        </div>
-                        
-                        <div class="compare-item">
-                            <div class="compare-label">后</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.waterBowlAfterImages && checkinData.waterBowlAfterImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.waterBowlAfterImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="水碗后照片" />
+                            
+                            <div class="compare-item">
+                                <div class="compare-label">后</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.waterBowlAfterImages && checkinData.waterBowlAfterImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.waterBowlAfterImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="水碗后照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <div class="service-item">
-                    <div class="service-label">猫砂盆、尿垫前后对比</div>
-                    <div class="compare-container">
-                        <div class="compare-item">
-                            <div class="compare-label">前</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.basinBeforeImages && checkinData.basinBeforeImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.basinBeforeImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="猫砂盆前照片" />
+                    <div class="service-item">
+                        <div class="service-label">猫砂盆、尿垫前后对比</div>
+                        <div class="compare-container">
+                            <div class="compare-item">
+                                <div class="compare-label">前</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.basinBeforeImages && checkinData.basinBeforeImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.basinBeforeImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="猫砂盆前照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
-                        </div>
-                        
-                        <div class="compare-item">
-                            <div class="compare-label">后</div>
-                            <div class="image-gallery">
-                                <div v-if="checkinData.basinAfterImages && checkinData.basinAfterImages.length > 0"
-                                    class="image-list">
-                                    <div v-for="(image, index) in checkinData.basinAfterImages" :key="index"
-                                        class="image-item" @click="previewImage(image)">
-                                        <img :src="image" alt="猫砂盆后照片" />
+                            
+                            <div class="compare-item">
+                                <div class="compare-label">后</div>
+                                <div class="image-gallery">
+                                    <div v-if="checkinData.basinAfterImages && checkinData.basinAfterImages.length > 0"
+                                        class="image-list">
+                                        <div v-for="(image, index) in checkinData.basinAfterImages" :key="index"
+                                            class="image-item" @click="previewImage(image)">
+                                            <img :src="image" alt="猫砂盆后照片" />
+                                        </div>
                                     </div>
+                                    <div v-else class="no-data">暂无图片</div>
                                 </div>
-                                <div v-else class="no-data">暂无图片</div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- 定制服务记录 -->
-            <div class="section" v-if="checkinData.projectList && checkinData.projectList.length > 0">
-                <div class="section-title">
-                    <span class="title-text">定制服务记录</span>
-                </div>
-                
-                <div v-for="(project, index) in checkinData.projectList" :key="index" class="project-item">
-                    <div class="upload-label">{{ project.title }}</div>
-                    <div class="image-gallery">
-                        <div v-if="project.images && project.images.length > 0" class="image-list">
-                            <div 
-                                v-for="(image, imgIndex) in project.images" 
-                                :key="imgIndex" 
-                                class="image-item"
-                                @click="previewImage(image)"
-                            >
-                                <img :src="image" alt="定制服务照片" />
+                <!-- 定制服务记录 -->
+                <div class="section" v-if="checkinData.projectList && checkinData.projectList.length > 0">
+                    <div class="section-title">
+                        <span class="title-text">定制服务记录</span>
+                    </div>
+                    
+                    <div v-for="(project, index) in checkinData.projectList" :key="index" class="project-item">
+                        <div class="upload-label">{{ project.title }}</div>
+                        <div class="image-gallery">
+                            <div v-if="project.images && project.images.length > 0" class="image-list">
+                                <div 
+                                    v-for="(image, imgIndex) in project.images" 
+                                    :key="imgIndex" 
+                                    class="image-item"
+                                    @click="previewImage(image)"
+                                >
+                                    <img :src="image" alt="定制服务照片" />
+                                </div>
                             </div>
+                            <div v-else class="no-data">暂无图片</div>
                         </div>
-                        <div v-else class="no-data">暂无图片</div>
                     </div>
                 </div>
-            </div>
 
-            <!-- 其他补充信息 -->
-            <div class="section" v-if="checkinData.notes">
-                <div class="section-title">
-                    <span class="title-text">其他补充信息</span>
-                </div>
-                <div class="notes-content">
-                    {{ checkinData.notes }}
+                <!-- 其他补充信息 -->
+                <div class="section" v-if="checkinData.notes">
+                    <div class="section-title">
+                        <span class="title-text">其他补充信息</span>
+                    </div>
+                    <div class="notes-content">
+                        {{ checkinData.notes }}
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div slot="footer" class="dialog-footer">
-            <el-button @click="handleClose">关 闭</el-button>
-        </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="handleClose">关 闭</el-button>
+            </div>
+        </el-dialog>
 
         <!-- 图片预览弹窗 -->
-        <el-dialog title="图片预览" :visible.sync="previewVisible" width="60%" class="image-preview-dialog">
+        <el-dialog 
+            title="图片预览" 
+            :visible.sync="previewVisible" 
+            width="60%" 
+            class="image-preview-dialog"
+            :append-to-body="true"
+            :modal="true"
+            :close-on-click-modal="true"
+            :modal-append-to-body="true"
+        >
             <div class="preview-container">
                 <img :src="previewImageUrl" alt="预览图片" style="max-width: 100%; max-height: 500px;" />
             </div>
         </el-dialog>
-    </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -380,161 +391,473 @@ export default {
 
 <style lang="scss" scoped>
 .checkin-dialog {
+    ::v-deep .el-dialog {
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+        z-index: 2000;
+    }
+
+    ::v-deep .el-dialog__wrapper {
+        z-index: 2000;
+    }
+
+    ::v-deep .el-dialog__header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        padding: 20px 24px;
+        
+        .el-dialog__title {
+            font-size: 18px;
+            font-weight: 600;
+            color: white !important;
+        }
+        
+        .el-dialog__close {
+            color: white !important;
+            font-size: 20px;
+            
+            &:hover {
+                color: rgba(255, 255, 255, 0.8) !important;
+            }
+        }
+    }
+
+    ::v-deep .el-dialog__body {
+        padding: 0;
+    }
+
     .checkin-content {
         max-height: 70vh;
         overflow-y: auto;
+        padding: 24px;
+        
+        // 自定义滚动条
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        &::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 3px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 3px;
+            
+            &:hover {
+                background: #a8a8a8;
+            }
+        }
     }
 
     .section {
-        margin-bottom: 30px;
-        padding: 20px;
-        border: 1px solid #e4e7ed;
-        border-radius: 6px;
-        background-color: #fafafa;
+        margin-bottom: 32px;
+        padding: 24px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+        border: 1px solid #f0f0f0;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            transform: translateY(-2px);
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
 
         .section-title {
-            margin-bottom: 20px;
+            margin-bottom: 24px;
+            position: relative;
 
             .title-text {
-                font-size: 16px;
-                font-weight: bold;
-                color: #ff9500;
+                font-size: 18px;
+                font-weight: 600;
+                color: #2c3e50;
                 position: relative;
+                padding-left: 16px;
 
                 &::before {
                     content: '';
                     position: absolute;
-                    left: -10px;
+                    left: 0;
                     top: 50%;
                     transform: translateY(-50%);
                     width: 4px;
-                    height: 16px;
-                    background-color: #ff9500;
+                    height: 20px;
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                     border-radius: 2px;
                 }
+                
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -8px;
+                    left: 0;
+                    width: 60px;
+                    height: 2px;
+                    background: linear-gradient(90deg, #667eea 0%, transparent 100%);
+                    border-radius: 1px;
+                }
             }
         }
     }
 
     .upload-group {
-        display: flex;
-        gap: 40px;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 32px;
     }
 
     .upload-item {
-        flex: 1;
-        min-width: 300px;
-        
         .upload-label {
-            margin-bottom: 10px;
-            font-weight: 500;
-            color: #333;
+            margin-bottom: 16px;
+            font-weight: 600;
+            color: #34495e;
+            font-size: 15px;
+            display: flex;
+            align-items: center;
+            
+            &::before {
+                content: '📷';
+                margin-right: 8px;
+                font-size: 16px;
+            }
         }
     }
 
     .pet-item,
     .project-item {
-        margin-bottom: 20px;
+        margin-bottom: 24px;
+        padding: 20px;
+        background: #fafbfc;
+        border-radius: 8px;
+        border: 1px solid #e8eaed;
         
         .upload-label {
-            margin-bottom: 10px;
-            font-weight: 500;
-            color: #333;
+            margin-bottom: 16px;
+            font-weight: 600;
+            color: #34495e;
+            font-size: 15px;
+            display: flex;
+            align-items: center;
+            
+            &::before {
+                content: '🐾';
+                margin-right: 8px;
+                font-size: 16px;
+            }
+        }
+    }
+
+    .project-item {
+        .upload-label::before {
+            content: '⭐';
         }
     }
 
     .notes-content {
-        padding: 15px;
-        background-color: #f5f5f5;
-        border-radius: 8px;
-        border: 1px solid #e4e7ed;
-        color: #606266;
+        padding: 20px;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border-radius: 12px;
+        border: 1px solid #dee2e6;
+        color: #495057;
         font-size: 14px;
-        line-height: 1.6;
+        line-height: 1.8;
         white-space: pre-wrap;
         word-break: break-word;
+        position: relative;
+        
+        &::before {
+            content: '💭';
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            font-size: 18px;
+            opacity: 0.6;
+        }
     }
 
     .service-item {
-        margin-bottom: 30px;
+        margin-bottom: 32px;
+        padding: 20px;
+        background: #fafbfc;
+        border-radius: 10px;
+        border: 1px solid #e8eaed;
 
         .service-label {
-            margin-bottom: 15px;
-            font-weight: 500;
-            color: #333;
+            margin-bottom: 20px;
+            font-weight: 600;
+            color: #34495e;
+            font-size: 16px;
+            text-align: center;
+            position: relative;
+            
+            &::before {
+                content: '';
+                position: absolute;
+                left: 50%;
+                bottom: -8px;
+                transform: translateX(-50%);
+                width: 40px;
+                height: 2px;
+                background: linear-gradient(90deg, #667eea, #764ba2);
+                border-radius: 1px;
+            }
         }
 
         .compare-container {
-            display: flex;
-            gap: 40px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 32px;
+            
+            @media (max-width: 768px) {
+                grid-template-columns: 1fr;
+                gap: 24px;
+            }
 
             .compare-item {
-                flex: 1;
-
                 .compare-label {
                     text-align: center;
-                    margin-bottom: 10px;
-                    font-weight: 500;
-                    color: #666;
+                    margin-bottom: 16px;
+                    font-weight: 600;
+                    color: #5a6c7d;
+                    font-size: 14px;
+                    padding: 8px 16px;
+                    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+                    border-radius: 20px;
+                    display: inline-block;
+                    width: 100%;
+                    box-sizing: border-box;
+                    
+                    &:first-child {
+                        background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);
+                    }
                 }
             }
         }
     }
 
     .image-gallery {
-        min-height: 100px;
+        min-height: 120px;
+        padding: 16px;
+        background: white;
+        border-radius: 8px;
+        border: 2px dashed #e1e8ed;
+        transition: all 0.3s ease;
+
+        &:hover {
+            border-color: #667eea;
+            background: #fafbff;
+        }
 
         .image-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 16px;
 
             .image-item {
-                width: 100px;
-                height: 100px;
-                border: 1px solid #d9d9d9;
-                border-radius: 6px;
+                width: 120px;
+                height: 120px;
+                border-radius: 12px;
                 overflow: hidden;
                 cursor: pointer;
-                transition: all 0.3s;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                position: relative;
 
                 &:hover {
-                    border-color: #409eff;
-                    transform: scale(1.05);
+                    transform: scale(1.08) rotate(1deg);
+                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+                    z-index: 10;
                 }
 
                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
+                    transition: transform 0.3s ease;
+                }
+
+                &:hover img {
+                    transform: scale(1.1);
                 }
             }
         }
 
         .no-data {
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
-            height: 100px;
-            color: #999;
+            height: 120px;
+            color: #8a92a5;
             font-size: 14px;
-            border: 1px dashed #d9d9d9;
-            border-radius: 6px;
-            background-color: #fafafa;
+            font-weight: 500;
+            
+            &::before {
+                content: '🖼️';
+                font-size: 24px;
+                margin-bottom: 8px;
+                opacity: 0.6;
+            }
         }
     }
 }
 
 .dialog-footer {
     text-align: right;
-    padding-top: 20px;
-    border-top: 1px solid #e4e7ed;
+    padding: 24px;
+    background: #fafbfc;
+    border-top: 1px solid #e8eaed;
+    
+    .el-button {
+        padding: 12px 24px;
+        border-radius: 8px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+    }
 }
 
 .image-preview-dialog {
+    ::v-deep .el-dialog {
+        border-radius: 12px;
+        overflow: hidden;
+        z-index: 3000 !important;
+    }
+    
+    ::v-deep .el-dialog__wrapper {
+        z-index: 3000 !important;
+        backdrop-filter: blur(3px);
+    }
+
+    ::v-deep .v-modal {
+        z-index: 2999 !important;
+        background-color: rgba(0, 0, 0, 0.8) !important;
+    }
+    
+    ::v-deep .el-dialog__header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        padding: 20px 24px;
+        
+        .el-dialog__title {
+            font-weight: 600;
+            color: white !important;
+            font-size: 16px;
+        }
+        
+        .el-dialog__close {
+            color: white !important;
+            font-size: 18px;
+            
+            &:hover {
+                color: rgba(255, 255, 255, 0.8) !important;
+            }
+        }
+    }
+
+    ::v-deep .el-dialog__body {
+        padding: 0 !important;
+        background: #000 !important;
+        position: relative;
+        z-index: 3001 !important;
+    }
+
     .preview-container {
         text-align: center;
+        padding: 20px;
+        background: #000;
+        border-radius: 0;
+        position: relative;
+        z-index: 3002 !important;
+        min-height: 400px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        img {
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+            max-width: 100%;
+            max-height: 80vh;
+            transition: transform 0.3s ease;
+            position: relative;
+            z-index: 3003 !important;
+            object-fit: contain;
+            cursor: zoom-in;
+            
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .checkin-dialog {
+        ::v-deep .el-dialog {
+            width: 95% !important;
+            margin: 0 auto;
+        }
+        
+        .upload-group {
+            grid-template-columns: 1fr;
+            gap: 24px;
+        }
+        
+        .section {
+            padding: 20px;
+            margin-bottom: 24px;
+        }
+        
+        .image-gallery .image-list {
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            
+            .image-item {
+                width: 100px;
+                height: 100px;
+            }
+        }
+    }
+}
+
+// 深色模式支持（可选）
+@media (prefers-color-scheme: dark) {
+    .checkin-dialog {
+        .section {
+            background: #2d3748;
+            border-color: #4a5568;
+            color: #e2e8f0;
+        }
+        
+        .section-title .title-text {
+            color: #e2e8f0;
+        }
+        
+        .upload-label {
+            color: #cbd5e0;
+        }
+        
+        .notes-content {
+            background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
+            color: #e2e8f0;
+        }
+        
+        .image-gallery {
+            background: #2d3748;
+            border-color: #4a5568;
+        }
     }
 }
 </style>
\ No newline at end of file