<template>
	<view class='container'>
		
		<view class="sv-y">
			<scroll-view scroll-y>
				<view v-for="(item,index) in 10" :key="index">
					<view class="flex h-200 mar-20">
						<image class="wh-200 br-10" src="/static/logo.png" mode="aspectFill"></image>
						<view class="flex-column fs-28 plr-15 flex-between" style="flex: 1;color:#B3B3B3;font-size: 24rpx;">
							<text class="one-line-ellipsis" style="color: white;font-size: 32rpx;">【双十一单身派对】@DREAM单身畅饮</text>
							<text >2024/11/14 22:00</text>
							<text >地址：郑州市华山路121号磨街文创园</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeIndex: 0,
				itemList: [{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					}
				]
			};
		},
		onLoad() {

		},
		methods: {
			

		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
		display: flex;
		flex-direction: column;
	}

	.good-hot {
		margin: 25rpx;
		height: 160rpx;
		background: rgba(255, 255, 255, 0.03);
		border-radius: 40rpx;
		border: 2px solid rgba(255, 255, 255, 0.11);
		padding: 0 20rpx;
	}

	/* 注意点，测试下来，设置水平滑动也要给一个固定高度 */
	.scroll-view_H {
		margin-top: 30rpx;
		width: 100%;
		white-space: nowrap;
		height: 100rpx;
		flex-direction: row;
	}

	.scroll-view_H view {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 15rpx
	}

	/* 去掉最后一个元素的 margin-right: 16rpx 设置为0 */
	.scroll-view_H view:last-child {
		margin-right: 0;
	}

	.scroll-view_H .fl-item-sel {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		background: #FE42C2;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: white;
	
	}

	.scroll-view_H .fl-item {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: #878787;
	}

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}
	.item {
		display: flex;
		background: url('/static/icon_pk_bg.png');
		border-radius: 20rpx;
		margin: 0 24rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;
	
	}
	
	.scroll-view-x {
		width: 100%;
		white-space: nowrap;
		/* 让内部元素不换行，保证水平排列 */
		overflow-x: auto;
		/* 允许横向溢出滚动 */
	}
	
	.images {
		display: inline-block;
		/* 让元素水平排列 */
		width: 120rpx;
		margin-right: 10px;
	}
</style>