|
|
@@ -36,10 +36,17 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="title" v-html="data.title"></div>
|
|
|
- <div @click="slideto('slidePrev')" v-if="data[active].length>1" class="swiper-button-prev"></div>
|
|
|
+ <div
|
|
|
+ @click="slideto('slidePrev')"
|
|
|
+ v-if="data[active].length > 1"
|
|
|
+ class="swiper-button-prev"
|
|
|
+ ></div>
|
|
|
<swiper class="warpper" ref="mySwiper" :options="swiperOptions">
|
|
|
<swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
<div class="slide">
|
|
|
+ <div class="tips" v-if="active === 'video'">
|
|
|
+ 如遇视频抖动，请点击“新窗口打开”观看。<span class="btn" @click="openVideo(item.url)">新窗口打开</span>
|
|
|
+ </div>
|
|
|
<img
|
|
|
style="cursor: pointer"
|
|
|
v-viewer
|
|
|
@@ -49,21 +56,32 @@
|
|
|
/>
|
|
|
<video
|
|
|
v-else-if="active === 'video'"
|
|
|
- :src="fixUrl(item.url)"
|
|
|
controls
|
|
|
autoplay
|
|
|
- ></video>
|
|
|
- <iframe
|
|
|
- v-else
|
|
|
- :src="fixUrl(item)"
|
|
|
- frameborder="0"
|
|
|
- ></iframe>
|
|
|
+ :id="'video'+ (i + 1)"
|
|
|
+ >
|
|
|
+ <source :src="fixUrl(item.url)" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ <iframe v-else :src="fixUrl(item)" frameborder="0"></iframe>
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
- <div class="swiper-pagination" v-if="data[active].length>1" slot="pagination"></div>
|
|
|
+ <div
|
|
|
+ class="swiper-pagination"
|
|
|
+ v-if="data[active].length > 1"
|
|
|
+ slot="pagination"
|
|
|
+ ></div>
|
|
|
</swiper>
|
|
|
- <div @click="slideto('slideNext')" v-if="data[active].length>1" class="swiper-button-next"></div>
|
|
|
- <p class="desc" ref="desc" :class="{'desc-duo':data.content&&data.content.length>60}" v-html="data.content"></p>
|
|
|
+ <div
|
|
|
+ @click="slideto('slideNext')"
|
|
|
+ v-if="data[active].length > 1"
|
|
|
+ class="swiper-button-next"
|
|
|
+ ></div>
|
|
|
+ <p
|
|
|
+ class="desc"
|
|
|
+ ref="desc"
|
|
|
+ :class="{ 'desc-duo': data.content && data.content.length > 60 }"
|
|
|
+ v-html="data.content"
|
|
|
+ ></p>
|
|
|
</div>
|
|
|
|
|
|
<div class="content" v-if="fixIcon.length <= 0 && hadLoad">
|
|
|
@@ -101,9 +119,9 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// http://8.135.106.227:8009
|
|
|
- server:"",
|
|
|
+ server: "http://192.168.1.101",
|
|
|
loadAuto: false,
|
|
|
- hadLoad:false,
|
|
|
+ hadLoad: false,
|
|
|
audio: "",
|
|
|
m: this.$route.query.m,
|
|
|
id: this.$route.query.id,
|
|
|
@@ -125,7 +143,7 @@ export default {
|
|
|
},
|
|
|
data: {},
|
|
|
iconArr,
|
|
|
- active: ""
|
|
|
+ active: "",
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -156,7 +174,7 @@ export default {
|
|
|
fixIcon() {
|
|
|
let arr = this.iconArr.filter((item) => !!item.display);
|
|
|
return arr;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
components: {
|
|
|
Swiper,
|
|
|
@@ -174,6 +192,15 @@ export default {
|
|
|
error;
|
|
|
}
|
|
|
},
|
|
|
+ openVideo(url){
|
|
|
+ if (this.active == "video") {
|
|
|
+ for (let i = 0; i < this.data[this.active].length; i++) {
|
|
|
+ console.log(document.querySelector("#video" + (i + 1)));
|
|
|
+ document.querySelector("#video" + (i + 1)).pause()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.open(this.fixUrl(url),'_blank')
|
|
|
+ },
|
|
|
async getData() {
|
|
|
// http://super.4dage.com
|
|
|
let url = `${this.server}/data/${
|
|
|
@@ -196,12 +223,11 @@ export default {
|
|
|
item.display = true;
|
|
|
}
|
|
|
});
|
|
|
- this.hadLoad = true
|
|
|
-
|
|
|
+ this.hadLoad = true;
|
|
|
},
|
|
|
|
|
|
colseParent() {
|
|
|
- window.parent.document.getElementById("closepop").click();
|
|
|
+ window.parent.document.getElementById("closepop").click();
|
|
|
},
|
|
|
fixUrl(item) {
|
|
|
return this.server + item;
|
|
|
@@ -212,7 +238,7 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
-
|
|
|
+
|
|
|
document.addEventListener(
|
|
|
"WeixinJSBridgeReady",
|
|
|
() => {
|
|
|
@@ -232,9 +258,10 @@ export default {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
-.swiper-button-prev, .swiper-button-next{
|
|
|
- background: none!important;
|
|
|
- padding: 10px 30px!important;
|
|
|
+.swiper-button-prev,
|
|
|
+.swiper-button-next {
|
|
|
+ background: none !important;
|
|
|
+ padding: 10px 30px !important;
|
|
|
}
|
|
|
|
|
|
.mb-intro {
|
|
|
@@ -262,11 +289,11 @@ export default {
|
|
|
height: 86%;
|
|
|
margin: 2% auto;
|
|
|
position: relative;
|
|
|
- .norecord{
|
|
|
+ .norecord {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
color: #fff;
|
|
|
}
|
|
|
.warpper {
|
|
|
@@ -278,6 +305,24 @@ export default {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 180px);
|
|
|
position: relative;
|
|
|
+ .tips{
|
|
|
+ top: 10px;
|
|
|
+ left: 100px;
|
|
|
+ z-index: 999;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ .btn{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fcd67b;
|
|
|
+ background-color: #a01c26;
|
|
|
+ border-radius: 36px;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
img,
|
|
|
video,
|
|
|
iframe {
|
|
|
@@ -285,12 +330,12 @@ export default {
|
|
|
max-width: calc(100% - 220px);
|
|
|
border-radius: 14px;
|
|
|
box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
position: absolute;
|
|
|
}
|
|
|
- iframe{
|
|
|
+ iframe {
|
|
|
width: calc(100% - 220px);
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -299,7 +344,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .desc{
|
|
|
+ .desc {
|
|
|
color: #fff;
|
|
|
width: 76%;
|
|
|
margin: -40px auto 0;
|
|
|
@@ -310,7 +355,7 @@ export default {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
- .desc-duo{
|
|
|
+ .desc-duo {
|
|
|
text-indent: 32px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
@@ -368,7 +413,7 @@ export default {
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
color: rgba(252, 214, 123, 1);
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
@@ -474,7 +519,7 @@ export default {
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
-*{
|
|
|
+* {
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
.swiper-container {
|
|
|
@@ -487,7 +532,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.swiper-pagination-bullets {
|
|
|
- bottom: 40px!important;
|
|
|
+ bottom: 40px !important;
|
|
|
}
|
|
|
|
|
|
.swiper-slide {
|
|
|
@@ -528,24 +573,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-::-webkit-scrollbar-track-piece {
|
|
|
- background-color:#ffffff;
|
|
|
-}
|
|
|
-::-webkit-scrollbar {
|
|
|
- width:8px;
|
|
|
+::-webkit-scrollbar-track-piece {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
overflow: hidden;
|
|
|
- height:13px;
|
|
|
-}
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- background-color:#ccc;
|
|
|
- background-clip:padding-box;
|
|
|
- min-height:10px;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-::-webkit-scrollbar-thumb:hover {
|
|
|
- background-color:#929292;
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
|
|
+ height: 13px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #ccc;
|
|
|
+ background-clip: padding-box;
|
|
|
+ min-height: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #929292;
|
|
|
+}
|
|
|
+</style>
|
chenzhiguang
