Browse Source

style(index): 调整Banner组件样式

- 为轮播图容器添加背景白色类名
- 调整右侧图片区域高度从110px到94px
- 修改商品标题文字上下边距为my-2- 移除右侧图片区域的圆角和阴影样式
- 调整下层图片区域上边距从mt-3到mt-2
master
科技小王子 6 days ago
parent
commit
64b97042cb
  1. 12
      src/pages/index/Banner.tsx

12
src/pages/index/Banner.tsx

@ -100,7 +100,7 @@ const MyPage = () => {
}
return (
<View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
<View className="flex p-2 justify-between bg-white" style={{height: `${carouselHeight}px`}}>
{/* 左侧轮播图区域 */}
<View
style={{width: '50%', height: '100%'}}
@ -143,10 +143,10 @@ const MyPage = () => {
{/* 右侧上下图片区域 - 从API获取数据 */}
<View className="flex flex-col" style={{width: '50%', height: '100%'}}>
{/* 上层图片 - 使用今日热卖素材 */}
<View className={'ml-2 bg-white rounded-lg shadow-sm'}>
<View className={'ml-2 bg-white'}>
<View className={'px-3 my-2 font-bold text-sm'}></View>
<View className={'px-3 flex justify-between'} style={{
height: '110px'
height: '94px'
}}>
{
hotToday?.imageList?.map(item => (
@ -162,15 +162,15 @@ const MyPage = () => {
}}
onClick={() => navTo(item.path)}
/>
<View className={'text-xs py-2 text-orange-600 whitespace-nowrap text-center'}>{item.title || '到手价¥9.9'}</View>
<View className={'text-xs my-2 text-orange-600 whitespace-nowrap text-center'}>{item.title || '到手价¥9.9'}</View>
</View>
))
}
</View>
</View>
{/* 下层图片 - 使用社区拼团素材 */}
<View className={'ml-2 bg-white rounded-lg mt-3 shadow-sm'}>
{/* 下层图片 - 使用社区拼团素材 rounded-lg shadow-sm */}
<View className={'ml-2 bg-white mt-2'}>
<View className={'px-3 my-2 font-bold text-sm'}>{item?.overview || item?.categoryName || '推荐文章'}</View>
<View className={'rounded-lg px-3 pb-3'}>
<Image

Loading…
Cancel
Save