From c6189f35d8744bf9c90bc15fd132ceb2a51d902c Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 28 四月 2025 19:29:52 +0800
Subject: [PATCH] bug修改
---
src/views/chronology/yearWindow.vue | 90 ++++++++++++++++++++++++++++++++++++++-------
1 files changed, 76 insertions(+), 14 deletions(-)
diff --git a/src/views/chronology/yearWindow.vue b/src/views/chronology/yearWindow.vue
index a04521e..e62f3c1 100644
--- a/src/views/chronology/yearWindow.vue
+++ b/src/views/chronology/yearWindow.vue
@@ -4,10 +4,20 @@
<div class="content">
<div class="leftTxt" v-html="info.eventOverview"></div>
<div class="rightimg">
- <div v-if="imgLink != ''" class="imgBox">
- <img class="autoImg" :src="imgLink" alt="" />
+ <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 v-else>鏆傛棤鍥剧墖</div>
+ <div style="text-align: center; font-size: 18px; color: #999" v-else>
+ 鏆傛棤鍥剧墖
+ </div>
</div>
</div>
</div>
@@ -15,7 +25,7 @@
<script>
import { getPublicImage } from "@/assets/js/middleGround/tool";
-
+import arrow from "@/assets/images/right_arrow.svg";
export default {
name: "floatingWindow",
props: {
@@ -28,15 +38,48 @@
return {
title: "",
imgLink: "",
+ arrow,
+ currentIndex: 0,
+ imgList: [],
};
},
- methods: {},
+ 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() {
- console.log(this.info);
this.title =
this.info.name.split("锛�")[0] + " " + this.info.name.split("锛�")[1];
- this.imgLink = getPublicImage(this.info.eventPictures);
- console.log(this.imgLink);
+ 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>
@@ -44,29 +87,30 @@
<style scoped>
.dialogBox {
width: 700px;
- height: 100%;
+ min-height: 300px;
position: relative;
padding: 15px;
z-index: 20;
box-sizing: border-box;
+ background-color: #fdf8f0;
}
.content {
display: flex;
justify-content: space-between;
- align-items: center;
}
.leftTxt {
width: 350px;
- height: 100%;
- background-color: #fff;
+ max-height: 260px;
overflow: hidden;
white-space: normal;
- overflow-x: auto;
+ overflow-y: auto;
+ padding: 10px;
}
.rightimg {
width: 350px;
height: 100%;
- background-color: #fff;
+ padding: 10px;
+ padding-top: 0px;
}
.title {
font-size: 24px;
@@ -78,4 +122,22 @@
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>
--
Gitblit v1.9.1