搜索优化

zhongshujie

12 小时以前 fd82e68712135fb4589b0586c26d8ea0865766e5

 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;
  }