| | |
| | | <div>其他</div> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="chartsBox" v-if="showList"> |
| | | <div |
| | | class="contentBox" |
| | | element-loading-text="年谱加载中" |
| | | element-loading-spinner="el-icon-loading" |
| | | element-loading-background="rgba(0, 0, 0, 0)" |
| | | v-loading="!showList" |
| | | > |
| | | <div class="chartsBox"> |
| | | <div |
| | | class="chartsItemBox" |
| | | v-for="(item, index) in contentList" |
| | |
| | | class="gradchild" |
| | | v-for="(citem, cindex) in item.list" |
| | | :style="{ background: citem.color }" |
| | | @mouseover="showDetail(index, cindex, 1)" |
| | | @click.stop="showDetail(index, cindex, 1, $event)" |
| | | :key="cindex" |
| | | > |
| | | <div class="detailDialog" v-if="citem.showDetail"> |
| | | <!-- <div class="dialogContent" @click="gotoDetail(citem)"> --> |
| | | <div |
| | | class="closeBtn" |
| | | @click="closeDetail(index, cindex, 0)" |
| | | @click.stop="closeDetail(index, cindex, 0)" |
| | | > |
| | | <i class="el-icon-close"></i> |
| | | </div> |
| | | <floatingWindow :info="citem" /> |
| | | <!-- </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="item-circle" @click="showYearWindow(index, 1)"></div> |
| | | |
| | | <div class="item-text"> |
| | | <div class=""> |
| | | {{ item.name.split(",")[0] }} |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | |
| | | methods: { |
| | | showYearWindow(item) { |
| | | showYearWindow(item, event) { |
| | | console.log(item, "item"); |
| | | for (let i = 0; i < this.contentList.length; i++) { |
| | | const item = this.contentList[i]; |
| | |
| | | } |
| | | |
| | | console.log(this.contentList, "this.contentList"); |
| | | this.contentList = res.datas.reverse(); |
| | | this.contentList = res.datas; |
| | | this.showList = true; |
| | | }); |
| | | }, |
| | |
| | | const filterList = yearDataList.datas.filter((item) => { |
| | | return item.cmsItemType != "chronology" && item.cmsItemType != "AWARD"; |
| | | }); |
| | | |
| | | if (filterList && filterList.length > 0) { |
| | | for (let i = 0; i < filterList.length; i++) { |
| | | const item = filterList[i]; |
| | |
| | | const requestCtx = |
| | | this.config.requestCtx + `/file/api/ApiDownload?md5=${item.file}`; |
| | | this.$set(item, "fileLink", requestCtx); |
| | | console.log(item.fileLink, "item.fileLink"); |
| | | } |
| | | this.$set(item, "showDetail", false); |
| | | this.$set(item, "color", this.colorList[item.cmsItemType]); |
| | | } |
| | | } |
| | | |
| | | if (filterList.length > 0) { |
| | | console.log(filterList, "filterList"); |
| | | } |
| | | return filterList; |
| | | }, |
| | | closeDetail(index, cindex, type) { |
| | | console.log(index, cindex, type); |
| | | for (let i = 0; i < this.contentList.length; i++) { |
| | | const item = this.contentList[i]; |
| | | if (item && item.length > 0) { |
| | |
| | | } |
| | | } |
| | | } |
| | | this.contentList[index].list[cindex].showDetail = false; |
| | | }, |
| | | showDetail(index, cindex, type) { |
| | | showDetail(index, cindex, type, event) { |
| | | console.log(event, "event"); |
| | | for (let i = 0; i < this.contentList.length; i++) { |
| | | const item = this.contentList[i]; |
| | | if (item && item.length > 0) { |
| | | for (let j = 0; j < item.list.length; j++) { |
| | | const citem = item.list[j]; |
| | | this.$set(citem, "showDetail", false); |
| | | item.showDetail = false; |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (this.contentList[index].list[cindex].type) { |
| | | this.contentList[index].list[cindex].showDetail = true; |
| | | } else { |
| | | this.contentList[index].list[cindex].showDetail = false; |
| | | } |
| | | console.log(this.contentList[index].list, "this.contentList[index].list[cindex]"); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | display: flex; |
| | | align-items: end; |
| | | overflow: auto; |
| | | |
| | | ::v-deep .el-loading-spinner .el-loading-text { |
| | | font-size: 14px; |
| | | color: #937950; |
| | | } |
| | | |
| | | .chartsBox { |
| | | white-space: nowrap; |
| | | padding: 0 80px; |
| | |
| | | // } |
| | | /* 对于WebKit浏览器和Blink引擎(如Chrome, Opera) */ |
| | | ::-webkit-scrollbar { |
| | | width: 16px; /* 滚动条的宽度 */ |
| | | width: 4px; /* 滚动条的宽度 */ |
| | | height: 16px; /* 滚动条的高度 */ |
| | | } |
| | | |
| | |
| | | |
| | | ::-webkit-scrollbar-thumb { |
| | | background: #b9a587; /* 滚动条滑块的颜色 */ |
| | | border-radius: 16px; /* 滚动条滑块的圆角 */ |
| | | border-radius: 2px; /* 滚动条滑块的圆角 */ |
| | | width: 4px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:hover { |
| | |
| | | position: relative; |
| | | } |
| | | |
| | | .gradchild:hover { |
| | | width: 25px; |
| | | height: 25px; |
| | | margin-top: 2px; |
| | | margin-right: 2px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | } |
| | | .item-circle { |
| | | width: 100%; |
| | | height: 20px; |
| | |
| | | } |
| | | .detailDialog { |
| | | position: absolute; |
| | | // left: -54px; |
| | | // bottom: 50px; |
| | | top: -550%; |
| | | width: 400px; |
| | | top: -700%; |
| | | transform: translateY(20%); |
| | | transform: translateX(-50%); |
| | | width: 524px; |
| | | z-index: 9999; |
| | | cursor: pointer; |
| | | background: #fff; |
| | |
| | | right: 5px; |
| | | z-index: 999; |
| | | } |
| | | ::v-deep .el-loading-spinner { |
| | | color: #937950 !important; |
| | | } |
| | | </style> |