property/user_ui/components/swiper/notice.vue

<template>
  <view v-if="noticelist.length">
	  <view class="hswip flexc" >
	  		<image :src="tztip" class="tipimg"></image>
			<!-- :indicator-color="nactiveColor" :indicator-active-color="activeColor" -->
			<swiper class="swiper" 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="num flexcc">{{ite.num}}</view>
						<image :src="rimg" class="rimg"></image>
						<!-- <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/tips.png'),
			rimg:require('@/static/images/home/rimg.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: 20rpx;height: 100rpx;padding: 0 24rpx 0 26rpx;box-sizing: border-box;box-shadow: 0px 0px 3px 0px #DEDEDE;
	.tipimg{width: 38rpx;height: 40rpx;flex: 0 0 auto;margin-right: 22rpx;}
	.swiper{flex: 1;height: 100rpx;
	.swipers{height: 100rpx;}
		.tit{flex: 1;font-weight: 500;font-size: 26rpx;color: #272707;}
		.num{font-weight: bold;
font-size: 22rpx;min-width: 30rpx;height: 30rpx;padding: 0 4rpx;box-sizing: border-box;background: #D32C26;border-radius: 30rpx;color: #FFFFFF;margin-left: 14rpx;}
		.rimg{width: 14rpx;height: 24rpx;margin-left: 14rpx;}
	}
}
</style>