generated from nuxt/nuxt_site
301 lines
10 KiB
Vue
301 lines
10 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="category-big-box">
|
|
|
|
<div class="category-box">
|
|
<div class="category-left-box">
|
|
<div class="category-title">分类</div>
|
|
</div>
|
|
<div class="category-right-box">
|
|
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
|
@click="toggleActive(index)" v-for="(item, index) in typeList">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="category-box" v-if="typeChildrenList.length !== 0">
|
|
<div class="category-left-box">
|
|
<div class="category-title">二级分类</div>
|
|
</div>
|
|
<div class="category-right-box">
|
|
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
|
@click="toggleChildActive(index)" v-for="(item, index) in typeChildrenList">{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="category-line"></div>
|
|
|
|
<div class="category-box">
|
|
<div class="category-left-box">
|
|
<div class="category-title">排序</div>
|
|
</div>
|
|
<div class="category-right-box">
|
|
<div class="category-right-item sort" @click="handleSort(1)">
|
|
<span>最新</span>
|
|
<el-icon>
|
|
<CaretBottom />
|
|
</el-icon>
|
|
</div>
|
|
<div class="category-right-item sort" @click="handleSort(2)">
|
|
<span>推荐</span>
|
|
<el-icon>
|
|
<CaretBottom />
|
|
</el-icon>
|
|
</div>
|
|
<div class="category-right-item sort" @click="handleSort(3)">
|
|
<span>下载</span>
|
|
<el-icon>
|
|
<CaretBottom />
|
|
</el-icon>
|
|
</div>
|
|
<div class="category-right-item sort" @click="handleSort(4)">
|
|
<span>浏览</span>
|
|
<el-icon>
|
|
<CaretBottom />
|
|
</el-icon>
|
|
</div>
|
|
</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">
|
|
<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>
|
|
|
|
<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")
|
|
})
|
|
|
|
// --- 参数 ---
|
|
let total = ref(0)
|
|
const queryParams = reactive({
|
|
page: parseInt(route.params.page) || 1,
|
|
idx: parseInt(route.params.idx) || 0,
|
|
locale: locale.value,
|
|
limit: 10
|
|
})
|
|
|
|
// --- 方法 ---
|
|
const routerJump = function () {
|
|
let { page } = queryParams
|
|
router.push("1-" + String(page))
|
|
}
|
|
|
|
const getLink = function (item) {
|
|
if (item?.link) {
|
|
return item?.link;
|
|
} else {
|
|
return "/model/details/" + item.id;
|
|
}
|
|
}
|
|
|
|
// 切换激活状态的方法
|
|
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: '/product/product_list/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()
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
|
<style scoped src="~/assets/css/business/list/media.scss"></style> |