<template>
	<view class="content">
		<!-- 第一行 -->
		<view class="title">
			<view v-for="(index,i) in titConten" :key='i' class="title-font"
				:style="{backgroundPositionY:index.position}">
				<view class="font-1">
					{{index.title}}
				</view>
				<view class="font-2">
					{{index.content}}
				</view>
			</view>
		</view>
		<!-- 第二行 -->
		<view class="body">
			<leftIndex></leftIndex>
			<!-- 右边 -->
			<rightIndex></rightIndex>
		</view>
		<!-- </view> -->

	</view>

</template>

<script>
	import leftIndex from '@/components/index/left-body.vue'
	import rightIndex from '@/components/index/right-body.vue'
	export default {
		name: "index-header",
		data() {
			return {
				//title 精灵图 
				titConten: [{
						position: '-650px',
						title: '自由行',
						content: '旅行就要更自在'
					},
					{
						position: '-24px',
						title: '跟团游',
						content: '行程透明省心游'
					},
					{
						position: '-129px',
						title: '当地游',
						content: '最地道的玩法体验'
					},
					{
						position: '-441px',
						title: '机票',
						content: '特惠一折起'
					},
					{
						position: '-546px',
						title: '订酒店',
						content: '一键全网性价比'
					},
					{
						position: '-335px',
						title: '签证',
						content: '出签率高服务佳'
					},
					{
						position: '-233px',
						title: '邮轮',
						content: '移动的海上城堡'
					}

				],
				
			};
		},
		methods: {

		},
		 components:{
			 leftIndex,
			 rightIndex
		 }
	}
</script>

<style lang="scss">
	.content {
		width: 1000px;
		margin: 0 auto;

	}

	//第一行
	.title {
		display: flex;
		justify-content: space-around;
		padding: 20px 0;

		//框内样式
		.title-font {
			border: 1px solid #e5e5e5;
			width: 127px;
			height: 47px;
			background: url(~@/static/index/body/jinglingtu.png) no-repeat;
			// background: url();
			padding: 10px 0 0 5px;
			// background-repeat: no-repeat;
			background-size: 104px auto;
			background-position-x: 60px;

			// background-position-y:-650px;
			//内容1
			.font-1 {
				font-weight: bolder;
			}

			//内容2
			.font-2 {
				font-size: 12px;
				color: #9d9d9d;
				line-height: 20px;
			}
		}
	}
	.body::after {
		content: '';
		clear: both;
		height: 0;
		display: block;
		overflow: hidden;
	}
</style>
