refactor: standardize spacing and update RefundPopup component

- standardize margin spacing across components with explicit pixel values
- replace legacy uni-popup and icons with van-ui equivalents in RefundPopup
- update font weight class to use semantic name in date range selector

src/components/CreateServiceOrder/index.vue

@@ -44,10 +44,10 @@
 
       <div v-else class=" card-content flex items-center p-[12px]">
         <div class=" left flex-1 pr-20">
-          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
             所在位置：{{ roomId }}
           </div>
-          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
             联系方式: {{ contactPhone }}
           </div>
           <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">

src/components/Feedback/index.vue

@@ -25,7 +25,7 @@
       </div>
 
       <div v-else class=" left flex-1 p-[12px]">
-        <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
           联系方式: {{ contactPhone }}
         </div>
         <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">

src/components/RefundPopup/index.vue

@@ -1,35 +1,34 @@
 <template>
-  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
+  <van-popup ref="popupRef" position="bottom" v-model:show="show">
-    <div class="refund-popup bg-[#f5f7fa] ">
+    <div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
       <div class="flex items-center justify-between pt-[12px] pb-[12px] relative">
         <div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
           取消政策
         </div>
         <!-- 关闭按钮 -->
-        <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
+        <van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
       </div>
       <!-- 内容区域 -->
       <div class="rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
-        <div class="flex items-center mb-8">
+        <div class="flex items-center mb-[8px]">
-          <uni-icons fontFamily="znicons" size="20" color="#333">
+          <zn-icon name="zn-refund" size="20" color="#333"></zn-icon>
-            {{ iconsMap["zn-refund"] }}
+          <span class="text-[14px] font-semibold text-[#171717] ml-[8px]">
-          </uni-icons>
-          <span class="text-[14px] font-600 text-[#171717] ml-[8px]">
             {{ refundTitle }}
           </span>
         </div>
-        <div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
+        <div class="text-[14px] text-ink-600 leading-[16px] mb-[4px]"
-          :key="index">
+          v-for="(item, index) in commodityPurchaseInstruction" :key="index">
           {{ item }}
         </div>
       </div>
     </div>
-  </uni-popup>
+  </van-popup>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, defineExpose } from "vue";
 import { iconsMap } from "@/static/fonts/znicons";
+import ZnIcon from '@/components/ZnIcon/index.vue'
 
 // Props定义
 const props = defineProps({
@@ -50,6 +49,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 弹窗引用
 const popupRef = ref(null);
+const show = ref(false)
 
 // 获取退款模板
 const refundTitle = computed(() => {
@@ -77,29 +77,12 @@ const commodityPurchaseInstruction = computed(() => {
 });
 
 // 方法定义
-const show = () => popupRef.value && popupRef.value.open();
+const open = () => show.value = true;
 
-const hide = () => popupRef.value && popupRef.value.close();
+const close = () => show.value = false;
 
-// 监听modelValue变化
+defineExpose({
-watch(
+  open,
-  () => props.modelValue,
+  close,
-  (newVal) => {
+})
-    if (newVal) {
-      show();
-    } else {
-      hide();
-    }
-  },
-  { immediate: true },
-);
-
-const handleClose = () => {
-  emit("update:modelValue", false);
-  emit("close");
-};
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

src/components/RefundPopup/styles/index.scss

@@ -1,9 +0,0 @@
-.refund-popup {
-  border-radius: 15px 15px 0 0;
-  padding-bottom: 40px;
-}
-
-.close {
-  top: 14px;
-  right: 12px;
-}

src/components/UseDateRange/index.vue

@@ -10,7 +10,7 @@
             <div class="date-item" :class="{ selected: isSameDate(selectedDate, item.date) }"
               @click="onDateClick(item)">
               <div class="label text-[12px]">{{ item.weekDesc }}</div>
-              <div class="md text-[16px] font-600">
+              <div class="md text-[16px] font-semibold">
                 {{ formatMD(item.date) }}
               </div>
               <div class="status text-[12px]">{{ item.canOrder }}</div>

src/pages/booking/index.vue

@@ -23,7 +23,7 @@
           </div>
 
           <!-- 权益部分 -->
-          <div class="flex items-center mb-8">
+          <div class="flex items-center mb-[8px]">
             <span
               class="bg-[#f7f7f7]  rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
               v-for="(item, index) in orderData.commodityFacilityList" :key="index">

src/pages/home/components/AnswerComponent/index.vue

@@ -4,7 +4,7 @@
     <div class="w-full"></div>
     <div class="flex flex-col px-[16px] pt-16 pb-[12px] ">
       <div v-if="tag" class="long-answer-tag">{{ tag }}</div>
-      <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
+      <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">
         <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
         <span class="text-[16px] font-medium span-color-900 ml-6"> {{ title }}</span>
       </div>

src/pages/order/order/components/GoodsInfo/index.vue

@@ -21,7 +21,7 @@
   </div>
 
   <div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
-    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-8">
+    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-[8px]">
       {{ orderData.commodityName }}
     </div>
 

src/pages/order/order/components/OrderInfo/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bg-white  rounded-[10px] p-[12px]">
-    <div class="flex mb-8 text-[12px]">
+    <div class="flex mb-[8px] text-[12px]">
       <span class="w-60 text-ink-400">订单编号</span>
       <span class="text-ink-600">{{ orderData.orderId }}</span>
     </div>
-    <div class="flex mb-8 text-[12px]">
+    <div class="flex mb-[8px] text-[12px]">
       <span class="w-60 text-ink-400">下单时间</span>
       <span class="text-ink-600">{{ orderData.createTime }}</span>
     </div>

src/pages/order/order/components/UserInfo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white  rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
     <div v-for="(item, index) in consumerList" :key="index">
-      <div class="flex mb-8 text-[12px]">
+      <div class="flex mb-[8px] text-[12px]">
         <span class="w-60 text-ink-400">住客姓名</span>
         <span class="text-ink-600">{{ item.visitorName }}</span>
       </div>

src/pages/quick/components/Card/index.vue

@@ -5,7 +5,7 @@
       <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </div>
-      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-4 truncate">
+      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-[4px] truncate">
         {{ item.commodityFacility.join(" ") }}
       </div>
       <div class="text-[12px] leading-[18px] text-[#43669A]">