pref(收藏夹): 显示空状态

src/components/empty/index.module.scss

@@ -0,0 +1,20 @@
+.mainBox {
+    height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .pic {
+        width: 522px;
+        height: 322px; 
+        // opacity: 0.3;
+        margin-bottom: 24px;
+    }
+
+    .text {
+        font-size: 26px;
+        color: $color_font_two;
+        font-weight: 400;
+    }
+}

src/components/empty/index.tsx

@@ -0,0 +1,22 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../empty/index.module.scss'
+
+interface PropsObj {
+  picUrl?: string
+  text?: string
+}
+const Empty = (pros: PropsObj) => {
+  const {
+    picUrl = '',
+    text = '无搜索历史',
+  } = pros
+
+  return (
+    <View className={styles.mainBox}>
+      <Image className={styles.pic} mode="aspectFill" lazyLoad src={picUrl}></Image>
+      <View className={styles.text}>{text}</View>
+    </View>
+  )
+}
+export default memo(Empty)