yuanqu_ui/components/swiper/notice.vue

<template>
  <view v-if="noticelist.length">
	  <view class="hswip flexc" >
	  		<image :src="tztip"></image>
			<swiper class="swiper" indicator-dots="true" :indicator-color="nactiveColor" :indicator-active-color="activeColor" circular :autoplay="autoplay" :interval="interval" :duration="duration" vertical='true'>
				<swiper-item v-for="(ite,idx) in noticelist" :key="">
					<view class="flexc swipers" @click="getDetail(ite.noticeId)">
						<view class="tit over">{{ite.noticeTitle}}</view>
						<!-- <view class="time">{{ite.issuerTime}}</view> -->
						<view class="time" v-if="ite.createTime">{{ite.createTime.substring(0,10)}}</view>
					</view>
				</swiper-item>
			</swiper>
	  		
	  </view>
  </view>
</template>

<script>
  export default {
	  props:{
	  	autoplay: {
	  		type: Boolean,
	  		default () {
	  			return false
	  		}
	  	},
	  	confdat:{},
		activeColor:{
			type:String,
			default () {
				return '#000000'
			}
		},
		nactiveColor:{
			type:String,
			default () {
				return 'rgba(0, 0, 0, .3)'
			}
		},
		noticelist:{
			type: Array,
			default () {
				return []
			}
		}
	  },
	data(){
		return{
			tztip:require('@/static/images/home/voice.png'),
            interval: 2000,
            duration: 500
		}
	},
	methods:{
		 getRoad(){
		 	console.log(1)
		 },
		 getDetail(e){
			 this.$emit('getNoticeDet',e)
		 }
	},
	onLoad: function() {
    }
  }
</script>

<style lang="scss" scoped>
.hswip /deep/ .uni-swiper-dots-vertical{right: 0;}
.hswip /deep/  .uni-swiper-dot{width: 10rpx; height: 10rpx;}
.hswip{width: 100%;background: #ffffff;border-radius: 14rpx;height: 80rpx;padding: 0 28rpx 0 28rpx;box-sizing: border-box;box-shadow: 0px 0px 3px 0px #DEDEDE;
	image{width: 36rpx;height: 42rpx;flex: 0 0 auto;margin-right: 16rpx;}
	.swiper{flex: 1;height: 80rpx;
	.swipers{height: 80rpx;}
		.tit{flex: 1;font-weight: 500;font-size: 22rpx;color: #32415F;}
		.time{font-weight: 500;font-size: 20rpx;color: #aaaaaa;flex: 0 0 auto;margin:0 28rpx 0 40rpx;}
	}
}
</style>