Merge branch 'fly' into xy-ly
fanluyan
2 years ago
commit
a1154885c8
@ -1,280 +0,0 @@
|
||||
<template>
|
||||
<div class="thumb-example">
|
||||
<!-- swiper1 -->
|
||||
|
||||
<swiper
|
||||
class="swiper gallery-top"
|
||||
:options="swiperOptionTop"
|
||||
ref="swiperTop"
|
||||
>
|
||||
<!-- -->
|
||||
<!-- <viewer class="swiper-slide">
|
||||
|
||||
</viewer> -->
|
||||
<!-- <viewer class="swiper-slide">
|
||||
|
||||
</viewer> -->
|
||||
|
||||
<div
|
||||
class="swiper-button-next swiper-button-white"
|
||||
slot="button-next"
|
||||
></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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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 /> -->
|
||||
<p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="拍照时间"
|
||||
placement="top-start"
|
||||
>
|
||||
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
(
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="图片上传时间"
|
||||
placement="top-start"
|
||||
>
|
||||
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
|
||||
</el-tooltip>
|
||||
)
|
||||
<span>--通道{{ item.channelId }}</span>
|
||||
</p>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.css";
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
props: {
|
||||
terminalPhoto: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
let a = "1111111111111";
|
||||
return {
|
||||
imgflag: false,
|
||||
swiperOptionTop: {
|
||||
lazy: {
|
||||
loadPrevNext: true,
|
||||
loadPrevNextAmount: 1,
|
||||
loadOnTransitionStart: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
virtual: {
|
||||
slides: [],
|
||||
renderSlide: function (slide, 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 (
|
||||
`<view class="swiper-slide">` +
|
||||
`<div class="bigimg" id="imgView" style="background:url(${
|
||||
slide.path + "!80x720"
|
||||
});background-size:100% 100%">` +
|
||||
`<img id="imgid" src=" ${slide.path + "!1280x720"} " />
|
||||
</view>`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
swiperOptionThumbs: {
|
||||
spaceBetween: 10,
|
||||
centeredSlides: true,
|
||||
slidesPerView: "auto",
|
||||
slideToClickedSlide: true,
|
||||
lazy: {
|
||||
loadPrevNext: true,
|
||||
loadPrevNextAmount: 5,
|
||||
loadOnTransitionStart: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const swiperTop = this.$refs.swiperTop.$swiper;
|
||||
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
|
||||
swiperTop.controller.control = swiperThumbs;
|
||||
swiperThumbs.controller.control = swiperTop;
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
terminalPhoto: function (newVal, oldVal) {
|
||||
this.swiperOptionTop.virtual.slides = newVal;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.swiperOptionTop.virtual.slides);
|
||||
this.swiperOptionTop.virtual.slides = this.terminalPhoto;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.thumb-example {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 26px);
|
||||
box-sizing: border-box;
|
||||
.gallery-top {
|
||||
//background: #fcc;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
//border: 3px solid transparent;
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.bigimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
}
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.gallery-thumbs {
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
.slide {
|
||||
width: 20%;
|
||||
border: 3px solid transparent;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.bigimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
img {
|
||||
//width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
}
|
||||
|
||||
.timeInfo {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
padding: 8px 0px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
.pismask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99999;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
// https://v1.github.surmon.me/vue-awesome-swiper/
|
||||
</style>
|
||||
Loading…
Reference in New Issue