|
|
@@ -8,20 +8,46 @@
|
|
|
<template v-if="noticeList.length > 0">
|
|
|
<div class="img-txt" v-if="noticeList.length > 0" @click="toSee(noticeList[0])">
|
|
|
<template v-if="noticeList[0].images != null">
|
|
|
- <el-image class="img" :src="noticeList[0].images"></el-image>
|
|
|
+ <el-image class="img" :src="noticeList[0].images" fit="cover"></el-image>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-image class="img" :src="defaultImg"></el-image>
|
|
|
</template>
|
|
|
- <div class="txt">{{ noticeList[0].announcementName }}</div>
|
|
|
+ <div class="txt ddd" @click="toSee(item)" >{{ noticeList[0].announcementName }}</div>
|
|
|
</div>
|
|
|
+ <el-carousel
|
|
|
+ class="list-carousel"
|
|
|
+ indicator-position="none"
|
|
|
+ arrow="never"
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="3000"
|
|
|
+ height="200px">
|
|
|
+ <el-carousel-item v-for="(itemGroup, index) in groupedNoticeList" :key="index">
|
|
|
+ <div class="list" v-for="item in itemGroup" :key="item.id">
|
|
|
+ <div class="left">
|
|
|
+ <template v-if="item.images != null">
|
|
|
+ <el-image class="img" :src="item.images" fit="cover"></el-image>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-image class="img" :src="defaultSmallImg" fit="cover"></el-image>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">{{ item.announcementName }}</div>
|
|
|
+ <div class="date">{{ formatDate(item.createTime) }}</div>
|
|
|
+ <div class="detailBtn" @click="toSee(item)">详情</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ <!-- div class="list-box">
|
|
|
<div class="list" v-for="item in noticeDataList" :key="item.id">
|
|
|
<div class="left">
|
|
|
<template v-if="item.images != null">
|
|
|
- <el-image :src="item.images" class="img"></el-image>
|
|
|
+ <el-image class="img" :src="item.images" fit="cover" ></el-image>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <el-image :src="defaultSmallImg" class="img"></el-image>
|
|
|
+ <el-image class="img" :src="defaultSmallImg" fit="cover" ></el-image>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
@@ -30,6 +56,7 @@
|
|
|
<div class="detailBtn" @click="toSee(item)">详情</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div -->
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="noData">
|
|
|
@@ -124,6 +151,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { Carousel, CarouselItem } from 'element-ui'
|
|
|
import moment from 'moment'
|
|
|
import BasePanelLeft from '@/components/base-panel/base-panel-left'
|
|
|
import BaseMain from '@/components/base-main/base-main.vue'
|
|
|
@@ -132,9 +160,24 @@ import ImgUrl from '@/assets/image/comprehensive/bg1.png'
|
|
|
import ImgUrl2 from '@/assets/image/comprehensive/bg2.png'
|
|
|
export default {
|
|
|
components: {
|
|
|
+ 'el-carousel': Carousel,
|
|
|
+ 'el-carousel-item': CarouselItem,
|
|
|
BaseMain,
|
|
|
BasePanelLeft
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ groupedNoticeList() {
|
|
|
+ if (!this.noticeDataList || this.noticeDataList.length === 0) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ const groups = []
|
|
|
+ const itemsPerGroup = 2
|
|
|
+ for (let i = 0; i < this.noticeDataList.length; i += itemsPerGroup) {
|
|
|
+ groups.push(this.noticeDataList.slice(i, i + itemsPerGroup))
|
|
|
+ }
|
|
|
+ return groups
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
noticeList: [],
|
|
|
@@ -151,7 +194,7 @@ export default {
|
|
|
return moment(date).format('YYYY-MM-DD HH:mm:ss')
|
|
|
},
|
|
|
fetchData() {
|
|
|
- getAnnouncementList({ announcementStatus: '1', pageNum: 1, pageSize: 3 }).then((res) => {
|
|
|
+ getAnnouncementList({ announcementStatus: '1', pageNum: 1, pageSize: 10 }).then((res) => {
|
|
|
this.noticeList = res.data.records
|
|
|
this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
|
|
|
})
|
|
|
@@ -164,6 +207,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+
|
|
|
.comprehensive-container {
|
|
|
position: absolute;
|
|
|
top: px-to-rem(30);
|
|
|
@@ -211,6 +255,7 @@ export default {
|
|
|
:deep(.el-image__inner) {
|
|
|
height: px-to-rem(182);
|
|
|
width: 100%;
|
|
|
+ object-position: center 5%;
|
|
|
}
|
|
|
.txt {
|
|
|
width: px-to-rem(337);
|
|
|
@@ -227,6 +272,11 @@ export default {
|
|
|
text-align: left;
|
|
|
padding-left: px-to-rem(10);
|
|
|
}
|
|
|
+ .ddd {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
.list {
|
|
|
display: flex;
|
|
|
@@ -242,6 +292,7 @@ export default {
|
|
|
height: px-to-rem(80);
|
|
|
:deep(.el-image__inner) {
|
|
|
height: px-to-rem(80);
|
|
|
+ object-position: center 5%;
|
|
|
}
|
|
|
}
|
|
|
.right {
|