列晒筛选

src/components/SearchBar/index.module.scss

@@ -0,0 +1,23 @@
+.searchBar {
+  --nutui-searchbar-padding: 10px 15px;
+  --nutui-searchbar-font-size: 16px;
+  --nutui-searchbar-input-height: 44px;
+  --nutui-searchbar-content-border-radius: 44px;
+  --nutui-searchbar-input-text-color: #000000;
+  --nutui-searchbar-input-padding: 0 0 0 10px;
+  --nutui-searchbar-padding:0 15px;
+  // --nutui-searchbar-background: #ffffff;
+  :global(.nut-searchbar-content) {
+    box-shadow: 0 4px 48px #00000014;
+  }
+  .searchBarRight {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 1px solid #0000000F;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/SearchBar/index.tsx

@@ -0,0 +1,22 @@
+
+import { SearchBar } from '@nutui/nutui-react-taro'
+import styles from './index.module.scss'
+
+const SearchBarComponent = () => {
+  return (
+    <>
+    <SearchBar
+        // leftIn={
+        //   <div>123</div>
+        // }
+        right={
+          <div className={styles.searchBarRight}>筛</div>
+        }
+        className={styles.searchBar}
+        placeholder='搜索上海的球局和场地'
+      />
+    </>
+  )
+}
+
+export default SearchBarComponent