diff --git a/pages/personalCenter/myAppointment.vue b/pages/personalCenter/myAppointment.vue
index abb63b5..fd96137 100644
--- a/pages/personalCenter/myAppointment.vue
+++ b/pages/personalCenter/myAppointment.vue
@@ -33,7 +33,9 @@
         <view class="card-header">
           <text class="activity-title">{{ item.title }}</text>
           <view :class="['status-tag', getStatusClass(Number(item.state))]">
-            <text class="status-text">{{ getStatusText(Number(item.state)) }}</text>
+            <text class="status-text"
+              >{{ getStatusText(Number(item.state)) }}
+            </text>
           </view>
         </view>
 
@@ -58,28 +60,28 @@
         <!-- 操作按钮 -->
         <view class="card-actions">
           <!-- 只有待核销状态才显示出示码券按钮 -->
-          <view 
-            v-if="Number(item.state) === 1" 
-            class="action-btn primary" 
+          <view
+            v-if="Number(item.state) === 1 || Number(item.state) === 2"
+            class="action-btn"
+          ></view>
+          <view
+            v-if="Number(item.state) === 1"
+            class="action-btn secondary"
             @click="showQRCode(item)"
           >
-            <image
-              class="btn-icon"
-              mode="aspectFit"
-              src="https://api.ccttiot.com/image-1755237410755.png"
-            />
-            <text class="btn-text">核销验证码</text>
+            <image :src="urls.qrCodeIcon" class="btn-icon" mode="aspectFit" />
+            <text class="btn-text">出示码券</text>
           </view>
           <!-- 只有待核销状态才显示取消预约按钮 -->
-          <view 
-            v-if="Number(item.state) === 1" 
-            class="action-btn secondary" 
+          <view
+            v-if="Number(item.state) === 1"
+            class="action-btn secondary"
             @click="cancelAppointment(item)"
           >
             <image
+              :src="urls.cancelAppointmentIcon"
               class="btn-icon"
               mode="aspectFit"
-              src="https://api.ccttiot.com/image-1755237410755.png"
             />
             <text class="btn-text">取消预约</text>
           </view>
@@ -92,15 +94,15 @@
             />
             <text class="btn-text">已完成</text>
           </view>
-          <!-- 取消预约状态显示已取消提示 -->
-          <view v-if="Number(item.state) === 3" class="action-btn canceled">
-            <image
-              class="btn-icon"
-              mode="aspectFit"
-              src="https://api.ccttiot.com/image-1755237410755.png"
-            />
-            <text class="btn-text">已取消</text>
-          </view>
+          <!--          &lt;!&ndash; 取消预约状态显示已取消提示 &ndash;&gt;-->
+          <!--          <view v-if="Number(item.state) === 3" class="action-btn canceled">-->
+          <!--            <image-->
+          <!--              class="btn-icon"-->
+          <!--              mode="aspectFit"-->
+          <!--              src="https://api.ccttiot.com/image-1755237410755.png"-->
+          <!--            />-->
+          <!--            <text class="btn-text">已取消</text>-->
+          <!--          </view>-->
         </view>
       </view>
 
@@ -119,13 +121,13 @@
         <text class="loading-text">加载中...</text>
       </view>
     </view>
-    
+
     <!-- 二维码弹窗 -->
     <qrcode-modal
-      :visible="showQRCodeModal"
-      :value="currentSubscribeId"
       :ticket-number="currentTicketNumber"
       :title="'核销验证码'"
+      :value="currentSubscribeId"
+      :visible="showQRCodeModal"
       @close="closeQRCodeModal"
     />
   </view>
@@ -136,17 +138,22 @@ import { CommonEnum } from "@/enum/common.js";
 import {
   cancelAppointment,
   getAppointmentList,
-  verifyAppointmentCode,
 } from "@/api/personalCenter/index.js";
-import { generateVerificationQRCode } from "@/utils/qrcode.js";
 import QRCodeModal from "@/components/qrcode-modal/qrcode-modal.vue";
+import BaseBackground from "../../components/base-background/base-background.vue";
 
 export default {
   components: {
-    QRCodeModal
+    BaseBackground,
+    QRCodeModal,
   },
   data() {
     return {
+      urls: {
+        qrCodeIcon: "https://api.ccttiot.com/image-1756260317570.png",
+        cancelAppointmentIcon:
+          "https://api.ccttiot.com/image-1756260524163.png",
+      },
       CommonEnum,
       // 当前激活的标签页
       activeTab: "activity",
@@ -162,8 +169,8 @@ export default {
       },
       // 二维码弹窗相关
       showQRCodeModal: false,
-      currentSubscribeId: '',
-      currentTicketNumber: '',
+      currentSubscribeId: "",
+      currentTicketNumber: "",
     };
   },
   onLoad() {
@@ -209,7 +216,7 @@ export default {
               ? rows
               : [...this.appointmentList, ...rows];
           this.pageParams.total = total;
-          
+
           // 调试信息：打印预约数据状态
           console.log("预约列表数据:", this.appointmentList);
           this.appointmentList.forEach((item, index) => {
@@ -217,7 +224,7 @@ export default {
               title: item.title,
               state: item.state,
               stateType: typeof item.state,
-              stateNumber: Number(item.state)
+              stateNumber: Number(item.state),
             });
           });
         } else {
@@ -270,8 +277,8 @@ export default {
     getStatusText(state) {
       const statusMap = {
         1: "待核销",
-        2: "已核销", 
-        3: "取消预约",
+        2: "已核销",
+        3: "已取消",
       };
       return statusMap[state] || "未知状态";
     },
@@ -279,9 +286,9 @@ export default {
     // 获取状态样式类
     getStatusClass(state) {
       const classMap = {
-        1: "status-pending",    // 待核销 - 橙色
-        2: "status-verified",   // 已核销 - 绿色
-        3: "status-canceled",   // 取消预约 - 灰色
+        1: "status-pending", // 待核销 - 橙色
+        2: "status-verified", // 已核销 - 绿色
+        3: "status-canceled", // 取消预约 - 灰色
       };
       return classMap[state] || "status-default";
     },
@@ -294,12 +301,12 @@ export default {
       this.currentTicketNumber = item.subscribeId || item.id;
       this.showQRCodeModal = true;
     },
-    
+
     // 关闭二维码弹窗
     closeQRCodeModal() {
       this.showQRCodeModal = false;
-      this.currentSubscribeId = '';
-      this.currentTicketNumber = '';
+      this.currentSubscribeId = "";
+      this.currentTicketNumber = "";
     },
 
     // 取消预约
@@ -310,7 +317,9 @@ export default {
         success: async (res) => {
           if (res.confirm) {
             try {
-              const response = await cancelAppointment(item.subscribeId || item.id);
+              const response = await cancelAppointment(
+                item.subscribeId || item.id,
+              );
 
               if (response.code === 200) {
                 uni.showToast({
@@ -348,18 +357,16 @@ export default {
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
-  background: #faf8f3;
 }
 
 // 标签页容器
 .tab-container {
-  width: 650rpx;
+  width: 750rpx;
   margin-top: 24rpx;
   display: flex;
   background: #fff;
-  border-radius: 16rpx;
+
   padding: 8rpx;
-  border: 2rpx solid #c7a26d;
 }
 
 .tab-item {
@@ -415,7 +422,7 @@ export default {
   flex: 1;
   font-size: 36rpx;
   font-weight: 600;
-  color: #695347;
+  color: $text-font-color-1;
   line-height: 1.4;
 }
 
@@ -425,7 +432,7 @@ export default {
   margin-left: 20rpx;
 
   &.status-pending {
-    background: #ff9f43; // 待核销 - 橙色
+    background: #fef3e0; // 待核销 - 橙色
   }
 
   &.status-verified {
@@ -433,7 +440,7 @@ export default {
   }
 
   &.status-canceled {
-    background: #95a5a6; // 取消预约 - 灰色
+    background: #000000; // 取消预约 - 灰色
   }
 
   &.status-default {
@@ -443,7 +450,7 @@ export default {
 
 .status-text {
   font-size: 24rpx;
-  color: #fff;
+  color: #c7a26d;
   font-weight: 400;
 }
 
@@ -458,14 +465,16 @@ export default {
   margin-bottom: 20rpx;
 
   &:last-child {
+    padding-bottom: 24rpx;
     margin-bottom: 0;
+    border-bottom: #d8d8d8 solid 1px;
   }
 }
 
 .detail-label {
   width: 160rpx;
   font-size: 28rpx;
-  color: #8b7355;
+  color: #695347;
   font-weight: 400;
   flex-shrink: 0;
 }
@@ -473,20 +482,22 @@ export default {
 .detail-value {
   flex: 1;
   font-size: 28rpx;
-  color: #695347;
+  color: $text-font-color-1;
   font-weight: 400;
   line-height: 1.4;
+  text-align: right;
 }
 
 // 操作按钮
 .card-actions {
   display: flex;
   gap: 20rpx;
+  justify-content: right;
 }
 
 .action-btn {
-  flex: 1;
-  height: 80rpx;
+  height: 70rpx;
+  width: 200rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -507,11 +518,11 @@ export default {
   }
 
   &.secondary {
-    background: #f8f4f0;
-    border: 2rpx solid #c7a26d;
+    border: 2rpx solid #d8d8d8;
 
     .btn-text {
-      color: #c7a26d;
+      color: #3d3d3d;
+      font-weight: 400;
     }
 
     &:active {