feat: 更新页面样式

master
xjs 2025-04-29 18:01:23 +08:00
parent edfc853931
commit 1270723821
1 changed files with 113 additions and 111 deletions

View File

@ -52,123 +52,125 @@ export default function AntechamberWishList() {
}; };
return ( return (
<div className="w-full p-[15px]"> <>
<div className="px-[12px] pt-[14px] pb-[16px] rounded-[13px] bg-[#fff]"> {wishList.length > 0 ? (
<div className="flex items-center justify-between"> <div className="w-full p-[15px]">
<div className="w-[96px] h-[16px] object-contain"> <div className="px-[12px] pt-[14px] pb-[16px] rounded-[13px] bg-[#fff]">
<img src="/icons/wish-list.png" alt="wish-list" /> <div className="flex items-center justify-between">
</div> <div className="w-[96px] h-[16px] object-contain">
<Drawer> <img src="/icons/wish-list.png" alt="wish-list" />
<DrawerTrigger className="">
<div className="flex items-center text-[13px] text-[#1580FF]">
<img
src="/icons/arrow.png"
alt="arrow"
className="w-[16px] h-[16px] object-contain ml-[2px]"
/>
</div> </div>
</DrawerTrigger> <Drawer>
<DrawerContent> <DrawerTrigger className="">
<DrawerHeader className="p-0"> <div className="flex items-center text-[13px] text-[#1580FF]">
<DrawerTitle>
<div className="py-[13px] relative bg-white rounded-[12px]"> <img
<span className="text-[16px] text-[#333] font-[500]"> src="/icons/arrow.png"
alt="arrow"
</span> className="w-[16px] h-[16px] object-contain ml-[2px]"
<DrawerClose> />
<X className="absolute right-[13px] top-[10px] text-[#000] text-[16px]" />
</DrawerClose>
</div> </div>
</DrawerTitle> </DrawerTrigger>
<div className="grid gap-[12px] px-[15px] pb-[15px] bg-[#F4F6FA] pt-[16px]"> <DrawerContent>
{wishList.map((item: any) => ( <DrawerHeader className="p-0">
<div className="w-full bg-white" key={item.vId}> <DrawerTitle>
<div className="py-[10px] pl-[16px] pr-[13px] rounded-[8px] flex items-center"> <div className="py-[13px] relative bg-white rounded-[12px]">
<div className="flex flex-col"> <span className="text-[16px] text-[#333] font-[500]">
<div className="flex items-center mb-[8px]">
<span className="text-[15px] font-[600] text-[#303030] mr-[5px]"> </span>
{item.tableName} <DrawerClose>
</span> <X className="absolute right-[13px] top-[10px] text-[#000] text-[16px]" />
<div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]"> </DrawerClose>
{item.type}
</div>
<div></div>
</div>
<div className="text-[#303030] text-[11px] flex items-center">
<span>
{item.locationName}·{item.score}
</span>
<span className="ml-[8px]">
{item.subjectClaim.split(",").join("/")}
</span>
</div>
</div>
<div className="ml-auto">
<div className="text-[11px] text-[636363] font-[600] mb-[8px]">
{item.createTime}
</div>
<div
className="flex items-center justify-end text-[13px] text-[#1580FF]"
onClick={() => handleNavigate(item)}
>
<img
src="/icons/rightBlue.png"
alt=""
className="ml-[2px]"
/>
</div>
</div>
</div> </div>
</DrawerTitle>
<div className="grid gap-[12px] px-[15px] pb-[15px] bg-[#F4F6FA] pt-[16px]">
{wishList.map((item: any) => (
<div className="w-full bg-white" key={item.vId}>
<div className="py-[10px] pl-[16px] pr-[13px] rounded-[8px] flex items-center">
<div className="flex flex-col">
<div className="flex items-center mb-[8px]">
<span className="text-[15px] font-[600] text-[#303030] mr-[5px]">
{item.tableName}
</span>
<div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]">
{item.type}
</div>
<div></div>
</div>
<div className="text-[#303030] text-[11px] flex items-center">
<span>
{item.locationName}·{item.score}
</span>
<span className="ml-[8px]">
{item.subjectClaim.split(",").join("/")}
</span>
</div>
</div>
<div className="ml-auto">
<div className="text-[11px] text-[636363] font-[600] mb-[8px]">
{item.createTime}
</div>
<div
className="flex items-center justify-end text-[13px] text-[#1580FF]"
onClick={() => handleNavigate(item)}
>
<img
src="/icons/rightBlue.png"
alt=""
className="ml-[2px]"
/>
</div>
</div>
</div>
</div>
))}
</div> </div>
))} </DrawerHeader>
</div> <DrawerDescription>
</DrawerHeader> <></>
<DrawerDescription> </DrawerDescription>
<></> </DrawerContent>
</DrawerDescription> </Drawer>
</DrawerContent>
</Drawer>
</div>
{wishList.length > 0 ? (
<div className="p-[7px] rounded-[8px] bg-[#F4F6FA] flex items-center mt-[12px]">
<img
src="/icons/wish-list-icon.png"
alt="icon"
className="w-[46px] h-[46px] object-contain mr-[8px]"
/>
<div className="flex flex-col">
<div className="flex items-center mb-[5px]">
<span className="text-[15px] font-[600] text-[#303030] mr-[5px]">
{wishList[0].tableName}
</span>
<div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]">
{wishList[0].type}
</div>
</div>
<div className="text-[#303030] text-[11px] flex items-center">
<span>
{wishList[0].locationName}·{wishList[0].score}
</span>
<span className="ml-[8px]">
{wishList[0].subjectClaim.split(",").join("/")}
</span>
</div>
</div> </div>
<div
className="flex items-center text-[13px] text-[#1580FF] ml-auto" <div className="p-[7px] rounded-[8px] bg-[#F4F6FA] flex items-center mt-[12px]">
onClick={() => handleNavigate(wishList[0])} <img
> src="/icons/wish-list-icon.png"
alt="icon"
<img src="/icons/rightBlue.png" alt="" className="ml-[2px]" /> className="w-[46px] h-[46px] object-contain mr-[8px]"
/>
<div className="flex flex-col">
<div className="flex items-center mb-[5px]">
<span className="text-[15px] font-[600] text-[#303030] mr-[5px]">
{wishList[0].tableName}
</span>
<div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]">
{wishList[0].type}
</div>
</div>
<div className="text-[#303030] text-[11px] flex items-center">
<span>
{wishList[0].locationName}·{wishList[0].score}
</span>
<span className="ml-[8px]">
{wishList[0].subjectClaim.split(",").join("/")}
</span>
</div>
</div>
<div
className="flex items-center text-[13px] text-[#1580FF] ml-auto"
onClick={() => handleNavigate(wishList[0])}
>
<img src="/icons/rightBlue.png" alt="" className="ml-[2px]" />
</div>
</div> </div>
</div> </div>
) : ( </div>
<></> ) : (
)} <></>
</div> )}
</div> </>
); );
} }