修改提交

src/components/FormSwitch/FormSwitch.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Checkbox, Popover } from '@nutui/nutui-react-taro'
+import { Checkbox } from '@nutui/nutui-react-taro'
 import { Image } from '@tarojs/components'
 import images from '@/config/images'
 import './index.scss'
@@ -15,37 +15,42 @@ interface FormSwitchProps {
 }
 
 const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, infoIcon, showToast = false, description}) => {
-  const [dark, setDark] = useState(false)
+  const [showTip, setShowTip] = useState(false)
+
+  const toggleTip = () => {
+    setShowTip((prev) => !prev)
+  }
+
   return (
-    <View className='auto-degrade-section'>
-      <View className='auto-degrade-item'>
-        <View className='auto-degrade-content'>
-          <Text className='auto-degrade-text'>{subTitle}</Text>
-          {
-            showToast && <Popover
-            visible={dark}
-            list={[{
-              key: 'key1',
-              name: description || '',
-            }]}
-            theme="dark"
-            location="bottom-start"
-            style={{ marginInlineEnd: '30px' }}
-            onClick={() => {
-              dark ? setDark(false) : setDark(true)
-            }}
-          >
-            <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} className='info-img' /></View>
-          </Popover>
-          }
+    <>
+      {showTip && <View className='info-popover-mask' onClick={() => setShowTip(false)} />}
+      <View className='auto-degrade-section'>
+        <View className='auto-degrade-item'>
+          <View className='auto-degrade-content'>
+            <Text className='auto-degrade-text'>{subTitle}</Text>
+            {
+              showToast && (
+                <View className='info-icon' onClick={toggleTip}>
+                  <Image src={infoIcon || images.ICON_TIPS} className='info-img' />
+                  {
+                    showTip && (
+                      <View className='info-popover'>
+                        <Text>{description || ''}</Text>
+                      </View>
+                    )
+                  }
+                </View>
+              )
+            }
+          </View>
+          <Checkbox 
+            className='auto-degrade-checkbox nut-checkbox-black'
+            checked={value}
+            onChange={onChange}
+          />
         </View>
-        <Checkbox 
-          className='auto-degrade-checkbox nut-checkbox-black'
-          checked={value}
-          onChange={onChange}
-        />
       </View>
-    </View>
+    </>
   )
 }
 

src/components/FormSwitch/index.scss

@@ -13,10 +13,9 @@
     .auto-degrade-content {
       display: flex;
       align-items: center;
-      gap: 8px;
       
       .auto-degrade-text {
-        font-size: 16px;
+        font-size: 14px;
         color: #333;
         font-weight: 500;
       }
@@ -26,10 +25,28 @@
         align-items: center;
         justify-content: center;
         padding-left: 4px;
+        position: relative;
         .info-img{
           width: 12px;
           height: 12px;
         }
+        .info-popover {
+          position: absolute;
+          top: 22px;
+          left: 0;
+          width: 50%;
+          padding: 8px 10px;
+          background: rgba(0, 0, 0, 0.85);
+          color: #fff;
+          border-radius: 6px;
+          font-size: 12px;
+          line-height: 1.6;
+          z-index: 1001;
+          white-space: normal;
+          word-break: normal;
+          overflow-wrap: break-word;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        }
       }
     }
     
@@ -40,4 +57,14 @@
       }
     }
   }
+}
+
+.info-popover-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 1000;
 } 

src/components/Range/index.tsx

@@ -66,7 +66,7 @@ const NtrpRange: React.FC<RangeProps> = ({
       
 
       <div>
-        <div className={styles.rangeWrapper}>
+        <div className={`${styles.rangeWrapper} rangeContent`}>
           <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
           <Range
             range