From f526b505579fbf35c46501eb2a163d0a20e67fdb Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Fri, 18 Apr 2025 18:58:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BF=E5=AE=A2=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/integrated/visitor/myvisitor.vue | 295 ++++++++++-----------
 1 file changed, 142 insertions(+), 153 deletions(-)

diff --git a/src/pages/integrated/visitor/myvisitor.vue b/src/pages/integrated/visitor/myvisitor.vue
index 3d1ac70..bb1c96e 100644
--- a/src/pages/integrated/visitor/myvisitor.vue
+++ b/src/pages/integrated/visitor/myvisitor.vue
@@ -321,170 +321,159 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .visitor-list {
-  min-height: 100vh;
-  background: #F7F8FA;
-}
-
-.tabs {
   display: flex;
-  background: #fff;
-  padding: 0 32rpx;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
 
-.tab-item {
-  flex: 1;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 28rpx;
-  color: #666;
-  position: relative;
-  
-  &.active {
-    color: #1989FA;
-    font-weight: 500;
-    
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 40rpx;
-      height: 4rpx;
-      background: #1989FA;
-      border-radius: 2rpx;
+  .tabs {
+    display: flex;
+    background-color: #fff;
+    padding: 20rpx 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1rpx solid #eee;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 20rpx 0;
+      font-size: 28rpx;
+      color: #666;
+      position: relative;
+
+      &.active {
+        color: #1777FF;
+        font-weight: bold;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 40rpx;
+          height: 4rpx;
+          background-color: #1777FF;
+          border-radius: 2rpx;
+        }
+      }
     }
   }
-}
 
-.list-content {
-  padding: 108rpx 32rpx 32rpx;
-}
-
-.visitor-item {
-  background: #fff;
-  border-radius: 12rpx;
-  padding: 24rpx;
-  margin-bottom: 20rpx;
-  &:active {
-    opacity: 0.8;
-  }
-}
-
-.item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20rpx;
-}
-
-.visit-time {
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-}
-
-.status-tag {
-  font-size: 24rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 4rpx;
-  
-  &.status-pending {
-    background: #FFF3E0;
-    color: #FF9800;
-  }
-  
-  &.status-waiting {
-    background: #E3F2FD;
-    color: #2196F3;
-  }
-  
-  &.status-visited {
-    background: #E8F5E9;
-    color: #4CAF50;
-  }
-  
-  &.status-cancelled {
-    background: #EEEEEE;
-    color: #9E9E9E;
-  }
-}
-
-.info-row {
-  display: flex;
-  margin-bottom: 16rpx;
-  
-  &:last-child {
-    margin-bottom: 0;
-  }
-  
-  .label {
-    font-size: 26rpx;
-    color: #666;
-    width: 140rpx;
-    flex-shrink: 0;
-  }
-  
-  .value {
-    font-size: 26rpx;
-    color: #333;
+  .list-content {
     flex: 1;
+    height: calc(100vh - 100rpx);
+    padding: 20rpx;
+    box-sizing: border-box;
   }
 
-  &.check-reason {
-    margin-top: 16rpx;
-    padding-top: 16rpx;
-    border-top: 1rpx solid #F5F5F5;
-    
-    .value {
-      color: #FF4D4F;
+  .visitor-item {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20rpx;
+
+      .visit-time {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: bold;
+      }
+
+      .status-tag {
+        padding: 4rpx 16rpx;
+        border-radius: 20rpx;
+        font-size: 24rpx;
+
+        &.status-pending {
+          background-color: #fff7e6;
+          color: #fa8c16;
+        }
+
+        &.status-waiting {
+          background-color: #e6f7ff;
+          color: #1890ff;
+        }
+
+        &.status-visited {
+          background-color: #f6ffed;
+          color: #52c41a;
+        }
+
+        &.status-cancelled {
+          background-color: #fff1f0;
+          color: #f5222d;
+        }
+      }
+    }
+
+    .item-content {
+      .info-row {
+        display: flex;
+        margin-bottom: 12rpx;
+        font-size: 26rpx;
+
+        .label {
+          color: #999;
+          width: 140rpx;
+        }
+
+        .value {
+          color: #333;
+          flex: 1;
+        }
+
+        &.check-reason {
+          .value {
+            color: #f5222d;
+          }
+        }
+      }
+    }
+
+    .item-footer {
+      margin-top: 20rpx;
+      padding-top: 20rpx;
+      border-top: 1rpx solid #eee;
+
+      .btn-group {
+        display: flex;
+        justify-content: flex-end;
+        gap: 20rpx;
+
+        .visit-btn, .cancel-btn {
+          padding: 10rpx 30rpx;
+          border-radius: 30rpx;
+          font-size: 26rpx;
+        }
+
+        .visit-btn {
+          background-color: #1777FF;
+          color: #fff;
+        }
+
+        .cancel-btn {
+          background-color: #fff;
+          color: #666;
+          border: 1rpx solid #ddd;
+        }
+      }
     }
   }
-}
 
-.item-footer {
-  margin-top: 20rpx;
-  padding-top: 20rpx;
-  border-top: 1rpx solid #F5F5F5;
-}
-
-.btn-group {
-  display: flex;
-  justify-content: flex-end;
-  gap: 20rpx;
-}
-
-.cancel-btn, .visit-btn {
-  padding: 12rpx 32rpx;
-  border-radius: 32rpx;
-  font-size: 26rpx;
-  
-  &:active {
-    opacity: 0.8;
+  .loading, .no-more, .empty {
+    text-align: center;
+    padding: 30rpx;
+    color: #999;
+    font-size: 26rpx;
   }
 }
-
-.cancel-btn {
-  border: 1rpx solid #DCDEE0;
-  color: #666;
-}
-
-.visit-btn {
-  background: #1989FA;
-  color: #fff;
-}
-
-.loading, .no-more, .empty {
-  text-align: center;
-  font-size: 24rpx;
-  color: #999;
-  padding: 20rpx 0;
-}
 </style> 
\ No newline at end of file