181 lines
6.8 KiB
Vue
181 lines
6.8 KiB
Vue
<template>
|
|
<KlNavTab active="工具箱" />
|
|
<!-- 搜索 -->
|
|
<KlSearch @search="search"></KlSearch>
|
|
<div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
|
|
<div class="left w-[821px]">
|
|
<img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" />
|
|
<div
|
|
class="box-border border border-t-[0px] border-t-[0px] border-[#EEEEEE] rounded-[12px] border-solid border-t-none bg-[#FFFFFF] px-[28px] py-[17px]"
|
|
style="border-top-left-radius: 0px; border-top-right-radius: 0px"
|
|
>
|
|
<div v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
|
|
<div class="h-[142px] w-[200px] text-center">
|
|
<el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
|
|
</div>
|
|
<div class="ml-[25px] flex-1">
|
|
<div class="text-[16px] text-[#333333] font-normal">{{ item.title }}</div>
|
|
<div class="mt-[8px] text-[14px] text-[#999999] font-normal line-clamp-3">{{ item.description }}</div>
|
|
<div class="mt-[10px] flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex items-center text-[14px] text-[#666666] font-normal">
|
|
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[23px]" />{{ item.previewPoint }}
|
|
</div>
|
|
<div class="ml-[26px] flex items-center text-[14px] text-[#666666] font-normal">
|
|
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[19px]" /> {{ item.commentsPoint }}
|
|
</div>
|
|
<div class="ml-[20px]">
|
|
<div v-for="(v, index) in item.labels" :key="index" class="mr-[10px] inline-block text-[14px] text-[#1A65FF] font-normal">#{{ v }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-[14px] text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 暂无数据 -->
|
|
<div v-if="pageRes?.list.length === 0" class="mt-[10px] flex items-center justify-center">
|
|
<!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
|
|
<el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
|
|
</div>
|
|
<el-pagination
|
|
v-if="pageRes?.list.length"
|
|
v-model:current-page="pageReq.pageNum"
|
|
:page-size="pageReq.pageSize"
|
|
layout="total, prev, pager, next"
|
|
:total="pageRes?.total"
|
|
:page-sizes="[10, 20, 30]"
|
|
class="mt-[20px]"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="right w-[398px]">
|
|
<div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[20px]">
|
|
<div class="flex items-center text-[16px] text-[#333333] font-normal">
|
|
<div class="mr-[14px] h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
|
|
热门排行
|
|
</div>
|
|
<div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
|
|
</div>
|
|
<!-- -->
|
|
<!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
|
|
<div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
|
|
<div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
|
|
标签列表
|
|
</div>
|
|
<div class="flex flex-wrap">
|
|
<div
|
|
v-for="item in 10"
|
|
:key="item"
|
|
class="mb-19px mr-26px box-border border border-[#D7D7D7] rounded-4px border-solid px-8px py-12px text-16px text-[#1A65FF] font-normal"
|
|
># 标签名称1</div
|
|
>
|
|
</div>
|
|
</div> -->
|
|
<!-- -->
|
|
<!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
|
|
<div class="mb-20px flex items-center text-16px text-[#333333] font-normal">
|
|
<div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
|
|
猜你喜欢
|
|
</div>
|
|
<div
|
|
v-for="item in 4"
|
|
:key="item"
|
|
class="mt-16px flex items-center border-b-1px border-b-[#eee] border-b-solid pb-16px text-16px text-[#333333] font-normal"
|
|
>
|
|
<img src="~/assets/images/aucad.png" alt="" srcset="" class="h-68px w-110px" />
|
|
<div class="ml-20px text-16px text-[#333333] font-normal">Stable Diffusion 商业变现与 绘画大模型多场景实战</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import KlNavTab from '~/components/kl-nav-tab/index.vue'
|
|
import { page } from '~/api/toolbox/index.js'
|
|
import type { TpageReq, TpageRes } from '~/api/toolbox/types'
|
|
import { reactive, ref } from 'vue'
|
|
import KlSearch from '~/pages/toolbox/components/search.vue'
|
|
import { getRelationRecommend } from '~/api/drawe-detail/index'
|
|
import type { ProjectDrawPageRespVO } from '~/api/drawe-detail/types'
|
|
import emptyImg from '~/assets/images/empty.png'
|
|
import dayjs from 'dayjs'
|
|
|
|
const pageReq = reactive<TpageReq>({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
title: '',
|
|
})
|
|
|
|
// const pageRes = ref<TpageRes>({
|
|
// list: [],
|
|
// total: 0,
|
|
// })
|
|
|
|
const { data: pageRes, refresh: getPage } = await useAsyncData(
|
|
`draw-page-toobox-list`,
|
|
async () => {
|
|
const res = await page(pageReq)
|
|
return res.data
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
)
|
|
|
|
const loading = ref(false)
|
|
// const getPage = () => {
|
|
// loading.value = true
|
|
// page(pageReq)
|
|
// .then((res) => {
|
|
// if (res.code === 0) {
|
|
// pageRes.value = res.data
|
|
// }
|
|
// })
|
|
// .finally(() => {
|
|
// loading.value = false
|
|
// })
|
|
// }
|
|
|
|
// getPage()
|
|
|
|
const handleCurrentChange = (page: number) => {
|
|
pageReq.pageNum = page
|
|
getPage()
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pageReq.pageSize = size
|
|
pageReq.pageNum = 1
|
|
getPage()
|
|
}
|
|
|
|
const search = (val?: string) => {
|
|
pageReq.pageNum = 1
|
|
pageReq.title = val || ''
|
|
getPage()
|
|
}
|
|
|
|
const { data: recommendList } = await useAsyncData(`draw-recommend-list-getRelationRecommend`, async () => {
|
|
const res = await getRelationRecommend({
|
|
type: 4,
|
|
})
|
|
return res.data
|
|
})
|
|
|
|
// 猜你喜欢
|
|
// const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
|
|
// const getRelationRecommendList = () => {
|
|
// getRelationRecommend({
|
|
// type: 4,
|
|
// }).then((res) => {
|
|
// if (res.code === 0) {
|
|
// console.log(res.data)
|
|
// recommendList.value = res.data
|
|
// }
|
|
// })
|
|
// }
|
|
// getRelationRecommendList()
|
|
</script>
|