shop_uniapp/components/panic-buying/panic-buying.vue

<template>
	<view class="panic bg-white">
		<view class="title flex row-between m-l-20 m-r-20">
			<view class="flex">
				<u-image :src="aliOSSDomain + 'uniapp/panic.png'" width="180rpx" height="90rpx"></u-image>
				<u-image class="m-l-10" :src="aliOSSDomain + 'uniapp/hot_goods.png'" width="40rpx" height="40rpx"></u-image>
				<text class="bold lg">好货天天抢</text>
			</view>
			<view class="sm">
				<router-link to="/bundle_b/pages/panic_buying/index">
					更多
					<u-icon name="arrow-right" />
				</router-link>
			</view>
		</view>
		
		<view class="m-l-20 m-t-20">
			<scroll-view style="white-space: nowrap;" scroll-x="true" scroll-with-animation="true">
				<view class="flex item">
					<view v-for="(item, index) in 10" :key="index" class="p-r-20">
						<u-image :src="'https://dlh.hainings.com/uploads/images/20240808092803025468829.png'" width="200rpx" height="200rpx" border-radius="10rpx"></u-image>
						<view class="price-block flex">
							<view class="bold text-center price">
								<text class="sm">￥</text>
								<text class="xl">100</text>
							</view>
							<view class="yellow">
								<u-image class="go" :src="'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/qiang.png'" width="40rpx" height="40rpx" border-radius="10rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "panic-buying",
		data() {
			return {
				list: [
					{image: 'https://dlh.hainings.com/uploads/images/20240808092803025468829.png', price: 79}
				]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.panic {
		border-radius: 14rpx;

		.item {
			width: 200rpx;
		}
		
		.price-block {
			position: relative;
			margin: 20rpx 0;
			width: 100%;
			background-color: #ff3737;
			border-radius: 10rpx;
			color: #fff;
			height: 40rpx;
			line-height: 40rpx;
			
			.price {
				width: 100%;
				text-align: center;
				margin: 0 auto;
			}
			
			.yellow {
				position: absolute;
				top: 0;
				left: -2rpx;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				background-image: linear-gradient(117deg, #ff8f2c 0%, #fff 100%);
				width: 50rpx;
				height: 40rpx;
				text-align: center;
				margin: 0 auto;
				
				.go {
					position: absolute;
					top: 0;
					left: 0;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>