<style>
.juan .carousel img{
    width: 100%;
    height: 100%;
    transition: all 0.6s;
}
.tst-one{
  background: url('../../assets/img/juan/tuan4.jpg') 100% center;
  background-size: cover;
}
.tst-two{
  background: url('../../assets/img/juan/tuan2.jpg') 100% center;
  background-size: cover;
}
.tst-three{
  background: url('../../assets/img/juan/tuan3.jpg') 100% center;
  background-size: cover;
}
.tst-four{
  background: url('../../assets/img/juan/bg3.jpg') 100% center;
  background-size: cover;
}
.tst-five{
  background: url('../../assets/img/juan/tuan5.jpg') 100% center;
  background-size: cover;
}
.tst-huaxue{
  background: url('../../assets/img/juan/huaxue.jpg') 100% center;
  background-size: cover;
}
.tst-laowo{
  background: url('../../assets/img/juan/laowo_02.jpg') 100% center;
  background-size: cover;
}
.tst-jphotel{
  background: url('../../assets/img/juan/JPhotel2.jpg') 100% center;
  background-size: cover;
}
.tstt{
  background: url('../../assets/img/juan/listbanner.png') 100% center;
  background-size: cover;
  height: 350px;
  cursor: pointer;
}
.tstt-split{
  background: url('../../assets/img/juan/banner.png') 100% center;
  background-size: cover;
  height: 200px;
}

.Homeimg{
    position: absolute;
    z-index: 20000;
    width: 45px;
    height: 45px;
    left: 56px;
    top: 39px;
    cursor: pointer;
}
.carousel img:hover{
    transform: scale(1.1); 
    
}
.juan .carousel .el-carousel__container{
  height: 100%;
}
.juan .destiDiv{
  margin-left: -21px;
  margin-top:40px;
}
.juan .destiDiv .destiItem{
  float: left;
  width:386px;
  height:288px;
  margin-left: 21px;
  margin-bottom: 21px;
  position: relative;
  cursor: pointer;
}
.juan .destiDiv .destiItem img{
  width: 100%;
  height:100%;
}
.juan .destiDiv .destiItem .bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:radial-gradient(circle,rgba(0,0,0,0.57),rgba(0,0,0,0));
  transition: all linear 1s;
}
.juan .destiDiv .destiItem:hover .bg{
  display: none;
  
}
.juan .destiDiv .destiItem .text{
  position: absolute;
  top: 29px;
  left: 29px;
  color:#fff;
  font-family: "PingFangR";
  font-size: 28px;
  width: 100%;
  text-align: center;
  background:rgba(255,255,255,0.15);
  width: 49px;
  padding: 4px;
  box-sizing: border-box;
}
.juan .destiDiv .destiItem .text span{
  background:rgba(255,255,255,0.15);
  width: 100%;
  height: 100%;
  display: block;
}
.juan .alldesSpan{
  display: inline-block;
  width:250px;
  height:42px;
  line-height:42px;
  border:1px solid rgba(238, 68, 84, 1);
  border-radius:4px;
  color: #EE4454;
  text-align: center;
  font-weight: 400;
  cursor: pointer;
}
.juan .jxth .destiItem:first-child{
  width: 792px;
}
.juan .ImgDiv{
  text-align: center;
  padding:100px 0;
}
.juan .ImgDiv .ImgDivItem:first-child{
  margin-left: 0;
}
.juan .ImgDiv .ImgDivItem{
  width:285px;
  height:288px;
  display: inline-block;
  margin-left:20px;
}
.juan .ImgDiv .ImgDivItem img{
  width: 100%;
  height: 100%;
  
}
.juan .GreyDiv{
  width: 100%;
  background:rgba(245,245,245,1);
  padding: 80px 0;
}
.iconDiv .iconItem:first-child{
  margin-left: 0;
}
.iconDiv .iconItem{
  float: left;
  width: 340px;
  color:#8392A5;
  font-size: 12px;
  box-sizing: border-box;
  margin-left: 90px;
   overflow: hidden;
}
.iconDiv .iconItem .imgDiv img{
  position: absolute;
  left: 0;
}
.iconDiv .iconItem .imgDiv{
  padding-left: 90px;
  box-sizing: border-box;
  height: 90px;
}
.juan .partnerIcon{
  display: inline-block;
  width: 25%;
  text-align: center;
}
.juanHome .serachDiv{
  width:560px;
  margin:0 auto;
}
.juanHome .serachDiv .searchInput{
  background:rgba(255,255,255,1);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  width:556px;
  height:48px;
  position: relative;
}
.juanHome .serachDiv .searchInput input{
  width: 486px;
  height: 46px;
  border: none;
  outline: none;
  border-radius:4px;
  padding-left: 15px;
  box-sizing: border-box;
}
.juanHome .serachDiv .searchInput .searchBtn{
  width: 70px;
  height:48px;
  display: inline-block;
  background: #EE4454;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
}
.juanHome .serachDiv .searchInput .searchBtn i{
  color:#fff;
  font-size:18px;
}
.juanHome .serachDiv .searchHot{
  background:rgba(255,255,255,1);
  border-radius:4px;
  width:556px;
  margin-top:6px;
  padding:20px;
  box-sizing: border-box;
  box-shadow: 0 0 15px 0 #888;
}
.juanHome .serachDiv .hotList .el-col{
  border-right:1px dashed #E9E9E9;
  padding-left: 15px;
  box-sizing: border-box;
}
.juanHome .serachDiv .hotList .el-col:last-child{
  border: none;
}
.juanHome .serachDiv .hotList .el-col li{
  padding-bottom: 10px;
  cursor: pointer;
}
.juanHome .serachDiv .hotList .el-col li img{
  margin-left: 8px;
}
.juanHome .serachDiv .hotList .el-col li:last-child{
  padding: 0;
}
.juanHome .serachDiv .ScrollHot{
  max-height: 300px;
  overflow-y: scroll;

}
.juanHome .searchUl li{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 14px;
  margin:6px 0;
}
.juanHome .searchUl li:hover{
  text-decoration: underline;
  color:#EE4454;
  cursor: pointer;
}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar{width: 4px;height: 8px;}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
</style>
<template>
<div @click="getRef($event,1)" class="juan juanHome commonF">
    <!-- 图片 -->
    <div style="position:relative">
        <div class="tstt"></div>
        <div style="position: absolute;top:100px;width:100%;z-index:1000">
          <div class="serachDiv">
            <p class="f30 pfR" style="text-align:center;color:#fff">全世界最棒的旅游体验</p>
            <p style="text-align:center;color:#fff;margin-bottom:15px">探索有趣又独特目的地旅游体验</p>
            <div @click.stop.prevent="getRef($event,2)" class="searchInput">
              <el-input ref="inputs" @focus="InputFocus" @input="InputChange" v-model="text" placeholder="请输入"></el-input>
              <span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span>
            </div>
            <div @click.stop.prevent="getRef($event,2)" v-loading="serachLoading" v-if="searchShow" class="ScrollHot searchHot">
              <ul class="searchUl">
                <li @click="Gourl(item)" v-for="(item,index) in searchList" :key="index+5000000">{{item.title}}</li>
                <li v-show="searchList.length==0" style="margin:6px 0;text-align:center">暂无数据</li>
              </ul>
            </div>
            <div @click.stop.prevent="getRef($event,2)" v-show="searchHot" class="searchHot">
              <p class="pfR">热门目的地</p>
              <el-row class="hotList" style="margin-top:15px">
                <el-col :span="8">
                  <li @click="SearchLi('京都')">京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('奈良')">奈良<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('曼谷')">曼谷</li>
                  <li @click="SearchLi('古巴')">古巴</li>
                </el-col>  
                <el-col :span="8">
                  <li @click="SearchLi('北海道')">北海道<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('东京都')">东京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('巴黎')">巴黎</li>
                  <li @click="SearchLi('纽约')">纽约</li>

                </el-col>  
                <el-col :span="8">
                  <li @click="SearchLi('札幌')">札幌<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('神户')">神户<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
                  <li @click="SearchLi('伦敦')">伦敦</li>

                </el-col>  
                
              </el-row>
            </div>
          </div>
        </div>
        <!-- <el-carousel class="carousel" style="height:600px">
            <el-carousel-item>
                <img @click="goUrl('FoodImg')" src="../../assets/img/juan/bg1.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img @click="goUrl('Fire')" src="../../assets/img/juan/bg2.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img @click="goUrl('FoodImg2')" src="../../assets/img/juan/bg3.jpg" alt="">
            </el-carousel-item>
      </el-carousel> -->
    </div>
    <div class="w1200" style="margin-top:100px">
      <p class="f30" style="text-align:center">热门<span style="color:#EE4454">. 目的地</span></p>
      <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p>
      <div class="destiDiv basefix">
        <div @click="goDestion('东京')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/dongjin.png" alt="">
          <p class="text">
            <span>东京</span>
          </p>
        </div>
        <div @click="goDestion('名古屋')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/mgw.png" alt="">
          <p class="text"><span>名古屋</span></p>
        </div>
        <div @click="goDestion('大阪')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/db.png" alt="">
          <p class="text"><span>大阪</span></p>
        </div>
        <div @click="goDestion('神户')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/sh.png" alt="">
          <p class="text"><span>神户</span></p>
        </div>
        <div @click="goDestion('横滨')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/hb.png" alt="">
          <p class="text"><span>横滨</span></p>
        </div>
        <div @click="goDestion('京都')" class="destiItem">
          <div class="bg"></div>
          <img src="../../assets/img/juan/jd.png" alt="">
          <p class="text"><span>京都</span></p>
        </div>
      </div>
      <!-- <div style="text-align:center;"><span  @click="goDestion('all')" class="alldesSpan">查看全部目的地</span></div> -->
      <p class="f30" style="text-align:center;margin-top:100px">本季<span style="color:#EE4454">. 精选特惠</span></p>
      <p class="f20" style="color:#999999;text-align:center">Selected Recommendation</p>
      <div class="jxth destiDiv basefix">
        <div @click="goUrl('JapanHotel')" class="destiItem tst-jphotel">
        </div>

        <div @click="goUrl('Laowo')" class="destiItem tst-laowo">
        </div>

        <div @click="goUrl('Juanski')" class="destiItem tst-huaxue">
        </div>

        <div @click="goUrl('FoodImg4')" class="destiItem tst-one">
        </div>
        <div @click="goUrl('Fire')" class="destiItem tst-two" style="display:none;">
        </div>
        <div @click="goUrl('FoodImg')" class="destiItem tst-three">
        </div>
        <!-- <div @click="goUrl('FoodImg2')" class="destiItem tst-four">
        </div> -->
        <!-- <div @click="goUrl('Img5')" class="destiItem tst-five">
        </div> -->
        <!-- <div @click="goUrl('Juanski')" class="destiItem tst-huaxue">
        </div> -->
        <!-- <div class="destiItem">
          <img src="../../assets/img/home/tour1.png" alt="">
        </div>
        <div class="destiItem">
          <img src="../../assets/img/home/tour1.png" alt="">
        </div> -->
      </div>
    </div>
    <div class="tstt-split"></div>
    <!-- <div class="ImgDiv">
      <div class="ImgDivItem">
        <img src="../../assets/img/home/tour1.png" alt=""> 
      </div>
      <div class="ImgDivItem">
        <img src="../../assets/img/home/tour1.png" alt=""> 
      </div>
      <div class="ImgDivItem">
        <img src="../../assets/img/home/tour1.png" alt=""> 
      </div>
      <div class="ImgDivItem">
        <img src="../../assets/img/home/tour1.png" alt=""> 
      </div>
    </div> -->
    <div class="GreyDiv">
      <p class="f30" style="text-align:center">旅行<span style="color:#EE4454"> . 体验师</span></p>
      <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p>
      <div class="iconDiv" style="margin-top:40px">
       <div class="w1200 basefix">
          <div class="iconItem">
            <div class="imgDiv" style="position:relative">
              <img style="width:78px;height:78px;border-radius:50%" src="../../assets/img/juan/p1.png" alt="">
              <p class="f14" style="color:#3A4758;padding-top:30px">卷妹</p>
              <!-- <p class="f14" style="color:#A4A4B5">资深旅行体验师</p> -->
            </div>
            <div style="line-height:1.8">
               人类先发明了旅行，然后又不停地追问，旅行的意义。其实，世间所有的相遇，不是久别重逢，就是后悔莫及。
               人生如旅，简单点，你打得赢怪物，就收得到礼物。期望我们在未来的时间里既打的赢怪物也能收获礼物，加油吧，少年！
                        
            </div>
          </div> 
          <div class="iconItem">
            <div class="imgDiv" style="position:relative">
              <img style="width:78px;height:78px;border-radius:50%" src="../../assets/img/juan/p2.jpg" alt="">
              <p class="f14" style="color:#3A4758;padding-top:30px">Ken Worker</p>
              <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
            </div>
            <div style="line-height:1.8">
               大叔一名；阿公开过美軍 Guest House，阿爸曾是日语导游；自己当过 MV 导演、网络趋势观察者，
               并且是国家考试通过的国际林队；创办过「部落客旅行团」，担任过旅游集团社群的发展总监；
               钟情于啤酒喝威士忌，旁及各种生活、娱乐与历史題材；現任《旅饭》共同创办人兼「旅行长」（Chief Travel Officer）。
                        
            </div>
          </div> 
          <div class="iconItem">
            <div class="imgDiv" style="position:relative">
              <img style="width:78px;height:78px;border-radius:50%" src="../../assets/img/juan/p3.jpg" alt="">
              <p class="f14" style="color:#3A4758;padding-top:30px">Portnoy</p>
              <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
            </div>
            <div style="line-height:1.8">
               还没上学以为自己是天才，上学后才知道自己是废材，知识上瘾患者加提问狂，对自己的愚蠢拥有极高的自信，
               对这个小小的世界有极多的好奇，目前正在刻苦特训，希望能在十年內练成龟派气功。
                        
            </div>
          </div> 
        </div>
        
      </div>
    </div>
    <!-- <div class="w1200" STYLE="padding:90px 0">
      <p class="f30" style="text-align:center">合作<span style="color:#EE4454">. 伙伴</span></p>
      <p class="f20" style="color:#999999;text-align:center">COOPERATIVE PARTNER</p>
      <div style="margin-top:60px">
        <div class="partnerIcon">
            <img src="../../assets/img/juan/c1.png" alt="">
        </div>
        <div class="partnerIcon">
            <img src="../../assets/img/juan/c2.png" alt="">
        </div>
        <div class="partnerIcon">
            <img src="../../assets/img/juan/c3.png" alt="">
        </div>
        <div class="partnerIcon">
            <img src="../../assets/img/juan/c4.png" alt="">
        </div>
      </div>
    </div> -->
      
</div>
</template>
<script>

export default {
  components: {
    
  },
  data(){
    return{
      zoom: 1,
      Calculation: false,
      height: 0,
      width: 0,
      userInfo: {},
      searchShow:false,
      serachLoading:false,
      searchHot:false,
      text:'',
      searchList:[],
      SearchMsg:{
        pageSize:18,
        pageIndex:1,
      },
    }
  },
  methods:{
    Gourl(item){
      let path="JuanDetails";
      this.$router.push({ path,query:{id:item.id}})
    },
    getRef(e,num){
      if(num==1){
        this.searchShow=false;
        this.searchHot=false;
      }
    },
    InputFocus(){
      if(this.text!=""){
        this.searchShow=true;
        this.InputChange();
      }else{
        this.searchHot=true;
      }
    },
    InputChange(){
      this.searchHot=false;
      if(this.text==""){
        this.searchHot=true;
        this.searchShow=false;
        this.serachLoading=false;
        return;
      }
      this.searchShow=true;
      this.serachLoading=true;
      this.SearchMsg.texts=this.text;
      this.SearchMsg.pageSize=1000;
      this.apiJavaPost('/api/rssarticle/searchArticle',this.SearchMsg,res=>{
        console.log("res",res);
        this.serachLoading=false;
          if(res.data.resultCode==1){
            let data=res.data.data.list;
            this.searchList=data;   
          }else{
              this.Error(res.data.message);
          }
      },null)
    },
     SearchText(){
      this.searchHot=false;
      this.searchShow=false;
      let that=this;
      if(this.text==""){
        this.Error("请输入搜索词！")
        return;
      }
      this.goDestion(this.text);

    },
    SearchLi(str){
      this.text=str;
      this.SearchText();
      this.searchHot=false;
      
    },
    goDestion(str){
      let path="JuanList";
      this.$router.push({ path,query:{search:str}})
    },
    goUrl(path){
        this.$router.push({ path,query:{}})
    },
    
  },mounted(){
    
    
  },created(){
    //初始化任务
    // let Height = window.innerHeight
    // let Width = window.innerWidth
    // let oHeight = window.outerHeight
    // let oWidth = window.outerWidth
    // this.height = Height
    // this.width = Width
    // this.oWidth = oWidth
    // this.oHeight = oHeight
    // this.Calculation = Width/Height - 1.77 > 0.02 ? true : false
    // console.log(Height, Width, oHeight, oWidth,Width/Height, this.Calculation, Width/Height - 1.77)
    
    // this.zoom = Math.round((Height/1080) * 100) / 100
  }
}
</script>
