prevent_drowning_app/components/swiper/notice.vue

<template>
  <view v-if="noticelist.length">
	  <view class="hswip" >
			<!--  -->
			<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="cir"></view>
						<!-- <view class="tit over">您的孩子 <text>{{ite.tit}}</text> 疑似在河中游泳，请尽快确认是…</view> -->
						<view class="tit over">{{ite.noticeTitle}}</view>
						<!-- <view class="time">{{ite.publishTime}}</view> -->
					</view>
				</swiper-item>
			</swiper>
	  		
	  </view>
  </view>
</template>

<script>
  export default {
	  props:{
	  	autoplay: {
	  		type: Boolean,
	  		default () {
	  			return false
	  		}
	  	},
	  	confdat:{},
		activeColor:{
			type:String,
			default () {
				return '#90BFFF'
			}
		},
		nactiveColor:{
			type:String,
			default () {
				return '#F0F0F0'
			}
		},
		noticelist:{
			type: Array,
			default () {
				return []
			}
		}
	  },
	data(){
		return{
            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: 14rpx;}
.hswip /deep/  .uni-swiper-dot{width: 10rpx; height: 10rpx;margin-bottom: 14rpx;}
// width: 100%;background: #ffffff;border-radius: 20rpx;
.hswip{position: relative;width: 100%;padding: 0 12rpx;
	.swiper{flex: 1;height: 88rpx;z-index: 1;
	.swipers{height: 88rpx;padding: 0 60rpx 0 12rpx;box-sizing: border-box;}
		.tit{flex: 1;font-weight: 500;font-size: 26rpx;color: #000000;
			text{color: #3575FD;padding: 0 6rpx;}
		}
		.time{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
		.cir{width: 10rpx;height: 10rpx;background: #EE474B;border-radius: 50%;margin-right: 16rpx;}
	}
}
</style>