Skip to content

A
Athena
Commit afa98089 authored by zhengke's avatar zhengke
Browse files
Options

update

parent 958a3552
Show whitespace changes
Inline Side-by-side
Showing with 34 additions and 60 deletions
src/components/taskPage/JuanList.vue
View file @ afa98089
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
margin-left: 0; margin-left: 0;
} }
.juanList .hotCity .cityItem img{ .juanList .hotCity .cityItem img{
width: 100%; /* width: 100%; */
height: 100%; height: 100%;
} }
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
top:0; top:0;
} }
.juanList .hotCity .cityItem .CityHover p:first-child{ .juanList .hotCity .cityItem .CityHover p:first-child{
margin-top:166px; margin-top:190px;
} }
.juanList .MoreDiv{ .juanList .MoreDiv{
margin-left: -15px; margin-left: -15px;
...@@ -313,6 +313,11 @@ ...@@ -313,6 +313,11 @@
.juanList ._pagination .el-pager li.active{ .juanList ._pagination .el-pager li.active{
color: #f56c6c; color: #f56c6c;
} }
.hotCity .el-tag{
color:#fff;
background: rgba(255,255,255,0.2);
/* margin-bottom:10px; */
}
</style> </style>
<template> <template>
<div @click="getRef($event,1)" :data-self="0" class="juan juanList commonF"> <div @click="getRef($event,1)" :data-self="0" class="juan juanList commonF">
...@@ -356,64 +361,20 @@ ...@@ -356,64 +361,20 @@
</div> </div>
<div class="w1200" style="margin-top:100px;padding-bottom:10px"> <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 v-for="(item,index) in TOPlist" :key="index" @mouseenter="mouseOver(index)" class="cityItem" :class="HoverIndex==index?'cityItemBig':''">
<img src="../../assets/img/juan/dongjin.png" alt=""> <img :src="item.imgs" alt="">
<p v-show="HoverIndex!=0" class="name">东京</p> <p v-show="HoverIndex!=index" class="name text1">{{item.title}}</p>
<div v-show="HoverIndex==0" class="CityHover"> <div v-show="HoverIndex==index" class="CityHover">
<p class="f26 pfR">日本</p> <p class="f26 pfR text1">{{item.title}}</p>
<p class="f12 text3">作为日本第二大都市，大阪向世界各地的旅客保证，处处都是美 <p class="f12 text1">
食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游食、美景和惊喜！历史重地大阪城、世界最大水族馆─大阪海游 <el-tag size="mini" style="margin-left:12px;" v-for="(lab,ind) in item.labelList" :key="ind">{{lab}}</el-tag>
馆、高耸入云的梅田蓝天大厦都是必去景点。
</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> </p>
</div> </div>
</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>
</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-loading="dataloading" 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 @click="Gourl(item)" v-for="(item,index) in dataList" :key="index" class="moreItem"> <div @click="Gourl(item)" v-for="(item,index) in dataList" :key="index" class="moreItem">
...@@ -553,6 +514,7 @@ export default { ...@@ -553,6 +514,7 @@ export default {
// }, // },
data(){ data(){
return{ return{
TOPlist:[],
defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"', defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"',
currentPage:1, currentPage:1,
zoom: 1, zoom: 1,
...@@ -669,8 +631,14 @@ export default { ...@@ -669,8 +631,14 @@ export default {
this.dataloading=false; this.dataloading=false;
if(res.data.resultCode==1){ if(res.data.resultCode==1){
let data=res.data.data.list; let data=res.data.data;
this.dataList=data; this.dataList=data.list;
this.TOPlist=data.TOPlist;
this.TOPlist.forEach(item=>{
if(item.label){
item.labelList=item.label.split(',')
}
})
this.totalCount=res.data.data.count; this.totalCount=res.data.data.count;
}else{ }else{
this.Error(res.data.message); this.Error(res.data.message);
...@@ -683,7 +651,13 @@ export default { ...@@ -683,7 +651,13 @@ export default {
this.dataloading=false; 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;
this.dataList=data; this.dataList=data.list;
this.TOPlist=data.TOPlist;
this.TOPlist.forEach(item=>{
if(item.label){
item.labelList=item.label.split(',')
}
})
this.pageCount=res.data.data.pageCount; this.pageCount=res.data.data.pageCount;
this.totalCount=res.data.data.count; this.totalCount=res.data.data.count;
}else{ }else{
......
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