面料详情

2022-04-12 16:50:05 +08:00
parent dc0129402c
commit 4fa9223f6f
4 changed files with 163 additions and 76 deletions
@@ -0,0 +1,34 @@
+
+.main{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .reduce, .plus{
+        font-size: $font_size_big;
+        color: $color_main;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content:center;
+        font-size: 50px;
+        // flex:1;
+    }
+    .input{
+        display: flex;
+        align-items: flex-end;
+        background-color: #fff;
+        padding: 5px 10px;
+        box-sizing: border-box;
+        width: 106px;
+    }
+    input{
+        font-size: $font_size_medium;
+    }
+    .unit{
+        font-size: $font_size_min;
+        color: $color_font_two;
+    }   
+    
+}
@@ -0,0 +1,36 @@
+import { Input, View } from "@tarojs/components"
+import { useRef, useState } from "react"
+import styles from "./index.module.scss"
+type params = {
+    minNum?: number,
+    maxNum?: number,
+    step?: number
+}
+export default ({minNum = 0, maxNum = 100, step=0.1}: params) => {
+    const [count, setCount] = useState(0)
+
+    const onPlus = () => {
+        let num = count + step
+        num = num >= maxNum?maxNum:num
+        setCount(num)
+    }
+    const minus = () => {
+        let num = count - step
+        num = num <= minNum?minNum:num
+        setCount(num)
+    }
+    return (
+        <View className={styles.main}>
+            <View className={styles.reduce} onClick={() => minus()}>-</View>
+            <View className={styles.input}>
+                <Input 
+                    value={String(count)}
+                    onInput={() => {}}
+                    onBlur={() => {}}
+                />
+                <View className={styles.unit}>米</View>
+            </View>
+            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+        </View>
+    )
+}