Commit 0ed93960 authored by 华国豪's avatar 华国豪 🙄

新增卷妹说2,新增同业下载页面

parent b1037758
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<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;
}
.fisPhone .bottom{
background: url(../../assets/img/juan/fengyedibu1.jpg);
background-size: 100% 100%;
height: 400px;
}
.isPhone .bottom{
background: url(../../assets/img/juan/fengyedibu11.jpg);
background-size: 100% 100%;
height: 400px;
}
.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%;
}
.isPhone .div1{
position:initial
}
.isPhone .div1 img{
position:initial;
display: block;
}
</style>
<template>
<div>
<div v-show="isPhone" class="isPhone">
<!-- <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> -->
<div class="div3 div1" ref="div3">
<img style="height:initial !important" class="img" src="../../assets/img/juan/fengye11.jpg" alt=""/>
</div>
<div class="bottom">
<img src="../../assets/img/juan/fengyedibu11.jpg" 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;text-align: right;">
<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;text-align: right;">
<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;text-align: right;">
<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" class="fisPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div1" ref="div1" :style="{height: height2}">
<img class="img" src="../../assets/img/juan/fengye1.jpg" alt=""/>
</div>
<div class="bottom">
<!-- <img src="" alt=""/> -->
<div style="width:1200px;margin:0 auto;padding-top:230px;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: right;">
<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: right;">
<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: right;">
<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>
</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;
this.AutoExchange3();
  } else {
  //否则就是PC浏览器打开
this.isPhone=false;
}
},
created() {
this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site);
this.Cztm();
let oWidth = window.screen.width;
this.height2=(6363/1920)*oWidth+'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>
<style>
.big-bg{
height: 766px;
width: 100%;
background: url(../../assets/img/juan/xiazaiApp.png);
background-size: 100% 100%;
}
.phone{
margin-top: 63px;
height: 625px;
width: 300px;
background: url(../../assets/img/juan/shouji.png);
background-size: 100% 100%;
}
.phone img{
width: 269px;
height: 479px;
}
.el-carousel{
width: 269px;
height: 479px;
top: 75px;
left: 16px;
}
.el-carousel__container{
width: 269px;
}
.el-carousel__arrow{
display: none !important;
}
</style>
<template>
<div class="big-bg">
<el-row>
<el-col :span="4"></el-col>
<el-col :span="7">
<div class="phone">
<el-carousel height="479px" loop autoplay>
<el-carousel-item>
<img src="../../assets/img/juan/solid1.png" alt="">
</el-carousel-item>
<el-carousel-item>
<img src="../../assets/img/juan/solid2.png" alt="">
</el-carousel-item>
<el-carousel-item>
<img src="../../assets/img/juan/solid3.png" alt="">
</el-carousel-item>
<el-carousel-item>
<img src="../../assets/img/juan/solid4.png" alt="">
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
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