<template>
	<view class="">
		<view class="fourcontent">
			<u-scroll-list indicatorActiveColor="#6C6E8D" indicatorWidth='40' :indicator="false">
				<view class="scrollfourcontent" v-for="(item, index) in  list" :key="index"
					@click="eeInfo(item)">
					<view class="scrollfourcontenttitem flex-colum">
						<image class="scrolltowcontentitem_image" :src="item.img" mode="aspectFill"></image>
						<view class="scrolltowcontentitem_one">
							{{item.title}}
						</view>
						<view class="scrolltowcontentitem_tow">
							{{item.price}}
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			data: {
				type: Number,
				default: 0
			},

		},
		methods: {
			eeInfo(e) { //热门项目
				uni.pro.navigateTo('order/orderInfo', {
					id: e.id,
				})
			},
		}
	}
</script>

<style lang="scss">
	.fourcontent {
		margin-left: 8rpx;

		.scrollfourcontent {
			padding: 22rpx 0;

			.scrollfourcontenttitem {
				width: 280rpx;
				margin-left: 30rpx;
				align-items: flex-start;
				padding-bottom: 16rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 6rpx 2px rgba(0, 0, 0, 0.16);
				border-radius: 18rpx;

				.scrolltowcontentitem_image {
					border-top-left-radius: 18rpx;
					border-top-right-radius: 18rpx;
					width: 280rpx;
					height: 292rpx;
				}

				.scrolltowcontentitem_one {
					padding-left: 16rpx;
					padding-top: 16rpx;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #28292D;
				}

				.scrolltowcontentitem_tow {
					margin-left: 16rpx;
					margin-top: 8rpx;
					font-size: 24rpx;
					font-family: Roboto-Bold, Roboto;
					font-weight: bold;
					color: #F45C4C;
				}
			}
		}
	}
</style>