|
|
@@ -43,9 +43,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
+
|
|
|
<!-- 下一页序列帧 -->
|
|
|
<div
|
|
|
- :class="{pageOpc:pageOpcAc}"
|
|
|
+ :class="{ pageOpc: pageOpcAc }"
|
|
|
class="pageGif"
|
|
|
@click="pageInd++"
|
|
|
v-if="pageInd < leftData.length - 1"
|
|
|
@@ -53,13 +58,20 @@
|
|
|
></div>
|
|
|
<!-- 下面主要内容盒子 -->
|
|
|
<div class="mainBox">
|
|
|
- <Son1 v-if="topDataInd === '1000'" />
|
|
|
+ <Son1 v-if="topDataInd === '1000'" @openLook="openLook" />
|
|
|
<Son2 v-else-if="topDataInd === '2000'" />
|
|
|
<Son3 v-else-if="topDataInd === '3000'" />
|
|
|
<Son4 v-else-if="topDataInd === '4000'" />
|
|
|
<Son5 v-else-if="topDataInd === '5000'" />
|
|
|
<Son6 v-else-if="topDataInd === '6000'" />
|
|
|
</div>
|
|
|
+ <!-- 查看视频的盒子 -->
|
|
|
+ <div class="videoBox" v-if="lookShow === 'video'">
|
|
|
+ <video autoplay controls :src="lookUrl"></video>
|
|
|
+ <div class="closeL" @click="lookShow = null">
|
|
|
+ <img src="../../assets/img/closeL.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -77,6 +89,9 @@ export default {
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ lookShow: null,
|
|
|
+ lookUrl: null,
|
|
|
+ lookPics:[],
|
|
|
// 菜单数据
|
|
|
topData: [],
|
|
|
// 菜单的显示和隐藏
|
|
|
@@ -92,7 +107,7 @@ export default {
|
|
|
// 关于序列帧
|
|
|
pageGifLeft: 0,
|
|
|
pageGifTim: null,
|
|
|
- pageOpcAc:false
|
|
|
+ pageOpcAc: false,
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -100,13 +115,11 @@ export default {
|
|
|
//监控data中的数据变化
|
|
|
watch: {
|
|
|
pageInd(val) {
|
|
|
-
|
|
|
- this.pageOpcAc=true
|
|
|
+ this.pageOpcAc = true;
|
|
|
setTimeout(() => {
|
|
|
- this.pageOpcAc=false
|
|
|
+ this.pageOpcAc = false;
|
|
|
}, 500);
|
|
|
|
|
|
-
|
|
|
// 控制顶部滑动
|
|
|
let dom = document.querySelector(".rowBox");
|
|
|
dom.scrollTo({ left: 82 * (val - 1), behavior: "smooth" });
|
|
|
@@ -114,19 +127,29 @@ export default {
|
|
|
let pageDom = document.querySelector(".mainBox");
|
|
|
pageDom.scrollTo({ top: this.pageHei * val, behavior: "smooth" });
|
|
|
|
|
|
- // 切换的时候暂时视频
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- let dom = document.querySelectorAll("video");
|
|
|
- dom.forEach((v) => {
|
|
|
- v.pause();
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- });
|
|
|
+ // // 切换的时候暂时视频
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // let dom = document.querySelectorAll("video");
|
|
|
+ // dom.forEach((v) => {
|
|
|
+ // v.pause();
|
|
|
+ // });
|
|
|
+ // }, 1000);
|
|
|
+ // });
|
|
|
},
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ openLook(url, type) {
|
|
|
+ if (type === "img") {
|
|
|
+ let dom = this.$refs.viewer.$viewer;
|
|
|
+ this.lookPics = [url];
|
|
|
+ dom.show();
|
|
|
+ } else {
|
|
|
+ this.lookUrl = url;
|
|
|
+ this.lookShow = type;
|
|
|
+ }
|
|
|
+ },
|
|
|
// 点击菜单栏里面切换模块
|
|
|
cutInfo(id, val) {
|
|
|
if (this.topDataInd === id) {
|
|
|
@@ -154,7 +177,7 @@ export default {
|
|
|
this.pageHei = pageDom.offsetHeight;
|
|
|
this.pageGifTim = setInterval(() => {
|
|
|
this.pageGifLeft += 29;
|
|
|
- if(this.pageGifLeft>=725) this.pageGifLeft=0
|
|
|
+ if (this.pageGifLeft >= 725) this.pageGifLeft = 0;
|
|
|
}, 100);
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
@@ -186,7 +209,7 @@ export default {
|
|
|
}
|
|
|
// 序列帧动图
|
|
|
.pageGif {
|
|
|
- transform: opacity .5s;
|
|
|
+ transform: opacity 0.5s;
|
|
|
opacity: 1;
|
|
|
z-index: 1;
|
|
|
position: absolute;
|
|
|
@@ -199,7 +222,7 @@ export default {
|
|
|
background-position-x: 0px;
|
|
|
background-position-y: 0px;
|
|
|
}
|
|
|
- .pageOpc{
|
|
|
+ .pageOpc {
|
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
@@ -338,5 +361,31 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .videoBox {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99999;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .closeL {
|
|
|
+ z-index: 99999;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ width: 30px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .viewerCla img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
