portal_website/src/components/search/index.vue

<template>
  <div>
    <div class="searchBtn">
      <el-button @click="dialogVisible = true" size="small" icon="el-icon-search" circle></el-button>
    </div>
    <el-dialog top="5vh" width="80%" :append-to-body="true" title="搜索" :visible.sync="dialogVisible">
      <el-input @keyup.enter.native="onSubmit" style="width: 100%" v-model="form.keyword" placeholder="搜索内容">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="onSubmit"></i>
      </el-input>
      <div class="resultCount">{{
          results.length || 0
        }}个相关结果
      </div>
      <div class="container" v-if="results.length > 0">
        <div class="resultList">
          <div class="resultItem" v-for="(i,k) in results" :key="k" @click="toResult(i)">
            <div class="resultMeta">
              <span class="source">{{ i.sourceName }}</span>
              <span class="index">#{{ k + 1 }}</span>
            </div>
            <div class="resultTitle" v-html="i.snippet"></div>
            <div class="resultText">{{ i.title }}</div>
            <div class="itemViewMore">查看详情</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {search} from '@/api/search'

export default {
  data() {
    return {
      dialogVisible: false,
      form: {},
      results: [],
    }
  },
  methods: {
    onSubmit() {
      search(this.form).then(res => {
        this.results = []
        res.data?.rows?.forEach(e => {
          if (e.sourceType === 'web1') {
            this.results.push({
              sourceType: e.sourceType,
              sourceName: '产品中心',
              snippet: e.snippet,
              title: e.title,
              link: e.title?.split('详情#')?.[1]?.split('-')
            })
          }
          if (e.sourceType === 'web') {
            this.results.push({
              sourceType: e.sourceType,
              sourceName: '行业方案',
              snippet: e.snippet,
              title: e.title,
              link: e.routeQuery?.id
            })
          }
        })
      })
    },
    toResult(item) {
      if (item.sourceType === 'web1') {
        if (!item.link || item.link.length < 3) return
        this.$router.push(`/productCenter/detail?type=${item.link[0]}&typeId=${item.link[1]}&id=${item.link[2]}`)
      } else {
        if (!item.link) return
        this.$router.push(`/test?id=${item.link}`)
      }
      this.dialogVisible = false
    },
  },
  mounted() {
  },
}
</script>
<style scoped lang="less">
@import "~@/style.less";

.searchBtn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 9;
}

.container {
  width: calc(100% - 40px);
  background-color: #f5f8ff;
  height: calc(80vh - 125px - 3vw);
  padding: 0 20px;
  overflow: auto;
}

.resultCount {
  width: 100%;
  text-align: center;
  font-size: 1.4vw;
  line-height: 3vw;
  font-weight: 600;
}

em {
  color: red;
  background: yellow;
  font-style: normal;
}

.resultList {
  padding: 1vw 0;
}

.resultItem {
  position: relative;
  margin-bottom: 0.8vw;
  padding: 1vw 1.2vw;
  background-color: #fff;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    border-left-color: @standard-color;
    box-shadow: 0 8px 18px rgba(51, 114, 254, 0.12);
    transform: translateX(0.2vw);

    .itemViewMore {
      color: @standard-color;
    }
  }
}

.resultMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6vw;
  color: #0006;
  font-size: 0.8vw;
}

.source {
  color: @standard-color;
  font-weight: 600;
}

.resultTitle {
  display: -webkit-box;
  overflow: hidden;
  color: #111;
  font-size: 1vw;
  font-weight: 600;
  line-height: 1.6vw;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  /deep/ em {
    color: @standard-color;
    background-color: rgba(51, 114, 254, 0.12);
    font-style: normal;
  }
}

.resultText {
  width: 100%;
  margin-top: 0.5vw;
  color: #666;
  font-size: 0.85vw;
  line-height: 1.4vw;
}

.itemViewMore {
  margin-top: 0.7vw;
  color: #0006;
  font-size: 0.8vw;
  font-weight: bold;
}
</style>