比例修改

杨磊

2025-04-08 7f6fa75678e36a992f3037ce530d0226f0dd2128

 src/views/chronology/index.vue

@@ -1,9 +1,1025 @@
<template>
  <div>年谱</div>
  <div class="page">
    <div class="page-header">
      <p>王永炎院士年谱</p>
    </div>
    <div class="pageBox">
      <div class="tagBox">
        <div class="tagItem">
          <div style="background-color: #87a7b9" class="item-tag"></div>
          <div>期刊</div>
        </div>
        <div class="tagItem">
          <div style="background-color: #c48787" class="item-tag"></div>
          <div>图书</div>
        </div>
        <div class="tagItem">
          <div style="background-color: #6f8f5a" class="item-tag"></div>
          <div>视频</div>
        </div>
        <div class="tagItem">
          <div style="background-color: #b9a587" class="item-tag"></div>
          <div>音频</div>
        </div>
        <div class="tagItem">
          <div style="background-color: #8d77b3" class="item-tag"></div>
          <div>报纸</div>
        </div>
        <div class="tagItem">
          <div style="background-color: #009f9f" class="item-tag"></div>
          <div>其他</div>
        </div>
      </div>
      <div class="contentBox">
        <div class="chartsBox">
          <div
            class="chartsItemBox"
            v-for="(item, index) in contentList"
            :key="index"
          >
            <div class="chartsItem">
              <div class="item-grad">
                <div
                  class="gradchild"
                  v-for="(citem, cindex) in item.list"
                  :style="{ background: citem.color }"
                  @mouseover="showDetail(index, cindex, 1)"
                  @mouseout="closeDetail(index, cindex, 0)"
                  :key="cindex"
                >
                  <div class="detailDialog" v-if="citem.showDetail">
                    <!-- <div class="dialogContent" @click="gotoDetail(citem)"> -->
                    <floatingWindow :info="citem" />
                    <!-- </div> -->
                  </div>
                </div>
              </div>
              <div class="item-circle"></div>
              <div class="item-text">
                <div class="">
                  {{ item.year }}
                </div>
                <div style="margin-top: 10px">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
import echarts from "@/assets/js/echarts.min.js";
import floatingWindow from "./floatingWindow.vue";
export default {
  components: {
    floatingWindow,
  },
  data() {
    return {
      contentList: [
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1938",
              type: "journal",
              id: "1",
            },
          ],
          name: "出生",
          year: "1938",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              type: "image",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              type: "book",
              id: "2",
            },
          ],
          name: "一岁",
          year: "1939",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "2",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              type: "video",
              id: "3",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              type: "audio",
              id: "4",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "5",
            },
          ],
          name: "3岁",
          year: "1941",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#6F8F5A",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "2",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "3",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "4",
            },
            {
              color: "#B9A587",
              showDetail: false,
              name: "王永炎",
              id: "5",
            },
          ],
          name: "4岁",
          year: "1941",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
      ],
    };
  },

  methods: {
    gotoDetail(item) {},

    closeDetail(index, cindex, type) {
      // console.log(cindex, "cindex");
      // for (let i = 0; i < this.contentList.length; i++) {
      //   const item = this.contentList[i];
      //   for (let j = 0; j < item.list.length; j++) {
      //     const citem = item.list[j];
      //     this.$set(citem, "showDetail", false);
      //   }
      // }
      
    },
    showDetail(index, cindex, type) {
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        for (let j = 0; j < item.list.length; j++) {
          const citem = item.list[j];
          this.$set(citem, "showDetail", false);
        }
      }

      if (this.contentList[index].list[cindex].type) {
        this.contentList[index].list[cindex].showDetail = true;
      } else {
        this.contentList[index].list[cindex].showDetail = false;
      }
    },
  },
};
</script>

<style></style>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e9e1d4;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.pageBox {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .tagBox {
    display: flex;
    margin-top: 20px;
    .item-tag {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .tagItem {
      display: flex;
      line-height: 20px;
      margin-left: 30px;
    }
  }
  .contentBox {
    flex: 1;
    padding-bottom: 100px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    overflow: auto;
    .chartsBox {
      white-space: nowrap;
      padding: 0 80px;
      width: calc(100vw - 400px);
      padding-bottom: 100px;
    }
    // &::-webkit-scrollbar {
    //   width: 0 !important;
    //   height: 0 !important;
    // }
    /* 对于WebKit浏览器和Blink引擎（如Chrome, Opera） */
    ::-webkit-scrollbar {
      width: 16px; /* 滚动条的宽度 */
      height: 16px; /* 滚动条的高度 */
    }

    ::-webkit-scrollbar-track {
      background: #ebe5d6; /* 滚动条轨道的颜色 */
    }

    ::-webkit-scrollbar-thumb {
      background: #b9a587; /* 滚动条滑块的颜色 */
      border-radius: 16px; /* 滚动条滑块的圆角 */
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #b9a587; /* 鼠标悬停在滚动条滑块上的颜色 */
    }
  }
}
.page-header {
  height: 102px;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  border-bottom: 2px solid #937950;

  p {
    padding: 35px 0 34px 0;
    font-family: Alimama DongFangDaKai;
    font-size: 30px;
    text-indent: 1em;
    border-bottom: 1px solid #937950;
  }
}
.chartsItemBox {
  display: inline-block;
  width: 105px;
  height: 100%;
  position: relative;
  margin-right: 30px;
}

.chartsItem {
  width: 100%;
  height: 100%;
}

.item-grad {
  width: 80px;
  display: flex;
  flex-wrap: wrap-reverse;
}

.gradchild {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 2px;
  cursor: pointer;
  position: relative;
}

.item-circle {
  width: 100%;
  height: 20px;
  margin-top: 20px;
  position: relative;
}

.item-circle::after {
  content: "";
  position: absolute;
  top: 9px;
  display: block;
  width: 135px;
  height: 2px;
  background-color: #b9a587;
  z-index: 1;
}
.item-circle::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #b9a587;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -9px;
  z-index: 99;
  background: #fff;
}

.item-text {
  margin-top: 16px;
  font-size: 18px;
  color: #b9a587;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detailDialog {
  position: absolute;
  // left: -54px;
  // bottom: 50px;
  top: -550%;
  width: 400px;
  z-index: 9999;
  cursor: pointer;
  background: #fff;
  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: 15px;
  z-index: 20;
  box-sizing: border-box;
}
</style>