|
|
|
|
@ -1,56 +1,33 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="thumb-example">
|
|
|
|
|
<!-- swiper1 -->
|
|
|
|
|
<swiper
|
|
|
|
|
class="swiper gallery-top"
|
|
|
|
|
:options="swiperOptionTop"
|
|
|
|
|
ref="swiperTop"
|
|
|
|
|
>
|
|
|
|
|
<!-- -->
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="swiper-button-next swiper-button-white"
|
|
|
|
|
slot="button-next"
|
|
|
|
|
></div>
|
|
|
|
|
<div class="picTop">
|
|
|
|
|
<viewer class="bigimg">
|
|
|
|
|
<img :src="bigPicPath + '!1280x720'" />
|
|
|
|
|
<p class="mark">
|
|
|
|
|
{{ bigPicPath }}
|
|
|
|
|
<span>{{ this.activeSmall }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
</viewer>
|
|
|
|
|
<div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
|
|
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="swiper-button-prev swiper-button-white"
|
|
|
|
|
slot="button-prev"
|
|
|
|
|
></div>
|
|
|
|
|
</swiper>
|
|
|
|
|
<!-- swiper2 Thumbs -->
|
|
|
|
|
<swiper
|
|
|
|
|
class="swiper gallery-thumbs"
|
|
|
|
|
:options="swiperOptionThumbs"
|
|
|
|
|
ref="swiperThumbs"
|
|
|
|
|
class="arrow rightArrow"
|
|
|
|
|
v-if="this.bigNum < this.terminalPhoto.length - 1"
|
|
|
|
|
@click="rightClick"
|
|
|
|
|
>
|
|
|
|
|
<swiper-slide
|
|
|
|
|
class="slide"
|
|
|
|
|
v-for="(item, index) in terminalPhoto"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
>
|
|
|
|
|
<div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
|
|
|
|
|
<!-- <img :src="item.path + '!1280x720'" alt="" /> -->
|
|
|
|
|
<img v-if="index == 0" :src="item.path + '!260x160'" />
|
|
|
|
|
<img
|
|
|
|
|
v-else
|
|
|
|
|
src="../../assets/img/loading.jpg"
|
|
|
|
|
:data-src="item.path + '!260x160'"
|
|
|
|
|
class="swiper-lazy"
|
|
|
|
|
/>
|
|
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bigimg" v-else>
|
|
|
|
|
<img :src="item.path" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
|
|
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
src="item.path + '!260x160'"
|
|
|
|
|
alt=""
|
|
|
|
|
:data-src="item.path + '!260x160'"
|
|
|
|
|
class="swiper-lazy"
|
|
|
|
|
v-else-if="item.path.indexOf('nopic') == -1"
|
|
|
|
|
/>
|
|
|
|
|
<img :src="item.path" alt="" v-else /> -->
|
|
|
|
|
<div class="picBottom">
|
|
|
|
|
<ul class="smallPicBox">
|
|
|
|
|
<li
|
|
|
|
|
v-for="(item, index) in fiveList"
|
|
|
|
|
@click="handleBigpic(item, index)"
|
|
|
|
|
:class="activeSmall === index ? 'borderActive' : ''"
|
|
|
|
|
>
|
|
|
|
|
<!-- <img src="../../assets/img/nopic.jpg" /> -->
|
|
|
|
|
<img :src="item.path + '!260x160'" />
|
|
|
|
|
<p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
class="item"
|
|
|
|
|
@ -73,19 +50,29 @@
|
|
|
|
|
)
|
|
|
|
|
<span>--通道{{ item.channelId }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div
|
|
|
|
|
class="arrow leftArrow"
|
|
|
|
|
v-if="this.page != 1"
|
|
|
|
|
@click="smallLeftClick"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="arrow rightArrow"
|
|
|
|
|
v-if="this.page < this.total"
|
|
|
|
|
@click="smallRightClick"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
|
|
import "swiper/css/swiper.css";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Swiper,
|
|
|
|
|
SwiperSlide,
|
|
|
|
|
},
|
|
|
|
|
components: {},
|
|
|
|
|
props: {
|
|
|
|
|
terminalPhoto: {
|
|
|
|
|
type: Array,
|
|
|
|
|
@ -94,61 +81,85 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
swiperOptionTop: {
|
|
|
|
|
lazy: {
|
|
|
|
|
loadPrevNext: true,
|
|
|
|
|
loadPrevNextAmount: 1,
|
|
|
|
|
loadOnTransitionStart: true,
|
|
|
|
|
isshowArrow: true, //判断是否显示切换按钮
|
|
|
|
|
bigPicPath: "", //大图地址
|
|
|
|
|
smallPicPath: "", //小图地址
|
|
|
|
|
bigNum: 0, //判断大图是第几张
|
|
|
|
|
fiveList: [], //小图图片list
|
|
|
|
|
activeSmall: 0, //索引选中小图,
|
|
|
|
|
page: 1, //当前第几页
|
|
|
|
|
pagesize: 5, //每页显示五条
|
|
|
|
|
total: 0, //总共又几页
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
navigation: {
|
|
|
|
|
nextEl: ".swiper-button-next",
|
|
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log(this.terminalPhoto);
|
|
|
|
|
this.bigPicPath = this.terminalPhoto[0].path;
|
|
|
|
|
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
|
|
|
|
|
this.total = this.terminalPhoto.length / this.pagesize;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
virtual: {
|
|
|
|
|
slides: [],
|
|
|
|
|
renderSlide: function (slide, index) {
|
|
|
|
|
console.log(index);
|
|
|
|
|
if (slide.path.indexOf("nopic") != -1) {
|
|
|
|
|
return ` <div class="swiper-slide" ><div class="bigimg"><img src="static/img/nopic.0e9cfc7c.jpg" alt="" /></div></div>`;
|
|
|
|
|
} else {
|
|
|
|
|
return `<div class="swiper-slide"><div class="bigimg"><img src=" ${
|
|
|
|
|
slide.path + "!1280x720"
|
|
|
|
|
} " /></div></div>`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
swiperOptionThumbs: {
|
|
|
|
|
spaceBetween: 10,
|
|
|
|
|
centeredSlides: true,
|
|
|
|
|
slidesPerView: "auto",
|
|
|
|
|
slideToClickedSlide: true,
|
|
|
|
|
lazy: {
|
|
|
|
|
loadPrevNext: true,
|
|
|
|
|
loadPrevNextAmount: 5,
|
|
|
|
|
loadOnTransitionStart: true,
|
|
|
|
|
methods: {
|
|
|
|
|
getphotoList() {
|
|
|
|
|
this.fiveList = this.terminalPhoto.slice(
|
|
|
|
|
(this.page - 1) * this.pagesize,
|
|
|
|
|
this.page * this.pagesize
|
|
|
|
|
);
|
|
|
|
|
this.bigPicPath = this.fiveList[this.activeSmall].path;
|
|
|
|
|
},
|
|
|
|
|
//大图点击左侧切换图片
|
|
|
|
|
leftClick() {
|
|
|
|
|
this.bigNum--; //执行下一张
|
|
|
|
|
this.bigPicPath = this.terminalPhoto[this.bigNum].path;
|
|
|
|
|
this.activeSmall--;
|
|
|
|
|
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
|
|
|
|
|
console.log(this.page);
|
|
|
|
|
if (this.activeSmall < 0) {
|
|
|
|
|
this.activeSmall = 4;
|
|
|
|
|
this.smallLeftClick();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
//点击右侧切换图片
|
|
|
|
|
rightClick() {
|
|
|
|
|
this.bigNum++; //执行下一张
|
|
|
|
|
this.bigPicPath = this.terminalPhoto[this.bigNum].path;
|
|
|
|
|
this.activeSmall++;
|
|
|
|
|
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
|
|
|
|
|
|
|
|
|
|
if (this.activeSmall > 4) {
|
|
|
|
|
this.activeSmall = 0;
|
|
|
|
|
console.log(this.activeSmall);
|
|
|
|
|
this.smallRightClick();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
const swiperTop = this.$refs.swiperTop.$swiper;
|
|
|
|
|
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
|
|
|
|
|
swiperTop.controller.control = swiperThumbs;
|
|
|
|
|
swiperThumbs.controller.control = swiperTop;
|
|
|
|
|
});
|
|
|
|
|
//点击小图变成大图
|
|
|
|
|
handleBigpic(row, index) {
|
|
|
|
|
console.log(row);
|
|
|
|
|
console.log();
|
|
|
|
|
this.activeSmall = index;
|
|
|
|
|
this.bigPicPath = row.path;
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
watch: {
|
|
|
|
|
terminalPhoto: function (newVal, oldVal) {
|
|
|
|
|
this.swiperOptionTop.virtual.slides = newVal;
|
|
|
|
|
//点击小图切换左侧
|
|
|
|
|
smallLeftClick() {
|
|
|
|
|
console.log("点击了左侧");
|
|
|
|
|
|
|
|
|
|
this.page--;
|
|
|
|
|
if (this.page < 1) {
|
|
|
|
|
this.isshowArrow = false;
|
|
|
|
|
} else {
|
|
|
|
|
this.getphotoList();
|
|
|
|
|
}
|
|
|
|
|
console.log(this.page);
|
|
|
|
|
console.log(this.fiveList);
|
|
|
|
|
},
|
|
|
|
|
//点击小图切换右侧
|
|
|
|
|
smallRightClick() {
|
|
|
|
|
console.log("点击了右侧");
|
|
|
|
|
console.log(this.page);
|
|
|
|
|
this.page++;
|
|
|
|
|
this.getphotoList();
|
|
|
|
|
console.log(this.fiveList);
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
console.log(this.swiperOptionTop.virtual.slides);
|
|
|
|
|
this.swiperOptionTop.virtual.slides = this.terminalPhoto;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -157,43 +168,89 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: calc(100% - 26px);
|
|
|
|
|
height: calc(100% - 24px);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.gallery-top {
|
|
|
|
|
//background: #fcc;
|
|
|
|
|
.picTop {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 80%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
//border: 3px solid transparent;
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
&:hover {
|
|
|
|
|
.arrow {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition: all 0.5s ease-in;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bigimg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
.mark {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
left: 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
animation: move 1s;
|
|
|
|
|
}
|
|
|
|
|
@keyframes move {
|
|
|
|
|
0% {
|
|
|
|
|
bottom: -10px;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: fill;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.arrow {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftArrow {
|
|
|
|
|
left: 16px;
|
|
|
|
|
}
|
|
|
|
|
.swiper-button-prev.swiper-button-disabled,
|
|
|
|
|
.swiper-button-next.swiper-button-disabled {
|
|
|
|
|
opacity: 0.35;
|
|
|
|
|
cursor: auto;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
display: none !important;
|
|
|
|
|
.rightArrow {
|
|
|
|
|
right: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.gallery-thumbs {
|
|
|
|
|
.picBottom {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 18%;
|
|
|
|
|
.slide {
|
|
|
|
|
position: relative;
|
|
|
|
|
.smallPicBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
li {
|
|
|
|
|
width: 20%;
|
|
|
|
|
border: 3px solid transparent;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -201,21 +258,17 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.bigimg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
position: relative;
|
|
|
|
|
img {
|
|
|
|
|
//width: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: fill;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.borderActive {
|
|
|
|
|
border: 3px solid #409eff;
|
|
|
|
|
}
|
|
|
|
|
.timeInfo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
@ -227,31 +280,29 @@ export default {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-button-next.swiper-button-white,
|
|
|
|
|
.swiper-container-rtl .swiper-button-prev.swiper-button-white,
|
|
|
|
|
.swiper-button-prev.swiper-button-white,
|
|
|
|
|
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
top: 45%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
}
|
|
|
|
|
.swiper-button-next:after,
|
|
|
|
|
.swiper-container-rtl .swiper-button-prev:after,
|
|
|
|
|
.swiper-button-prev:after,
|
|
|
|
|
.swiper-container-rtl .swiper-button-next:after {
|
|
|
|
|
transform: scale(0.5);
|
|
|
|
|
.leftArrow {
|
|
|
|
|
left: 16px;
|
|
|
|
|
}
|
|
|
|
|
.rightArrow {
|
|
|
|
|
right: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// https://v1.github.surmon.me/vue-awesome-swiper/
|
|
|
|
|
|
fanluyan
2 years ago