<template>
	<view class='container'>
		<view class="mlr-24">
			<u-swiper :list="swiperList" circular :autoplay="true" radius="5" bgColor="#000" height="200"></u-swiper>
		</view>
		<view class="good-hot">
			<scroll-view scroll-x enable-flex class="scroll-view_H">
				<view v-for="(item,index) in 10" :key="index" @click="timeIndex=index">
					<view :class="timeIndex==index?'fl-item-sel':'fl-item'">
						<text>周四</text>
						<text>11.14</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view v-for="(item,index) in 10" :key="index">
					<view class="flex mlr-24 mb-30" @click="$wskj.to('/pages/tabtwo/ydxq')"
						style="color: #878787;border-radius: 20rpx;">
						<image class="wh-256" src="/static/logo.png"></image>
						<view class="flex-column fs-28 plr-20 flex-between" style="flex: 1;">
							<text class="fs-32" style="color: white;">花海LIVEHOUSE</text>
							<view class="ptb-15">
								<text class="fs-24 br-4 ptb-5 plr-15" style="color: #FFC100;border: 1px solid #FFC100;">热门流行音乐</text>
								<text class="fs-24 br-4 ptb-5 plr-15 ml-10" style="color: #FF7400;border: 1px solid #FF7400;">热门流行舞蹈</text>
							</view>
							<view class="flex">
								<view class="flex-column" style="flex: 1;">
								<view class="flex-column fs-24" style="color: #868686;">
									<text>周末低消3000起</text>
									<text>可容纳最多12人</text>
								</view>
								<view class="flex mt-10" style="color:#FE42C2;align-items: flex-end;">
									<text class="fs-46">￥500 </text>
									<text class="fs-28 ml-10 mb-5">起</text>
								</view>
								</view>
								<view class="flex"  style="align-items: flex-end;">
									<image class="wh-100" src="/static/icon_dk_ljyd.png"></image>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeIndex: 0,
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				cqList: [{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌'
					}
				],
			};
		},
		onLoad() {

		},
		methods: {
			clickOne(e) {
				//console.log()
				this.labelColorOne = true
				this.labelColorTwo = false
				this.labelColorThree = false
				this.iconTwo = '/static/icon_sx_cg.png'
				this.iconThree = '/static/icon_sx_cg.png'
			},
			clickTwo(e) {
				this.labelColorOne = false
				this.labelColorTwo = true
				this.labelColorThree = false
				this.iconThree = '/static/icon_sx_cg.png'
				if (this.iconTwo == '/static/icon_sx_x.png') {
					this.iconTwo = '/static/icon_sx_s.png'
				} else {
					this.iconTwo = '/static/icon_sx_x.png'
				}
			},
			clickThree(e) {
				this.labelColorOne = false
				this.labelColorTwo = false
				this.labelColorThree = true
				this.iconTwo = '/static/icon_sx_cg.png'
				if (this.iconThree == '/static/icon_sx_x.png') {
					this.iconThree = '/static/icon_sx_s.png'
				} else {
					this.iconThree = '/static/icon_sx_x.png'
				}
			}

		},
	};
</script>

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

	.good-hot {
		margin: 25rpx;
		height: 160rpx;
	}

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

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

	/* 去掉最后一个元素的 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: #FFFFFF;
	}

	.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;
		/* 允许纵向滚动 */
	}
</style>