update

src/_health/base/new_button.tsx

@@ -8,7 +8,9 @@ export enum NewButtonType {
     alpha = 'alpha', //主题半透明
     border = 'border', //主题边框
     gray = 'gray', //灰色半透明
-    text = 'text' //纯文本
+    text = 'text', //纯文本
+    link = 'link',  //超链接（有可能带icon）
+    label = 'label',
 }
 
 function hexToHSL(hex) {
@@ -66,7 +68,8 @@ export default function NewButton(props: {
     width?: number,
     height?: number,
     fontSize?: number,
-    bold?:boolean,
+    bold?: boolean,
+    labelBorder?: boolean,
 }) {
 
     const [isTouched, setIsTouched] = useState(false)
@@ -116,13 +119,83 @@ export default function NewButton(props: {
                 alignItems: 'center',
                 justifyContent: 'center',
                 opacity: props.disable ? 0.6 : 1,
-                boxSizing:'border-box'
+                boxSizing: 'border-box'
             }
             break;
+        case NewButtonType.gray:
+            style = {
+                height: props.height ?? rpxToPx(72),
+                width: props.width ?? rpxToPx(198),
+                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
+                backgroundColor: isTouched ? '#b2b2b240' : '#b2b2b210',
+                color: props.disable ? '#b2b2b2' : '#000000',
+                fontSize: props.fontSize ?? rpxToPx(30),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                // opacity: props.disable ? 0.6 : 1,
+            }
+            // style = {
+            //     height: props.height ?? rpxToPx(72),
+            //     width: props.width ?? rpxToPx(198),
+            //     borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
+            //     backgroundColor: isTouched ? '#9999991A' : 'transparent',
+            //     color: props.disable ? '#999999' : '#999999',
+            //     fontSize: props.fontSize ?? rpxToPx(30),
+            //     display: 'flex',
+            //     alignItems: 'center',
+            //     justifyContent: 'center',
+            //     // opacity: props.disable ? 0.6 : 1,
+            // }
+            break
+        case NewButtonType.text:
+            style = {
+                height: props.height ?? rpxToPx(72),
+                width: props.width ?? rpxToPx(198),
+                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
+                backgroundColor: props.disable ? '#B2B2B240' : isTouched ? '#B2B2B240' : '#B2B2B21A',
+                color: props.disable ? '#b2b2b2' : '#000',
+                fontSize: props.fontSize ?? rpxToPx(30),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }
+            break;
+        case NewButtonType.link:
+            style = {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'row',
+                flex: 1,
+                color: '#5C7099',
+                fontSize: rpxToPx(26),
+                opacity: isTouched ? 0.4 : 1,
+            }
+            break
+        case NewButtonType.label:
+            style = {
+                height: rpxToPx(64),
+                borderRadius: rpxToPx(32),
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: rpxToPx(28),
+                paddingLeft: rpxToPx(24),
+                paddingRight: rpxToPx(24),
+                boxSizing: 'border-box',
+                backgroundColor: isTouched ? '#5C709940' : props.labelBorder ? 'transparent' : '#5C70991A',
+                borderWidth: rpxToPx(2),
+                borderColor: props.labelBorder ? '#5C709940' : 'transparent',
+                borderStyle: 'solid',
+                color: '#5C7099'
+            }
+            break
     }
 
     return <View
-        style={{...style,fontWeight:props.bold?'bold':'normal'}}
+        style={{ ...style, fontWeight: props.bold ? 'bold' : 'normal' }}
         catchMove
         onClick={(e) => {
             if (process.env.TARO_ENV == 'weapp') {
@@ -144,5 +217,5 @@ export default function NewButton(props: {
             }
             setIsTouched(false)
         }}
-    >{props.title}{props.component}</View>
+    >{props.component}{props.title}</View>
 }

src/_health/components/card.scss

@@ -0,0 +1,8 @@
+.main_card {
+    background-color: #fff;
+    display: flex;
+    border-radius: 36px;
+    margin-left: 40px;
+    width: 670px;
+    flex-direction: column;
+}

src/_health/components/card.tsx

@@ -0,0 +1,8 @@
+import { View } from '@tarojs/components'
+import './card.scss'
+
+export default function Card(props:{children:any}){
+    return <View className='main_card'>{
+        props.children
+    }</View>
+}

src/_health/components/fast_sleep_console.scss

@@ -0,0 +1,58 @@
+.timeline_item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-right: 40px;
+    position: relative;
+    padding-left: 52px;
+    background-color: #fff;
+}
+
+.cell_hover {
+  background-color: #E5E5E5;
+}
+
+.timeline_left {
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+}
+
+.timeline_time {
+    font-size: 24px;
+    line-height: 36px;
+    color: #999999;
+    overflow: hidden;
+    width: 500px;
+    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1; // 限制为一行
+    text-overflow: ellipsis; // 超出部分显示省略号
+}
+
+.timeline_title {
+  font-size: 34px;
+  color: #999;
+  line-height: 46px;
+  
+}
+
+.timeline_desc {
+    font-size: 24px;
+    line-height: 34px;
+    width: 500px;
+    color: #B2B2B2;
+    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1; // 限制为一行
+    text-overflow: ellipsis; // 超出部分显示省略号
+}
+
+.timeline_thirdspace {
+    height: 12px;
+    margin-top: 5px;
+}

src/_health/components/fast_sleep_console.tsx

@@ -0,0 +1,78 @@
+import { View, Text, Image } from "@tarojs/components";
+import './fast_sleep_console.scss'
+import { rpxToPx } from "@/utils/tools";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+
+export default function FastSleepConsole() {
+    function timelineItem(item: any, index: number, count: number) {
+        var hasDescription = item.moment && item.moment.description
+        return <View key={index}
+            className="timeline_item"
+            // hoverClass='cell_hover' hoverStayTime={50}
+            onClick={() => { }}>
+            <View className="timeline_left">
+                <View style={{
+
+                    height: hasDescription ? rpxToPx(28) : rpxToPx(36), flexShrink: 0
+                }} />
+                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={{
+                        flexShrink: 0,
+                        width: rpxToPx(28),
+                        height: rpxToPx(28),
+                        borderRadius: rpxToPx(14),
+                        marginRight: rpxToPx(8),
+                        backgroundColor: 'gray'
+                    }} />
+                    <Text className="timeline_time">time</Text>
+                </View>
+
+
+                <Text className="timeline_title"
+                    onClick={() => { }}>{(item.moment && item.moment.title) ? item.moment.title : item.title}</Text>
+
+                {
+                    hasDescription && <Text className="timeline_desc">{item.moment.description}</Text>
+                }
+                {/* space */}
+                <View style={{
+                    height: hasDescription ? rpxToPx(28) : rpxToPx(54), flexShrink: 0,
+
+                }} />
+
+            </View>
+            <View style={{ flex: 1 }} />
+
+            {
+                item.moment && item.moment.media && item.moment.media.length > 0 && <Image
+                    src={item.moment.media[0].url}
+                    mode="aspectFill"
+                    className="console_item_img" />
+            }
+            {/* {
+                itemValue(item)
+            } */}
+            <NewButton
+                color={getThemeColor('FAST')}
+                type={NewButtonType.alpha}
+                title={'Log'}
+                width={rpxToPx(128)}
+                height={rpxToPx(72)}
+                bold={true}
+                onClick={() => {
+                    jumpPage('/_health/pages/log_time')
+                }} />
+            <View className="seperate_line" style={{ left: count - 1 == index ? -rpxToPx(52) : rpxToPx(52) }} />
+        </View>
+    }
+
+    return <View style={{ backgroundColor: '#fff' }}>
+        {
+            timelineItem({
+                title: 'Start Fast'
+            }, 0, 4)
+        }
+    </View>
+}

src/_health/components/new_header.scss

@@ -0,0 +1,9 @@
+.new_header_bg {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    margin-bottom: 36px;
+    display: flex;
+    flex-direction: column;
+    margin-left: 52px;
+    margin-right: 52px;
+}

src/_health/components/new_header.tsx

@@ -0,0 +1,20 @@
+import { View, Text } from '@tarojs/components'
+import './new_header.scss'
+import { MainColorType } from '@/context/themes/color'
+import { rpxToPx } from '@/utils/tools'
+
+export enum NewHeaderType {
+    center = 'center',
+    center_subtitle = 'center_subtitle',
+    left = 'left',
+    left_subtitle = 'left_subtitle'
+}
+export default function NewHeader(props: { type: NewHeaderType, title: string, subtitle?: string }) {
+    return <View className='new_header_bg'>
+        <View className='h50 bold'>{props.title}</View>
+        {
+            (props.type == NewHeaderType.center_subtitle || props.type == NewHeaderType.left_subtitle) &&
+            <View className='h30' style={{ color: MainColorType.g01,marginTop:rpxToPx(12) ,lineHeight:rpxToPx(45)+'px'}}>{props.subtitle}</View>
+        }
+    </View>
+}

src/_health/pages/fast_sleep.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5"
+})

src/_health/pages/fast_sleep.tsx

@@ -0,0 +1,78 @@
+import { View, Text, Image, Swiper, SwiperItem } from "@tarojs/components";
+import './fast_sleep.scss'
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { rpxToPx } from "@/utils/tools";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import NewTimePicker from "../base/new_timepicker";
+import { IconCalendar } from "@/components/basic/Icons";
+import dayjs from "dayjs";
+import { MainColorType } from "@/context/themes/color";
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import Card from "../components/card";
+import FastSleepConsole from "../components/fast_sleep_console";
+
+export default function FastSleep() {
+    const health = useSelector((state: any) => state.health);
+    const [time, setTime] = useState(dayjs().format('HH:mm'))
+    const [count, setCount] = useState(0)
+
+    useEffect(() => {
+        let timer = setInterval(() => {
+            setCount(count => count + 1)
+        }, 1000)
+
+        return () => {
+            clearInterval(timer)
+        }
+    }, [])
+    return <View className="page_container">
+        <NewHeader type={NewHeaderType.left_subtitle}
+            title="Fast with Sleep"
+            subtitle="Tune Into Your Circadian Rhythm "
+        />
+        <Swiper indicatorColor='#999'
+            indicatorActiveColor='#333'
+            indicatorDots>
+            <SwiperItem>
+                <Card>
+                    <View style={{ height: 100 }}>
+                        <Text>hello world</Text>
+                    </View>
+                </Card>
+            </SwiperItem>
+            <SwiperItem>
+                <Card>
+                    <View style={{ height: 100 }}>
+                        <Text>hello world</Text>
+                    </View>
+                </Card>
+            </SwiperItem>
+            <SwiperItem>
+                <Card>
+                    <View style={{ height: 100 }}>
+                        <Text>hello world</Text>
+                    </View>
+                </Card>
+            </SwiperItem>
+            <SwiperItem>
+                <Card>
+                    <View style={{ height: 100 }}>
+                        <Text>hello world</Text>
+                    </View>
+                </Card>
+            </SwiperItem>
+        </Swiper>
+        <FastSleepConsole />
+        <NewButton type={NewButtonType.link} title="hello world" onClick={() => {
+
+        }} />
+        <NewButton type={NewButtonType.label} title="hello world" onClick={() => {
+
+        }} />
+        <NewButton type={NewButtonType.label} title="hello world" labelBorder onClick={() => {
+
+        }} />
+    </View>
+}

src/_health/pages/log_time.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents:{
+      // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+      // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText":"",
+    "navigationBarBackgroundColor":"#f5f5f5"
+  })

src/_health/pages/log_time.tsx

@@ -0,0 +1,100 @@
+import { View, Text, Image } from "@tarojs/components";
+import './log_time.scss'
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { rpxToPx } from "@/utils/tools";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import NewTimePicker from "../base/new_timepicker";
+import { IconCalendar } from "@/components/basic/Icons";
+import dayjs from "dayjs";
+import { useRouter } from "@tarojs/taro";
+
+let useRoute;
+let useNavigation;
+let scenario = '';
+if (process.env.TARO_ENV == 'rn') {
+    useRoute = require("@react-navigation/native").useRoute
+    useNavigation = require("@react-navigation/native").useNavigation
+}
+
+export default function LogTime() {
+    let router
+    let navigation;
+    if (useNavigation) {
+        navigation = useNavigation()
+    }
+
+    if (process.env.TARO_ENV == 'rn') {
+        router = useRoute()
+    }
+    else {
+        router = useRouter()
+    }
+
+    const isSingle = router.params.single == '1'
+    const isFast = router.params.window == 'FAST'
+    const isStart = router.params.is_start == '1'
+    const health = useSelector((state: any) => state.health);
+    const [time, setTime] = useState(dayjs().format('HH:mm'))
+    const [isToday, setIsToday] = useState(true)
+
+    useEffect(() => {
+
+    }, [])
+    return <View>
+        <View className='picker_time_card'>
+            <View className='picker_time_card_header' style={{ backgroundColor: '#fff' }}>
+                <View style={{ flex: 1 }} />
+                <NewButton
+                    type={NewButtonType.gray}
+                    title={isToday ? "Today" : "Yesterday"}
+                    fontSize={rpxToPx(34)}
+                    width={rpxToPx(196)}
+                    height={rpxToPx(84)}
+                    onClick={() => {
+                        setIsToday(!isToday)
+                    }}
+                />
+                <View style={{ width: rpxToPx(12) }} />
+                <NewButton
+                    type={NewButtonType.alpha}
+                    color={getThemeColor('FAST')}
+                    title={time}
+                    fontSize={rpxToPx(34)}
+                    width={rpxToPx(196)}
+                    height={rpxToPx(84)}
+                    onClick={() => {
+
+                    }}
+                />
+                <View style={{ flex: 1 }} />
+                {
+                    <View className='border_footer_line' />
+                }
+            </View>
+            {
+                <NewTimePicker time={time} onChange={(e) => {
+                    setTime(e)
+                }} color={getThemeColor(health.mode)} />
+            }
+            {
+                <View className='picker_time_card_footer'>
+                    <IconCalendar width={rpxToPx(24)} color='#5C7099' />
+                    <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>Scheduled for xxx today</Text>
+                </View>
+            }
+
+        </View>
+        <NewButton
+            color={getThemeColor('FAST')}
+            type={NewButtonType.fill}
+            title={'Log'}
+            width={rpxToPx(670)}
+            height={rpxToPx(96)}
+            bold={true}
+            onClick={() => {
+
+            }} />
+    </View>
+}

src/_health/pages/long_fast.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5"
+})

src/_health/pages/long_fast.scss

@@ -0,0 +1,9 @@
+.long_fast_card{
+    position: relative;
+    padding-bottom: 103px;
+    padding-top: 104px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+}

src/_health/pages/long_fast.tsx

@@ -0,0 +1,35 @@
+import { View, Text, Image } from "@tarojs/components";
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import Card from "../components/card";
+import './long_fast.scss'
+import { MainColorType } from "@/context/themes/color";
+import { rpxToPx } from "@/utils/tools";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+
+export default function LongFast() {
+    return <View className="page_container">
+        <NewHeader type={NewHeaderType.left_subtitle}
+            title="Long Fast "
+            subtitle="Prolonged Fasting beyond 24 hours"
+        />
+        <Card>
+            <View className="long_fast_card">
+                <View className="h50 bold">00:00:00</View>
+                <View className="h24" style={{ color: MainColorType.g02 }}>Goal 24 hours</View>
+                <View style={{ height: rpxToPx(33) }} />
+                <NewButton
+                    type={NewButtonType.fill}
+                    width={rpxToPx(538)}
+                    height={rpxToPx(96)}
+                    color={getThemeColor('FAST')}
+                    title="Start fast"
+                    onClick={() => {
+                        jumpPage('./long_fast_setting')
+                    }}
+                />
+            </View>
+        </Card>
+    </View>
+}

src/_health/pages/long_fast_setting.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "Long fast",
+    "navigationBarBackgroundColor": "#f5f5f5"
+})

src/_health/pages/long_fast_setting.scss

@@ -0,0 +1,28 @@
+.long_fast_goal_card{
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: '100%';
+    width: 670px;
+}
+
+.long_fast_card_header{
+    display: flex;
+    flex-direction: row;
+    padding-left: 52px;
+    padding-right: 40px;
+    box-sizing: border-box;
+    align-items: center;
+    height: 128px;
+    width: 670px;
+    flex-shrink: 0;
+    flex: 1;
+}
+
+.long_fast_card_footer{
+    height: 128px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}

src/_health/pages/long_fast_setting.tsx

@@ -0,0 +1,91 @@
+import { View, Text } from "@tarojs/components";
+import './long_fast_setting.scss'
+import Card from "../components/card";
+import NewButton, { NewButtonType } from "../base/new_button";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import { rpxToPx } from "@/utils/tools";
+import { MainColorType } from "@/context/themes/color";
+import { useState } from "react";
+import NewDurationPicker from "../base/new_durationpicker";
+import dayjs from "dayjs";
+import NewTimePicker from "../base/new_timepicker";
+
+export default function LongFastSetting() {
+    const [showGoal, setShowGoal] = useState(true)
+    const [isToday, setIsToday] = useState(true)
+    return <View className="page_container">
+        <Card>
+            <View style={{ position: 'relative' }}>
+                <View className="long_fast_card_header">
+                    <View className="h34">Goal</View>
+                    <View style={{ flex: 1 }} />
+                    <NewButton
+                        type={showGoal ? NewButtonType.alpha : NewButtonType.gray}
+                        color={getThemeColor('FAST')}
+                        width={rpxToPx(196)}
+                        height={rpxToPx(84)}
+                        title="1天24小时"
+                        onClick={() => {
+                            setShowGoal(true)
+                        }}
+                    />
+                </View>
+                {
+                    showGoal && <NewDurationPicker color={MainColorType.fast} />
+                }
+                <View className="long_fast_card_footer">
+                    <View className="h26" style={{ color: MainColorType.g02 }}>Expect to break fast at 10:00 tomorrow</View>
+                </View>
+            </View>
+
+
+        </Card>
+        <View style={{ height: rpxToPx(36) }} />
+        <Card>
+            <View style={{ position: 'relative' }}>
+                <View className="long_fast_card_header">
+                    <View className="h34">Starts</View>
+                    <View style={{ flex: 1 }} />
+                    <NewButton
+                        type={NewButtonType.gray}
+                        width={rpxToPx(196)}
+                        height={rpxToPx(84)}
+                        title={isToday ? "Today" : "Yesterday"}
+                        onClick={() => {
+                            setIsToday(!isToday)
+                        }}
+                    />
+                    <View style={{ width: rpxToPx(12) }} />
+                    <NewButton
+                        type={!showGoal ? NewButtonType.alpha : NewButtonType.gray}
+                        color={getThemeColor('FAST')}
+                        width={rpxToPx(196)}
+                        height={rpxToPx(84)}
+                        title={dayjs().format('HH:mm')}
+                        onClick={() => {
+                            setShowGoal(false)
+                        }}
+                    />
+                </View>
+                {
+                    !showGoal && <NewTimePicker color={MainColorType.fast} onChange={(e) => {
+
+                    }} />
+                }
+            </View>
+        </Card>
+        <View style={{ flex: 1 }} />
+        <View style={{marginBottom:rpxToPx(128),display:'flex',alignItems:'center',justifyContent:'center'}}>
+            <NewButton type={NewButtonType.fill}
+                color={MainColorType.fast}
+                width={rpxToPx(670)}
+                height={rpxToPx(96)}
+                title="开始"
+                onClick={() => {
+
+                }}
+            />
+        </View>
+
+    </View>
+}

src/_health/pages/post_result.tsx

@@ -0,0 +1,5 @@
+import { View } from "@tarojs/components";
+
+export default function PostResult(){
+    return <View></View>
+}

src/app.config.ts

@@ -6,7 +6,7 @@ const appConfig = defineAppConfig({
     'pages/clock/Clock',
     // 'pages/clock/Suggest',
     // 'pages/clock/SetGoal',
-    
+
     // 'pages/demo',
     // 'pages/food/Food',
     'pages/account/Login',
@@ -68,7 +68,12 @@ const appConfig = defineAppConfig({
         'pages/move_setting',
         'pages/move_setting_reminder',
         'pages/move_setting_time',
-        'pages/active_plan'
+        'pages/active_plan',
+        'pages/log_time',
+        'pages/fast_sleep',
+        'pages/long_fast',
+        'pages/long_fast_setting',
+        'pages/post_result'
       ]
     }
   ],

src/app.scss

@@ -380,7 +380,7 @@ page {
 //     }
 // }
 
-.seperate_line{
+.seperate_line {
     height: 2px;
     transform: scaleY(0.5);
     background-color: #B2B2B2;
@@ -392,7 +392,7 @@ page {
 }
 
 //历史记录 首页、
-.seperate_light_line{
+.seperate_light_line {
     height: 2px;
     transform: scaleY(0.5);
     background-color: #B2B2B2;
@@ -414,9 +414,59 @@ page {
     bottom: 0;
 }
 
-.canvas{
-}
+.canvas {}
 
-.cell_hover{
+.cell_hover {
     background-color: #E5E5E5;
+}
+
+.page_container{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100vh;
+}
+
+.h50 {
+    font-size: 50px;
+    line-height: 60px;
+}
+
+.h34 {
+    font-size: 34px;
+    line-height: 42px;
+}
+
+.h30 {
+    font-size: 30px;
+    line-height: 36px;
+}
+
+.h28 {
+    font-size: 28px;
+    line-height: 34px;
+}
+
+.h26 {
+    font-size: 26px;
+    line-height: 32px;
+}
+
+.h24 {
+    font-size: 24px;
+    line-height: 28px;
+}
+
+.h22 {
+    font-size: 22px;
+    line-height: 26px;
+}
+
+.h20 {
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.bold {
+    font-weight: bold;
 }

src/context/themes/color.tsx

@@ -35,4 +35,16 @@ export enum MainColorType {
     success = '#00b218',
     blue = '#0055ff',
 
+    black = '#000000',
+    white = '#ffffff',
+
+    //gray
+    g01 = '#999999',
+    g02 = '#b2b2b2',
+    g03 = '#d9d9d9',
+    g04 = '#e5e5e5',
+    g05 = '#f5f5f5',
+
+
+
 }

src/features/health/MainConsole.tsx

@@ -171,13 +171,13 @@ export default function MainConsole(props: { type: WindowType }) {
             }
             else if (health.mode == 'ACTIVE' && item.action == 'POST_MOMENT') {
                 return <NewButton
-                color={themeColor}
-                type={NewButtonType.border}
-                title={operateTitle(item)}
-                width={rpxToPx(128)}
-                height={rpxToPx(72)}
-                bold={true}
-                onClick={() => record(item)} />
+                    color={themeColor}
+                    type={NewButtonType.border}
+                    title={operateTitle(item)}
+                    width={rpxToPx(128)}
+                    height={rpxToPx(72)}
+                    bold={true}
+                    onClick={() => record(item)} />
                 // return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: '#fff', borderColor: themeColor, borderWidth: 1, borderStyle: 'solid' }} 
                 // onClick={() => record(item)}>{operateTitle(item)}</View>
             }
@@ -821,6 +821,38 @@ export default function MainConsole(props: { type: WindowType }) {
 
             </View>
         }
+        {
+            health.mode == 'FAST' && <View className="console_active_bg" onClick={() => {
+                if (!user.isLogin) {
+                    jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+                    return
+                }
+                jumpPage('/_health/pages/fast_sleep')
+            }}>
+                <View className="console_active">
+                    <Image className="active_icon" src={require('@assets/_health/fast.png')} />
+                    <Text className="active_text">Fast with sleep</Text>
+                    <Image className="cell_arrow" src={require('@assets/_health/cell_arrow.png')} />
+                </View>
+
+            </View>
+        }
+        {
+            health.mode == 'FAST' && <View className="console_active_bg" onClick={() => {
+                if (!user.isLogin) {
+                    jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+                    return
+                }
+                jumpPage('/_health/pages/long_fast')
+            }}>
+                <View className="console_active">
+                    <Image className="active_icon" src={require('@assets/_health/fast.png')} />
+                    <Text className="active_text">Long fast</Text>
+                    <Image className="cell_arrow" src={require('@assets/_health/cell_arrow.png')} />
+                </View>
+
+            </View>
+        }
         <View className="circle" />
 
         {

src/pages/clock/Clock.config.ts

@@ -9,5 +9,5 @@ export default definePageConfig({
     //     }
     // },
     "disableScroll": true,
-    "navigationStyle":"custom"
+    "navigationStyle":"custom",
 })

src/pages/clock/Clock.tsx

@@ -116,8 +116,8 @@ export default function Clock() {
         return <View />
 
     return <View style={{ flex: 1, position: 'relative' }}>
-        <View style={{ height: navigationBarHeight, backgroundColor: MainColorType.bg }} />
-        <View className="navi-bar" style={{ height: navigationBarHeight, zIndex: 1000, backgroundColor: showCalendar ? '#fff' : MainColorType.bg }}>
+        <View style={{ height: navigationBarHeight, backgroundColor: MainColorType.g05 }} />
+        <View className="navi-bar" style={{ height: navigationBarHeight, zIndex: 1000, backgroundColor: showCalendar ? '#fff' : MainColorType.g05 }}>
             <View className="navi-streak" style={{
                 height: 44,
                 marginTop: systemInfo.statusBarHeight,