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 | 43 +++++++++++++++++++++++++++++++++++++------ 1 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/views/chronology/yearWindow.vue b/src/views/chronology/yearWindow.vue index d2e9f6e..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 style="text-align: center; font-size: 18px; color: #999" 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: {}, @@ -49,7 +60,7 @@ padding: 15px; z-index: 20; box-sizing: border-box; - background-color: #FDF8F0; + background-color: #fdf8f0; } .content { display: flex; @@ -61,11 +72,13 @@ overflow: hidden; white-space: normal; overflow-y: auto; - + padding: 10px; } .rightimg { width: 350px; height: 100%; + padding: 10px; + padding-top: 0px; } .title { font-size: 24px; @@ -77,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