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 p-t-20">
				<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 p-t-20">
				<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">
					<router-link v-for="(item, index) in list.lists" :key="index" class="p-r-20" :to="{path: '/pages/goods_details/goods_details', query: {id: item.goods_id, activity_sn: item.activity_sn}}">
						<u-image :src="item.goods_image" width="260rpx" height="260rpx" border-radius="10rpx"></u-image>
						<view class="price-block flex">
							<view class="bold text-center price">
								<text class="sm">￥</text>
								<text class="xl">{{item.activity_price}}</text>
							</view>
							<view class="yellow">
								<u-image class="go" :src="aliOSSDomain + '/uniapp/qiang.png'" width="40rpx" height="40rpx" border-radius="10rpx"></u-image>
							</view>
						</view>
					</router-link>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "panic-buying",
		props: {
			list: {
				type: [Array, Object],
				default:() => ([])
			}
		},
		data() {
			return {
			}
		}
	}
</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>