From 87c87f989dcc3027407eccde48a6b35f0f999570 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 28 四月 2025 14:48:23 +0800
Subject: [PATCH] 高级检索
---
src/views/chronology/yearWindow.vue | 50 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 40 insertions(+), 10 deletions(-)
diff --git a/src/views/chronology/yearWindow.vue b/src/views/chronology/yearWindow.vue
index a04521e..3c12b53 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">
+ <img class="autoImg" :src="arrow" alt="" />
+ </div>
+ <div class="imgBox">
+ <img class="autoImg" :src="imgLink" alt="" />
+ </div>
+ <div class="arrowBox">
+ <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,6 +38,7 @@
return {
title: "",
imgLink: "",
+ arrow,
};
},
methods: {},
@@ -44,29 +55,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 +90,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