update

src/_health/components/card.scss

@@ -1,7 +1,7 @@
 .main_card {
     background-color: #fff;
     display: flex;
-    border-radius: 36px;
+    border-radius: 26px;
     margin-left: 26px;
     width: 698px;
     flex-direction: column;

src/_health/pages/edit_schedule.scss

@@ -18,16 +18,6 @@
     background-color: #fff;
 }
 
-.item_line{
-    height: 2px;
-    background-color: #B2B2B2;
-    transform: scaleY(0.5);
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
 .item_left{
     display: flex;
     flex-direction: column;

src/_health/pages/edit_schedule.tsx

@@ -100,7 +100,7 @@ export default function EditSchedule() {
                         <Text className='item_name'>{item.title}</Text>
                     </View>
                     <Text className='item_time'>{item.time}</Text>
-                    <View className='item_line' />
+                    <View className='border_footer_line' />
                 </View>
                 // </AtSwipeAction>
             })

src/_health/pages/guide_active.tsx

@@ -147,7 +147,7 @@ export default function GuideActive() {
                                 }} style={itemStyle(obj)}>{obj.time}</View>
                             }
 
-                            <View className='item_line' />
+                            <View className='border_footer_line' />
                         </View>
                     </View>
                 })
@@ -193,7 +193,7 @@ export default function GuideActive() {
                             }
 
                             {
-                                i < items.length - 1 && <View className='item_line' />
+                                i < items.length - 1 && <View className='border_footer_line' />
                             }
                         </View>
                     </View>

src/_health/pages/guide_eat.tsx

@@ -147,7 +147,7 @@ export default function GuideEat() {
                                 }} style={itemStyle(obj)}>{obj.time}</View>
                             }
 
-                            <View className='item_line' />
+                            <View className='border_footer_line' />
                         </View>
                     </View>
                 })
@@ -193,7 +193,7 @@ export default function GuideEat() {
                             }
 
                             {
-                                i < items.length - 1 && <View className='item_line' />
+                                i < items.length - 1 && <View className='border_footer_line' />
                             }
                         </View>
                     </View>

src/_health/pages/guide_fast.tsx

@@ -141,7 +141,7 @@ export default function GuideFast() {
                             }
 
                             {
-                                i < items.length - 1 && <View className='item_line' />
+                                i < items.length - 1 && <View className='border_footer_line' />
                             }
                         </View>
                     </View>

src/_health/pages/guide_full.tsx

@@ -120,7 +120,7 @@ export default function GuideFull() {
                             }
 
                             {
-                                i < items.length - 1 && <View className='item_line' />
+                                i < items.length - 1 && <View className='border_footer_line' />
                             }
                         </View>
                     </View>

src/_health/pages/guide_sleep.tsx

@@ -135,7 +135,7 @@ export default function GuideSleep() {
                             }
 
                             {
-                                i < items.length - 1 && <View className='item_line' />
+                                i < items.length - 1 && <View className='border_footer_line' />
                             }
                         </View>
                     </View>

src/_health/pages/log_time.tsx

@@ -53,6 +53,7 @@ export default function LogTime() {
     const [expandIndex, setExpandIndex] = useState(router.params.initIndex ? router.params.initIndex : tapIndex)
     const [array, setArray] = useState<any>([])
     const [errors, setErrors] = useState<any>([])
+    const [showSuccess,setShowSuccess] = useState(false)
     const [conflicts, setConflicts] = useState<any>([])
     const [loaded, setLoaded] = useState(false)
     const [autoCheck, setAutoCheck] = useState(false)
@@ -117,6 +118,7 @@ export default function LogTime() {
         fastWithSleep().then(res => {
             setData(res)
             initDatas(res)
+            setAutoCheck(true)
         })
 
     }
@@ -426,6 +428,7 @@ export default function LogTime() {
             else {
                 setErrors((res as any).error_messages)
                 setConflicts((res as any).conflict_schedule_ids)
+                setShowSuccess(true)
                 setAutoCheck(true)
                 var tempList = JSON.parse(JSON.stringify(array))
                 tempList.map(item => {
@@ -734,7 +737,7 @@ export default function LogTime() {
                     })
                 }
                 {
-                    autoCheck && errors.length == 0 && <View className="error_bg" style={{ backgroundColor: MainColorType.success + '1A' }}>
+                    autoCheck && showSuccess && errors.length == 0 && <View className="error_bg" style={{ backgroundColor: MainColorType.success + '1A' }}>
                         <View className="error_icon_bg" style={{ backgroundColor: MainColorType.success }}>
                             <Image src={require('@assets/_health/tip_check.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
                         </View>

src/_health/pages/schedules.scss

@@ -13,8 +13,8 @@
 }
 
 .schedule_item {
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: 28px;
+    padding-right: 28px;
     height: 128px;
     align-items: center;
     display: flex;
@@ -28,16 +28,6 @@
     background-color: #E5E5E5;
 }
 
-.item_line{
-    height: 2px;
-    background-color: #B2B2B2;
-    transform: scaleY(0.5);
-    position: absolute;
-    left: 100px;
-    right: 0;
-    bottom: 0;
-}
-
 .item_left2{
     display: flex;
     flex-direction: row;
@@ -71,7 +61,7 @@
 .edit_item_time{
     color: #000;
     font-size: 34px;
-    width: 160px;
+    width: 138px;
     height: 84px;
     display: flex;
     align-items: center;
@@ -96,7 +86,7 @@
     flex-direction: row;
     background-color: #fff;
     align-items: center;
-    padding-left: 40px;
+    padding-left: 28px;
 }
 
 .toolbar_btn{
@@ -136,7 +126,7 @@
     flex-direction: row;
     align-items: center;
     background-color: #FF00001A;
-    padding-left: 42px;
+    padding-left: 28px;
     box-sizing: border-box;
     color: #000;
     font-size: 24px;
@@ -148,7 +138,7 @@
     flex-direction: row;
     align-items: center;
     background-color: #00B2181A;
-    padding-left: 42px;
+    padding-left: 28px;
     box-sizing: border-box;
     color: #000;
     font-size: 24px;

src/_health/pages/schedules.tsx

@@ -10,11 +10,13 @@ import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import Modal from "@/components/layout/Modal.weapp";
 import TimePicker from "@/features/common/TimePicker";
 import showAlert from "@/components/basic/Alert";
-import { IconAdd } from "@/components/basic/Icons";
+import { IconAdd, IconError, IconNotificationOff, IconSuccess } from "@/components/basic/Icons";
 import AddLabel from "../components/add_label";
 import NewButton, { NewButtonType } from "../base/new_button";
 import showActionSheet from "@/components/basic/ActionSheet";
 import Card from "../components/card";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
+import { MainColorType } from "@/context/themes/color";
 
 let useRoute;
 let useNavigation;
@@ -53,6 +55,9 @@ export default function Schedules() {
     const selMode = router.params.mode;
 
     useEffect(() => {
+        console.log(health.mode)
+        console.log(selMode)
+        console.log('---------------')
         if (selMode == '' && router.params.schedules) {
             setList(JSON.parse(router.params.schedules))
             if (router.params.errors) {
@@ -96,7 +101,7 @@ export default function Schedules() {
                 windows = 'DAY,NIGHT';
                 break
             case 'NIGHT':
-                windows = 'ACTIVE,DAY';
+                windows = 'NIGHT,DAY';
                 break
         }
         getSchedules({ window: windows }).then(res => {
@@ -204,7 +209,7 @@ export default function Schedules() {
                         title: '日程冲突',
                         content: '我们在您的当前日程和另一个日程之间发现了个或多个时间冲突。',
                         showCancel: false,
-                        confirmTitle:'日程冲突',
+                        confirmTitle: '日程冲突',
                         confirm: () => {
                             // jumpPage(`./schedules?mode=&schedules=${JSON.stringify((res as any).schedules)}&errors=${JSON.stringify((res as any).error_messages)}`)
                         }
@@ -260,8 +265,13 @@ export default function Schedules() {
     function itemStyle(obj) {
         if (obj.is_conflict) {
             return {
-                backgroundColor: '#FF00001A',
-                color: '#FF0000'
+                // backgroundColor: '#FF00001A',
+                // color: '#FF0000'
+                backgroundColor: '#B2B2B21A',
+                color: '#000',
+                borderWidth:2,
+                borderColor:'#FF0000',
+                borderStyle:'solid'
             }
         }
         if (errors.length > 0) {
@@ -315,15 +325,31 @@ export default function Schedules() {
     return <View>
         <View style={{ display: 'flex', flexDirection: 'column' }}>
             <View className='schedule_header_title'>{getTitle()}</View>
-            {
-                errors.map((item, index) => {
-                    return <View key={index} className='error_tip'>{item}</View>
-                })
-            }
-            {
-                showAutoSave && <View className='success_tip'>已自动保存</View>
-            }
+
             <Card>
+                {
+                    errors.map((item, index) => {
+                        return <View key={index} className='error_tip'>
+                            <StatusIndicator type={StatusType.img}
+                                fontColor="#000"
+                                fontSize={rpxToPx(24)}
+                                text={item} color={MainColorType.error}>
+                                <IconError color="#fff" width={rpxToPx(26)} />
+                            </StatusIndicator>
+                        </View>
+                        // return <View key={index} className='error_tip'>{item}</View>
+                    })
+                }
+                {
+                    showAutoSave && <View className='success_tip'>
+                        <StatusIndicator type={StatusType.img}
+                            fontColor="#000"
+                            fontSize={rpxToPx(24)}
+                            text='已自动保存' color={MainColorType.success}>
+                            <IconSuccess color="#fff" width={rpxToPx(26)} />
+                        </StatusIndicator>
+                    </View>
+                }
                 {
                     list.map((obj, i) => {
                         return <View className='schedule_item' key={i} style={{
@@ -333,17 +359,26 @@ export default function Schedules() {
 
                         }}>
                             <View className='item_left2'>
-                                <View className='item_index'>
+                                {/* <View className='item_index'>
                                     <View className="index_point" style={{ backgroundColor: getThemeColor(obj.window) }} />
                                 </View>
-                                <Text className='item_name'>{obj.title}</Text>
+                                <Text className='item_name'>{obj.title}</Text> */}
+                                <StatusIndicator
+                                    type={obj.is_conflict?StatusType.img:StatusType.normal}
+                                    text={obj.title}
+                                    fontSize={rpxToPx(34)}
+                                    fontColor="#000"
+                                    color={obj.is_conflict?MainColorType.error:errors.length==0?getThemeColor(obj.window):'transparent'} >
+                                    {
+                                        obj.is_conflict && <IconError color="#fff" width={rpxToPx(26)} />
+                                    }
+                                    
+                                </StatusIndicator>
                                 <View style={{ flex: 1 }} />
                                 {
-                                    obj.is_conflict && <Text className="conflict_tip">时间冲突，请调整</Text>
-                                }
-                                {
-                                    !obj.is_all_day && !obj.reminder && <Image src={require('@assets/images/notification_off.png')} className='notification_icon' />
+                                    !obj.is_all_day && !obj.reminder && <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                                 }
+                                <View style={{ width: rpxToPx(12) }} />
                                 {
                                     !obj.is_all_day && <View className='edit_item_time' onClick={() => {
                                         setSelIndex(i)
@@ -352,20 +387,27 @@ export default function Schedules() {
                                     }} style={itemStyle(obj)}>{obj.time}</View>
                                 }
 
-                                {
-                                    i < list.length - 1 && <View className='item_line' />
-                                }
+
                             </View>
+                            {
+                                i < list.length - 1 && <View className='border_footer_line' style={{ left: rpxToPx(66) }} />
+                            }
                         </View>
                     })
                 }
             </Card>
-                <View style={{height:20,flexShrink:0}}/>
+            <View style={{ height: 20, flexShrink: 0 }} />
             {
                 selMode != '' && selMode != 'DAY' && selMode != 'NIGHT' && <Card><View className='item_add'
                     onClick={() => add()}>
-                    <IconAdd color={getAddColor()} width={rpxToPx(34)} />
-                    <View className='toolbar_btn' style={{ color: getAddColor() }} >添加</View>
+                        <StatusIndicator type={StatusType.img}
+                            fontColor={getAddColor()}
+                            fontSize={rpxToPx(34)}
+                            text='添加' color={getAddColor()}>
+                            <IconAdd color="#fff" width={rpxToPx(26)} />
+                        </StatusIndicator>
+                    {/* <IconAdd color={getAddColor()} width={rpxToPx(34)} />
+                    <View className='toolbar_btn' style={{ color: getAddColor() }} >添加</View> */}
                     <View style={{ flex: 1 }} />
                 </View></Card>
             }

src/_health/pages/schedules_edit.scss

@@ -28,16 +28,6 @@
     background-color: #E5E5E5;
 }
 
-.item_line{
-    height: 2px;
-    background-color: #B2B2B2;
-    transform: scaleY(0.5);
-    position: absolute;
-    left: 100px;
-    right: 0;
-    bottom: 0;
-}
-
 .item_left2{
     display: flex;
     flex-direction: row;

src/_health/pages/schedules_edit.tsx

@@ -357,7 +357,7 @@ export default function SchedulesEdit() {
                                                     setList([...list])
                                                 }} />} */}
                                             {
-                                                i < item.list.length - 1 && <View className='item_line' />
+                                                i < item.list.length - 1 && <View className='border_footer_line' />
                                             }
 
                                         </View>

src/_health/pages/schedules_list.scss

@@ -28,16 +28,6 @@
     background-color: #E5E5E5;
 }
 
-.item_line {
-    height: 2px;
-    background-color: #B2B2B2;
-    transform: scaleY(0.5);
-    position: absolute;
-    left: 100px;
-    right: 0;
-    bottom: 0;
-}
-
 .item_left {
     display: flex;
     flex-direction: row;

src/_health/pages/schedules_list.tsx

@@ -284,7 +284,7 @@ export default function SchedulesList() {
 
                                         <Text className='item_time'>{obj.time_label?obj.time_label:obj.time}</Text>
                                         {
-                                            i < item.list.length - 1 && <View className='item_line' />
+                                            i < item.list.length - 1 && <View className='border_footer_line' />
                                         }
 
                                     </View>

src/_health/pages/streak_calendar.scss

@@ -0,0 +1,12 @@
+.streak_toolbar_btn{
+    height: 72px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: row;
+    // justify-content: center;
+    align-items: center;
+    padding-left: 48px;
+    padding-right: 48px;
+    margin-right: 12px;
+    flex-shrink: 0;
+}

src/_health/pages/streak_calendar.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { streaks } from "@/services/health";
 import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
 import NewButton, { NewButtonType } from "../base/new_button";
+import { MainColorType } from "@/context/themes/color";
 
 
 export default function StreakCalendar() {
@@ -19,7 +20,7 @@ export default function StreakCalendar() {
     const [spaces, setSpaces] = useState<any>([])
     const [days, setDays] = useState<any>([])
     const [year, setYear] = useState(new Date().getFullYear())
-    const [month, setMonth] = useState(new Date().getMonth()+1)
+    const [month, setMonth] = useState(new Date().getMonth() + 1)
     const [current, setCurrent] = useState<any>(null)
     const [loaded, setLoaded] = useState(false)
 
@@ -199,9 +200,9 @@ export default function StreakCalendar() {
         }
     }
 
-    function currentCount(type){
-        const scenario = getScenario(health.windows,type)
-        if (scenario.current_streak.days>0) return scenario.current_streak.days
+    function currentCount(type) {
+        const scenario = getScenario(health.windows, type)
+        if (scenario.current_streak.days > 0) return scenario.current_streak.days
         return scenario.current_streak.days
     }
 
@@ -260,19 +261,42 @@ export default function StreakCalendar() {
 
     return <View>
         <NewHeader type={NewHeaderType.left} title="Calendar" />
-        <ScrollView style={{ width: rpxToPx(750),flexDirection:'row',display:'flex',height:100 }} scrollX enableFlex showScrollbar={false}>
-            <View onClick={() => setMode('EAT')}>
-                <Text>Eat<Text>{currentCount('EAT')}</Text></Text>
-            </View>
-            <View onClick={() => setMode('ACTIVE')}>
-                <Text>Active<Text>{currentCount('ACTIVE')}</Text></Text>
-            </View>
-            <View onClick={() => setMode('FAST')}>
-                <Text>Fast<Text>{currentCount('FAST')}</Text></Text>
-            </View>
-            <View onClick={() => setMode('SLEEP')}>
-                <Text>Sleep<Text>{currentCount('SLEEP')}</Text></Text>
-            </View>
+        <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72) }} scrollX enableFlex showScrollbar={false}>
+            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
+            <NewButton type={NewButtonType.img} onClick={() => setMode('EAT')}>
+                <View className="streak_toolbar_btn"
+                    style={{ backgroundColor: mode == 'EAT' ? getThemeColor('EAT') + '1A' : 'transparent' }}
+                >
+                    <Text className={mode == 'EAT' ? 'bold h30' : 'h30'}
+                        style={{ color: mode == 'EAT' ? getThemeColor('EAT') : MainColorType.g01 }}>Eat <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{currentCount('EAT')}</Text></Text>
+                </View>
+            </NewButton>
+
+            <NewButton type={NewButtonType.img} onClick={() => setMode('ACTIVE')}>
+                <View className="streak_toolbar_btn"
+                    style={{ backgroundColor: mode == 'ACTIVE' ? getThemeColor('ACTIVE') + '1A' : 'transparent' }}
+                >
+                    <Text className={mode == 'ACTIVE' ? 'bold h30' : 'h30'}
+                        style={{ color: mode == 'ACTIVE' ? getThemeColor('ACTIVE') : MainColorType.g01 }}>Active<Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}> {currentCount('ACTIVE')}</Text></Text>
+                </View>
+            </NewButton>
+            <NewButton type={NewButtonType.img} onClick={() => setMode('FAST')}>
+                <View className="streak_toolbar_btn"
+                    style={{ backgroundColor: mode == 'FAST' ? getThemeColor('FAST') + '1A' : 'transparent' }}
+                >
+                    <Text className={mode == 'FAST' ? 'bold h30' : 'h30'}
+                        style={{ color: mode == 'FAST' ? getThemeColor('FAST') : MainColorType.g01 }}>Fast<Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}> {currentCount('FAST')}</Text></Text>
+                </View>
+            </NewButton>
+            <NewButton type={NewButtonType.img} onClick={() => setMode('SLEEP')}>
+                <View className="streak_toolbar_btn"
+                    style={{ backgroundColor: mode == 'SLEEP' ? getThemeColor('SLEEP') + '1A' : 'transparent' }}
+                >
+                    <Text className={mode == 'SLEEP' ? 'bold h30' : 'h30'}
+                        style={{ color: mode == 'SLEEP' ? getThemeColor('SLEEP') : MainColorType.g01 }}>Sleep<Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}> {currentCount('SLEEP')}</Text></Text>
+                </View>
+            </NewButton>
+            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
         </ScrollView>
         {
             content()

src/_health/pages/streak_weekly.tsx

@@ -1,8 +1,9 @@
+import Modal from "@/components/layout/Modal.weapp";
 import { ColorType } from "@/context/themes/color";
 import Streaks from "@/features/trackTimeDuration/components/Streaks";
 import WeekCalendar from "@/features/trackTimeDuration/components/WeekCalendar";
 import { rpxToPx } from "@/utils/tools";
-import { View,Text } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -15,7 +16,20 @@ export default function StreakWeekly() {
     // const [count, setCount] = useState(0)
     const [showEatCalendar, setShowEatCalendar] = useState(false)
 
-    const {t} = useTranslation()
+    const { t } = useTranslation()
+
+    function eatCalendarContent() {
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <View className="index_section">
+                <Text className="index_section_title">{t('feature.track_time_duration.weekly.title')}</Text>
+            </View>
+            <WeekCalendar isFastSleep={false} />
+            <View className="vip_calendar" style={{ marginBottom: 40 }} onClick={() => setShowEatCalendar(false)}>
+                <Text style={{ color: '#fff', fontWeight: 'bold' }}>{t('feature.track_time_duration.weekly.back')}</Text>
+            </View>
+        </View>
+    }
+    
     return <View>
         <View style={{ display: 'flex', flexDirection: 'column' }}>
             <View className="index_section">
@@ -30,5 +44,17 @@ export default function StreakWeekly() {
 
             </View>
         </View>
+        {
+            showEatCalendar && <Modal
+                testInfo={null}
+                dismiss={() => {
+                    setShowEatCalendar(false)
+                }}
+                confirm={() => { }}>
+                {
+                    eatCalendarContent()
+                }
+            </Modal>
+        }
     </View>
 }

src/_health/pages/timeline_detail.tsx

@@ -205,7 +205,7 @@ export default function TimelineDetail() {
 
     function mediaCount() {
         let count = 0;
-        list.map(moment => {
+        list && list.map(moment => {
             moment.media.map((obj) => {
                 count++
             })
@@ -266,7 +266,7 @@ export default function TimelineDetail() {
                 {
                     <View className="media" style={{ marginRight: mediaCount() == 4 ? 80 : 0 }}>
                         {
-                            list.map(moment => {
+                            list && list.map(moment => {
                                 return moment.media.map((obj, j) => {
                                     return <Image className="media_item" mode="aspectFill" onClick={() => { }} src={obj.url} key={j * 10} />
                                 })

src/components/layout/Footer.scss

@@ -3,7 +3,7 @@
     position: fixed;
     left: 0;
     right: 0;
-    bottom: 0;
+    bottom: 84px;
     z-index: 100;
     flex-direction: column;
     display: flex;

src/features/health/HistoryItem.tsx

@@ -173,7 +173,7 @@ export default function HistoryItem(props: {
         }
         return ''
     }
-
+ 
     return <View className="history_item2">
         <View className="history_date">{historyDate()}</View>
         <View className="history_content">

src/features/health/MainConsole.tsx

@@ -972,9 +972,6 @@ export default function MainConsole(props: { type: WindowType }) {
                     title={switchText()}
                     onClick={tapSwitchBtn}
                 >
-                    <View style={{ marginRight: rpxToPx(8) }}>
-                        <IconSwitch color={MainColorType.link} width={rpxToPx(26)} />
-                    </View>
                 </NewButton>
             </View>
             {/* {

src/features/health/MainHistory.tsx

@@ -12,6 +12,7 @@ import { getThemeColor } from "./hooks/health_hooks";
 import { TimeFormatter } from "@/utils/time_format";
 import dayjs from "dayjs";
 import { MainColorType } from "@/context/themes/color";
+import { IconCellArrow } from "@/components/basic/Icons";
 
 let lastMode = ''
 export default function MainHistory(props: { type?: string, fast_type?: string }) {
@@ -170,12 +171,13 @@ export default function MainHistory(props: { type?: string, fast_type?: string }
                             return <Image src={item} key={index} className="archived_img" mode="aspectFill" />
                         })
                     }
-                    <Image src={require('@assets/_health/cell_arrow.png')} style={{
+                    <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
+                    {/* <Image src={require('@assets/_health/cell_arrow.png')} style={{
                         width: rpxToPx(24),
                         height: rpxToPx(24),
                         marginLeft: rpxToPx(4),
 
-                    }} />
+                    }} /> */}
                 </View>
             </View>
         }

src/features/health/calendar.scss

@@ -3,7 +3,7 @@
 }
 
 .calendar_header {
-    width: 670px;
+    width: 698px;
     margin-top: 32px;
     margin-bottom: 22px;
     display: flex;
@@ -48,9 +48,9 @@
     flex-direction: column;
     align-items: center;
     background-color: #f5f5f5;
-    width: 670px;
-    margin-left: 40px;
-    margin-bottom: 40px;
+    width: 698px;
+    margin-left: 26px;
+    margin-bottom: 26px;
     border-radius: 28px;
 }
 
@@ -59,55 +59,91 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    padding-bottom: 4px;
+    padding-bottom: 8px;
 
 }
 
 .left_calendar_item {
-    height: 74px;
+    position: relative;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background-color: #26B7FF1A;
-    border-top-left-radius: 37px;
-    border-bottom-left-radius: 37px;
+    border-top-left-radius: 30px;
+    border-bottom-left-radius: 30px;
 }
 
 .right_calendar_item {
-    height: 74px;
+    position: relative;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background-color: #26B7FF1A;
-    border-top-right-radius: 37px;
-    border-bottom-right-radius: 37px;
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
 }
 
 .full_calendar_item {
-    height: 74px;
+    position: relative;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background-color: #26B7FF1A;
-    border-radius: 37px;
+    border-radius: 30px;
 }
 
 .today1 {
     background-color: #000000;
-    height: 74px;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     ;
-    border-radius: 37px;
+    border-radius: 30px;
+}
+
+.today2 {
+    height: 52px;
+    width: 52px;
+    background-color: #000;
+    border-radius: 26px;
+    position: absolute;
+    top: 6px;
+    left: 23px;
+    z-index: 0;
+}
+
+.fullToday {
+    height: 60px;
+    width: 60px;
+    border-radius: 30px;
+    position: absolute;
+    top: 0px;
+    left: 17px;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.today3 {
+    height: 52px;
+    width: 52px;
+    box-sizing: border-box;
+    border: solid 2px #000;
+    border-radius: 26px;
 }
 
 .today_content {
@@ -116,7 +152,8 @@
 }
 
 .center_calendar_item {
-    height: 74px;
+    position: relative;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
@@ -126,7 +163,7 @@
 }
 
 .calendar_item {
-    height: 74px;
+    height: 60px;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
@@ -137,27 +174,32 @@
 
 .left_day {
     color: #26B7FF;
-    font-size: 34px;
+    font-size: 30px;
+    letter-spacing: -3px;
 }
 
 .right_day {
     color: #26B7FF;
-    font-size: 34px;
+    font-size: 30px;
+    letter-spacing: -3px;
 }
 
 .full_day {
     color: #26B7FF;
-    font-size: 34px;
+    font-size: 30px;
+    letter-spacing: -3px;
 }
 
 .center_day {
     color: #26B7FF;
-    font-size: 34px;
+    font-size: 30px;
+    letter-spacing: -3px;
 }
 
 .normal_day {
     color: #808080;
     font-size: 30px;
+    letter-spacing: -3px;
 }
 
 .streak_days {

src/features/health/calendar.tsx

@@ -18,7 +18,7 @@ export default function Calendar(props: { year: number, month: number }) {
     const [year, setYear] = useState(props.year)
     const [month, setMonth] = useState(props.month)
     const [current, setCurrent] = useState<any>(null)
-    const [loaded,setLoaded] = useState(false)
+    const [loaded, setLoaded] = useState(false)
 
     useEffect(() => {
         loadData()
@@ -129,14 +129,14 @@ export default function Calendar(props: { year: number, month: number }) {
             return 'right_calendar_item'
         }
         if (item.full) {
-            if (item.isToday) {
-                return 'full_calendar_item today_content'
-            }
+            // if (item.isToday) {
+            //     return 'full_calendar_item today_content'
+            // }
             return 'full_calendar_item'
         }
-        if (item.isToday) {
-            return 'today1'
-        }
+        // if (item.isToday) {
+        //     return 'today1'
+        // }
         return 'calendar_item'
     }
 
@@ -151,6 +151,9 @@ export default function Calendar(props: { year: number, month: number }) {
             return 'right_day'
         }
         if (item.full) {
+            if (item.isToday){
+                return 'normal_day'
+            }
             return 'full_day'
         }
         return 'normal_day'
@@ -163,10 +166,16 @@ export default function Calendar(props: { year: number, month: number }) {
         if (itemClass(item) == 'calendar_item') {
             return 'transparent'
         }
-        if (itemClass(item) == 'today1') {
 
-            return '#000'
+        if (item.isToday){
+            if (item.full){
+                return 'transparent'
+            }
         }
+        // if (item.isToday) {
+
+        //     return '#000'
+        // }
         return getThemeColor(health.mode) + '33'
     }
 
@@ -184,14 +193,14 @@ export default function Calendar(props: { year: number, month: number }) {
         // return getThemeColor(health.mode)
     }
 
-    function leftSpace(days){
-        if (days<10){
+    function leftSpace(days) {
+        if (days < 10) {
             return rpxToPx(98)
         }
-        else if (days<100){
+        else if (days < 100) {
             return rpxToPx(71)
         }
-        else if (days<1000){
+        else if (days < 1000) {
             return rpxToPx(54)
         }
     }
@@ -208,7 +217,7 @@ export default function Calendar(props: { year: number, month: number }) {
                 }}>
                     <Image src={require('@assets/_health/pre.png')} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
                 </NewButton>
-                <Text style={{ width: rpxToPx(236), textAlign: 'center' }}>{`${year}年${month}月`}</Text>
+                <Text style={{ width: rpxToPx(236), textAlign: 'center', fontSize: rpxToPx(28) }}>{`${year}年${month}月`}</Text>
 
                 <NewButton type={NewButtonType.img} onClick={() => {
                     const date = new Date(year, month + 1); // month - 1 因为月份是从 0 开始
@@ -230,13 +239,21 @@ export default function Calendar(props: { year: number, month: number }) {
                 <View className="calendar_main3">
                     {
                         spaces.map((item, i) => {
-                            return <View className="calendar_item" style={{ width: rpxToPx(90) }} key={i * 10} />
+                            return <View className="calendar_item" style={{ width: rpxToPx(94) }} key={i * 10} />
                         })
                     }
                     {
                         days.map((item, index) => {
-                            return <View className={itemClass(item)} style={{ width: rpxToPx(90), backgroundColor: bgColor(item) }} key={index}>
-                                <Text className={itemTextClass(item)} style={{ color: textColor(item) }}>{item.day}</Text>
+                            return <View className={itemClass(item)} style={{ width: rpxToPx(94), backgroundColor: bgColor(item), position: 'relative' }} key={index}>
+                                {
+                                    !item.full && item.isToday && <View className="today2" />
+                                }
+                                {
+                                    item.full && item.isToday && <View className="fullToday" style={{backgroundColor:getThemeColor(health.mode) + '33'}}>
+                                        <View className="today3" />
+                                    </View>
+                                }
+                                <Text className={itemTextClass(item)} style={{ color: textColor(item), zIndex: 1, fontWeight: item.isToday ? 'bold' : 'normal' }}>{item.day}</Text>
                             </View>
                         })
                     }
@@ -248,18 +265,19 @@ export default function Calendar(props: { year: number, month: number }) {
         </View>
     }
 
-    function currentContent(){
-        return <View style={{display:'flex',flexDirection:'row',alignItems:'center',height:rpxToPx(208)}}>
+    function currentContent() {
+        return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(208) }}>
             {
-                loaded && <View style={{display:'flex',flexDirection:'row',alignItems:'center',height:rpxToPx(208)}}>
-                    <View className="streak_days" style={{color:getThemeColor(health.mode),
-                        marginLeft:leftSpace(current?current.days:0),
-                        marginRight:rpxToPx(36)
-                    }}>{current?current.days:'0'}</View>
-                    <View style={{display:'flex',flexDirection:'column',}}>
-                        <View className="h44 bold" style={{color:getThemeColor(health.mode)}}>{current.days==1?'Day':'Days'}</View>
+                loaded && <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(208) }}>
+                    <View className="streak_days" style={{
+                        color: getThemeColor(health.mode),
+                        marginLeft: leftSpace(current ? current.days : 0),
+                        marginRight: rpxToPx(36)
+                    }}>{current ? current.days : '0'}</View>
+                    <View style={{ display: 'flex', flexDirection: 'column', }}>
+                        <View className="h44 bold" style={{ color: getThemeColor(health.mode) }}>{current.days == 1 ? 'Day' : 'Days'}</View>
                         <View className="h24">Log your xxx daily to build a streak</View>
-                        <View className="h20" style={{color:MainColorType.g02,marginTop:rpxToPx(12)}}>Log your xxx daily to build a streak</View>
+                        <View className="h20" style={{ color: MainColorType.g02, marginTop: rpxToPx(12) }}>Log your xxx daily to build a streak</View>
                     </View>
                 </View>
             }

src/pages/account/Album.scss

@@ -53,4 +53,17 @@
     height: 155px;
     margin-left: 4px;
     margin-bottom: 4px;
+}
+
+.streak_toolbar_btn{
+    height: 72px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: row;
+    // justify-content: center;
+    align-items: center;
+    padding-left: 48px;
+    padding-right: 48px;
+    margin-right: 12px;
+    flex-shrink: 0;
 }

src/pages/account/Album.tsx

@@ -1,8 +1,15 @@
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { getAlbums, getAlbumsStat } from "@/services/health";
-import { View, Text, Image } from "@tarojs/components";
+import { View, Text, Image, ScrollView } from "@tarojs/components";
 import { useEffect, useState } from "react";
 import './Album.scss'
+import '@/features/health/History.scss'
+import NewHeader, { NewHeaderType } from "@/_health/components/new_header";
+import { rpxToPx } from "@/utils/tools";
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import { MainColorType } from "@/context/themes/color";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import dayjs from "dayjs";
 
 export default function Album() {
 
@@ -28,27 +35,79 @@ export default function Album() {
         })
     }
 
+    function historyMonth(index, preIndex) {
+        var showDate = false;
+        var dateStr = ''
+        if (index == 0) {
+            var currentDate = (medias[index].date + '').substring(0, 6)
+            var now = dayjs().format('YYYYMM')
+            if (currentDate != now) {
+                showDate = true
+                dateStr = currentDate
+            }
+        }
+        else {
+            var currentDate = (medias[index].date + '').substring(0, 6)
+            var now = (medias[index - 1].date + '').substring(0, 6)
+            if (currentDate != now) {
+                showDate = true
+                dateStr = currentDate
+            }
+        }
+        if (showDate) {
+            return <View className="h26" style={{
+                height: rpxToPx(84),
+                paddingLeft: rpxToPx(40),
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                backgroundColor: '#fff',
+                color: MainColorType.g01
+            }}>{dateStr}</View>
+        }
+        return <View />
+    }
+
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
-        {
-            stat && <View style={{ flexDirection: 'row', alignItems: 'center', display: 'flex' }}>
-                <View onClick={() => {
-                    setWindow('')
-                    getAlbumsData('')
-                }}>全部{stat.total}</View>
-                {
-                    stat.items.map((item, index) => {
-                        return <View key={index} onClick={() => {
+        <NewHeader type={NewHeaderType.left} title="Album" />
+        {stat && <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72) }} scrollX enableFlex showScrollbar={false}>
+            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
+            <NewButton type={NewButtonType.img} onClick={() => {
+                setWindow('')
+                getAlbumsData('')
+            }}>
+                <View className="streak_toolbar_btn"
+                    style={{ backgroundColor: window == '' ? '#B2B2B21A' : 'transparent' }}
+                >
+                    <Text className={window == '' ? 'bold h30' : 'h30'}
+                        style={{ color: window == '' ? '#000' : MainColorType.g01 }}>全部 <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{stat.total}</Text></Text>
+                </View>
+            </NewButton>
+
+            {
+                stat.items.map((item, index) => {
+                    return <View key={index}>
+                        <NewButton type={NewButtonType.img} onClick={() => {
                             setWindow(item.window)
                             getAlbumsData(item.window)
-                        }}>{item.window}{item.image_count}</View>
-                    })
-                }
-            </View>
-        }
+                        }}>
+                            <View className="streak_toolbar_btn"
+                                style={{ backgroundColor: window == item.window ? getThemeColor(item.window) + '1A' : 'transparent' }}
+                            >
+                                <Text className={window == item.window ? 'bold h30' : 'h30'}
+                                    style={{ color: window == item.window ? getThemeColor(item.window) : MainColorType.g01 }}>{item.window} <Text className="h20" style={{ lineHeight: '20px', verticalAlign: 'text-top' }}>{item.image_count}</Text></Text>
+                            </View>
+                        </NewButton>
+                    </View>
+                })
+            }
+            <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
+        </ScrollView>}
+        <View style={{ height: rpxToPx(36) }} />
 
         <View className="photo_wall" onClick={() => {
-            jumpPage('/pages/account/PhotoWall?window='+window)
+            jumpPage('/pages/account/PhotoWall?window=' + window)
         }}>
             <View style={{ flex: 1 }} />
             <Text className="photo_wall_text">Photo Wall</Text>
@@ -57,16 +116,24 @@ export default function Album() {
         </View>
         {
             medias.map((item, index) => {
-                return <View className="album_item" key={index}>
-                    <Text className="album_date">{(item.date + '').substring(6, 9)}</Text>
-                    <View className="album_container">
-                        {
-                            item.images.map((photo, i) => {
-                                return <Image mode="aspectFill" src={photo} key={i * 900} className="album_phone" />
-                            })
-                        }
+                return <View key={index} style={{ display: 'flex', flexDirection: 'column' }}>
+                    {
+                        historyMonth(index, index - 1)
+                    }
+                    <View className="history_item2" >
+
+                        <Text className="history_date">{(item.date + '').substring(6, 9)}</Text>
+                        <View className="history_content">
+                            <View className="media" style={{ marginRight: item.images.length == 4 ? 80 : 0 }}>
+                                {
+                                    item.images.map((photo, i) => {
+                                        return <Image mode="aspectFill" src={photo} key={i * 900} className="media_item" />
+                                    })
+                                }
+                            </View>
+                        </View>
+                        <View className="seperate_light_line" />
                     </View>
-                    <View className="seperate_light_line" />
                 </View>
             })
         }

src/pages/account/Journal.tsx

@@ -6,6 +6,7 @@ import './Journal.scss'
 import dayjs from "dayjs";
 import { rpxToPx } from "@/utils/tools";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import NewHeader, { NewHeaderType } from "@/_health/components/new_header";
 
 export default function Journal() {
     const [journals, setJournals] = useState<any>([])
@@ -51,6 +52,7 @@ export default function Journal() {
 
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
+        <NewHeader type={NewHeaderType.left} title="Journal" />
         {
             journals.map((item, index) => {
                 return <View className="album_item" key={index} onClick={() => {
@@ -66,7 +68,7 @@ export default function Journal() {
                         flexDirection: 'column',
                         flex: 1,
                         backgroundColor: item.imgs.length == 0 ? '#f5f5f5' : 'transparent',
-                        padding: item.imgs.length == 0 ? rpxToPx(10) : 0,
+                        padding: item.imgs.length == 0 ? rpxToPx(20) : 0,
                         marginRight: rpxToPx(40)
                     }}>
                         {
@@ -74,7 +76,7 @@ export default function Journal() {
                                 return <View key={i * 400} style={{ display: 'flex', flexDirection: 'column' }}>{
                                     window.events.map((item2, index2) => {
                                         return <Text key={index2 * 1000}>
-                                            <Text className="history_item_title">{dayjs(item2.time.timestamp).format('HH:mm')} {getTitle(item2)} </Text>
+                                            <Text className="history_item_title" style={{color:'#000'}}>{dayjs(item2.time.timestamp).format('HH:mm')} {getTitle(item2)} </Text>
                                             {
                                                 item2.moment && item2.moment.description && <Text className="history_item_desc">{item2.moment.description}</Text>
                                             }

src/pages/account/JournalDetail.tsx

@@ -6,6 +6,7 @@ import './JournalDetail.scss'
 import Taro from "@tarojs/taro";
 import dayjs from "dayjs";
 import { rpxToPx } from "@/utils/tools";
+import { MainColorType } from "@/context/themes/color";
 
 let useRoute;
 let useNavigation;
@@ -51,7 +52,6 @@ export default function JournalDetail() {
         const sortedArray = array.sort((a, b) => {
             return a.time.timestamp - b.time.timestamp;
         });
-        debugger
 
         // 返回一个新数组
         const newArray = [...sortedArray];
@@ -72,11 +72,11 @@ export default function JournalDetail() {
         const list = detail.moments
         return <View key={index}>
             {
-                (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') && <View style={{ flexDirection: 'column', display: 'flex' }}>
+                (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') && <View style={{ flexDirection: 'column', display: 'flex',marginBottom:rpxToPx(48) }}>
 
-                    <Text className="detail_time">{dayjs(detail.time.timestamp).format('HH:mm')}
+                    <Text className="detail_time" style={{color:MainColorType.link}}>{dayjs(detail.time.timestamp).format('HH:mm')}
                         {
-                            detail.title && <Text> {detail.title}</Text>
+                            detail.title && <Text style={{color:'#000'}}> {detail.title}</Text>
                         }
                         {/* {
                                 item.description && <Text style={{ color: '#000' }}> {item.description}</Text>
@@ -89,11 +89,11 @@ export default function JournalDetail() {
                 </View>
             }
             {
-                detail.scenario == 'ACTIVITY' && !list && <View style={{ flexDirection: 'column', display: 'flex' }}>
+                detail.scenario == 'ACTIVITY' && !list && <View style={{ flexDirection: 'column', display: 'flex',marginBottom:rpxToPx(48) }}>
 
-                    <Text className="detail_time">{dayjs(detail.time.timestamp).format('HH:mm')}
+                    <Text className="detail_time" style={{color:MainColorType.link}}>{dayjs(detail.time.timestamp).format('HH:mm')}
                         {
-                            detail.title && <Text> {detail.title}</Text>
+                            detail.title && <Text style={{color:'#000'}}> {detail.title}</Text>
                         }
                     </Text>
 
@@ -104,11 +104,11 @@ export default function JournalDetail() {
             }
             {
                 list && list.map((item, index) => {
-                    return <View key={index} style={{ flexDirection: 'column', display: 'flex' }}>
+                    return <View key={index} style={{ flexDirection: 'column', display: 'flex',marginBottom:rpxToPx(48) }}>
 
-                        <Text className="detail_time">{dayjs(item.time.timestamp).format('HH:mm')}
+                        <Text className="detail_time" style={{color:MainColorType.link}}>{dayjs(item.time.timestamp).format('HH:mm')}
                             {
-                                item.title && <Text> {item.title}</Text>
+                                item.title && <Text style={{color:'#000'}}> {item.title}</Text>
                             }
                             {
                                 item.description && <Text style={{ color: '#000' }}> {item.description}</Text>
@@ -184,7 +184,7 @@ export default function JournalDetail() {
                     }
                 </View>
 
-                <Text>发布于{dayjs(data.publish_timestamp).format('MM-DD HH:mm')}</Text>
+                <Text className="h24" style={{color:MainColorType.g02}}>发布于{dayjs(data.publish_timestamp).format('MM-DD HH:mm')}</Text>
             </View>
 
             

src/pages/account/PhotoWall.tsx

@@ -54,14 +54,13 @@ export default function PhotoWall() {
         })
     }
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
-        <NewTimePicker />
         <View className="photo_wall">
             {
                 list.map((item, index) => {
                     return <Image key={index}
                         src={item+scale}
                         mode="aspectFill"
-                        style={{ width: itemWidth, height: itemWidth, backgroundColor: 'pink', marginBottom: space }} />
+                        style={{ width: itemWidth, height: itemWidth, backgroundColor: '#f5f5f5', marginBottom: space }} />
                 })
             }
             <View style={{ width: itemWidth, height: itemWidth }} />

src/pages/account/Profile.scss

@@ -27,9 +27,9 @@
 }
 
 .avatar {
-    width: 180px;
-    height: 180px;
-    border-radius: 90px;
+    width: 160px;
+    height: 160px;
+    border-radius: 80px;
     background-color: #fff;
     display: flex;
     align-items: center;

src/pages/account/Profile.tsx

@@ -19,6 +19,8 @@ import showAlert from "@/components/basic/Alert";
 import { kIsAndroid, kIsIOS, rpxToPx } from "@/utils/tools";
 import dayjs from "dayjs";
 import { MainColorType } from "@/context/themes/color";
+import NewHeader, { NewHeaderType } from "@/_health/components/new_header";
+import { IconCellArrow, IconVip } from "@/components/basic/Icons";
 
 let useNavigation, SwitchRN;
 if (process.env.TARO_ENV == 'rn') {
@@ -191,14 +193,14 @@ export default function Page() {
         jumpPage('/_health/pages/streak_calendar')
     }
 
-    function goMetric(){
+    function goMetric() {
         if (!user.isLogin) {
             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
         }
         jumpPage('/pages/metric/Metric')
     }
 
-    function goWeekly(){
+    function goWeekly() {
         if (!user.isLogin) {
             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
         }
@@ -281,9 +283,25 @@ export default function Page() {
     }
 
     function detail() {
-        return <View style={{ display: 'flex', flexDirection: 'column',backgroundColor:'#f5f5f5' }}>
-
+        return <View style={{ display: 'flex', flexDirection: 'column', backgroundColor: '#f5f5f5' }}>
+            {/* <NewHeader type={NewHeaderType.center}
+                title={user.isLogin ? user.nickname : t('page.more.un_login')}
+            /> */}
             <View className="profile_card" onClick={tapProfile}>
+                <Text className="h50 bold"
+                    style={{
+                        color: user.isLogin ? '#000' : MainColorType.g02,
+                        // marginLeft: rpxToPx(52),
+                        // marginRight: rpxToPx(52),
+                        width:rpxToPx(640),
+                        textAlign:'center',
+                        marginTop: rpxToPx(24),
+                        marginBottom: rpxToPx(24),
+                        whiteSpace:'nowrap',
+                        overflow:'hidden',
+                        textOverflow:'ellipsis'
+                    }}
+                >{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
                 <View className="avatar" style={{
                     opacity: user.isLogin ? 1 : 0.4,
                     background: user.isLogin ? 'transparent' : '#fff'
@@ -294,7 +312,7 @@ export default function Page() {
                         }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
                     }
                 </View>
-                <Text className="h50 bold" style={{ color: user.isLogin ? '#000' : MainColorType.g02, marginTop: rpxToPx(24) }}>{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
+
             </View>
             <View style={{
                 display: 'flex', flexDirection: 'column',
@@ -311,19 +329,25 @@ export default function Page() {
                 }}
             >
                 <Image style={{ width: rpxToPx(228), height: rpxToPx(36), marginTop: rpxToPx(26) }} src={require('@assets/images/center_arrow.png')} />
-                <View className="profile_cell member_cell">
+                <View className="profile_cell member_cell" style={{height:rpxToPx(172)}}>
                     <View style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <View className="h34 bold" style={{ color: MainColorType.blue, marginBottom: rpxToPx(12) }}>成为 Pro 会员</View>
-                        <View className="h24" style={{ color: MainColorType.g02 }}>{isMember() ? memberdesc() : '解锁会员专项功能'}</View>
+                        <View style={{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                            <IconVip width={rpxToPx(36)} color={MainColorType.blue}/>
+                            <View style={{width:rpxToPx(8)}}/>
+                            <View className="h34 bold" style={{ color: MainColorType.blue }}>成为 Pro 会员</View>
+                        </View>
+                        
+                        <View className="h24" style={{ color: MainColorType.g02,marginTop:rpxToPx(12) }}>{isMember() ? memberdesc() : '解锁会员专项功能'}</View>
+                        <View style={{height:rpxToPx(18),flexShrink:0}}/>
                     </View>
-                    <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                    <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
                 </View>
             </View>
 
             <View className="profile_cell profile_cell_space" onClick={goMetric}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Metric</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
             </View>
 
             <View className="profile_cell profile_cell_space" onClick={() => {
@@ -331,7 +355,7 @@ export default function Page() {
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Album</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
                 <View className="profile_cell_line" />
             </View>
             <View className="profile_cell" onClick={() => {
@@ -339,7 +363,7 @@ export default function Page() {
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Journal</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
             </View>
 
             <View className="profile_cell profile_cell_space" onClick={() => {
@@ -347,25 +371,25 @@ export default function Page() {
             }}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Schedule</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
                 <View className="profile_cell_line" />
             </View>
             <View className="profile_cell" onClick={goCalendar}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Calendar</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
                 <View className="profile_cell_line" />
             </View>
             <View className="profile_cell" onClick={goWeekly}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Window</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
             </View>
 
             <View className="profile_cell profile_cell_space" onClick={goSetting}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Settings</Text>
-                <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
+                <IconCellArrow color={MainColorType.g03} width={rpxToPx(34)}/>
             </View>
             <View style={{ height: 40 }}></View>
 

src/pages/account/Setting.config.ts

@@ -3,5 +3,6 @@ export default definePageConfig({
         // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
         // 'demo':'../../components/demo'
     },
-    "navigationBarTitleText": ""
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor":"#f5f5f5"
 })

src/pages/account/Setting.tsx

@@ -1,14 +1,16 @@
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
+import Card from "@/_health/components/card";
 import showActionSheet from "@/components/basic/ActionSheet";
 import showAlert from "@/components/basic/Alert";
 import Buttons from "@/components/basic/Buttons";
 import Footer from "@/components/layout/Footer";
 import TableCell from "@/components/layout/TableCell";
-import { ColorType } from "@/context/themes/color";
+import { ColorType, MainColorType } from "@/context/themes/color";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import { APP_VERSION, WX_VERSION } from "@/services/http/api";
 import { clear, logout } from "@/services/user";
 import { logoutSuccess } from "@/store/user";
-import { kIsAndroid } from "@/utils/tools";
+import { kIsAndroid, rpxToPx } from "@/utils/tools";
 import { View, Text, Button } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useEffect } from "react";
@@ -145,18 +147,45 @@ export default function Page() {
 
     return <View style={{ color: '#fff', display: 'flex', flexDirection: 'column', flex: 1 }}>
         <View style={{ height: 20 }} />
-        <TableCell title={t('page.setting.version')} ><Text style={{ opacity: 0.8, color: '#fff' }}>{process.env.TARO_ENV == 'weapp' ? WX_VERSION : APP_VERSION}</Text></TableCell>
-        {/* <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.2</Text> */}
+        <Card>
+            <View style={{
+                display: 'flex', flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                height: rpxToPx(128),
+                boxSizing: 'border-box',
+                paddingLeft: rpxToPx(40),
+                paddingRight: rpxToPx(28)
+
+            }}>
+                <Text className="h34" style={{ color: '#000' }}>{t('page.setting.version')}</Text>
+                <Text className="h30" style={{ color: MainColorType.g01 }}>{process.env.TARO_ENV == 'weapp' ? WX_VERSION : APP_VERSION}</Text>
+            </View>
+        </Card>
         {
             process.env.TARO_ENV == 'rn' && <View style={{ flex: 1 }} />
         }
 
         <Footer>
             <View>
-                <ChooseScenarioBtn title={t('page.setting.logout')} onClick={logoutF} background={ColorType.fast} />
-                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
-                    <Text onClick={del} style={{ color: '#fff', opacity: 0.4 }}>{t('feature.common.modal.del')}</Text>
+                <View style={{ marginBottom: rpxToPx(24) }}>
+                    <NewButton
+                        type={NewButtonType.gray}
+                        title={t('page.setting.logout')}
+                        onClick={logoutF}
+                        width={rpxToPx(400)}
+                        height={rpxToPx(96)}
+                    />
+                </View>
+
+                <View style={{ height: rpxToPx(72),display:'flex' }}>
+                    <NewButton
+                        type={NewButtonType.link}
+                        title={t('feature.common.modal.del')}
+                        onClick={del}
+                    />
                 </View>
+
             </View>
         </Footer>
         {

src/pages/clock/Clock.scss

@@ -33,7 +33,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-left: 30px;
+    
+    padding-left: 14px;
     position: absolute;
     left: 0;
     right: 0;

src/pages/clock/Clock.tsx

@@ -12,6 +12,7 @@ import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks
 import Streak from "@/features/health/Streak";
 import Calendar from "@/features/health/calendar";
 import HeaderCircadian from "@/features/health/HeaderCircadian";
+import { rpxToPx } from "@/utils/tools";
 
 let useNavigation;
 
@@ -103,6 +104,20 @@ export default function Clock() {
         return scenario.current_streak && scenario.current_streak.days
     }
 
+    function getStreakDesc(){
+        switch(health.mode){
+            case 'FAST':
+                return 'Faststreak'
+            case 'EAT':
+                return 'Eatstreak'
+            case 'SLEEP':
+                return 'Sleepstreak'
+            case 'ACTIVE':
+                return 'Activestreak'
+        }
+        return ''
+    }
+
     function haveStreaks() {
 
 
@@ -115,6 +130,48 @@ export default function Clock() {
         return false
     }
 
+    function steakIcon() {
+        if (!haveStreaks()) return <View />
+        if (showCalendar) {
+            return <View className="navi-streak"
+                onClick={() => {
+                    setShowCalendar(false)
+                }}
+                style={{ height: 44, marginTop: systemInfo.statusBarHeight, }}>
+                <View style={{
+                    zIndex:1,
+                    height: rpxToPx(64),
+                    display:'flex',
+                    flexDirection:'row',
+                    alignItems:'center',
+                    backgroundColor:getThemeColor(health.mode),
+                    borderRadius:rpxToPx(64),
+                    paddingRight:rpxToPx(24)
+                }} onClick={() => {
+                    setShowCalendar(false)
+                }}>
+                    <View style={{ width: rpxToPx(16) }} />
+                    <IconStreak color='#fff' width={20} full="#fff" />
+                    <View style={{ width: rpxToPx(4) }} />
+                    <Text className="h30 bold" style={{ color: '#fff' }}>{getStreakDesc()}</Text>
+                </View>
+
+            </View>
+        }
+        else {
+            return <View className="navi-streak"
+                onClick={() => {
+                    setShowCalendar(true)
+                }}
+                style={{ height: 44, marginTop: systemInfo.statusBarHeight, }}>
+                <View style={{ width: rpxToPx(16) }} />
+                <IconStreak color={getThemeColor(health.mode)} width={20} full="transparent" />
+                <View style={{ width: rpxToPx(4) }} />
+                <Text className="h34 bold" style={{ color: getThemeColor(health.mode) }}>{getStreakCount()}</Text>
+            </View>
+        }
+    }
+
     if (!loaded)
         return <View />
 
@@ -130,22 +187,7 @@ export default function Clock() {
             }} >{health.title}</View>
 
             {
-                haveStreaks() && <View className="navi-streak"
-                    onClick={() => {
-                        if (showCalendar) {
-                            setShowCalendar(false)
-                        }
-                        else {
-                            setShowCalendar(true)
-                        }
-
-                    }}
-                    style={{ height: 44, marginTop: systemInfo.statusBarHeight }} >
-                    <IconStreak color={getThemeColor(health.mode)} width={20} />
-                    <Text style={{ color: getThemeColor(health.mode) }}>{getStreakCount()}</Text>
-
-
-                </View>
+                steakIcon()
             }
 
             <View style={{
@@ -154,9 +196,9 @@ export default function Clock() {
                 right: 60,
                 bottom: 0,
                 height: 44,
-                display:'flex',
-                alignItems:'center',
-                justifyContent:'center'
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
             }}>
                 <HeaderCircadian />
             </View>