页面优化

zhongshujie

10 小时以前 8bffcbb7f5fca4e1e7a308f6f786b63d0773704c

 src/views/achievements/details.vue

@@ -22,9 +22,9 @@
          <p>
            <span v-for="(item, index) in details.author" :key="index">{{ item }}</span>
          </p>
          <p v-if="details.abstract">
            <span>摘要：</span>
            <span class="page-main-abstract" v-html="details.abstract"></span>
          <p v-if="details.cleanAbstract">
            <span class="abstract-title">摘要：</span>
            <span class="page-main-abstract-main" v-html="details.cleanAbstract"></span>
          </p>
          <p v-if="details.keyWords && details.keyWords.length > 0">
            <span>关键词：</span>
@@ -63,9 +63,9 @@
              <li class="main-author">
                {{ item.author }}
              </li>
              <li class="main-title" :title="item.abstract" v-if="item.abstract">
              <li class="main-title" :title="item.abstract" v-if="item.cleanAbstract">
                <span>摘要: </span>
                <span class="page-main-abstract" v-html="item.abstract"></span>
                <span class="page-main-abstract" v-html="item.cleanAbstract"></span>
              </li>
              <li class="main-keyword" v-if="item.keyWords && item.keyWords.length > 0">
                <span>关键词：</span>
@@ -78,14 +78,17 @@
        </li>
      </ul>
    </div>
    <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="2vh" bottom="2vh"
    <el-empty v-if="!loading && details == ''"></el-empty>
    <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="3vh" bottom="2vh"
      :visible.sync="dialogVisible" class="custom-dialog">
      <div class="pdfInfoBox">
      <div class="pdfInfoBox" v-loading="pdfLoading" element-loading-text="图片加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div v-for="(item, index) in pdfList" :key="index" class="pdfItem" :page="index + 1">
          <img :src="item.showSrc" alt="" style="min-height: 550px" loading="lazy" />
          <el-divider content-position="center"> 第 {{ index + 1 }} 页 </el-divider>
        </div>
      </div>
      <el-empty v-if="!pdfLoading && !pdfList.length"></el-empty>
    </el-dialog>
  </div>
</template>
@@ -151,14 +154,13 @@
      resourceTypeValueList: [],
      // 查询结果
      resultList: [],
      loading: false,
      loading: true,
      pdfLoading: false,
    };
  },
  async mounted() {
    await this.getContent(this.$route.query.id);
    await this.getSelectData();
    console.log(this.details, "请求出来的数据");

    // 查找关键词相匹配的文章
    if (this.details.keyWords && this.details.keyWords.length) {
      for (let i = 0; i < this.details.keyWords.length; i++) {
@@ -167,6 +169,7 @@
        this.inputType = "keyWords"
        await this.getItemListOne()
      }
      this.loading = false;
      console.log(this.resultList, "处理好的");
    } else {
      this.getItemList()
@@ -174,10 +177,12 @@
    if (this.resultList.length == 0) {
      this.getItemList()
    }

    //处理文件
    if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") {
      if (this.details.file != "") {
        this.details.src = await this.getResourcePath(this.details.file)
        console.log(this.details.src, "视频地址");
      }
    }

@@ -193,6 +198,7 @@
  methods: {
    // 根据id请求该页面数据
    async getContent(id) {
      this.loading = true;
      const res = await MG.resource
        .getItem({
          path: "*",
@@ -201,6 +207,7 @@
            cmsType: ["cmsItem"],
            "Id=": [id + ""],
            source: [],
            isbn: [],
            year: [],
            abstract: [],
            keyWords: [],
@@ -219,14 +226,17 @@
          // 设置一个默认值或者进行其他错误处理
          item.keyWords = [];
        }
        if(item.author && item.author.length>0){
        if (item.author && item.author.length > 0) {
          item.author = item.author.split(";");
        }
        if (item.abstract) {
          item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, "");
        }

        const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType);
        item.resourceTypeName = foundItem ? foundItem.name : '';
      })
      this.details = res.datas[0]
      this.loading = false;
    },

    // 在此点击详情
@@ -248,6 +258,7 @@
      if (this.resultList.length == 0) {
        this.getItemList()
      }

      //处理文件
      if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") {
        if (this.details.file != "") {
@@ -308,6 +319,7 @@
          showSrc: ''
        })
      }
      this.pdfLoading = false;
      // 启动页码观察
      setTimeout(() => {
        this.initObservation()
@@ -355,7 +367,6 @@

    //获取下拉选择框的内容
    async getSelectData() {
      this.loading = true;
      try {
        // 同时发起两个异步请求，并等待它们的结果
        const [resourceListResult] = await Promise.all([
@@ -423,6 +434,7 @@
            // 'id=':[this.$route.params.key],
            "resourceType*": this.resourceTypeValueList,
            source: [],
            isbn: [],
            year: [],
            abstract: [],
            keyWords: [],
@@ -442,6 +454,9 @@
          // 设置一个默认值或者进行其他错误处理
          item.keyWords = [];
        }
        if (item.abstract) {
          item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, "");
        }
        const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType);
        item.resourceTypeName = foundItem ? foundItem.name : '';
        console.log(this.details.id, "");
@@ -450,22 +465,10 @@
          this.resultList.push(item);
        }
      });
      // 排除自身且去重

      // const relatedList = res.datas.filter((item) => {
      //   return item.id !== this.details.id;
      // });
      // this.resultList.push(...relatedList)
      // // 根据id去重
      // this.resultList = this.uniqueById(this.resultList);
      // //最多显示10条
      // if (this.resultList.length > 10) {
      //   this.resultList = this.resultList.slice(0, 10);
      // }
      this.loading = false;
    },

    async openPdf(name) {
      this.pdfLoading = true;
      this.pdfList = []
      this.pdfName = name;
      this.dialogVisible = true;
@@ -485,6 +488,7 @@
            cmsType: ["cmsItem"],
            "resourceType*": this.resourceTypeValueList,
            source: [],
            isbn: [],
            year: [],
            abstract: [],
            keyWords: [],
@@ -503,6 +507,9 @@
            } else {
              // 设置一个默认值或者进行其他错误处理
              item.keyWords = [];
            }
            if (item.abstract) {
              item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, "");
            }
            const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType);
            item.resourceTypeName = foundItem ? foundItem.name : '';
@@ -589,11 +596,11 @@
      font-size: 14px;
      background-color: transparent;
      color: #937950;
      border: 1px solid #6f5a3a;
      border: 1px solid #937950;
      border-radius: 0;

      &:hover {
        background-color: #6f5a3a;
        background-color: #937950;
        color: #fffdf8;
      }
    }
@@ -637,11 +644,11 @@
      font-size: 14px;
      background-color: #937950;
      color: #fff;
      border: 1px solid #6f5a3a;
      border: 1px solid #937950;
      border-radius: 0;

      &:hover {
        background-color: #6f5a3a;
        background-color: #937950;
        color: #fffdf8;
      }
    }
@@ -649,9 +656,9 @@
    .page-main-abstract {
      font-family: Source Han Sans !important;
      font-size: 14px !important;
      font-weight: 350 !important;
      line-height: 26px !important;
      color: #333333 !important;
      font-weight: 100 !important;
    }

    p:nth-child(1) {
@@ -677,20 +684,22 @@
      margin-bottom: 13px;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 26px;
      color: #333333;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;

      .abstract-title {
        font-weight: bold;
      }

      span {
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }

    }

    p:nth-child(3) {
@@ -823,16 +832,17 @@
          font-size: 16px;
          font-weight: bold;
          color: #937950;
          margin-bottom: 5px;

          ::v-deep .el-button {
            font-size: 14px;
            background-color: transparent;
            color: #937950;
            border: 1px solid #6f5a3a;
            border: 1px solid #937950;
            border-radius: 0;

            &:hover {
              background-color: #6f5a3a;
              background-color: #937950;
              color: #fffdf8;
            }
          }
@@ -875,9 +885,7 @@
            border-left: 1px solid #2c2c2c;
          }



          margin-bottom: 10px;
          margin-bottom: 15px;
        }

        .main-author {
@@ -898,7 +906,7 @@
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          -webkit-line-clamp: 3;

          span {
            font-family: Source Han Sans;
@@ -923,7 +931,7 @@
          }

          .keyWord {
            cursor: pointer;

            padding: 5px 10px;
            color: #937950;
            border: 1px solid #937950;
@@ -954,6 +962,18 @@
    object-fit: contain;
  }
}

::v-deep .el-loading-spinner {
  .el-loading-text {
    font-size: 14px;
    color: #937950;
  }

  .el-icon-loading {
    font-size: 14px;
    color: #937950;
  }
}
</style>

<style lang="less">