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