<template>
	<view class="page">
		<u-navbar title="存取杆" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='50' id="navbar">
		</u-navbar>
        <view class="toplist">
        	<view class="one">
        		<view class=""></view> 空闲
        	</view>
			<view class="one">
				<view class="" style="background-color: #48893B;"></view> 选中
			</view>
			<view class="one">
				<view class="" style="background-color: #FFCBCB;"></view> 已被租用
			</view>
        </view>
		<view class="bd">
			<view class="name">
				存杆柜
			</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in 10" :key="INDEX">
					1号
				</view>		
			</view>
		</view>
		
		<view class="anniu" @click="btnzu">
			立即租用
		</view>
		<view class="annius" @click="btnzujl">
			租用记录
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
			}
		},
		onLoad() {

		},
		methods: {
		    // 点击跳转到立即租用
			 btnzu(){
				 
			 },
			 // 点击跳转到租用记录
			 btnzujl(){
				 
			 }
		}
	}
</script>

<style lang="scss">
	/deep/ .u-iconfont,
	/deep/ .u-title{
		padding-bottom: 20rpx;
	}
	.anniu{
		width: 674rpx;
		height: 96rpx;
		background: #48893B;
		border-radius: 53rpx 53rpx 53rpx 53rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		margin: auto;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 258rpx;
	}
	.annius{
		width: 674rpx;
		height: 96rpx;
		border-radius: 53rpx 53rpx 53rpx 53rpx;
		border: 2rpx solid #48893B;
		text-align: center;
		line-height: 96rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #48893B;
		margin: auto;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120rpx;
	}
	.bd{
		.ul{
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			display: flex;
			flex-wrap: wrap;
			padding:0 32rpx;
			box-sizing: border-box;
		    .li:nth-child(4n) {
               margin-right: 0;
             }   
			.li{
				width: 140rpx;
				height: 88rpx;
				background: #DEF1DA;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-top: 30rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: 600;
				margin-right: 18rpx;
			}
		}
		padding: 0 36rpx;
		box-sizing: border-box;	
		.name{
			font-weight: 600;
			font-size: 40rpx;
			color: #3D3D3D;
			border-left: 8rpx solid  #48893b;
			padding-left: 16rpx;
			box-sizing: box;
		}
	}
	.toplist{		
		display: flex;
		padding: 56rpx 36rpx;
		box-sizing: border-box;
		.one{
			display: flex;
			align-items: center;
			margin-right: 56rpx;
			view{
				margin-right: 18rpx;
				width: 44rpx;
				height: 44rpx;
				background: #DEF1DA;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}
	page {
		background: #F6F6F6;
	}


</style>