|
|
|
@ -1,6 +1,8 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="thumb-example">
|
|
|
|
|
<div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
|
|
|
|
|
<div class="radioBox" v-if="roleUser != 2">
|
|
|
|
|
{{ radioPx }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="topPic">
|
|
|
|
|
<div
|
|
|
|
|
class="bigPic"
|
|
|
|
@ -59,14 +61,16 @@
|
|
|
|
|
class="el-car-item"
|
|
|
|
|
ref="scrollBox"
|
|
|
|
|
v-on:wheel="handleScroll"
|
|
|
|
|
:class="terminalPhoto.length < 5 ? 'littlePic' : ''"
|
|
|
|
|
:class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
class="smallPic"
|
|
|
|
|
v-for="(item, index2) in terminalPhoto"
|
|
|
|
|
:key="index2"
|
|
|
|
|
@click="changeBigPic(item, index2)"
|
|
|
|
|
:class="activeSmall === index2 ? 'borderActive' : ''"
|
|
|
|
|
:class="`${activeSmall === index2 ? 'borderActive ' : ''}${
|
|
|
|
|
photoNum === 10 ? 'moreSmallPic' : ''
|
|
|
|
|
}`"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
class="picBox"
|
|
|
|
@ -327,13 +331,17 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
//点击大图左右按钮
|
|
|
|
|
leftClick() {
|
|
|
|
|
console.log(this.photoNum);
|
|
|
|
|
this.activeSmall--;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
|
|
this.$refs.scrollBox.offsetWidth / this.photoNum;
|
|
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
|
|
},
|
|
|
|
|
rightClick() {
|
|
|
|
|
console.log(this.photoNum);
|
|
|
|
|
this.activeSmall++;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft +=
|
|
|
|
|
this.$refs.scrollBox.offsetWidth / this.photoNum;
|
|
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
|
|
},
|
|
|
|
|
//获取第一张大图
|
|
|
|
@ -367,11 +375,11 @@ export default {
|
|
|
|
|
|
|
|
|
|
if (direction == "down") {
|
|
|
|
|
this.$refs.scrollBox.scrollLeft +=
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / 5) * 3;
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
|
|
|
|
|
}
|
|
|
|
|
if (direction == "up") {
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / 5) * 3;
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//缩略图的左右箭头
|
|
|
|
@ -568,6 +576,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.moreSmallPic {
|
|
|
|
|
width: 9.8%;
|
|
|
|
|
}
|
|
|
|
|
.borderActive {
|
|
|
|
|
.timeInfo {
|
|
|
|
|
color: #fff;
|
|
|
|
|