58 lines
2.7 KiB
Vue
58 lines
2.7 KiB
Vue
<!-- 工具箱详情页面 -->
|
|
<template>
|
|
<KlNavTab />
|
|
<div
|
|
class="toolbox-detail w-[1200px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]"
|
|
>
|
|
<div class="w-[100%]">
|
|
<h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">{{ detail?.title }}</h1>
|
|
<div class="flex items-center w-[100%] mt-[30px]">
|
|
<img :src="userStore.ownedUserAvatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
|
|
<div class="flex flex-col items-start w-[100%]">
|
|
<p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.ownedUserName || '用户昵称' }}</p>
|
|
<div class="flex items-center justify-between mt-[8px] w-[100%]">
|
|
<p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">
|
|
{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</p>
|
|
<div class="flex items-center justify-between font-[Microsoft_YaHei] font-normal text-[14px] text-[#666666] leading-[8px]">
|
|
<div class="mr-[9px] flex items-center">
|
|
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
|
|
<span class="color-[#666]">{{ detail?.previewPoint || 0 }}</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]">{{ detail?.hotPoint || 0}}</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
|
|
<span class="color-[#666]">{{ detail?.commentsPoint || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[100%] h-[1px] bg-[#EEEEEE] rounded-[1px] my-[20px]"></div>
|
|
<div class="body">
|
|
<p class="font-[Microsoft_YaHei] font-normal text-[14px] text-[#333333] leading-[26px]">
|
|
{{ detail?.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import dayjs from 'dayjs'
|
|
import { get } from '@/api/toolbox/index'
|
|
import useUserStore from '~/stores/user'
|
|
const userStore = useUserStore()
|
|
const route = useRoute()
|
|
console.log(route.params.id)
|
|
|
|
const { data: detail } = await useAsyncData(`toolbox-detail-${route.params.id}}`, async () => {
|
|
const res = await get({ id: route.params.id as string })
|
|
return res.data
|
|
})
|
|
|
|
console.log(detail.value)
|
|
</script>
|