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

<template>
	<view class="panic bg-white">
		<scroll-view style="white-space: nowrap;height: 200rpx;" 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, act_id: 1}}">
					<u-image :src="item.goods_image" :width="width" :height="width" border-radius="10rpx"></u-image>
					<view class="text-center flex row-between m-t-10">
						<price-format class="m-r-10 ele1" :first-size="32" :second-size="26"
							:subscript-size="24" :price="item.activity_price" :weight="500" color="#F20A0A"></price-format>
						<view class="go flex">
							<view>抢</view>
							<u-icon name="play-right-fill" size="12" class="right"></u-icon>
						</view>
					</view>
				</router-link>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "panic-buying",
		props: {
			list: {
				type: [Array, Object],
				default:() => ([])
			},
			width: {
				type: Number,
				default: 140
			}
		}
	}
</script>

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

		.item {
			width: 200rpx;
		}
		
		.go {
			background-color: #FF0E3C;
			color: #fff;
			padding: 0 6px;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
		
		.right {
			margin-left: 4rpx;
		}
	}
</style>