<template>
|
<div class="dialogBox">
|
<div class="title">{{ title }}</div>
|
<div class="content">
|
<div class="leftTxt" v-html="info.eventOverview"></div>
|
<div class="rightimg">
|
<div class="imgBox" style="text-align: center" v-if="imgLink != ''">
|
<div class="arrowBox leftArrowBox" @click="leftArrow">
|
<img class="autoImg" :src="arrow" alt="" />
|
</div>
|
<div class="imgBox">
|
<img class="autoImg" :src="imgLink" alt="" />
|
</div>
|
<div class="arrowBox" @click="rightArrow">
|
<img class="autoImg" :src="arrow" alt="" />
|
</div>
|
</div>
|
<div style="text-align: center; font-size: 18px; color: #999" v-else>
|
暂无图片
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getPublicImage } from "@/assets/js/middleGround/tool";
|
import arrow from "@/assets/images/right_arrow.svg";
|
export default {
|
name: "floatingWindow",
|
props: {
|
info: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
title: "",
|
imgLink: "",
|
arrow,
|
currentIndex: 0,
|
imgList: [],
|
};
|
},
|
methods: {
|
leftArrow() {
|
if (this.currentIndex == 0) {
|
this.currentIndex = this.imgList.length - 1;
|
this.imgLink = this.imgList[this.currentIndex];
|
} else {
|
this.currentIndex--;
|
this.imgLink = this.imgList[this.currentIndex];
|
}
|
},
|
rightArrow() {
|
if (this.currentIndex == this.imgList.length - 1) {
|
this.currentIndex = 0;
|
this.imgLink = this.imgList[this.currentIndex];
|
} else {
|
this.currentIndex++;
|
this.imgLink = this.imgList[this.currentIndex];
|
}
|
},
|
},
|
mounted() {
|
this.title =
|
this.info.name.split("，")[0] + " " + this.info.name.split("，")[1];
|
console.log(
|
Array.isArray(this.info.eventPictures),
|
"Array.isArray(this.info.eventPictures)"
|
);
|
if (Array.isArray(this.info.eventPictures)) {
|
console.log(1);
|
|
this.imgList = this.info.eventPictures.map((item) =>
|
getPublicImage(item)
|
);
|
this.imgLink = this.imgList[0];
|
} else {
|
this.imgLink = getPublicImage(this.info.eventPictures);
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
.dialogBox {
|
width: 700px;
|
min-height: 300px;
|
position: relative;
|
padding: 15px;
|
z-index: 20;
|
box-sizing: border-box;
|
background-color: #fdf8f0;
|
}
|
.content {
|
display: flex;
|
justify-content: space-between;
|
}
|
.leftTxt {
|
width: 350px;
|
max-height: 260px;
|
overflow: hidden;
|
white-space: normal;
|
overflow-y: auto;
|
padding: 10px;
|
}
|
.rightimg {
|
width: 350px;
|
height: 100%;
|
padding: 10px;
|
padding-top: 0px;
|
}
|
.title {
|
font-size: 24px;
|
font-weight: bold;
|
margin-bottom: 10px;
|
}
|
.imgBox {
|
width: 340px;
|
min-height: 300px;
|
position: relative;
|
}
|
|
.arrowBox {
|
width: 30px;
|
height: 30px;
|
position: relative;
|
}
|
.imgBox {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.arrowBox {
|
margin: 0 5px;
|
}
|
|
.leftArrowBox {
|
transform: rotate(180deg);
|
}
|
</style>
|
