property/user_ui/components/swiper/notice.vue

<template>
  <view v-if="noticelist.length">
	  <view class="hswip" >
			<image :src="tips" class="tipimg"></image>
			  
	  		<image :src="voice" class="voiceimg"></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.communityId)">
						<!-- <view class="tit over">{{ite.noticeTitle}}</view> -->
						<view class="tit over">{{ite.communityTitle}}</view>
						<!-- <view class="num flexcc">{{ite.num}}</view> -->
						<!-- <image :src="rimg" class="rimg"></image> -->
						<view class="time">{{ite.publishTime}}</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{
			tips:require("@/static/images/home/tips.png"),
			voice: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: 20rpx;height:156rpx;padding: 32rpx 28rpx 0 24rpx;box-sizing: border-box;box-shadow: 0px 0px 6rpx 0px #DEDEDE;position: relative;
	.tipimg{width: 168rpx;height: 32rpx;flex: 0 0 auto;margin-right: 22rpx;margin-bottom: 2rpx;}
	.voiceimg{width: 96rpx;height: 82rpx;position: absolute;right: 26rpx;top: 12rpx;}
	.swiper{flex: 1;height: 72rpx;z-index: 1;
	.swipers{height: 72rpx;padding-right: 60rpx;}
		.tit{flex: 1;font-weight: 500;font-size: 26rpx;color: #272707;}
		.time{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
		.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>