diff --git a/everything-is-suitable-uniapp/src/pages/fortune/index.vue b/everything-is-suitable-uniapp/src/pages/fortune/index.vue
new file mode 100644
index 0000000..39fecc2
--- /dev/null
+++ b/everything-is-suitable-uniapp/src/pages/fortune/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <view class="fortune-page">
+    <view class="tabs" data-test="fortune-tabs">
+      <text :class="['tab', activeTab === 'daily' ? 'active' : '']" @tap="activeTab = 'daily'">{{ $t('fortune.daily') }}</text>
+      <text :class="['tab', activeTab === 'monthly' ? 'active' : '']" @tap="activeTab = 'monthly'">{{ $t('fortune.monthly') }}</text>
+    </view>
+
+    <view v-if="activeTab === 'daily'" class="daily-fortune">
+      <picker mode="date" :value="selectedDate" @change="onDateChange">
+        <text class="date-picker">{{ selectedDate || $t('fortune.selectDate') }}</text>
+      </picker>
+      <view v-if="dailyFortune" class="fortune-result">
+        <text class="overall-score">{{ $t('fortune.overallScore', { score: dailyFortune.overallScore }) }}</text>
+        <text class="overall-luck">{{ dailyFortune.overallLuck }}</text>
+        <view class="advice-section">
+          <text class="advice">{{ $t('fortune.career') }}{{ dailyFortune.careerAdvice }}</text>
+          <text class="advice">{{ $t('fortune.wealth') }}{{ dailyFortune.wealthAdvice }}</text>
+          <text class="advice">{{ $t('fortune.relationship') }}{{ dailyFortune.relationshipAdvice }}</text>
+          <text class="advice">{{ $t('fortune.health') }}{{ dailyFortune.healthAdvice }}</text>
+        </view>
+        <view class="lucky-section">
+          <text class="lucky">{{ $t('fortune.luckyColor') }}{{ dailyFortune.luckyColor }}</text>
+          <text class="lucky">{{ $t('fortune.luckyNumber') }}{{ dailyFortune.luckyNumber }}</text>
+          <text class="lucky">{{ $t('fortune.luckyDirection') }}{{ dailyFortune.luckyDirection }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="activeTab === 'monthly'" class="monthly-fortune">
+      <picker mode="date" fields="month" :value="selectedMonth" @change="onMonthChange">
+        <text class="date-picker">{{ selectedMonth || $t('fortune.selectMonth') }}</text>
+      </picker>
+      <view v-if="monthlyFortune" class="fortune-result">
+        <text class="overall-score">{{ $t('fortune.overallScore', { score: monthlyFortune.overallScore }) }}</text>
+        <text class="overall-luck">{{ monthlyFortune.overallLuck }}</text>
+        <view class="advice-section">
+          <text class="advice">{{ $t('fortune.career') }}{{ monthlyFortune.careerAdvice }}</text>
+          <text class="advice">{{ $t('fortune.wealth') }}{{ monthlyFortune.wealthAdvice }}</text>
+          <text class="advice">{{ $t('fortune.relationship') }}{{ monthlyFortune.relationshipAdvice }}</text>
+          <text class="advice">{{ $t('fortune.health') }}{{ monthlyFortune.healthAdvice }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="!chart" class="no-chart-hint">
+      <text class="hint-text">{{ $t('fortune.noChartHint') }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { onShow } from '@dcloudio/uni-app'
+import { FortuneService } from '../../services/fortuneService'
+import { ZiweiService } from '../../services/ziweiService'
+import { storage } from '../../utils/storage'
+import type { ZiweiChart } from '../../algorithms/types'
+import type { DailyFortune, MonthlyFortune } from '../../algorithms/types'
+
+const fortuneService = new FortuneService()
+const { t } = useI18n()
+
+onShow(() => {
+  uni.setNavigationBarTitle({ title: t('fortune.pageTitle') })
+})
+
+const activeTab = ref<'daily' | 'monthly'>('daily')
+const selectedDate = ref('')
+const selectedMonth = ref('')
+const chart = ref<ZiweiChart | null>(null)
+const dailyFortune = ref<DailyFortune | null>(null)
+const monthlyFortune = ref<MonthlyFortune | null>(null)
+
+onMounted(async () => {
+  const today = new Date()
+  selectedDate.value = today.toISOString().slice(0, 10)
+  selectedMonth.value = today.toISOString().slice(0, 7)
+
+  const savedChart = storage.get<ZiweiChart>('ziwei_chart')
+  if (savedChart) {
+    chart.value = savedChart
+  }
+})
+
+const onDateChange = async (e: any) => {
+  selectedDate.value = e.detail.value
+  if (chart.value) {
+    dailyFortune.value = await fortuneService.getDailyFortune(chart.value, selectedDate.value)
+  }
+}
+
+const onMonthChange = async (e: any) => {
+  selectedMonth.value = e.detail.value
+  if (chart.value) {
+    const [year, month] = selectedMonth.value.split('-').map(Number)
+    monthlyFortune.value = await fortuneService.getMonthlyFortune(chart.value, year, month)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fortune-page {
+  min-height: 100vh;
+  background-color: rgba(244, 244, 245, 0.3);
+  padding: 16px;
+  padding-bottom: 40px;
+}
+
+.tabs {
+  display: flex;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 4px;
+  margin-bottom: 16px;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 15px;
+  color: #666;
+  border-radius: 8px;
+}
+
+.tab.active {
+  color: #fff;
+  background-color: rgba(44, 24, 16, 255);
+  font-weight: 600;
+}
+
+.date-picker {
+  display: block;
+  text-align: center;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 12px;
+  font-size: 15px;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.fortune-result {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.overall-score {
+  font-size: 20px;
+  font-weight: 700;
+  color: rgba(44, 24, 16, 255);
+  display: block;
+  margin-bottom: 4px;
+}
+
+.overall-luck {
+  font-size: 16px;
+  color: #e74c3c;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.advice-section {
+  margin-bottom: 16px;
+}
+
+.advice {
+  font-size: 14px;
+  line-height: 22px;
+  color: #333;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.lucky-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.lucky {
+  font-size: 13px;
+  color: #666;
+  background-color: #f5f5f5;
+  padding: 4px 10px;
+  border-radius: 12px;
+}
+
+.no-chart-hint {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.hint-text {
+  font-size: 14px;
+  color: #999;
+}
+
+@media screen and (max-width: 375px) {
+  .tab {
+    font-size: 14px;
+    padding: 8px 0;
+  }
+
+  .overall-score {
+    font-size: 18px;
+  }
+
+  .advice {
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+</style>