dev/dcp-app-gate/pages/information/InformationData/dom/RelevantIndicators.vue

<template>
	<view class="relevant">
		<view class="relevantTitle">{{ $i18n.locale=='zh'?'相关指标':'Other' }}</view>
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<swiper v-if="dataList.length>4" class="swiper" :interval="interval" :duration="duration" :display-multiple-items="4">
					<swiper-item v-for="(item,index) in dataList" :key="'iconitem'+index" @click="emitItem(item)">
						<view class="swiper-item">
							<view class="icon">
<!--								<img :src="item.icon" alt=""/>-->
								<u-image :src="item.icon!=undefined?item.icon:require('@/static/img/infomationdata/dianli/yongdian.png')" mode="widthFix" alt="" width="100%"></u-image>
							</view>
							<view class="labeltext">{{item.label}}</view>
						</view>
					</swiper-item>
				</swiper>
				<view v-else class="swiper">
					<view style="width: 25%;display: inline-block;" v-for="(item,index) in dataList" :key="'iconitem'+index" @click="emitItem(item)">
						<view class="swiper-item">
							<view class="icon">
								<u-image :src="item.icon!=undefined?item.icon:require('@/static/img/infomationdata/dianli/yongdian.png')" mode="widthFix" alt="" width="100%"></u-image>
							</view>
							<view class="labeltext">{{item.label}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'RelevantIndicator',
		props:{
			dataList:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods:{
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			emitItem(item){
				this.$emit('showRelevant',item)
			}
		}
	}
</script>

<style  scoped lang="scss">
	.swiper-item{
		font-size:26upx;
		margin:20upx 20upx;
		text-align:center;
		cursor:pointer;
		.icon{
			position:relative;
			overflow:hidden;
			max-width:100upx;
			margin:20upx auto 10upx;
			img{
				display:block;
				width:100%;
			}
		}
		.labeltext{
			width:100%;
			//overflow:hidden;
			//text-overflow:ellipsis;
			//white-space: nowrap;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	.relevantTitle{
		padding:20upx;
		position:relative;
		overflow:hidden;
		text-indent:10upx;
	}
	.relevantTitle:after{
		content:"";
		width:6upx;
		height:30upx;
		background:#1777FE;
		position:absolute;
		left:10upx;
		top:50%;
		text-indent:8upx;
		margin-top:-18upx;
	}
</style>