224 lines
7.0 KiB
Plaintext
224 lines
7.0 KiB
Plaintext
<script setup lang="tsx">
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
|
|
// import 'swiper/swiper-bundle.css'
|
|
import 'swiper/css'
|
|
import 'swiper/css/navigation'
|
|
import 'swiper/css/pagination'
|
|
import AppAlert from '@/components/AppAlert.vue'
|
|
import { pageType } from '@/stores/modules/pages'
|
|
import { message } from '@/utils/message'
|
|
|
|
const store =pageType()
|
|
import type { PropType } from 'vue'
|
|
|
|
const { push } = useRouter()
|
|
const routet = useRoute()
|
|
|
|
const props = defineProps({
|
|
route: String,
|
|
routets:String,
|
|
swipImgs: {
|
|
type: Array as PropType<any[]>,
|
|
default: () => [],
|
|
},
|
|
items: {
|
|
type: Array as PropType<any[]>,
|
|
default: () => [],
|
|
}
|
|
})
|
|
let indexs = 3
|
|
const modules = [Autoplay, Pagination, Navigation, A11y]
|
|
|
|
const swipeActiveIndex = ref(0)
|
|
function handleIndex(x: any) {
|
|
swipeActiveIndex.value = x.realIndex
|
|
}
|
|
|
|
const swipeRef = ref<any>(null)
|
|
const slideTo = async (index: any) => {
|
|
const swiper = unref(swipeRef)
|
|
if (!swiper) return
|
|
|
|
swiper.slideTo(index, 0)
|
|
swipeActiveIndex.value = index
|
|
}
|
|
|
|
const setSwiperRef = (swiper: any) => {
|
|
swipeRef.value = swiper
|
|
}
|
|
const toDest = (id: any)=>{
|
|
store.page.types = id
|
|
// console.log(routet,routet.path)
|
|
push({name:props.route})
|
|
}
|
|
const toDetail2 =(n)=>{
|
|
// console.log(n)
|
|
if(n.id===0) return
|
|
if(n.isSelect===1){
|
|
push(`${routet.path.replace('/Home','')}/${props.routets}/${n.id}`)
|
|
}
|
|
else{
|
|
message.error("没有访问权限")
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<section v-if="swipImgs?.length" class="w640px h280px mt18px relative min-h280px">
|
|
<Swiper
|
|
@slideChangeTransitionEnd="handleIndex"
|
|
@swiper="setSwiperRef"
|
|
class="w-full h-full"
|
|
:slidesPerView="1"
|
|
:spaceBetween="30"
|
|
:loop="false"
|
|
:centeredSlides="true"
|
|
:autoplay="{ delay: 10000, disableOnInteraction: false }"
|
|
:navigation="false"
|
|
:modules="modules"
|
|
:route ="routet"
|
|
>
|
|
<template v-for="(item, index) in swipImgs" :key="index">
|
|
<SwiperSlide>
|
|
<img :src="item.bannerImg" alt="" @click="toDetail2(item)" class="w100%"/>
|
|
<div class="absolute w-full bg-#062910/60 h52px left-0 bottom-0 z-9 text-#fff flex px18px items-center">
|
|
<div class="text-ellipsis text-22px font-600 max-w480px" @click="toDetail2(item)" :title="item.title">{{ item.title }}</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<div class="absolute w-full h52px left-0 bottom-0 z-10 flex px18px items-center justify-end">
|
|
<div class="dots shrink-0 cursor-pointer">
|
|
<span :class="`dot ${swipeActiveIndex === idx && 'active'}`" v-for="(item, idx) in swipImgs" :key="item" @click="slideTo(idx)"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Swiper>
|
|
</section>
|
|
<section class="max-h-500px overflow-y-auto -webkit-scrollbar">
|
|
|
|
<div class="flex mt19px items min-h-140px" v-for="item in items" :key="item">
|
|
<div class="w100px h100px rd-20px flex-shrink flex flex-col justify-center items-center text-#fff" :style="{ backgroundColor: item.color }">
|
|
<img :src="item.icon" />
|
|
<span class="mt14px">{{ item.name }}</span>
|
|
</div>
|
|
<div class="flex flex-col flex-1 ml16px min-h-120px">
|
|
<template v-if="item.list.length>0">
|
|
<AppAlert class="flex cursor-pointer" cate="1">
|
|
<span v-if="item.list[0].isTop === 'Y'" class="flex-1 w0 truncate font-500" @click="toDetail2(item.list[0])" :title="item.list[0].source">{{ item.list[0].title }}</span>
|
|
<span class="flex-1 w0 truncate font-500" v-if="item.list[0].isTop === 'N'" ></span>
|
|
<img v-if="item.list[0].isTop === 'Y'" src="../../../assets/images/jj.gif" class="h27px mr5px mt3px">
|
|
<div class=" flex h40px lh-40px text-#fff text-18px">
|
|
<div class="pr40px cursor-pointer more text-14px" @click="toDest(item.key)">更多</div>
|
|
</div>
|
|
|
|
</AppAlert>
|
|
<div class="" v-for="(n, idx) in item.news" :key="n.title">
|
|
<!-- <div v-if="idx ==0">
|
|
<div v-if="n.isTop === 'Y'?indexs=3:indexs=2" class="mt7px cursor-pointer flex items-center" :data-date="n.publishTime" @click="toDetail2(n)">
|
|
<span v-if="n.isTop !== 'Y'" class="truncate flex-1 w0 text-#142142 hover:underline mt4px" :style="n.isRead===2?'color:#0058E5;font-weight':''" :title="n.source">{{ n.title }}</span>
|
|
<span class="mt4.5px">
|
|
<img v-if="n.tag === 'New'" src="./images/NEW3.gif" class="h20px">
|
|
</span>
|
|
<span v-if="n.isTop !== 'Y'" class="shrink-0 ml18px text-#808696 mt4px">{{ n.publishTime }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else> -->
|
|
<div v-if="idx<3" class="mt8px cursor-pointer flex items-center h25px" :data-date="n.publishTime" @click="toDetail2(n)">
|
|
|
|
<span class="truncate flex-1 w0 text-#142142 hover:underline mt4px" :style="n.isRead===2?'color:#0058E5;font-weight':''" :title="n.source">{{ n.title }}</span>
|
|
<span class="mt4.5px">
|
|
<img v-if="n.tag === 'New'" src="./images/NEW3.gif" class="h20px">
|
|
</span>
|
|
<span class="shrink-0 ml18px text-#808696 mt4px">{{ n.publishTime }}</span>
|
|
</div>
|
|
<!-- </div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
<template v-else>
|
|
<AppAlert class="flex cursor-pointer" cate="1">
|
|
<span class="flex-1 w0 truncate font-500" ></span>
|
|
<div class=" flex h40px lh-40px text-#fff text-18px">
|
|
<div class="pr40px cursor-pointer more text-14px" @click="toDest(item.key)">更多</div>
|
|
</div>
|
|
|
|
</AppAlert>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
// ::-webkit-scrollbar {
|
|
// width: 1px;
|
|
// }
|
|
.text-ellipsis {
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏溢出部分 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
/* 其他样式，如字体大小、字体粗细等 */
|
|
}
|
|
|
|
.title{
|
|
background: linear-gradient(0deg, #466CCD, #5C87F5);
|
|
border-radius: 10px;
|
|
opacity: 0.52;
|
|
}
|
|
.more{
|
|
position: relative;
|
|
&::after{
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 10px;
|
|
background-image: url('./images/younniu.png');
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.dots {
|
|
.dot {
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 9px;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border-radius: 0;
|
|
margin-left: 8px;
|
|
&.active {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.items {
|
|
.bg-red {
|
|
background-color: #e60e0e;
|
|
}
|
|
.bg-green {
|
|
background-color: #2cba06;
|
|
}
|
|
.items-content {
|
|
margin-top: 12px;
|
|
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-height: 1.7;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
</style>
|