generated from nuxt/nuxt_site
315 lines
12 KiB
Vue
315 lines
12 KiB
Vue
<template>
|
|
|
|
<Head>
|
|
<Title>{{ tdk?.tdk_title }}</Title>
|
|
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
|
<Meta :content=tdk?.tdk_description name="description" />
|
|
</Head>
|
|
<Header></Header>
|
|
<!-- <Poster :type=2></Poster> -->
|
|
|
|
<div class="background_box">
|
|
|
|
<main class="container font-size-box">
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="search-big-box" style="margin-top: 120px;margin-bottom: 30px;">
|
|
<div class="search-box">
|
|
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
|
style="width: 90px">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select> -->
|
|
<div class="searchBox">
|
|
|
|
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
|
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
|
<button class="searchButton" href="#" @click="handleSearch">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
|
fill="none">
|
|
<g clip-path="url(#clip0_2_17)">
|
|
<g filter="url(#filter0_d_2_17)">
|
|
<path
|
|
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
|
stroke="white" stroke-width="3" stroke-linecap="round"
|
|
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
|
height="29.7139" filterUnits="userSpaceOnUse"
|
|
color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
|
<feColorMatrix in="SourceAlpha" type="matrix"
|
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
|
</feColorMatrix>
|
|
<feOffset dy="4"></feOffset>
|
|
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
|
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
|
<feColorMatrix type="matrix"
|
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
|
<feBlend mode="normal" in2="BackgroundImageFix"
|
|
result="effect1_dropShadow_2_17"></feBlend>
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
|
result="shape"></feBlend>
|
|
</filter>
|
|
<clipPath id="clip0_2_17">
|
|
<rect width="28.0702" height="28.0702" fill="white"
|
|
transform="translate(0.403503 0.526367)"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 模块渲染列表 -->
|
|
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
|
<div class="row content-list-box">
|
|
|
|
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
|
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
|
<div class="content-box" style="height:530px !important">
|
|
<div class="content-img-box">
|
|
<img :src=item.img alt="">
|
|
</div>
|
|
|
|
<div class="content-box-content">
|
|
<div class="content-box-title f1">{{ item.title }}</div>
|
|
<div class="content-rate-box">
|
|
<div class="content-rate-icon-box">
|
|
<el-icon class="content-rate-icon">
|
|
<View />
|
|
</el-icon>
|
|
<div class="content-rate-num">{{ item.view }}</div>
|
|
</div>
|
|
<div class="content-rate-icon-box">
|
|
<el-icon class="content-rate-icon">
|
|
<ChatLineRound />
|
|
</el-icon>
|
|
<div class="content-rate-num">{{ item.comment }}</div>
|
|
</div>
|
|
<div class="content-rate-icon-box">
|
|
<el-icon class="content-rate-icon">
|
|
<Download />
|
|
</el-icon>
|
|
<div class="content-rate-num">{{ item.download }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-tag type="primary" style="margin-top: 8px;">模型</el-tag>
|
|
|
|
<div class="content-line"></div>
|
|
|
|
<div class="content-user-box">
|
|
<div class="content-user-img-box">
|
|
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
|
<div class="content-user-name f1">{{ item.user_name }}</div>
|
|
</div>
|
|
<div class="content-user-send-time">{{ item.send_time }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div class="list_none" v-else>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="page-box">
|
|
<pagination class="page" :total="total" v-model:page="queryParams.page"
|
|
v-model:limit="queryParams.limit" @pagination="routerJump()" />
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
<PopupMessageUs></PopupMessageUs>
|
|
<Final></Final>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
// 预对接
|
|
let dataList = ref([
|
|
{
|
|
id: 1,
|
|
link: "",
|
|
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
|
title: "Blneder 微动态场景 旅途中",
|
|
view: 333,
|
|
comment: 11,
|
|
download: 2,
|
|
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
|
user_name: "西瓜西了西",
|
|
send_time: "2024-03-01",
|
|
},
|
|
{
|
|
id: 2,
|
|
link: "",
|
|
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
|
title: "Blneder 微动态场景 旅途中",
|
|
view: 333,
|
|
comment: 11,
|
|
download: 2,
|
|
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
|
user_name: "西瓜西了西",
|
|
send_time: "2024-03-01",
|
|
},
|
|
])
|
|
let typeList = ref([
|
|
{
|
|
id: 1,
|
|
name: "全部",
|
|
isActive: true
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "三渲二",
|
|
isActive: false
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "交通工具",
|
|
isActive: false
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "人物角色",
|
|
isActive: false
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "武器兵刃",
|
|
isActive: false
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "人物角色",
|
|
isActive: false
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "人物角色",
|
|
isActive: false
|
|
},
|
|
])
|
|
let typeChildrenList = ref([
|
|
])
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
|
|
|
watch(active, (nv) => {
|
|
router.push(String(nv['idx']) + "-1")
|
|
})
|
|
|
|
watch(() => route.query.s, (newValue, oldValue) => {
|
|
queryParams.value.search = newValue
|
|
// getlist()
|
|
// window.location.reload();
|
|
})
|
|
|
|
// --- 参数 ---
|
|
let total = ref(0)
|
|
const queryParams = ref({
|
|
page: parseInt(route.params.page) || 1,
|
|
idx: parseInt(route.params.idx) || 0,
|
|
locale: locale.value,
|
|
limit: 10,
|
|
search: ""
|
|
})
|
|
|
|
// --- 方法 ---
|
|
const routerJump = function () {
|
|
let { page } = queryParams.value
|
|
router.push("1-" + String(page))
|
|
}
|
|
|
|
const getLink = function (item) {
|
|
if (item?.link) {
|
|
return item?.link;
|
|
} else {
|
|
return "/model/details/" + item.id;
|
|
}
|
|
}
|
|
|
|
let url = getHerf('/search/0-1?s=')
|
|
const handleSearch = function(){
|
|
router.push(url + queryParams.value.search)
|
|
}
|
|
|
|
const keyDownEvent = $event => {
|
|
$event.keyCode === 13 && (router.push(url + queryParams.value.search))
|
|
}
|
|
|
|
// 切换激活状态的方法
|
|
const toggleActive = (index) => {
|
|
typeList.value.forEach(item => {
|
|
item.isActive = false;
|
|
});
|
|
typeList.value[index].isActive = true;
|
|
};
|
|
|
|
// 切换子类激活状态的方法
|
|
const toggleChildActive = (index) => {
|
|
typeChildrenList.value.forEach(item => {
|
|
item.isActive = false;
|
|
});
|
|
typeChildrenList.value[index].isActive = true;
|
|
};
|
|
|
|
const handleSort = (type) => {
|
|
console.log(type);
|
|
}
|
|
|
|
|
|
// 获取Tdk
|
|
let tdk = ref({})
|
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
|
tdk.value = JSON.parse(res.data.value).data
|
|
})
|
|
|
|
|
|
// 获取新闻类型列表
|
|
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
|
// total.value = JSON.parse(res.data.value).count || 0
|
|
// res.unshift({
|
|
// href: '/project/project/0-1',
|
|
// name: t('home.products.all')
|
|
// })
|
|
// newsList.value = JSON.parse(res.data.value).data || []
|
|
// })
|
|
|
|
|
|
// 获取新闻列表
|
|
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
|
// total.value = JSON.parse(res.data.value).count || 0
|
|
// newsList.value = JSON.parse(res.data.value).data || []
|
|
// })
|
|
|
|
// 添加流量访问
|
|
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
|
|
|
onMounted(() => {
|
|
fontSizeReactive({
|
|
880: 1,
|
|
480: 2,
|
|
})
|
|
htmlAddAnimations()
|
|
console.log(route.query.s,'搜索url');
|
|
queryParams.value.search = route.query.s
|
|
})
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
|
<style scoped src="~/assets/css/business/list/media.scss"></style> |