From 8bffcbb7f5fca4e1e7a308f6f786b63d0773704c Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 19:28:29 +0800
Subject: [PATCH] 页面优化
---
src/views/chronology/index.vue | 108 +++++++++++++++--------------------------------------
1 files changed, 31 insertions(+), 77 deletions(-)
diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue
index 8b5e4db..3165ba5 100644
--- a/src/views/chronology/index.vue
+++ b/src/views/chronology/index.vue
@@ -49,14 +49,10 @@
class="gradchild"
v-for="(citem, cindex) in item.list"
:style="{ background: citem.color }"
- @click.self="showDetail(index, cindex, 1, $event)"
+ @click.stop="showDetail(index, cindex, 1, $event)"
:key="cindex"
>
- <div
- class="detailDialog"
- :style="popupStyle"
- v-if="citem.showChildDetail"
- >
+ <div class="detailDialog" v-if="citem.showDetail">
<div
class="closeBtn"
@click.stop="closeDetail(index, cindex, 0)"
@@ -95,7 +91,6 @@
import moment from "moment";
import floatingWindow from "./floatingWindow.vue";
import yearWindow from "./yearWindow.vue";
-import { nextTick } from "vue";
export default {
components: {
@@ -114,10 +109,6 @@
audio: "#b9a587",
newspaper: "#8d77b3",
other: "#009f9f",
- },
- popupStyle: {
- left: "0",
- top: "0",
},
};
},
@@ -164,10 +155,6 @@
const listData = await this.getYearResource(item);
if (listData.length > 0) {
this.$set(item, "list", listData);
- for (let j = 0; j < listData.length; j++) {
- const element = listData[j];
- this.$set(element, "showChildDetail", false);
- }
console.log(item, "item");
}
}
@@ -227,62 +214,32 @@
closeDetail(index, cindex, type) {
for (let i = 0; i < this.contentList.length; i++) {
const item = this.contentList[i];
- if (item && item.list?.length > 0) {
+ if (item && item.length > 0) {
for (let j = 0; j < item.list.length; j++) {
const citem = item.list[j];
- this.$set(citem, "showChildDetail", false);
+ this.$set(citem, "showDetail", false);
}
}
}
this.contentList[index].list[cindex].showDetail = false;
-
- console.log(
- this.contentList[index].list,
- "this.contentList[index].list[cindex]"
- );
},
showDetail(index, cindex, type, event) {
- const rect = event.target.getBoundingClientRect();
- const screenWidth = window.innerWidth;
- const popupWidth = 542; // 鍋囪寮规瀹藉害涓�200px
- // 鍒ゆ柇瑙﹀彂鍏冪礌浣嶇疆
- if (rect.left + rect.width / 2 < screenWidth / 2) {
- // 宸︿晶鏄剧ず寮规鍦ㄥ彸渚�
- this.popupStyle = {
- left: `${rect.right}px`,
- top: `${rect.bottom - 150}px`,
- };
- } else {
- // 鍙充晶鏄剧ず寮规鍦ㄥ乏渚�
- this.popupStyle = {
- left: `${rect.left - popupWidth}px`,
- top: `${rect.bottom - 150}px`,
- };
- }
- console.log(this.popupStyle.top, "this.top");
- console.log(this.popupStyle.left, "this.left");
- // if (rect.left - popupWidth < 0) {
- // // 宸︿晶绌洪棿涓嶈冻鏃跺己鍒跺彸渚ф樉绀�
- // this.popupStyle.left = `${rect.right}px`;
- // } else if (rect.right + popupWidth > screenWidth) {
- // // 鍙充晶绌洪棿涓嶈冻鏃跺己鍒跺乏渚ф樉绀�
- // this.popupStyle.left = `${rect.left - popupWidth}px`;
- // }
+ console.log(event, "event");
for (let i = 0; i < this.contentList.length; i++) {
const item = this.contentList[i];
- if (item && item.list?.length > 0) {
+ if (item && item.length > 0) {
for (let j = 0; j < item.list.length; j++) {
const citem = item.list[j];
- if (citem.showChildDetail) {
- this.contentList[i].list[j].showDetail = false;
- citem.showChildDetail = false;
- }
+ this.$set(citem, "showDetail", false);
+ item.showDetail = false;
}
}
}
+
if (this.contentList[index].list[cindex].type) {
- this.contentList[index].list[cindex].showChildDetail = true;
+ this.contentList[index].list[cindex].showDetail = true;
}
+ console.log(this.contentList[index].list, "this.contentList[index].list[cindex]");
},
},
};
@@ -407,18 +364,13 @@
position: relative;
}
-// .gradchild :hover {
-// transform: scale(1.1);
-// z-index: 999;
-// }
-
-/* 閲嶇疆瀛愬厓绱犵殑鏍峰紡 */
-// .gradchild:hover .detailDialog {
-// transform: scale(1);
-// z-index: 999;
-// }
-.item-circle :hover ::before {
- background-color: #b9a587 !important;
+.gradchild:hover {
+ width: 25px;
+ height: 25px;
+ margin-top: 2px;
+ margin-right: 2px;
+ cursor: pointer;
+ position: relative;
}
.item-circle {
width: 100%;
@@ -461,7 +413,10 @@
align-items: center;
}
.detailDialog {
- position: fixed;
+ position: absolute;
+ top: -700%;
+ transform: translateY(20%);
+ transform: translateX(-50%);
width: 524px;
z-index: 9999;
cursor: pointer;
@@ -481,15 +436,15 @@
border: 2px solid #cbbeaa;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
}
-// .detailDialog .dialogContent {
-// width: 100%;
-// height: 100%;
-// background-color: #fff;
-// position: relative;
-// padding: 5px;
-// z-index: 20;
-// box-sizing: border-box;
-// }
+.detailDialog .dialogContent {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ position: relative;
+ padding: 5px;
+ z-index: 20;
+ box-sizing: border-box;
+}
.closeBtn {
position: absolute;
width: 20px;
@@ -501,7 +456,6 @@
::v-deep .el-loading-spinner {
.el-loading-text {
-
font-size: 14px;
color: #937950;
}
--
Gitblit v1.9.1