Skip to content

A
Athena
Commit ba432bcd authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/athena

parents 70e8709f 5d963295
Hide whitespace changes
Inline Side-by-side
Showing with 439 additions and 142 deletions
src/assets/css/home.css
View file @ ba432bcd
...@@ -582,16 +582,17 @@ a{ ...@@ -582,16 +582,17 @@ a{
.Home .hotel .hotel_right_item img{ .Home .hotel .hotel_right_item img{
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: scale(1.2);
transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s;
} }
.Home .hotel .hotel_right_item img:hover{ .Home .hotel .hotel_right_item img:hover{
transform: scale(1.1); transform: scale(1.3);
} }
.Home .hotel .hotel_right_item .hotel_remake{ .Home .hotel .hotel_right_item .hotel_remake{
width:116px; width:116px;
height:116px; height:116px;
background:rgba(0,0,0,1); background:rgba(0,0,0,0.45);
opacity:0.75; /* opacity:0.75; */
border-radius:50%; border-radius:50%;
position: absolute; position: absolute;
text-align: center; text-align: center;
...@@ -803,4 +804,15 @@ a{ ...@@ -803,4 +804,15 @@ a{
.Home .cztm .el-tabs__nav-wrap::after{ .Home .cztm .el-tabs__nav-wrap::after{
height: 1px; height: 1px;
background-color: #ededed; background-color: #ededed;
}
.Home .Home_HtName{
display: inline-block;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
padding: 0 5px;
-webkit-box-orient: vertical;
} }
\ No newline at end of file
src/components/Home.vue
View file @ ba432bcd
...@@ -545,85 +545,39 @@ ...@@ -545,85 +545,39 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- 酒店 --> <!-- 酒店 -->
<!-- <div class="Grouptour hotel"> <div class="Grouptour hotel">
<div class="tour_left"> <div class="tour_left">
<p>酒店</p> <p>酒店</p>
<div class="tour_left_content hotel_left_content"> <div class="tour_left_content hotel_left_content">
<p style="font-size:14px;font-weight:700">临期促销</p> <p style="font-size:14px;font-weight:700">临期促销</p>
<span>曼谷</span> <span @click="goSearchDetail('名古屋')">名古屋</span>
<span>土耳其</span> <span @click="goSearchDetail('大分县')">别府</span>
<span>土耳其</span> <span @click="goSearchDetail('北海道')">洞爷.登别.苫小牧</span>
<span>曼谷</span> <span @click="goSearchDetail('东京都')">上野.浅草两国</span>
<span @click="goSearchDetail('兵库县')">神户.有马.明石</span>
<span @click="goSearchDetail('神奈川县')">箱根</span>
<span @click="goSearchDetail('京都府')">京都站周边</span>
</div> </div>
</div> </div>
<div class="tour_right"> <div class="tour_right">
<ul class="common_ul_tab"> <ul class="common_ul_tab">
<li :class="liActive==0?'li_active':''">海外酒店</li> <li :class="liActive==0?'li_active':''" @click="getHotelList('东京'),liActive=0">东京</li>
<li :class="liActive==1?'li_active':''">国内酒店</li> <li :class="liActive==1?'li_active':''" @click="getHotelList('大阪'),liActive=1">大阪</li>
<span style="float:right;color:#999999;font-size:12px">查看更多</span> <li :class="liActive==2?'li_active':''" @click="getHotelList('京都'),liActive=2">京都</li>
<span style="float:right;color:#999999;font-size:12px" @click="SearchHotelMore">查看更多</span>
</ul> </ul>
<div class="hotel_right"> <div class="hotel_right" v-loading="hotelLoading">
<div class="hotel_right_item"> <div class="hotel_right_item" v-for="item in HotelList" @click="goHotelDetail(item)">
<img src="../assets/img/home/tour1.png" alt=""> <img :src="item.hotelImageUrl" alt=""/>
<div class="hotel_remake"> <div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p> <p class="Home_HtName">{{item.hotelName}}</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p> <p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p> <p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">{{item.lowrateBySetCurrency}}</span>起</p>
</div>
</div>
<div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div>
</div><div class="hotel_right_item">
<img src="../assets/img/home/tour1.png" alt="">
<div class="hotel_remake">
<p style="font-size:16px;font-weight:bold">新加坡</p>
<p>15家酒店</p>
<p style="margin-left: 22px;width:68px;height:2px;background:rgba(245,245,245,1);opacity:0.25;dispaly:inline-block"></p>
<p style="color:#FF6600">￥<span style="font-size:18px;font-weight:bold">310</span>起</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- 特价机票 --> <!-- 特价机票 -->
...@@ -840,6 +794,18 @@ export default { ...@@ -840,6 +794,18 @@ export default {
isLogin:0, isLogin:0,
cityId:262, cityId:262,
companyId:0, companyId:0,
//酒店数据
HotelList:[],
hotelLoading:false,
//酒店详情传过去参数
PassMsg:{
hotelId:'',
groupBookingFlg:'',
arrivalDate:'',
departureDate:'',
searchroomGroup:[],
lowrateBySetCurrency:''
},
pickerOptions0: { pickerOptions0: {
disabledDate(time) { disabledDate(time) {
let today_after7=moment().add(8,'days').format('YYYY-MM-DD'); let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
...@@ -865,6 +831,8 @@ export default { ...@@ -865,6 +831,8 @@ export default {
mounted() { mounted() {
this.cityId=localStorage.cityId; this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site); this.companyId=parseInt(localStorage.site);
this.getHotelList('东京都');
}, },
created() { created() {
this.loadSize(); this.loadSize();
...@@ -1270,7 +1238,123 @@ export default { ...@@ -1270,7 +1238,123 @@ export default {
path: "HotelList" path: "HotelList"
}); });
window.open(routeData.href, '_blank'); window.open(routeData.href, '_blank');
} },
//初始化酒店列表
getHotelList(keyWord){
let msg = {
arrivalDate: moment().format("YYYY-MM-DD"),
departureDate: moment().add(1,'days').format('YYYY-MM-DD'),
displayFrom: 1,
freeword: keyWord,
freewordType: 1,
numberOfResults: 8,
reviewRatingLowerLimits: 0,
reviewRatingUpperLimits: 0,
searchHotelCategory: [],
searchHotelFeatures: [],
searchHotelIdList: [],
searchMaxRate: 0,
searchMealType: [],
searchMinRate: 0,
searchRoomType: [],
searchroomGroup: [{roomNum: 1, numberOfAdults: 1, numberOfChildren: 0, childAges: 0}],
sort: 0
}
this.hotelLoading=true;
this.apipost("dmc_post_Get_GetJAPAN_HotelList",msg,res => {
this.hotelLoading=false;
if (res.data.resultCode == 1) {
if(Object.prototype.toString.call(res.data.data.hotelSummary) == '[object Object]'){
this.HotelList.push(res.data.data.hotelSummary);
}else{
this.HotelList = res.data.data.hotelSummary;
}
this.PassMsg.groupBookingFlg = res.data.data.groupBookingFlg;
console.log(this.HotelList,'Hotellist');
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//首页点击跳转
goSearchDetail(keywords){
let msg = {
place:keywords,
StartDate:moment().format("YYYY-MM-DD"),
EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
}
sessionStorage.setItem("HotelInfo", JSON.stringify(msg));
this.$router.push({
path:"/HotelList",
})
},
//查看更多
SearchHotelMore() {
let msg ={
place:'',
StartDate:moment().format("YYYY-MM-DD"),
EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
auditNum:1,
childNum:0,
room:1,
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
}
switch(this.liActive){
case 0:
msg.place='东京都';
break;
case 1:
msg.place='大阪府';
break;
case 2:
msg.place='京都府';
break;
}
sessionStorage.setItem("HotelInfo", JSON.stringify(msg));
this.$router.push({
path:"/HotelList"
})
},
//跳转详情
goHotelDetail(item){
this.PassMsg.hotelId = item.hotelId,
this.PassMsg.arrivalDate=moment().format("YYYY-MM-DD");
this.PassMsg.departureDate = moment().add(1,'days').format('YYYY-MM-DD');
this.PassMsg.searchroomGroup = [{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}],
this.PassMsg.lowrateBySetCurrency = item.lowrateBySetCurrency;
this.PassMsg.room = 1
sessionStorage.setItem("HotelDetail", JSON.stringify(this.PassMsg));
this.$router.push({
path:"/HotelDetail"
})
},
} }
}; };
</script> </script>
......
src/components/Hotel/HotelHome.vue
View file @ ba432bcd
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="Ht_baozhang" style="margin-top:127px;"> <div class="Ht_baozhang" style="margin:80px auto;">
<ul> <ul>
<li> <li>
<img src="../../assets/img/hotel/bz.png" alt=""/> <img src="../../assets/img/hotel/bz.png" alt=""/>
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="Ht_btnImg" style="margin:40px auto;"> <div class="Ht_btnImg" style="margin:40px auto;display:none;">
<div> <div>
<img src="../../assets/img/hotel/j1.png" alt=""/> <img src="../../assets/img/hotel/j1.png" alt=""/>
</div> </div>
......
src/components/taskPage/Fire.vue
View file @ ba432bcd
...@@ -53,39 +53,89 @@ ...@@ -53,39 +53,89 @@
position: relative; position: relative;
top: -260px; top: -260px;
} }
.FM_div{
width:100%;
height:auto;
position: relative;
}
.FM_div img{
width:100%;
position: absolute;
z-index:100;
}
.videoBox{
position: absolute;
width:490px;
height:290px;
top:1245px;
margin:auto;
left:90px;
z-index:200;
}
.TwoCode{
width: 100%;
text-align: center;
height:200px;
position: absolute;
bottom:0;
margin:auto;
z-index:200;
}
.TwoCode img{
width:150px!important;
width:100%;
bottom: 0;
z-index:21000;
position: relative;
}
</style> </style>
<template> <template>
<div style="position: relative;"> <div>
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> <div v-show="isPhone">
<div class="div1" ref="div1" :style="{height: height1}"> <div class="FM_div" ref="div3" :style="{height: height3}">
<img class="img" src="../../assets/img/juan/h1.png" alt=""/> <img class="img" src="../../assets/img/juan/fire1.png" alt=""/>
<img class="img" src="../../assets/img/juan/h11.png" alt=""/> <img class="img" src="../../assets/img/juan/fire2.png" alt=""/>
<div class="spDiv" :style="{zoom: zoom}"> <div class="videoBox" :style="{zoom: zoom}">
<div style="box-sizing: border-box;padding: 21px 44px 17px 44px;">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay"> <video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/fire.mp4" type="video/ogg" /> <source src="../../assets/media/fire.mp4" type="video/ogg" />
</video> </video>
</div> </div>
<div class="TwoCode">
<img src="../../assets/img/juan/twoCode.png" alt=""/>
</div>
</div> </div>
</div> </div>
<div class="div1" ref="div2" :style="{height: height2}" style="margin-top:-75px"> <div style="position: relative;" v-show="!isPhone">
<img class="img" src="../../assets/img/juan/h2.png" alt=""/> <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<img class="img" src="../../assets/img/juan/h22.png" alt=""/> <div class="div1" ref="div1" :style="{height: height1}">
<!-- <div class="tiaoDiv" :style="{zoom: zoom}"> <img class="img" src="../../assets/img/juan/h1.png" alt=""/>
<div style="position:relative;z-index:200;color:#fff;padding:40px 0 0 70px;box-sizing:border-box"> <img class="img" src="../../assets/img/juan/h11.png" alt=""/>
<el-row style="padding:8px 0;cursor:pointer;width: 100%;" :gutter="20" v-for="item in tiaoshui" :key="item.id"> <div class="spDiv" :style="{zoom: zoom}">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <div style="box-sizing: border-box;padding: 21px 44px 17px 44px;">
<p @click="goLocalDes(item.idDes, item)">{{item.title}}</p> <video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
</el-col> <source src="../../assets/media/fire.mp4" type="video/ogg" />
<el-col :span="8" style="text-align:center">出团日期：{{item.startDate}}</el-col> </video>
</el-row> </div>
</div> </div>
</div> --> </div>
<div class="div1" ref="div2" :style="{height: height2}" style="margin-top:-75px">
<img class="img" src="../../assets/img/juan/h2.png" alt=""/>
<img class="img" src="../../assets/img/juan/h22.png" alt=""/>
<!-- <div class="tiaoDiv" :style="{zoom: zoom}">
<div style="position:relative;z-index:200;color:#fff;padding:40px 0 0 70px;box-sizing:border-box">
<el-row style="padding:8px 0;cursor:pointer;width: 100%;" :gutter="20" v-for="item in tiaoshui" :key="item.id">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<p @click="goLocalDes(item.idDes, item)">{{item.title}}</p>
</el-col>
<el-col :span="8" style="text-align:center">出团日期：{{item.startDate}}</el-col>
</el-row>
</div>
</div> -->
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
...@@ -93,12 +143,15 @@ export default { ...@@ -93,12 +143,15 @@ export default {
return { return {
ab:0, ab:0,
ab2:0, ab2:0,
ab3:0,
SaleList:[], SaleList:[],
cityId:262, cityId:262,
companyId:0, companyId:0,
height1:"0px", height1:"0px",
height2:"0px", height2:"0px",
height3:"0px",
tiaoshui:[], tiaoshui:[],
isPhone:false
}; };
}, },
mounted() { mounted() {
...@@ -107,8 +160,17 @@ export default { ...@@ -107,8 +160,17 @@ export default {
this.AutoExchange(); this.AutoExchange();
// this.getFirstImg2(); // this.getFirstImg2();
this.AutoExchange2(); this.AutoExchange2();
}) })
  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //在微信中打开
this.isPhone=true;
this.AutoExchange3();
  } else {
  //否则就是PC浏览器打开
this.isPhone=false;
}
}, },
created() { created() {
this.cityId=localStorage.cityId; this.cityId=localStorage.cityId;
...@@ -130,6 +192,8 @@ export default { ...@@ -130,6 +192,8 @@ export default {
this.height1=(2465/1920)*oWidth+'px'; this.height1=(2465/1920)*oWidth+'px';
this.height2=(4427/1920)*oWidth+'px'; this.height2=(4427/1920)*oWidth+'px';
this.loadTiaoshui(); this.loadTiaoshui();
let oWidth2 = window.screen.width;
this.height3=(5451/750)*oWidth2+'px';
}, },
methods: { methods: {
goLocalDes(idDes,obj){ goLocalDes(idDes,obj){
...@@ -182,6 +246,17 @@ export default { ...@@ -182,6 +246,17 @@ export default {
} }
} }
}, },
getFirstImg3(){
let div3 = this.$refs.div3;//整个区域
var imgLen = div3.getElementsByClassName("img");//图片
for (var i=0;i<imgLen.length;i++){
if (i!=0){
imgLen[i].style.opacity = 0;
}
}
},
//自动切换 //自动切换
AutoExchange(){ AutoExchange(){
var div1 = this.$refs.div1;//整个区域 var div1 = this.$refs.div1;//整个区域
...@@ -217,7 +292,26 @@ export default { ...@@ -217,7 +292,26 @@ export default {
} }
} }
},5000); },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> </script>
src/components/taskPage/FoodImg.vue
View file @ ba432bcd
...@@ -30,61 +30,135 @@ a{ ...@@ -30,61 +30,135 @@ a{
text-decoration: none; text-decoration: none;
color:#111111; 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> </style>
<template> <template>
<div style="position: relative;"> <div>
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> <div style="position: relative;">
<div class="div1" ref="div1"> <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/f1.png" alt=""/> <!-- -->
<img class="img" src="../../assets/img/juan/f2.png" alt=""/> <img class="img" src="../../assets/img/juan/fm1.jpg" alt=""/>
<div style="position: relative;z-index:-100;opacity:0"> <img class="img" src="../../assets/img/juan/fm2.png" alt=""/>
<img style="position: relative;" src="../../assets/img/juan/f1.png" alt=""/> <div style="position: relative;z-index:-100;opacity:0">
<img style="position: relative;" src="../../assets/img/juan/fm1.jpg" alt=""/>
</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> </div>
<div class="bottom"> <div style="position: relative;" v-show="!isPhone">
<img src="../../assets/img/juan/bottom.png" alt=""/> <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div style="width:1200px;margin:0 auto;padding-top:200px;position:relative;z-index:200"> <div class="div1" ref="div1">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <!-- -->
<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> <img class="img" src="../../assets/img/juan/f1.png" alt=""/>
</el-col> <img class="img" src="../../assets/img/juan/f2.png" alt=""/>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col> <div style="position: relative;z-index:-100;opacity:0">
</el-row> <img style="position: relative;" src="../../assets/img/juan/f1.png" alt=""/>
<el-row style="padding:15px 0;cursor:pointer" :gutter="20"> </div>
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> </div>
<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> <div class="bottom">
</el-col> <img src="../../assets/img/juan/bottom.png" alt=""/>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col> <div style="width:1200px;margin:0 auto;padding-top:200px;position:relative;z-index:200">
</el-row> <el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20"> <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <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>
<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> <el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col> </el-row>
</el-row> <el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20"> <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <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>
<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> <el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col> </el-row>
</el-row> <el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20"> <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <a target="_blank" href="http://www.oytour.com/#/search?keywords=%25E8%258A%25B1%25E7%2581%25AB%25E5%25A4%25A7%25E4%25BC%259A">本州精品假期升级版</a>
<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> <el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年9月</el-col> </el-row>
</el-row> <el-row style="padding:15px 0;cursor:pointer" :gutter="20">
<el-row style="padding:15px 0;cursor:pointer" :gutter="20"> <el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<el-col :span="12" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> <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>
<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> <el-col :span="8" style="text-align:center">出团日期：2019年7月</el-col>
<el-col :span="8" style="text-align:center">出团日期：2019年8月</el-col> </el-row>
</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">
<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">
<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> </div>
</div> </div>
...@@ -97,6 +171,9 @@ export default { ...@@ -97,6 +171,9 @@ export default {
SaleList:[], SaleList:[],
cityId:262, cityId:262,
companyId:0, companyId:0,
isPhone:false,
height2:"0px",
ab3:0
}; };
}, },
mounted() { mounted() {
...@@ -104,12 +181,24 @@ export default { ...@@ -104,12 +181,24 @@ export default {
// this.getFirstImg(); // this.getFirstImg();
this.AutoExchange(); this.AutoExchange();
}) })
  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //在微信中打开
this.isPhone=true;
this.AutoExchange3();
  } else {
  //否则就是PC浏览器打开
this.isPhone=false;
}
}, },
created() { created() {
this.cityId=localStorage.cityId; this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site); this.companyId=parseInt(localStorage.site);
this.Cztm(); this.Cztm();
let oWidth = window.screen.width;
this.height2=(6363/1920)*oWidth+500+'px';
// this.height2=(3702/750)*oWidth+'px';
}, },
components: { components: {
}, },
...@@ -168,6 +257,24 @@ export default { ...@@ -168,6 +257,24 @@ export default {
} }
} }
},5000); },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);
} }
} }
}; };
......
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