发布球局

src/components/NumberInterval/NumberInterval.scss

@@ -0,0 +1,111 @@
+@use '~@/scss/themeColor.scss' as theme;
+// 人数控制区域 - 白色块
+.participants-control-section {
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  padding: 9px 12px;
+  display: flex;
+  justify-content: space-between;
+  height: 48px;
+  box-sizing: border-box;
+    .participant-control {
+      display: flex;
+      align-items: center;
+      position: relative;
+      &:first-child{
+        width: 50%;
+        &::after{
+          content: '';
+          display: block;
+          width: 1px;
+          height: 16px;
+          background: #E5E5E5;
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+      .control-label {
+        font-size: 13px;
+        color: theme.$primary-color;
+        white-space: nowrap;
+        padding-right: 10px;
+      }
+
+      .control-buttons {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        background-color: theme.$primary-background-color;
+        border-radius: 6px;
+        .format-width{
+          .nut-input-minus{
+            width: 33px;
+            position: relative;
+            &::after{
+              content: '';
+              width: 1px;
+              height: 16px;
+              background-color: theme.$primary-background-color;
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+          .nut-number-input{
+            min-width: 33px;
+            background-color: transparent;
+            font-size: 12px;
+            
+          }
+          .nut-input-add{
+            width: 33px;
+            position: relative;
+            &::before{
+              content: '';
+              width: 1px;
+              height: 16px;
+              background-color: theme.$primary-background-color;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+        }
+        .control-btn {
+          width: 32px;
+          height: 32px;
+          border: 1px solid #ddd;
+          background: white;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+          color: #333;
+          margin: 0;
+          padding: 0;
+
+          &.minus {
+            margin-right: 12px;
+          }
+
+          &.plus {
+            margin-left: 12px;
+          }
+        }
+
+        .control-value {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          min-width: 36px;
+          text-align: center;
+        }
+      }
+    }
+} 

src/components/NumberInterval/NumberInterval.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import './NumberInterval.scss'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+interface NumberIntervalProps {
+  minParticipants: number
+  maxParticipants: number
+  onMinParticipantsChange: (value: number) => void
+  onMaxParticipantsChange: (value: number) => void
+}
+
+const NumberInterval: React.FC<NumberIntervalProps> = ({
+  minParticipants,
+  maxParticipants,
+  onMinParticipantsChange,
+  onMaxParticipantsChange
+}) => {
+  return (
+    <View className='participants-control-section'>
+      <View className='participant-control'>
+        <Text className='control-label'>最少</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+      <View className='participant-control'>
+        <Text className='control-label'>最多</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default NumberInterval 

src/components/NumberInterval/index.ts

@@ -0,0 +1 @@
+export { default } from './NumberInterval'