|
|
@@ -1,14 +1,53 @@
|
|
|
<template>
|
|
|
- <div class="lookPdf">lookPdf</div>
|
|
|
+ <div class="lookPdf">
|
|
|
+ <div id="pdf"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Pdfh5 from "pdfh5";
|
|
|
+import "pdfh5/css/pdfh5.css";
|
|
|
export default {
|
|
|
name: "lookPdf",
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ imgList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/1.jpg",
|
|
|
+ name: "A_brief_history_of_Beijing.pdf",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/2.jpg",
|
|
|
+ name: "Geneva.pdf",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/3.jpg",
|
|
|
+ name: "Renaissance.pdf",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/4.jpg",
|
|
|
+ name: "TheMetropolisesandtheProsperities.pdf",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/5.jpg",
|
|
|
+ name: "Andes.pdf",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ imgUrl: "/data/Publications/Exhibition/6.jpg",
|
|
|
+ name: "smileofkhmer.pdf",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ info: {},
|
|
|
+ loding: true,
|
|
|
+ };
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
@@ -18,25 +57,46 @@ export default {
|
|
|
methods: {},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ // 获取id
|
|
|
+ let id = this.$route.query.id;
|
|
|
+ id = Number(id);
|
|
|
+ this.imgList.forEach((v) => {
|
|
|
+ if (v.id === id) this.info = v;
|
|
|
+ });
|
|
|
// 隐藏底部
|
|
|
this.$nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
let dom = document.querySelector(".Layout .bottom");
|
|
|
dom.style.display = "none";
|
|
|
+ document.title = this.info.name;
|
|
|
}, 100);
|
|
|
});
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ new Pdfh5("#pdf", {
|
|
|
+ pdfurl: `/data/Pdf/${this.info.id}.pdf`,
|
|
|
+ goto: 1,
|
|
|
+ lazy: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ destroyed() {
|
|
|
+ let dom = document.querySelector(".Layout .bottom");
|
|
|
+ dom.style.display = "";
|
|
|
+ }, //生命周期 - 销毁完成
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
-//@import url(); 引入公共css类
|
|
|
+.lookPdf {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 50px;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
</style>
|
