1

YM

2024-07-26 e00361c6bcbb1a56f6dcda22b91bdfcb2736e263

 src/pages/character/detail.vue

@@ -1,6 +1,6 @@
<template>
  <view class="relative">
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <headNav :idIndex="1 + ''" text="历代人物" />
    <view class="Midde flex">
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
@@ -239,7 +239,7 @@
            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"
@@ -289,19 +289,22 @@
              <span>相关附表/图像</span>
            </div>
            <view>
              <div style="overflow: auto">
                <el-image
                  v-for="item in imageList"
                  :key="item"
                  style="
                    width: 2.05rem;
                    height: 2.4rem;
                    margin-right: 0.2rem;
                    margin-bottom: 0.1rem;
                  "
                  :src="item"
                  fit="fill"
                ></el-image>
              <div style="overflow: auto; display: flex">
                <div v-for="item in imageList" :key="item" :title="item.name">
                  <el-image
                    :title="item.name"
                    :alt="item.name"
                    style="
                      width: 2.05rem;
                      height: 2.4rem;
                      margin-right: 0.2rem;
                      margin-bottom: 0.1rem;
                    "
                    :src="item.src"
                    :preview-src-list="imageList.map((item) => item.src)"
                    fit="contain"
                  ></el-image>
                </div>
              </div>
              <div
                v-if="imageList.length == 0"
@@ -531,13 +534,13 @@
    // 获取时空地图
    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);
@@ -584,7 +587,6 @@
              : fieldItem.content1;
          }
        }
        console.log(obj);
        this.detailInfo = obj;
        getDynastyAll().then((dynastyData) => {
          getWebBasic({
@@ -601,8 +603,9 @@
          });
        });
        // 关系图谱
        this.getMappingData(this.detailInfo.NAME);
        this.getMappingData();
      });

      //现代研究
      getPersonInfo({
        id: this.detailId,
@@ -713,7 +716,28 @@
      getPersonImages({
        personId: this.detailId
      }).then((res) => {
        this.imageList = res.list.map((item) => getImg(item.filePath));
        this.imageList = res.list.map((item) => {
          return {
            src: getImg(item.filePath),
            name: item.desc
          };
        });
      });
    },
    getBiog() {
      getPersonBiog({
        personId: this.detailId
      }).then((res) => {
        this.biogData = res.list.map((item) => {
          return {
            content: item.content1,
            bookName:
              "《" +
              item.bookName +
              "》 " +
              (item.pageNo ? "P " + item.pageNo : "") // 这里只有bookid无法匹配到书名
          };
        });
      });
    },
    getBiog() {
@@ -811,9 +835,9 @@
        }
      });
    },
    getMappingData(name) {
    getMappingData() {
      getFuzzySearch({
        keyword: name
        personId: this.detailId
      }).then((res) => {
        this.nodes = [];
        this.relationships = [];
@@ -967,30 +991,6 @@
        )
        .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() {
@@ -1313,16 +1313,14 @@

<style>
/* Table1表格里面的数据 */
::v-deep .is-leaf {
  .cell {
::v-deep .is-leaf .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
}

::v-deep .el-table__body {
  .cell {
::v-deep .el-table__body .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
@@ -1343,9 +1341,7 @@
  width: 70%;
}

::v-deep .el-tabs__content {
  line-height: 1;
}


/* 个人小传 ------------------*/
::v-deep .el-dialog__header {
@@ -1367,12 +1363,6 @@
}

/* ------------------- */

img {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}
@@ -1382,16 +1372,16 @@
  padding: 15rpx 25rpx;
  color: #fff !important;

  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }
}
.NavTop img {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
}

  .NavTopr {
    img {
      margin-right: 10rpx;
    }
.NavTop .NavTopr {
  img {
    margin-right: 10rpx;
  }
}

@@ -1399,9 +1389,9 @@
  width: 100%;
  height: 30rpx;

  img {
    vertical-align: top;
  }
}
.mImage img {
  vertical-align: top;
}

.Midde {
@@ -1412,28 +1402,28 @@
  align-items: flex-start;
  padding: 0.18rem 0.24rem;

  view {
    color: #000;
  }
}
.Midde view {
  color: #000;
}

  .MiddeBack {
    width: 0.6rem;
    height: 0.24rem;
    font-size: 0.12rem;
    padding: 0;
    border: 1px solid #9e9e9e;
  }
.Midde .MiddeBack {
  width: 0.6rem;
  height: 0.24rem;
  font-size: 0.12rem;
  padding: 0;
  border: 1px solid #9e9e9e;
}

.yinyong {
  font-size: 0.12rem;

  img {
    width: 0.12rem;
    height: 0.1rem;
    vertical-align: top;
    margin-right: 0.03rem;
  }
}
.yinyong img {
  width: 0.12rem;
  height: 0.1rem;
  vertical-align: top;
  margin-right: 0.03rem;
}

.el-dialog__wrapper {
@@ -1478,10 +1468,12 @@
}

::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 {
@@ -1489,12 +1481,8 @@
}

::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 {