🌻 update(custom): 更新主页消息列表样式

src/layout/center/index.vue

@@ -5,7 +5,7 @@
     <div class="resize-handle" @mousedown="initDrag"></div>
 
     <!-- 顶部搜索栏 -->
-    <div class="mt-30px w-full h-50px flex flex-col items-center">
+    <div class="mt-30px w-full h-40px flex flex-col items-center">
       <div class="flex-center gap-5px w-full pr-16px pl-16px box-border">
         <n-input
           :on-focus="() => router.push('/searchDetails')"
@@ -27,7 +27,7 @@
     </div>
 
     <!-- 消息列表 -->
-    <div class="wh-full">
+    <div class="h-full flex-1 pr-8px pl-6px">
       <router-view />
     </div>
   </div>

src/views/page/home-window/Message.vue

@@ -1,6 +1,31 @@
 <template>
-  <div>消息页面</div>
+  <div class="w-full h-75px bg-#d8eee2 rounded-8px">
+    <div class="flex items-center h-full pl-6px pr-8px gap-10px">
+      <img class="w-44px h-44px rounded-50% bg-#fff" style="border: 1px solid #f1f1f1" src="/logo.png" alt="" />
+
+      <div class="w-full h-38px flex flex-col justify-between">
+        <div class="flex items-center justify-between">
+          <span class="font-size-14px">宝贝🍓</span>
+          <span class="font-size-10px color-#808080">昨天</span>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <p
+            class="w-135px font-size-12px color-#808080"
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+            说的很经典哈萨克的哈萨克看到贺卡上
+          </p>
+
+          <div class="w-16px max-w-30px h-16px bg-#ccc rounded-40px font-size-10px flex-center font-bold color-#f1f1f1">
+            {{ msgTotal }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const msgTotal = ref('99+')
+</script>
 
 <style scoped></style>