首页

pages/index/components/advertisement.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="onecontent flex-between">
+		<view class="onecontentleft">
+			现有<text>0元无门槛</text>抵价券 正在出售
+		</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>
+			<view class="onecontentrighttext">购买了10面值优惠券</view>
+		</view>
+		<!-- 小内切圆 -->
+		<view class="after"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+	};
+</script>
+
+<style scoped lang="scss">
+	.onecontent {
+		position: relative;
+		margin-top: -30rpx;
+		padding: 14rpx 28rpx 44rpx 28rpx;
+		width: 100%;
+		background: linear-gradient(92deg, #FCECAA 0%, #fff 100%);
+		border-radius: 40rpx 0rpx 0rpx 0rpx;
+
+		.onecontentleft {
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #333333;
+
+			text {
+				color: #FC851E;
+			}
+		}
+
+		.onecontentright {
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #333333;
+
+			.onecontentrightimage {
+				width: 90rpx;
+
+				.onecontentrightswiper {
+					border: 50%;
+					width: 28rpx;
+					height: 28rpx;
+				}
+			}
+
+		}
+
+		.after {
+			position: absolute;
+			top: -40rpx;
+			right: 0;
+			width: 40rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			text-align: center;
+			background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
+		}
+	}
+</style>