首頁組件

pages/index/components/advertisement.vue

@@ -1,15 +1,27 @@
 <template>
 	<view class="onecontent flex-between">
 		<view class="onecontentleft">
-			现有<text>0元无门槛</text>抵价券 正在出售
+			现有{{bannervo.coupons}}人以免单
 		</view>
+
 		<view class="onecontentright flex-start">
-			<view class="onecontentrightimage flex-start">
-				<u-swiper class="onecontentrightswiper" circular style="width: 100%;" nextMargin="50" :list="list1"
-					height='28'></u-swiper>
+			<view class="onecontentrightimage">
+				<view class="onecontentrightimageabsolute">
+					<u-swiper circular previousMargin='30' nextMargin="30" :list="bannervo.counponsInfo" keyName="logo"
+						radius="14" height='28' bgColor='none' imgMode='aspectFit'></u-swiper>
+				</view>
+				
+				<!-- <view class="onecontentrightimageabsolutetow">
+					<u-swiper circular previousMargin="30" nextMargin="30" :list="bannervo.logo" keyName="coverImg"
+						radius="14" height='28' bgColor='none' imgMode='aspectFit'></u-swiper>
+				</view> -->
 			</view>
 			<view class="onecontentrighttext">
-				text1
+				<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
+					<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
+						{{item.name}}已省{{item.money}}元钱
+					</swiper-item>
+				</swiper>
 			</view>
 		</view>
 		<!-- 小内切圆 -->
@@ -21,15 +33,30 @@
 	export default {
 		data() {
 			return {
-				list1: [
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-				],
-				text1:'开箱即用',
-					
+				isScroll: false,
+				minCount: 0,
+				fontColor: 'black'
 			};
 		},
+		props: {
+			bannervo: {
+				type: Object,
+				default () {
+					return {
+						coupons: '',
+						logo: []
+					}
+				}
+			},
+			title: {
+				type: String,
+				default: '每日特价'
+			},
+			img: {
+				type: String,
+				default: ''
+			},
+		},
 	};
 </script>
 
@@ -53,19 +80,63 @@
 			}
 		}
 
+
+
 		.onecontentright {
 			font-family: Source Han Sans CN, Source Han Sans CN;
 			font-weight: 400;
 			font-size: 24rpx;
 			color: #333333;
 
+
 			.onecontentrightimage {
 				width: 90rpx;
+				position: relative;
+				overflow: hidden;
+				height: 28rpx;
 
-				.onecontentrightswiper {
-					border: 50%;
-					width: 28rpx;
+				.onecontentrightimageabsolute {
+					width: 100%;
+					left: 0;
+					top: 0;
+					position: absolute;
+					z-index: 9;
+				}
+
+
+				.onecontentrightimageabsolutetow {
+					width: 100%;
+					left: 14rpx;
+					top: 0;
+					position: absolute;
+					z-index: 10;
+				}
+
+				// .onecontentrightswiper {
+				// 	border: 50%;
+				// 	width: 28rpx;
+				// 	height: 28rpx;
+				// 	background: red;
+				// }
+			}
+
+			.onecontentrighttext {
+				width: 232rpx;
+
+				.swiper {
 					height: 28rpx;
+					// width: 232rpx;
+
+					.swiperitem {
+						width: 100rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #333333;
+						overflow: hidden; //超出的文本隐藏
+						text-overflow: ellipsis; //溢出用省略号显示
+						white-space: nowrap; //溢出不换行
+					}
 				}
 			}