feat: 更新首页布局

src/pages/index/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <view class="min-h-screen flex flex-col gap-3 bg-[#f2f4f3]">
+  <view class="min-h-screen flex flex-col gap-3 bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
-    <view class="bg-gradient-to-r from-[#7c3aed] to-[#c084fc] p-2 flex items-center justify-between text-white">
+    <view class="self-center p-1 flex items-center gap-2 text-gray-800">
-      <view class="flex flex-col">
+      <wd-img :width="40" :height="40" :src="imgURL" />
-        <text class="text-lg text-white font-semibold">
+
+      <view class="flex min-w-0 flex-col">
+        <text class="truncate text-lg text-white font-semibold">
           {{ greeting }}
         </text>
-        <text class="mt-0.5 text-xs text-white">
+        <text class="mt-0.5 text-xs text-white/70">
-          {{ today }}
+          {{ today }} · 记录每一次改变
         </text>
       </view>
-
-      <wd-img :width="40" :height="40" :src="imgURL" />
     </view>
 
     <wd-card title="📊 今日概览" custom-class="!mx-2 !mb-0">
@@ -18,18 +18,23 @@
         <view
             v-for="item in overviewItems"
             :key="item.label"
-            class="rounded-xl bg-[#f2f4f3] p-3 shadow-sm flex flex-col gap-1"
+            class="min-h-[80px] relative rounded-2xl bg-[#f8faf7] px-3.5 py-3 shadow-sm border border-[#eef0ef] flex flex-col justify-between"
         >
-          <view class="flex items-center gap-2">
+          <view class="flex items-center justify-between">
-            <text>{{ item.icon }}</text>
+            <view class="flex items-center gap-1.5">
-            <text class="text-gray-400">{{ item.label }}</text>
+              <text class="text-lg">{{ item.icon }}</text>
+              <text class="text-sm text-gray-400 font-medium">{{ item.label }}</text>
             </view>
-          <text class="block text-xl text-gray-800 font-bold">
+            <wd-button size="mini" round icon="plus" :plain="true" type="primary"/>
+          </view>
+
+          <text class="mt-2 text-base text-gray-800 font-bold tracking-tight">
             {{ item.value }}
           </text>
-          <text class="text-gray-400">
+
-            {{ item.sub }}
+          <view class="mt-auto pt-1.5">
-          </text>
+            <text class="text-sm text-gray-400">{{ item.sub }}</text>
+          </view>
         </view>
       </view>
     </wd-card>
@@ -82,16 +87,16 @@ import { useRecordStore } from '@/store/record'
 import {getDateStr, getDayRecords, getTimeStr} from '@/utils/record'
 import type { IHealthRecord } from "@/type/record";
 import { onShow } from "@dcloudio/uni-app";
-import appLogo from '@/static/logo.png'
 import { getOverview, getPlan, getProfile } from "@/utils/profile";
+import appLogo from '@/static/logo.png'
 import type { IOverview, IPlan } from "@/type/profile";
 
-const imgURL = appLogo
-
 defineOptions({
   name: 'Home',
 })
 
+const imgURL = appLogo
+
 const recordStore = useRecordStore()
 
 const todayRecords = ref<IHealthRecord[]>([])
@@ -106,7 +111,7 @@ const greeting = computed(() => {
     return '早上好 ☀️'
   if (hour < 18)
     return '下午好 👋'
-  return '晚上好 🌆'
+  return '晚上好 ✨'
 })
 
 const today = computed(() => {