<template>
		<!-- 左边 -->
		<view class="body-left">
			<!-- 左 标题栏 -->
			<view class="left-title">
				<navigator url="#">
					<image src="../../static/index/body/left-title.png" style="width: 218px;height: 31px;"></image>
				</navigator>
			</view>
			<!-- 左 专栏 -->
			<view class="left-column">
				<view class="column-title">
					<navigator url="#" class="titColor">旅行家专栏</navigator>
					<navigator url="#" class="titIndex">专栏首页</navigator>
				</view>
				<view>
					<!-- 原生轮播 -->
					<swiper :indicator-dots="true" :autoplay="false" circular="true" class="left-banner">
						<swiper-item style="height: 500px;" v-for="(item,i) in banner" :key='i'>
							<navigator :url="item.url">
								<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner img">
								</image>
							</navigator>
		
							<view style="padding: 5px 10px;">
								<navigator :url="item.url">
									<view class="banner-left">{{item.title}}</view>
								</navigator>
		
								<view class="banner-right">{{item.detail}}</view>
							</view>
		
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 左 专栏下 -->
			<view class="left-hostList">
				<!-- 专栏下 盒子box -->
				<view class="hostList-box" v-for="(item,index) in hostList" :key='index'>
					<view class="column-title">
						<text class="hostList_title_left">{{item.leftTitle}}</text>
						<navigator :url="item.url" class="titIndex">{{item.rightTitle}}</navigator>
					</view>
					<view>
						<navigator :url="item.url">
							<image :src="item.src" mode="" class="img"></image>
						</navigator>
					</view>
					<view style="padding: 5px 10px; ">
						<navigator :url="item.url">
							<view class="banner-left">
								{{item.title}}
							</view>
						</navigator>
						<view class="banner-right">
							{{item.detail}}
						</view>
					</view>
				</view>
			</view>
			<!-- 左 最新资讯 -->
			<view class="left-new">
				<view class="new-title">
					<view>马蜂窝</view>
					<navigator url="#">
						旅游网
					</navigator>
					<view>最新资讯</view>
				</view>
				<view class="new-info">
					<view class="info-box" v-for="(item,index) in newInfo" :key='index'>
						<text>{{item.leftTitle}}</text>
						<navigator url="#" >
							{{item.rightTitle}}
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
</template>

<script>
	export default {
		data() {
			return {
				//左栏小轮播
				banner: [{
						src: '../../static/index/banner/1.jpeg',
						url: '#',
						title: '夏木尼，小王子的玫瑰城市',
						detail: '夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。'
					},
					{
						src: '../../static/index/banner/2.jpeg',
						url: '#',
						title: '暹粒油淋鱼',
						detail: '默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。'
					},
					{
						src: '../../static/index/banner/3.jpeg',
						url: '#',
						title: '西安：旧长安的画皮',
						detail: '西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。'
					},
					{
						src: '../../static/index/banner/4.jpeg',
						url: '#',
						title: '漫山岛',
						detail: '漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。'
					},
					{
						src: '../../static/index/banner/5.jpeg',
						url: '#',
						title: ' 胡日尔镇的美术馆',
						detail: '我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。'
					}
				],
				//左下资料
				hostList: [{
						leftTitle: '旅游攻略推荐',
						rightTitle: '更多>',
						src: '../../static/index/hostList/1.jpg',
						url: '#',
						title: '青海湖环线自驾一网打尽油菜花+盐湖+祁连山',
						detail: ''
					},
					{
						leftTitle: '最新活动',
						rightTitle: '查看全部>',
						src: '../../static/index/hostList/2.jpg',
						url: '#',
						title: '潮玩旅行路书',
						detail: '来定制路书，跟哈弗一起去潮玩！'
					},
					{
						leftTitle: '未知旅行实验室',
						rightTitle: '查看更多>',
						src: '../../static/index/hostList/3.jpg',
						url: '#',
						title: '',
						detail: ''
					},
					{
						leftTitle: '加入马蜂窝',
						rightTitle: '了解详情>',
						src: '../../static/index/hostList/4.jpg',
						url: '#',
						title: '',
						detail: ''
					}
				],
				//最新资讯
				newInfo:[
					{
						leftTitle:'04月07日',
						rightTitle:'马蜂窝“云旅游”直播的攻与守',
						url:'#'
					},
					{
						leftTitle:'04月01日',
						rightTitle:'马蜂窝的“云上战疫”',
						url:'#'
					},
					{
						leftTitle:'02月19日',
						rightTitle:'科技“战疫” ：马蜂窝大数据赋能旅游业',
						url:'#'
					},
					{
						leftTitle:'02月13日',
						rightTitle:'陈罡：疫情下旅游业的“守恒与求变”',
						url:'#'
					},
					{
						leftTitle:'02月06日',
						rightTitle:'马蜂窝将退订完成率定为最高KPI',
						url:'#'
					},
					{
						leftTitle:'09月28日',
						rightTitle:'马蜂窝国庆白领出游偏好调查：超7成在旅途中工作',
						url:'#'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.body-left {
		float: left;
		width: 260px;
		//左栏 标题字 左
		.titColor {
			color: #333;
			font-size: 18px;
		}
	
		//左栏 标题字 右
		.titIndex {
			color: #999;
			font-size: 12px;
		}
	
		.titIndex:hover {
			text-decoration: underline;
		}
	
		//左栏
		.banner-left {
			color: #333;
			font-size: 16px;
			line-height: 26px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	
		.banner-left:hover {
			color: $color;
			text-decoration: underline;
		}
	
		.banner-right {
			font-size: 14px;
			line-height: 20px;
			// height: 60px;
			overflow: hidden;
			color: #666;
		}
	
		
			
	
			//左标示图
			.left-title {
				margin-bottom: 30px;
			}
	
			//专栏 标题文字
			.column-title {
				margin-bottom: 12px;
				height: 35px;
	
				&>navigator {
					line-height: 35px;
				}
	
				&>navigator:nth-child(1) {
					float: left;
				}
	
				&>navigator:nth-child(2) {
					float: right;
				}
			}
	
			.img {
				width: 260px;
				height: 150px;
			}
	
			//专栏
			.left-column {
	
				.left-banner {
					height: 280px;
					//轮播图大小
	
					& /deep/ .uni-swiper-dots-horizontal {
						// border: 1px solid #FF9D00;
						bottom: 50%;
						transform: translate(10px);
	
						.uni-swiper-dot {
							border-radius: 5px;
							width: 15px;
							background-color: rgba(255, 255, 255, .8);
						}
	
						.uni-swiper-dot:hover {
							background-color: #ff9d00;
						}
	
						.uni-swiper-dot-active {
							background-color: #ff9d00;
	
						}
					}
	
					.banner {
						cursor: pointer;
					}
	
				}
			}
	
			//专栏下方
			.left-hostList {
	
				.hostList-box {
					padding-bottom: 20px;
	
					.hostList_title_left {
						font-size: 18px;
						color: #333;
					}
				}
			}
	
			//最新资讯
			.left-new {
				//标题名
				.new-title {
					display: flex;
					font-size: 18px;
					flex-flow: row;
					padding-bottom: 10px;
					color: #333;
					> {
						display: inline-block;
					}
				}
				//资讯
				.new-info{
					
					.info-box{
						font-size: 12px;
						color: #666;
						display: flex;
						line-height: 24px;
						padding-top: 10px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						>:nth-child(1){
							padding-right: 5px;
						}
						:nth-child(2){
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						:nth-child(2):hover{
							text-decoration: underline;
						}
					}
				}
			}
	}
</style>
