|
|
@@ -4,9 +4,15 @@
|
|
|
v-if="currentData"
|
|
|
:style="{ 'background-image': `url(${require('@/assets/images/bg.jpg')})` }"
|
|
|
>
|
|
|
- <div class="audio" @click="switchAudio">
|
|
|
- <img :src="require(`@/assets/images/${isAudio?'pause':'play'}.png`)" alt="" />
|
|
|
- <audio ref="audio" :src="$cdn + `part0${query.region}/music/${currentData.audio}`"></audio>
|
|
|
+ <div class="audio" v-if="currentData.audio" @click="switchAudio">
|
|
|
+ <img
|
|
|
+ :src="require(`@/assets/images/${isAudio ? 'pause' : 'play'}.png`)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <audio
|
|
|
+ ref="audio"
|
|
|
+ :src="$cdn + `part0${query.region}/music/${currentData.audio}`"
|
|
|
+ ></audio>
|
|
|
</div>
|
|
|
<div class="top">
|
|
|
<img :src="require('@/assets/images/title.png')" alt="" />
|
|
|
@@ -19,17 +25,17 @@
|
|
|
>
|
|
|
<div class="title">
|
|
|
<img :src="require('@/assets/images/small_k.png')" alt="" />
|
|
|
- <span>{{ currentData.title }}</span>
|
|
|
+ <span :style="{'align-items':currentData.title.length>15?'flex-start':'center'}">{{ currentData.title }}</span>
|
|
|
</div>
|
|
|
<div class="desc" v-html="currentData.desc"></div>
|
|
|
<div class="con">
|
|
|
<div class="maincon">
|
|
|
<div class="mframe" v-if="active.type == 'model'">
|
|
|
<img :src="require('@/assets/images/fullH.jpg')" alt="" />
|
|
|
- <iframe :src="active.url" frameborder="0"> </iframe>
|
|
|
+ <iframe allowfullscreen :key="active.url" :src="active.url" frameborder="0"> </iframe>
|
|
|
</div>
|
|
|
|
|
|
- <div class="mimg" v-else v-swiper:mySwiper="swiperOptions">
|
|
|
+ <div class="mimg" v-else :key="active.folder" v-swiper:mySwiper="swiperOptions">
|
|
|
<ul class="swiper-wrapper swiper2">
|
|
|
<li class="swiper-slide" v-for="(item, i) in active.url" :key="i">
|
|
|
<img
|
|
|
@@ -40,8 +46,8 @@
|
|
|
alt=""
|
|
|
/>
|
|
|
</li>
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
</ul>
|
|
|
+ <div class="swiper-pagination pagination" slot="pagination"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -50,7 +56,9 @@
|
|
|
v-html="currentData.wenyin || '暂无'"
|
|
|
></div>
|
|
|
<div class="list" v-swiper:iSwiper="swiperOption">
|
|
|
- <div class="sw-active">{{ active.name }}</div>
|
|
|
+ <div class="sw-active">
|
|
|
+ <h3>{{ active.name }}</h3>
|
|
|
+ </div>
|
|
|
<ul class="swiper-wrapper swiper1">
|
|
|
<li
|
|
|
@click="active = item"
|
|
|
@@ -70,11 +78,12 @@
|
|
|
/>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
+ <div class="sw-active">
|
|
|
+ <p v-html="active.desc"></p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <p class="bottom">MAO ZHE DONG ZHUAN TI ZHAN</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -92,7 +101,7 @@ export default {
|
|
|
query: {},
|
|
|
currentData: "",
|
|
|
active: "",
|
|
|
- isAudio: false
|
|
|
+ isAudio: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -110,7 +119,14 @@ export default {
|
|
|
id: "qtq",
|
|
|
slidesPerView: "auto",
|
|
|
autoplay: false,
|
|
|
- direction: "horizontal",
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ type: 'fraction',
|
|
|
+ },
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
@@ -118,6 +134,7 @@ export default {
|
|
|
directives: {
|
|
|
swiper: directive,
|
|
|
},
|
|
|
+
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
if (!this.$route.query.key || !this.$route.query.region) {
|
|
|
@@ -129,23 +146,38 @@ export default {
|
|
|
this.$route.query.key
|
|
|
];
|
|
|
this.active = this.currentData.content[0];
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.audio &&
|
|
|
+ this.$refs.audio.addEventListener("play", () => {
|
|
|
+ this.isAudio = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$refs.audio &&
|
|
|
+ this.$refs.audio.addEventListener("pause", () => {
|
|
|
+ this.isAudio = false;
|
|
|
+ });
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ this.$refs.audio.play();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
// document.title = "毛泽东同志遗物专题展";
|
|
|
},
|
|
|
- methods:{
|
|
|
- switchAudio(){
|
|
|
+ methods: {
|
|
|
+ switchAudio() {
|
|
|
if (this.$refs.audio.paused) {
|
|
|
- this.isAudio = true
|
|
|
- this.$refs.audio.play()
|
|
|
- }
|
|
|
- else{
|
|
|
- this.isAudio = false
|
|
|
- this.$refs.audio.pause()
|
|
|
+ this.$refs.audio.play();
|
|
|
+ } else {
|
|
|
+ this.$refs.audio.pause();
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -156,18 +188,18 @@ export default {
|
|
|
background-size: cover;
|
|
|
background-position: center center;
|
|
|
background-repeat: no-repeat;
|
|
|
- padding: 16px 0 0;
|
|
|
+ padding: 20px 0 0;
|
|
|
font-size: 0;
|
|
|
position: relative;
|
|
|
- .audio{
|
|
|
+ .audio {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 10px;
|
|
|
width: 40px;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- audio{
|
|
|
+ audio {
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
}
|
|
|
@@ -181,9 +213,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.body {
|
|
|
- height: 85%;
|
|
|
+ height: 88%;
|
|
|
width: 100%;
|
|
|
- padding: 20% 8%;
|
|
|
+ padding: 20% 8% 16%;
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
position: relative;
|
|
|
@@ -196,7 +228,6 @@ export default {
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 70%;
|
|
|
-
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
@@ -221,26 +252,37 @@ export default {
|
|
|
.desc {
|
|
|
color: #fff;
|
|
|
max-height: 15%;
|
|
|
+ padding-bottom: 10px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
text-align: justify;
|
|
|
+ text-indent: 28px;
|
|
|
}
|
|
|
.con {
|
|
|
width: 100%;
|
|
|
min-height: 40%;
|
|
|
font-size: 0;
|
|
|
- margin-top: 3%;
|
|
|
.maincon {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
background: linear-gradient(0deg, #575757, #c0c0c0);
|
|
|
+ .pagination{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
.mframe {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
+ height: calc(84vw * (641 / 977));
|
|
|
opacity: 0;
|
|
|
}
|
|
|
> iframe {
|
|
|
@@ -255,9 +297,12 @@ export default {
|
|
|
|
|
|
.mimg {
|
|
|
width: 100%;
|
|
|
+ height: calc(84vw * (641 / 977));
|
|
|
> ul {
|
|
|
width: 100%;
|
|
|
+ transform:translate3d(0,0,0);
|
|
|
> li {
|
|
|
+ transform:translate3d(0,0,0);
|
|
|
width: 100%;
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
@@ -276,18 +321,25 @@ export default {
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
text-align: justify;
|
|
|
+ text-indent: 28px;
|
|
|
}
|
|
|
.list {
|
|
|
width: 100%;
|
|
|
- margin-top: 12px;
|
|
|
+ margin-top: 8px;
|
|
|
.sw-active {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
font-size: 12px;
|
|
|
margin-bottom: 4px;
|
|
|
color: #edb25b;
|
|
|
+ >h3{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ text-indent: 28px;
|
|
|
+ margin-top: 4px;
|
|
|
+ max-height: 10vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-wrapper {
|
|
|
width: 100%;
|
|
|
@@ -320,13 +372,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bottom {
|
|
|
- height: 5%;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: #c9a062;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
@media screen and (max-height: 750px) {
|
|
|
@@ -340,8 +385,6 @@ export default {
|
|
|
.con {
|
|
|
width: 100%;
|
|
|
min-height: 40%;
|
|
|
- font-size: 0;
|
|
|
- margin-top: 3%;
|
|
|
.name {
|
|
|
max-height: 13vh;
|
|
|
}
|
|
|
@@ -354,46 +397,23 @@ export default {
|
|
|
.mframe {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
+ font-size: 0;
|
|
|
> img {
|
|
|
width: 100%;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
> iframe {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 99;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mimg {
|
|
|
- width: 100%;
|
|
|
- > ul {
|
|
|
- width: 100%;
|
|
|
- > li {
|
|
|
- width: 100%;
|
|
|
- height: 28vh;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- > img {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 100%;
|
|
|
- min-height: 80%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.list {
|
|
|
- width: 100%;
|
|
|
- margin-top: 8px;
|
|
|
+ .sw-active {
|
|
|
+ p{
|
|
|
+ max-height: 8vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
.swiper-wrapper {
|
|
|
width: 100%;
|
|
|
.swiper-slide {
|
|
|
@@ -421,17 +441,25 @@ export default {
|
|
|
@media screen and (max-height: 600px) {
|
|
|
.home {
|
|
|
.body {
|
|
|
+ .desc{
|
|
|
+ padding-bottom: 4px;
|
|
|
+ }
|
|
|
.con {
|
|
|
width: 100%;
|
|
|
min-height: 40%;
|
|
|
font-size: 0;
|
|
|
- margin-top: 3%;
|
|
|
+ margin-top: 0%;
|
|
|
.name {
|
|
|
max-height: 10vh;
|
|
|
}
|
|
|
.list {
|
|
|
width: 100%;
|
|
|
margin-top: 8px;
|
|
|
+ .sw-active {
|
|
|
+ p{
|
|
|
+ max-height: 6vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
.swiper-wrapper {
|
|
|
width: 100%;
|
|
|
.swiper-slide {
|
tremble