lzga-ui/src/views1/Retrieval/RetrievalView.vue

<template>
  <div class="containe">
    <div class="picture">
      <img src="../../assets/img/Group 467.png" alt="" />
    </div>
    <div class="search">
      <el-input
        type="text"
        placeholder="请输入文档信息"
        v-model="input"
        @keyup.enter.native="searchs"
      ></el-input>
      <span class="cen—top-span" @click="searchs">快速搜索</span>
      <img
        src="../../assets/img/ri：search-2-line@2x.png"
        class="cen—top-img"
      />
    </div>
    <div class="mains"  @scroll="handleScroll">
      <div
        v-for="item in count"
        :key="item.id"
        class="main-main"
      >
        <div class="one" @click="docName(item.id, item.content.info)">
          {{ item.content.info.docName }}
        </div>
        <div class="two">
          <div class="two1">
            <img src="../../assets/img/UserCircle.png" />
            {{ item.content.info.createBy }}
          </div>
          <div>
            <img src="../../assets/img/Clock.png" />
            {{ item.content.info.createTime }}
          </div>
        </div>
        <div
          class="three"
          v-for="highlightFieldsContentItem in item.highlightFields.content"
          :key="highlightFieldsContentItem.id"
          v-html="highlightFieldsContentItem"
          style="white-space: normal"
        ></div>
        <ul class="four">
          <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
            {{ tagName.tagName }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ret } from "@/api/doc/share1.js";

export default {
  data() {
    return {
      //搜索框绑定
      input: "",
      //搜索出来的数据
      count: [],
      page: 0,
      size: 3
    };
  },
  mounted() {
    //添加滚动条事件
    window.addEventListener("scroll", this.handleScroll, true);
    this.input=this.$route.query.datas;
  },
  methods: {
    handleScroll() {
      const container = document.querySelector(".mains");
      const { scrollTop, scrollHeight, clientHeight } = container;
      // console.log('scrollHeight',scrollHeight);
      // console.log('clientHeight',clientHeight);
      // console.log(scrollTop);
      // 是否达到页面底部
      if (scrollTop + clientHeight >= scrollHeight) {
        // console.log('滚动到底部了！')
        this.page+=1
        // 执行加载
        this.searchs()
      }
    },

    //查找返回的数据
    searchs() {
      // console.log('this.input=',this.input)
      // console.log('this.page=',this.page)
      // console.log('this.size=',this.size)
      ret({ content: this.input, page: this.page, size: this.size }).then((item) => {
        // console.log('item=',item)        
        if (item.length > 0) {
          this.count.push(...item);
        }
      })
    },
    //预览界面
    docName(curentDocId, value) {
      this.$tab.openPage(
        // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
       window.open("/individual/Pre/user/" + curentDocId+ "?value=" + JSON.stringify(value), "_blank"),
      );
    },
  },
};
</script>
<style lang='scss'>
.three {
  margin-bottom: calc(100vw * (10 / 1920));
  em {
    color: #f00 !important;
  }
}
</style>
<style scoped lang='scss'>
.containe {
  color: #7ea4c8;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  .picture {
    width: calc(100vw * (220 / 1920));
    height: calc(100vh * (57 / 1080));
    margin-left: calc(100vw * (860 / 1920));
    margin-top: calc(100vh * (100 / 1080));
    margin-bottom: calc(100vh * (40 / 1080));
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .search {
    width: calc(100vw * (864 / 1920));
    height: calc(100vh * (50 / 1080));
    margin-left: calc(100vw * (528 / 1920));
    margin-bottom: calc(100vh * (50 / 1080));
    position: relative;
    .cen—top-img {
      width: calc(100vw * (24 / 1920));
      height: calc(100vh * (24 / 1080));
      position: absolute;
      left: calc(100vw * (15 / 1920));
      top: calc(100vh * (15 / 1080));
    }
    .el-input {
      width: calc(100vw * (750 / 1920));
      height: calc(100vh * (50 / 1080));
      margin-right: calc(100vw * (14 / 1920));
    }
    .cen—top-span {
      display: inline-block;
      width: calc(100vw * (100 / 1920));
      height: calc(100vh * (50 / 1080));
      background: #2e8aecff;
      color: #ffffffcc;
      text-align: center;
      line-height: calc(100vh * (50 / 1080));
      &:hover{
            cursor: pointer
          }
    }
  }
  .mains {
    width: calc(100vw * (1450 / 1920));
    height: calc(100vh * (670 / 1080));
    // background: seagreen;
    margin-left: calc(100vw * (230 / 1920));
    overflow: auto;
    .main-main {
      width: calc(100vw * (1430 / 1920));
      // height: calc(100vh * (220 / 1080));
      padding: calc(100vh * (20 / 1080));
      border-bottom: 1px dashed #083b61ff;
      .one {
        margin-bottom: calc(100vw * (10 / 1920));
        color: #2e8aecff;
        font-size: 14px;
        text-decoration: underline;
      }
      .two {
        margin-bottom: calc(100vh * (10 / 1080));
        display: flex;
        .two1 {
          margin-right: calc(100vw * (30 / 1920));
        }
        img {
          vertical-align: middle;
        }
      }
      .four {
        display: flex;
        list-style: none;
        padding: 0;
        li {
          //  width: calc(100vw * (62 / 1920));
          //  height: calc(100vh * (24 / 1080));
          border: 1px solid #ff9839ff;
          background: #bba99240;
          padding: 0 5px;
          margin-right: calc(100vw * (5 / 1920));
        }
      }
    }
  }
  //滚动条样式
  ::-webkit-scrollbar {
    width: 3.5px;
  }
  ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-thumb {
    background: #2e8aec;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #2e8aec;
  }
}
::v-deep .el-input--medium .el-input__inner {
  padding-left: calc(100vw * (50 / 1920));
  background: #14265e80;
  border: 1px solid #01d1ffff;
  color: #7ea4c8ff;
}
</style>