update

src/app.config.ts

@@ -51,9 +51,9 @@ const appConfig = defineAppConfig({
     "scope.userLocation": {
       "desc": "获取您选择的位置...."
     },
-    "scope.addPhoneCalendar":{
-      "desc":"需要添加日历..."
-    }
+    // "scope.addPhoneCalendar":{
+    //   "desc":"需要添加日历..."
+    // }
   },
 
   // tabBar: {
@@ -79,24 +79,23 @@ const appConfig = defineAppConfig({
   //   ]
   // },
   window: {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#000000",
+    "backgroundTextStyle": "dark",
+    "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle": "white",
-    "backgroundColor": "#000000"
+    "navigationBarTextStyle": "black",
+    "backgroundColor": "#ffffff"
   },
   // darkmode: true
 })
 
 process.env.TARO_ENV === 'weapp' && (appConfig.tabBar = {
   custom: true,
-  backgroundColor: '#000',
+  backgroundColor: '#fff',
   color: '#ffffff66',
   selectedColor: '#ffffff',
   borderStyle: 'black',
   list: [
     {
-      // pagePath: 'pages/clock/Clock',
       pagePath: 'pages/clock/Clock',
       text: '生物钟',
     },
@@ -112,15 +111,6 @@ process.env.TARO_ENV === 'weapp' && (appConfig.tabBar = {
       pagePath: 'pages/metric/Metric',
       text: '指标',
     },
-    // {
-    //   pagePath: 'pages/food/Food',
-    //   text: '饮食',
-    // },
-    // {
-    //   // pagePath: 'pages/activity/Activity',
-    //   pagePath: 'pages/workout/Workout',
-    //   text: '运动',
-    // },
     {
       pagePath: 'pages/account/Profile',
       text: '更多',

src/app.scss

@@ -2,12 +2,12 @@
 // @import '@/utils/common.scss';
 
 page {
-    background-color: #000;
+    background-color: #fff;
 }
 
 @media (prefers-color-scheme:dark) {
     page {
-        background-color: #000;
+        background-color: #fff;
     }
 }
 
@@ -15,7 +15,7 @@ page {
     display: flex;
     flex-direction: column;
     flex: 1;
-    background-color: #000;
+    background-color: #fff;
     color: #fff;
     height: '100%';
     // height: 100vh;

src/context/themes/color.tsx

@@ -11,5 +11,14 @@ export enum ColorType {
     day = '#8CC8E2',
     white = '#ffffff',
     black = '#000000',
-    
+
+}
+
+export enum MainColorType {
+    day = '#FFDF00',
+    night = '#041A40',
+    fast = '#02B6FD',
+    eat = '#FE810C',
+    sleep = '#8961F5',
+    active = '#FF4983'
 }

src/features/trackTimeDuration/components/MainDayNightCard.tsx

@@ -0,0 +1,12 @@
+import { View } from "@tarojs/components";
+import './MainCard.scss'
+import { useState } from "react";
+import { rpxToPx } from "@/utils/tools";
+
+export default function MainDayNightCard(){
+    const [isDay,setIsDay] = useState(true)
+
+    return <View style={{width:rpxToPx(750),display:'flex',flexShrink:0}}>
+        <View>Page Day Night</View>
+    </View>
+}

src/features/trackTimeDuration/components/MainFastEatCard.tsx

@@ -0,0 +1,20 @@
+import { View } from "@tarojs/components";
+import './MainCard.scss'
+import { useState } from "react";
+import Modal from "@/components/layout/Modal.weapp";
+import { rpxToPx } from "@/utils/tools";
+
+export default function MainFastEatCard(props:{count:any}) {
+    const [isFast, setIsFast] = useState(true)
+    const [showModal,setShowModal] = useState(false)
+    return <View>
+        
+        <View style={{height:200,backgroundColor:'blue',width:rpxToPx(750)}}/>
+        <View onClick={()=>{setShowModal(true)}}>Fast Eat Night{props.count}</View>
+        {
+            showModal && <Modal dismiss={()=>setShowModal(false)}>
+                <View style={{width:100,height:100,backgroundColor:'red'}}>{props.count}</View>
+            </Modal>
+        }
+    </View>
+}

src/features/trackTimeDuration/components/MainSleepActiveCard.tsx

@@ -0,0 +1,12 @@
+import { View } from "@tarojs/components";
+import './MainCard.scss'
+import { useState } from "react";
+import { rpxToPx } from "@/utils/tools";
+
+export default function MainSleepActiveCard() {
+    const [isSleep, setIsSleep] = useState(true)
+    return <View style={{width:rpxToPx(750),display:'flex',flexShrink:0}}>
+        <View>Sleep Active</View>
+        <View style={{height:1500,backgroundColor:'yellow'}}/>
+    </View>
+}

src/pages/account/Profile.tsx

@@ -61,10 +61,6 @@ export default function Page() {
                     appUserID: user.id
                 })
             }
-            // setInterval(()=>{
-            //     getCustomInfo()
-            // },2000)
-
         }
     }, [])
 
@@ -78,15 +74,18 @@ export default function Page() {
     }
 
     async function getCustomInfo() {
-        let Purchases = require("react-native-purchases").default
-        try {
-            const customerInfo = await Purchases.getCustomerInfo();
-            console.log('customer info', customerInfo)
-            // access latest customerInfo
-        } catch (e) {
-            console.log('customer info error', e)
-            // Error fetching customer info
-        }
+        // if (process.env.TARO_ENV == 'rn') {
+        //     let Purchases = require("react-native-purchases").default
+        //     try {
+        //         const customerInfo = await Purchases.getCustomerInfo();
+        //         console.log('customer info', customerInfo)
+        //         // access latest customerInfo
+        //     } catch (e) {
+        //         console.log('customer info error', e)
+        //         // Error fetching customer info
+        //     }
+        // }
+
     }
 
     function switchChanged(e) {
@@ -238,7 +237,7 @@ export default function Page() {
             return false;
         }
         console.log(accessObj.access)
-        switch (accessObj.access.member.subscription_status){
+        switch (accessObj.access.member.subscription_status) {
             case 'INITIAL':
             case 'INACTIVE':
             case 'INACTIVE_EXPIRED':
@@ -272,7 +271,6 @@ export default function Page() {
                         }
                     </View>
                     <Text className="nickname">{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
-                    {/* <Text className="username">{user.isLogin ? '用户名未设置' : ''}</Text> */}
                 </View>
             </Box>
 
@@ -299,12 +297,6 @@ export default function Page() {
             {
                 user.isLogin && process.env.TARO_ENV == 'weapp' && <TableCell title={t('page.more.setting')} showArrow={true} showMarginBottom={true} onClick={goSetting}></TableCell>
             }
-            {/* {user.isLogin && <Box >
-                <View onClick={goSetting}>
-                    <Text className="title">设置</Text>
-                </View>
-            </Box>
-            } */}
 
             {
                 user.isLogin && user.test_user && <View>
@@ -340,72 +332,8 @@ export default function Page() {
 
                 </View>
             }
-
-            {/* {
-                user.isLogin && user.test_user && <TableCell title="user_id" showArrow={true} onClick={clearF}>
-                    <Text style={{ opacity: 0.8 }}>{user.id.substring(0, 6)}***{user.id.substring(user.id.length - 10, user.id.length)}</Text>
-                </TableCell>
-            }
-            {
-                user.isLogin && user.test_user && <TableCell title="session" showArrow={true} onClick={reset}>
-                    <Text style={{ opacity: 0.8 }}>{t('page.more.reset_session')}</Text>
-                </TableCell>
-            }
-            {
-                user.isLogin && user.test_user && <TableCell title={t('page.more.debug_mode')} >
-                    <Switch checked={switchOn} onChange={switchChanged} />
-                </TableCell>
-            } */}
             <View style={{ height: 40 }}></View>
 
-            {/* <Text>未更改前的1px线</Text>
-            <View style={{ marginLeft: 100 }}>
-                <View className="px2Height" />
-                <View className="px2Width" />
-                <View className="px2Height" />
-                <View className="px2Width" />
-                <View className="px2Height" />
-                <View className="px2Width" />
-                <View className="px2Height" />
-                <View className="px2Width" />
-                <View className="px2Height" />
-                <View className="px2Width" />
-                <View className="px2Height" />
-                <View className="px2Width" />
-            </View>
-            <Text>更改后的1px线</Text>
-            <View style={{ marginLeft: 100 }}>
-                <View className="px1Height" />
-                <View className="px1Width" />
-                <View className="px1Height" />
-                <View className="px1Width" />
-                <View className="px1Height" />
-                <View className="px1Width" />
-                <View className="px1Height" />
-                <View className="px1Width" />
-                <View className="px1Height" />
-                <View className="px1Width" />
-                <View className="px1Height" />
-                <View className="px1Width" />
-            </View>
-            <Text>Svg Demo</Text>
-            <View style={{ background: 'red', width: 30, height: 30 }}>
-                
-                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
-' colors={['blue']} />
-            </View>
-            <View style={{ background: 'red', width: 30, height: 30 }}>
-                
-                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
-' colors={['yellow']} />
-            </View>
-            <View style={{ background: 'red', width: 30, height: 30 }}>
-                
-                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
-' colors={['gray']} />
-            </View>
-            <View style={{ height: 200,display:'flex',flexShrink:0 }} /> */}
-
         </View>
     }
 

src/pages/clock/Clock.config.ts

@@ -1,10 +0,0 @@
-export default definePageConfig({
-    usingComponents: {
-        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
-        // 'demo':'../../components/demo'
-    },
-    // "disableScroll": true,
-    "enablePullDownRefresh": false,
-    "navigationBarTitleText": "",
-    "restartStrategy":"homePage"
-})

src/pages/clock/Clock.scss

@@ -1,100 +0,0 @@
-@import '@/utils/common.scss';
-
-.index_container {
-    display: flex;
-    flex-direction: column;
-    color: #fff;
-}
-
-.discovery1 {
-    margin-left: 46px;
-    font-weight: bold;
-    font-size: 48px;
-    line-height: 48px;
-    margin-bottom: 20px;
-    color: #fff;
-}
-
-.count {
-    opacity: 0;
-    height: 0;
-}
-
-.rn_swiper {
-    width: 750px;
-    // height: 404px;
-    // background-color: oldlace;
-    // background-color: red;
-    // margin-bottom: 20px;
-}
-
-
-
-.swiper1 {
-    height: 850px;
-}
-
-/* #ifdef weapp */
-.fast_sleep_more {
-    background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-weight: bold;
-}
-
-.eat_calendar_text {
-    background: linear-gradient(90deg, $foodColor 0%, $activityColor 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-weight: bold;
-}
-
-/* #endif */
-
-.index_more {
-    line-height: 48px;
-    // margin-top: 64px;
-    // margin-bottom: 22px;
-}
-
-.index_section {
-    display: flex;
-    margin-top: 12px;
-    height: 92px;
-    display: flex;
-    flex-direction: row;
-    padding-left: 46px;
-    padding-right: 46px;
-    align-items: center;
-    justify-content: space-between;
-    // background-color: pink;
-}
-
-.index_main_title {
-    color: #fff;
-    font-size: 72px;
-    line-height: 72px;
-    font-weight: bold;
-}
-
-.index_section_title {
-    // background-color: red;
-    color: #fff;
-    opacity: 0.6;
-    font-size: 48px;
-    font-weight: bold;
-}
-
-.vip_calendar {
-    margin-top: 40px;
-    margin-left: 46px;
-    width: 658px;
-    height: 104px;
-    background-color: #212121;
-    border-radius: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}

src/pages/clock/Clock.tsx

@@ -1,102 +1,9 @@
-import { showDay } from "@/store/day";
-import { showNight } from "@/store/night";
-import { getInfoSuccess } from "@/store/user";
 import { View } from "@tarojs/components";
-import Taro, { useDidHide, useShareAppMessage } from "@tarojs/taro";
-import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import ClockMain from "./ClockMain";
-import { useTranslation } from "react-i18next";
-
-let useNavigation;
-
-if (process.env.TARO_ENV == 'rn') {
-    useNavigation = require("@react-navigation/native").useNavigation
-}
+import './Clock.scss'
+import ClockNew from "./ClockNew";
 
 export default function Clock() {
-    const dispatch = useDispatch();
-    const [loaded, setLoaded] = useState(false)
-    const { t } = useTranslation()
-    let navigation;
-    if (useNavigation) {
-        navigation = useNavigation()
-    }
-
-
-    if (process.env.TARO_ENV == 'weapp') {
-        useShareAppMessage((e) => {
-            return {
-                title: t('feature.track_time_duration.common.share_title'),
-                path: 'pages/clock/Clock'
-            }
-        })
-    }
-
-    useEffect(() => {
-        if (navigation) {
-            navigation.setOptions({
-                headerTitle: '',
-            });
-        }
-        global.memberAlert = false;
-        if (process.env.TARO_ENV == 'weapp') {
-            loadWXCache()
-        }
-        else {
-            loadRNCache()
-        }
-    }, [])
-
-    function loadWXCache() {
-        var showDayRing = Taro.getStorageSync('showDayRing') || false;
-        var showNightRing = Taro.getStorageSync('showNightRing') || false;
-        dispatch(showDay(showDayRing))
-        dispatch(showNight(showNightRing))
-        var gps = Taro.getStorageSync('gps')
-        if (gps) {
-            global.locationDetail = JSON.parse(gps)
-        }
-        global.memberAlert = Taro.getStorageSync('memberAlert') || false
-        var userData = Taro.getStorageSync('userData')
-        if (userData) {
-            dispatch(getInfoSuccess(JSON.parse(userData)));
-        }
-        setLoaded(true)
-    }
-
-    async function loadRNCache() {
-        var showDayRing = await getStorage('showDayRing') || false;
-        var showNightRing = await getStorage('showNightRing') || false;
-        global.memberAlert = await getStorage('memberAlert') || false
-        dispatch(showDay(showDayRing))
-        dispatch(showNight(showNightRing))
-        var gps = await getStorage('gps')
-        if (gps) {
-            global.locationDetail = JSON.parse(gps)
-        }
-        var userData = await getStorage('userData')
-        console.log(userData)
-        if (userData) {
-            dispatch(getInfoSuccess(JSON.parse(userData)));
-        }
-
-        setLoaded(true)
-    }
-
-    async function getStorage(key: string) {
-        try {
-            const res = await Taro.getStorage({ key });
-            return res.data;
-        } catch {
-            return '';
-        }
-    }
-
-    if (loaded) {
-        return <ClockMain />
-    }
-
-
-    return <View></View>
+    return <View>
+        <ClockNew />
+    </View>
 }

src/pages/clock/Clock2.config.ts

@@ -0,0 +1,10 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    // "disableScroll": true,
+    "enablePullDownRefresh": false,
+    "navigationBarTitleText": "",
+    "restartStrategy":"homePage"
+})

src/pages/clock/Clock2.scss

@@ -0,0 +1,100 @@
+@import '@/utils/common.scss';
+
+.index_container {
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+}
+
+.discovery1 {
+    margin-left: 46px;
+    font-weight: bold;
+    font-size: 48px;
+    line-height: 48px;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+.count {
+    opacity: 0;
+    height: 0;
+}
+
+.rn_swiper {
+    width: 750px;
+    // height: 404px;
+    // background-color: oldlace;
+    // background-color: red;
+    // margin-bottom: 20px;
+}
+
+
+
+.swiper1 {
+    height: 850px;
+}
+
+/* #ifdef weapp */
+.fast_sleep_more {
+    background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
+}
+
+.eat_calendar_text {
+    background: linear-gradient(90deg, $foodColor 0%, $activityColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
+}
+
+/* #endif */
+
+.index_more {
+    line-height: 48px;
+    // margin-top: 64px;
+    // margin-bottom: 22px;
+}
+
+.index_section {
+    display: flex;
+    margin-top: 12px;
+    height: 92px;
+    display: flex;
+    flex-direction: row;
+    padding-left: 46px;
+    padding-right: 46px;
+    align-items: center;
+    justify-content: space-between;
+    // background-color: pink;
+}
+
+.index_main_title {
+    color: #fff;
+    font-size: 72px;
+    line-height: 72px;
+    font-weight: bold;
+}
+
+.index_section_title {
+    // background-color: red;
+    color: #fff;
+    opacity: 0.6;
+    font-size: 48px;
+    font-weight: bold;
+}
+
+.vip_calendar {
+    margin-top: 40px;
+    margin-left: 46px;
+    width: 658px;
+    height: 104px;
+    background-color: #212121;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/pages/clock/Clock2.tsx

@@ -0,0 +1,102 @@
+import { showDay } from "@/store/day";
+import { showNight } from "@/store/night";
+import { getInfoSuccess } from "@/store/user";
+import { View } from "@tarojs/components";
+import Taro, { useDidHide, useShareAppMessage } from "@tarojs/taro";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import ClockMain from "./ClockMain";
+import { useTranslation } from "react-i18next";
+
+let useNavigation;
+
+if (process.env.TARO_ENV == 'rn') {
+    useNavigation = require("@react-navigation/native").useNavigation
+}
+
+export default function Clock() {
+    const dispatch = useDispatch();
+    const [loaded, setLoaded] = useState(false)
+    const { t } = useTranslation()
+    let navigation;
+    if (useNavigation) {
+        navigation = useNavigation()
+    }
+
+
+    if (process.env.TARO_ENV == 'weapp') {
+        useShareAppMessage((e) => {
+            return {
+                title: t('feature.track_time_duration.common.share_title'),
+                path: 'pages/clock/Clock'
+            }
+        })
+    }
+
+    useEffect(() => {
+        if (navigation) {
+            navigation.setOptions({
+                headerTitle: '',
+            });
+        }
+        global.memberAlert = false;
+        if (process.env.TARO_ENV == 'weapp') {
+            loadWXCache()
+        }
+        else {
+            loadRNCache()
+        }
+    }, [])
+
+    function loadWXCache() {
+        var showDayRing = Taro.getStorageSync('showDayRing') || false;
+        var showNightRing = Taro.getStorageSync('showNightRing') || false;
+        dispatch(showDay(showDayRing))
+        dispatch(showNight(showNightRing))
+        var gps = Taro.getStorageSync('gps')
+        if (gps) {
+            global.locationDetail = JSON.parse(gps)
+        }
+        global.memberAlert = Taro.getStorageSync('memberAlert') || false
+        var userData = Taro.getStorageSync('userData')
+        if (userData) {
+            dispatch(getInfoSuccess(JSON.parse(userData)));
+        }
+        setLoaded(true)
+    }
+
+    async function loadRNCache() {
+        var showDayRing = await getStorage('showDayRing') || false;
+        var showNightRing = await getStorage('showNightRing') || false;
+        global.memberAlert = await getStorage('memberAlert') || false
+        dispatch(showDay(showDayRing))
+        dispatch(showNight(showNightRing))
+        var gps = await getStorage('gps')
+        if (gps) {
+            global.locationDetail = JSON.parse(gps)
+        }
+        var userData = await getStorage('userData')
+        console.log(userData)
+        if (userData) {
+            dispatch(getInfoSuccess(JSON.parse(userData)));
+        }
+
+        setLoaded(true)
+    }
+
+    async function getStorage(key: string) {
+        try {
+            const res = await Taro.getStorage({ key });
+            return res.data;
+        } catch {
+            return '';
+        }
+    }
+
+    if (loaded) {
+        return <ClockMain />
+    }
+
+
+    return <View></View>
+}

src/pages/clock/ClockNew.tsx

@@ -0,0 +1,52 @@
+import { View, ScrollView, Swiper, SwiperItem } from "@tarojs/components";
+import './Clock.scss'
+import { useEffect, useState } from "react";
+import MainDayNightCard from "@/features/trackTimeDuration/components/MainDayNightCard";
+import MainFastEatCard from "@/features/trackTimeDuration/components/MainFastEatCard";
+import MainSleepActiveCard from "@/features/trackTimeDuration/components/MainSleepActiveCard";
+import TabBar from "@/components/navigation/TabBar";
+import { rpxToPx } from "@/utils/tools";
+
+export default function ClockNew() {
+    const [count, setCount] = useState(0)
+    const [scrollLeft,setScrollLeft] = useState(rpxToPx(750))
+    useEffect(() => {
+        setInterval(() => {
+            setCount(index => index + 1)
+        }, 1000)
+    }, [])
+
+    function tapScroll(index){
+        setScrollLeft(rpxToPx(750)*index)
+    }
+    return <View>
+        <View onClick={()=>tapScroll(0)}>tab 0</View>
+        <View onClick={()=>tapScroll(1)}>tab 1</View>
+        <View onClick={()=>tapScroll(2)}>tab 2</View>
+        <ScrollView scrollX 
+        scrollLeft={scrollLeft} 
+        scrollWithAnimation={true}
+        pagingEnabled={true} 
+        enableFlex enhanced 
+        style={{width:rpxToPx(750),flexDirection:'row',}}>
+            <View style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
+                <MainDayNightCard />
+                <MainFastEatCard count={count} />
+                <MainSleepActiveCard />
+            </View>
+
+        </ScrollView>
+        {/* <Swiper style={{height:500}}>
+            <SwiperItem>
+                <MainDayNightCard />
+            </SwiperItem>
+            <SwiperItem>
+                <MainFastEatCard count={count}/>
+            </SwiperItem>
+            <SwiperItem>
+                <MainSleepActiveCard />
+            </SwiperItem>
+        </Swiper> */}
+        <TabBar index={0} />
+    </View>
+}

src/utils/main.scss

@@ -0,0 +1,6 @@
+$nightColor: #041A40;
+$dayColor: #FFDF00;
+$fastColor: #02B6FD;
+$eatColor: #FE810C;
+$sleepColor: #8961F5;
+$activeColor: #FF4983;