|
|
@@ -1,21 +1,32 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="info">
|
|
|
+ <div class="info" :key="$route.params.id" v-if="data.name">
|
|
|
<!-- 标题 -->
|
|
|
<div class="title">
|
|
|
<div class="back" @click="$router.go(-1)"></div>
|
|
|
<h3>{{ data.name }}</h3>
|
|
|
</div>
|
|
|
<!-- 模型 -->
|
|
|
- <div class="model">
|
|
|
- <iframe
|
|
|
- src="http://4dscene.4dage.com/culturalrelics/YPZZ/Model.html?m=yp02&v=1"
|
|
|
- frameborder="0"
|
|
|
- ></iframe>
|
|
|
+ <div class="model" :class="`model${$route.params.id}`">
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper" ref="mySwiper">
|
|
|
+ <div class="swiper-slide" v-for="item in data.img" :key="item" @click="lookImg(`data/${$route.params.id}_${item}.png`)">
|
|
|
+ <img :src="`data/${$route.params.id}_${item}.png`" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <iframe
|
|
|
+ src="http://4dscene.4dage.com/culturalrelics/WZSBWG/Model2.html?m=wzs02"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 索引 -->
|
|
|
+
|
|
|
<div class="indexBs">
|
|
|
- <div>1/2</div>
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ <!-- <div>1/{{ data.img + 1 }}</div> -->
|
|
|
</div>
|
|
|
<!-- 音乐 -->
|
|
|
<div class="myMusic">
|
|
|
@@ -23,10 +34,15 @@
|
|
|
</div>
|
|
|
<!-- 文字介绍 -->
|
|
|
<div class="txtt" v-html="data.txt"></div>
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Swiper from "./swiper.js";
|
|
|
import { info } from "../../components/data.js";
|
|
|
import Audio from "./audio.vue";
|
|
|
export default {
|
|
|
@@ -36,6 +52,7 @@ export default {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
data: {},
|
|
|
+ lookPics: [],
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -43,7 +60,14 @@ export default {
|
|
|
//监控data中的数据变化
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ lookImg(url) {
|
|
|
+ let dom = this.$refs.viewer.$viewer;
|
|
|
+ this.lookPics = [url];
|
|
|
+ console.log(this.lookPics);
|
|
|
+ dom.show();
|
|
|
+ },
|
|
|
+ },
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
@@ -55,17 +79,33 @@ export default {
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
activated() {
|
|
|
+ console.log('-------------',info);
|
|
|
window.scrollTo({ top: 0 });
|
|
|
this.data = info.find((v) => v.id == this.$route.params.id);
|
|
|
+ console.log('++++++++',this.data);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ new Swiper(`.model${this.$route.params.id} .swiper-container`, {
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ type: "fraction",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
+.viewerCla img {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+@import "./swiper.css";
|
|
|
.info {
|
|
|
min-height: 100vh;
|
|
|
.title {
|
|
|
position: relative;
|
|
|
- padding: 15px 45px 70px 50px;
|
|
|
+ padding: 15px 45px 50px 50px;
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
top: 22px;
|
|
|
@@ -85,27 +125,49 @@ export default {
|
|
|
.model {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
- iframe {
|
|
|
+ .swiper-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .swiper-slide {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
}
|
|
|
}
|
|
|
.indexBs {
|
|
|
position: relative;
|
|
|
height: 50px;
|
|
|
& > div {
|
|
|
+ left: auto;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
right: 22px;
|
|
|
- width: 54px;
|
|
|
+ width: 60px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
text-align: center;
|
|
|
border-radius: 11px;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
+ /deep/span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.myMusic {
|
