162 lines
3.8 KiB
Vue
162 lines
3.8 KiB
Vue
<template>
|
|
<div class="px-34px">
|
|
|
|
<div class="border border-[#A6A8AF] rounded-6px p-24px mt-33px">
|
|
<Title title="内容分类"></Title>
|
|
<div class="grid grid-cols-2 gap-x-21px gap-y-27px py-37px">
|
|
<CardItem
|
|
v-for="(item, i) in contentTypes"
|
|
:key="i"
|
|
:data="item"
|
|
></CardItem>
|
|
</div>
|
|
<Title title="洞察趋势"></Title>
|
|
<div class="h-300px">
|
|
<swiper
|
|
:effect="'coverflow'"
|
|
:grabCursor="true"
|
|
:centeredSlides="true"
|
|
:slidesPerView="'auto'"
|
|
:navigation="true"
|
|
:coverflowEffect="{
|
|
rotate: -20,
|
|
stretch: 0,
|
|
depth: 60,
|
|
slideShadows: true,
|
|
}"
|
|
:pagination="true"
|
|
:modules="modules"
|
|
class="h-full cu-swiper"
|
|
>
|
|
<swiper-slide
|
|
v-for="(item, i) in trendsList"
|
|
:key="i"
|
|
:data="item"
|
|
class="text-black relative bg-white !w-427px"
|
|
>
|
|
<TrendItem :data="item">{{ item }}</TrendItem>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="border border-[#A6A8AF] rounded-6px py-24px mt-62px max-h-1/2 overflow-hidden flex flex-col"
|
|
>
|
|
<div class="px-24px">
|
|
<Title title="每周大事件" sub="new"></Title>
|
|
</div>
|
|
<van-divider class="my-20px" />
|
|
<div class=" px-24px">
|
|
<van-list
|
|
v-model:loading="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多了"
|
|
@load="weekNewOnLoad"
|
|
>
|
|
<NewsItem
|
|
v-for="(item, i) in weekNewsList"
|
|
class="my-48px"
|
|
:key="i"
|
|
:data="item"
|
|
></NewsItem>
|
|
</van-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import http from '@/io/request'
|
|
import Title from './components/title.vue'
|
|
import NewsItem from './components/news-item.vue'
|
|
import CardItem from './components/card-item.vue'
|
|
import TrendItem from './components/trends-item.vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Mousewheel, Navigation, EffectCoverflow } from 'swiper/modules'
|
|
import 'swiper/scss'
|
|
import 'swiper/scss/mousewheel'
|
|
import 'swiper/css/effect-coverflow'
|
|
import 'swiper/css/navigation'
|
|
|
|
const modules = [Mousewheel, Navigation, EffectCoverflow]
|
|
|
|
const pagetSize = 20
|
|
const weekNewsPage = ref(1)
|
|
const weekNewsList = ref([])
|
|
|
|
const contentTypes = ref([])
|
|
|
|
const trendsList = ref([])
|
|
|
|
const loading = ref(false)
|
|
const finished = ref(false)
|
|
|
|
const weekNewOnLoad = () => {
|
|
http
|
|
.get('/api/topic', {
|
|
params: {
|
|
per_page: pagetSize,
|
|
page: weekNewsPage.value,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
loading.value = false
|
|
const { total, data } = res
|
|
if (weekNewsPage.value === 1) weekNewsList.value = []
|
|
weekNewsList.value = weekNewsList.value.concat(data)
|
|
if (total <= weekNewsList.value.length) finished.value = true
|
|
weekNewsPage.value++
|
|
})
|
|
}
|
|
|
|
function getContentTypes() {
|
|
http
|
|
.get('/api/keywords', {
|
|
params: {
|
|
type_key: 'government',
|
|
},
|
|
})
|
|
.then((res) => {
|
|
contentTypes.value = res
|
|
})
|
|
}
|
|
|
|
function getTrendsList() {
|
|
http
|
|
.get('/api/banner', {
|
|
params: {
|
|
key: 'pc_trend_recommend',
|
|
},
|
|
})
|
|
.then((res) => {
|
|
trendsList.value = res
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTrendsList()
|
|
getContentTypes()
|
|
})
|
|
</script>
|
|
<style lang="scss">
|
|
.swiper-button-prev,.swiper-button-next{
|
|
transform: translateY(-50%);
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid white;
|
|
border-radius: 50%;
|
|
z-index: 99;
|
|
&::after{
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.cu-swiper{
|
|
.swiper-slide-prev,.swiper-slide-next{
|
|
//禁止点击
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
</style> |