Skip to content

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

update

parent 44102b69
Hide whitespace changes
Inline Side-by-side
Showing with 528 additions and 48 deletions
src/components/taskPage/FoodImg4.vue 0 → 100644
View file @ d32ffc2c
<style scoped>
.div1{
width: 100%;
height: auto;
position: relative;
}
.div1 img {
width: 100%;
position: absolute;
z-index:100;
}
.Homeimg{
position: absolute;
z-index: 20000;
width: 45px!important;
height: 45px!important;
left: 56px;
top: 39px;
cursor: pointer;
}
.bottom img{
width: 100%;
position: absolute;
z-index: 1
}
a{
text-decoration: none;
color:#111111;
}
.FM_div{
width:100%;
height:auto;
position: relative;
}
.FM_div img{
width:100%;
position: absolute;
z-index:100;
}
.div3 img{
width:100%;
height: 100%;
}
</style>
<template>
<div>
<div style="position: relative;" v-show="isPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div3 div1" ref="div3" :style="{height: height2}">
<!-- -->
<img class="img" src="../../assets/img/juan/juan4_p1.jpg" alt=""/>
<!-- <img class="img" src="../../assets/img/juan/juan4_p1.jpg" alt=""/> -->
<!-- <div style="position: relative;z-index:-100;opacity:0">
<img style="position: relative;" src="../../assets/img/juan/juan4_p1.jpg" alt=""/>
</div> -->
<!-- <div style="position:absolute;bottom:0;width:100%">
<div style="width:95%;margin:0 auto;padding:10px 0 0 10px;position:relative;z-index:200">
<el-row style="padding:50px 0 5px 0;cursor:pointer;" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">日本本州·一四七升版~米其林椿山庄+豪华双温泉 </a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">日本本州~希尔顿假期~全程日式五星</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">本州精品假期升级版</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 让你玩好”九”~九州系列</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 北海道 希尔顿系列(东航联营)</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：9月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 暑期乐园系列</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<div style="text-align:center;width:100%;margin:30px 0">
<img style="width:150px;height:150px;position:relative;" src="../../assets/img/juan/twoCode.png" alt=""/>
</div>
</div>
</div> -->
</div>
<!-- <div class="bottom">
<img src="../../assets/img/juan/fmBtm.png" alt=""/>
<div style="width:95%;margin:0 auto;padding:10px 0 0 10px;position:relative;z-index:200">
<el-row style="padding:50px 0 5px 0;cursor:pointer;" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">日本本州·一四七升版~米其林椿山庄+豪华双温泉 </a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">日本本州~希尔顿假期~全程日式五星</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;">本州精品假期升级版</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 让你玩好”九”~九州系列</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 北海道 希尔顿系列(东航联营)</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：9月</el-col>
</el-row>
<el-row style="padding-top:5px;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<a target="_blank" style="font-size:12px;"> 暑期乐园系列</a>
</el-col>
<el-col :span="10" style="text-align:right;font-size:12px;">出团日期：8月</el-col>
</el-row>
<div style="text-align:center;width:100%;margin:30px 0">
<img style="width:150px;height:150px;position:relative;" src="../../assets/img/juan/twoCode.png" alt=""/>
</div>
</div>
</div> -->
</div>
<div style="position: relative;" v-show="!isPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div1" ref="div1">
<!-- -->
<img class="img" src="../../assets/img/juan/juan4_1.jpg" alt=""/>
<!-- <img class="img" src="../../assets/img/juan/f2.png" alt=""/> -->
<div style="position: relative;z-index:-100;opacity:0">
<img style="position: relative;" src="../../assets/img/juan/juan4_1.jpg" alt=""/>
</div>
<!-- <div style="position:absolute;bottom:0;width:100%">
<div style="width:1200px;margin:0 auto;padding-top:200px;position:relative;z-index:200">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineId=14">日本本州·一四七升版~米其林椿山庄+豪华双温泉 </a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineId=14">日本本州~希尔顿假期~全程日式五星</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=%25E8%258A%25B1%25E7%2581%25AB%25E5%25A4%25A7%25E4%25BC%259A">本州精品假期升级版</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 让你玩好”九”~九州系列</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 北海道 希尔顿系列(东航联营)</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年9月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 暑期乐园系列</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
</div>
</div> -->
</div>
<!-- <div class="bottom">
<img src="../../assets/img/juan/bottom.png" alt=""/>
<div style="width:1200px;margin:0 auto;padding-top:200px;position:relative;z-index:200">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineId=14">日本本州·一四七升版~米其林椿山庄+豪华双温泉 </a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineId=14">日本本州~希尔顿假期~全程日式五星</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=%25E8%258A%25B1%25E7%2581%25AB%25E5%25A4%25A7%25E4%25BC%259A">本州精品假期升级版</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 让你玩好”九”~九州系列</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 北海道 希尔顿系列(东航联营)</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年9月</el-col>
</el-row>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;margin-left:100px;">
<a target="_blank" href="http://www.oytour.com/#/search?keywords=&lineId=14&lineName=%E5%87%BA%E5%A2%83%E6%97%A5%E6%9C%AC%E7%BA%BF&lineteamId=592&lineteamName=%E8%AE%A9%E4%BD%A0%E7%8E%A9%E5%A5%BD%E2%80%9D%E4%B9%9D%E2%80%9D~%E4%B9%9D%E5%B7%9E%E7%B3%BB%E5%88%97"> 暑期乐园系列</a>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
</el-row>
</div>
</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
ab:0,
SaleList:[],
cityId:262,
companyId:0,
isPhone:false,
height2:"0px",
ab3:0
};
},
mounted() {
this.$nextTick(()=>{
// this.getFirstImg();
// this.AutoExchange();
})
  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
//   if (ua.match(/MicroMessenger/i) == "micromessenger") {
// this.isPhone=true;
//   } else {
// this.isPhone=false;
// }
let userAgentInfo = navigator.userAgent;
let Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
this.isPhone = true;
// this.AutoExchange3();
break;
}
}
console.log("this.isPhone",this.isPhone)
},
created() {
this.cityId=localStorage.cityId?localStorage.cityId:0;
this.companyId=localStorage.site?parseInt(localStorage.site):0;
this.Cztm();
let oWidth = window.screen.width;
this.height2=(6363/1920)*oWidth+500+'px';
// this.height2=(3702/750)*oWidth+'px';
},
components: {
},
methods: {
goLocalDes(idDes,obj){
let path = 'detailTwo'
path=`${path}/${encodeURIComponent(idDes)}/${obj.tcid}`;
let routeData = this.$router.resolve({ path:path});
window.open(routeData.href, '_blank');
},
goUrl(path){
this.$router.push({ path,query:{}})
},
Cztm(){
let Msg={
pageIndex:1,
pageSize:5,
companyId:this.companyId,
cityId:this.cityId,
};
this.apiJavaPost('/api/b2b/home/getHomeTravelSpecialSale',Msg,res=>{
if(res.data.resultCode==1){
this.SaleList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
//遍历所有图和按钮,页面加载完毕显示第一张图
getFirstImg(){
var div1 = this.$refs.div1;//整个区域
var imgLen = div1.getElementsByClassName("img");//图片
for (var i=0;i<imgLen.length;i++){
if (i!=0){
imgLen[i].style.opacity = 0;
}
}
},
//自动切换
AutoExchange(){
var div1 = this.$refs.div1;//整个区域
var imgLen = div1.getElementsByClassName("img");//图片
var that = this;
setInterval(function ac() { //设置2000毫秒重复运行
that.ab = that.ab>imgLen.length-2?0:++that.ab; //5张图,当触摸到的按钮索引号大于3时(比如4),那么ab=0(下一张图为第0张),否则++ab;
//循环遍历下一张图的效果.
for (var b = 0; b < imgLen.length; b++) {
if (b == that.ab) {
imgLen[b].style.opacity = 1;
imgLen[b].style.transition = "opacity 2s";
} else {
imgLen[b].style.opacity = 0;
}
}
},5000);
},
//自动切换
AutoExchange3(){
let div3 = this.$refs.div3;//整个区域
var imgLen = div3.getElementsByClassName("img");//图片
var that = this;
setInterval(function ac() { //设置2000毫秒重复运行
that.ab3 = that.ab3>imgLen.length-2?0:++that.ab3; //5张图,当触摸到的按钮索引号大于3时(比如4),那么ab=0(下一张图为第0张),否则++ab;
//循环遍历下一张图的效果.
for (var b = 0; b < imgLen.length; b++) {
if (b == that.ab3) {
imgLen[b].style.opacity = 1;
imgLen[b].style.transition = "opacity 2s";
} else {
imgLen[b].style.opacity = 0;
}
}
},5000);
}
}
};
</script>
src/components/taskPage/JuanList.vue
View file @ d32ffc2c
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
.juanList .GreyDiv{ .juanList .GreyDiv{
width: 100%; width: 100%;
background:#fff; background:#fff!important;
padding: 80px 0; padding: 80px 0;
} }
.iconDiv .iconItem:first-child{ .iconDiv .iconItem:first-child{
margin-left: 0; margin-left: 0;
} }
.iconDiv .iconItem{ .iconDiv .iconItem{
display: inline-block; float: left;
width: 340px; width: 340px;
color:#8392A5; color:#8392A5;
font-size: 12px; font-size: 12px;
...@@ -166,6 +166,14 @@ ...@@ -166,6 +166,14 @@
transition: all linear 0.3s; transition: all linear 0.3s;
background: #fff; background: #fff;
} }
.juanList .MoreDiv .moreItem .dataImg{
width:100%;
height:100%;
}
.juanList .MoreDiv .moreItem .dataImg img{
width:100%;
height:100%;
}
.juanList .MoreDiv .moreItem .noneData{ .juanList .MoreDiv .moreItem .noneData{
background:rgba(224,224,224,1); background:rgba(224,224,224,1);
width:100%; width:100%;
...@@ -246,8 +254,8 @@ ...@@ -246,8 +254,8 @@
padding:0px!important; padding:0px!important;
} }
.juanList .MoreDiv{ .juanList .MoreDiv{
min-height: 450px; /* min-height: 450px;
max-height: 500px; max-height: 500px; */
position: relative; position: relative;
} }
.juanList ::-webkit-scrollbar { .juanList ::-webkit-scrollbar {
...@@ -280,6 +288,34 @@ ...@@ -280,6 +288,34 @@
color:#EE4454; color:#EE4454;
cursor: pointer; cursor: pointer;
} }
.juanList ._pagination{
height: 42px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.juanList ._pagination .el-pagination .btn-next,.juanList ._pagination .el-pagination .btn-prev{
width:40px !important;
height:20px !important;
border:1px solid rgba(238,68,84,1);
border-radius:10px;
color: #f56c6c;
}
.juanList ._pagination .el-pagination{
display: flex;
align-items: center;
}
.juanList ._pagination .el-pager li{
background: transparent;
font-weight: initial;
}
.juanList ._pagination .el-pager li:hover{
color: #f56c6c;
}
.juanList ._pagination .el-pager li.active{
color: #f56c6c;
}
</style> </style>
<template> <template>
<div class="juan juanList commonF"> <div class="juan juanList commonF">
...@@ -291,7 +327,7 @@ ...@@ -291,7 +327,7 @@
<p class="f30 pfR" style="text-align:center;color:#fff">全世界最棒的旅游体验</p> <p class="f30 pfR" style="text-align:center;color:#fff">全世界最棒的旅游体验</p>
<p style="text-align:center;color:#fff;margin-bottom:15px">探索有趣又独特目的地旅游体验</p> <p style="text-align:center;color:#fff;margin-bottom:15px">探索有趣又独特目的地旅游体验</p>
<div class="searchInput"> <div class="searchInput">
<el-input @input="InputChange" v-model="text" placeholder="请输入"></el-input> <el-input @focus="InputFocus" @blur="InputBlur" @input="InputChange" v-model="text" placeholder="请输入"></el-input>
<span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span> <span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span>
</div> </div>
<div v-loading="serachLoading" v-if="searchShow" class="searchHot"> <div v-loading="serachLoading" v-if="searchShow" class="searchHot">
...@@ -300,7 +336,7 @@ ...@@ -300,7 +336,7 @@
<li v-show="searchList.length==0" style="margin:6px 0;text-align:center">暂无数据</li> <li v-show="searchList.length==0" style="margin:6px 0;text-align:center">暂无数据</li>
</ul> </ul>
</div> </div>
<div v-else class="searchHot"> <div v-if="searchHot" class="searchHot">
<p class="pfR">热门目的地</p> <p class="pfR">热门目的地</p>
<el-row class="hotList" style="margin-top:15px"> <el-row class="hotList" style="margin-top:15px">
<el-col :span="8"> <el-col :span="8">
...@@ -322,7 +358,7 @@ ...@@ -322,7 +358,7 @@
</div> </div>
</div> </div>
<div class="w1200" style="margin-top:100px;padding-bottom:50px"> <div class="w1200" style="margin-top:100px;padding-bottom:10px">
<!-- <p class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门城市</span></p> <!-- <p class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门城市</span></p>
<div class="hotCity"> <div class="hotCity">
<div @mouseenter="mouseOver(0)" class="cityItem" :class="HoverIndex==0?'cityItemBig':''"> <div @mouseenter="mouseOver(0)" class="cityItem" :class="HoverIndex==0?'cityItemBig':''">
...@@ -382,8 +418,40 @@ ...@@ -382,8 +418,40 @@
</div> </div>
</div> --> </div> -->
<p style="margin-top:70px" class="f30 pfR">更多<span style="color:#EE4454">. 精彩推荐</span></p> <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 v-loading="dataloading" v-show='dataList.length!=0' id="MoreDiv" ref="MoreDiv" class="MoreDiv">
<div class="content"> <div @click="Gourl(item)" v-for="(item,index) in dataList" :key="index" class="moreItem">
<div class="itemImg">
<div class="dataImg" v-if="item.imgs&&item.imgs!=''">
<img :src="item.imgs" :onerror="defaultImg" alt="">
</div>
<div v-else class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
</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>
<!-- 分页 -->
<el-row class="_pagination" v-if="totalCount > 0" style="margin-left:20px">
<el-pagination
:current-page.sync="currentPage"
:page-size="listMsg.pageSize"
layout="total, prev, pager, next"
:total="totalCount"
@current-change="handleCurrentChange"
></el-pagination>
</el-row>
<!-- <div class="content">
<vue-waterfall-easy ref="waterfall" :enablePullDownEvent='enableEvent' :maxCols='3' :imgWidth="385" :imgsArr="dataList" @scrollReachBottom="getDatatype"> <vue-waterfall-easy ref="waterfall" :enablePullDownEvent='enableEvent' :maxCols='3' :imgWidth="385" :imgsArr="dataList" @scrollReachBottom="getDatatype">
<div class="img-info" slot-scope="props"> <div class="img-info" slot-scope="props">
<div @click="Gourl(props.value)" class="moreItem"> <div @click="Gourl(props.value)" class="moreItem">
...@@ -407,7 +475,7 @@ ...@@ -407,7 +475,7 @@
</div> </div>
</vue-waterfall-easy> </vue-waterfall-easy>
</div> </div> -->
</div> </div>
<div class="nodataDiv" v-if='dataList.length==0' style='width:100%;margin-top:50px;color: #ccc;'> <div class="nodataDiv" v-if='dataList.length==0' style='width:100%;margin-top:50px;color: #ccc;'>
<div class="moreItem"> <div class="moreItem">
...@@ -435,15 +503,16 @@ ...@@ -435,15 +503,16 @@
<p class="f30" style="text-align:center">旅行<span style="color:#EE4454"> . 体验师</span></p> <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> <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p>
<div class="iconDiv" style="margin-top:40px"> <div class="iconDiv" style="margin-top:40px">
<div class="w1200"> <div class="w1200 basefix">
<div class="iconItem"> <div class="iconItem">
<div class="imgDiv" style="position:relative"> <div class="imgDiv" style="position:relative">
<img style="width:78px;height:78px;border-radius:50%" src="../../assets/img/juan/p1.png" alt=""> <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:#3A4758;padding-top:30px">卷妹</p>
<!-- <p class="f14" style="color:#A4A4B5">资深旅行体验师</p> --> <!-- <p class="f14" style="color:#A4A4B5">资深旅行体验师</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
资深旅行体验师 人类先发明了旅行，然后又不停地追问，旅行的意义。其实，世间所有的相遇，不是久别重逢，就是后悔莫及。
人生如旅，简单点，你打得赢怪物，就收得到礼物。期望我们在未来的时间里既打的赢怪物也能收获礼物，加油吧，少年！
</div> </div>
</div> </div>
...@@ -453,7 +522,7 @@ ...@@ -453,7 +522,7 @@
<p class="f14" style="color:#3A4758;padding-top:30px">Ken Worker</p> <p class="f14" style="color:#3A4758;padding-top:30px">Ken Worker</p>
<!-- <p class="f14" style="color:#A4A4B5">Icon name</p> --> <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
大叔一名；阿公开过美軍 Guest House，阿爸曾是日语导游；自己当过 MV 导演、网络趋势观察者， 大叔一名；阿公开过美軍 Guest House，阿爸曾是日语导游；自己当过 MV 导演、网络趋势观察者，
并且是国家考试通过的国际林队；创办过「部落客旅行团」，担任过旅游集团社群的发展总监； 并且是国家考试通过的国际林队；创办过「部落客旅行团」，担任过旅游集团社群的发展总监；
钟情于啤酒喝威士忌，旁及各种生活、娱乐与历史題材；現任《旅饭》共同创办人兼「旅行长」（Chief Travel Officer）。 钟情于啤酒喝威士忌，旁及各种生活、娱乐与历史題材；現任《旅饭》共同创办人兼「旅行长」（Chief Travel Officer）。
...@@ -466,7 +535,7 @@ ...@@ -466,7 +535,7 @@
<p class="f14" style="color:#3A4758;padding-top:30px">Portnoy</p> <p class="f14" style="color:#3A4758;padding-top:30px">Portnoy</p>
<!-- <p class="f14" style="color:#A4A4B5">Icon name</p> --> <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
还没上学以为自己是天才，上学后才知道自己是废材，知识上瘾患者加提问狂，对自己的愚蠢拥有极高的自信， 还没上学以为自己是天才，上学后才知道自己是废材，知识上瘾患者加提问狂，对自己的愚蠢拥有极高的自信，
对这个小小的世界有极多的好奇，目前正在刻苦特训，希望能在十年內练成龟派气功。 对这个小小的世界有极多的好奇，目前正在刻苦特训，希望能在十年內练成龟派气功。
...@@ -488,6 +557,8 @@ export default { ...@@ -488,6 +557,8 @@ export default {
}, },
data(){ data(){
return{ return{
defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"',
currentPage:1,
zoom: 1, zoom: 1,
Calculation: false, Calculation: false,
height: 0, height: 0,
...@@ -499,28 +570,50 @@ export default { ...@@ -499,28 +570,50 @@ export default {
count: 4, count: 4,
WininerHeight:0, WininerHeight:0,
listMsg:{ listMsg:{
pageSize:20, pageSize:18,
pageIndex:0, pageIndex:1,
}, },
pageCount:100, pageCount:100,
totalCount:2,
imgsArr:[], imgsArr:[],
text:'', text:'',
enableEvent:true, enableEvent:true,
searchList:[], searchList:[],
searchShow:false, searchShow:false,
serachLoading:false, serachLoading:false,
searchHot:false,
SearchMsg:{
pageSize:18,
pageIndex:1,
},
dataloading:false,
} }
}, },
methods:{ methods:{
InputFocus(){
this.searchHot=true;
},
InputBlur(){
// this.searchHot=false;
},
handleCurrentChange(val) {
// 翻页
this.getDatatype(val);
},
InputChange(){ InputChange(){
this.searchHot=false;
if(this.text==""){ if(this.text==""){
this.searchHot=true;
this.searchShow=false; this.searchShow=false;
this.serachLoading=false; this.serachLoading=false;
return; return;
} }
this.searchShow=true; this.searchShow=true;
this.serachLoading=true; this.serachLoading=true;
this.apiJavaPost('/api/rssarticle/searchArticle',{texts:this.text},res=>{ this.SearchMsg.texts=this.text;
this.SearchMsg.pageSize=1000;
this.apiJavaPost('/api/rssarticle/searchArticle',this.SearchMsg,res=>{
this.serachLoading=false; this.serachLoading=false;
if(res.data.resultCode==1){ if(res.data.resultCode==1){
let data=res.data.data.list; let data=res.data.data.list;
...@@ -534,55 +627,51 @@ export default { ...@@ -534,55 +627,51 @@ export default {
SearchLi(str){ SearchLi(str){
this.text=str; this.text=str;
this.SearchText(); this.SearchText();
this.searchHot=false;
}, },
getDatatype(){ getDatatype(val){
if(this.text==""){ if(this.text==""){
this.enableEvent=true; this.listMsg.pageIndex = parseInt(val);
this.getDataList() this.getDataList()
}else{ }else{
this.SearchMsg.pageSize=18;
this.SearchMsg.pageIndex = parseInt(val);
this.SearchText(); this.SearchText();
} }
}, },
SearchText(){ SearchText(){
this.searchHot=false;
let that=this; let that=this;
if(this.text==""){ if(this.text==""){
this.dataList=[]; this.dataList=[];
this.listMsg.pageIndex=0; this.listMsg.pageIndex=1;
this.getDataList() this.getDataList()
return; return;
} }
this.apiJavaPost('/api/rssarticle/searchArticle',{texts:this.text},res=>{ this.dataloading=true;
console.log("res25554658",res) this.SearchMsg.texts=this.text;
this.apiJavaPost('/api/rssarticle/searchArticle',this.SearchMsg,res=>{
this.dataloading=false;
if(res.data.resultCode==1){ if(res.data.resultCode==1){
let data=res.data.data.list; let data=res.data.data.list;
// if(data.length==0){
// this.$nextTick(()=>{
// console.log("无数据",this.$refs.waterfall)
// this.$refs.waterfall.waterfallOver()
// })
// }
this.dataList=data; this.dataList=data;
console.log(this.dataList) this.totalCount=res.data.data.count;
}else{ }else{
this.Error(res.data.message); this.Error(res.data.message);
} }
},null) },null)
}, },
getDataList(){ getDataList(){
this.listMsg.pageIndex=this.listMsg.pageIndex+1; this.dataloading=true;
this.apiJavaPost('/api/rssarticle/getArticleList',this.listMsg,res=>{ this.apiJavaPost('/api/rssarticle/getArticleList',this.listMsg,res=>{
console.log("res",res) this.dataloading=false;
if(res.data.resultCode==1){ if(res.data.resultCode==1){
let data=res.data.data.pageData; let data=res.data.data.pageData;
if(data.length==0){ this.dataList=data;
this.$refs.waterfall.waterfallOver()
console.log("safsg")
}
this.dataList=data.concat(this.dataList);
this.pageCount=res.data.data.pageCount; this.pageCount=res.data.data.pageCount;
this.totalCount=res.data.data.count;
console.log("res",this.dataList)
}else{ }else{
this.Error(res.data.message); this.Error(res.data.message);
} }
...@@ -624,7 +713,7 @@ export default { ...@@ -624,7 +713,7 @@ export default {
this.text=this.$route.query.search; this.text=this.$route.query.search;
} }
} }
this.getDatatype(); this.getDatatype(1);
} }
} }
......
src/components/taskPage/JuanSaid.vue
View file @ d32ffc2c
...@@ -16,6 +16,11 @@ ...@@ -16,6 +16,11 @@
background: url('../../assets/img/juan/bg1.jpg') 100% center; background: url('../../assets/img/juan/bg1.jpg') 100% center;
background-size: cover; background-size: cover;
} }
.tst-four{
background: url('../../assets/img/juan/bg4.jpg') 100% center;
background-size: cover;
}
.tstt{ .tstt{
background: url('../../assets/img/juan/bg3.jpg') 100% center; background: url('../../assets/img/juan/bg3.jpg') 100% center;
background-size: cover; background-size: cover;
...@@ -136,7 +141,7 @@ ...@@ -136,7 +141,7 @@
margin-left: 0; margin-left: 0;
} }
.iconDiv .iconItem{ .iconDiv .iconItem{
display: inline-block; float: left;
width: 340px; width: 340px;
color:#8392A5; color:#8392A5;
font-size: 12px; font-size: 12px;
...@@ -224,6 +229,8 @@ ...@@ -224,6 +229,8 @@
</div> </div>
<div @click="goUrl('FoodImg')" class="destiItem tst-three"> <div @click="goUrl('FoodImg')" class="destiItem tst-three">
</div> </div>
<div @click="goUrl('FoodImg4')" class="destiItem tst-four">
</div>
<!-- <div class="destiItem"> <!-- <div class="destiItem">
<img src="../../assets/img/home/tour1.png" alt=""> <img src="../../assets/img/home/tour1.png" alt="">
</div> </div>
...@@ -251,15 +258,16 @@ ...@@ -251,15 +258,16 @@
<p class="f30" style="text-align:center">旅行<span style="color:#EE4454"> . 体验师</span></p> <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> <p class="f20" style="color:#999999;text-align:center">Hot Destinations</p>
<div class="iconDiv" style="margin-top:40px"> <div class="iconDiv" style="margin-top:40px">
<div class="w1200"> <div class="w1200 basefix">
<div class="iconItem"> <div class="iconItem">
<div class="imgDiv" style="position:relative"> <div class="imgDiv" style="position:relative">
<img style="width:78px;height:78px;border-radius:50%" src="../../assets/img/juan/p1.png" alt=""> <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:#3A4758;padding-top:30px">卷妹</p>
<!-- <p class="f14" style="color:#A4A4B5">资深旅行体验师</p> --> <!-- <p class="f14" style="color:#A4A4B5">资深旅行体验师</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
资深旅行体验师 人类先发明了旅行，然后又不停地追问，旅行的意义。其实，世间所有的相遇，不是久别重逢，就是后悔莫及。
人生如旅，简单点，你打得赢怪物，就收得到礼物。期望我们在未来的时间里既打的赢怪物也能收获礼物，加油吧，少年！
</div> </div>
</div> </div>
...@@ -269,7 +277,7 @@ ...@@ -269,7 +277,7 @@
<p class="f14" style="color:#3A4758;padding-top:30px">Ken Worker</p> <p class="f14" style="color:#3A4758;padding-top:30px">Ken Worker</p>
<!-- <p class="f14" style="color:#A4A4B5">Icon name</p> --> <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
大叔一名；阿公开过美軍 Guest House，阿爸曾是日语导游；自己当过 MV 导演、网络趋势观察者， 大叔一名；阿公开过美軍 Guest House，阿爸曾是日语导游；自己当过 MV 导演、网络趋势观察者，
并且是国家考试通过的国际林队；创办过「部落客旅行团」，担任过旅游集团社群的发展总监； 并且是国家考试通过的国际林队；创办过「部落客旅行团」，担任过旅游集团社群的发展总监；
钟情于啤酒喝威士忌，旁及各种生活、娱乐与历史題材；現任《旅饭》共同创办人兼「旅行长」（Chief Travel Officer）。 钟情于啤酒喝威士忌，旁及各种生活、娱乐与历史題材；現任《旅饭》共同创办人兼「旅行长」（Chief Travel Officer）。
...@@ -282,7 +290,7 @@ ...@@ -282,7 +290,7 @@
<p class="f14" style="color:#3A4758;padding-top:30px">Portnoy</p> <p class="f14" style="color:#3A4758;padding-top:30px">Portnoy</p>
<!-- <p class="f14" style="color:#A4A4B5">Icon name</p> --> <!-- <p class="f14" style="color:#A4A4B5">Icon name</p> -->
</div> </div>
<div style="height:90px"> <div style="line-height:1.8">
还没上学以为自己是天才，上学后才知道自己是废材，知识上瘾患者加提问狂，对自己的愚蠢拥有极高的自信， 还没上学以为自己是天才，上学后才知道自己是废材，知识上瘾患者加提问狂，对自己的愚蠢拥有极高的自信，
对这个小小的世界有极多的好奇，目前正在刻苦特训，希望能在十年內练成龟派气功。 对这个小小的世界有极多的好奇，目前正在刻苦特训，希望能在十年內练成龟派气功。
......
src/router.js
View file @ d32ffc2c
...@@ -7,6 +7,7 @@ import IceCreamTask from "./components/taskPage/IceCream/IceCreamTask"; ...@@ -7,6 +7,7 @@ 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 FoodImg4 from "./components/taskPage/FoodImg4";
import xiazaiAPP from "./components/taskPage/xiazaiAPP"; import xiazaiAPP from "./components/taskPage/xiazaiAPP";
import Fire from "./components/taskPage/Fire"; import Fire from "./components/taskPage/Fire";
...@@ -700,7 +701,15 @@ export default new Router({ ...@@ -700,7 +701,15 @@ export default new Router({
headerShow: true, headerShow: true,
}, },
}, },
{
path: "/FoodImg4",
name: "FoodImg4",
component: FoodImg4,
meta: {
title: "卷妹说",
headerShow: true,
},
},
{ {
path: "/Fire", path: "/Fire",
name: "Fire", name: "Fire",
......
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