update

src/app.scss

@@ -51,7 +51,6 @@ page {
 
 .sleep_color {}
 
-.sleep_bg_color {}
 
 .fast_color {}
 

src/components/basic/Buttons.scss

@@ -52,7 +52,7 @@
 }
 
 .mixed {
-    background: linear-gradient(90deg, $fastColor 0%, #00FFFF 100%);
+    background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;

src/components/input/Inputs.tsx

@@ -1,6 +1,7 @@
 import { Input, View } from "@tarojs/components";
 import './Inputs.scss'
 import { useState } from "react";
+import { ColorType } from "@/context/themes/color";
 
 interface CustomInputProps {
     placeholder?: string;
@@ -33,7 +34,7 @@ export default function Component({
                 textContentType={isSecure ? 'password' : 'none'}
                 type={isSecure ? 'password' : 'text'}
                 onInput={handleInputChange}
-                selectionColor='#AAFF00'
+                selectionColor={ColorType.fast}
                 disabled={disabled?disabled:false}
                 onFocus={() => {
                     setIsFocus(true)

src/components/input/LimitPickers.scss

@@ -1,3 +1,5 @@
+@import '@/utils/common.scss';
+
 .picker-mask {
     max-width: auto;
     // background: red;
@@ -31,5 +33,5 @@
 }
 
 .picker-sel{
-    background-color: #00ffff;
+    background-color: $sleepColor;
 }

src/context/locales/zh.js

@@ -24,9 +24,6 @@ export default {
             sub_title: '场景时钟将在首页展示',
             btn_next: '下一步',
             btn_more: '了解更多',
-            fast: '断食',
-            sleep: '睡眠',
-            fast_sleep: '断食睡眠',
         },
         set_schedule: {
             fast_title: '断食日程',

src/context/themes/color.tsx

@@ -1,4 +1,4 @@
 export enum ColorType {
-    fast = '',
-    sleep = ''
+    fast = '#00ffff',//'#aaff00',
+    sleep = '#8961F5'//'#00ffff'
 }

src/features/common/SpecBtns.tsx

@@ -6,6 +6,7 @@ import PostBtn from "./PostBtn"
 import './SpecBtns.scss'
 import Taro from "@tarojs/taro"
 import { useTranslation } from "react-i18next"
+import { ColorType } from "@/context/themes/color"
 
 export const rpxToPx = (n: number) => {
     var rate = Taro.getSystemInfoSync().windowWidth / 750;
@@ -21,7 +22,7 @@ export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean })
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                backgroundColor: '#AAFF00',
+                backgroundColor: ColorType.fast,
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
@@ -45,7 +46,7 @@ export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, is
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                backgroundColor: '#00FFFF',
+                backgroundColor: ColorType.sleep,
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
@@ -71,13 +72,13 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLo
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                borderColor: '#00FFFF',
+                borderColor: ColorType.sleep,
                 borderWidth: 2,
                 borderStyle: 'solid',
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
-                color: '#00FFFF',
+                color: ColorType.sleep,
                 fontWeight: 500,
                 fontSize: 20,
                 display: 'flex',
@@ -99,13 +100,13 @@ export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoa
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                borderColor: '#AAFF00',
+                borderColor: ColorType.fast,
                 borderWidth: 2,
                 borderStyle: 'solid',
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
-                color: '#AAFF00',
+                color: ColorType.fast,
                 fontSize: 20,
                 fontWeight: 500,
                 display: 'flex',
@@ -127,7 +128,7 @@ export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast
                 width: 300,
                 boxSizing: 'border-box',
                 borderRadius: 25,
-                backgroundColor: props.isFast ? '#AAFF00' : '#00FFFF',
+                backgroundColor: props.isFast ? ColorType.fast : ColorType.sleep,
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: 'black',

src/features/trackTimeDuration/components/ChooseScenario.scss

@@ -1,3 +1,4 @@
+@import '@/utils/common.scss';
 .item_row{
     display: flex;
     flex-direction: row;
@@ -13,4 +14,11 @@
 .item_txt{
     font-size: 48px;
     font-weight: 500;
+}
+
+.fast_sleep_text{
+    background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -17,6 +17,8 @@ import { setScenario, setScenarioName, setStep } from "@/store/scenario";
 import { getPlans } from "@/services/trackTimeDuration";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import Layout from "@/components/layout/layout";
+import { ColorType } from "@/context/themes/color";
+import TitleView from "./TitleView";
 
 
 export default function Component() {
@@ -70,18 +72,18 @@ export default function Component() {
         var background;
         switch (selIndex) {
             case 0:
-                style = { backgroundColor: '#AAFF00' }
-                background = '#AAFF00'
+                style = { backgroundColor: ColorType.fast }
+                background = ColorType.fast
                 break;
             case 1:
-                style = { backgroundColor: '#00FFFF' }
-                background = '#00FFFF'
+                style = { backgroundColor: ColorType.sleep }
+                background = ColorType.sleep
                 break;
             case 2:
                 style = {
-                    background: 'linear-gradient(to right, #AAFF00, #00FFFF)'
+                    background: 'linear-gradient(to right, ' + ColorType.fast + ', ' + ColorType.sleep + ')'
                 }
-                background = 'linear-gradient(to right, #AAFF00, #00FFFF)'
+                background = 'linear-gradient(to right, ' + ColorType.fast + ', ' + ColorType.sleep + ')'
                 break;
         }
         return <View>
@@ -177,13 +179,13 @@ export default function Component() {
         }
 
         const targetRing: TargetRing = {
-            color: '#AAFF00',
+            color: ColorType.fast,
             startArc: timeToArc((getScheduleTarget(true) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(true) as any).start_time, (getScheduleTarget(true) as any).end_time)
         }
 
         const targetRing2: TargetRing = {
-            color: '#00FFFF',
+            color: ColorType.sleep,
             startArc: timeToArc((getScheduleTarget(false) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(false) as any).start_time, (getScheduleTarget(false) as any).end_time)
         }
@@ -192,18 +194,16 @@ export default function Component() {
         array.push(
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing} canvasId='0' />
-                {/* <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='0' /> */}
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: '#AAFF00' }}>{t('page.choose_scenario.fast')}</Text>
+                    <Text className="item_txt" style={{ color: ColorType.fast }}>{t('feature.track_time_duration.choose_scenario.list.item1.name')}</Text>
                 </View>
             </View>
         );
         array.push(
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing2} canvasId='1' />
-                {/* <Rings radius={33} strokeWidth={8} color='#00FFFF' canvasId='1' /> */}
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.sleep')}</Text>
+                    <Text className="item_txt" style={{ color: ColorType.sleep }}>{t('feature.track_time_duration.choose_scenario.list.item2.name')}</Text>
                 </View>
             </View>
         )
@@ -212,12 +212,11 @@ export default function Component() {
                 <View style={{ position: 'relative', zIndex: 1 }}>
                     <Rings2 common={common} bgRing={bgRing} targetRing={targetRing} canvasId='3' />
                     <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
-                        {/* <Rings radius={23} strokeWidth={6} color='#00FFFF' canvasId='4' /> */}
                         <Rings2 common={common2} bgRing={bgRing} targetRing={targetRing2} canvasId='4' />
                     </View>
                 </View>
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.fast_sleep')}</Text>
+                    <Text className="item_txt fast_sleep_text" >{t('feature.track_time_duration.choose_scenario.list.item3.name')}</Text>
                 </View>
             </View>
         )
@@ -240,11 +239,14 @@ export default function Component() {
     }
 
     return <Layout title={t('page.choose_scenario.title')}
-        titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.flex}>
+        titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.customHeader}>
         <View className="container">
+            <TitleView title={t('page.choose_scenario.title')}
+                subTitle={t('page.choose_scenario.sub_title')}
+            />
             {/* <Texts text={t('page.choose_scenario.title')} type={TextType.primary}></Texts> */}
-            <Texts text={t('page.choose_scenario.sub_title')} type={TextType.secondary}></Texts>
-            <View style={{ height: 20 }} />
+            {/* <Texts text={t('page.choose_scenario.sub_title')} type={TextType.secondary}></Texts> */}
+            {/* <View style={{ height: 20 }} /> */}
             {
                 scenarios.length > 0 && <View style={{ position: 'relative', zIndex: 1 }}>
                     <SingleSelect items={items()} itemSelect={handleItemSelect} selIndex={selIndex} />

src/features/trackTimeDuration/components/Clock.tsx

@@ -5,6 +5,7 @@ import { TimeFormatter } from "@/utils/time_format";
 import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
 import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
 import './Clock.scss'
+import { ColorType } from "@/context/themes/color";
 export default function Component() {
     const [checkData, setCheckData] = useState(null)
 
@@ -37,7 +38,7 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         var currentDot1 = getDot((checkData as any).current_record, true)
         var targetBigRing1 = getTarget((checkData as any).current_record, true)
-        targetBigRing1.color = 'rgba(170,255,0,0.4)'
+        targetBigRing1.color = ColorType.fast+'33'//'rgba(170,255,0,0.4)'
         if (current_record.status == 'ONGOING') {
             var realRing1 = getReal((checkData as any).current_record, true, false)
 
@@ -63,14 +64,14 @@ export default function Component() {
             var realRing = getReal((checkData as any).current_record, false, false)
             var currentDot = getDot((checkData as any).current_record, false)
             var targetRing = getTarget((checkData as any).current_record, false)
-            targetRing.color = 'rgba(0, 255, 255, 0.4)'
+            targetRing.color = ColorType.sleep+'33'//'rgba(0, 255, 255, 0.4)'
             if (current_record.status == 'ONGOING2') {
                 return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
             }
 
             //ongoing3时，睡眠点整理亮度降低
             if (current_record.status == 'ONGOING3') {
-                currentDot.color = 'rgba(0, 255, 255, 0.5)' 
+                currentDot.color = ColorType.sleep+'66'
             }
             return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
         }
@@ -96,33 +97,33 @@ export default function Component() {
                 </View>
                 <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                     {
-                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text className="clock_text" style={{ color: '#AAFF00' }}>00:00:00</Text>
+                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text className="clock_text" style={{ color: ColorType.fast }}>00:00:00</Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? '#aaff00' : '#00ffffff' }}>
+                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? ColorType.fast : ColorType.sleep }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast ?
                                 (checkData as any).current_record.fast.real_start_time :
                                 (checkData as any).current_record.sleep.real_start_time)}
                         </Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: '#AAFF00' }}>
+                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: ColorType.fast }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                         </Text>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING2' && <View  style={{ flexDirection: 'column', display: 'flex' }}>
-                            <Text className="clock_text"style={{ color: '#AAFF00' }}>
+                            <Text className="clock_text"style={{ color: ColorType.fast }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
-                            <Text className="clock_text" style={{ color: '#00FFFF' }}>
+                            <Text className="clock_text" style={{ color: ColorType.sleep }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
                             </Text>
                         </View>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING3' && <Text>
-                            <Text className="clock_text" style={{ color: '#AAFF00' }}>
+                            <Text className="clock_text" style={{ color: ColorType.fast }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
                         </Text>

src/features/trackTimeDuration/components/Console.tsx

@@ -16,6 +16,7 @@ import './Console.scss'
 import { ConsoleType, changeConsoleStatus } from "@/store/console";
 import { updateScenario } from "@/store/time";
 import { useTranslation } from "react-i18next";
+import { ColorType } from "@/context/themes/color";
 
 export default function Component(props: { isNextStep?: boolean }) {
     const scenario = useSelector((state: any) => state.scenario);
@@ -174,7 +175,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         var color = getColor(time)
         if (props.isNextStep) {
             title = t('feature.track_time_duration.console.fast_end')
-            color = '#AAFF00'
+            color = ColorType.fast
         }
 
 
@@ -246,8 +247,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: '#AAFF001A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: '#AAFF00' }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: ColorType.fast+'1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: ColorType.fast }}>距离目标结束</Text>
             </View>
         }
 
@@ -258,8 +259,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: isFast ? '#AAFF001A' : '#00FFFF1A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: isFast ? '#AAFF00' : '#00FFFF' }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: isFast ? ColorType.fast+'1A' : ColorType.sleep+'1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: isFast ? ColorType.fast : ColorType.sleep }}>距离目标结束</Text>
             </View>
         }
         return <View />
@@ -443,7 +444,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     if (!user.isLogin) {
         return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
             <Text>16:00</Text>
-            <Text style={{ color: '#AAFF00' }} onClick={login}>Start Fast</Text>
+            <Text style={{ color: ColorType.fast }} onClick={login}>Start Fast</Text>
         </View>
     }
 
@@ -456,19 +457,19 @@ export default function Component(props: { isNextStep?: boolean }) {
             }}>
                 {
                     (time.status == 'WAIT_FOR_START') && <Stepper child={
-                        <Text className="stepper_text" style={{ color: '#00FFFF', opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
+                        <Text className="stepper_text" style={{ color: ColorType.sleep, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                    themeColor={'#00FFFF'} disableMinus={disableMinus()} disablePlus={disablePlus()} />
+                    themeColor={ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
                 {
                     time.status == 'ONGOING1' && <View>
-                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : '#AAFF00', opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
+                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
                     </View>
                 }
 
                 {
                     time.status == 'ONGOING2' && <View>
-                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : '#AAFF00', opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
+                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
                     </View>
                 }
                 {
@@ -497,7 +498,7 @@ export default function Component(props: { isNextStep?: boolean }) {
                     (time.status == 'ONGOING1' || time.status == 'WAIT_FOR_START') && <Stepper child={
                         <Text className="stepper_text" style={{ color: textColor, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                    themeColor={isFast?'#AAFF00':'#00FFFF'} disableMinus={disableMinus()} disablePlus={disablePlus()} />
+                    themeColor={isFast?ColorType.fast:ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
                 {
                     time.status == 'ONGOING2' && <View>

src/features/trackTimeDuration/components/Dial.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 import './Dial.scss'
 import { useSelector } from 'react-redux';
+import { ColorType } from '@/context/themes/color';
 
 const Component = (props) => {
     const [scenario] = useState(useSelector((state: any) => state.scenario))
@@ -76,7 +77,7 @@ const Component = (props) => {
         if (needDrawFastRing) {
             ctx.beginPath();
             ctx.arc(centerX, centerY, radius + 16 + 8, global.fast_start_angle, global.fast_end_angle);
-            ctx.strokeStyle = 'rgba(170, 255, 0, 0.3)';
+            ctx.strokeStyle = ColorType.fast;
             ctx.lineWidth = 2;
             ctx.stroke();
         }

src/features/trackTimeDuration/components/More.tsx

@@ -10,6 +10,7 @@ import { endFast } from "../actions/TrackTimeActions";
 import Modal from "@/components/layout/Modal";
 import { setStep } from "@/store/scenario";
 import { TimeFormatter } from "@/utils/time_format";
+import { ColorType } from "@/context/themes/color";
 
 const Component = forwardRef((props, ref) => {
     const isFastFirst = true;
@@ -133,7 +134,7 @@ const Component = forwardRef((props, ref) => {
         
         return <LimitPickers ref={limitPickerRef}
         title = '结束断食'
-        themeColor="#AAFF00"
+        themeColor={ColorType.fast}
         limit={limit} onCancel={() => { setIsOpen(false); setShowModal(false) }} 
         onChange={(e) => {
             endFast(e)

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -16,6 +16,7 @@ import Segment from "@/components/navigation/Segment";
 import Stage from "./Stage";
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
 import { useTranslation } from "react-i18next";
+import { ColorType } from "@/context/themes/color";
 
 export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
     const [showDetailModal, setShowDetailModal] = useState(false)
@@ -252,13 +253,13 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
                     showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                 }
                 {
-                    showFast && <Text className="duration_value" style={{ color: '#AAFF00' }}>{fastDuration}</Text>
+                    showFast && <Text className="duration_value" style={{ color: ColorType.fast }}>{fastDuration}</Text>
                 }
                 {
                     showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                 }
                 {
-                    showSleep && <Text className="duration_value" style={{ color: '#00FFFF' }}>{sleepDuration}</Text>
+                    showSleep && <Text className="duration_value" style={{ color: ColorType.sleep }}>{sleepDuration}</Text>
                 }
             </View>
             <Image className="arrow1" src={require('@/assets/images/arrow.png')} />

src/features/trackTimeDuration/components/Schedule.scss

@@ -1,3 +1,4 @@
+@import '@/utils/common.scss';
 .duration_bg{
     margin-left: 50px;
     display: flex;
@@ -48,5 +49,5 @@
     flex-direction: row;
     height: 84px;
     align-items: center;
-    color: #AAFF00;
+    color: $fastColor;
 }

src/features/trackTimeDuration/components/Schedule.tsx

@@ -16,6 +16,7 @@ import Segment from "@/components/navigation/Segment";
 import Modal from "@/components/layout/Modal";
 import Stage from "./Stage";
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
+import { ColorType } from "@/context/themes/color";
 
 
 export default function Component(props: { type?: string, data?: any, delSuccess?: Function }) {
@@ -63,24 +64,20 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             btnStyle = {
                 fontSize: 14,
                 lineHeight: 18,
-                color: '#00FFFF'
+                color: ColorType.sleep
             }
         }
         else if (props.data.scenario == 'FAST') {
             btnStyle = {
                 fontSize: 14,
                 lineHeight: 18,
-                color: '#AAFF00'
+                color: ColorType.fast
             }
         }
         else if (props.data.scenario == 'FAST_SLEEP') {
             btnStyle = {
                 fontSize: 14,
                 lineHeight: 18,
-                // background: 'linear-gradient(90deg, #AAFF00 0%, #00FFFF 100%)',
-                // WebkitBackgroundClip: 'text',
-                // backgroundClip: 'text',
-                // color: 'transparent'
             }
         }
         return <View style={{

src/features/trackTimeDuration/components/SetSchedule.scss

@@ -5,7 +5,7 @@
     border-radius: 56px;
     display: flex;
     flex-direction: column;
-    margin-top: 20px;
+    // margin-top: 20px;
 }
 
 .header{

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -17,6 +17,8 @@ import { SetScheduleBtn } from "@/features/common/SpecBtns";
 import Layout from "@/components/layout/layout";
 import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
 import { useTranslation } from "react-i18next";
+import { ColorType } from "@/context/themes/color";
+import TitleView from "./TitleView";
 
 export default function Component() {
   const isFastFirst = true;
@@ -272,7 +274,7 @@ export default function Component() {
       title={scenario.step == 'fast' ?
         t('feature.track_time_duration.dial.picker_fast_schedule_duration') :
         t('feature.track_time_duration.dial.picker_sleep_schedule_duration')}
-      themeColor={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+      themeColor={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
       showBtns={true} onCancel={() => { setIsOpen(false) }} />
   }
 
@@ -294,7 +296,7 @@ export default function Component() {
 
   function timeContent() {
     return <TimePicker time={chooseStart ? startTime : endTime}
-      color={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+      color={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
       title={pickerTitle()}
       confirm={chooseStart ? onStartTimeChange : onEndTimeChange}
       cancel={() => { setIsTimeOpen(false) }} />
@@ -304,7 +306,11 @@ export default function Component() {
 
   function detail() {
     return <View >
-      <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text>
+      {/* <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text> */}
+      <TitleView title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
+        subTitle={t('page.set_schedule.fast_subtitle')}
+        titleColor={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
+      />
 
       <View className="box">
         <View className="header" style={{ backgroundColor: isDebugMode ? '#EEC01F' : 'transparent' }}>
@@ -357,9 +363,9 @@ export default function Component() {
   }
 
   return <Layout
-    titleColor={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+    titleColor={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
     title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
-    titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.flex}>
+    titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.customHeader}>
     {
       detail()
     }

src/features/trackTimeDuration/components/Stage.tsx

@@ -1,6 +1,7 @@
 import { View, Text } from "@tarojs/components";
 import './Stage.scss'
 import { TimeFormatter } from "@/utils/time_format";
+import { ColorType } from "@/context/themes/color";
 
 export default function Component(props: { data: any }) {
     function getTime(t1: number, t2: number) {
@@ -42,11 +43,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段A</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING1' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>睡前断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING1' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepATime(props.data)}</Text>
         </View>
         <View className="stage_item">
@@ -55,11 +56,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段B</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING2' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>睡眠中断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING2' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepBTime(props.data)}</Text>
         </View>
         <View className="stage_item">
@@ -68,11 +69,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段C</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING3' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>起床后断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING3' ?
-                    '#AAFF00' : 'rgba(255, 255, 255, 0.8)'
+                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepCTime(props.data)}</Text>
         </View>
 

src/features/trackTimeDuration/components/StatusIndicator.scss

@@ -7,22 +7,22 @@
 }
 
 .point{
-    width: 18px;
-    height: 18px;
-    border-radius: 9px;
-    margin-right: 10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    margin-right: 12px;
 }
 
 .scenario{
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-right: 24px;
+    margin-right: 36px;
     
 }
 
 .name {
     color: rgba(255,255,255,0.4);
-    font-size: 28px;
+    font-size: 36px;
     font-weight: 500;
 }

src/features/trackTimeDuration/components/StatusIndicator.tsx

@@ -1,6 +1,7 @@
 import { View, Text } from "@tarojs/components";
 import './StatusIndicator.scss'
 import { useSelector } from "react-redux";
+import { ColorType } from "@/context/themes/color";
 
 export default function Component() {
     const time = useSelector((state: any) => state.time);
@@ -76,13 +77,13 @@ export default function Component() {
     return <View className='subcontent'>
         {
             time.scenario != 'SLEEP' && <View className='scenario'>
-                <View className='point' style={{ backgroundColor: '#AAFF00' }} />
+                <View className='point' style={{ backgroundColor: ColorType.fast }} />
                 <Text className='name'>{getFastName()}</Text>
             </View>
         }
         {
             time.scenario != 'FAST' && <View className='scenario' style={{ opacity: sleepAlpha() }}>
-                <View className='point' style={{ backgroundColor: '#00FFFF' }} />
+                <View className='point' style={{ backgroundColor: ColorType.sleep }} />
                 <Text className='name'>{getSleepName()}</Text>
             </View>
         }

src/features/trackTimeDuration/components/TitleView.scss

@@ -38,4 +38,12 @@
     padding-right: 32px;
 }
 
+.subTitle{
+    margin-top: 8px;
+    color: #fff;
+    opacity: 0.4;
+    font-size: 36px;
+    line-height: 48px;
+}
+
 

src/features/trackTimeDuration/components/TitleView.tsx

@@ -5,13 +5,18 @@ import Taro from '@tarojs/taro';
 import { setStep } from '@/store/scenario';
 import { useTranslation } from 'react-i18next';
 
-export default function Component(props:{children:any}) {
+export default function Component(props: {
+    children?: any,
+    subTitle?: string,
+    title: string, titleColor?: string,
+    showAddBtn?: boolean
+}) {
     const time = useSelector((state: any) => state.time);
     const { t } = useTranslation()
     const dispatch = useDispatch();
-    const isFastFirst  = true
+    const isFastFirst = true
+
 
-    
 
     function more() {
         Taro.showActionSheet({
@@ -20,28 +25,28 @@ export default function Component(props:{children:any}) {
                 t('feature.track_time_duration.action_sheet.change_schedule')
             ]
         }).then(res => {
-                switch (res.tapIndex) {
-                    case 1:
-                        if (time.scenario == 'FAST_SLEEP') {
-                            dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
-                        }
-                        else if (time.scenario == 'SLEEP') {
-                            dispatch(setStep('sleep'))
-                        }
-                        else {
-                            dispatch(setStep('fast'))
-                        }
-                        Taro.navigateTo({
-                            url: '/pages/clock/SetSchedule'
-                        })
-                        break;
-                    case 0:
-                        Taro.navigateTo({
-                            url: '/pages/clock/ChooseScenario'
-                        })
-                        break;
-                }
-            })
+            switch (res.tapIndex) {
+                case 1:
+                    if (time.scenario == 'FAST_SLEEP') {
+                        dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
+                    }
+                    else if (time.scenario == 'SLEEP') {
+                        dispatch(setStep('sleep'))
+                    }
+                    else {
+                        dispatch(setStep('fast'))
+                    }
+                    Taro.navigateTo({
+                        url: '/pages/clock/SetSchedule'
+                    })
+                    break;
+                case 0:
+                    Taro.navigateTo({
+                        url: '/pages/clock/ChooseScenario'
+                    })
+                    break;
+            }
+        })
             .catch(err => {
                 console.log(err.errMsg)
             })
@@ -49,14 +54,17 @@ export default function Component(props:{children:any}) {
 
     return <View className='title_view'>
         <View className='title_bg'>
-            <Text className='title'>{t('page.clock.title')}</Text>
+            <Text className='title' style={{ color: props.titleColor ? props.titleColor : '#fff' }}>{props.title}</Text>
             {
-                time.status == 'WAIT_FOR_START' && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
+                time.status == 'WAIT_FOR_START' && props.showAddBtn && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
             }
         </View>
         {
-            props.children
+            props.children ? props.children : <View />
         }
-        
+        {
+            props.subTitle && <Text className='subTitle'>{props.subTitle}</Text>
+        }
+
     </View>
 }

src/features/trackTimeDuration/hooks/Console.tsx

@@ -1,3 +1,4 @@
+import { ColorType } from "@/context/themes/color";
 import { TimeFormatter } from "@/utils/time_format";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -167,17 +168,17 @@ export const getTimePickerTitle = (data, t) => {
 //按钮颜色
 export const getColor = (data) => {
     if (data.scenario == 'FAST') {
-        return '#aaff00'
+        return ColorType.fast
     }
     else if (data.scenario == 'SLEEP') {
-        return '#00ffff'
+        return ColorType.sleep
     }
     else {
         if (data.status == 'WAIT_FOR_START' || data.status == 'ONGOING3') {
-            return '#aaff00'
+            return ColorType.fast
         }
     }
-    return '#00ffff'
+    return ColorType.sleep
 }
 
 //透明度

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -1,4 +1,5 @@
 import { CurrentDot, RealRing, RingCommon, TargetRing } from "@/components/view/Rings"
+import { ColorType } from "@/context/themes/color";
 
 
 
@@ -59,20 +60,20 @@ export const getBgRing = () => {
 
 export const getDot = (data: any, isBigRing: boolean) => {
     const currentDotBig: CurrentDot = {
-        color: '#AAFF00',
+        color:ColorType.fast,
         lineWidth: 8,
         borderColor: 'black'
     }
     
     const currentDotSmall: CurrentDot = {
-        color: '#00FFFF',
+        color: ColorType.sleep,
         lineWidth: 8,
         borderColor: 'black'
     }
 
     if (isBigRing) {
         if (data && data.scenario == 'SLEEP') {
-            currentDotBig.color = '#00FFFF'
+            currentDotBig.color = ColorType.sleep
         }
         return currentDotBig
     }
@@ -96,7 +97,7 @@ export const getTarget = (data: any, isBigRing: boolean) => {
 
     if (isBigRing) {
         if (data.scenario == 'SLEEP') {
-            targetRingBig.color = '#00FFFF'
+            targetRingBig.color = ColorType.sleep
             targetRingBig.startArc = startArc(data.sleep.target_start_time)
             targetRingBig.durationArc = durationArc(data.sleep.start_time, data.sleep.target_end_time)
         }
@@ -115,20 +116,20 @@ export const getTarget = (data: any, isBigRing: boolean) => {
 
 export const getReal = (data: any, isBigRing: boolean, isRecord: boolean) => {
     const realRingBig: RealRing = {
-        color: '#AAFF00',
+        color: ColorType.fast,
         startArc: 0,
         durationArc: 0
     }
 
     const realRingSmall: RealRing = {
-        color: '#00FFFF',
+        color: ColorType.sleep,
         startArc: 0,
         durationArc: 0
     }
 
     if (isBigRing) {
         if (data.scenario == 'SLEEP') {
-            realRingBig.color = '#00FFFF'
+            realRingBig.color = ColorType.sleep
             realRingBig.startArc = startArc(data.sleep.real_start_time)
             realRingBig.durationArc = durationArc(data.sleep.real_start_time, isRecord ? (data.sleep.real_end_time ? data.sleep.real_end_time : new Date().getTime()) : new Date().getTime())
         }

src/pages/clock/Clock.tsx

@@ -304,7 +304,7 @@ export default function IndexPage() {
   }
 
   function headerView() {
-    return <TitleView >
+    return <TitleView title={t('page.clock.title')} showAddBtn={true}>
       <StatusIndicator />
     </TitleView>
   }
@@ -328,7 +328,10 @@ export default function IndexPage() {
               current={swiperIndex}
               autoplay={autoPlay}
               duration={300}
-              interval={2000}
+              interval={300}
+              // indicator-margin={30}
+              indicator-offset={[0,-30]}
+              indicator-height={30}
               indicatorDots={global.consoleType == 'idle'}
               onChange={(e) => {
                 setSwiperIndex(e.detail.current)

src/utils/common.scss

@@ -1,4 +1,4 @@
 $themeColor:#AAFF00;
 $backgroundColor:#1C1C1C;
-$fastColor:#AAFF00;
-$sleepColor:#00FFFF;
+$fastColor:#00ffff;
+$sleepColor:#8961F5;