首页部分提交

pages/index/components/advertisement.vue

@@ -3,11 +3,12 @@
 		<view class="onecontentleft" v-if="bannervo">
 			现有<text style="color: #FC851E;font-size: 24rpx;">
 				{{bannervo.coupons==null?116:bannervo.coupons}}人
+				<!-- {{bannervo.coupons==null?116:bannervo.coupons}}人 -->
 			</text>
 			已免单
 		</view>
 		<view class="onecontentright flex-start">
-			<view class="onecontentrightimage" v-if="bannervo">
+			<!-- <view class="onecontentrightimage" v-if="bannervo">
 				<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
 					<view class="swiperItem" v-for="(item, index) in bannervo.counponsInfo" :key="index"
 						:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
@@ -16,17 +17,24 @@
 						</view>
 					</view>
 				</view>
+			</view> -->
+			<view style="overflow: hidden;width: 100rpx;">
+				<view style="width: 600rpx;" class="swiperstyle">
+					<image style="width: 30rpx;height: 30rpx;border-radius: 50%;display: inline-block;"
+						v-for="(item, index) in listData" :key="index" :src="item.logo">
+					</image>
+				</view>
 			</view>
 			<view class="onecontentrighttext">
 				<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
-					<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
+					<swiper-item class="swiperitem" v-for="(item,index) in bannervo" :key="index">
 						{{item.name}}已省{{item.money}}元钱
 					</swiper-item>
 				</swiper>
 			</view>
 		</view>
 		<!-- 小内切圆 -->
-		<view class="after"></view>
+		<!-- <view class="after"></view> -->
 	</view>
 </template>
 
@@ -35,7 +43,9 @@
 		defineProps,
 		onBeforeUnmount,
 		reactive,
-		defineExpose
+		defineExpose,
+		ref,
+		watch
 	} from 'vue';
 	const props = defineProps({
 		bannervo: {
@@ -51,6 +61,13 @@
 			}] // 
 		}
 	});
+
+	const listData = ref()
+	const listdataNumber = ref(4)
+	watch(() => props.bannervo, (n, o) => {
+		listData.value = [...props.bannervo,...props.bannervo]
+	})
+
 	const slideNote = reactive({
 		x: 0,
 		y: 0
@@ -137,6 +154,11 @@
 			align-items: center;
 			justify-content: center;
 
+			.swiperstyle {
+				position: relative;
+				animation: animationName 5s linear infinite;
+			}
+
 			.onecontentrightimage {
 				width: 65rpx;
 				position: relative;
@@ -207,7 +229,7 @@
 
 			.onecontentrighttext {
 				width: 232rpx;
-
+margin-left: 20rpx;
 				.swiper {
 					height: 28rpx;
 					// width: 232rpx;
@@ -239,4 +261,16 @@
 			z-index: 9999;
 		}
 	}
+
+	@keyframes animationName {
+		0% {
+			/* 动画开始时的样式 */
+			left: 0;
+		}
+
+		100% {
+			/* 动画结束时的样式 */
+			left: -290rpx;
+		}
+	}
 </style>