| | |
| | | class="box-card" |
| | | style="min-height: 1.91rem; margin: 0.2rem 0" |
| | | > |
| | | <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> |
| | | <el-tabs ref="tabs" v-model="activeName"> |
| | | <el-tab-pane label="代表著作" data-id="1" name="representative"> |
| | | <Table1 |
| | | :data="tableData1" |
| | |
| | | // 获取时空地图 |
| | | this.getMapInfo(); |
| | | |
| | | this.$nextTick(() => { |
| | | // 获取第一个选项卡的 DOM 元素 |
| | | const firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | firstTab.style.transform = "translateX(" + "-.2rem" + ")"; |
| | | }); |
| | | // this.$nextTick(() => { |
| | | // // 获取第一个选项卡的 DOM 元素 |
| | | // const firstTab = this.$refs.tabs.$el.querySelector( |
| | | // ".el-tabs__active-bar" |
| | | // ); |
| | | // firstTab.style.transform = "translateX(" + "-.2rem" + ")"; |
| | | // }); |
| | | |
| | | // 监听窗口大小变化 |
| | | window.addEventListener("resize", this.relation); |
| | |
| | | .join("&"); |
| | | window.open(`#/pages/fileDetail/index?${queryString}`); |
| | | }, |
| | | handleClick(tab) { |
| | | let index = tab.$attrs["data-id"] - 1; |
| | | this.$nextTick(() => { |
| | | let firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | if (index == 0) { |
| | | firstTab.style.transform = "translateX(-" + 0.2 + "rem)"; |
| | | } else if (index == 1) { |
| | | firstTab.style.transform = "translateX(" + 0.85 * index + "rem)"; |
| | | } else if (index == 2) { |
| | | firstTab.style.transform = "translateX(" + 0.93 * index + "rem)"; |
| | | } else if (index == 3) { |
| | | firstTab.style.transform = "translateX(" + 0.95 * index + "rem)"; |
| | | } else if (index == 4) { |
| | | firstTab.style.transform = "translateX(" + 0.97 * index + "rem)"; |
| | | } else { |
| | | let firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | firstTab.style.transform = "translateX(" + "-.2" + "rem)"; |
| | | } |
| | | }); |
| | | }, |
| | | // 关系图谱 |
| | | relation() { |
| | | var chartDom = document.getElementById("relation"); |
| | |
| | | width: 70%; |
| | | } |
| | | |
| | | ::v-deep .el-tabs__content { |
| | | line-height: 1; |
| | | } |
| | | |
| | | |
| | | /* 个人小传 ------------------*/ |
| | | ::v-deep .el-dialog__header { |
| | |
| | | } |
| | | |
| | | ::v-deep .el-tabs__item { |
| | | width: 1rem; |
| | | width: 1.4rem; |
| | | font-size: 0.14rem; |
| | | line-height: 0.4rem; |
| | | height: 0.4rem; |
| | | padding: 0 20px !important; |
| | | text-align: center; |
| | | } |
| | | |
| | | ::v-deep .el-tabs__header { |
| | |
| | | } |
| | | |
| | | ::v-deep .el-tabs__active-bar { |
| | | /* 设置滚动条宽度 */ |
| | | width: 1rem !important; |
| | | height: 0.03rem !important; |
| | | background-color: #597aa5; |
| | | transform: translateX(-20px); |
| | | /* margin-top: .09rem; */ |
| | | } |
| | | |
| | | ::v-deep .el-tabs__active-bar { |