Skip to content

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

增加手机端显示

parent 1c1583ad
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 72 deletions
src/assets/img/juan/fire1.png 0 → 100644
View file @ 4e35496a
This diff is collapsed.
src/assets/img/juan/fire2.png 0 → 100644
View file @ 4e35496a
This diff is collapsed.
src/assets/img/juan/fm2.png 0 → 100644
View file @ 4e35496a
This diff is collapsed.
src/components/taskPage/Fire.vue
View file @ 4e35496a
......@@ -53,39 +53,89 @@
position: relative;
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>
<template>
<div style="position: relative;">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div1" ref="div1" :style="{height: height1}">
<img class="img" src="../../assets/img/juan/h1.png" alt=""/>
<img class="img" src="../../assets/img/juan/h11.png" alt=""/>
<div class="spDiv" :style="{zoom: zoom}">
<div style="box-sizing: border-box;padding: 21px 44px 17px 44px;">
<div>
<div v-show="isPhone">
<div class="FM_div" ref="div3" :style="{height: height3}">
<img class="img" src="../../assets/img/juan/fire1.png" alt=""/>
<img class="img" src="../../assets/img/juan/fire2.png" alt=""/>
<div class="videoBox" :style="{zoom: zoom}">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/fire.mp4" type="video/ogg" />
</video>
</div>
<div class="TwoCode">
<img src="../../assets/img/juan/twoCode.jpg" alt=""/>
</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 style="position: relative;" v-show="!isPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div1" ref="div1" :style="{height: height1}">
<img class="img" src="../../assets/img/juan/h1.png" alt=""/>
<img class="img" src="../../assets/img/juan/h11.png" alt=""/>
<div class="spDiv" :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">
<source src="../../assets/media/fire.mp4" type="video/ogg" />
</video>
</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>
</template>
<script>
export default {
......@@ -93,12 +143,15 @@ export default {
return {
ab:0,
ab2:0,
ab3:0,
SaleList:[],
cityId:262,
companyId:0,
height1:"0px",
height2:"0px",
height3:"0px",
tiaoshui:[],
isPhone:false
};
},
mounted() {
......@@ -107,8 +160,17 @@ export default {
this.AutoExchange();
// this.getFirstImg2();
this.AutoExchange2();
})
  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;
......@@ -130,6 +192,8 @@ export default {
this.height1=(2465/1920)*oWidth+'px';
this.height2=(4427/1920)*oWidth+'px';
this.loadTiaoshui();
let oWidth2 = window.screen.width;
this.height3=(5451/750)*oWidth2+'px';
},
methods: {
goLocalDes(idDes,obj){
......@@ -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(){
var div1 = this.$refs.div1;//整个区域
......@@ -217,7 +292,26 @@ export default {
}
}
},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/FoodImg.vue
View file @ 4e35496a
This diff is collapsed.
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