底部导航

src/pages/index/index.tsx

@@ -5,6 +5,7 @@ import { Search, Swiper, SwiperItem, Grid, GridItem, Tabs, Tab, Image as VantIma
 import ArticleCard from '@/components/ArticleCard'
 import { banners, navItems, articles } from '@/mock/articles'
 import type { ArticleCategory } from '@/types/article'
+import CustomTabBar from "@/custom-tab-bar";
 import './index.less'
 
 /** 获取状态栏和导航栏高度 */
@@ -163,6 +164,8 @@ export default function Index() {
         {/* 底部安全距离 */}
         <View className='bottom-safe' />
       </ScrollView>
+
+      <CustomTabBar />
     </View>
   )
 }

src/pages/messages/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息',
+  navigationStyle: 'custom',
+})

src/pages/messages/index.less

@@ -0,0 +1,29 @@
+.messages-page {
+  min-height: 100vh;
+  background: #f7f8fa;
+
+  .page-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 300px;
+
+    .placeholder-icon {
+      font-size: 96px;
+      margin-bottom: 24px;
+    }
+
+    .placeholder-text {
+      font-size: 36px;
+      font-weight: 500;
+      color: #323233;
+      margin-bottom: 12px;
+    }
+
+    .placeholder-desc {
+      font-size: 28px;
+      color: #969799;
+    }
+  }
+}

src/pages/messages/index.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from '@tarojs/components'
+import CustomTabBar from "@/custom-tab-bar"
+import './index.less'
+
+export default function Messages() {
+  return (
+    <View className='messages-page'>
+      <View className='page-placeholder'>
+        <Text className='placeholder-icon'>💬</Text>
+        <Text className='placeholder-text'>消息</Text>
+        <Text className='placeholder-desc'>即将上线，敬请期待</Text>
+      </View>
+      <CustomTabBar />
+    </View>
+  )
+}

src/pages/profile/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的',
+  navigationStyle: 'custom',
+})

src/pages/profile/index.less

@@ -0,0 +1,29 @@
+.profile-page {
+  min-height: 100vh;
+  background: #f7f8fa;
+
+  .page-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 300px;
+
+    .placeholder-icon {
+      font-size: 96px;
+      margin-bottom: 24px;
+    }
+
+    .placeholder-text {
+      font-size: 36px;
+      font-weight: 500;
+      color: #323233;
+      margin-bottom: 12px;
+    }
+
+    .placeholder-desc {
+      font-size: 28px;
+      color: #969799;
+    }
+  }
+}

src/pages/profile/index.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from '@tarojs/components'
+import CustomTabBar from "@/custom-tab-bar"
+import './index.less'
+
+export default function Profile() {
+  return (
+    <View className='profile-page'>
+      <View className='page-placeholder'>
+        <Text className='placeholder-icon'>👤</Text>
+        <Text className='placeholder-text'>我的</Text>
+        <Text className='placeholder-desc'>即将上线，敬请期待</Text>
+      </View>
+      <CustomTabBar />
+    </View>
+  )
+}

src/pages/tasks/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '校园任务',
+  navigationStyle: 'custom',
+  "usingComponents": {}
+})

src/pages/tasks/index.less

@@ -0,0 +1,29 @@
+.tasks-page {
+  min-height: 100vh;
+  background: #f7f8fa;
+
+  .page-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 300px;
+
+    .placeholder-icon {
+      font-size: 96px;
+      margin-bottom: 24px;
+    }
+
+    .placeholder-text {
+      font-size: 36px;
+      font-weight: 500;
+      color: #323233;
+      margin-bottom: 12px;
+    }
+
+    .placeholder-desc {
+      font-size: 28px;
+      color: #969799;
+    }
+  }
+}

src/pages/tasks/index.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from '@tarojs/components'
+import CustomTabBar from "@/custom-tab-bar"
+import './index.less'
+
+export default function Tasks() {
+  return (
+    <View className='tasks-page'>
+      <View className='page-placeholder'>
+        <Text className='placeholder-icon'>📋</Text>
+        <Text className='placeholder-text'>校园任务</Text>
+        <Text className='placeholder-desc'>即将上线，敬请期待</Text>
+      </View>
+      <CustomTabBar />
+    </View>
+  )
+}