高级搜索

src/components/searchInput/index.module.scss

@@ -4,20 +4,24 @@
     align-items: center;
     min-height: 62px;
     padding: 10px 0;
-    border-bottom: 1px solid #f3f3f3;
+    border-bottom: 1px solid #F0F0F0;
     .searchInput_title {
         width: 150px;
+        min-height: 50px;
         font-size: 28px;
-        border-right: 1px solid #f3f3f3;
-        color: $color_font_on;
+        border-right: 1px solid #F0F0F0;
+        color: $color_font_two;
         margin-right: 20px;
         padding-left: 20px;
-        &::before{
-            content: "";
-            height: 50px;
-            width: 1px;
-            background-color: #f3f3f3;
-        }
+        display: flex;
+        align-items: center;
+
+        // &::before{
+        //     content: "";
+        //     height: 50px;
+        //     width: 1px;
+        //     background-color: #F0F0F0;
+        // }
     }
     .searchInput_con{
         flex:1;

src/components/searchInput/index.tsx

@@ -1,5 +1,5 @@
 import { Input, View } from "@tarojs/components";
-import { memo, useDebugValue, useMemo } from "react";
+import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
 import styles from  './index.module.scss';
 
 type Params = {
@@ -10,7 +10,8 @@ type Params = {
     showTitle?: false|true,
     showBorder?: false|true,
     changeOnInput?: (string) => void,
-    clickOnInput?: () => void
+    clickOnInput?: () => void,
+    children?: ReactNode
 
 }
 
@@ -37,9 +38,11 @@ export default memo((props: Params) => {
         <View className={styles.searchInput_main} style={stylen}>
             {showTitle&&<View className={styles.searchInput_title}>{title}</View>}
             <View className={styles.searchInput_con}>
-                <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
+                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
+                    ||<View>{props.children}</View>
+                }
             </View>
-            {showIcon&&<View className={`iconfont icon-more ${styles.icon_more_self}`}></View>}
+            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
         </View>
     )
 })