<template>
	<view class="recycling">
		<scroll-view scroll-x class="recycling-hd">
			<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">
				<text>今天</text>01-10
			</view>
			<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">
				<text>明天</text>01-11
			</view>
			<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">
				<text>周五</text>01-11
			</view>
			<view class="item" :class="tabIndex == 3?'item-on':''" @click="tabItem(3)">
				<text>周六</text>01-11
			</view>
		</scroll-view>
		<view class="recycling-bd">
			<view class="item" v-for="i in 10" :key="i" :class="tabIndex1 == i?'item-on':''" @click="tabItem1(i)">
				19:30<text>夜间</text>
			</view>
		</view>
		<view class="recycling-fd">
			<view class="a"><u-divider>实际到达时间可能会有30分钟浮动</u-divider></view>
			<view class="b" @click="openPage()">确定选择</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return {
				tabIndex1: 1,
				tabIndex: 0
			}
		},
		methods: {
			tabItem1(i) {
				this.tabIndex1 = i
			},
			tabItem(i) {
				this.tabIndex = i
			},
			openPage(){
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.recycling{
		min-height: 100vh;
		padding-bottom: 210rpx;
		overflow: hidden;
		&-hd{
			padding: 30rpx;
			background-color: #FFFFFF;
			white-space: nowrap;
			box-sizing: border-box;
			.item{
				width: 220rpx;
				height: 130rpx;
				text-align: center;
				font-size: 26rpx;
				border-radius: 12rpx;
				display: inline-block;
				margin-left: 20rpx;
				color: #5c5c5c;
				border: 1px solid #f5f5f5;
				background-color: #f5f5f5;
				text{
					display: block;
					font-size: 30rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}
				&:first-child{
					margin-left: 0;
				}
				&-on{
					border-color: #fdeded;
					color: #D22C24;
					background-color: #fdeded;
				}
			}
		}
		&-bd{
			overflow: hidden;
			.item{
				width: 160rpx;
				height: 90rpx;
				text-align: center;
				font-size: 28rpx;
				color: #212121;
				border-radius: 10rpx;
				float: left;
				margin-left: 20rpx;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				position: relative;
				overflow: hidden;
				border: 1px solid #FFFFFF;
				text{
					position: absolute;
					right: 0;
					top: 0;
					display: block;
					width: 52rpx;
					line-height: 30rpx;
					background: #F3E7D7;
					font-size: 20rpx;
					font-weight: 500;
					color: #B18A55;
					border-radius: 0 5rpx 0 5rpx;
				}
				&-on{
					border-color: #D22C24;
					background-color: #FDEDED;
					color: #D22C24;
				}
			}
		}
		&-fd{
			width: 100%;
			height: 200rpx;
			background-color: #FFFFFF;
			padding: 15rpx 25rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			.a{
				font-size: 28rpx;
				font-weight: 400;
				color: #727272;
			}
			.b{
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: #D22C24;
				border-radius: 90rpx; 
				text-align: center;
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}
	}
</style>