zhihuixiaoyuan2-ui/components/home/luswiper.vue

<template>
  <view>
	  <view class="hlu flexc" @click="getRoad">
	  		<image :src="hcroad"></image>
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration" vertical='true'>
				<swiper-item>
					<view class="swipera over">
						<text class="tit coeb">拥堵</text>
						<!-- <text class="tit co5c">畅通</text> -->
						<text class="over">黄山路与潜山路交口当前较为拥堵！</text>
					</view>
				</swiper-item>
				<swiper-item >
					<view class="swipera over">
						<!-- <text class="tit coeb">拥堵</text> -->
						<text class="tit co5c">畅通</text>
						<text class="over"> 黄山路与潜山路交口当前较为拥堵！</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swipera over">
						<text class="tit coeb">拥堵</text>
						<!-- <text class="tit co5c">畅通</text> -->
						<text class="over"> 黄山路与潜山路交口当前较为拥堵！</text>
					</view>
				</swiper-item>
			</swiper>
	  		
	  </view>
  </view>
</template>

<script>
  export default {
	  props:{
	  	autoplay: {
	  		type: Boolean,
	  		default () {
	  			return false
	  		}
	  	},
	  	confdat:{}
	  	// status:{
	  	// 	type: String,
	  	// 	default () {
	  	// 		return 'add'
	  	// 	}
	  	// },
	  	// iteminfo:{},
	  	// xmjzinfo:{},
	  },
	data(){
		return{
			hcroad:require('@/static/images/hcroad.png'),
            interval: 2000,
            duration: 500
		}
	},
	methods:{
		 getRoad(){
		 	console.log(1)
		 },
	},
	onLoad: function() {
    }
  }
</script>

<style lang="scss" scoped>
.hlu{height: 90rpx;background: #FFFFFF;border-radius: 18rpx;margin: 0 34rpx;padding: 0 25rpx;font-size: 30rpx;
	image{width: 70rpx;height: 40rpx;flex: 0 0 auto;margin-right: 26rpx;}
	.tit{
		font-size: 30rpx;position: relative;
		padding:0 32rpx 0 27rpx;font-weight: bold;flex: 0 0 auto;
		&::before{content: '';position: absolute;left: 0;width: 12rpx;height: 12rpx;border-radius: 50%;top: 12rpx;}
		&::after{content:'';position: absolute;right: 14rpx;top: 6rpx;bottom: 6rpx;width: 4rpx;background-color: #666666;}
		&.coeb{color: #EB5663;
			&::before{background-color: #EB5663;}
		}
		&.co5c{color: #5CC37D;
			&::before{background-color: #5CC37D;}
		}
	}
	.swiper{flex: 1;height: 90rpx;
	.swipera{height: 100%;display: flex;align-items: center;overflow: hidden;}
	}
}
</style>