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
This commit is contained in:
duanshuwen
2026-05-29 21:39:21 +08:00
parent 71aa343efb
commit 29cb6ecbb9
4 changed files with 14 additions and 34 deletions

View File

@@ -1,29 +1,26 @@
<template> <template>
<div class="p-[12px] bg-[#f6f6f6] min-h-screen"> <div class="p-[12px] bg-[#f6f6f6] min-h-screen">
<!-- 顶部用户信息 --> <!-- 顶部用户信息 -->
<div class="bg-white rounded-[12rpx] pl-[24rpx] mb-[20rpx]"> <div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
<div <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">头像 </span> <span class="text-[14px] text-[#333]">头像 </span>
<!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> --> <!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
<uni-icons type="contact" size="40" color="#ccc"></uni-icons> <uni-icons type="contact" size="40" color="#ccc"></uni-icons>
</div> </div>
<div <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">昵称</span> <span class="text-[14px] text-[#333]">昵称</span>
<span class="text-[14px] text-[#666]">{{ userInfo.nickname }}</span> <span class="text-[14px] text-[#666]">{{ userInfo.nickname }}</span>
</div> </div>
<div <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
<span class="text-[14px] text-[#333]">手机号</span> <span class="text-[14px] text-[#333]">手机号</span>
<span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span> <span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
</div> </div>
</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" <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)"> @click="handleMenuClick(item)">
<span class="text-[14px] text-[#333]">{{ item.label }}</span> <span class="text-[14px] text-[#333]">{{ item.label }}</span>
<uni-icons type="right" size="14" color="#ccc"></uni-icons> <uni-icons type="right" size="14" color="#ccc"></uni-icons>
@@ -31,7 +28,7 @@
</div> </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> @click="handleLogout">退出登录</span>
</div> </div>
</template> </template>

View File

@@ -10,7 +10,7 @@
<!-- 左上角标签 --> <!-- 左上角标签 -->
<div <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> <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> <span class="text-xs text-[#0ccd58] font-semibold">{{ props.toolCall.componentNameParams.superscript }}</span>
</div> </div>

View File

@@ -1,6 +1,6 @@
<template> <template>
<div <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 class="flex">
<div v-for="(item, index) in dates" :key="index" <div v-for="(item, index) in dates" :key="index"
class="flex-1 flex flex-col items-center justify-center py-[6px] rounded-[8px]" class="flex-1 flex flex-col items-center justify-center py-[6px] rounded-[8px]"

View File

@@ -1,18 +1,18 @@
<template> <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)" <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)"> @click="emit('refund', orderData)">
申请退款 申请退款
</button> </button>
<button :class="[ <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-[#ff3d60]': statusCode === '0',
'text-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode), 'text-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
}, },
]" @click="handleButtonClick(orderData)"> ]" @click="handleButtonClick(orderData)">
{{ buttonspan }} {{ buttonText }}
</button> </button>
</div> </div>
</template> </template>
@@ -40,7 +40,7 @@ const props = defineProps({
const statusCode = computed(() => props.orderData.orderStatus); const statusCode = computed(() => props.orderData.orderStatus);
// 按钮文案逻辑,订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成 // 按钮文案逻辑,订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
const buttonspan = computed(() => { const buttonText = computed(() => {
switch (statusCode.value) { switch (statusCode.value) {
case "0": // 待支付状态 case "0": // 待支付状态
return "立即支付"; return "立即支付";
@@ -137,20 +137,3 @@ const handleButtonClick = DebounceUtils.createDebounce(async (orderData) => {
} }
}, 1000); }, 1000);
</script> </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>