qianzhi-message/TUIKit/components/TUISearch/search-result/search-result-default/index.vue

<template>
  <div :class="['search-result-default', !isPC && 'search-result-default-h5']">
    <div class="search-result-default-main">
      <Icon
        file="https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/images/static/empty.png"
        width="300upx"
        height="232upx"
      />
      <div class="default-text">
        {{ TUITranslateService.t("TUISearch.暂无搜索结果") }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
import { isPC } from "../../../../utils/env";
import Icon from "../../../common/Icon.vue";
</script>
<style scoped lang="scss">
.search-result-default {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  &-h5 {
    background-color: #f4f4f4;
  }

  &-main {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;

    .default-text {
      font-weight: 500;
      font-size: 32rpx;
      color: #666666;
      margin-top: 34upx;
    }
  }
}
</style>