<template>
	<view class="body-right">
        <!-- 菜单栏 -->
		<view class="menu clearfix">
			<!-- 左标签 -->
			<view class="left">
				<!-- <view :class="[item-1,{acitve==0}]"> -->
				<view class="item-1" :class="{isActive:active==0}" @click="cur(0)">
					<text class="hot ">热门游记</text>
					<text class="screen">
						<text class="screen-icon bgounrd"></text>
					筛选</text>
				</view>
				<view class="item-2" :class="{isActive:active==1}" @click="cur(1)">
					<text>
					最新发表
					</text>
				</view>
			</view>
			<!-- 右标签 -->
			<view class="right">
				<view class="btn">
					<text class="bgounrd"></text>
					写游记
				</view>
			</view>
		</view>
        <!-- 筛选点击事件 -->
        <view></view>
        <!--内容 -->
        <view class="content">
            <!-- 内容box -->
            <view class="boxs">
                <!-- title -->                                    <!-- 后期数据将 0 替换为active -->
                <view class="content-box" v-for="(item,index) in contenList[0]" :key='index'>
                    <navigator url="#" >
                        <image :src="item.src" class="box-img"></image>
                    </navigator>
                    <view class="right-box">
                        <view class="title-box">
                            <!-- 右图标 -->
                            <view :class="[item.app==1? 'icon-box' : 'icon-box-none']" >
                               <view class="title-icon"></view>
                                APP
                                <view  class="erweima">
                                    
                                </view>
                             
                            </view>
                            <navigator url="#"  class="title">
                                <text>
                                    {{item.title}}
                                </text>
                            </navigator>
                        </view>
                        <!-- 中间内容 -->
                        <view class="box-content">
                            <navigator url="#" class="content-text">
                                {{item.content}}
                            </navigator>
                        </view>
                        <!-- 顶部 -->
                        <view class="bottom-box">
                            <view class="bot-ding">
                                <navigator url="#" class="btn-ding bgounrd"></navigator>
                                <text>{{item.parise}}</text>
                            </view>
                            <!-- 地址 -->
                            <view class="bot-place">
                                <text class="bgounrd bot-icon"></text>
                                <navigator url="#" class="place-content">
                                    {{item.post}}
                                </navigator>
                                 ,&nbsp&nbsp&nbsp by
                            </view>
                            <!-- 发表的用户 -->
                            <view class="bot-user">
                               <navigator url="#" class="user-box">
                                   <image :src="item.userImg" class="user-icon"></image>
                                {{item.user}}
                               </navigator>
                            </view>
                            <!-- 浏览次数 -->
                            <view class="bot-num">
                                <text class="num-icon bgounrd"></text>
                                
                                {{item.nums}}
                            </view>
                        </view>
                    </view>
                    
                </view>
                <!-- 分页 -->
                <view class="page">
                    <view class="page-text">共9页 / 87条</view>
                    <view v-for="(item,index) in page " :key='index'>
                        <view class="page-num" :class="{'active': item==1}">{{item}}</view>
                    </view>
                    <view class="page-but">
                        下一页>>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
                contenList:[
                    [
                        {
                                src:'../../static/index/content/img1.jpeg',
                                title:'蜂首🎖向上攀登永不言弃！庐山/龙虎山/三清山/武夷山/华山/衡...',
                                content:' 硬核之路 时间拨回到2017年10月，刚刚结束4个月 东南亚 十国的旅行，回到国内后这不到一个月的时间，经过了国庆节回家和在 北京 休整，节奏慢了下来，生活突然变的索然无味。旅行是一种瘾，...',
                                post:'中国',
                                user:'超级晶晶晶',
                                nums:'150846/1024',
                                parise:'6876',
                                app:'1',
                                userImg:'../../static/index/content/user1.jpeg'
                        },
                        {
                                src:'../../static/index/content/img2.jpeg',
                                title:'甘肃｜河西四日，丝路千年（自驾探寻冷门景点）',
                                content:'  前言 “在曾经的历史 通道 上， 作为通往广阔西部的咽喉， 河西走廊 是那么的意气飞扬，更洒下过无数先辈的血汗，沉淀了太多的期待与渴望。” ——纪录片《 河西走廊 》 两千年前，张骞义无...',
                                post:'甘肃',
                                user:'大菊在路上',
                                nums:'168461/806',
                                parise:'7920',
                                app:'0',
                                userImg:'../../static/index/content/user2.jpeg'
                        },
                        {
                                src:'../../static/index/content/img3.jpeg',
                                title:'【一画一书览清园】千年汴京城里，做一场灯火阑珊的东京华梦',
                                content:' 那人还在，灯火阑珊处 谨以此文，献给人生那些“每览昔人兴感之由，若合一契”的时刻。 也记录下，在清明上河园，人生记忆里又增添的那么多“若合一契”的时刻。 去年年底，天气太冷不愿户... ',
                                post:'开封',
                                user:'若谷',
                                nums:'25198/706',
                                parise:'6027',
                                app:'0',
                                userImg:'../../static/index/content/user3.jpeg'
                        },
                        {
                                src:'../../static/index/content/img4.jpg',
                                title:'自驾穿越黑龙江，路过呼伦贝尔数了羊',
                                content:' 序 · 爷爷的那些年 爷爷总爱提起他年轻时候“走南闯北”的日子，从小听到大，故事多得我都想为他写一本回忆录。 数不清的故事中，听他说的最多的就是“ 大兴安岭 ”这四个字，小时候的意识... ',
                                post:'黑龙江',
                                user:'罗嘎嘎GAGA',
                                nums:'145303/518',
                                parise:'4729',
                                app:'0',
                                userImg:'../../static/index/content/user4.jpeg'
                        },
                        {
                                src:'../../static/index/content/img5.jpg',
                                title:'【MON小妖】21度的清凉夏天——安顺避暑四日自驾游',
                                content:' 刚刚在 法国 接受了一个月高温洗礼的我，回国后第一件事就是“找地方避暑”，约上闺蜜溜到 安顺 待了四日。 安顺 ,就是著名的黄果树瀑布所在地，距离 贵阳 坐动车只需要半小时。这里的气候... ',
                                post:'安顺',
                                user:'MON小妖',
                                nums:'223396/429',
                                parise:'6309',
                                app:'0',
                                userImg:'../../static/index/content/user5.jpeg'
                        },
                        {
                                src:'../../static/index/content/img6.jpg',
                                title:'新疆往事，6个秘境，6个路上故事',
                                content:' 来 新疆 20日有余，捡起了久违的青旅住宿，但大部分的时间还是自己一个人在路上。有在三个国家相邻的边境线上自驾遇到过塔吉族的姑娘搭车；也有被军哥哥请到军队去检查；有在沙漠里陷车；也...',
                                post:'新疆',
                                user:'yolo',
                                nums:'1489330/1201',
                                parise:'6361',
                                app:'1',
                                userImg:'../../static/index/content/user6.jpeg'
                        },
                        {
                                src:'../../static/index/content/img7.jpg',
                                title:'带着汉服去西北 | 我会轻轻的，将你豪情放在心头',
                                content:'窗外逐渐出现了连绵的砖红色山丘，眼前的风景是壮阔却苍茫的，间或有我叫不上名字的绿树叶在阳光与风中金光闪闪。 在嘈杂的车厢里，后排的一家三口已经上演了三遍《小红帽与狼外婆》的故事，... ',
                                post:'青海',
                                user:'筱莲',
                                nums:'147106/718',
                                parise:'6216',
                                app:'0',
                                userImg:'../../static/index/content/user7.jpeg'
                        },
                        {
                                src:'../../static/index/content/img8.jpg',
                                title:'这一次，我不再是渝蓉城过客。（8日 | 魔幻重庆，巴适成都 | ...',
                                content:'  6年前，目的地 泸沽湖 。 匆匆路过 重庆 ，短暂停留 成都 。 那一次，我只是一个渝蓉城过客。 那时的我，不会拍照，不会被拍。 拿着借来的佳能500D，懵懵懂懂。 6年后，目的地 重庆 成都 。...',
                                post:'重庆',
                                user:'王缘熊逸',
                                nums:'147836/369',
                                parise:'7329',
                                app:'0',
                                userImg:'../../static/index/content/user8.jpeg'
                        },
                        {
                                src:'../../static/index/content/img9.jpg',
                                title:'地道乐山人带你吃遍心中List（内含早、中、晚、宵夜攻略）',
                                content:' 【归期】前故作镇定 巴蜀之国，美食之都。 全国人民都知道 四川 好吃的多， 成都 好吃的多； 而 四川 人民一定知道： 乐山 美食多！ 作为一个 乐山 人，从小吃到大的食物本来并没有什么特别... ',
                                post:'乐山',
                                user:'Dorine熊丢丢',
                                nums:'155509/432',
                                parise:'9217',
                                app:'0',
                                userImg:'../../static/index/content/user9.jpeg'
                        },
                        {
                                src:'../../static/index/content/img10.png',
                                title:'尘埃与菩提，尼泊尔的幻境',
                                content:'跟 尼泊尔 的缘分大概要追溯到7年前了， 那是2012年离开职场开始独自背包旅行， 计划之外的决定去了珠峰， 却错过了从 樟木 口岸前往 尼泊尔 。 后来这个背包客天堂的国度， 便在我的旅行Lis...',
                                post:'尼泊尔',
                                user:'贩暖 ',
                                nums:'136717/820',
                                parise:'4309',
                                app:'0',
                                userImg:'../../static/index/content/user10.jpeg'
                        }
                    ],
                    [
                        
                    ]
                ],
                page:[
                   1,2,3,4,5,6,7,8,9
                ]
            };
		},
		methods:{
			cur(a){
				this.active=a
			}
		}
	}
</script>

<style lang="scss">
	.body-right {
		float: right;
		width: 700px;
		
		//背景图
		.bgounrd{
			background: url(../../static/index/body/index-sprites9.png);
		}
		
		//菜单栏
		.menu{
			margin-bottom: 20px;
			height: 36px;
			line-height: 36px;
			padding-bottom: 8px;
			border-bottom: 1px solid #e4e4e4;
			//左标签栏
			.left{
				height: 36px;
				float: left;
				color: #666;
				//点击变色
				.isActive{
					color: #ff9d00;
					border-bottom: 3px solid #ff9d00;
					padding-bottom: 6px;
				}
				//左1
				.item-1{
					width: 170px;
					text-align: center;
					float: left;
					//热门游记
					.hot{
						cursor: pointer;
						font-size: 18px;
					}
					
					//筛选
					.screen{
						// background-color: pink;
						display: inline-block;
						margin-left: 7px;
						line-height: 20px;
						border: 1px solid #e5e5e5;
						color: #666;
						font-size: 12px;
						padding: 0 10px 0 8px;
						vertical-align: 2px;
						cursor: pointer;
						.screen-icon{
							width: 11px;
							height: 8px;
							background-position: 0 -130px;
							background-repeat: no-repeat;
							font-size: 12px;
							display: inline-block;
							margin: 6px 5px 0 0 ;
							line-height: 20px;
						}
					}
					.screen:hover{
						background-color: $color;
						border-color: #ff9d00;
						color: #fff;
						.screen-icon{
							background: url(../../static/index/body/index-sprites9.png)no-repeat 0 -140px;
						}
					}
				}
				//左2
				.item-2{
					float: left;
					display: inline;
					font-size: 18px;
					color: #333;
					width: 120px;
					text-align: center;
					text{
						cursor: pointer;
					}
				}
			}
			
			//右标签
			.right{
				float: right;
				width: 140px;
				.btn{
					background-color: $color;
					line-height: 36px;
					color: #fff;
					border-radius: 5px;
					text-align: center;
					cursor: pointer;
					&:hover{
						background-color: #ff8a00;
					}
					text{
						position: 0 0 ;
						width: 18px;
						height: 17px;
						overflow: hidden;
						vertical-align: -3px;
						display: inline-block;
						margin-right: 5px;
					}
				}
			}
		}		
        
        //内容栏
        .content{
            
            //行内块
            // .inblock{
            //     display: inline-block;
            // }
            .boxs{
                //内容区
                .content-box{
                    height: 150px;
                    padding: 15px 0 ;
                    
                    &:hover{
                        background-color: #f8f8f8;
                        padding: 15px;
                        margin: 0 -15px;
                    }
                    &:hover .right-box>.title-box>.title{
                        color:$color;
                    }
                    //盒子左图片
                    .box-img{
                        width: 220px;
                        height: 150px;
                        float: left;
                    }
                    //右边盒子
                    .right-box{
                        float: right;
                        height: 150px;
                        width: 455px;
                        //头部标题
                        .title-box{
                            height: 26px;
                            margin-bottom: 10px;
                            font-size: 18px;
                            line-height: 26px;
                            .title{
                                width: 360px;
                                height: 26px;
                                color: #333;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .icon-box-none{
                                display: none;
                            }
                             .icon-box{
                                 border: 1px solid $color;
                                 border-radius: 11px;
                                 float: right;
                                 font-size: 12px;
                                 width: auto;
                                 padding: 0 7px;
                                 line-height: 20px;
                                 overflow: visible;
                                 background-color: #FFFFFF;
                                 cursor: text;
                                 color: $color;
                                 font-weight: bold;
                                 //盒子右图标
                                 .title-icon{
                                     background-image: url(../../static/index/body/index-sprites9.png);
                                     background-repeat: no-repeat;
                                     background-position: -170px 0px;
                                     width: 16px;
                                     height: 16px;
                                     margin: 2px;
                                     float: left;
                                 }
                                 .erweima{
                                     background: url(../../static/index/content/erweima.png)no-repeat;
                                     position: absolute;
                                     right: -5px;
                                     top: 20px;
                                     padding-top: 25px;
                                     width: 125px;
                                     display: none;
                                     height: 175px;
                                     background-size: 100% 80%;
                                 }
                                 &:hover{
                                  position: relative;   
                                 }
                                &:hover .erweima{
                                    display: block;
                                }
                             }
                             
                          
                        }
                        //内容
                        .box-content{
                            height: 75px;
                            line-height: 20px;
                            font-size: 14px;
                            overflow: hidden;
                            .content-text{
                                color: #666;
                            }
                        } 
                        // 底部
                        .bottom-box{
                            height: 39px;
                            overflow: hidden;
                            line-height: 25px;
                            //右边顶
                            .bot-ding{
                                float: right;
                                color: $color;
                                font-size: 14px;
                                text-align: right;
                                display: inline-block;
                                line-height: 50px;
                                //按钮
                                .btn-ding{
                                    display: inline;
                                    float: right;
                                    margin-left: 8px;
                                    width: 38px;
                                    height: 33px;
                                    background-position: -60px 0;
                                    overflow: hidden;
                                    margin-top: 6px;
                                }
                            }
                            //地址
                            .bot-place{
                                display: inline-block;
                                margin-right: 5px;
                                font-size: 12px;
                                .bot-icon{
                                    float: left;
                                    margin: 4px 5px 0 0 ;
                                    width: 14px;
                                    height: 16px;
                                    background-position: 0 -50px;
                                    overflow: hidden;
                                }
                                .place-content{
                                    color: #666;
                                    cursor: pointer;
                                    display: inline-block;
                                }
                            }
                            //用户名
                            .bot-user{
                                margin: 10px;
                                display: inline-block;
                                .user-box{
                                    display: inline-block;
                                    font-size: 12px;
                                    color: $color;
                                    .user-icon{
                                        width: 16px;
                                        height: 16px;
                                        margin-right: 5px;
                                        border-radius: 50%;
                                        vertical-align: -3px;
                                        overflow: hidden;
                                    }
                                }
                            }
                            //数量
                            .bot-num{
                                font-size: 14px;
                                color: #999;
                                display: inline-block;
                                cursor: text;
                                .num-icon{
                                    background-position: -30px -50px;
                                    margin: 6px 5px 0 0 ;
                                    float: left;
                                    width: 18px;
                                    height: 14px;
                                    cursor: default;
                                }
                            }
                        }
                    }
                    
                    
                }
                //分页
                .page{
                    display: flex;
                    flex-wrap: nowrap;
                    font-size: 12px;
                    line-height: 24px;
                    float: right;
                    .page-text{
                        color: #999;
                        margin-right: 20px;
                    }
                    .page-num{
                        padding: 0 7px;
                        border-radius: 4px;
                        margin-right: 5px;
                        color: #666;
                    }
                    .page-but{
                        background-color: #ff9d00;
                        color: #fff;
                        border-radius: 4px;
                        padding: 0 5px;
                    }
                    .active{
                            background-color: #ff9d00;
                            color: #fff;
                    }
                   
                }
            }
        }
	}
</style>
