duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine ui styles across multiple components

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/home/components/DrawerSection/components/MineSetting/index.vue
View File

@@ -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>

2
src/pages/home/components/GeneratorPhotoComponent/index.vue
View File

@@ -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>

2
src/pages/home/components/QuickBookingCalender/index.vue
View File

@@ -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]"

27
src/pages/order/order/components/FooterSection/index.vue
View File

@@ -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>