update

src/app.tsx

@@ -3,12 +3,22 @@ import './app.scss'
 import './context/locales/index'
 import { Provider } from 'react-redux'
 import store from './store/store'
+import { View } from '@tarojs/components'
 
 // import 'taro-ui/dist/style/index.scss'
 
 
 const App: React.FC<PropsWithChildren> = ({ children }) => {
-  return <Provider store={store}>{children}</Provider>
+  // return <Provider store={store}>{children}</Provider>
+  return <View>
+    <Provider store={store}>
+      <View style={{ position: 'relative' }}>
+        {children}
+        <View style={{ position: 'absolute', left: 0, bottom: 0, width: 100, height: 100, backgroundColor: 'red',zIndex:10000 }}></View>
+      </View>
+    </Provider>
+
+  </View>
 }
 // class App extends Component<PropsWithChildren> {
 

src/components/Modal.scss

@@ -0,0 +1,12 @@
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+}

src/components/Modal.tsx

@@ -0,0 +1,11 @@
+import { View } from '@tarojs/components'
+import './Modal.scss'
+
+export default function Modal(props: { children: React.ReactNode }) {
+    return <View className='modal' catchMove>
+        <View style={{ flex: 1 }}></View>
+        {
+            props.children
+        }
+    </View>
+}

src/custom-tab-bar/index.scss

@@ -1,6 +1,11 @@
 
 .tabbar{
     display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 96px;
     flex-direction: row;
     justify-content: space-around;
     background-color: #000;

src/features/trackTimeDuration/components/Console.tsx

@@ -6,11 +6,11 @@ import { TimeFormatter } from "@/utils/time_format";
 import TimePickers from '@/components/TimePickers'
 import { useSelector } from "react-redux";
 import Taro from "@tarojs/taro";
-import { AtFloatLayout } from "taro-ui";
 import LimitPickers from '@/components/LimitPickers';
 import { endFast, endSleep, startFast, startSleep } from "../actions/TrackTimeActions";
 import { durationDatas, durationIndex, pickerDurations } from "../hooks/Console";
 import PickerViews from "@/components/PickerViews";
+import Modal from "@/components/Modal";
 
 export default function Component() {
     const [key, setKey] = useState('');
@@ -135,7 +135,7 @@ export default function Component() {
         var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
         if (current_record && current_record.last_real_check_time)
             limit = current_record.last_real_check_time
-        return <View>
+        return <View style={{backgroundColor:'#fff'}}>
             <LimitPickers limit={limit} onCancel={hidePicker} onChange={(e) => {
                 console.log(new Date(e))
                 pickerConfirm(e)
@@ -250,7 +250,7 @@ export default function Component() {
 
     
     function durationPickerContent() {
-        return <View style={{ color: '#000' }}>
+        return <View style={{ color: '#000',backgroundColor:'#fff' }}>
             <PickerViews onChange={durationChange} items={durationDatas(common)} value={isFast?fastPickerValue:sleepPickerValue} height={200} showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
         </View>
     }
@@ -298,8 +298,14 @@ export default function Component() {
                     key === 'SLEEP' && sleepBtns()
                 }
             </View>
-
             {
+                showModal && isOpen && <Modal children={layoutContent()}/>
+            }
+            {
+                isOpenDurationPicker && <Modal children={durationPickerContent()} />
+            }
+
+            {/* {
                 showModal && <AtFloatLayout
                     isOpened={isOpen}
                     onClose={() => {
@@ -321,7 +327,7 @@ export default function Component() {
                 {
                     durationPickerContent()
                 }
-            </AtFloatLayout>
+            </AtFloatLayout> */}
 
         </View>
     )

src/features/trackTimeDuration/components/More.tsx

@@ -8,6 +8,7 @@ import { recordCheck } from "@/services/trackTimeDuration";
 import { AtFloatLayout } from "taro-ui";
 import LimitPickers from "@/components/LimitPickers";
 import { endFast } from "../actions/TrackTimeActions";
+import Modal from "@/components/Modal";
 
 const Component = forwardRef((props, ref) => {
     const { t } = useTranslation()
@@ -108,7 +109,7 @@ const Component = forwardRef((props, ref) => {
         var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
         if (current_record && current_record.last_real_check_time)
             limit = current_record.last_real_check_time
-        return <View>
+        return <View style={{backgroundColor:'#fff'}}>
             <LimitPickers limit={limit} onCancel={() => { setIsOpen(false);setShowModal(false) }} onChange={(e) => {
                 console.log(new Date(e))
                 endFast(e)
@@ -121,6 +122,9 @@ const Component = forwardRef((props, ref) => {
         <View ref={ref} style={{ width: '100%', marginTop: 20, marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <Text onClick={checkActionSheetData}>More Component</Text>
             {
+                showModal && isOpen && <Modal children={layoutContent()} />
+            }
+            {/* {
                 showModal && <AtFloatLayout
                     isOpened={isOpen}
                     onClose={() => {
@@ -134,7 +138,7 @@ const Component = forwardRef((props, ref) => {
 
 
                 </AtFloatLayout>
-            }
+            } */}
 
         </View>
     )

src/features/trackTimeDuration/components/Schedule.tsx

@@ -3,9 +3,9 @@ import trackTimeService, { machine } from "@/store/trackTimeMachine"
 import { useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
 import { TimeFormatter } from "@/utils/time_format";
-import { AtFloatLayout } from 'taro-ui';
 import "taro-ui/dist/style/components/float-layout.scss";
 import { delRecord } from "@/services/trackTimeDuration";
+import Modal from "@/components/Modal";
 
 
 export default function Component(props: { type?: string, data?: any, delSuccess?: Function }) {
@@ -148,7 +148,8 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         if (props.type == 'record') {
             obj = props.data
         }
-        return <View style={{ flexDirection: 'column', display: 'flex', color: '#000' }}>
+        return <View style={{ flexDirection: 'column', display: 'flex', color: '#000',backgroundColor:'#fff',paddingTop:50,paddingBottom:50 ,position:'relative'}}>
+            <Text style={{position:'absolute',top:5,right:20}} onClick={()=>setIsOpen(false)}>关闭</Text>
             {
                 obj.status == 'WAIT_FOR_START' ? <Text>断食阶段目标</Text> :
                     obj.status == 'COMPLETED' ? <Text>断食阶段</Text> :
@@ -386,8 +387,14 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         {
             props.type != 'record' && props.type != 'latest' && key == 'FAST_SLEEP' && (value == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
         }
-
         {
+            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} />
+        }
+        {
+            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} />
+        }
+
+        {/* {
             key == 'FAST_SLEEP' && <AtFloatLayout
                 isOpened={isOpen}
                 onClose={() => {
@@ -404,7 +411,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
 
 
             </AtFloatLayout>
-        }
+        } */}
 
         {
             props.type == 'record' && <Text style={{ position: 'absolute', right: 20, top: 20 }} onClick={more}>More</Text>

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -10,10 +10,10 @@ import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Footer from "@/components/Footer";
 import PickerViews from "@/components/PickerViews";
-import { AtFloatLayout } from "taro-ui";
 import "taro-ui/dist/style/components/float-layout.scss";
 import { durationDatas, durationIndex, durationTime, pickerDurations } from "../hooks/Console";
 import { TimeFormatter } from "@/utils/time_format";
+import Modal from "@/components/Modal";
 
 export default function Component() {
   const isFastFirst = false;
@@ -112,7 +112,7 @@ export default function Component() {
           dispatch(setScenario(obj))
         }
 
-        saveTempCache(startTime,endTime)
+        saveTempCache(startTime, endTime)
 
         Taro.navigateTo({
           url: '/pages/SetSchedule'
@@ -167,7 +167,7 @@ export default function Component() {
     setPickerValue(durationIndex(e, endTime, common))
     setHours(durationTime(e, endTime)[0])
     setMinutes(durationTime(e, endTime)[1])
-    saveTempCache(e,endTime)
+    saveTempCache(e, endTime)
   }
 
   function onEndTimeChange(e: string) {
@@ -177,7 +177,7 @@ export default function Component() {
     setPickerValue(durationIndex(startTime, e, common))
     setHours(durationTime(startTime, e)[0])
     setMinutes(durationTime(startTime, e)[1])
-    saveTempCache(startTime,e)
+    saveTempCache(startTime, e)
   }
 
 
@@ -206,7 +206,7 @@ export default function Component() {
   }
 
   function layoutContent() {
-    return <View style={{ color: '#000' }}>
+    return <View style={{ color: '#000',backgroundColor:'#fff' }}>
       <PickerViews onChange={durationChange} items={durationDatas(common)} value={pickerValue} height={200} showBtns={true} onCancel={() => { setIsOpen(false) }} />
     </View>
   }
@@ -232,8 +232,12 @@ export default function Component() {
     <Footer child={
       <Buttons title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} style={{ backgroundColor: scenario.step == 'fast' ? '#AAFF00' : '#00ffff', width: 320 }} onClick={() => start()}></Buttons>
     } />
+    {
+      isOpen && <Modal children={layoutContent()} />
+    }
+    
 
-    <AtFloatLayout
+    {/* <AtFloatLayout
       isOpened={isOpen}
       onClose={() => {
         setIsOpen(false)
@@ -241,7 +245,7 @@ export default function Component() {
       {
         layoutContent()
       }
-    </AtFloatLayout>
+    </AtFloatLayout> */}
 
   </View>;
 }

src/pages/Clock.scss

@@ -8,4 +8,18 @@
     color: #fff;
     background-color: #1c1c1c;
     border-radius: 40px;
+  }
+
+  .popDemo{
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba($color: #000000, $alpha: 0.5);
   }

src/pages/clock.tsx

@@ -288,6 +288,7 @@ export default function IndexPage() {
         <Text style="color: #fff;">test picker</Text>
       </Picker> */}
       <View style={{ height: 100 }} />
+      {/* <View className='popDemo' catchMove/> */}
     </View>
   )
 }