| | |
| | | <view class="hdzq-icon"> |
| | | <image :src="itemData.style.image" mode="aspectFill"></image> |
| | | </view> |
| | | <view class="diy-bg" :style="'background:url('+itemData.style.background+') no-repeat;'"> |
| | | <!--列表--> |
| | | <view class="diy-bg" :style="'background-image:url('+itemData.style.background+');'"> |
| | | |
| | | <!---列表--> |
| | | <swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeSwiper"> |
| | | <!---第一个--> |
| | | <swiper-item v-if="listData.length > 0"> |
| | | <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display" |
| | | :key="index" @click="gotoPageFunc(item)"> |
| | | :key="index" @click="gotoPageFunc(item)" v-if="index < 4"> |
| | | <template> |
| | | |
| | | <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'"> |
| | | {{ item.name }} |
| | | </view> |
| | | </template> |
| | | </view> |
| | | </swiper-item> |
| | | <!---第一个--> |
| | | |
| | | <!---第二个--> |
| | | <swiper-item v-if="listData.length > 4"> |
| | | <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display" |
| | | :key="index" @click="gotoPageFunc(item)" v-if="index > 3 && index < 8"> |
| | | <template> |
| | | <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'"> |
| | | {{ item.name }} |
| | | </view> |
| | | </template> |
| | | </view> |
| | | </swiper-item> |
| | | <!---第二个--> |
| | | |
| | | <!---第三个--> |
| | | <swiper-item v-if="listData.length > 8"> |
| | | <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display" |
| | | :key="index" @click="gotoPageFunc(item)" v-if="index > 7 && index < 12"> |
| | | <template> |
| | | <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'"> |
| | | {{ item.name }} |
| | | </view> |
| | | </template> |
| | | </view> |
| | | </swiper-item> |
| | | <!---第三个--> |
| | | |
| | | <!--列表--> |
| | | </swiper> |
| | | |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | data() { |
| | | return { |
| | | /*数据列表*/ |
| | | listData: [] |
| | | listData: [], |
| | | indicatorDots: true, |
| | | autoplay: true, |
| | | interval: 2000, |
| | | duration: 500, |
| | | indicatorActiveColor: '#ffffff', |
| | | current: 0 |
| | | }; |
| | | }, |
| | | props: ['itemData'], |
| | |
| | | this.listData = this.itemData.data; |
| | | }, |
| | | methods: { |
| | | |
| | | changeSwiper(e) { |
| | | this.current = e.detail.current; |
| | | }, |
| | | |
| | | /*跳转页面*/ |
| | | gotoPageFunc(e) { |
| | |
| | | border-radius: 6rpx; |
| | | box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03); |
| | | } |
| | | swiper { |
| | | height: 350rpx; |
| | | } |
| | | |
| | | .diy-bg{ |
| | | background-size: 100%; |
| | | width: 100%; |
| | | height: 350rpx; |
| | | background-repeat: no-repeat; |
| | | background-position: center; |
| | | background-size: cover; |
| | | } |
| | | |
| | | .diy-article .show-type__10, |
| | |
| | | display: flex; |
| | | padding: 20rpx; |
| | | border-bottom: 1rpx solid #eeeeee; |
| | | white-space: nowrap; /* 不换行 */ |
| | | overflow: hidden; /* 超出部分隐藏 */ |
| | | text-overflow: ellipsis; /* 超出显示省略号 */ |
| | | } |
| | | |
| | | .diy-article .show-type__10:last-child, |