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

@ -5,20 +5,20 @@
<div class="profile-header">
<div class="profile-container">
<div class="avatar-container">
<el-image :src="userForm.avatar" alt="用户头像" class="avatar mt-4px" fit="cover" />
<el-image :src="userForm.avatar" alt="用户头像" class="avatar mt-[4px]" fit="cover" />
</div>
<div class="user-info">
<h2 class="username">{{ userForm.nickname }}</h2>
<!-- <div class="education">手机号码{{ userForm.phone }}</div> -->
<div class="stats">
技能标签<el-tag v-for="label in userForm.labels" :key="label" type="primary" class="mr-10px" size="small">{{ label }}</el-tag>
技能标签<el-tag v-for="label in userForm.labels" :key="label" type="primary" class="mr-[10px]" size="small">{{ label }}</el-tag>
</div>
<div class="description">{{ userForm.description }}</div>
</div>
</div>
</div>
<div class="items-flex-start mx-auto mt-20px max-w-[1200px] flex justify-center">
<div class="items-flex-start mx-auto mt-[20px] max-w-[1200px] flex justify-center">
<div class="flex-1">
<!-- 导航标签 -->
<div class="nav-tabs">
@ -30,27 +30,27 @@
</div>
<!-- 作品展示区 -->
<div class="content w-800px">
<el-table v-loading="result.loading" :data="result.tableList" style="width: 100%" class="mt-14px">
<div class="content w-[800px]">
<el-table v-loading="result.loading" :data="result.tableList" style="width: 100%" class="mt-[14px]">
<el-table-column prop="date" label="文件信息">
<template #default="scope">
<div class="flex items-center">
<el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-91px w-181px rd-4px" />
<div class="ml-17px">
<div class="text-16px text-[#333333] font-normal">{{ scope.row.title }}</div>
<div class="text-14px text-[#666] font-normal my-10px!">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-[91px] w-[181px] rd-[4px]" />
<div class="ml-[17px]">
<div class="text-[16px] text-[#333333] font-normal">{{ scope.row.title }}</div>
<div class="text-[14px] text-[#666] font-normal my-[10px]!">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="flex items-center">
<div class="flex items-center">
<img src="~/assets/images/look.png" alt="" srcset="" class="h-17px" />
<span class="ml-4px">{{ scope.row.previewPoint }}</span>
<img src="~/assets/images/look.png" alt="" srcset="" class="h-[17px]" />
<span class="ml-[4px]">{{ scope.row.previewPoint }}</span>
</div>
<div class="ml-13px flex items-center">
<img src="~/assets/images/add.png" alt="" srcset="" class="h-23px" />
<span class="ml-4px">{{ scope.row.hotPoint }}</span>
<div class="ml-[13px] flex items-center">
<img src="~/assets/images/add.png" alt="" srcset="" class="h-[23px]" />
<span class="ml-[4px]">{{ scope.row.hotPoint }}</span>
</div>
<div class="ml-13px flex items-center">
<img src="~/assets/images/chat.png" alt="" srcset="" class="h-17px" />
<span class="ml-4px">{{ scope.row.commentsPoint }}</span>
<div class="ml-[13px] flex items-center">
<img src="~/assets/images/chat.png" alt="" srcset="" class="h-[17px]" />
<span class="ml-[4px]">{{ scope.row.commentsPoint }}</span>
</div>
</div>
</div>
@ -70,7 +70,7 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="mt-10px flex justify-center">
<div class="mt-[10px] flex justify-center">
<el-pagination
v-model:current-page="query.pageNo"
v-model:page-size="query.pageSize"
@ -91,10 +91,10 @@
<div
v-for="item in mainWork"
:key="item.id"
class="flex cursor-pointer items-center justify-between px-10px py-4px hover:bg-#f5f5f5"
class="flex cursor-pointer items-center justify-between px-[10px] py-[4px] hover:bg-[#f5f5f5]"
@click="handleClickV2(item.id)"
>
<div class="ellipsis text-15px text-[#333333] font-normal">{{ item.title }}发货速度发货速度开发还是看东方航空</div>
<div class="ellipsis text-[15px] text-[#333333] font-normal">{{ item.title }}发货速度发货速度开发还是看东方航空</div>
</div>
</div>
</div>
@ -249,7 +249,7 @@
}
const handleClickV2 = (id: string | number) => {
navigateTo(`/down-drawe-detail?id=${id}`) // 修改为在新窗口打开
navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
}
// 获取最新发布
const mainWork = ref<ProjectDrawMemberRespVO[]>([])