From c88c65cd4f46e5dd9a0215d9cda13f07b498f4a7 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期二, 08 四月 2025 10:02:38 +0800
Subject: [PATCH] 浮窗
---
src/views/chronology/index.vue | 1008 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,005 insertions(+), 3 deletions(-)
diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue
index d82ce83..1161cbc 100644
--- a/src/views/chronology/index.vue
+++ b/src/views/chronology/index.vue
@@ -1,9 +1,1011 @@
<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)"
+ :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) {},
+ 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 (type == 1) {
+ 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>
--
Gitblit v1.9.1