From 29cb6ecbb93e92326eb5c2afb5aed944c3f1b79b Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 21:39:21 +0800
Subject: [PATCH] style: refine ui styles across multiple components

- update padding, shadow and border radius for QuickBookingCalender
- adjust badge blur and rounded style for GeneratorPhotoComponent
- refactor FooterSection to use inline tailwind classes and remove redundant scoped styles
- convert rpx units to px for MineSetting component styling
---
 .../components/MineSetting/index.vue          | 17 +++++-------
 .../GeneratorPhotoComponent/index.vue         |  2 +-
 .../components/QuickBookingCalender/index.vue |  2 +-
 .../order/components/FooterSection/index.vue  | 27 ++++---------------
 4 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
index be0dc89..030d0ee 100644
--- a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -1,29 +1,26 @@
 <template>
   <div class="p-[12px] bg-[#f6f6f6] min-h-screen">
     <!-- 顶部用户信息 -->
-    <div class="bg-white rounded-[12rpx] pl-[24rpx] mb-[20rpx]">
-      <div
-        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+    <div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
+      <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">头像 </span>
         <!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
         <uni-icons type="contact" size="40" color="#ccc"></uni-icons>
       </div>
-      <div
-        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+      <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">昵称</span>
         <span class="text-[14px] text-[#666]">{{ userInfo.nickname }}</span>
       </div>
-      <div
-        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+      <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">手机号</span>
         <span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
       </div>
     </div>
 
     <!-- 中间功能入口（循环渲染） -->
-    <div class="bg-white rounded-[12rpx] pl-[24rpx] mb-[20rpx]">
+    <div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
       <div v-for="(item, index) in menuList" :key="index"
-        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0"
+        class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0"
         @click="handleMenuClick(item)">
         <span class="text-[14px] text-[#333]">{{ item.label }}</span>
         <uni-icons type="right" size="14" color="#ccc"></uni-icons>
@@ -31,7 +28,7 @@
     </div>
 
     <!-- 底部退出按钮 -->
-    <span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[8rpx] border-none"
+    <span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[4px] border-none"
       @click="handleLogout">退出登录</span>
   </div>
 </template>
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 20cc237..b23c90f 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -10,7 +10,7 @@
 
         <!-- 左上角标签 -->
         <div
-          class="absolute top-[20px] left-[20px] flex items-center px-[8px] py-[4px] rounded-[999rpx] [backdrop-filter:blur(6rpx)] bg-white/80 [box-shadow:inset_0_1px_2px_0_rgba(255,255,255,0.46)]">
+          class="absolute top-[20px] left-[20px] flex items-center px-[8px] py-[4px] rounded-full [backdrop-filter:blur(3px)] bg-white/80 [box-shadow:inset_0_1px_2px_0_rgba(255,255,255,0.46)]">
           <div class="inline-block w-[15px] h-[15px] rounded-full bg-[#0ccd58] mr-2"></div>
           <span class="text-xs text-[#0ccd58] font-semibold">{{ props.toolCall.componentNameParams.superscript }}</span>
         </div>
diff --git a/src/pages/home/components/QuickBookingCalender/index.vue b/src/pages/home/components/QuickBookingCalender/index.vue
index 7ac7a5c..607a6ae 100644
--- a/src/pages/home/components/QuickBookingCalender/index.vue
+++ b/src/pages/home/components/QuickBookingCalender/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-[#8cecff]/[0.24] py-[8rpx] rounded-[16rpx] my-[12px]_mt-[12px]_mb-[6px] min-w-[325px] shadow-[0_4rpx_8rpx_rgba(0,0,0,0.1)]">
+    class="bg-[#8cecff]/[0.24] py-[4px] rounded-[8px] my-[12px]_mt-[12px]_mb-[6px] min-w-[325px] shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
     <div class="flex">
       <div v-for="(item, index) in dates" :key="index"
         class="flex-1 flex flex-col items-center justify-center py-[6px] rounded-[8px]"
diff --git a/src/pages/order/order/components/FooterSection/index.vue b/src/pages/order/order/components/FooterSection/index.vue
index 19aa4c0..38eaab8 100644
--- a/src/pages/order/order/components/FooterSection/index.vue
+++ b/src/pages/order/order/components/FooterSection/index.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="footer bg-white  flex items-center justify-between p-[12px]">
+  <div class="bg-white flex items-center justify-between pt-[12px] pr-[12px] pb-[44px] pl-[12px] rounded-t-[12px]">
     <button v-if="['1', '2'].includes(statusCode)"
-      class="left border-none  bg-white rounded-[10px] flex items-center justify-center text-[14px] font-medium text-ink-600 mr-[12px]"
+      class="bg-white rounded-[10px] flex items-center justify-center text-[14px] font-medium text-ink-600 mr-[12px] h-[48px] w-[104px] border border-[#e5e8ee]"
       @click="emit('refund', orderData)">
       申请退款
     </button>
     <button :class="[
-      'right border-none rounded-[10px] flex flex-1 items-center justify-center text-[14px] font-medium bg-[#f0f8f3]',
+      'border-none rounded-[10px] flex flex-1 items-center justify-center text-[14px] font-medium bg-[#f0f8f3] h-[48px]',
       {
         'text-[#ff3d60]': statusCode === '0',
         'text-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
       },
     ]" @click="handleButtonClick(orderData)">
-      {{ buttonspan }}
+      {{ buttonText }}
     </button>
   </div>
 </template>
@@ -40,7 +40,7 @@ const props = defineProps({
 const statusCode = computed(() => props.orderData.orderStatus);
 
 // 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
-const buttonspan = computed(() => {
+const buttonText = computed(() => {
   switch (statusCode.value) {
     case "0": // 待支付状态
       return "立即支付";
@@ -137,20 +137,3 @@ const handleButtonClick = DebounceUtils.createDebounce(async (orderData) => {
   }
 }, 1000);
 </script>
-
-<style lang="scss" scoped>
-.footer {
-  border-radius: 12px 12px 0 0;
-  padding-bottom: 88rpx;
-}
-
-.left,
-.right {
-  height: 48px;
-}
-
-.left {
-  border: 1px solid #e5e8ee;
-  width: 104px;
-}
-</style>