diff --git a/src/components/BasicPicker/TimePicker/DatetimePicker.vue b/src/components/BasicPicker/TimePicker/DatetimePicker.vue
index 946ee9b..571dcc5 100644
--- a/src/components/BasicPicker/TimePicker/DatetimePicker.vue
+++ b/src/components/BasicPicker/TimePicker/DatetimePicker.vue
@@ -16,7 +16,7 @@
           </picker-view-column>
         </picker-view>
       </view>
-      <view class="button" style="width: 90%;margin: 5px auto;" @click="confirm">确定</view>
+      <view class="confirm-button" @click="confirm">确定</view>
     </view>
   </uni-popup>
 </template>
@@ -487,10 +487,27 @@ export default {
 
 .center {
   padding-bottom: var(--window-bottom);
-
 }
 
 .picker-view {
   height: 400rpx;
 }
+
+.confirm-button {
+  width: 90%;
+  margin: 10px auto;
+  padding: 12px 0;
+  background-color: #007bff;
+  color: #fff;
+  text-align: center;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  
+  &:active {
+    background-color: #0056b3;
+  }
+}
 </style>
diff --git a/src/pages/base/qj/components/xsQjList.vue b/src/pages/base/qj/components/xsQjList.vue
index 963d29e..1d0d582 100644
--- a/src/pages/base/qj/components/xsQjList.vue
+++ b/src/pages/base/qj/components/xsQjList.vue
@@ -53,8 +53,16 @@ const [register, { reload }] = useLayout({
 
 // 查看详情或新增处理函数
 const goToDetail = (item: any | null) => {
-  setData(item);
-  let url = '/pages/base/qj/detail';
+  if (!item || !item.id) {
+    uni.showToast({ 
+      title: '请假ID不存在', 
+      icon: 'none' 
+    });
+    return;
+  }
+  
+  // 跳转时传递请假ID
+  let url = `/pages/base/qj/detail?id=${item.id}`;
   uni.navigateTo({ url });
 };
 </script>
diff --git a/src/pages/base/qj/detail.vue b/src/pages/base/qj/detail.vue
index b25531d..9b8164e 100644
--- a/src/pages/base/qj/detail.vue
+++ b/src/pages/base/qj/detail.vue
@@ -8,6 +8,14 @@
         </view>
         <view class="divider"></view>
         <view class="card-body">
+          <view class="info-row">
+            <text class="label">学生姓名:</text>
+            <text class="value">{{ qjData.xsxm }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">所在班级:</text>
+            <text class="value">{{ qjData.bc }}</text>
+          </view>
           <view class="info-row">
             <text class="label">请假类型:</text>
             <text class="value">{{ qjData.qjlx }}</text>
@@ -54,40 +62,105 @@
 </template>
 
 <script setup lang="ts">
+import { onLoad } from "@dcloudio/uni-app";
 import { navigateBack } from "@/utils/uniapp";
-import { useDataStore } from "@/store/modules/data";
 import { getXsQjDetailApi } from "@/api/base/xsQjApi";
+import { xxtsFindByIdApi } from "@/api/base/xxtsApi";
 import LcglSp from "@/components/LcglSp/index.vue";
 
-const { getData } = useDataStore();
-
-// 从URL参数获取请假ID
-const pages = getCurrentPages();
-const qjId = getData.id || '';
+// 请假ID（yfzc_xs_qj 表的 id）
+const qjId = ref<string>('');
 
 // 请假基础数据
 const qjData = ref<any>({});
 
 // 获取请假详情
-const loadQjDetail = async () => {
-  if (!qjId) {
+const loadQjDetail = async (xsQjId: string) => {
+  if (!xsQjId) {
     console.error('请假ID不能为空');
     return;
   }
   
   try {
-    const res = await getXsQjDetailApi(qjId);
+    uni.showLoading({ title: '加载中...' });
+    const res = await getXsQjDetailApi(xsQjId);
     if (res.resultCode === 1 && res.result) {
       qjData.value = res.result;
+      qjId.value = xsQjId;
+    } else {
+      uni.showToast({ 
+        title: res.message || '获取请假详情失败', 
+        icon: 'none' 
+      });
     }
   } catch (error) {
     console.error('获取请假详情失败:', error);
+    uni.showToast({ 
+      title: '获取请假详情失败', 
+      icon: 'none' 
+    });
+  } finally {
+    uni.hideLoading();
   }
 };
 
 // 页面加载时获取数据
-onMounted(() => {
-  loadQjDetail();
+onLoad(async (options: any) => {
+  console.log('detail.vue onLoad 接收到的参数:', options);
+  
+  try {
+    // 检查是否有 id 参数
+    if (!options || !options.id) {
+      uni.showToast({ 
+        title: '缺少参数', 
+        icon: 'none' 
+      });
+      setTimeout(() => {
+        uni.navigateBack();
+      }, 1500);
+      return;
+    }
+    
+    uni.showLoading({ title: '加载中...' });
+    
+    // 场景判断：
+    // 1. 从待办消息点击过来（from=db）：id 是 yfzc_xxts 表的 id，需要先查待办信息获取 xxzbId
+    // 2. 从请假记录列表点击过来：id 直接就是 yfzc_xs_qj 表的 id
+    if (options.from === 'db') {
+      console.log('从待办消息过来，需要先查询待办信息');
+      
+      // 先通过待办 id 查询待办信息，获取主表 id（xxzbId）
+      const xxtsRes = await xxtsFindByIdApi({ id: options.id });
+      
+      if (xxtsRes && xxtsRes.result && xxtsRes.result.xxzbId) {
+        const xxzbId = xxtsRes.result.xxzbId;
+        console.log('从待办信息获取到请假ID:', xxzbId);
+        
+        uni.hideLoading();
+        
+        // 使用主表 id 查询请假详情
+        await loadQjDetail(xxzbId);
+      } else {
+        throw new Error('获取待办信息失败或缺少主表ID');
+      }
+    } else {
+      console.log('从请假记录列表过来，直接查询请假详情');
+      
+      // 直接使用 id 查询请假详情
+      uni.hideLoading();
+      await loadQjDetail(options.id);
+    }
+  } catch (error: any) {
+    console.error('加载请假详情失败:', error);
+    uni.hideLoading();
+    uni.showToast({ 
+      title: error.message || '加载失败', 
+      icon: 'none' 
+    });
+    setTimeout(() => {
+      uni.navigateBack();
+    }, 1500);
+  }
 });
 </script>
 
@@ -132,7 +205,7 @@ onMounted(() => {
       .label {
         font-size: 14px;
         color: #bbb;
-        width: 70px;
+        width: 80px;
         flex-shrink: 0;
         margin-right: 8px;
       }