列晒筛选

src/components/Bubble/bubbleItem.module.scss

@@ -4,7 +4,6 @@
   outline: none; // 移除浏览器默认的outline
   background: #ffffff;
   color: #333333;
-  font-size: 14px;
   font-weight: 400;
   text-align: center;
   cursor: pointer;
@@ -12,9 +11,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: 12px;
   border-radius: 28px;
   margin: 0;
   width: 116px;

src/components/Bubble/index.module.scss

@@ -20,5 +20,8 @@
   .bubbleGrid {
     display: grid;
     width: 100%;
+    .bubbleOption {
+      width: 100%;
+    }
   }
 }

src/components/Bubble/index.tsx

@@ -122,7 +122,7 @@ const Bubble: React.FC<BubbleProps> = ({
       className={styles.bubbleGrid}
       style={{
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: size === "small" ? "8px" : size === "large" ? "16px" : "12px",
+        gap: size === "small" ? "6px" : size === "large" ? "16px" : "12px",
       }}
     >
       {options.map((option) => (
@@ -133,7 +133,7 @@ const Bubble: React.FC<BubbleProps> = ({
           size={size}
           disabled={disabled}
           onClick={handleOptionClick}
-          itemClassName={itemClassName}
+          itemClassName={itemClassName || styles.bubbleOption}
         />
       ))}
     </div>

src/components/CityFilter/index.module.scss

@@ -48,6 +48,7 @@
   .cityName {
     font-size: 13px;
     font-weight: 400;
+    color: #3C3C43;
   }
   .distanceWrap {
     margin-bottom: 16px;

src/components/Range/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Range } from "@nutui/nutui-react-taro";
 import styles from "./index.module.scss";
+import TitleComponent from "../Title";
 
 interface RangeProps {
   min?: number;
@@ -9,6 +10,7 @@ interface RangeProps {
   value?: [number, number];
   onChange?: (value: [number, number]) => void;
   disabled?: boolean;
+  className?: string;
 }
 
 const NtrpRange: React.FC<RangeProps> = ({
@@ -18,15 +20,15 @@ const NtrpRange: React.FC<RangeProps> = ({
   value = [min, max],
   onChange,
   disabled = false,
+  className,
 }) => {
   const [currentValue, setCurrentValue] = useState<[number, number]>(value);
 
   useEffect(() => {
-    setCurrentValue(value);
-  }, [value]);
+    value && setCurrentValue(value);
+  }, [JSON.stringify(value || [])]);
 
   const handleChange = (val: [number, number]) => {
-    console.log("Range value changed:", val);
     setCurrentValue(val);
     onChange?.(val);
   };
@@ -41,32 +43,33 @@ const NtrpRange: React.FC<RangeProps> = ({
 
   const rangContent = useMemo(() => {
     const [start, end] = currentValue || [];
-    if (start === min && end === max) {
+    if (Number(start) === Number(min) && Number(end) === Number(max)) {
       return "不限";
     }
     return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
-  }, [currentValue, min, max]);
+  }, [JSON.stringify(currentValue || []), min, max]);
 
   return (
-    <div className={styles.nutRange}>
+    <div className={`${styles.nutRange} ${className ? className : ''} `}>
       <div className={styles.nutRangeHeader}>
-        <div className={styles.nutRangeHeaderLeft}>
+        {/* <div className={styles.nutRangeHeaderLeft}>
           <div className="ntrp-range__icon">icon</div>
           <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div>
+        </div> */}
+        <TitleComponent title='NTRP水平区间'/>
         <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
       <div>
         <div className={styles.rangeWrapper}>
-          <span className={styles.rangeWrapperMin}>{min}</span>
+          <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
           <Range
             range
             min={min}
             max={max}
             step={step}
-            value={currentValue}
-            onChange={handleChange}
+            // value={currentValue}
+            onEnd={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}
             className={styles.rangeHandle}
@@ -74,16 +77,10 @@ const NtrpRange: React.FC<RangeProps> = ({
             minDescription={null}
             currentDescription={null}
             marks={marks}
-            style={{ color: "gold" }}
           />
-          <span className={styles.rangeWrapperMax}>{max}</span>
+          <span className={styles.rangeWrapperMax}>{max.toFixed(1)}</span>
         </div>
       </div>
-
-      {/* 调试信息 */}
-      <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
-        当前值: {currentValue[0].toFixed(1)} - {currentValue[1].toFixed(1)}
-      </div>
     </div>
   );
 };

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

src/components/Title/index.module.scss

@@ -0,0 +1,11 @@
+.titleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 6px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}

src/components/Title/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./index.module.scss";
+interface IProps {
+  title: string;
+  className?: string;
+}
+const TitleComponent = (props: IProps) => {
+  const { title, className } = props;
+  return (
+    <>
+      <div
+        className={`${styles.titleContainer} ${className ? className : ""} `}
+      >
+        <div>图</div>
+        <h1 className={styles.title}>{title}</h1>
+      </div>
+    </>
+  );
+};
+export default TitleComponent;