Update detail page routing and swiper implementation

This commit is contained in:
wangqiao
2025-08-26 21:28:11 +08:00
parent bfa0f5e6bd
commit 84a7263f36
12 changed files with 469 additions and 435 deletions

View File

@ -1,33 +1,33 @@
<template>
<div class="mb-20px w-100% cursor-pointer overflow-hidden border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF]" @click="handleClick">
<div class="mb-[20px] w-[100%] cursor-pointer overflow-hidden border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF]" @click="handleClick">
<div>
<el-image :src="props.itemInfo.iconUrl" class="h-216px w-100%" fit="cover"></el-image>
<el-image :src="props.itemInfo.iconUrl" class="h-[216px] w-[100%]" fit="cover"></el-image>
</div>
<div class="box-border p-16px">
<div class="box-border p-[16px]">
<div class="flex items-center justify-between">
<div>
<div class="title mr-38px text-16px text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
<div class="mt-8px text-15px text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
<div class="title mr-[38px] text-[16px] text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
<div class="mt-[8px] text-[15px] text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
</div>
<div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-40px w-40px rd-50%" /></div>
<div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-[40px] w-[40px] rd-[50%]" /></div>
</div>
<div class="mt-24px flex items-center justify-between">
<div class="flex items-center justify-between text-14px text-[#666666] font-normal">
<div class="mr-9px flex items-center">
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-2px h-17px" />
<span class="color-#666">{{ props.itemInfo.previewPoint }}</span>
<div class="mt-[24px] flex items-center justify-between">
<div class="flex items-center justify-between text-[14px] text-[#666666] font-normal">
<div class="mr-[9px] flex items-center">
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
<span class="color-[#666]">{{ props.itemInfo.previewPoint }}</span>
</div>
<div class="mr-9px flex items-center">
<img src="~/assets/images/add.png" alt="" srcset="" class="mr-2px h-22px" />
<span class="color-#666">{{ props.itemInfo.hotPoint }}</span>
<div class="mr-[9px] flex items-center">
<img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
<span class="color-[#666]">{{ props.itemInfo.hotPoint }}</span>
</div>
<div class="flex items-center">
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px" />
<span class="color-#666">{{ props.itemInfo.commentsPoint }}</span>
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
<span class="color-[#666]">{{ props.itemInfo.commentsPoint }}</span>
</div>
</div>
<div class="h-30px w-90px cursor-pointer border border-[#1A65FF] rounded-15px border-solid text-center line-height-30px"
><span class="text-14px text-[#1A65FF] font-normal">查看详情</span></div
<div class="h-[30px] w-[90px] cursor-pointer border border-[#1A65FF] rounded-[15px] border-solid text-center line-height-[30px]"
><span class="text-[14px] text-[#1A65FF] font-normal">查看详情</span></div
>
</div>
</div>
@ -50,7 +50,7 @@
console.log(props.itemInfo)
// 跳转到下载详情页 并且是单独开标签
window.open(`/down-drawe-detail?id=${props.itemInfo.id}`, '_blank') // 修改为在新窗口打开
navigateTo(`/down-drawe-detail/${props.itemInfo.id}`) // 修改为在新窗口打开
}
</script>