update

src/components/basic/Buttons.tsx

@@ -44,7 +44,8 @@ export default function Buttons(props: {
         return <View style={{ opacity: (props.lowLight || props.disabled) ? 0.4 : 1 }} onClick={onClick}>
             <Text
                 style={{
-                    ...props.btnStyle
+                    ...props.btnStyle,
+                    fontWeight:500,
                 }} className={props.className?props.className:''}>{props.title}</Text>
         </View>
     }
@@ -59,7 +60,9 @@ export default function Buttons(props: {
 
                     style={{
                         color: props.btnStyle.color,
-                        fontSize: props.btnStyle.fontSize
+                        fontSize: props.btnStyle.fontSize,
+                        fontWeight:500,
+                        marginBottom:2
                     }}>{props.title}</Text>
             </View>
         )
@@ -74,7 +77,9 @@ export default function Buttons(props: {
                 // onClick={onClick}
                 style={{
                     color: props.btnStyle.color,
-                    fontSize: props.btnStyle.fontSize
+                    fontSize: props.btnStyle.fontSize,
+                    fontWeight:500,
+                    marginBottom:2
                 }}>{props.title}</Text>
         </View>
         // <View  onClick={onClick}>

src/components/layout/Box.scss

@@ -1,6 +1,6 @@
 .box-container {
     background-color: #1C1C1C;
-    border-radius: 56px;
+    border-radius: 36px;
     padding: 40px;
     margin-left: 46px;
     margin-right: 46px;

src/components/view/Timeline.scss

@@ -23,21 +23,6 @@
   margin-right: 10px;
 }
 
-.padding {
-  background-color: #ccc;
-}
-
-.done {
-  background-color: green;
-}
-
-.un_done {
-  background-color: red;
-}
-
-
-
-
 
 .timeline-content {
   display: flex;
@@ -58,7 +43,7 @@
   color: #fff;
   font-size: 20px;
   margin-left: 6px;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 .timeline-time {
@@ -89,9 +74,9 @@
   width: 2px;
   background-color: #FFFFFF66;
   position: absolute;
-  top: 50px;
+  top: 40px;
   left: 14px;
-  bottom: -15px;
+  bottom: 9px;
 
 }
 
@@ -100,4 +85,44 @@
   border-left-style: dashed;
   border-left-color: #FFFFFF66;
   border-left-width: 2px;
-}
+}
+
+
+.timelineItem{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+
+.timelineContentView{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.timelineContentDetail{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 20px;
+  // background-color: orange;
+  height: 32px;
+  width: 406px;
+}
+
+.timeline_line1{
+  width: 406px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+  margin-top: 12px;
+}
+
+.line1_bottom_space{
+  margin-bottom: 56px;
+}
+
+.line1_bottom_zero{
+  margin-bottom: 20px;
+}

src/components/view/Timeline.tsx

@@ -3,39 +3,26 @@ import './Timeline.scss'
 import { CheckBoxType, TimelineType } from '@/utils/types'
 import CheckBox from '../basic/CheckBox'
 
-// interface TimelineItem {
-//     status: 'padding' | 'done' | 'not_done';
-//     content: string;
-//     time: string;
-// }
-
 
 export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
     return <View className="timeline">
         {
             props.title && <Text className='timeline_title'>{props.title}</Text>
         }
-        {props.items.map((item, index) => (
-            <View className="timeline-item" style={{ marginBottom: index !== props.items.length - 1 ? 10 : 0 }} key={index}>
-                <View className='timeline-icon-bg'>
-                    {
-                        item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
-                    }
-                    {
-                        item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
-                    }
-                    {
-                        item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
-                    }
-                </View>
-                {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line dash'} />}
-                {
-                    props.type == TimelineType.timeMutiLine ?
-                        <View className="timeline-content">
-                            <View className="timeline-text">{item.title}</View>
-                            <View className="timeline-time">{item.content}</View>
-                        </View> :
-                        <View className="timeline-content-row" style={{ marginBottom: index !== props.items.length - 1 ? 32 : 0 }}>
+        {
+            props.items.map((item, index) => (
+                <View className='timelineItem'>
+                    <View className='timelineContentView'>
+                        {
+                            item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                        }
+                        {
+                            item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
+                        }
+                        {
+                            item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
+                        }
+                        <View className='timelineContentDetail'>
                             <View className="timeline-time">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>
                             {
                                 item.date && <View className="timeline-date">{item.date}</View>
@@ -43,8 +30,53 @@ export default function Component(props: { items: any[], title?: string, type?:
                             <View style={{ flex: 1 }} />
                             <View className="timeline-text">{props.type == TimelineType.timeSecond ? item.content : item.title}</View>
                         </View>
-                }
-            </View>
-        ))}
+                    </View>
+                    <View className={index !== props.items.length - 1 ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
+                    {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line dash'} />}
+
+                </View>
+            ))
+        }
+
     </View>
-}
+}
+
+
+// export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
+//     return <View className="timeline">
+//         {
+//             props.title && <Text className='timeline_title'>{props.title}</Text>
+//         }
+//         {props.items.map((item, index) => (
+//             <View className="timeline-item" style={{ marginBottom: index !== props.items.length - 1 ? 10 : 0 }} key={index}>
+//                 <View className='timeline-icon-bg'>
+//                     {
+//                         item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
+//                     }
+//                     {
+//                         item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
+//                     }
+//                     {
+//                         item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
+//                     }
+//                 </View>
+//                 {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line dash'} />}
+//                 {
+//                     props.type == TimelineType.timeMutiLine ?
+//                         <View className="timeline-content">
+//                             <View className="timeline-text">{item.title}</View>
+//                             <View className="timeline-time">{item.content}</View>
+//                         </View> :
+//                         <View className="timeline-content-row" style={{ marginBottom: index !== props.items.length - 1 ? 32 : 0 }}>
+//                             <View className="timeline-time">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>
+//                             {
+//                                 item.date && <View className="timeline-date">{item.date}</View>
+//                             }
+//                             <View style={{ flex: 1 }} />
+//                             <View className="timeline-text">{props.type == TimelineType.timeSecond ? item.content : item.title}</View>
+//                         </View>
+//                 }
+//             </View>
+//         ))}
+//     </View>
+// }

src/features/common/SpecBtns.tsx

@@ -17,6 +17,7 @@ export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean })
                 paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
+                fontWeight:500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -37,6 +38,7 @@ export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, is
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: 'black',
+                fontWeight:500,
                 fontSize: 20,
                 display: 'flex',
                 alignItems: 'center',
@@ -56,11 +58,12 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLo
                 height: 50,
                 borderRadius: 25,
                 borderColor: '#00FFFF',
-                borderWidth: 1,
+                borderWidth: 2,
                 borderStyle: 'solid',
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: '#00FFFF',
+                fontWeight:500,
                 fontSize: 20,
                 display: 'flex',
                 alignItems: 'center',
@@ -80,12 +83,13 @@ export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoa
                 height: 50,
                 borderRadius: 25,
                 borderColor: '#AAFF00',
-                borderWidth: 1,
+                borderWidth: 2,
                 borderStyle: 'solid',
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: '#AAFF00',
                 fontSize: 20,
+                fontWeight:500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -110,6 +114,7 @@ export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast
                 paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
+                fontWeight:500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -132,6 +137,7 @@ export const RecordMetricBtn = (props: { onClick: Function, title: string,themeC
                 paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
+                fontWeight:500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

src/features/trackSomething/components/ActivityHistory.scss

@@ -5,4 +5,17 @@
     color: #fff;
     margin-top: 20px;
     width: '100%';
+}
+
+.operate_item{
+    height: 136px;
+    margin-left: 46px;
+    margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #1C1C1C;
+    border-radius: 36px;
+    padding-left: 40px;
+    padding-right: 40px;
 }

src/features/trackSomething/components/MetricHistory.scss

@@ -15,7 +15,7 @@
     opacity: 0.4;
 }
 
-.operate_item{
+.operate_item1{
     height: 136px;
     margin-left: 46px;
     margin-right: 46px;
@@ -26,6 +26,7 @@
     border-radius: 36px;
     padding-left: 40px;
     padding-right: 40px;
+    margin-bottom: 20px;
 }
 
 .status_bg{

src/features/trackSomething/components/MetricHistory.tsx

@@ -75,7 +75,7 @@ export default function Component(props: { records: any[] }) {
                         item.records.map(record => {
                             debugger
                             return <RecordItem delete={() => deleteRecord(record)}>
-                                <View className="operate_item">
+                                <View className="operate_item1">
                                     <View className="status_bg">
                                         {/* <Text className="status_text">{record.type == 'total' ? '总计' : record.type == 'sync' ? '同步' : '打卡'}</Text> */}
                                     </View>

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -131,6 +131,10 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
 
         if (props.type == 'record' || props.type == 'latest') {
             var realRing = getReal(record, true, true)
+            if (props.data.status == 'ONGOING3'){
+                realRing.color = 'rgba(0,0,0,0)'
+                // bgRing.color = 'rgba(0,0,0,0)'
+            }
             return <Rings common={common} bgRing={bgRing} canvasId={canvasId} realRing={realRing} />
         }
         else {

src/features/trackTimeDuration/components/Schedule.tsx

@@ -84,9 +84,10 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         }
         return <View style={{
             height: 18,
+            overflow:'hidden',
             display: 'flex', flexDirection: 'row', width: '100%',
             justifyContent: 'space-between', alignItems: 'center',
-            marginBottom: 6, paddingRight: 10, boxSizing: 'border-box'
+            marginBottom: 10, paddingRight: 10, boxSizing: 'border-box'
         }}>
             <Text style={{ fontSize: 18, lineHeight: 18, fontWeight: 500 }}>{permission.wxPubFollow ? TimeFormatter.getDateAndWeek() : '日程提醒'}</Text>
             {

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -53,7 +53,7 @@ export const getCommon = (data: any, isBigRing: boolean) => {
 
 export const getBgRing = () => {
     return {
-        color: '#767676'
+        color: '#2c2c2c'
     }
 }