<template>
	<view>
		<van-tabs :active="active" bind:change="onChange">
		  <van-tab :name="1" title="酒店">
			  <view>
				  <van-cell title="酒店" title-class	="titlepadding">
					  <template slot="icon">
						  <image src="" style="width: 50upx;height: 50upx;background-color: #007AFF;border-radius: 50%;"></image>
					  </template>
				  </van-cell>
				  <view class="hotelcontent">
					 <view class="contentleft">
						  <image style="width: 100%;height: 100%;"></image>
					  </view>
					  <view class="contentitle">
						  <view>乐成国际大酒店</view>
						  <view class="contentip">舒适宽敞</view>
					  </view>
					  
				  </view>
			  </view>
		  </van-tab>
		  <van-tab :name="2"  title="商品">
			  <view>
				  <van-cell title="酒店" title-class	="titlepadding">
					  <template slot="icon">
						  <image src="" style="width: 50upx;height: 50upx;background-color: #007AFF;border-radius: 50%;"></image>
					  </template>
				  </van-cell>
				 <view style="border-bottom: 20upx solid #F5F5F5;">
					  <van-card
						title-class="priceClass"
						desc-class="desclass"	
						price-class ="priceClass"
						price="10.00"
						desc="描述信息"
						title="商品标题"
						thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
					  >
					  </van-card>
				 </view>
			  </view>
			 
			  
		  </van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1
			}
		}
	}
</script>

<style lang="scss">
	.titlepadding {
		padding-left: 10upx;
	}
	.hotelcontent {
		display: flex;
		flex-direction: row;
		padding: 18upx 32upx;
		border-bottom: 20upx solid #F5F5F5;

		.contentleft {
			width: 200upx;
			height: 180upx;
			background-color: red;
		}
		.contentitle {
			padding-left: 35upx;
				
			.contentip {
				float: left;
				color: #909399;
				padding-top: 15upx;
				font-size: 24upx;
			}
		}
	}
	.van-card {
		background-color: #fff!important;
	}
    .priceClass {
		color: #303133!important;
		font-size: 28upx!important;
		font-weight: normal!important;
	}
	.desclass {
		color: #909399!important;
		font-size: 24upx;
	}
</style>
