|
|
@@ -1,24 +1,13 @@
|
|
|
<template>
|
|
|
<div class="PuCatalogues">
|
|
|
<div class="card">
|
|
|
- <span class="page">{{ infoInd + 1 }} / {{ imgList.length }}</span>
|
|
|
<div
|
|
|
class="row"
|
|
|
- v-for="(item, index) in imgList"
|
|
|
+ @click="toPdf(item.id)"
|
|
|
+ v-for="item in imgList"
|
|
|
:key="item.id"
|
|
|
- :style="`left:${index * 15}px;height:${100 - index * 5}%;opacity:${
|
|
|
- 1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
|
|
|
- }; z-index: ${imgList.length - index};`"
|
|
|
>
|
|
|
- <v-touch
|
|
|
- @click.native="toPdf(info.id)"
|
|
|
- v-if="index === 0"
|
|
|
- tag="img"
|
|
|
- @swipeleft="moveSwiper(1)"
|
|
|
- @swiperight="moveSwiper(0)"
|
|
|
- :src="info.imgUrl"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img v-lazy="item.imgUrl" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,40 +63,27 @@ export default {
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
toPdf(id) {
|
|
|
+ // 记录点击的滚动距离
|
|
|
+ let dom = document.querySelector(".Layout");
|
|
|
+ this.$route.meta.sroolBack = dom.scrollTop;
|
|
|
+
|
|
|
this.$router.push({
|
|
|
name: "PublicationsPdf",
|
|
|
query: { id },
|
|
|
});
|
|
|
},
|
|
|
- // 封装一个滑动的方法
|
|
|
- moveSwiper(val) {
|
|
|
- let dom = document.querySelector(".card");
|
|
|
- dom.style.opacity = 0;
|
|
|
- // this.info={...this.info,imgUrl:require('@/assets/img/loading.gif')}
|
|
|
- setTimeout(() => {
|
|
|
- if (val === 0) {
|
|
|
- // 右滑减小
|
|
|
- if (this.infoInd === 0) this.infoInd = this.imgList.length - 1;
|
|
|
- else this.infoInd--;
|
|
|
- } else {
|
|
|
- //左滑增加
|
|
|
- if (this.infoInd < this.imgList.length - 1) this.infoInd++;
|
|
|
- else this.infoInd = 0;
|
|
|
- }
|
|
|
- this.info = this.imgList[this.infoInd];
|
|
|
- dom.style.opacity = 1;
|
|
|
- // 存储页码
|
|
|
- this.$route.meta.pageSize = this.infoInd;
|
|
|
- }, 300);
|
|
|
- },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- if (this.$route.meta.pageSize) this.infoInd = this.$route.meta.pageSize;
|
|
|
- this.info = this.imgList[this.infoInd];
|
|
|
+ created() {
|
|
|
+ if (this.$route.meta.sroolBack) {
|
|
|
+ let dom = document.querySelector(".Layout");
|
|
|
+ setTimeout(() => {
|
|
|
+ dom.scrollTo({ top: this.$route.meta.sroolBack });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
@@ -123,38 +99,17 @@ export default {
|
|
|
padding: 20px 20px 40px;
|
|
|
.card {
|
|
|
width: 100%;
|
|
|
- height: 400px;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s;
|
|
|
- .page {
|
|
|
- z-index: 990;
|
|
|
- background-color: rgba(183, 149, 80, 0.3);
|
|
|
- width: 68px;
|
|
|
- height: 40px;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- font-weight: 700;
|
|
|
- right: 0px;
|
|
|
- bottom: 0px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
.row {
|
|
|
- border-radius: 8px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 80%;
|
|
|
- height: 400px;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0px 1px 4px 3px #ccc;
|
|
|
+ width: 48%;
|
|
|
+ margin-bottom: 4%;
|
|
|
+ margin-right: 4%;
|
|
|
& > img {
|
|
|
- touch-action: pan-y !important;
|
|
|
- border-radius: 8px;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
