feat: ✨ 整合UnoCSS和添加Tabbar

src/pages/index/index.vue

@@ -1,25 +1,18 @@
 <template>
-  <view class="content">
+  <view class="flex-center flex-col">
     <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+    <view>
+      <text class="text-red font-bold text-lg">{{ title }}</text>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-const title = ref("Hello");
+const title = ref("Hello YouLai APP");
 </script>
 
 <style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .logo {
   width: 200rpx;
   height: 200rpx;
@@ -28,14 +21,4 @@ const title = ref("Hello");
   margin-bottom: 50rpx;
   margin-left: auto;
 }
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
 </style>

src/pages/my/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <view class="flex-center flex-col">
+    <text class="text-blue font-bold text-lg">我的</text>
+  </view>
+</template>

src/pages/workbench/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <view class="flex-center flex-col">
+    <text class="text-cyan font-bold text-lg">工作台</text>
+  </view>
+</template>