Skip to content

A
Athena
Commit e42448fc authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

卷妹说改版

parent df9b276f
Show whitespace changes
Inline Side-by-side
Showing with 1592 additions and 34 deletions
src/assets/css/common.css
View file @ e42448fc
...@@ -31,6 +31,11 @@ ...@@ -31,6 +31,11 @@
.commonF .w1200{ .commonF .w1200{
width: 1200px; width: 1200px;
} }
.commonF .w1000{
width: 1000px;
margin: 0 auto;
}
.commonF .basefix:after { .commonF .basefix:after {
clear: both; clear: both;
content: '.'; content: '.';
...@@ -52,6 +57,13 @@ ...@@ -52,6 +57,13 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.commonF .text3{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.commonF .cee{ .commonF .cee{
color: #EE4454 color: #EE4454
} }
......
src/assets/img/juan/bg1.jpg
View replaced file @ df9b276f View file @ e42448fc
src/assets/img/juan/bg1.jpg

1.76 MB | W: | H:

src/assets/img/juan/bg1.jpg

571 KB | W: | H:

src/assets/img/juan/bg1.jpg
src/assets/img/juan/bg1.jpg
src/assets/img/juan/bg1.jpg
src/assets/img/juan/bg1.jpg
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/juan/bg2.jpg
View replaced file @ df9b276f View file @ e42448fc
src/assets/img/juan/bg2.jpg

566 KB | W: | H:

src/assets/img/juan/bg2.jpg

569 KB | W: | H:

src/assets/img/juan/bg2.jpg
src/assets/img/juan/bg2.jpg
src/assets/img/juan/bg2.jpg
src/assets/img/juan/bg2.jpg
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/juan/bg3.jpg
View replaced file @ df9b276f View file @ e42448fc
src/assets/img/juan/bg3.jpg

570 KB | W: | H:

src/assets/img/juan/bg3.jpg

551 KB | W: | H:

src/assets/img/juan/bg3.jpg
src/assets/img/juan/bg3.jpg
src/assets/img/juan/bg3.jpg
src/assets/img/juan/bg3.jpg
  • 2-up
  • Swipe
  • Onion skin
src/components/taskPage/Fire.vue
View file @ e42448fc
...@@ -229,7 +229,6 @@ export default { ...@@ -229,7 +229,6 @@ export default {
let oWidth2 = window.screen.width; let oWidth2 = window.screen.width;
this.height3=(5451/750)*oWidth2+'px'; this.height3=(5451/750)*oWidth2+'px';
this.topDiv=(1350/750)*oWidth2+'px'; this.topDiv=(1350/750)*oWidth2+'px';
// this.zoomph= Math.round((Height/1080) * 100) / 100;
this.phoneWidth=(310/375)*oWidth2+'px'; this.phoneWidth=(310/375)*oWidth2+'px';
let aa=(310/375)*oWidth2; let aa=(310/375)*oWidth2;
this.phoneHeight=(290/310)*aa+'px'; this.phoneHeight=(290/310)*aa+'px';
......
src/components/taskPage/FoodImg.vue
View file @ e42448fc
...@@ -193,8 +193,8 @@ export default { ...@@ -193,8 +193,8 @@ export default {
}, },
created() { created() {
this.cityId=localStorage.cityId; this.cityId=localStorage.cityId?localStorage.cityId:0;
this.companyId=parseInt(localStorage.site); this.companyId=localStorage.site?parseInt(localStorage.site):0;
this.Cztm(); this.Cztm();
let oWidth = window.screen.width; let oWidth = window.screen.width;
this.height2=(6363/1920)*oWidth+500+'px'; this.height2=(6363/1920)*oWidth+500+'px';
......
src/components/taskPage/JuanDetails.vue 0 → 100644
View file @ e42448fc
<style>
.juan .carousel img{
width: 100%;
height: 100%;
transition: all 0.6s;
}
.juan .partnerIcon{
display: inline-block;
width: 25%;
text-align: center;
}
.textDiv{
width:420px;
background:rgba(0,0,0,0.2);
margin: 0 auto;
padding:10px;
box-sizing: border-box
}
.textDiv div{
border:1px solid rgba(255, 255, 255, 0.5);
color:#fff;
text-align: center;
padding:10px 0;
}
.DetailDiv{
padding:30px;
box-sizing: border-box;
background: #fff;
margin-top:20px;
border-radius:4px;
}
.DetailDiv .content .wp-caption{
max-width: 100%!important;
}
.DetailDiv .content img{
max-width: 100%!important;
}
</style>
<template>
<div class="juan commonF" style="background:#f5f5f5">
<!-- 图片 -->
<div class="w1200">
<div style="position:relative;padding-top:20px">
<img src="../../assets/img/juan/detailsbanner.png" alt />
<div style="width:100%;position:absolute;top:42px">
<div class="textDiv">
<div class="f30 pfR">全世界最棒的旅游体验</div>
</div>
</div>
</div>
<div class="DetailDiv">
<p class="f22 pfR">{{datainfo.title}}</p>
<p class="f14 c88" style="margin-top:10px">
<img src="../../assets/img/juan/icon1.png" alt="">
{{datainfo.pubDate | YMD}}
</p>
<p class="f14 c88" style="margin-top:10px">
<img src="../../assets/img/juan/icon2.png" alt="">
<span v-html="datainfo.label"></span>
</p>
<div class="content w1000 f14 c33" style="margin-top:20px">
<div v-html="datainfo.descriptions"></div>
<div style="margin-top:20px" v-html="datainfo.content"></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,
datainfo:{},
id:0,
}
},
methods:{
getList(){
this.apiJavaPost('/api/rssarticle/getArticleDetail',{Id:this.id},res=>{
if(res.data.resultCode==1){
this.datainfo=res.data.data;
// console.log("res",this.datainfo)
}else{
this.Error(res.data.message);
}
},null)
},
},mounted(){
},created(){
if(this.$route.query.id){
this.id=this.$route.query.id;
}
this.getList();
}
}
</script>
src/components/taskPage/JuanList.vue 0 → 100644
View file @ e42448fc
<style>
.juan .carousel img{
width: 100%;
height: 100%;
transition: all 0.6s;
}
.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%;
}
.juanList .GreyDiv{
width: 100%;
background:#fff;
padding: 80px 0;
}
.iconDiv .iconItem:first-child{
margin-left: 0;
}
.iconDiv .iconItem{
display: inline-block;
width: 340px;
color:#8392A5;
font-size: 12px;
box-sizing: border-box;
margin-left: 90px;
position: relative;
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;
}
.juanList{
background:#f5f5f5
}
.juanList .hotCity{
margin-top:30px
}
.juanList .hotCity .cityItem{
position: relative;
overflow: hidden;
border-radius:4px;
display: inline-block;
margin-left: 15px;
width:190px;
height:284px;
transition: all linear 0.4s;
cursor: pointer;
}
.juanList .hotCity .cityItemBig{
width:378px!important;
}
.juanList .hotCity .cityItem:first-child{
margin-left: 0;
}
.juanList .hotCity .cityItem img{
width: 100%;
height: 100%;
}
.juanList .hotCity .cityItem .name{
position: absolute;
font-size:26px;
font-family: "PingFangR";
left: 20px;
bottom:20px;
color:#fff;
}
.juanList .hotCity .cityItem .CityHover{
position: absolute;
color:#fff;
width: 100%;
height: 100%;
padding:15px;
box-sizing: border-box;
background:rgba(0,0,0,0.3);
top:0;
}
.juanList .hotCity .cityItem .CityHover p:first-child{
margin-top:166px;
}
.juanList .MoreDiv{
margin-left: -15px;
margin-top: 30px;
padding-bottom: 30px;
}
.juanList .nodataDiv .moreItem{
width:385px;
height:376px;
display: inline-block;
position: relative;
margin-left: 20px;
background: #fff;
margin-bottom: 15px;
cursor: pointer;
overflow: hidden;
}
.juanList .nodataDiv .moreItem .itemImg{
width:100%;
height:218px;
}
.juanList .nodataDiv .moreItem .textDiv{
padding:0 15px;
width: 100%;
height: 158px;
box-sizing: border-box;
transition: all linear 0.3s;
background: #fff;
}
.juanList .nodataDiv .moreItem .noneData{
background:rgba(224,224,224,1);
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.juanList .nodataDiv .moreItem:hover .textDiv{
box-shadow: 0 0 15px 2px #f5f5f5;
}
.juanList .MoreDiv .moreItem{
width:385px;
height:376px;
display: inline-block;
position: relative;
margin-left: 20px;
background: #fff;
margin-bottom: 15px;
cursor: pointer;
overflow: hidden;
}
.juanList .MoreDiv .moreItem .itemImg{
width:100%;
height:218px;
}
.juanList .MoreDiv .moreItem .textDiv{
padding:0 15px;
width: 100%;
height: 158px;
box-sizing: border-box;
transition: all linear 0.3s;
background: #fff;
}
.juanList .MoreDiv .moreItem .noneData{
background:rgba(224,224,224,1);
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.juanList .MoreDiv .moreItem:hover .textDiv{
box-shadow: 0 0 15px 2px #f5f5f5;
}
.juanList .serachDiv{
width:560px;
margin:0 auto;
}
.juanList .serachDiv .searchInput{
background:rgba(255,255,255,1);
border-radius:4px;
width:556px;
height:48px;
position: relative;
}
.juanList .serachDiv .searchInput input{
width: 486px;
height: 46px;
border: none;
outline: none;
border-radius:4px;
padding-left: 15px;
box-sizing: border-box;
}
.juanList .serachDiv .searchInput .searchBtn{
width: 70px;
height:48px;
display: inline-block;
background: #EE4454;
position: absolute;
top: 0;
text-align: center;
line-height: 48px;
cursor: pointer;
}
.juanList .serachDiv .searchInput .searchBtn i{
color:#fff;
font-size:18px;
}
.juanList .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;
}
.juanList .serachDiv .hotList .el-col{
border-right:1px solid #E9E9E9;
padding-left: 15px;
box-sizing: border-box;
}
.juanList .serachDiv .hotList .el-col:last-child{
border: none;
}
.juanList .serachDiv .hotList .el-col li{
padding-bottom: 10px;
cursor: pointer;
}
.juanList .serachDiv .hotList .el-col li img{
margin-left: 8px;
}
.juanList .serachDiv .hotList .el-col li:last-child{
padding: 0;
}
.juanList .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box{
box-shadow: 0 0 0 0 transparent!important;
}
.juanList .vue-waterfall-easy-container .vue-waterfall-easy > .img-box.default-card-animation{
padding:0px!important;
}
.juanList .MoreDiv{
min-height: 450px;
max-height: 500px;
position: relative;
}
.juanList ::-webkit-scrollbar {
width:0px;
height: 2px;
background-color: rgba(144,147,153,.3);
}
.juanList .MoreDiv .content{
width: 100%;
height: 100%;
position: absolute;
top: 2px;
bottom:0px;
}
.juanList .searchUl{
max-height: 200px;
overflow-y: scroll;
}
.juanList .searchUl li{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 14px;
margin:6px 0;
}
.juanList .searchUl li:hover{
text-decoration: underline;
color:#EE4454;
cursor: pointer;
}
</style>
<template>
<div class="juan juanList commonF">
<!-- 图片 -->
<div style="position:relative">
<img style="width:100%" src="../../assets/img/juan/listbanner.png" alt="">
<div style="position: absolute;top:100px;width:100%;">
<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 class="searchInput">
<el-input @input="InputChange" v-model="text" placeholder="请输入"></el-input>
<span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span>
</div>
<div v-loading="serachLoading" v-if="searchShow" class="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 v-else 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>
</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>
</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>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<div class="w1200" style="margin-top:100px;padding-bottom:20px">
<!-- <p class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门城市</span></p>
<div class="hotCity">
<div @mouseenter="mouseOver(0)" class="cityItem" :class="HoverIndex==0?'cityItemBig':''">
<img src="../../assets/img/juan/dongjin.png" alt="">
<p v-show="HoverIndex!=0" class="name">东京</p>
<div v-show="HoverIndex==0" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(1)" class="cityItem" :class="HoverIndex==1?'cityItemBig':''">
<img src="../../assets/img/juan/mgw.png" alt="">
<p v-show="HoverIndex!=1" class="name">东京</p>
<div v-show="HoverIndex==1" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(2)" class="cityItem" :class="HoverIndex==2?'cityItemBig':''">
<img src="../../assets/img/juan/db.png" alt="">
<p v-show="HoverIndex!=2" class="name">东京</p>
<div v-show="HoverIndex==2" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(3)" class="cityItem" :class="HoverIndex==3?'cityItemBig':''">
<img src="../../assets/img/juan/sh.png" alt="">
<p v-show="HoverIndex!=3" class="name">东京</p>
<div v-show="HoverIndex==3" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(4)" class="cityItem" :class="HoverIndex==4?'cityItemBig':''">
<img src="../../assets/img/juan/hb.png" alt="">
<p v-show="HoverIndex!=4" class="name">东京</p>
<div v-show="HoverIndex==4" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
</div> -->
<p style="margin-top:70px" class="f30 pfR">更多<span style="color:#EE4454">. 精彩推荐</span></p>
<div v-show='dataList.length!=0' id="MoreDiv" ref="MoreDiv" class="MoreDiv">
<div class="content">
<vue-waterfall-easy ref="waterfall" :enablePullDownEvent='enableEvent' :maxCols='3' :imgWidth="385" :imgsArr="dataList" @scrollReachBottom="getDatatype">
<div class="img-info" slot-scope="props">
<div @click="Gourl(props.value)" class="moreItem">
<div class="itemImg">
<div class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
</div>
<div class="textDiv">
<p class="text2 pfR" style="padding:16px 0">{{props.value.title}}</p>
<p class="text2 f12 c88">
<span v-html="props.value.descriptions"></span>
</p>
<p style="display:flex;align-item:center;justify-content: flex-end;margin-top:10px">
<span class="f12 cee pfR" style="text-decoration: underline">Read More</span>
<img style="margin-left:10px" src="../../assets/img/juan/more.png" alt="">
</p>
</div>
</div>
</div>
</vue-waterfall-easy>
</div>
</div>
<div class="nodataDiv" v-if='dataList.length==0' style='width:100%;margin-top:50px;color: #ccc;'>
<div class="moreItem">
<div class="itemImg">
<div class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
</div>
<div class="textDiv">
<p class="text2 pfR" style="padding:16px 0">暂无数据</p>
<p class="text2 f12 c88">
<span>暂无数据</span>
</p>
<p style="display:flex;align-item:center;justify-content: flex-end;margin-top:10px">
<span class="f12 cee pfR" style="text-decoration: underline">暂无数据</span>
<img style="margin-left:10px" src="../../assets/img/juan/more.png" alt="">
</p>
</div>
</div>
</div>
</div>
<div class="GreyDiv">
<p class="f30" style="text-align:center">旅行体验师</p>
<!-- <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p> -->
<div class="iconDiv" style="margin-top:40px">
<div class="w1200">
<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="height:90px">
资深旅行体验师
</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="height:90px">
大叔一名；阿公開過美軍 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="height:90px">
還沒上學之前以為自己是天才，上學之後才知道自己是廢柴，知識上癮患者兼發問狂，對自己的愚蠢擁有極高自信，
對這個小小的世界有著過多的好奇，目前正在刻苦特訓，希望能在十年內練成龜派氣功。
</div>
</div>
</div>
</div>
</div>
<div style="background:#fff">
<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>
</div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
components: {
vueWaterfallEasy
},
data(){
return{
zoom: 1,
Calculation: false,
height: 0,
width: 0,
userInfo: {},
HoverIndex:0,
carAuto:false,
dataList:[],
count: 4,
WininerHeight:0,
listMsg:{
pageSize:100,
pageIndex:0,
},
pageCount:100,
imgsArr:[],
text:'',
enableEvent:true,
searchList:[],
searchShow:false,
serachLoading:false,
}
},
methods:{
InputChange(){
if(this.text==""){
this.searchShow=false;
this.serachLoading=false;
return;
}
this.searchShow=true;
this.serachLoading=true;
this.apiJavaPost('/api/rssarticle/searchArticle',{texts:this.text},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)
},
SearchLi(){
this.text=str;
this.SearchText();
},
getDatatype(){
if(this.text==""){
this.enableEvent=true;
this.getDataList()
}else{
this.SearchText();
}
},
SearchText(){
let that=this;
if(this.text==""){
this.dataList=[];
this.listMsg.pageIndex=0;
this.getDataList()
return;
}
this.apiJavaPost('/api/rssarticle/searchArticle',{texts:this.text},res=>{
console.log("res25554658",res)
if(res.data.resultCode==1){
let data=res.data.data.list;
// if(data.length==0){
// this.$nextTick(()=>{
// console.log("无数据",this.$refs.waterfall)
// this.$refs.waterfall.waterfallOver()
// })
// }
this.dataList=data;
console.log(this.dataList)
}else{
this.Error(res.data.message);
}
},null)
},
getDataList(){
this.listMsg.pageIndex=this.listMsg.pageIndex+1;
this.apiJavaPost('/api/rssarticle/getArticleList',this.listMsg,res=>{
console.log("res",res)
if(res.data.resultCode==1){
let data=res.data.data.pageData;
if(data.length==0){
this.$refs.waterfall.waterfallOver()
console.log("safsg")
}
this.dataList=data.concat(this.dataList);
this.pageCount=res.data.data.pageCount;
console.log("res",this.dataList)
}else{
this.Error(res.data.message);
}
},null)
},
handleScroll(){
let MoreDiv=document.getElementById('MoreDiv');
// console.log("页面滚动",this.$refs.MoreDiv.getBoundingClientRect().bottom);
// let height=this.$refs.MoreDiv.getBoundingClientRect().bottom;
let height=MoreDiv.getBoundingClientRect().bottom;
if(this.WininerHeight==height || height<this.WininerHeight-50){
if(this.listMsg.pageIndex<this.pageCount){
this.listMsg.pageIndex=this.listMsg.pageIndex+1;
this.getDataList();
}
}
},
mouseOver(num){
this.HoverIndex=num;
},
Gourl(item){
let path="JuanDetails";
this.$router.push({ path,query:{id:item.id}})
},
},
mounted(){
// this.scrollobj = document.getElementsByClassName("el-scrollbar__wrap")[0];
// this.scrollobj.addEventListener("scroll", this.handleScroll);
},
created(){
this.WininerHeight=Number(window.innerHeight);
if(this.$route.query.search){
if(this.$route.query.search!="all"){
this.text=this.$route.query.search;
}
}
this.getDatatype();
}
}
</script>
src/components/taskPage/JuanList2222.vue 0 → 100644
View file @ e42448fc
<style>
.juan .carousel img{
width: 100%;
height: 100%;
transition: all 0.6s;
}
.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%;
}
.juanList .GreyDiv{
width: 100%;
background:#fff;
padding: 80px 0;
}
.iconDiv .iconItem:first-child{
margin-left: 0;
}
.iconDiv .iconItem{
display: inline-block;
width: 340px;
color:#8392A5;
font-size: 12px;
box-sizing: border-box;
margin-left: 90px;
position: relative;
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;
}
.juanList{
background:#f5f5f5
}
.juanList .hotCity{
margin-top:30px
}
.juanList .hotCity .cityItem{
position: relative;
overflow: hidden;
border-radius:4px;
display: inline-block;
margin-left: 15px;
width:190px;
height:284px;
transition: all linear 0.4s;
cursor: pointer;
}
.juanList .hotCity .cityItemBig{
width:378px!important;
}
.juanList .hotCity .cityItem:first-child{
margin-left: 0;
}
.juanList .hotCity .cityItem img{
width: 100%;
height: 100%;
}
.juanList .hotCity .cityItem .name{
position: absolute;
font-size:26px;
font-family: "PingFangR";
left: 20px;
bottom:20px;
color:#fff;
}
.juanList .hotCity .cityItem .CityHover{
position: absolute;
color:#fff;
width: 100%;
height: 100%;
padding:15px;
box-sizing: border-box;
background:rgba(0,0,0,0.3);
top:0;
}
.juanList .hotCity .cityItem .CityHover p:first-child{
margin-top:166px;
}
.juanList .MoreDiv{
margin-left: -15px;
margin-top: 30px;
padding-bottom: 30px;
}
.juanList .MoreDiv .moreItem{
width:385px;
height:376px;
display: inline-block;
position: relative;
margin-left: 20px;
background: #fff;
margin-bottom: 15px;
cursor: pointer;
overflow: hidden;
}
.juanList .MoreDiv .moreItem .itemImg{
width:100%;
height:218px;
}
.juanList .MoreDiv .moreItem .textDiv{
padding:0 15px;
width: 100%;
height: 158px;
box-sizing: border-box;
transition: all linear 0.3s;
background: #fff;
}
.juanList .MoreDiv .moreItem .noneData{
background:rgba(224,224,224,1);
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.juanList .MoreDiv .moreItem:hover .textDiv{
box-shadow: 0 0 15px 2px #f5f5f5;
}
.juanList .serachDiv{
width:560px;
margin:0 auto;
}
.juanList .serachDiv .searchInput{
background:rgba(255,255,255,1);
border-radius:4px;
width:556px;
height:48px;
position: relative;
}
.juanList .serachDiv .searchInput input{
width: 486px;
height: 46px;
border: none;
outline: none;
border-radius:4px;
}
.juanList .serachDiv .searchInput .searchBtn{
width: 70px;
height:48px;
display: inline-block;
background: #EE4454;
position: absolute;
top: 0;
text-align: center;
line-height: 48px;
}
.juanList .serachDiv .searchInput .searchBtn i{
color:#fff;
font-size:18px;
}
.juanList .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;
}
.juanList .serachDiv .hotList .el-col{
border-right:1px solid #E9E9E9;
padding-left: 15px;
box-sizing: border-box;
}
.juanList .serachDiv .hotList .el-col:last-child{
border: none;
}
.juanList .serachDiv .hotList .el-col li{
padding-bottom: 10px;
cursor: pointer;
}
.juanList .serachDiv .hotList .el-col li img{
margin-left: 8px;
}
.juanList .serachDiv .hotList .el-col li:last-child{
padding: 0;
}
</style>
<template>
<div class="juan juanList commonF">
<!-- 图片 -->
<div style="position:relative">
<img style="width:100%" src="../../assets/img/juan/listbanner.png" alt="">
<div style="position: absolute;top:100px;width:100%;">
<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 class="searchInput">
<input type="text">
<span class="searchBtn"><i class="iconfont icon-search"></i></span>
</div>
<div class="searchHot">
<p class="pfR">热门目的地</p>
<el-row class="hotList" style="margin-top:15px">
<el-col :span="8">
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
</el-col>
<el-col :span="8">
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
</el-col>
<el-col :span="8">
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li>东京<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<div class="w1200" style="margin-top:100px;">
<!-- <p class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门城市</span></p>
<div class="hotCity">
<div @mouseenter="mouseOver(0)" class="cityItem" :class="HoverIndex==0?'cityItemBig':''">
<img src="../../assets/img/juan/dongjin.png" alt="">
<p v-show="HoverIndex!=0" class="name">东京</p>
<div v-show="HoverIndex==0" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(1)" class="cityItem" :class="HoverIndex==1?'cityItemBig':''">
<img src="../../assets/img/juan/mgw.png" alt="">
<p v-show="HoverIndex!=1" class="name">东京</p>
<div v-show="HoverIndex==1" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(2)" class="cityItem" :class="HoverIndex==2?'cityItemBig':''">
<img src="../../assets/img/juan/db.png" alt="">
<p v-show="HoverIndex!=2" class="name">东京</p>
<div v-show="HoverIndex==2" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(3)" class="cityItem" :class="HoverIndex==3?'cityItemBig':''">
<img src="../../assets/img/juan/sh.png" alt="">
<p v-show="HoverIndex!=3" class="name">东京</p>
<div v-show="HoverIndex==3" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
<div @mouseenter="mouseOver(4)" class="cityItem" :class="HoverIndex==4?'cityItemBig':''">
<img src="../../assets/img/juan/hb.png" alt="">
<p v-show="HoverIndex!=4" class="name">东京</p>
<div v-show="HoverIndex==4" class="CityHover">
<p class="f26 pfR">日本</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游
馆、高耸入云的梅田蓝天大厦都是必去景点。
</p>
</div>
</div>
</div> -->
<p style="margin-top:70px" class="f30 pfR">更多<span style="color:#EE4454">. 精彩推荐</span></p>
<div id="MoreDiv" ref="MoreDiv" class="MoreDiv">
<div @click="Gourl(item)" v-for="(item,index) in dataList" :key="index" class="moreItem">
<div class="itemImg">
<div class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
<!-- <el-carousel class="carousel" style="height:100%" arrow="never" indicator-position="none" :autoplay="carAuto">
<el-carousel-item>
<img src="../../assets/img/juan/bg1.jpg" alt="">
</el-carousel-item>
<el-carousel-item>
<img src="../../assets/img/juan/bg2.jpg" alt="">
</el-carousel-item>
<el-carousel-item>
<img src="../../assets/img/juan/bg3.jpg" alt="">
</el-carousel-item>
</el-carousel> -->
</div>
<div class="textDiv">
<p class="text2 pfR" style="padding:16px 0">{{item.title}}</p>
<p class="text2 f12 c88">
<span v-html="item.descriptions"></span>
</p>
<p style="display:flex;align-item:center;justify-content: flex-end;margin-top:10px">
<span class="f12 cee pfR" style="text-decoration: underline">Read More</span>
<img style="margin-left:10px" src="../../assets/img/juan/more.png" alt="">
</p>
</div>
</div>
</div>
</div>
<div class="GreyDiv">
<p class="f30" style="text-align:center">旅行体验师</p>
<!-- <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p> -->
<div class="iconDiv" style="margin-top:40px">
<div class="w1200">
<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="height:90px">
资深旅行体验师
</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="height:90px">
大叔一名；阿公開過美軍 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="height:90px">
還沒上學之前以為自己是天才，上學之後才知道自己是廢柴，知識上癮患者兼發問狂，對自己的愚蠢擁有極高自信，
對這個小小的世界有著過多的好奇，目前正在刻苦特訓，希望能在十年內練成龜派氣功。
</div>
</div>
</div>
</div>
</div>
<div style="background:#fff">
<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>
</div>
</template>
<script>
export default {
data(){
return{
zoom: 1,
Calculation: false,
height: 0,
width: 0,
userInfo: {},
HoverIndex:0,
carAuto:false,
dataList:[],
count: 4,
WininerHeight:0,
listMsg:{
pageSize:9,
pageIndex:1,
},
pageCount:0,
}
},
methods:{
getDataList(){
this.apiJavaPost('/api/rssarticle/getArticleList',this.listMsg,res=>{
if(res.data.resultCode==1){
let data=res.data.data.pageData;
this.dataList=data.concat(this.dataList);
this.pageCount=res.data.data.pageCount;
console.log("res",this.dataList)
}else{
this.Error(res.data.message);
}
},null)
},
handleScroll(){
let MoreDiv=document.getElementById('MoreDiv');
// console.log("页面滚动",this.$refs.MoreDiv.getBoundingClientRect().bottom);
// let height=this.$refs.MoreDiv.getBoundingClientRect().bottom;
let height=MoreDiv.getBoundingClientRect().bottom;
if(this.WininerHeight==height || height<this.WininerHeight-50){
if(this.listMsg.pageIndex<this.pageCount){
this.listMsg.pageIndex=this.listMsg.pageIndex+1;
this.getDataList();
}
}
},
mouseOver(num){
this.HoverIndex=num;
},
Gourl(item){
let path="JuanDetails";
this.$router.push({ path,query:{id:item.id}})
},
},
mounted(){
this.scrollobj = document.getElementsByClassName("el-scrollbar__wrap")[0];
this.scrollobj.addEventListener("scroll", this.handleScroll);
},
created(){
this.WininerHeight=Number(window.innerHeight);
if(this.$route.query.search){
if(this.$route.query.search!="all"){
}
}
this.getDataList();
}
}
</script>
src/components/taskPage/JuanSaid.vue
View file @ e42448fc
<style scoped> <style>
.juan .carousel img{ .juan .carousel img{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -18,14 +18,130 @@ ...@@ -18,14 +18,130 @@
transform: scale(1.1); 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: 30px;
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{
display: inline-block;
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;
}
</style> </style>
<template> <template>
<div class="juan"> <div class="juan commonF">
<!-- 图片 --> <!-- 图片 -->
<div style="position:relative"> <div style="position:relative">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> <!-- <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> -->
<el-carousel class="carousel" :height="height+'px'"> <el-carousel class="carousel" style="height:600px">
<el-carousel-item> <el-carousel-item>
<img @click="goUrl('FoodImg')" src="../../assets/img/juan/bg1.jpg" alt=""> <img @click="goUrl('FoodImg')" src="../../assets/img/juan/bg1.jpg" alt="">
</el-carousel-item> </el-carousel-item>
...@@ -37,6 +153,145 @@ ...@@ -37,6 +153,145 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </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('FoodImg2')" class="destiItem">
<img src="../../assets/img/juan/bg3.jpg" alt="">
</div>
<div @click="goUrl('Fire')" class="destiItem">
<img src="../../assets/img/juan/bg2.jpg" alt="">
</div>
<div @click="goUrl('FoodImg')" class="destiItem">
<img src="../../assets/img/juan/bg1.jpg" alt="">
</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 style="margin-top:70px">
<img src="../../assets/img/juan/banner.png" alt="">
</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">
<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="height:90px">
资深旅行体验师
</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="height:90px">
大叔一名；阿公開過美軍 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="height:90px">
還沒上學之前以為自己是天才，上學之後才知道自己是廢柴，知識上癮患者兼發問狂，對自己的愚蠢擁有極高自信，
對這個小小的世界有著過多的好奇，目前正在刻苦特訓，希望能在十年內練成龜派氣功。
</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> </div>
</template> </template>
<script> <script>
...@@ -55,6 +310,10 @@ export default { ...@@ -55,6 +310,10 @@ export default {
} }
}, },
methods:{ methods:{
goDestion(str){
let path="JuanList";
this.$router.push({ path,query:{search:str}})
},
goUrl(path){ goUrl(path){
this.$router.push({ path,query:{}}) this.$router.push({ path,query:{}})
}, },
...@@ -63,22 +322,19 @@ export default { ...@@ -63,22 +322,19 @@ export default {
},created(){ },created(){
//this.userInfo = JSON.parse(localStorage.userInfo)
//初始化任务 //初始化任务
let Height = window.innerHeight // let Height = window.innerHeight
let Width = window.innerWidth // let Width = window.innerWidth
let oHeight = window.outerHeight // let oHeight = window.outerHeight
let oWidth = window.outerWidth // let oWidth = window.outerWidth
this.height = Height // this.height = Height
this.width = Width // this.width = Width
this.oWidth = oWidth // this.oWidth = oWidth
this.oHeight = oHeight // this.oHeight = oHeight
this.Calculation = Width/Height - 1.77 > 0.02 ? true : false // this.Calculation = Width/Height - 1.77 > 0.02 ? true : false
console.log(Height, Width, oHeight, oWidth,Width/Height, this.Calculation, Width/Height - 1.77) // console.log(Height, Width, oHeight, oWidth,Width/Height, this.Calculation, Width/Height - 1.77)
if (oWidth < 1920) {
this.smallWindow = true // this.zoom = Math.round((Height/1080) * 100) / 100
}
this.zoom = Math.round((Height/1080) * 100) / 100
} }
} }
</script> </script>
src/router.js
View file @ e42448fc
...@@ -4,7 +4,7 @@ import index from "./views/index"; ...@@ -4,7 +4,7 @@ import index from "./views/index";
import login from "./views/login"; import login from "./views/login";
import newLogin from "./views/newLogin"; import newLogin from "./views/newLogin";
import IceCreamTask from "./components/taskPage/IceCream/IceCreamTask"; import IceCreamTask from "./components/taskPage/IceCream/IceCreamTask";
import JuanSaid from "./components/taskPage/JuanSaid"; // import JuanSaid from "./components/taskPage/JuanSaid";
import FoodImg from "./components/taskPage/FoodImg"; import FoodImg from "./components/taskPage/FoodImg";
import FoodImg2 from "./components/taskPage/FoodImg2"; import FoodImg2 from "./components/taskPage/FoodImg2";
import xiazaiAPP from "./components/taskPage/xiazaiAPP"; import xiazaiAPP from "./components/taskPage/xiazaiAPP";
...@@ -635,6 +635,33 @@ export default new Router({ ...@@ -635,6 +635,33 @@ export default new Router({
headerShow: true, headerShow: true,
}, },
}, },
{
path: "/JuanSaid",
name: "JuanSaid",
component: resolve =>
require(["@/components/taskPage/JuanSaid.vue"], resolve),
meta: {
title: "卷妹说"
}
},
{
path: "/JuanList",
name: "JuanList",
component: resolve =>
require(["@/components/taskPage/JuanList.vue"], resolve),
meta: {
title: "卷妹说-热门目的地"
}
},
{
path: "/JuanDetails",
name: "JuanDetails",
component: resolve =>
require(["@/components/taskPage/JuanDetails.vue"], resolve),
meta: {
title: "卷妹说-热门目的地详情"
}
},
] ]
}, },
{ {
...@@ -646,15 +673,15 @@ export default new Router({ ...@@ -646,15 +673,15 @@ export default new Router({
headerShow: true, headerShow: true,
}, },
}, },
{ // {
path: "/JuanSaid", // path: "/JuanSaid",
name: "JuanSaid", // name: "JuanSaid",
component: JuanSaid, // component: JuanSaid,
meta: { // meta: {
title: "卷妹说", // title: "卷妹说",
headerShow: true, // headerShow: true,
}, // },
}, // },
{ {
path: "/FoodImg", path: "/FoodImg",
name: "FoodImg", name: "FoodImg",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment