update

src/context/themes/color.tsx

@@ -1,5 +1,5 @@
 export enum ColorType {
-    fast = '#00ffff',//'#aaff00',
+    fast = '#00c8ff',//'#00ffff',//'#aaff00',
     sleep = '#8961F5',//'#00ffff'
     box = '#1c1c1c',
     ring = '#76767625',//'#1c1c1c',

src/features/trackSomething/components/DayNightCard.scss

@@ -33,4 +33,16 @@
     border-top-style: solid;
     border-top-color: #D8D8D852;
     border-top-width: 1px;
+}
+
+.day_night_value{
+    font-size: 36px;
+    font-weight: bold;
+    left: 0;
+}
+
+.day_night_desc{
+    font-size: 20px;
+    color: #fff;
+    opacity: 0.6;
 }

src/features/trackSomething/components/DayNightCard.tsx

@@ -4,7 +4,7 @@ import { ColorType } from '@/context/themes/color'
 import { useEffect, useState } from 'react'
 import Box from '@/components/layout/Box'
 import Taro, { useDidShow } from '@tarojs/taro'
-import { clearLocation, getPerm, uploadPerm } from '@/services/user'
+import { clearLocation, getPerm, latestLocation, uploadPerm } from '@/services/user'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { TimeFormatter } from '@/utils/time_format'
@@ -40,6 +40,8 @@ export default function DayNightCard(props: { isNight: boolean, switchChanged: F
                 setExpand(props.isNight ? (res as any).show_night_ring : (res as any).show_day_ring)
             })
 
+            latestLocation().then(data => {})
+
         }
         getContent()
     }, [user.isLogin])
@@ -142,7 +144,7 @@ export default function DayNightCard(props: { isNight: boolean, switchChanged: F
             success: function (res) {
                 console.log(res)
                 var today = new Date()
-                var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000)
+                var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000*3)
                 var strToday = `${today.getFullYear()}-${TimeFormatter.padZero(today.getMonth() + 1)}-${TimeFormatter.padZero(today.getDate())}`
                 var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
 
@@ -547,17 +549,17 @@ export default function DayNightCard(props: { isNight: boolean, switchChanged: F
                 {
                     expand && <View>
                         <View style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Text style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? `Today ${sunsetTime} - Tomorrow ${sunriseTmrTime}` : `${sunriseTime} - ${sunsetTime}`}</Text>
-                            <Text>{props.isNight ? 'Sunset to Sunrise' : 'Sunrise to Sunset'}</Text>
-                            <View style={{ display: 'flex', flexDirection: 'row' }}>
+                            <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? `Today ${sunsetTime} - Tomorrow ${sunriseTmrTime}` : `${sunriseTime} - ${sunsetTime}`}</Text>
+                            <Text className='day_night_desc'>{props.isNight ? 'Sunset to Sunrise' : 'Sunrise to Sunset'}</Text>
+                            <View style={{ display: 'flex', flexDirection: 'row',marginTop:rpxToPx(32) }}>
                                 <View style={{ display: 'flex', flexDirection: 'column', width: rpxToPx(300) }}>
-                                    <Text style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{timeCount()}</Text>
-                                    <Text>{timeDesc()}</Text>
+                                    <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{timeCount()}</Text>
+                                    <Text className='day_night_desc'>{timeDesc()}</Text>
                                 </View>
                                 {
                                     showExtraData() && <View style={{ display: 'flex', flexDirection: 'column', width: rpxToPx(300) }}>
-                                        <Text style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{timeCount2()}</Text>
-                                        <Text>{timeDesc2()}</Text>
+                                        <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day,opacity:0.6 }}>{timeCount2()}</Text>
+                                        <Text className='day_night_desc'>{timeDesc2()}</Text>
                                     </View>
                                 }
                             </View>

src/features/trackTimeDuration/components/CircadianDetailPopup.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import TimelineFastSleep from './TimelineFastSleep'
 import { RealRing } from "@/features/trackTimeDuration/components/Rings";
 import Rings from "./Rings";
-import { getBgRing, getCommon } from '../hooks/RingData';
+import { bigRingRadius, getBgRing, getCommon, ringWidth } from '../hooks/RingData';
 import { ColorType } from '@/context/themes/color';
 import { useTranslation } from 'react-i18next';
 import { TimeFormatter } from '@/utils/time_format';
@@ -172,8 +172,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
     function completedOverView() {
         var bgRing = getBgRing()
         var common = getCommon(null, false)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
 
         var fastRing: RealRing = null
         if (props.record.fast) {
@@ -441,8 +441,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
     function stage() {
         var bgRing = getBgRing()
         var common = getCommon(null, false)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
 
         const preRing: RealRing = {
             color: global.fastColor ? global.fastColor : ColorType.fast,

src/features/trackTimeDuration/components/Discovery.tsx

@@ -1,5 +1,5 @@
 import { View, Text, Image, Switch } from "@tarojs/components";
-import { dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget } from "@/features/trackTimeDuration/hooks/RingData";
+import { bigRingRadius, dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import { ColorType } from "@/context/themes/color";
 import { useSelector } from "react-redux";
@@ -75,6 +75,10 @@ export default function Discovery() {
                 obj = item
             }
         })
+        if (!obj){
+            console.log('报错',schedule)
+            return null;
+        }
         return [obj.schedule.fast.end_time, obj.schedule.fast.start_time]
     }
 
@@ -90,8 +94,8 @@ export default function Discovery() {
 
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         const targetRing: RealRing = {
             color: ColorType.food + '66',
@@ -135,8 +139,8 @@ export default function Discovery() {
     }
     function smallRing() {
         var common = getCommon(null, false)
-        common.radius = 28;
-        common.lineWidth = 9;
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         const realRingBig: RealRing = {
             color: ColorType.activity + '66',
@@ -178,8 +182,8 @@ export default function Discovery() {
     }
     function dayRing() {
         var common = getCommon(null, true)
-        common.radius = 56;
-        common.lineWidth = 9;
+        common.radius = thirdRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         const realRingBig: RealRing = {
@@ -216,8 +220,8 @@ export default function Discovery() {
         var now = new Date()
         var t = now.getHours() * 60 + now.getMinutes()
         var duration2 = t - sunRise
-        if (duration2<0){
-            duration2+=24*60
+        if (duration2 < 0) {
+            duration2 += 24 * 60
         }
         const realRing: RealRing = {
             color: ColorType.day,
@@ -285,7 +289,10 @@ export default function Discovery() {
     }
 
     function rings() {
-        return <View style={{ position: 'relative', zIndex: 1 }}>
+        return <View style={{
+            position: 'relative', zIndex: 1,
+            marginLeft: showRing ? -6 : 0,
+        }}>
             {
                 bigRing()
             }
@@ -308,12 +315,23 @@ export default function Discovery() {
     }
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <Box>
-            <View>
-                <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(60), alignItems: 'center' }}>
+            <View style={{
+                marginLeft: rpxToPx(-40),
+                marginRight: rpxToPx(-40),
+                marginTop: rpxToPx(-40),
+                padding: rpxToPx(48),
+            }}>
+                <View style={{
+                    display: 'flex', flexDirection: 'row', 
+                    marginTop: showRing ? -6 : 0,
+                    marginBottom: showRing ? -6 : 0,
+                    padding: showRing ? 14 : 0,
+                    alignItems: 'center'
+                }}>
                     {
                         schedule && rings()
                     }
-                    {schedule && <View className="duration_bg">
+                    {schedule && <View className="duration_bg" style={{ marginLeft: showRing ? rpxToPx(68) : rpxToPx(52) }}>
                         {
                             showRing && <Text className="duration_title">{t('feature.common.day')}</Text>
                         }

src/features/trackTimeDuration/components/IndexConsole.scss

@@ -1,8 +1,8 @@
 @import '@/utils/common.scss';
 
 .console_btn {
-    height: 84px;
-    border-radius: 42px;
+    height: 88px;
+    border-radius: 44px;
     position: relative;
     background-color: $fastColor;
     // margin-left: 46px;
@@ -15,17 +15,18 @@
 }
 
 .btn_line {
-    height: 36px;
+    height: 32px;
     width: 1px;
     background-color: #fff;
     opacity: 0.4;
     margin-left: 68px;
     flex-shrink: 0;
+    opacity: 0;
 }
 
 .stage_btn {
-    height: 84px;
-    border-radius: 42px;
+    height: 88px;
+    border-radius: 44px;
     position: relative;
     // margin-left: 46px;
     // margin-right: 46px;
@@ -66,8 +67,11 @@
     width: 100%;
     text-align: center;
     display: flex;
+    font-size: 28px;
+    line-height: 48px;
+    font-weight: bold;
     // margin-top: 36px;
-    margin-top: 20px;
+    margin-top: 16px;
     align-items: center;
     justify-content: center;
 }

src/features/trackTimeDuration/components/IndexConsole.tsx

@@ -45,7 +45,10 @@ export default function IndexConsole(props: { record: any }) {
             setSleepDuration(sleepCount)
         }
 
-
+        debugger
+        if (props.record.current_record.status=='WAIT_FOR_START'){
+            setExpand(false)
+        }
 
     }, [props.record])
 
@@ -80,7 +83,7 @@ export default function IndexConsole(props: { record: any }) {
             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
             return
         }
-        if (status != 'ONGOING2' && status!='ONGOING') {
+        if (status != 'ONGOING2' && status != 'ONGOING') {
             vibrate()
             return;
         }
@@ -191,43 +194,49 @@ export default function IndexConsole(props: { record: any }) {
 
 
     if (props.record.scenario.name == 'FAST') {
-        return <View style={{ marginTop: rpxToPx(40) }}>
+        return <View style={{ marginTop: rpxToPx(0) }}>
             {
                 status == 'WAIT_FOR_START' &&
                 <View onClick={tapStartFast} className='console_btn'>
                     <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.start_fast')}</Text>
                 </View>
             }
+            {/* {
+                status != 'WAIT_FOR_START' && <View className='btn_line' />
+            } */}
             {
-                status == 'WAIT_FOR_START' && <View className='btn_line' />
+                status == 'ONGOING' && <View onClick={tapEndFast} className={status == 'ONGOING' ? 'console_btn' : 'console_btn btn_disable'}>
+                    <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.end_fast')}</Text>
+                </View>
             }
-            <View onClick={tapEndFast} className={status == 'ONGOING' ? 'console_btn' : 'console_btn btn_disable'}>
-                <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.end_fast')}</Text>
-            </View>
+
         </View>
     }
     else if (props.record.scenario.name == 'SLEEP') {
-        return <View style={{ marginTop: rpxToPx(40) }}>
+        return <View style={{ marginTop: rpxToPx(0) }}>
             {
                 status == 'WAIT_FOR_START' &&
                 <View onClick={tapStartSleep} className='console_btn btn_sleep'>
                     <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.start_sleep')}</Text>
                 </View>
             }
+            {/* {
+                status != 'WAIT_FOR_START' && <View className='btn_line' />
+            } */}
             {
-                status == 'WAIT_FOR_START' && <View className='btn_line' />
+                status == 'ONGOING' && <View onClick={tapEndSleep} className={status == 'ONGOING' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
+                    <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.end_sleep')}</Text>
+                </View>
             }
-            <View onClick={tapEndSleep} className={status == 'ONGOING' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
-                <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.end_sleep')}</Text>
-            </View>
+
         </View>
     }
 
-    return <View style={{ marginTop: rpxToPx(40) }}>
+    return <View style={{ marginTop: rpxToPx(0) }}>
         {
             status == 'WAIT_FOR_START' ?
                 <View onClick={tapStartFast} className='console_btn'>
-                    <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.start_fast')}</Text>
+                    <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32) }}>{t('feature.track_time_duration.common.start_fast')}</Text>
                 </View> :
                 <View onClick={() => { vibrate() }} className='stage_btn'>
                     <Text style={{ flex: 1 }}>睡前断食</Text>

src/features/trackTimeDuration/components/IndexItem.scss

@@ -1,7 +1,7 @@
 @import '@/utils/common.scss';
 .time_operate_item1{
     // padding-top: 40px;
-    padding-bottom: 40px;
+    // padding-bottom: 40px;
     // margin-left: 46px;
     // margin-right: 46px;
     display: flex;
@@ -39,6 +39,8 @@
     margin-left: 50px;
     display: flex;
     flex-direction: column;
+    // align-items: center;
+    justify-content: center;
     flex: 1;
 }
 
@@ -55,12 +57,12 @@
     font-size: 36px;
     line-height: 36px;
     font-weight: 500;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
 }
 
 .arrow2 {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     opacity: 0.2;
 }
 

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -1,5 +1,5 @@
 import { View, Text, Image, PageContainer } from "@tarojs/components";
-import { dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, timeTotimestamp } from "../hooks/RingData";
+import { bigRingRadius, dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius, timeTotimestamp } from "../hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import Rings from "./Rings";
 import './IndexItem.scss'
@@ -14,6 +14,7 @@ import Modal from "@/components/layout/Modal.weapp";
 import { ModalType } from "@/utils/types";
 import TimelineStage from "./TimelineStage";
 import CircadianDetailPopup from "@/features/trackTimeDuration/components/CircadianDetailPopup";
+import { rpxToPx } from "@/utils/tools";
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -64,8 +65,8 @@ export default function Component(props: { type: string, data: any, time: any, s
 
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         var currentDot1 = getDot(record, true)
@@ -135,8 +136,8 @@ export default function Component(props: { type: string, data: any, time: any, s
     function smallRing() {
 
         var common = getCommon(null, false)
-        common.radius = 28;
-        common.lineWidth = 9;
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing = getReal(record, false, false)
         if (props.type == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') {
@@ -152,6 +153,7 @@ export default function Component(props: { type: string, data: any, time: any, s
             }
             else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                 realRing = getSchedule(props.data.scenario, false, true, true)//getSchedule(record, false, true)
+
                 realRing.color = ColorType.sleep + '66'
 
                 var currentDot = getDot(record, false)
@@ -196,8 +198,8 @@ export default function Component(props: { type: string, data: any, time: any, s
 
     function dayRing() {
         var common = getCommon(null, true)
-        common.radius = 56;
-        common.lineWidth = 9;
+        common.radius = thirdRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         const realRingBig: RealRing = {
@@ -241,7 +243,10 @@ export default function Component(props: { type: string, data: any, time: any, s
     }
 
     function rings() {
-        return <View style={{ position: 'relative', zIndex: 1 }}>
+        return <View style={{
+            position: 'relative', zIndex: 1,
+            marginLeft: !props.showStage && global.showNightRing === true ? -6 : 0,
+        }}>
             {
                 bigRing()
             }
@@ -417,44 +422,56 @@ export default function Component(props: { type: string, data: any, time: any, s
         }
     }
 
-    return <View className="time_operate_item1" onClick={goDetail}>
-        <View className="fast_sleep_item">
-            {
-                rings()
-            }
-            <View className="duration_bg">
-                {
-                    !props.showStage && global.showNightRing === true &&
-                    <Text className="duration_title">{t('feature.common.overnight')}</Text>
-                }
-                {
-                    !props.showStage && global.showNightRing === true &&
-                    <Text className="duration_value" style={{ color: ColorType.night }}>{nightDuration()}</Text>
-                }
-                {
-                    (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
-                }
-                {
-                    (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration()}</Text>
-                }
-                {
-                    (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title" >{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
-                }
+    return <View style={{
+        marginLeft: rpxToPx(-40),
+        marginRight: rpxToPx(-40),
+        marginTop: rpxToPx(-40),
+        padding: rpxToPx(48), 
+        // backgroundColor:'pink'
+    }}>
+        <View className="time_operate_item1" onClick={goDetail}>
+            <View className="fast_sleep_item" style={{ marginTop: !props.showStage && global.showNightRing === true ? -6 : 0,
+            marginBottom: !props.showStage && global.showNightRing === true ? -6 : 0,
+            padding:!props.showStage && global.showNightRing === true ? 14 : 0,
+            paddingRight:0
+            }}>
                 {
-                    (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration()}</Text>
+                    rings()
                 }
-            </View>
-            <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
-            {/* {
+                <View className="duration_bg" style={{ marginLeft: !props.showStage && global.showNightRing === true ? rpxToPx(68) : rpxToPx(52),height: bigRingRadius*2,overflow:'visible'}}>
+                    {
+                        !props.showStage && global.showNightRing === true &&
+                        <Text className="duration_title">{t('feature.common.overnight')}</Text>
+                    }
+                    {
+                        !props.showStage && global.showNightRing === true &&
+                        <Text className="duration_value" style={{ color: ColorType.night }}>{nightDuration()}</Text>
+                    }
+                    {
+                        (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
+                    }
+                    {
+                        (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration()}</Text>
+                    }
+                    {
+                        (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title" >{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
+                    }
+                    {
+                        (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, marginBottom: 0 }}>{sleepDuration()}</Text>
+                    }
+                </View>
+                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
+                {/* {
                 !props.showStage && <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                     <View style={{ flex: 1 }} />
                     
                 </View>} */}
 
 
+            </View>
+            {
+                showDetailModal && modalContent()
+            }
         </View>
-        {
-            showDetailModal && modalContent()
-        }
     </View>
 }

src/features/trackTimeDuration/components/IndexItem的副本.tsx

@@ -1,5 +1,5 @@
 import { View, Text, Image } from "@tarojs/components";
-import { dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget } from "../hooks/RingData";
+import { bigRingRadius, dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius } from "../hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import Rings from "./Rings";
 import './IndexItem.scss'
@@ -54,8 +54,8 @@ export default function Component(props: { type: string, data: any, time: any })
 
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         if (props.type == 'SLEEP') {
@@ -140,8 +140,8 @@ export default function Component(props: { type: string, data: any, time: any })
     function smallRing() {
         if (record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
-            common.radius = 28;
-            common.lineWidth = 9;
+            common.radius = smallRingRadius;
+            common.lineWidth = ringWidth;
             var bgRing = getBgRing()
             var realRing = getReal(record, false, false)
             if (props.type == 'SLEEP' || props.type == 'FAST_SLEEP') {
@@ -196,8 +196,8 @@ export default function Component(props: { type: string, data: any, time: any })
 
     function dayRing() {
         var common = getCommon(null, true)
-        common.radius = 56;
-        common.lineWidth = 9;
+        common.radius = thirdRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         const realRingBig: RealRing = {

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState, memo } from "react";
 import TimelineFastSleep from "./TimelineFastSleep";
 import { TimeFormatter } from "@/utils/time_format";
 import './RecordFastSleep.scss'
-import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
+import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getTarget, ringWidth, smallRingRadius } from "../hooks/RingData";
 import Rings from "./Rings";
 import Segment from "@/components/navigation/Segment";
 import Stage from "./Stage";
@@ -219,8 +219,8 @@ const RecordFastSleep = memo((props: { data: any, type: string, index: number })
 
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         if (props.type == 'record' || props.type == 'latest') {
@@ -248,8 +248,8 @@ const RecordFastSleep = memo((props: { data: any, type: string, index: number })
 
     function bigMoreRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing = getReal(record, true, true)
         realRing.color = ColorType.fast + '66'
@@ -295,8 +295,8 @@ const RecordFastSleep = memo((props: { data: any, type: string, index: number })
     function smallRing() {
         if (record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
-            common.radius = 28;
-            common.lineWidth = 9;
+            common.radius = smallRingRadius;
+            common.lineWidth = ringWidth;
             var bgRing = getBgRing()
             var realRing = getReal(record, false, false)
             if (props.type == 'record' || props.type == 'latest') {
@@ -424,8 +424,8 @@ const RecordFastSleep = memo((props: { data: any, type: string, index: number })
 
     function moreStage() {
         var common = getCommon(null, false)
-        common.radius = 28;
-        common.lineWidth = 9;
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing = getReal(record, false, true)
         return <View style={{ zIndex: 10000 }}>

src/features/trackTimeDuration/components/RecordFastSleep的副本.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import TimelineFastSleep from "./TimelineFastSleep";
 import { TimeFormatter } from "@/utils/time_format";
 import './RecordFastSleep.scss'
-import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
+import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getTarget, ringWidth, smallRingRadius } from "../hooks/RingData";
 import Rings from "./Rings";
 import Segment from "@/components/navigation/Segment";
 import Stage from "./Stage";
@@ -163,8 +163,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
 
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
 
         if (props.type == 'record' || props.type == 'latest') {
@@ -193,8 +193,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
     function smallRing() {
         if (record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
-            common.radius = 28;
-            common.lineWidth = 9;
+            common.radius = smallRingRadius;
+            common.lineWidth = ringWidth;
             var bgRing = getBgRing()
             var realRing = getReal(record, false, false)
             if (props.type == 'record' || props.type == 'latest') {

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -156,11 +156,11 @@ export default function Rings(props: {
 
     function drawContent(ctx){
         if (props.canvas){
-            props.canvas.width = ((radius * 2 + lineWidth)+6) * dpr;
-            props.canvas.height = ((radius * 2 + lineWidth)+6) * dpr;
+            props.canvas.width = ((radius * 2 + lineWidth)) * dpr;
+            props.canvas.height = ((radius * 2 + lineWidth)) * dpr;
         }
         
-        const center = radius + lineWidth / 2+3; // 圆心坐标
+        const center = radius + lineWidth / 2; // 圆心坐标
         ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
 
         // 设置画布尺寸
@@ -224,7 +224,7 @@ export default function Rings(props: {
                 dotLineWidth = 4
                 
             }
-            ctx.arc(xPrime, yPrime, lineWidth/2.0+dotLineWidth/2.0, 0, 2 * Math.PI);
+            ctx.arc(xPrime, yPrime, lineWidth/2.0+dotLineWidth/2, 0, 2 * Math.PI);
             ctx.lineWidth = dotLineWidth;
             ctx.strokeStyle = '#1C1C1C';
             ctx.lineCap = 'round'; // 设置为圆角
@@ -282,7 +282,7 @@ export default function Rings(props: {
         }
     }
 
-    return <Canvas canvasId={canvasId}  id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth)+6, height: (radius * 2 + lineWidth)+6, zIndex: 0 }} ref={canvasRef} />
+    return <Canvas canvasId={canvasId}  id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
 
 }
 

src/features/trackTimeDuration/components/StageSelector.scss

@@ -0,0 +1,50 @@
+@import '@/utils/common.scss';
+
+.single_check_nor1{
+    margin-bottom: 32px;
+    height: 88px;
+    border-radius: 44px;
+    border: solid 4px $fastColor;
+    box-sizing: border-box;
+    // margin-left: 46px;
+    // margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 44px;
+    padding-right: 44px;
+}
+
+.single_check_sel1{
+    margin-bottom: 32px;
+    height: 88px;
+    border-radius: 44px;
+    background-color: $fastColor;
+    // margin-left: 46px;
+    // margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 44px;
+    padding-right: 44px;
+    box-sizing: border-box;
+}
+
+.single_check_text_nor{
+    color: $fastColor;
+    font-weight: bold;
+    font-size: 32px;
+    flex: 1;
+}
+
+.single_check_text_sel{
+    color: #000;
+    font-weight: bold;
+    font-size: 32px;
+    flex: 1;
+}
+
+.single_checked{
+    width: 48px;
+    height: 48px;
+}

src/features/trackTimeDuration/components/StageSelector.tsx

@@ -0,0 +1,85 @@
+import { IconPlus } from "@/components/basic/Icons";
+import { ColorType } from "@/context/themes/color";
+import { View, Text, Image, Switch } from "@tarojs/components";
+import { useState } from "react";
+import './StageSelector.scss'
+import { rpxToPx } from "@/utils/tools";
+
+
+export default function () {
+    const [isMulti, setIsMulti] = useState(false)
+    const [selIndex, setSelIndex] = useState(0)
+
+    const [multiData, setMultiData] = useState([
+        {
+            title: '睡前断食',
+            checked: false
+        },
+        {
+            title: '睡眠中断食',
+            checked: false
+        },
+        {
+            title: '起床后断食',
+            checked: false
+        },
+    ])
+
+
+    return <View>
+        {
+            isMulti ? <View>
+                {
+                    multiData.map((item, index) => {
+                        return <View className={item.checked ? "single_check_sel1" : "single_check_nor1"} onClick={() => {
+                            item.checked = !item.checked
+                            global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
+                            setMultiData(JSON.parse(JSON.stringify(multiData)))
+                            // setCount((prevCounter) => prevCounter + 1)
+                        }}>
+                            <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
+                            {
+                                item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
+                                    <IconPlus color={ColorType.fast} />
+                            }
+                        </View>
+                    })
+                }
+            </View> : <View>
+
+                <View className={selIndex == 0 ? "single_check_sel1" : "single_check_nor1"} onClick={() => { setSelIndex(0); global.updateMixItem([true, false, false]); }}>
+                    <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
+                    {
+                        selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+                <View className={selIndex == 1 ? "single_check_sel1" : "single_check_nor1"} onClick={() => { setSelIndex(1); global.updateMixItem([false, true, false]); }}>
+                    <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
+                    {
+                        selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+                <View className={selIndex == 2 ? "single_check_sel1" : "single_check_nor1"} onClick={() => { setSelIndex(2); global.updateMixItem([false, false, true]); }}>
+                    <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
+                    {
+                        selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+            </View>
+        }
+        <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', width: '100%', boxSizing: 'border-box' }}>
+            <View style={{ flex: 1 }} />
+            <Text style={{ marginRight: 10 }}>多选</Text>
+            <Switch color={ColorType.fast} onChange={(e) => {
+                setIsMulti(e.detail.value)
+                if (e.detail.value) {
+                    global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
+                }
+                else {
+                    global.updateMixItem([selIndex == 0, selIndex == 1, selIndex == 2])
+                }
+                // setCount((prevCounter) => prevCounter + 1)
+            }} />
+        </View>
+    </View>
+}

src/features/trackTimeDuration/components/WeekCalendar.scss

@@ -8,18 +8,19 @@
 .calendar_summary_item {
     display: flex;
     flex-direction: column;
-    width: 300px;
+    // width: 300px;
+    margin-right: 80px;
 }
 
 .calendar_summary_title {
-    font-size: 28px;
-    line-height: 28px;
+    font-size: 32px;
+    line-height: 32px;
     color: #fff;
     opacity: 0.6;
 }
 
 .calendar_summary_value {
-    margin-top: 6px;
+    margin-top: 2px;
     font-size: 36px;
     line-height: 36px;
     font-weight: bold;
@@ -32,6 +33,7 @@
     margin-left: 46px;
     color: #fff;
     opacity: 0.4;
+    margin-bottom: 16px;
 }
 
 .chart_bg {
@@ -59,18 +61,20 @@
     right: 46px;
     top: 60px;
     bottom: 60px;
-    border-radius: 16px;
+    border-radius:0;
     background: linear-gradient(180deg, #1C1C1C, #000000,#1C1C1C);
 }
 
 
 .chart_times {
-    width: 46px;
+    // width: 46px;
+    margin-left: 2px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    margin-top: 60px;
-    margin-bottom: 60px;
+    position: relative;
+    // margin-top: 60px;
+    // margin-bottom: 60px;
 }
 
 .chart_times_txt {
@@ -78,4 +82,5 @@
     line-height: 16px;
     color: #fff;
     opacity: 0.4;
+    position: absolute;
 }

src/features/trackTimeDuration/components/WeekCalendar.tsx

@@ -52,7 +52,7 @@ const WeekCalendar = memo(() => {
             }
             else {
                 var array = list.concat(calendars)
-                updateList(array,list)
+                updateList(array, list)
 
             }
 
@@ -60,14 +60,14 @@ const WeekCalendar = memo(() => {
         // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
     }
 
-    function updateList(array,list) {
+    function updateList(array, list) {
         timer = setInterval(() => {
             if (!isScrolling) {
                 setCalendars(array)
                 setCurrent(current + list.length)
                 setSummary(array[current + list.length].summary_stats ? array[current + list.length].summary_stats : null)
                 setCalendarData(array[current + list.length])
-                setLeft((current + list.length-1) * parseInt(rpxToPx(658) + ''))
+                setLeft((current + list.length - 1) * parseInt(rpxToPx(658) + ''))
                 setIsLoading(false)
                 clearInterval(timer);
                 timer = null;
@@ -87,7 +87,8 @@ const WeekCalendar = memo(() => {
         if (!fingerDrag) return
         isScrolling = true
         var x = e.detail.scrollLeft + 5
-        var page = parseInt(x / parseInt(rpxToPx(658) + '') + '')
+        // var page = parseInt(x / parseInt(rpxToPx(658) + '') + '')
+        var page = Math.round(x / parseInt(rpxToPx(658) + ''))
 
         if (current != page && page < calendars.length && page >= 0) {
             setCurrent(page)
@@ -115,14 +116,14 @@ const WeekCalendar = memo(() => {
 
     if (!calendarData)
         return <View />
-    return <View>
+    return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <View className="calendar_summary_top">
             <View className="calendar_summary_item">
-                <Text className="calendar_summary_title">断食平均</Text>
+                <Text className="calendar_summary_title">平均断食</Text>
                 <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>{!summary || summary.fast.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
             </View>
             <View className="calendar_summary_item">
-                <Text className="calendar_summary_title">睡眠平均</Text>
+                <Text className="calendar_summary_title">平均睡眠</Text>
                 <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>{!summary || summary.sleep.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
             </View>
         </View>
@@ -130,11 +131,17 @@ const WeekCalendar = memo(() => {
 
         <View className="chart_bg">
             <View className="chart_bg">
-                <View className="chart_content_bg" />
+                <View className="chart_content_bg" style={{
+                    left: parseInt(rpxToPx(46) + ''),
+                    right: parseInt(rpxToPx(46) + ''),
+                    top: parseInt(rpxToPx(60) + ''),
+                    bottom: parseInt(rpxToPx(60) + ''),
+                    width: parseInt(rpxToPx(658) + ''),
+                }} />
                 <ScrollView
                     // className="chart_scroll"
                     style={{
-                        marginLeft: rpxToPx(46),
+                        marginLeft: parseInt(rpxToPx(46) + ''),
                         width: parseInt(rpxToPx(658) + ''),
                         height: parseInt(rpxToPx(520) + ''),
                         flexDirection: 'row', display: 'flex',
@@ -151,19 +158,19 @@ const WeekCalendar = memo(() => {
                             // height: parseInt(rpxToPx(520) + ''),backgroundColor:'red',flexShrink:0}}><Text style={{color:'#fff'}}>{index}</Text></View>
 
                             // // 
-                            if (index == current || index == current-1 || index == current+1)
-                            return <WeekCalendarItem data={item} key={index} />
-                            return <View style={{width: parseInt(rpxToPx(658) + ''),flexShrink:0}}/>
+                            if (index == current || index == current - 1 || index == current + 1)
+                                return <WeekCalendarItem data={item} key={index} />
+                            return <View style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
                         })
                     }
 
                 </ScrollView>
-                <View className="chart_times">
-                    <Text className="chart_times_txt">12:00</Text>
-                    <Text className="chart_times_txt">18:00</Text>
-                    <Text className="chart_times_txt">24:00</Text>
-                    <Text className="chart_times_txt">06:00</Text>
-                    <Text className="chart_times_txt">12:00</Text>
+                <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
+                    <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
+                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
+                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
+                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
+                    <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
                 </View>
             </View>
 

src/features/trackTimeDuration/components/WeekCalendarItem.scss

@@ -7,34 +7,42 @@
 }
 
 .chart_top_week{
-    margin-top: 20px;
-    height: 40px;
+
+    margin-top: 30px;
+    margin-bottom: 10px;
+    height: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
+    position: relative;
 }
 
 .chart_bottom_week{
-    margin-bottom: 20px;
-    height: 40px;
+    margin-top: 10px;
+    margin-bottom: 30px;
+    height: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
+    position: relative;
 }
 
 .chart_detail{
     display: flex;
     position: relative;
-    flex: 1;
+    // flex: 1;
+    height: 400px;
+    overflow: hidden;
 }
 
 .chart_week_text{
     font-size: 20px;
-    line-height: 40px;
+    line-height: 20px;
     color: #fff;
     opacity: 0.4;
-    width: 86px;
-    margin-left: 8px;
+    position: absolute;
+    // width: 94px;
+    // margin-left: 0px;
 }
 
 .verticalLine{

src/features/trackTimeDuration/components/WeekCalendarItem.tsx

@@ -63,24 +63,27 @@ export default function WeekCalendarItem(props: { data: any }) {
             return null;
         }
     }
-    return <View className="chart_content" style={{width:parseInt(rpxToPx(658)+'')}}>
-        <View className="chart_top_week">
-            <Text className="chart_week_text">周日</Text>
-            <Text className="chart_week_text">周一</Text>
-            <Text className="chart_week_text">周二</Text>
-            <Text className="chart_week_text">周三</Text>
-            <Text className="chart_week_text">周四</Text>
-            <Text className="chart_week_text">周五</Text>
-            <Text className="chart_week_text">周六</Text>
+    return <View className="chart_content" style={{ width: parseInt(rpxToPx(658) + '') }}>
+        <View style={{ height: parseInt(rpxToPx(60) + '') }}>
+            <View className="chart_top_week">
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周日</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*1) + '') }}>周一</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*2) + '') }}>周二</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*3) + '') }}>周三</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*4) + '') }}>周四</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*5) + '') }}>周五</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*6) + '') }}>周六</Text>
+            </View>
         </View>
+
         <View className="chart_detail">
             <View className="verticalLine" style={{ left: 0 }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94) }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94 * 2) }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94 * 3) }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94 * 4) }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94 * 5) }} />
-            <View className="verticalLine" style={{ left: rpxToPx(94 * 6) }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*1) + '') }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*2) + '') }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*3) + '') }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*4) + '') }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*5) + '') }} />
+            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*6) + '') }} />
             <View className="horizontalLine" style={{ top: rpxToPx(100), backgroundColor: '#262626' }} />
             <View className="horizontalLine" style={{ top: rpxToPx(200), backgroundColor: '#383838' }} />
             <View className="horizontalLine" style={{ top: rpxToPx(300), backgroundColor: '#262626' }} />
@@ -120,14 +123,16 @@ export default function WeekCalendarItem(props: { data: any }) {
                 })
             }
         </View>
-        <View className="chart_bottom_week">
-            <Text className="chart_week_text">周一</Text>
-            <Text className="chart_week_text">周二</Text>
-            <Text className="chart_week_text">周三</Text>
-            <Text className="chart_week_text">周四</Text>
-            <Text className="chart_week_text">周五</Text>
-            <Text className="chart_week_text">周六</Text>
-            <Text className="chart_week_text">周日</Text>
+        <View style={{ height: parseInt(rpxToPx(60) + '') }}>
+            <View className="chart_bottom_week">
+            <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周一</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*1) + '') }}>周二</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*2) + '') }}>周三</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*3) + '') }}>周四</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*4) + '') }}>周五</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*5) + '') }}>周六</Text>
+                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*6) + '') }}>周日</Text>
+            </View>
         </View>
     </View>
 }

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -8,7 +8,6 @@ import { TimeFormatter } from "@/utils/time_format";
 
 
 
-
 const startArc = (time: number) => {
     var date = new Date(time);
     var hour = date.getHours();
@@ -23,6 +22,11 @@ const durationArc = (start_time: number, end_time: number) => {
 }
 
 
+export const ringWidth = 12
+export const smallRingRadius = 28
+export const bigRingRadius = 42
+export const thirdRingRadius = 56
+
 
 export const haveSmallRing = (data: any) => {
     if (data.scenario == 'FAST_SLEEP')
@@ -332,7 +336,7 @@ export const getReal = (data: any, isBigRing: boolean, isRecord: boolean) => {
         return realRingBig
     }
     else {
-        if (!data.sleep){
+        if (!data.sleep) {
             return realRingSmall
         }
         if (data.sleep.real_end_time_zone && data.status == 'COMPLETED') {

src/pages/clock/Index.scss

@@ -5,13 +5,12 @@
     color: #fff;
 }
 
-.discovery{
+.discovery1{
     margin-left: 46px;
     font-weight: bold;
     font-size: 48px;
-    margin-top: 64px;
     line-height: 48px;
-    margin-bottom: 22px;
+    margin-bottom: 20px;
 }
 
 .count{
@@ -19,54 +18,7 @@
     height: 0;
 }
 
-.single_check_nor{
-    margin-bottom: 16px;
-    height: 84px;
-    border-radius: 42px;
-    border: solid 4px $fastColor;
-    box-sizing: border-box;
-    margin-left: 46px;
-    margin-right: 46px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 44px;
-    padding-right: 44px;
-}
-
-.single_check_sel{
-    margin-bottom: 16px;
-    height: 84px;
-    border-radius: 42px;
-    background-color: $fastColor;
-    margin-left: 46px;
-    margin-right: 46px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 44px;
-    padding-right: 44px;
-    box-sizing: border-box;
-}
-
-.single_check_text_nor{
-    color: $fastColor;
-    font-weight: bold;
-    font-size: 32px;
-    flex: 1;
-}
 
-.single_check_text_sel{
-    color: #000;
-    font-weight: bold;
-    font-size: 32px;
-    flex: 1;
-}
-
-.single_checked{
-    width: 48px;
-    height: 48px;
-}
 
 .swiper1{
     height: 850px;
@@ -84,6 +36,6 @@
 .index_more{
     margin-right: 46px;
     line-height: 48px;
-    margin-top: 64px;
-    margin-bottom: 22px;
+    // margin-top: 64px;
+    // margin-bottom: 22px;
 }

src/pages/clock/Index.tsx

@@ -14,7 +14,7 @@ import { setScenario, setStep } from "@/store/scenario";
 import { useEffect, useState } from "react";
 import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
 import { ColorType } from "@/context/themes/color";
-import { getBgRing, getCommon, getDot, getSchedule } from "@/features/trackTimeDuration/hooks/RingData";
+import { bigRingRadius, getBgRing, getCommon, getDot, getSchedule, ringWidth, smallRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
 import Modal from '@/components/layout/Modal'
@@ -34,6 +34,7 @@ import DurationPicker from "@/features/trackTimeDuration/components/DurationPick
 import SegmentPop from "@/features/trackTimeDuration/components/SegmentPop";
 import Box from "@/components/layout/Box";
 import DayNightCard from "@/features/trackSomething/components/DayNightCard";
+import StageSelector from "@/features/trackTimeDuration/components/StageSelector";
 
 let GradientText
 let useNavigation;
@@ -197,8 +198,8 @@ export default function Page() {
         var currentRecord = (homeData as any).current_record
 
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing1 = getSchedule(currentRecord, true, true)
         realRing1.color = ColorType.fast + '66'
@@ -249,8 +250,8 @@ export default function Page() {
 
     function smallRing() {
         var common = getCommon(null, true)
-        common.radius = 28;
-        common.lineWidth = 9;
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing1 = getSchedule((homeData as any).current_record, false, false)
         return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={'testB'} />
@@ -394,18 +395,22 @@ export default function Page() {
                 <Box>
                     <View>
                         <IndexItem type="FAST_SLEEP" data={homeData} time={timestamp} showStage={false} />
-                        <IndexConsole record={homeData} />
+                        {
+
+                            user.isLogin ? <IndexConsole record={homeData} /> : <StageSelector />
+                        }
+
                     </View>
                 </Box>
 
                 {/* {
                     user.isLogin && <DayLight />
                 } */}
-                <DayNightCard isNight={true} switchChanged={(e)=>{}}/>
+                <DayNightCard isNight={true} switchChanged={(e) => { }} />
                 {
-                    user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                    user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between',marginTop: rpxToPx(40),  }}>
                         {
-                            <Text className="discovery">{t('feature.track_time_duration.record_fast_sleep.header.latest_record')}</Text>
+                            <Text className="discovery1" style={{ marginBottom: 0 }}>{t('feature.track_time_duration.record_fast_sleep.header.latest_record')}</Text>
                         }
                         {
                             process.env.TARO_ENV == 'weapp' && <Text className="fast_sleep_more index_more" onClick={more}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
@@ -423,8 +428,8 @@ export default function Page() {
                 }
 
                 {
-                    user.isLogin && <View style={{marginTop:rpxToPx(20)}}>
-                        <Text className="discovery" >周统计</Text>
+                    user.isLogin && <View style={{ marginTop: rpxToPx(60), display: 'flex', flexDirection: 'column' }}>
+                        <Text className="discovery1" >周统计</Text>
                         <WeekCalendar />
                     </View>
                 }

src/pages/clock/Index的副本.tsx

@@ -14,7 +14,7 @@ import { setScenario, setStep } from "@/store/scenario";
 import { useEffect, useState } from "react";
 import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
 import { ColorType } from "@/context/themes/color";
-import { getBgRing, getCommon, getDot, getSchedule } from "@/features/trackTimeDuration/hooks/RingData";
+import { bigRingRadius, getBgRing, getCommon, getDot, getSchedule, ringWidth, smallRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
 import Modal from '@/components/layout/Modal'
@@ -178,8 +178,8 @@ export default function Page() {
         var currentRecord = (homeData as any).fast_sleep.current_record
 
         var common = getCommon(null, true)
-        common.radius = 42;
-        common.lineWidth = 9;
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing1 = getSchedule(currentRecord, true, true)
         realRing1.color = ColorType.fast + '66'
@@ -230,8 +230,8 @@ export default function Page() {
 
     function smallRing() {
         var common = getCommon(null, true)
-        common.radius = 28;
-        common.lineWidth = 9;
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
         var bgRing = getBgRing()
         var realRing1 = getSchedule((homeData as any).fast_sleep.current_record, false, false)
         return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={'testB'} />

src/utils/common.scss

@@ -1,7 +1,7 @@
 $themeColor: #AAFF00;
 $grayColor: #1C1C1C;
 $tipBgColor: #2c2c2c;
-$fastColor: #00ffff;
+$fastColor: #00c8ff;//#00ffff;
 $sleepColor: #8961F5;
 $alertColor: #ea6c6c;
 $foodColor: #ff7b00; //#FF7A4E;