<template function>
  <div class="Hce has-recommend">
    <img class="Hce-img" src="https://img.lkbang.net/xcx/empty-dark.6f03fbc0.png" />
    <div class="Hce-text">
      <div class="Hce-tips">
        很遗憾，没有找到<template v-if="keyWords"
          >关于“<span class="Hce-tips__red">{{ keyWords }}</span
          >”</template
        ><template v-else>相关</template>的搜索结果，请您尝试搜索其他商品哦！
      </div>
      <div v-if="$config.xincheng">
        小咩为你推荐其他相关商品，快去看看吧！
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    keyWords: {
      type: String,
      default: ''
    }
  }
};
</script>
<style lang="less" scoped>
.Hce {
  .text-size(14);
  color: @gray-4;
  text-align: center;
  margin-top: 125px;
  &.has-recommend {
    background-color: @gray-6;
    padding: @padding-unit + 2 @padding-sm;
    margin-top: 0;
    display: flex;
    align-items: center;
  }
  &-img {
    width: 40px;
    height: 40px;
    margin-right: 4px;
  }
  &-text {
    .text-size(12);
    font-weight: 400;
    color: #969799;
    line-height: 20px;
  }
  &-tips {
    text-align: left;
    word-break: break-all;
    &__red {
      color: @red;
    }
  }
}
</style>
