nuxt/aerwen_u_site
1
0
Fork 0
generated from nuxt/nuxt_site
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 添加列表页

Browse Source
This commit is contained in:
Abbh1 2024-05-05 16:58:03 +08:00
parent 95ca80296e
commit 30525332ad
17 changed files with 1011 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/Final/index.scss
View File

@ -70,7 +70,7 @@
.Final-left-info-item {
display: flex;
margin: 10px 0;
margin: 10px;
.Final-left-info-item-icon {
margin-right: 10px;

32
assets/css/Header/nav.scss
View File

@ -91,21 +91,49 @@ a {
min-width: 190px;
.HeaderNav-navItems-child-items {
padding: 10px 40px;
word-break: keep-all;
position: relative;
& a {
width: 100%;
padding: 10px 40px;
}
&:hover {
a {
&>a {
transition: .2s;
color: #ade8dd !important;
}
}
}
.HeaderNav-navItems-child-box-child-box {
box-shadow: 1px 1px 10px 0px #efefef;
background: #ffffff;
position: absolute;
border-radius: 5px;
z-index: 9999999999999999;
min-width: 190px;
left: 185px;
top: 0px;
.HeaderNav-navItems-child-items {
// padding: 10px ;
word-break: keep-all;
&:hover {
a {
transition: .2s;
color: #ade8dd !important;
}
}
}
}
}
}
}
}

4
assets/css/Popup/message-us.scss
View File

@ -30,7 +30,7 @@
}
.messageUs .eMailIco {
background: url("/img/emailIco.png") 16px center no-repeat #A72027;
background: url("/img/emailIco.png") 16px center no-repeat #82e7d4;
background-size: 21px auto;
}
@ -73,7 +73,7 @@
}
.messageUsForm .btn {
background: #A72027;
background: #82e7d4;
border-radius: 4px;
width: 100%;
box-sizing: border-box;

188
assets/css/business/list/index.scss Normal file
View File

@ -0,0 +1,188 @@
// 分类
.category-big-box {
width: 100%;
height: 100%;
border-radius: 15px;
margin: 25px 0;
background-color: #F9F9F9;
padding: 20px 40px;
}
.category-box {
width: 100%;
height: 100%;
position: relative;
display: flex;
margin-top: 15px;
}
.category-left-box {
position: absolute;
left: 0;
top: 3px;
}
.category-title {
font-weight: 800;
color: #666C72;
font-size: 15px;
}
.category-right-box {
// position: absolute;
// left: 90px;
// top: 1px;
padding-left: 80px;
display: flex;
flex-wrap: wrap;
}
.category-line {
width: 100%;
height: 1px;
border: 1px dashed #EFEFEF;
margin: 10px 0;
}
.category-right-item {
font-weight: 600;
font-size: 14px;
color: #6C6C6C;
margin-right: 20px;
margin-bottom: 5px;
cursor: pointer;
padding: 5px 10px;
border-radius: 50px;
}
.category-right-item-active {
font-weight: 600;
font-size: 14px;
color: #6C6C6C;
margin-right: 20px;
margin-bottom: 5px;
cursor: pointer;
padding: 5px 10px;
border-radius: 50px;
background-color: #3F3F3F;
color: #fff;
}
.sort {
color: #646464 !important;
font-size: 16px;
display: flex;
align-items: center;
}
// 列表盒子
.jump {
color: black;
}
.content-list-box {
position: relative;
}
.content-box {
width: 100%;
height: 430px;
float: left;
background: #fff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.075);
position: relative;
border-radius: 15px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: all .3s ease 0s;
margin-bottom: 40px;
padding: 10px;
cursor: pointer;
}
.content-box:hover {
transform: translateY(-5px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.content-img-box {
width: 100%;
height: 70%;
border-radius: 15px;
overflow: hidden;
margin-bottom: 15px;
}
.content-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-box-content {
margin-left: 10px;
}
.content-box-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.content-rate-box {
display: flex;
width: 100%;
}
.content-rate-icon-box {
display: flex;
margin-right: 15px;
align-items: center;
font-size: 15px;
color: #8FA0B7;
}
.content-rate-icon {
margin-right: 3px;
}
.content-line {
width: 100%;
height: 1px;
background-color: #F7F7F7;
margin: 8px 0;
}
.content-user-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.content-user-img-box {
display: flex;
align-items: center;
}
.content-user-name {
width: 120px;
margin-left: 10px;
font-size: 15px;
font-weight: normal;
}
.content-user-send-time {
font-size: 14px;
font-weight: normal;
color: grey;
}
.page-box {
display: flex;
justify-content: center;
}

0
assets/css/business/news/news_details/index.scss → assets/css/business/list/list_details/index.scss
View File

9
assets/css/business/news/news_details/media.scss → assets/css/business/list/list_details/media.scss
View File

@ -1,6 +1,10 @@
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1440px) {
.container {
max-width: 1560px !important;
}
}
/*小于*/
@media screen and (min-width: 1440px) {}
@ -25,9 +29,10 @@
/*小于*/
@media screen and (max-width: 480px) {
.Turn-the-page-box{
.Turn-the-page-box {
flex-direction: column;
}
.return {
display: none;
}

2
assets/css/business/news/media.scss → assets/css/business/list/media.scss
View File

@ -3,7 +3,7 @@
/*大于*/
@media screen and (min-width: 1440px) {
.container {
max-width: 1420px;
max-width: 1560px !important;
}
}

131
assets/css/business/news/index.scss
View File

@ -1,131 +0,0 @@
// 新闻类型
.news-titile-pos-box {
width: 100%;
display: flex;
justify-content: center;
margin: 50px 0;
.news-title-box {
display: flex;
align-items: center;
.news-title {
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: .4s;
}
.news-title:hover {
color: #f08519;
}
.news-title-active {
color: #f08519;
}
.news-title-line {
width: 1px;
height: 36px;
background-color: #999999;
margin: 0 30px;
}
}
}
// 新闻内容盒子
.news-contianer {
margin: 0px auto;
height: 300px;
width: 80%;
display: flex;
align-items: center;
padding: 10px 35px;
transition: .4s;
cursor: pointer;
margin-bottom: 35px;
}
.news-contianer:hover {
box-shadow: 0 0 15px 1px #e5e4e4;
}
.news-content-box {
height: 65%;
width: 100%;
display: flex;
overflow: hidden;
}
.news-cover-box {
overflow: hidden;
margin-right: 20px;
height: 100%;
width: 25%;
object-fit: cover;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.news-content-right-box {
width: 70%;
}
.news-title {
font-weight: normal;
font-size: 18px;
letter-spacing: 1px;
color: rgb(51, 51, 51);
}
.news-time {
font-size: 14px;
color: rgb(153, 153, 153);
margin: 15px 0px;
}
.news-intro {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
color: rgb(102, 102, 102);
width: 100%;
text-align: justify;
line-height: 22px;
}
// ted栏
.Top_navigation {
display: flex;
justify-content: center;
z-index: 9;
position: relative;
}
// 分页
.page-box {
width: 100%;
display: flex;
justify-content: center;
.page {
margin-bottom: 80px;
}
}
.news-content-sublevel {
display: flex;
justify-content: space-between;
}
.jump {
text-decoration: dashed;
color: black;
}

11
assets/css/index/index.scss
View File

@ -3,6 +3,14 @@
// background-color: black;
}
section{
padding: 30px 0;
}
.index-bg{
background-color: #F9F9F9;
}
h2 {
margin: 0 0 45px;
@ -169,10 +177,13 @@ h2:after {
color: grey;
}
// 按钮
.btn-box{
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.btn{

4
components/Final/index.vue
View File

@ -24,12 +24,12 @@
<img src="/img/icon/logo.png" class="icon-img" alt="">
<div class="Final-left-title font">{{ $t('common.footer.desc') }}</div>
<div class="Final-left-info font">
<div class="Final-left-info-item">
<!-- <div class="Final-left-info-item">
<div class="Final-left-info-item-icon">
<img src="/img/icon/Final_left_img.png" alt="">
</div>
<div>{{ $t('common.footer.loc') }}</div>
</div>
</div> -->
<div class="Final-left-info-item">
<div class="Final-left-info-item-icon">
<img src="/img/icon/Final_left_img3.png" alt="">

62
components/Header/HeaderNav.vue
View File

@ -12,12 +12,11 @@
<template #title>
<div class="HeaderNav-navItems">{{ item.name }}</div>
</template>
<el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name"
class="HeaderNav-navItems">
{{ _item.name }}
</el-menu-item>
</el-sub-menu>
</el-menu> -->
<el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name" class="HeaderNav-navItems">
{{ _item.name }}
</el-menu-item>
</el-sub-menu>
</el-menu> -->
@ -25,25 +24,30 @@
:class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
v-for="item in props.navList" v-cloak :key="item.name">
<span v-if="item.children.length === 0" class="font">{{ item.name }}</span>
<span v-else @mouseenter.self="enterNavEnter" class="font" >{{ item.name }}</span>
<div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
v-if="item.children.length >= 1">
<span v-else @mouseenter.self="enterNavEnter($event, 'HeaderNav-navItems-child-box')" class="font">{{ item.name
}}</span>
<div class="HeaderNav-navItems-child-box dNone"
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box')" v-if="item.children.length >= 1">
<div v-for="_item in item.children" class="HeaderNav-navItems-child-items">
<nuxt-link :to="getHerf(_item['href'])" class="font" @mouseenter="enterNavEnter">
{{ _item.name }}
<!-- <div v-if="_item.children">
<div v-if="_item.children.length >= 1" @mouseenter="enterNavEnter">&nbsp;&nbsp;></div>
<nuxt-link :to="getHerf(_item['href'])" class="font"
@mouseenter="enterNavEnter($event, 'HeaderNav-navItems-child-box-child-box', true)">
{{ _item.name + (_item.children?.length >= 1 ? '&nbsp;&nbsp;>' : '') }}
<div class="HeaderNav-navItems-child-box dNone" style="margin-left: 210px;margin-top: 20px;"@mouseleave.capture="enterNavLeave">
<nuxt-link :to="getHerf(_item['href'])" class="font " @mouseenter="enterNavEnter">
{{ _item.name }}
<div v-if="_item.children">
<div v-if="_item.children.length >= 1">&nbsp;&nbsp;></div>
</div>
</nuxt-link>
<!-- 第二层 -->
<template v-if="_item.children">
<div class="HeaderNav-navItems-child-box-child-box dNone"
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box-child-box')">
<div v-for="_itemchild in _item.children" class="HeaderNav-navItems-child-items">
<nuxt-link :to="getHerf(_itemchild['href'])" class="font ">
{{ _itemchild.name }}
</nuxt-link>
</div>
</div> -->
</nuxt-link>
</div>
</template>
</div>
</div>
</nuxt-link>
@ -67,18 +71,22 @@ const currentRoute = route.currentRoute.value.matched[0]['name']
//事件
let navTimer = null
const enterNavEnter = e => {
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
const enterNavEnter = (e, cn, fade) => {
;[...document.getElementsByClassName(cn)].map(item => item.classList.add('dNone'))
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
ele &&
ele.classList.remove('dNone')
clearInterval(navTimer)
navTimer = setTimeout(() => {
!fade && (navTimer = setTimeout(() => {
ele &&
ele.classList.add('dNone')
}, 1000)
}, 1000))
}
const enterNavLeave = e => {
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
const enterNavLeave = (e, cn) => {
console.log(cn, 123);
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
ele &&
ele.classList.add('dNone')
}

4
components/Header/index.vue
View File

@ -80,8 +80,8 @@ let navList = ref([
{
name: "模型",
children: [],
href: '/about',
alias: 'about'
href: '/model/1-1',
alias: 'model'
},
{
name: "动画",

24
components/Poster/index.vue
View File

@ -4,8 +4,8 @@
<div class="Poster-container" :style="posterStyle">
<img class="Poster-img" :src="posterInfo.imgSrc" alt="">
<div class="Poster-content-box">
<div class="Poster-title">{{ props.title }}</div>
<div class="Poster-text">{{ props.text }}</div>
<div class="Poster-title">{{ posterInfo.title }}</div>
<div class="Poster-text">{{ posterInfo.text }}</div>
</div>
</div>
@ -23,24 +23,24 @@ const props = defineProps({
})
const initState = {
imgSrc: '/img/product_list/banner2.jpg',
imgSrc: '',
title: '',
text: ''
}
let posterInfo = ref({ ...initState })
let posterStyle = {
height: '23vw',
height: '8vw',
}
// 获取海报
// useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
// const data = JSON.parse(res.data.value).data
// posterInfo.value = data || { ...initState }
// setTimeout(() => {
// htmlAddAnimations()
// });
// })
useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
const data = JSON.parse(res.data.value).data
posterInfo.value = data
console.log(data,'啊实打实大苏打')
setTimeout(() => {
htmlAddAnimations()
});
})
</script>

258
pages/index.vue
View File

@ -14,7 +14,7 @@
<!-- 四个海报 -->
<section>
<div class="container poster-box">
<div class="container poster-box animate__animated animate__fadeIn">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="poster-img-box">
@ -43,7 +43,7 @@
<!-- 精选推荐 -->
<section>
<div class="container update-big-box">
<div class="container update-big-box animate__animated animate__fadeIn">
<div class="update-title-box">
<h2><span>精选推荐<i>NEW</i></span></h2>
@ -85,7 +85,7 @@
<div class="content-user-box">
<div class="content-user-img-box">
<el-avatar class="content-user-img" :size="30"
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
<div class="content-user-name f1">西瓜西了西</div>
</div>
<div class="content-user-send-time">2024-03-01</div>
@ -104,12 +104,262 @@
</section>
<!-- Unity工程 -->
<section class="index-bg ">
<div class="container update-big-box">
<div class="update-title-box">
<h2><span>Unity工程</span></h2>
</div>
<div class="row content-list-box">
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="content-box">
<div class="content-img-box">
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
alt="">
</div>
<div class="content-box-content">
<div class="content-box-title f1">Blneder 微动态场景 旅途中</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">333</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<ChatLineRound />
</el-icon>
<div class="content-rate-num">2</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<Download />
</el-icon>
<div class="content-rate-num">12</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="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
<div class="content-user-name f1">西瓜西了西</div>
</div>
<div class="content-user-send-time">2024-03-01</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-box">
<el-button class="btn" type="primary" size="large">查看更多</el-button>
</div>
</div>
</section>
<!-- 模型推荐 -->
<section>
<div class="container update-big-box">
<div class="update-title-box">
<h2><span>模型推荐</span></h2>
</div>
<div class="row content-list-box">
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="content-box">
<div class="content-img-box">
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
alt="">
</div>
<div class="content-box-content">
<div class="content-box-title f1">Blneder 微动态场景 旅途中</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">333</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<ChatLineRound />
</el-icon>
<div class="content-rate-num">2</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<Download />
</el-icon>
<div class="content-rate-num">12</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="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
<div class="content-user-name f1">西瓜西了西</div>
</div>
<div class="content-user-send-time">2024-03-01</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-box">
<el-button class="btn" type="primary" size="large">查看更多</el-button>
</div>
</div>
</section>
<!-- 动画资源 -->
<section class="index-bg">
<div class="container update-big-box">
<div class="update-title-box">
<h2><span>动画资源</span></h2>
</div>
<div class="row content-list-box">
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="content-box">
<div class="content-img-box">
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
alt="">
</div>
<div class="content-box-content">
<div class="content-box-title f1">Blneder 微动态场景 旅途中</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">333</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<ChatLineRound />
</el-icon>
<div class="content-rate-num">2</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<Download />
</el-icon>
<div class="content-rate-num">12</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="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
<div class="content-user-name f1">西瓜西了西</div>
</div>
<div class="content-user-send-time">2024-03-01</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-box">
<el-button class="btn" type="primary" size="large">查看更多</el-button>
</div>
</div>
</section>
<!-- 软件下载 -->
<section>
<div class="container update-big-box">
<div class="update-title-box">
<h2><span>软件下载</span></h2>
</div>
<div class="row content-list-box">
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div class="content-box">
<div class="content-img-box">
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
alt="">
</div>
<div class="content-box-content">
<div class="content-box-title f1">Blneder 微动态场景 旅途中</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">333</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<ChatLineRound />
</el-icon>
<div class="content-rate-num">2</div>
</div>
<div class="content-rate-icon-box">
<el-icon class="content-rate-icon">
<Download />
</el-icon>
<div class="content-rate-num">12</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="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
<div class="content-user-name f1">西瓜西了西</div>
</div>
<div class="content-user-send-time">2024-03-01</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-box">
<el-button class="btn" type="primary" size="large">查看更多</el-button>
</div>
</div>
</section>
</div>
</div>
<PopupMessageUs></PopupMessageUs>
<!-- <Final></Final> -->
<Final></Final>
</template>
<script setup>

301
pages/model/[idx]-[page].vue Normal file
View File

@ -0,0 +1,301 @@
<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>

165
pages/model/details/[id].vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<Head>
<Title>{{ newsDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
<Meta :content=tdk?.tdk_keyword name="keywords" />
<Meta :content=tdk?.tdk_description name="description" />
</Head>
<Header></Header>
<Poster :type=1 :title="newsDetail.news_title"></Poster>
<div class="container">
<div class="news">
<div class="news__title">
<h1>{{ newsDetail.news_title }}</h1>
<h3 class="news__date">{{ newsDetail.news_issue_date }}</h3>
</div>
<!-- 渲染新闻富文本 -->
<section class="news__detail" v-html="newsDetail.news_content"></section>
<div class="news__paging">
<div class="news__paging-prev">
<template v-if="newsDetail.prev">
<nuxt-link :to="getHerf('/news/details/' + newsDetail.prev?.news_id)">
{{ newsDetail.prev?.news_title }}
</nuxt-link>
</template>
<template v-else>
{{ $t('news.noprev') }}
</template>
</div>
<div class="news__paging-next">
<template v-if="newsDetail.next">
<nuxt-link :to="getHerf('/news/details/' + newsDetail.next?.news_id)">
{{ newsDetail.next?.news_title }}
</nuxt-link>
</template>
<template v-else>
{{ $t('news.nonext') }}
</template>
</div>
</div>
</div>
</div>
<Final></Final>
<PopupSidebar></PopupSidebar>
<PopupMessageUs></PopupMessageUs>
</template>
<script setup>
const { l, locale } = useI18n();
// --- 接口对接 ---
// 参数
const route = useRoute()
// 预对接
let newsDetail = ref({})
onMounted(() => {
fontSizeReactive({
880: 1,
480: 1,
})
})
// 获取新闻详情
useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
newsDetail.value = JSON.parse(res.data.value).data
})
// 获取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/flow/addFlowRecord', { params: { flow_target: route.name } })
</script>
<style scoped lang="scss">
.news {
padding: 80px 0px;
&__title {
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px solid var(--rootColor);
h1 {
font-size: 26px;
color: #000;
font-weight: bold;
text-align: center;
}
}
&__date {
font-size: 16px;
text-align: center;
color: #666;
margin-top: 20px;
}
:deep(p) {
font-size: 16px;
line-height: 28px;
color: #222;
text-indent: 2em;
margin-bottom: 15px;
}
:deep(img) {
max-width: 100%;
display: block;
margin: 30px auto;
text-align: center;
}
&__paging {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
flex-wrap: wrap;
&-prev,
&-next {
width: 45%;
overflow: hidden;
border: 1px solid var(--rootColor);
display: flex;
justify-content: center;
align-items: center;
padding: 13px 10px;
transition: all 0.35s ease-in-out;
user-select: none;
&:hover {
background-color: var(--rootColor);
}
a {
font-size: 16px;
color: #000;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
&:hover {
color: #fff
}
}
}
}
}
</style>

2
pages/news/[idx]-[page].vue
View File

@ -124,8 +124,6 @@ onMounted(() => {
})
</script>
<style scoped src="~/assets/css/business/news/index.scss"></style>
<style scoped src="~/assets/css/business/news/media.scss"></style>
<style scoped lang="scss">
.news-big-box {
margin-top: 50px;