二维码样式修改1.0,我的预约页面修改

components/qrcode-modal/qrcode-modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <view v-if="visible" class="qrcode-modal-overlay" @click="handleOverlayClick">
+  <view v-if="visible" class="qrcode-modal-overlay" @click="handleClose">
     <view class="qrcode-modal" @click.stop>
       <view class="modal-content">
         <view class="qrcode-container">
@@ -16,6 +16,7 @@
         </view>
       </view>
     </view>
+    <view class="close" @click="handleClose">X</view>
   </view>
 </template>
 
@@ -42,10 +43,7 @@ export default {
       type: String,
       default: "",
     },
-    title: {
+
-      type: String,
-      default: "核销验证码",
-    },
     description: {
       type: String,
       default: "此二维码 可直接检票",
@@ -63,10 +61,6 @@ export default {
   },
 
   methods: {
-    handleOverlayClick() {
-      this.handleClose();
-    },
-
     handleClose() {
       this.$emit("close");
     },
@@ -75,6 +69,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.close {
+  margin-top: 30rpx;
+  width: 80rpx;
+  height: 80rpx;
+  font-size: 60rpx;
+  line-height: 80rpx;
+  text-align: center;
+  color: #fff;
+  border-radius: 999rpx;
+  border: white solid 1px;
+}
+
 .qrcode-modal-overlay {
   position: fixed;
   top: 0;
@@ -86,6 +92,8 @@ export default {
   align-items: center;
   justify-content: center;
   z-index: 9999;
+
+  flex-direction: column;
 }
 
 .qrcode-modal {

pages/personalCenter/myAppointment.vue

@@ -60,10 +60,7 @@
         <!-- 操作按钮 -->
         <view class="card-actions">
           <!-- 只有待核销状态才显示出示码券按钮 -->
-          <view
+          <view v-if="Number(item.state) === 1" class="action-btn"></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"
@@ -86,14 +83,14 @@
             <text class="btn-text">取消预约</text>
           </view>
           <!-- 已核销状态显示完成提示 -->
-          <view v-if="Number(item.state) === 2" class="action-btn completed">
+          <!--          <view v-if="Number(item.state) === 2" class="action-btn completed">-->
-            <image
+          <!--            <image-->
-              class="btn-icon"
+          <!--              class="btn-icon"-->
-              mode="aspectFit"
+          <!--              mode="aspectFit"-->
-              src="https://api.ccttiot.com/image-1755237410755.png"
+          <!--              src="https://api.ccttiot.com/image-1755237410755.png"-->
-            />
+          <!--            />-->
-            <text class="btn-text">已完成</text>
+          <!--            <text class="btn-text">已完成</text>-->
-          </view>
+          <!--          </view>-->
           <!--          &lt;!&ndash; 取消预约状态显示已取消提示 &ndash;&gt;-->
           <!--          <view v-if="Number(item.state) === 3" class="action-btn canceled">-->
           <!--            <image-->
@@ -366,34 +363,39 @@ export default {
   display: flex;
   background: #fff;
 
-  padding: 8rpx;
+  &.first-child {
+    border-right: 2px solid #c7a26d;
+  }
 }
 
 .tab-item {
   flex: 1;
-  height: 80rpx;
+  height: 116rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12rpx;
   transition: all 0.3s ease;
 
-  &.active {
-    background: #c7a26d;
-
-    .tab-text {
-      color: #fff;
-      font-weight: 500;
-    }
-  }
-}
-
   .tab-text {
     font-size: 32rpx;
-  color: #695347;
+    color: #808080;
     font-weight: 400;
   }
 
+  &.active {
+    //background: #c7a26d;
+
+    .tab-text {
+      color: #c7a26d;
+      font-weight: 500;
+      height: 116rpx;
+      line-height: 116rpx;
+      border-bottom: 2px solid #c7a26d;
+    }
+  }
+}
+
 // 预约列表
 .appointment-list {
   width: 650rpx;
@@ -434,18 +436,6 @@ export default {
   &.status-pending {
     background: #fef3e0; // 待核销 - 橙色
   }
-
-  &.status-verified {
-    background: #00b894; // 已核销 - 绿色
-  }
-
-  &.status-canceled {
-    background: #000000; // 取消预约 - 灰色
-  }
-
-  &.status-default {
-    background: #74b9ff; // 默认 - 蓝色
-  }
 }
 
 .status-text {