<template>
	<view class="home">
		<!-- swiper -->
		<view class="home-swiper">
			<uni-swiper-dot :info="info" :current="current1" :mode="mode" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change1" circular>
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item" @click="goGoodsDetail(item.pic_url)">
							<image style="width: 100%;height:386rpx;" :src="item.img"
								mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 金刚图 -->
		<view class="home-nav">
			<view class="home-nav-item" v-for="item in navList">
				<image style="width: 101.96rpx;height: 103.96rpx;" :src="item.img" mode=""></image>
				<text style="color: #333;font-size: 24rpx;margin-top: 18rpx; ">{{item.name}}</text>
			</view>
		</view>

		<!-- 活动专区 -->
		<view class="home-special-area">
			<view class="home-special-area-left">
				<text>西部活动专区</text>
				<image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon//symbol.png" mode=""></image>
			</view>
			<view @click="goSpecialList" class="home-special-area-right">
				<text >全部</text>
				<image style="width: 12rpx; height: 20rpx;margin-left: 8rpx; " src="/static/icon//right01.png" mode="">
				</image>
			</view>
		</view>

		<!-- 活动图片 -->
		<view class="home-special-img">
			<view class="ListItem" v-for="item in specialList">
				<image style="width: 312rpx;height: 200rpx;" :src="item.img" mode=""></image>
				<view class="kudosicon">
					<image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos.png" v-if="false"></image>
					<image style="width:24rpx;height: 24rpx;" src="/static/icon/Kudos(1).png"></image>
				</view>
				<text style="color: #333;font-weight: bold;font-size: 28rpx;">{{item.name}}</text>
			</view>
		</view>

		<!-- 广告图 -->
		<view class="home-banner">
			<view class="home-banner-img">
				<image style="width: 100%; height: 576rpx; border-radius: 12rpx;  " src="/static/icon/swiper01.png" mode=""></image>
				<image class="img-clean" style="width: 20rpx; height: 20rpx; " src="/static/icon/clean.png" mode=""></image>
				<view class="img-IHg">
					<image style="width: 64rpx; height: 58rpx; " src="/static/icon/vip.png" mode=""></image>
				</view>
			</view>
			
		</view>
		
		<!-- 广告的附图 -->
		<view class="home-attach">
			
		</view>

		<!-- 酒店推荐 -->
		<view class="home-hotel home-special-area">
			<view class="home-special-area-left">
				<text>酒店商品推荐</text>
				<image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon//symbol.png" mode=""></image>
			</view>
		</view>

		<!-- 酒店推荐图片 -->
		<view class="home-hotel-img">
			<view class="home-hotel-img-more">
				<text>查看更多商品</text>
			</view>
		</view>

		<!-- 酒店品牌 -->
		<view class="home-brand home-special-area">
			<view class="home-special-area-left">
				<text>洲际酒店集团品牌</text>
				<image style="width:16rpx;height: 16rpx;margin-left: 14rpx;" src="/static/icon//symbol.png" mode=""></image>
			</view>
		</view>


		<!-- 酒店品牌图片 -->
		<view class="home-brand-img"></view>


		<!-- 触底 -->
		<view class="home-bottom">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>
		</view>


		<view style="height:168rpx; background-color: #f9f9f9; "></view>
		<tab-bar></tab-bar>
	</view>

</template>

<script>
	import TabBar from '../../components/TabBar/tabbar.vue'
	import SwiperBox from '../../components/SwiperBox/index.vue'
	export default {
		components: {
			TabBar,
			SwiperBox
		},
		data() {
			return {
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//轮播图
				info: [
					{
						img:require('../../static/icon/swiper01.png'),
						name:'酒店预订'
					},
				],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
				},
				//指示点显示位置
				current1: 0,
				current2: 0,
				//指示点模式
				mode: 'default',
				// 金刚图
				navList: [
					{
						img:require('../../static/icon/nav01.png'),
						name:'酒店预订'
					},
					{
						img:require('../../static/icon/nav02.png'),
						name:'投票活动'
					},
					{
						img:require('../../static/icon/nav03.png'),
						name:'IHG西区地图'
					},
					{
						img:require('../../static/icon/nav04.png'),
						name:'了解产品'
					},
					{
						img:require('../../static/icon/nav05.png'),
						name:'周边游'
					},
				],
				
				//活动专区
				specialList:[
					{
						img:require('../../static/icon/special01.png'),
						name:'IHG最受欢迎酒店'
					},
					{
						img:require('../../static/icon/special01.png'),
						name:'成都最好玩的地方'
					},
					{
						img:require('../../static/icon/special01.png'),
						name:'IHG最受欢迎酒店'
					},
					{
						img:require('../../static/icon/special01.png'),
						name:'IHG成都最好玩的地方'
					},
					{
						img:require('../../static/icon/special01.png'),
						name:'IHG最受欢迎酒店'
					},
				]
				
			}
		},

		onLoad() {},
		methods: {
			//活动列表
			goSpecialList(){
				uni.navigateTo({
					url:'/pages/index/active-list/index'
				})
			},
			// 切换轮播图指示点
			change1(e) {
				this.current1 = e.detail.current;
			},

		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f9f9f9;
	}
	.home {
		height: 100%;
		background-color: #f9f9f9;
	}

	.home-swiper {
		height: 386rpx;
		.swiper-box{
			height: 386rpx;
		}
	}

	.home-nav {
		height: 258rpx;
		// background-color: purple;
		border-radius: 24rpx 24rpx 0px 0px;
		padding-top: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.home-nav-item {
			width: 20%;
			flex: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.home-special-area {
		height: 146rpx;
		padding: 0 30rpx;
		// background-color: deeppink;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.home-special-area-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #333;
			font-size: 36rpx;
			font-weight: 800;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 34rpx;
				background: linear-gradient(180deg, #FF6200 0%, #FF4C00 100%);
				border-radius: 3rpx;
				margin-right: 8rpx;
				margin-top: 2rpx;
			}
		}

		.home-special-area-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 30rpx;
			color: #999;
		}
	}

	.home-special-img {
		height: 280rpx;
		padding: 0 30rpx;
		// background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow-x: scroll;
		.ListItem {
			width: 312rpx;
			height: 240rpx;
			position: relative;
			margin-right: 24rpx;
			.kudosicon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 28rpx;
				top:16rpx;
				border-radius: 50%;
				background: #FFFFFF;
				opacity: 0.84;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.ListItem:last-child{
			margin-right: 0;
		}
	}

	.home-banner {
		height: 640rpx;
		padding: 0 30rpx;
		padding-top: 64rpx;
		// background-color: #fff;
		.home-banner-img{
			position: relative;
			.img-clean{
				position: absolute;
				right: 28rpx;
				top: 30rpx;
			}
			.img-IHg{
				width: 84rpx;
				height: 84rpx;
				background-color: #fff;
				box-shadow: 0px 8rpx 24rpx 0px rgba(220,222,229,0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: -72rpx;
				right: 0;
				
			}
		}
	}
	
	.home-attach{
		height: 156rpx;
		background-color: red;
	}
	
	.home-hotel {
		height: 124rpx;
		background-color: #f9f9f9;
	}

	.home-hotel-img {
		height: 1100rpx;
		background-color: #F9f9f9;
		padding: 20rpx 30rpx;
		.home-hotel-img-more{
			height: 70rpx;
			background-color: #fff;
			border-radius: 10rpx;
			border: 2rpx solid #ddd;
			font-size: 28rpx;
			color: #5A5A5A;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.home-brand {
		height: 124rpx;
		background-color: #f9f9f9;
	}

	.home-brand-img {
		height: 200rpx;
		background-color: chocolate;
	}

	.home-bottom {
		height: 60rpx;
		background-color: #f9f9f9;
	}
</style>
