139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div ref="newSwiper" class="swiper-container newSwiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div v-for="item in data.banner" :key="item.id" class="swiper-slide">
|
||
|
|
<a :href="item.jump_url" target="_blank" rel="noopener noreferrer">
|
||
|
|
<img :src="item.img" alt="" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
<div class="newList">
|
||
|
|
<div class="listNav">
|
||
|
|
<div
|
||
|
|
v-for="(item, index) in listNav"
|
||
|
|
:key="item.text"
|
||
|
|
:class="listNavId == item.id ? 'listNavActived' : ''"
|
||
|
|
class="item"
|
||
|
|
@click="checkNewsNav(item.id, index)"
|
||
|
|
>
|
||
|
|
{{ item.text }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="listContent">
|
||
|
|
<div v-if="!news[listNavId].length" class="none">
|
||
|
|
暂无数据
|
||
|
|
</div>
|
||
|
|
<nuxt-link
|
||
|
|
v-for="(item, index) in news[listNavId]"
|
||
|
|
v-else
|
||
|
|
:key="index + listNavId"
|
||
|
|
class="listItem"
|
||
|
|
:to="{ name: 'newsDetail', query: { id: item.id } }"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="pic"
|
||
|
|
:class="
|
||
|
|
item.types == 1 ? 'notice' : item.types == 2 ? 'activity' : 'trends'
|
||
|
|
"
|
||
|
|
>
|
||
|
|
{{ item.type_text }}
|
||
|
|
</div>
|
||
|
|
<div class="title">{{ item.title }}</div>
|
||
|
|
<div class="date">{{ item.time.substring(0, 10) }}</div>
|
||
|
|
</nuxt-link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nuxt-link
|
||
|
|
class="moreNews"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
:to="{ name: 'news' }"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
查看全部 >
|
||
|
|
</nuxt-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Swiper from "swiper";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
news: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
listNav: [
|
||
|
|
{ text: "最新", id: "last" },
|
||
|
|
{ text: "公告", id: "notice" },
|
||
|
|
{ text: "活动", id: "activity" },
|
||
|
|
{ text: "动态", id: "trends" },
|
||
|
|
],
|
||
|
|
listNavId: "last",
|
||
|
|
newsChange: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.newSwiper = new Swiper(".newSwiper", {
|
||
|
|
// eslint-disable-line no-unused-vars
|
||
|
|
notNextTick: true,
|
||
|
|
setWrapperSize: true,
|
||
|
|
autoHeight: true,
|
||
|
|
slidesPerView: 1,
|
||
|
|
resistanceRatio: 0,
|
||
|
|
observer: true,
|
||
|
|
observeParents: true,
|
||
|
|
// loop : true,
|
||
|
|
autoplay: true,
|
||
|
|
speed: 600,
|
||
|
|
// 如果需要分页器
|
||
|
|
pagination: {
|
||
|
|
el: ".swiper-pagination",
|
||
|
|
// type: "custom",
|
||
|
|
clickable: true,
|
||
|
|
// renderCustom(swiper, current, total) {
|
||
|
|
// let customPaginationHtml = "";
|
||
|
|
// for (let i = 0; i < total; i++) {
|
||
|
|
// // 判断哪个分页器此刻应该被激活
|
||
|
|
// if (i === current - 1) {
|
||
|
|
// customPaginationHtml +=
|
||
|
|
// '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
|
||
|
|
// } else {
|
||
|
|
// customPaginationHtml +=
|
||
|
|
// '<span class="swiper-pagination-customs"></span>';
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// return customPaginationHtml;
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
checkNewsNav(id) {
|
||
|
|
this.newsChange = true;
|
||
|
|
clearTimeout(this.timeOut);
|
||
|
|
this.listNavId = id;
|
||
|
|
this.timeOut = setTimeout(() => {
|
||
|
|
this.newsChange = false;
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|