update

src/_health/pages/log_time.tsx

@@ -9,6 +9,7 @@ import NewTimePicker from "../base/new_timepicker";
 import { IconCalendar } from "@/components/basic/Icons";
 import dayjs from "dayjs";
 import { useRouter } from "@tarojs/taro";
+import Card from "../components/card";
 
 let useRoute;
 let useNavigation;
@@ -42,59 +43,60 @@ export default function LogTime() {
     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={() => {
+    return <View className="page_container">
+        <Card>
+            <View style={{ position: 'relative' }}>
+                <View className="card_header">
+                    <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 style={{ flex: 1 }} />
                     <View className='border_footer_line' />
-                }
-            </View>
-            {
+                </View>
+
                 <NewTimePicker time={time} onChange={(e) => {
                     setTime(e)
                 }} color={getThemeColor(health.mode)} />
-            }
-            {
-                <View className='picker_time_card_footer'>
+
+                <View className='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>
+        </Card>
+        <View style={{ flex: 1 }} />
+        <View style={{ marginBottom: rpxToPx(128), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <NewButton
+                color={getThemeColor('FAST')}
+                type={NewButtonType.fill}
+                title={'Log'}
+                width={rpxToPx(670)}
+                height={rpxToPx(96)}
+                bold={true}
+                onClick={() => {
 
+                }} />
         </View>
-        <NewButton
-            color={getThemeColor('FAST')}
-            type={NewButtonType.fill}
-            title={'Log'}
-            width={rpxToPx(670)}
-            height={rpxToPx(96)}
-            bold={true}
-            onClick={() => {
 
-            }} />
     </View>
 }

src/app.scss

@@ -420,13 +420,34 @@ page {
     background-color: #E5E5E5;
 }
 
-.page_container{
+.page_container {
     display: flex;
     flex-direction: column;
     flex: 1;
     height: 100vh;
 }
 
+.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;
+}
+
+.card_footer {
+    height: 128px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
 .h50 {
     font-size: 50px;
     line-height: 60px;