crs-double-resistance/src/view/overView/index.vue

<template>
  <div class="box">
    <banner></banner>
    <div class="content_box">
      <div class="list_title">
        <div class="title">{{ $t("nav.Overview") }}</div>
        <div class="keyword_box">
          <el-input placeholder="Antibody" v-model="keyword" class="input-with-select">
            <el-button class="but_search" slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
          <el-button class="buttom_box" icon="el-icon-refresh" @click="reset">{{ $t("nav.reset") }}</el-button>
        </div>
      </div>
      <div class="list_box">
        <div class="list">
          <el-row :gutter="10" style="width: 100%;">
            <el-col :span="4" v-for="(one, i) in keywordList" :ref="'bt' + one.id" :key="one.id">
              <div class="format-box animate__animated"
              :class="{ 'slide-up': one.isSliding, 'list_active': row(i) }"
              v-if="!one.show"
              @click="gotoproduct(one)" @transitionend="onTransitionEnd(one)">
              <div class="images_box">
              <p class="images_title">{{ one.catalog }}</p>
              <img class="icons-item-imgbox" :src="one.coverUrl">
              <p class="images_weight">{{ one.name }}</p>
              <p class="images_text">{{ one.moa }} </p>
              <p class="images_text">{{ one.proteinWeight }}</p>
              <p class="images_text">({{ one.company }})</p>
              <p class="images_footer">{{ one.country }}{{ one.stage ? ',' : '' }} {{ one.stage }}{{ one.year ? "(" + one.year + ")"
                : '' }}</p>
            </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="title_box" v-if="issshow">{{ $t("nav.other") }} {{ $t("nav.Overview") }}</div>
        <div class="list">
          <el-row :gutter="10" style="width: 100%;">
            <el-col :span="4" v-for="(one, i) in otherList" :ref="'bt' + one.id" :key="one.id">
              <div class="format-box animate__animated"
              :class="{ 'slide-up': one.isSliding, 'list_active': row(i) }"
              v-if="!one.show"
              @click="gotoproduct(one)" @transitionend="onTransitionEnd(one)">
              <div class="images_box">
              <p class="images_title">{{ one.catalog }}</p>
              <img class="icons-item-imgbox" :src="one.coverUrl">
              <p class="images_weight">{{ one.name }}</p>
              <p class="images_text">{{ one.moa }} </p>
              <p class="images_text">{{ one.proteinWeight }}</p>
              <p class="images_text">({{ one.company }})</p>
              <p class="images_footer">{{ one.country }}{{ one.stage ? ',' : '' }} {{ one.stage }}{{ one.year ? "(" + one.year + ")"
                : '' }}</p>
            </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import banner from "@/components/banner";
import "animate.css";
export default {
  name: "overView",
  components: {
    banner
  },
  data() {
    return {
      keyword: "",
      overView: [], // 原数组
      keywordList: [], // 搜索数组
      otherList: [], // 
      // 是否搜索
      issshow: false,
      showBackToTop: false,
    };
  },
  methods: {
    // 过度是否结束
    onTransitionEnd(block) {
      console.log(block.isSliding, "过度是否结束", this.overView.length, "overView====原数组", this.keywordList.length, "keywordList====搜索数组", this.otherList.length, "otherList====");
      if (block.isSliding) {
        block.isSliding = false;
        if (this.isBlockInArray(block, this.otherList)) {
          this.otherList = this.otherList.filter(b => b.catalog !== block.catalog || b.name !== block.name || b.target !== block.target || b.moa !== block.moa);
          this.keywordList.push(block);
          block.styleOpacity = "0"
          setTimeout(() => {
            block.styleOpacity = "1"
          }, 50);
        }
      }
    },
    // 重置
    reset() {
      this.keywordList = []
      this.keyword = ""
      this.issshow = false
      this.changeSearchAll()
    },
    // 搜索
    isBlockInArray(block, array) {
      return array.some(b => b.catalog === block.catalog || b.name === block.name || b.target === block.target || b.moa === block.moa);
    },
    search() {
      let list = []
      list.concat(this.overView)
      this.otherList = this.overView
      console.log(this.overView.length, "overView====原数组", this.keywordList.length, "keywordList====搜索数组", this.otherList.length, "otherList====");
      // 回到顶部
      document.body.scrollTop = 0;
      const keyword = this.keyword.trim().toLowerCase();
      this.keywordList = []
      this.issshow = true
      if (keyword === "") return;
      let matchCount = 0;
      // 搜索条件 name,catalog, target, moa
      this.overView.forEach(block => {
        if (block.name.toLowerCase().includes(keyword.toLowerCase()) || block.catalog.toLowerCase().includes(keyword.toLowerCase()) || block.target.toLowerCase().includes(keyword.toLowerCase()) || block.moa.toLowerCase().includes(keyword.toLowerCase())) {
          if (block.isSliding) return;
          setTimeout(() => {
            block.isSliding = true;
          }, matchCount * 300);
          matchCount++;
        }
      });
    },
    // 判断是第几列数据
    row(i) {
      let num = Math.floor(i / 6) % 2
      return num == 1 ? false : true
    },
    changeSearchAll() {
      this.$api.post("/basb/searchAll", {
        articleFlag: 0
      }).then(res => {
        let list = res.data
        for (let i = 0; i < list.length; i++) {
          list[i].isSliding = false
        }
        this.overView = list
        this.otherList = list
      })
    },
    // 调整详情
    gotoproduct(item) {
      let name = this.$util.english(item.productName);
      let title = "antibody"
      this.$router.push({
        path: "/products/" + title + "/" + name + "/" + item.catalog
      });
    },
    handleScroll() {
      // 当滚动距离超过 300px 时显示回到顶部按钮
      this.showBackToTop = window.scrollY > 300; 
    }
  },
  created() {
    this.changeSearchAll()
  }
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .box {
    .content_box {
      width: 1200px;
      margin: auto;
    }

    .list_title {
      // width: 1200px;
      // margin: 30px auto 0;
      padding-top: 30px;
      padding-bottom: 30px;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      background-color: #fff;
      position: sticky;
      top: 80px;
      z-index: 999;;
      .keyword_box {
        width: 50%;
        display: flex;
        align-items: center;
        margin-left: 40px;

        .input-with-select /deep/ {
          margin-right: 20px;

          .el-input__inner {
            border-color: #007BC4 !important;
            border-right: none !important;
          }

          .el-input-group__append {
            border-color: #007BC4 !important;
            border-left: none !important;
          }

          .but_search {
            background-color: #007BC4;
            border: #007BC4;
            color: #fff;
          }
        }

        .buttom_box {
          background-color: #007BC4;
          border: #007BC4;
          color: #fff;
        }
      }
    }

    .list_box {
      width: 1200px;
      margin: 0 auto 90px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      // max-height: 600px;
      // overflow-y: auto;
      // overflow-x: hidden;
    }

    .title_box {
      line-height: 40px;
      margin-top: 10px;
    }

    .list {
      width: 100%;
      // display: flex;
      // align-items: center;
      // flex-wrap: wrap;
      background-color: #fff;

      .format-box {
        // width: 16.5%;
        border: 1px solid #DDDDDD;
        transition: transform 0.3s ease;
        margin-bottom: 10px;
        .images_box {
          padding: 8px;
          box-sizing: border-box;
          text-align: center;

          .images_title {
            font-size: 12px;
            font-weight: 600;
            text-align: left;
          }

          .images_weight {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            // height: 40px;
          }

          .images_text {
            font-size: 12px;
            height: 20rpx;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
          }

          .images_footer {
            font-size: 12px;
            margin-top: 10px;
            height: 20rpx;
          }

          .icons-item-imgbox {
            width: 100%;
            height: 160px;
          }
        }
      }

      .bg-color {
        background-color: #007BC4;
      }

      .format-box:hover {
        transform-origin: 0% 0;
        transform: scale(1.2);
        border: 1px solid #007BC4;
        background: #fff;
        z-index: 999;
      }
    }

    .list_active {
      background-color: #F0FAFE;

      &:hover {
        transform-origin: 0% 0;
        transform: scale(1.2);
        border: 1px solid #007BC4;
        background: #F0FAFE !important;
        z-index: 999;
      }
    }
  }
  .slide-up {
    // transform: translateY(-100%);
    // opacity: 0;
    transform: translateY(-100px) rotate(360deg) scale(1.1);
    opacity: 0.8;
  }
}
// 滚动条样式
::-webkit-scrollbar {
  width: 4px;
  background-color: #B6D1E6;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #0B72C1;
}
</style>