<template>
	<view class="page-container">
		<view class="upper-search" @click="toggleIpt">
			<span>点击搜索</span>
			<uni-icons type="search" size="20"></uni-icons>
		</view>
		<view class="swiper-area">
			<swiper style="overflow: hidden;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#fff" indicator-active-color="#198AFB">
				<swiper-item v-for="(pics, index) in bgList" :key="index">
					<image :src="pics" mode="" style="width: 100%; height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="sliders">
			<view @click="toggleDeviceIn">
				<image src="../../static/DeviceIn.png" mode=""></image>
			</view>
			<view @click="toggleAddDriver">
				<image src="../../static/addDriver.png" mode=""></image>
			</view>
		</view>
		<view class="items">
			<view class="items-upper">
				<image src="/static/hotSale.png" mode=""></image>
				<view style="color: #B0B0B0;" @click="seeMore">查看更多</view>
			</view>
			<view 
				class="single-item"
				v-for="(item, index) in itemList"
				:key="index"
			>
				<image :src="item.url" mode=""></image>
				<h5>
					<span>{{ item.name }}</span>
					<view>
						{{ item.location }}
					</view>
				</h5>
				<h3>
					￥{{ item.pay }}<span style="font-size: 12px;">/月</span>
				</h3>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iptVal: '',
				bgList: [
					'/static/bg1.jpg',
					'/static/bg2.jpg',
					'/static/bg3.jpg',
					'/static/bg4.jpg'
				],
				itemList: [
					{
						url: '/static/bg1.jpg',
						name: '出租160t推土机',
						location: '河北保定',
						pay: '20000'
					},
					{
						url: '/static/bg2.jpg',
						name: '出租170t推土机',
						location: '河北保定',
						pay: '25000'
					},
					{
						url: '/static/bg3.jpg',
						name: '出租180t推土机',
						location: '河北保定',
						pay: '30000'
					},
					{
						url: '/static/bg4.jpg',
						name: '出租200t推土机',
						location: '河北保定',
						pay: '40000'
					},
					{
						url: '/static/bg2.jpg',
						name: '出租250t推土机',
						location: '河北保定',
						pay: '60000'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			clickSearch () {
				console.log(this.iptVal);
			},
			seeMore () {
				console.log(1);
			},
			toggleDeviceIn () {
				uni.navigateTo({
					url: '/pages/deviceIn/deviceIn'
				})
			},
			toggleAddDriver () {
				uni.navigateTo({
					url: '/pages/addDriver/addDriver'
				})
			},
			toggleIpt () {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-container{
		background: linear-gradient(#D1E8FB, #fff);
		box-sizing: border-box;
		padding-top: 20rpx;
		.upper-search{
			width: 95%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			color: #BEBEBE;
			border-radius: 15rpx;
			font-size: 12px;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
		}
		.swiper-area{
			width: 100%;
			margin: 25rpx auto;
		}
		.sliders{
			width: 95%;
			height: 13vh;
			margin: 25rpx auto;
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 10rpx;
			view{
				width: 48%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.items{
			width: 90%;
			margin: 25rpx auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.items-upper{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				margin-bottom: 30rpx;
				image{
					width: 20%;
					height: 40rpx;
				}
			}
			.single-item{
				width: 48%;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				border-radius: 15rpx;
				overflow: hidden;
				background-color: #F9F9F9;
				box-sizing: border-box;
				padding: 0 0 10rpx 0;
				image{
					width: 100%;
					height: 13vh;
					margin-bottom: 8rpx;
				}
				h5{
					width: 90%;
					margin: 0 auto;
					font-weight: normal;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 20rpx;
					view{
						box-sizing: border-box;
						padding: 5rpx 10rpx;
						border-radius: 10rpx;
						border: 1px solid #4594E7;
						color: #4594E7;
					}
				}
				h3{
					width: 90%;
					margin: 0 auto;
					color: #FD4A00;
				}
			}
		}
	}
</style>
