diff --git a/src/components/AppTabBar.vue b/src/components/AppTabBar.vue
new file mode 100644
index 0000000..28d7dba
--- /dev/null
+++ b/src/components/AppTabBar.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+export type TabKey = 'home' | 'case' | 'message' | 'project' | 'personal'
+
+const props = defineProps<{
+  active: TabKey
+}>()
+
+const tabs: Array<{ key: TabKey, label: string, icon: string, path: string }> = [
+  { key: 'home', label: '首页', icon: '/static/icons/tab-home.svg', path: '/pages/home-index/index' },
+  { key: 'case', label: '案例库', icon: '/static/icons/tab-case.svg', path: '/pages/case-library/index' },
+  { key: 'message', label: '消息中心', icon: '/static/icons/tab-message.svg', path: '/pages/message-center/index' },
+  { key: 'project', label: '项目中心', icon: '/static/icons/tab-project.svg', path: '/pages/project-center/index' },
+  { key: 'personal', label: '个人中心', icon: '/static/icons/tab-personal.svg', path: '/pages/personal-center/index' },
+]
+
+function handleSwitch(path: string, key: TabKey) {
+  if (key === props.active)
+    return
+  uni.redirectTo({ url: path })
+}
+</script>
+
+<template>
+  <view class="app-tab-bar">
+    <view
+      v-for="tab in tabs"
+      :key="tab.key"
+      class="app-tab-bar__item"
+      @tap="handleSwitch(tab.path, tab.key)"
+    >
+      <image
+        class="app-tab-bar__icon"
+        :class="{ 'app-tab-bar__icon--active': tab.key === active }"
+        :src="tab.icon"
+        mode="aspectFit"
+      />
+      <text
+        class="app-tab-bar__label"
+        :class="{ 'app-tab-bar__label--active': tab.key === active }"
+      >
+        {{ tab.label }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.app-tab-bar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 12rpx 0 calc(12rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.app-tab-bar__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+.app-tab-bar__icon {
+  width: 44rpx;
+  height: 44rpx;
+  opacity: 0.45;
+
+  &--active {
+    opacity: 1;
+  }
+}
+
+.app-tab-bar__label {
+  margin-top: 6rpx;
+  font-size: 20rpx;
+  color: $color-text-secondary;
+
+  &--active {
+    color: $color-primary;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/hooks/use-greeting.ts b/src/hooks/use-greeting.ts
new file mode 100644
index 0000000..c916bf9
--- /dev/null
+++ b/src/hooks/use-greeting.ts
@@ -0,0 +1,9 @@
+export function useGreeting() {
+  const hour = new Date().getHours()
+
+  if (hour < 12)
+    return '上午好'
+  if (hour < 18)
+    return '中午好'
+  return '晚上好'
+}
diff --git a/src/pages.json b/src/pages.json
index 7a7be15..83c9f70 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -42,6 +42,36 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/home-index/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/case-library/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/message-center/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/project-center/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/personal-center/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/Login/user-login/index.vue b/src/pages/Login/user-login/index.vue
index e9a92ef..77161fc 100644
--- a/src/pages/Login/user-login/index.vue
+++ b/src/pages/Login/user-login/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { navigateToResultPage } from '@/utils/navigate-result'
 import LoginInput from './components/LoginInput.vue'
 
 const phone = ref('')
@@ -21,8 +20,8 @@ function handleLogin() {
     return
   }
 
-  // TODO: 接入登录接口后，在接口返回失败时调用
-  navigateToResultPage('loginFailed')
+  // TODO: 接入登录接口，失败时调用 navigateToResultPage('loginFailed')
+  uni.redirectTo({ url: '/pages/home-index/index' })
 }
 
 function handleForgotPassword() {
diff --git a/src/pages/Login/user-sms-login/index.vue b/src/pages/Login/user-sms-login/index.vue
index a3dcae9..9714164 100644
--- a/src/pages/Login/user-sms-login/index.vue
+++ b/src/pages/Login/user-sms-login/index.vue
@@ -20,6 +20,9 @@ function handleLogin() {
     uni.showToast({ title: '请输入手机号和验证码', icon: 'none' })
     return
   }
+
+  // TODO: 接入登录接口
+  uni.redirectTo({ url: '/pages/home-index/index' })
 }
 
 function handlePasswordLogin() {
diff --git a/src/pages/case-library/index.vue b/src/pages/case-library/index.vue
new file mode 100644
index 0000000..707c630
--- /dev/null
+++ b/src/pages/case-library/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import AppTabBar from '@/components/AppTabBar.vue'
+</script>
+
+<template>
+  <view class="placeholder-page">
+    <text class="placeholder-page__title">
+      案例库
+    </text>
+    <text class="placeholder-page__desc">
+      功能开发中
+    </text>
+    <AppTabBar active="case" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.placeholder-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+}
+
+.placeholder-page__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.placeholder-page__desc {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+  color: $color-text-secondary;
+}
+</style>
diff --git a/src/pages/home-index/components/ProjectCard.vue b/src/pages/home-index/components/ProjectCard.vue
new file mode 100644
index 0000000..faa8545
--- /dev/null
+++ b/src/pages/home-index/components/ProjectCard.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { ProjectItem } from '@/types/home'
+
+defineProps<{
+  item: ProjectItem
+}>()
+</script>
+
+<template>
+  <view class="project-card">
+    <view class="project-card__header">
+      <text class="project-card__title">
+        {{ item.title }}
+      </text>
+      <text class="project-card__status">
+        {{ item.status }}
+      </text>
+    </view>
+
+    <view class="project-card__meta">
+      <text
+        class="project-card__tag"
+        :class="`project-card__tag--${item.tagTheme || 'orange'}`"
+      >
+        {{ item.category }}
+      </text>
+      <text class="project-card__no">
+        项目编号：{{ item.projectNo }}
+      </text>
+    </view>
+
+    <view class="project-card__progress-row">
+      <text class="project-card__progress-label">
+        进行中
+      </text>
+      <text class="project-card__progress-value">
+        {{ item.progress }}%
+      </text>
+    </view>
+
+    <view class="project-card__progress-bar">
+      <view
+        class="project-card__progress-fill"
+        :style="{ width: `${item.progress}%` }"
+      />
+    </view>
+
+    <view class="project-card__footer">
+      <text class="project-card__time">
+        更新时间：{{ item.updateTime }}
+      </text>
+      <text class="project-card__detail">
+        查看详情 >
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.project-card {
+  padding: 28rpx;
+  margin-top: 20rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+}
+
+.project-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.project-card__title {
+  flex: 1;
+  padding-right: 16rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-card__status {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__meta {
+  display: flex;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.project-card__tag {
+  flex-shrink: 0;
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  border-radius: 6rpx;
+
+  &--orange {
+    color: $color-tag-orange;
+    background: $color-tag-orange-bg;
+  }
+
+  &--peach {
+    color: #e07b4a;
+    background: #fff0e8;
+  }
+}
+
+.project-card__no {
+  margin-left: 12rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__progress-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
+}
+
+.project-card__progress-label,
+.project-card__progress-value {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__progress-bar {
+  height: 12rpx;
+  margin-top: 12rpx;
+  overflow: hidden;
+  background: #eef2ff;
+  border-radius: 6rpx;
+}
+
+.project-card__progress-fill {
+  height: 100%;
+  background: $color-primary;
+  border-radius: 6rpx;
+}
+
+.project-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.project-card__time {
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__detail {
+  font-size: 24rpx;
+  color: $color-text-link;
+}
+</style>
diff --git a/src/pages/home-index/components/ServiceCard.vue b/src/pages/home-index/components/ServiceCard.vue
new file mode 100644
index 0000000..61ddfc5
--- /dev/null
+++ b/src/pages/home-index/components/ServiceCard.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { ServiceItem } from '@/types/home'
+
+defineProps<{
+  item: ServiceItem
+}>()
+</script>
+
+<template>
+  <view
+    class="service-card"
+    :class="[
+      `service-card--${item.theme}`,
+      { 'service-card--with-illus': item.illus },
+    ]"
+  >
+    <image
+      v-if="item.illus"
+      class="service-card__illus"
+      :src="item.illus"
+      mode="aspectFit"
+    />
+    <view class="service-card__content">
+      <text class="service-card__title">
+        {{ item.title }}
+      </text>
+      <text class="service-card__desc">
+        {{ item.desc }}
+      </text>
+      <text class="service-card__link">
+        了解详细 >
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.service-card {
+  position: relative;
+  display: flex;
+  height: 240rpx;
+  padding: 28rpx 24rpx 24rpx;
+  overflow: hidden;
+  border-radius: 20rpx;
+  box-sizing: border-box;
+
+  &--with-illus {
+    overflow: visible;
+  }
+
+  &--blue {
+    background: linear-gradient(180deg, #D3E1FC 0%, #FFFFFF 100%);
+  }
+
+  &--green {
+    background: linear-gradient( 180deg, #B7EDEA 0%, #FFFFFF 100%);
+  }
+
+  &--pink {
+    background: linear-gradient( 180deg, #FFECE1 0%, #FFFFFF 100%);
+  }
+
+  &--orange {
+    background: linear-gradient( 180deg, #F7D3C6 0%, #FFFFFF 100%);
+  }
+}
+
+.service-card__illus {
+  position: absolute;
+  top: -36rpx;
+  right: -10rpx;
+  z-index: 2;
+  width: 152rpx;
+  height: 152rpx;
+  pointer-events: none;
+}
+
+.service-card__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+}
+
+.service-card__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.service-card__desc {
+  margin-top: 12rpx;
+  font-size: 22rpx;
+  line-height: 1.45;
+  color: #666666;
+}
+
+.service-card--with-illus .service-card__desc {
+  margin-top: 28rpx;
+}
+
+.service-card__link {
+  margin-top: auto;
+  font-size: 22rpx;
+  color: #2563EB;
+}
+</style>
diff --git a/src/pages/home-index/index.vue b/src/pages/home-index/index.vue
new file mode 100644
index 0000000..1043184
--- /dev/null
+++ b/src/pages/home-index/index.vue
@@ -0,0 +1,462 @@
+<script setup lang="ts">
+import AppTabBar from '@/components/AppTabBar.vue'
+import { useGreeting } from '@/hooks/use-greeting'
+import type { ProjectItem, QuickEntryItem, ServiceItem } from '@/types/home'
+import headerBg from '@/static/icons/1.png'
+import softwareIllus from '@/static/icons/software.png'
+import hardwareIllus from '@/static/icons/hardware.png'
+import iotIllus from '@/static/icons/iot.png'
+import productionIllus from '@/static/icons/production.png'
+import ProjectCard from './components/ProjectCard.vue'
+import ServiceCard from './components/ServiceCard.vue'
+
+const greeting = useGreeting()
+
+const services: ServiceItem[] = [
+  {
+    id: '1',
+    title: '互联网软件',
+    desc: 'Web/小程序/APP/二次开发/桌面工具等',
+    theme: 'blue',
+    illus: softwareIllus,
+  },
+  {
+    id: '2',
+    title: '硬件电路',
+    desc: '原理图设计/PCB设计/电气校验等',
+    theme: 'green',
+    illus: hardwareIllus,
+  },
+  {
+    id: '3',
+    title: '物联网全案',
+    desc: '软硬件开发+云端一体化/定制化开发等',
+    theme: 'pink',
+    illus: iotIllus,
+  },
+  {
+    id: '4',
+    title: '生产制造',
+    desc: 'PCB制版/SMT/整机装配/定制生产等',
+    theme: 'orange',
+    illus: productionIllus,
+  },
+]
+
+const quickEntries: QuickEntryItem[] = [
+  { id: '1', label: '项目中心', icon: '/static/icons/quick-project.png', bgColor: '#E8F0FF' },
+  { id: '2', label: '快捷提报', icon: '/static/icons/quick-report.png', bgColor: '#E8FAF4' },
+  { id: '3', label: '在线客服', icon: '/static/icons/quick-service.png', bgColor: '#F3E8FF' },
+  { id: '4', label: '合同管理', icon: '/static/icons/quick-contract.png', bgColor: '#FEE2E2' },
+  { id: '5', label: '财务管理', icon: '/static/icons/quick-finance.png', bgColor: '#E0F2FE' },
+]
+
+const projects: ProjectItem[] = [
+  {
+    id: '1',
+    title: '社区康养智能服务系统',
+    category: '互联网软件',
+    projectNo: '20260813RJ251545',
+    progress: 65,
+    status: '进行中',
+    updateTime: '2026-8-13 11:04:12',
+    tagTheme: 'orange',
+  },
+  {
+    id: '2',
+    title: '社区康养智能服务系统',
+    category: '生产制造',
+    projectNo: '20260813RJ251545',
+    progress: 65,
+    status: '进行中',
+    updateTime: '2026-8-13 11:04:12',
+    tagTheme: 'peach',
+  },
+]
+</script>
+
+<template>
+  <view class="home">
+    <view class="home__header">
+      <image
+        class="home__header-bg"
+        :src="headerBg"
+        mode="aspectFill"
+      />
+      <view class="home__header-inner">
+        <view class="home__header-top">
+          <view class="home__brand">
+            <image
+              class="home__logo"
+              src="/static/icons/logos.png"
+              mode="aspectFit"
+            />
+            <text class="home__brand-name">
+              虫子智造研发一体化平台
+            </text>
+          </view>
+          <view class="home__message-btn">
+            <image
+              class="home__message-icon"
+              src="/static/icons/icon-message.png"
+              mode="aspectFit"
+            />
+          </view>
+        </view>
+
+        <view class="home__greeting-row">
+          <text class="home__greeting">
+            {{ greeting }}
+          </text>
+          <view class="home__hi-badge">
+            <image
+            class="home__hi-icon"
+            src="/static/icons/hi.png"
+            mode="aspectFit"
+            />
+          </view>
+        </view>
+        <text class="home__subtitle">
+          今天有2个项目正在进行
+        </text>
+      </view>
+    </view>
+
+    <scroll-view
+      class="home__body"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="home__content">
+        <view class="home__section">
+          <text class="home__section-title">
+            业务服务
+          </text>
+          <view class="home__service-grid">
+            <ServiceCard
+              v-for="item in services"
+              :key="item.id"
+              :item="item"
+            />
+          </view>
+        </view>
+
+        <view class="home__sections">
+          <view class="home__section-header">
+            <text class="home__section-title">
+              快捷入口
+            </text>
+            <text class="home__section-action">
+              编辑
+            </text>
+          </view>
+          <view class="home__quick-row">
+            <view
+              v-for="entry in quickEntries"
+              :key="entry.id"
+              class="home__quick-item"
+            >
+              <image
+                class="home__quick-icon"
+                :src="entry.icon"
+                mode="aspectFit"
+              />
+              <text class="home__quick-label">
+                {{ entry.label }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <view class="home__section home__section--last">
+          <view class="home__section-header">
+            <text class="home__section-title">
+              在办项目
+            </text>
+            <text class="home__section-action">
+              查看全部
+            </text>
+          </view>
+
+          <view class="home__stats-row">
+            <view class="home__stat-card home__stat-card--blue">
+              <text class="home__stat-value">
+                3 个项目
+              </text>
+              <text class="home__stat-label">
+                进行中
+              </text>
+            </view>
+            <view class="home__stat-card home__stat-card--orange">
+              <text class="home__stat-value">
+                3 项待办
+              </text>
+              <text class="home__stat-label">
+                待您处理
+              </text>
+            </view>
+          </view>
+
+          <text class="home__recent-title">
+            最近更新
+          </text>
+
+          <ProjectCard
+            v-for="item in projects"
+            :key="item.id"
+            :item="item"
+          />
+        </view>
+      </view>
+    </scroll-view>
+
+    <AppTabBar active="home" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.home {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: $color-bg-section;
+}
+
+.home__header {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: $color-home-header;
+  height: 360rpx;
+}
+
+.home__header-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.home__header-inner {
+  position: relative;
+  z-index: 1;
+  padding: calc(var(--status-bar-height, 44px) + 16rpx) 32rpx 48rpx;
+}
+
+.home__header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top:85rpx
+}
+
+.home__brand {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+}
+
+.home__logo {
+  flex-shrink: 0;
+  width: 76.34rpx;
+  height: 76.34rpx;
+  padding: 8rpx;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+}
+
+.home__brand-name {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home__message-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+  margin-left: 16rpx;
+  border-radius: 16rpx;
+}
+
+.home__message-icon {
+  width: 57.25rpx;
+  height: 57.25rpx;
+}
+
+.home__greeting-row {
+  display: flex;
+  align-items: center;
+  margin-top: 30rpx;
+}
+
+.home__greeting {
+  font-size: 52rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.home__hi-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 45.8rpx;
+  height: 45.8rpx;
+  margin-left: 16rpx;
+  border-radius: 50%;
+}
+
+.home__hi-text {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #ffffff;
+  text-transform: lowercase;
+}
+
+.home__subtitle {
+  display: block;
+  margin-top: 12rpx;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.home__body {
+  flex: 1;
+  background: transparent;
+}
+
+.home__content {
+  min-height: 100%;
+  margin-top: 24rpx;
+  padding: 20rpx 20rpx calc(140rpx + env(safe-area-inset-bottom));
+}
+
+.home__section {
+  margin-bottom: 20rpx;
+  height: 600rpx;
+  width: 711.83rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+  padding-top: 20rpx
+}
+
+.home__sections {
+  margin-bottom: 20rpx;
+  height: 210rpx;
+  width: 711.83rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+  padding-top: 20rpx
+}
+
+.home__section--last {
+  margin-bottom: 0;
+}
+
+.home__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.home__section-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: $color-text-primary;
+  margin-left: 30rpx;
+  // margin-top: 20rpx;
+}
+
+.home__section-action {
+  font-size: 26rpx;
+  color: #666666 ;
+  margin-right: 20rpx;
+}
+
+.home__service-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+  margin-top: 24rpx;
+  padding: 24rpx 20rpx 0;
+  overflow: visible;
+}
+
+.home__quick-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.home__quick-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+.home__quick-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+
+.home__quick-label {
+  margin-top: 12rpx;
+  font-size: 22rpx;
+  color: $color-text-primary;
+  text-align: center;
+}
+
+.home__stats-row {
+  display: flex;
+  gap: 20rpx;
+}
+
+.home__stat-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 28rpx 24rpx;
+  border-radius: 16rpx;
+
+  &--blue {
+    background: $color-primary-light;
+  }
+
+  &--orange {
+    background: $color-stat-orange-bg;
+  }
+}
+
+.home__stat-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: $color-text-primary;
+}
+
+.home__stat-label {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.home__recent-title {
+  display: block;
+  margin-top: 32rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+</style>
diff --git a/src/pages/message-center/index.vue b/src/pages/message-center/index.vue
new file mode 100644
index 0000000..ec58487
--- /dev/null
+++ b/src/pages/message-center/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import AppTabBar from '@/components/AppTabBar.vue'
+</script>
+
+<template>
+  <view class="placeholder-page">
+    <text class="placeholder-page__title">
+      消息中心
+    </text>
+    <text class="placeholder-page__desc">
+      功能开发中
+    </text>
+    <AppTabBar active="message" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.placeholder-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+}
+
+.placeholder-page__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.placeholder-page__desc {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+  color: $color-text-secondary;
+}
+</style>
diff --git a/src/pages/personal-center/index.vue b/src/pages/personal-center/index.vue
new file mode 100644
index 0000000..484e593
--- /dev/null
+++ b/src/pages/personal-center/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import AppTabBar from '@/components/AppTabBar.vue'
+</script>
+
+<template>
+  <view class="placeholder-page">
+    <text class="placeholder-page__title">
+      个人中心
+    </text>
+    <text class="placeholder-page__desc">
+      功能开发中
+    </text>
+    <AppTabBar active="personal" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.placeholder-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+}
+
+.placeholder-page__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.placeholder-page__desc {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+  color: $color-text-secondary;
+}
+</style>
diff --git a/src/pages/project-center/index.vue b/src/pages/project-center/index.vue
new file mode 100644
index 0000000..711ba76
--- /dev/null
+++ b/src/pages/project-center/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import AppTabBar from '@/components/AppTabBar.vue'
+</script>
+
+<template>
+  <view class="placeholder-page">
+    <text class="placeholder-page__title">
+      项目中心
+    </text>
+    <text class="placeholder-page__desc">
+      功能开发中
+    </text>
+    <AppTabBar active="project" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.placeholder-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+}
+
+.placeholder-page__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.placeholder-page__desc {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+  color: $color-text-secondary;
+}
+</style>
diff --git a/src/static/icons/1.png b/src/static/icons/1.png
new file mode 100644
index 0000000..8873aed
Binary files /dev/null and b/src/static/icons/1.png differ
diff --git a/src/static/icons/hardware.png b/src/static/icons/hardware.png
new file mode 100644
index 0000000..f9e721d
Binary files /dev/null and b/src/static/icons/hardware.png differ
diff --git a/src/static/icons/hi.png b/src/static/icons/hi.png
new file mode 100644
index 0000000..bf4ef6a
Binary files /dev/null and b/src/static/icons/hi.png differ
diff --git a/src/static/icons/icon-message.png b/src/static/icons/icon-message.png
new file mode 100644
index 0000000..7ba3bb1
Binary files /dev/null and b/src/static/icons/icon-message.png differ
diff --git a/src/static/icons/iot.png b/src/static/icons/iot.png
new file mode 100644
index 0000000..6fb1fcc
Binary files /dev/null and b/src/static/icons/iot.png differ
diff --git a/src/static/icons/logos.png b/src/static/icons/logos.png
new file mode 100644
index 0000000..980ed08
Binary files /dev/null and b/src/static/icons/logos.png differ
diff --git a/src/static/icons/production.png b/src/static/icons/production.png
new file mode 100644
index 0000000..886303b
Binary files /dev/null and b/src/static/icons/production.png differ
diff --git a/src/static/icons/quick-contract.png b/src/static/icons/quick-contract.png
new file mode 100644
index 0000000..1bf0ae9
Binary files /dev/null and b/src/static/icons/quick-contract.png differ
diff --git a/src/static/icons/quick-finance.png b/src/static/icons/quick-finance.png
new file mode 100644
index 0000000..2d15fd5
Binary files /dev/null and b/src/static/icons/quick-finance.png differ
diff --git a/src/static/icons/quick-project.png b/src/static/icons/quick-project.png
new file mode 100644
index 0000000..0ca2fea
Binary files /dev/null and b/src/static/icons/quick-project.png differ
diff --git a/src/static/icons/quick-report.png b/src/static/icons/quick-report.png
new file mode 100644
index 0000000..1720ab2
Binary files /dev/null and b/src/static/icons/quick-report.png differ
diff --git a/src/static/icons/quick-service.png b/src/static/icons/quick-service.png
new file mode 100644
index 0000000..fbb0145
Binary files /dev/null and b/src/static/icons/quick-service.png differ
diff --git a/src/static/icons/software.png b/src/static/icons/software.png
new file mode 100644
index 0000000..0a1ffc5
Binary files /dev/null and b/src/static/icons/software.png differ
diff --git a/src/static/icons/tab-case.svg b/src/static/icons/tab-case.svg
new file mode 100644
index 0000000..4117081
--- /dev/null
+++ b/src/static/icons/tab-case.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
+  <rect x="13" y="4" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
+  <rect x="4" y="13" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
+  <rect x="13" y="13" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
+</svg>
diff --git a/src/static/icons/tab-home.svg b/src/static/icons/tab-home.svg
new file mode 100644
index 0000000..81a2e0a
--- /dev/null
+++ b/src/static/icons/tab-home.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 10.5L12 4L20 10.5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V10.5Z" stroke="#2563EB" stroke-width="1.8" stroke-linejoin="round"/>
+  <path d="M9 20V13H15V20" stroke="#2563EB" stroke-width="1.8" stroke-linejoin="round"/>
+</svg>
diff --git a/src/static/icons/tab-message.svg b/src/static/icons/tab-message.svg
new file mode 100644
index 0000000..c3b179c
--- /dev/null
+++ b/src/static/icons/tab-message.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 6H19C19.5523 6 20 6.44772 20 7V15C20 15.5523 19.5523 16 19 16H9L5 19V7C5 6.44772 5.44772 6 6 6H5Z" stroke="#999999" stroke-width="1.8" stroke-linejoin="round"/>
+</svg>
diff --git a/src/static/icons/tab-personal.svg b/src/static/icons/tab-personal.svg
new file mode 100644
index 0000000..cd0d641
--- /dev/null
+++ b/src/static/icons/tab-personal.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="8" r="4" stroke="#999999" stroke-width="1.8"/>
+  <path d="M5 19C5.67157 16.7909 8.13401 15 12 15C15.866 15 18.3284 16.7909 19 19" stroke="#999999" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/src/static/icons/tab-project.svg b/src/static/icons/tab-project.svg
new file mode 100644
index 0000000..3600b24
--- /dev/null
+++ b/src/static/icons/tab-project.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 7C5 5.89543 5.89543 5 7 5H10L12 7H17C18.1046 7 19 7.89543 19 9V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V7Z" stroke="#999999" stroke-width="1.8" stroke-linejoin="round"/>
+</svg>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3feaf13..054df0a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -13,3 +13,10 @@ $color-bg-input: #f2f3f5;
 $color-splash-gradient-start: #f0f7ff;
 $color-splash-gradient-end: #deedff;
 $color-splash-circle: rgba(180, 210, 255, 0.35);
+
+$color-home-header: #2563EB;
+$color-bg-section: #f5f6f8;
+$color-tag-orange: #ff8a4c;
+$color-tag-orange-bg: #fff3eb;
+$color-stat-orange: #ff9a3d;
+$color-stat-orange-bg: #fff7ed;
diff --git a/src/types/home.ts b/src/types/home.ts
new file mode 100644
index 0000000..073a6a8
--- /dev/null
+++ b/src/types/home.ts
@@ -0,0 +1,25 @@
+export interface ServiceItem {
+  id: string
+  title: string
+  desc: string
+  theme: 'blue' | 'green' | 'pink' | 'orange'
+  illus?: string
+}
+
+export interface QuickEntryItem {
+  id: string
+  label: string
+  icon: string
+  bgColor: string
+}
+
+export interface ProjectItem {
+  id: string
+  title: string
+  category: string
+  projectNo: string
+  progress: number
+  status: string
+  updateTime: string
+  tagTheme?: 'orange' | 'peach'
+}