首页开发

2022-04-06 18:42:14 +08:00
parent e983ba05ea
commit fc3e9885d3
18 changed files with 654 additions and 12 deletions
@@ -0,0 +1,47 @@
+.search_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .icon_a_sousuo1_self{
+        font-size: 37px;
+        color: $color_font_two;
+        margin-right: 20px;
+        position: absolute;
+        left: 10px;
+    }
+    .search_con{
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        input{
+            font-size: 27px;
+            background: #eee;
+            width: 100%;
+            height: 60px;
+            border-radius: 50px;
+            padding: 0 60px 0 60px;
+            box-sizing: border-box;
+            &::-webkit-input-placeholder { /* WebKit browsers */
+                color: #999;
+                font-size: 16px;
+              }
+              
+            &::-moz-placeholder { /* Mozilla Firefox 19+ */
+                color: #999;
+                font-size: 16px;
+              }
+              
+            &::-ms-input-placeholder { /* Internet Explorer 10+ */
+                color: #999;
+                font-size: 16px;
+            }  
+        }
+        .search_closeBtn{
+            position: absolute;
+            right: 10px;
+    
+        }
+    }
+    
+}
@@ -0,0 +1,48 @@
+import { Input, View } from "@tarojs/components";
+import styles from "./index.module.scss"
+import CloseBtn from "@/components/closeBtn"
+import { memo, useState } from "react";
+
+type Params = {
+    clickOnSearch?: () => void
+    disabled?: false|true,
+    placeholder?: string,
+    changeOnSearch?:(any) => void,
+    showIcon?: false|true,
+    style?: Object
+}
+
+export default memo(({
+    clickOnSearch,
+    changeOnSearch,
+    disabled = false,
+    placeholder = '输入搜索内容',
+    showIcon = true,
+    style = {}
+}:Params) => {
+    const [inputCon , setInputCon] = useState('')
+
+    const onInputEven = (e) => {
+        const value = e.detail.value
+        setInputCon(value)
+        changeOnSearch?.(value)
+    }
+
+    const clearInput = () => {
+        setInputCon('')
+        changeOnSearch?.('')
+    }
+    return (
+        <>
+            <View className={styles.search_main} onClick={() => clickOnSearch?.()} style={style}>
+                <View className={styles.search_con}>
+                    {showIcon&&<View className={`iconfont icon-sousuo  ${styles.icon_a_sousuo1_self}`}></View>}
+                    <Input placeholderStyle='color:#ABABAB; font-size:26rpx' disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
+                    {!!inputCon&&<View className={styles.search_closeBtn}>
+                        <CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
+                    </View>}
+                </View>
+            </View>
+        </>
+    )
+})