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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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]"
|
||||||
|
|||||||
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user