pc_shop_site/components/CategoryNoData.vue

<template>
  <div class="com-category-no-data">
    <div class="title">Search Results for"{{ keyword }}"</div>
    <div class="sub-title">
      Sorry your search for "{{ keyword }}" returned no results.
    </div>
    <div class="content">
      Your search term retured no results. You can use the search box above. If
      you need further help,
      <br />
      <span
        class="link"
        @click="toIndent"
        >please fill in your requirements</span
      >, we will get in touch with you as soon as possible.
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComCategoryNoData',
  computed: {
    keyword() {
      const query = this.$route.query
      const params = this.$route.params
      if (query.keyword && query.keyword.length) return query.keyword
      if (params.thirdCategory && params.thirdCategory.length)
        return params.thirdCategory
      if (params.secondCategory && params.secondCategory.length)
        return params.secondCategory
      if (params.firstCategory && params.firstCategory.length)
        return params.firstCategory
      return ''
    },
  },
  methods: {
    toIndent() {
      const target = document.getElementById('indentLink')
      if (target) target.click()
    },
  },
}
</script>

<style lang="scss" scoped>
.com-category-no-data {
  padding: 150px 24px 0;
}
.title {
  font-size: 26px;
}
.sub-title {
  margin-top: 44px;
  font-size: 22px;
}
.content {
  margin-top: 36px;
  font-size: 16px;
  line-height: 22px;
}
.link {
  cursor: pointer;
  color: blue;
}
</style>