diff --git a/src/pages.json b/src/pages.json
index f0bdf92..77d3069 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -45,6 +45,13 @@
         "navigationBarTitleText": ""
       }
     },
+    {
+      "path": "pages/exam/detail",
+      "type": "home",
+      "style": {
+        "navigationBarTitleText": "报名考试"
+      }
+    },
     {
       "path": "pages/activity/detail",
       "type": "page"
diff --git a/src/pages/exam/detail.vue b/src/pages/exam/detail.vue
new file mode 100644
index 0000000..89a7170
--- /dev/null
+++ b/src/pages/exam/detail.vue
@@ -0,0 +1,137 @@
+<route lang="json5" type="home">
+{
+  style: {
+    navigationBarTitleText: '报名考试',
+  },
+}
+</route>
+<template>
+  <view class="min-h-screen flex flex-col bg-white">
+    <!-- 顶部栏 -->
+
+    <!-- 考试信息卡片 -->
+    <view class="flex-1 flex items-center justify-center pb-24">
+      <view
+        class="bg-white rounded-xl shadow-lg p-4 w-full max-w-[300px] mx-8 border border-gray-500"
+        style="aspect-ratio: 3/5; min-height: 580px"
+      >
+        <!-- 1. 地点名 -->
+        <view class="mb-2">
+          <text class="text-2xl font-bold">{{ examDetail.examName }}</text>
+        </view>
+        <view class="h-4"></view>
+        <!-- 2. 时间 -->
+        <view class="mb-2">
+          <text class="text-lg text-gray-700">
+            {{ formatDate(examDetail.examDate) }} {{ examDetail.startTime }}-{{
+              examDetail.endTime
+            }}
+          </text>
+        </view>
+        <!-- 3. 空行 -->
+        <view class="h-4"></view>
+        <view class="h-4"></view>
+        <view class="h-4"></view>
+        <view class="h-4"></view>
+        <!-- 4. 考试人数 -->
+        <view class="mb-2">
+          <text class="text-lg text-gray-700">考试人数：{{ examDetail.estimatedAttendees }}</text>
+        </view>
+        <view class="h-4"></view>
+        <!-- 5. 考官 -->
+        <view class="mb-2">
+          <text class="text-lg text-gray-700">考官：{{ examDetail.ExaminersName }}</text>
+        </view>
+        <view class="h-4"></view>
+        <!-- 6. 监督 -->
+        <view class="mb-2">
+          <text class="text-lg text-gray-700">监督：{{ examDetail.supervisorsName }}</text>
+        </view>
+        <view class="h-4"></view>
+        <!-- 7. 空行 -->
+        <view class="h-4"></view>
+        <view class="h-4"></view>
+        <view class="h-4"></view>
+        <!-- 8. 考点名称 -->
+        <view class="mb-2">
+          <text class="text-lg text-gray-700">{{ examDetail.locationName }}</text>
+        </view>
+        <!-- 9. 详细地址 -->
+        <view>
+          <text class="text-sm text-gray-500">
+            {{ examDetail.provinceName }}{{ examDetail.cityName }}{{ examDetail.address }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 固定底部报名按钮 -->
+    <view class="fixed left-0 right-0 bottom-0 bg-white shadow p-4 z-50">
+      <button
+        class="w-full h-12 rounded-lg text-base font-semibold transition-all duration-200 flex items-center justify-center"
+        :class="joined ? 'bg-gray-300 text-gray-500' : 'bg-black text-white hover:bg-gray-800'"
+        :disabled="joined"
+        @click="submitRegister"
+      >
+        {{ joined ? '已报名' : '报名' }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getCanBookExamInfoAPI, joinExamInfoAPI } from '@/service/exam'
+
+const examDetail = ref<any>({})
+const joined = ref(false)
+
+const goBack = () => {
+  uni.navigateBack()
+}
+
+const submitRegister = async () => {
+  if (!examDetail.value.id || joined.value) return
+  try {
+    const res = await joinExamInfoAPI(examDetail.value.id)
+    if (res.code === 0) {
+      uni.showToast({ title: '报名成功', icon: 'success' })
+      joined.value = true
+    } else {
+      uni.showModal({
+        title: '报名失败',
+        content: res.msg || '报名失败',
+        showCancel: false,
+      })
+    }
+  } catch (e: any) {
+    uni.showModal({
+      title: '报名失败',
+      content: e?.msg || '报名失败',
+      showCancel: false,
+    })
+  }
+}
+
+function formatDate(dateStr: string) {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}/${m}/${day}`
+}
+
+onLoad(async (options) => {
+  if (options.id) {
+    try {
+      const res = await getCanBookExamInfoAPI(options.id)
+      examDetail.value = res.data || {}
+      joined.value = !!res.data?.isJoined
+    } catch (e) {
+      uni.showToast({ title: '获取考试详情失败', icon: 'none' })
+    }
+  }
+})
+</script>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 22a5bbf..8b54773 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -120,6 +120,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { getCanBookExamListAPI } from '@/service/exam'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 
 defineOptions({
   name: 'Home',
@@ -166,18 +167,8 @@ const formatExamLocation = (
 
 // 报名考试
 const handleRegisterExam = (exam: any) => {
-  uni.showModal({
-    title: '确认报名',
-    content: `确定要报名参加"${exam.examName}"吗？`,
-    success: (res) => {
-      if (res.confirm) {
-        // TODO: 调用报名接口
-        uni.showToast({
-          title: '报名成功',
-          icon: 'success',
-        })
-      }
-    },
+  uni.navigateTo({
+    url: `/pages/exam/detail?id=${exam.id}`,
   })
 }
 
@@ -246,8 +237,10 @@ onLoad(() => {
   } catch (e) {
     userName.value = ''
   }
+  // getExamList() // 可选，onShow会自动刷新
+})
 
-  // 获取考试列表
+onShow(() => {
   getExamList()
 })
 
diff --git a/src/service/exam/index.ts b/src/service/exam/index.ts
index 5660744..43fc5d7 100644
--- a/src/service/exam/index.ts
+++ b/src/service/exam/index.ts
@@ -13,8 +13,18 @@ export interface ExamItem {
   address: string
   locationName: string
   estimatedAttendees: string
+  examinersName?: string
+  supervisorsName?: string
 }
 
 /** 获取可报名考试列表 */
 export const getCanBookExamListAPI = () =>
   request.get<BaseResponse<ExamItem[]>>('/exam/getCanBookExamList')
+
+/** 获取考试详情 */
+export const getCanBookExamInfoAPI = (id: string) =>
+  request.get<BaseResponse<ExamItem>>('/exam/getCanBookExamInfo', { params: { id } })
+
+/** 报名接口 */
+export const joinExamInfoAPI = (id: string) =>
+  request.get<BaseResponse<any>>('/exam/joinExamInfo', { params: { id } })
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index d5ca1d9..cda82d1 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -5,6 +5,7 @@
 
 interface NavigateToOptions {
   url: "/pages/index/index" |
+       "/pages/exam/detail" |
        "/pages/activity/detail" |
        "/pages/activity/index" |
        "/pages/agreement/privacy" |