diff --git a/src/app.config.ts b/src/app.config.ts
index 3066775..e8b63e4 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
   pages: [
-    // 'pages/questionInfo/index',
+    'pages/questionInfo/index',
     'pages/login/index',
     'pages/main/index',
     'pages/publishQuestion/index',
@@ -15,6 +15,7 @@ export default defineAppConfig({
     'pages/research/research',
     'pages/index/index',
     'pages/editUser/index',
+    'pages/publishQuestion/index',
   ],
   subpackages: [
     {
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 28514c4..985f2e1 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -3,77 +3,77 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-export {}
+export { }
 declare global {
-  const useAPICheck: typeof import('taro-hooks')['useAPICheck']
-  const useAccountInfo: typeof import('taro-hooks')['useAccountInfo']
-  const useActionSheet: typeof import('taro-hooks')['useActionSheet']
-  const useAlertBeforeUnload: typeof import('taro-hooks')['useAlertBeforeUnload']
-  const useApp: typeof import('taro-hooks')['useApp']
-  const useArrayBuffer: typeof import('taro-hooks')['useArrayBuffer']
-  const useAudio: typeof import('taro-hooks')['useAudio']
-  const useAuthorize: typeof import('taro-hooks')['useAuthorize']
-  const useBackground: typeof import('taro-hooks')['useBackground']
-  const useBattery: typeof import('taro-hooks')['useBattery']
-  const useBluetooth: typeof import('taro-hooks')['useBluetooth']
-  const useBoolean: typeof import('taro-hooks')['useBoolean']
-  const useBrightness: typeof import('taro-hooks')['useBrightness']
-  const useCamera: typeof import('taro-hooks')['useCamera']
-  const useChooseAddress: typeof import('taro-hooks')['useChooseAddress']
-  const useClipboardData: typeof import('taro-hooks')['useClipboardData']
-  const useCreation: typeof import('taro-hooks')['useCreation']
-  const useDebounce: typeof import('taro-hooks')['useDebounce']
-  const useDebounceFn: typeof import('taro-hooks')['useDebounceFn']
-  const useDeviceInfo: typeof import('taro-hooks')['useDeviceInfo']
-  const useEnterOptions: typeof import('taro-hooks')['useEnterOptions']
-  const useEnv: typeof import('taro-hooks')['useEnv']
-  const useEvent: typeof import('taro-hooks')['useEvent']
-  const useFile: typeof import('taro-hooks')['useFile']
-  const useFrom: typeof import('taro-hooks')['useFrom']
-  const useImage: typeof import('taro-hooks')['useImage']
-  const useInvoice: typeof import('taro-hooks')['useInvoice']
-  const useKeyboard: typeof import('taro-hooks')['useKeyboard']
-  const useLatest: typeof import('taro-hooks')['useLatest']
-  const useLaunchOptions: typeof import('taro-hooks')['useLaunchOptions']
-  const useLoading: typeof import('taro-hooks')['useLoading']
-  const useLocation: typeof import('taro-hooks')['useLocation']
-  const useLogin: typeof import('taro-hooks')['useLogin']
-  const useManualPullDownRefresh: typeof import('taro-hooks')['useManualPullDownRefresh']
-  const useMap: typeof import('taro-hooks')['useMap']
-  const useMemoizedFn: typeof import('taro-hooks')['useMemoizedFn']
-  const useMenuButtonBoundingClientRect: typeof import('taro-hooks')['useMenuButtonBoundingClientRect']
-  const useModal: typeof import('taro-hooks')['useModal']
-  const useMotion: typeof import('taro-hooks')['useMotion']
-  const useMount: typeof import('taro-hooks')['useMount']
-  const useNavigationBar: typeof import('taro-hooks')['useNavigationBar']
-  const useNetworkType: typeof import('taro-hooks')['useNetworkType']
-  const useOnline: typeof import('taro-hooks')['useOnline']
-  const usePage: typeof import('taro-hooks')['usePage']
-  const usePreload: typeof import('taro-hooks')['usePreload']
-  const usePromise: typeof import('taro-hooks')['usePromise']
-  const useRecord: typeof import('taro-hooks')['useRecord']
-  const useRequest: typeof import('taro-hooks')['useRequest']
-  const useRequestSubscribeMessage: typeof import('taro-hooks')['useRequestSubscribeMessage']
-  const useRouter: typeof import('taro-hooks')['useRouter']
-  const useScanCode: typeof import('taro-hooks')['useScanCode']
-  const useSelectorQuery: typeof import('taro-hooks')['useSelectorQuery']
-  const useStorage: typeof import('taro-hooks')['useStorage']
-  const useSystemInfo: typeof import('taro-hooks')['useSystemInfo']
-  const useTabBar: typeof import('taro-hooks')['useTabBar']
-  const useThrottle: typeof import('taro-hooks')['useThrottle']
-  const useThrottleFn: typeof import('taro-hooks')['useThrottleFn']
-  const useToast: typeof import('taro-hooks')['useToast']
-  const useToggle: typeof import('taro-hooks')['useToggle']
-  const useTopBarText: typeof import('taro-hooks')['useTopBarText']
-  const useUnmount: typeof import('taro-hooks')['useUnmount']
-  const useUpdate: typeof import('taro-hooks')['useUpdate']
-  const useUpdateEffect: typeof import('taro-hooks')['useUpdateEffect']
-  const useUpdateManager: typeof import('taro-hooks')['useUpdateManager']
-  const useUserInfo: typeof import('taro-hooks')['useUserInfo']
-  const useVibrate: typeof import('taro-hooks')['useVibrate']
-  const useVideo: typeof import('taro-hooks')['useVideo']
-  const useVisible: typeof import('taro-hooks')['useVisible']
-  const useWeRun: typeof import('taro-hooks')['useWeRun']
-  const useWebp: typeof import('taro-hooks')['useWebp']
-  const useWindowInfo: typeof import('taro-hooks')['useWindowInfo']
+  const useAPICheck: (typeof import('taro-hooks'))['useAPICheck'];
+  const useAccountInfo: (typeof import('taro-hooks'))['useAccountInfo'];
+  const useActionSheet: (typeof import('taro-hooks'))['useActionSheet'];
+  const useAlertBeforeUnload: (typeof import('taro-hooks'))['useAlertBeforeUnload'];
+  const useApp: (typeof import('taro-hooks'))['useApp'];
+  const useArrayBuffer: (typeof import('taro-hooks'))['useArrayBuffer'];
+  const useAudio: (typeof import('taro-hooks'))['useAudio'];
+  const useAuthorize: (typeof import('taro-hooks'))['useAuthorize'];
+  const useBackground: (typeof import('taro-hooks'))['useBackground'];
+  const useBattery: (typeof import('taro-hooks'))['useBattery'];
+  const useBluetooth: (typeof import('taro-hooks'))['useBluetooth'];
+  const useBoolean: (typeof import('taro-hooks'))['useBoolean'];
+  const useBrightness: (typeof import('taro-hooks'))['useBrightness'];
+  const useCamera: (typeof import('taro-hooks'))['useCamera'];
+  const useChooseAddress: (typeof import('taro-hooks'))['useChooseAddress'];
+  const useClipboardData: (typeof import('taro-hooks'))['useClipboardData'];
+  const useCreation: (typeof import('taro-hooks'))['useCreation'];
+  const useDebounce: (typeof import('taro-hooks'))['useDebounce'];
+  const useDebounceFn: (typeof import('taro-hooks'))['useDebounceFn'];
+  const useDeviceInfo: (typeof import('taro-hooks'))['useDeviceInfo'];
+  const useEnterOptions: (typeof import('taro-hooks'))['useEnterOptions'];
+  const useEnv: (typeof import('taro-hooks'))['useEnv'];
+  const useEvent: (typeof import('taro-hooks'))['useEvent'];
+  const useFile: (typeof import('taro-hooks'))['useFile'];
+  const useFrom: (typeof import('taro-hooks'))['useFrom'];
+  const useImage: (typeof import('taro-hooks'))['useImage'];
+  const useInvoice: (typeof import('taro-hooks'))['useInvoice'];
+  const useKeyboard: (typeof import('taro-hooks'))['useKeyboard'];
+  const useLatest: (typeof import('taro-hooks'))['useLatest'];
+  const useLaunchOptions: (typeof import('taro-hooks'))['useLaunchOptions'];
+  const useLoading: (typeof import('taro-hooks'))['useLoading'];
+  const useLocation: (typeof import('taro-hooks'))['useLocation'];
+  const useLogin: (typeof import('taro-hooks'))['useLogin'];
+  const useManualPullDownRefresh: (typeof import('taro-hooks'))['useManualPullDownRefresh'];
+  const useMap: (typeof import('taro-hooks'))['useMap'];
+  const useMemoizedFn: (typeof import('taro-hooks'))['useMemoizedFn'];
+  const useMenuButtonBoundingClientRect: (typeof import('taro-hooks'))['useMenuButtonBoundingClientRect'];
+  const useModal: (typeof import('taro-hooks'))['useModal'];
+  const useMotion: (typeof import('taro-hooks'))['useMotion'];
+  const useMount: (typeof import('taro-hooks'))['useMount'];
+  const useNavigationBar: (typeof import('taro-hooks'))['useNavigationBar'];
+  const useNetworkType: (typeof import('taro-hooks'))['useNetworkType'];
+  const useOnline: (typeof import('taro-hooks'))['useOnline'];
+  const usePage: (typeof import('taro-hooks'))['usePage'];
+  const usePreload: (typeof import('taro-hooks'))['usePreload'];
+  const usePromise: (typeof import('taro-hooks'))['usePromise'];
+  const useRecord: (typeof import('taro-hooks'))['useRecord'];
+  const useRequest: (typeof import('taro-hooks'))['useRequest'];
+  const useRequestSubscribeMessage: (typeof import('taro-hooks'))['useRequestSubscribeMessage'];
+  const useRouter: (typeof import('taro-hooks'))['useRouter'];
+  const useScanCode: (typeof import('taro-hooks'))['useScanCode'];
+  const useSelectorQuery: (typeof import('taro-hooks'))['useSelectorQuery'];
+  const useStorage: (typeof import('taro-hooks'))['useStorage'];
+  const useSystemInfo: (typeof import('taro-hooks'))['useSystemInfo'];
+  const useTabBar: (typeof import('taro-hooks'))['useTabBar'];
+  const useThrottle: (typeof import('taro-hooks'))['useThrottle'];
+  const useThrottleFn: (typeof import('taro-hooks'))['useThrottleFn'];
+  const useToast: (typeof import('taro-hooks'))['useToast'];
+  const useToggle: (typeof import('taro-hooks'))['useToggle'];
+  const useTopBarText: (typeof import('taro-hooks'))['useTopBarText'];
+  const useUnmount: (typeof import('taro-hooks'))['useUnmount'];
+  const useUpdate: (typeof import('taro-hooks'))['useUpdate'];
+  const useUpdateEffect: (typeof import('taro-hooks'))['useUpdateEffect'];
+  const useUpdateManager: (typeof import('taro-hooks'))['useUpdateManager'];
+  const useUserInfo: (typeof import('taro-hooks'))['useUserInfo'];
+  const useVibrate: (typeof import('taro-hooks'))['useVibrate'];
+  const useVideo: (typeof import('taro-hooks'))['useVideo'];
+  const useVisible: (typeof import('taro-hooks'))['useVisible'];
+  const useWeRun: (typeof import('taro-hooks'))['useWeRun'];
+  const useWebp: (typeof import('taro-hooks'))['useWebp'];
+  const useWindowInfo: (typeof import('taro-hooks'))['useWindowInfo'];
 }
diff --git a/src/common/components/CourseInfo/CourseInfo.tsx b/src/common/components/CourseInfo/CourseInfo.tsx
new file mode 100644
index 0000000..4645574
--- /dev/null
+++ b/src/common/components/CourseInfo/CourseInfo.tsx
@@ -0,0 +1,22 @@
+import { View } from '@tarojs/components';
+import React from 'react';
+import './index.scss';
+
+interface ICourseInfoProps {
+  name?: string;
+  school?: string;
+  teacher?: string;
+}
+
+const CourseInfo: React.FC<ICourseInfoProps> = ({ name, school, teacher }) => {
+  return (
+    <View>
+      <View className="theClassName">{name}</View>
+      <View className="teacherName">
+        {school} {teacher}
+      </View>
+    </View>
+  );
+};
+
+export default CourseInfo;
diff --git a/src/common/components/CourseInfo/index.scss b/src/common/components/CourseInfo/index.scss
new file mode 100644
index 0000000..03c4543
--- /dev/null
+++ b/src/common/components/CourseInfo/index.scss
@@ -0,0 +1,16 @@
+.theClassName {
+  font-size: 43rpx;
+  font-weight: bold;
+  color: #565552;
+  text-align: center;
+  margin-top: 22rpx;
+}
+
+.teacherName {
+  font-size: 33rpx;
+  font-weight: 400;
+  color: #9f9f9c;
+  text-align: center;
+  margin-top: 15rpx;
+  margin-bottom: 27rpx;
+}
diff --git a/src/common/components/PublishHeader/PublishHeader.tsx b/src/common/components/PublishHeader/PublishHeader.tsx
new file mode 100644
index 0000000..e22b361
--- /dev/null
+++ b/src/common/components/PublishHeader/PublishHeader.tsx
@@ -0,0 +1,23 @@
+import { Image, Text, View } from '@tarojs/components';
+import React from 'react';
+import './index.scss';
+
+interface IPublishHeaderProps {
+  avatarUrl: string;
+  nickName: string;
+  date: string;
+}
+
+const PublishHeader: React.FC<IPublishHeaderProps> = ({ avatarUrl, nickName, date }) => {
+  return (
+    <View className="publish-header">
+      <Image src={avatarUrl} className="avatar" />
+      <View className="nameDate">
+        <Text className="nickname">{nickName}</Text>
+        <View className="currentDate">{date}</View>
+      </View>
+    </View>
+  );
+};
+
+export default PublishHeader;
diff --git a/src/common/components/PublishHeader/index.scss b/src/common/components/PublishHeader/index.scss
new file mode 100644
index 0000000..69d1f5c
--- /dev/null
+++ b/src/common/components/PublishHeader/index.scss
@@ -0,0 +1,26 @@
+.avatar {
+  width: 90.58rpx;
+  height: 90.58rpx;
+  border-radius: 100%;
+  margin-right: 10px;
+  border: #d2d5d8 solid 5rpx;
+  margin-right: 27rpx;
+}
+
+.nickname {
+  font-weight: bold;
+  font-size: 22rpx;
+  color: #565552;
+}
+
+.currentDate {
+  font-weight: 400;
+  font-size: 14rpx;
+  color: #9f9f9c;
+  margin-top: 20rpx;
+}
+
+.publish-header {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/common/components/QuestionDetail/QuestionDetail.tsx b/src/common/components/QuestionDetail/QuestionDetail.tsx
new file mode 100644
index 0000000..c866511
--- /dev/null
+++ b/src/common/components/QuestionDetail/QuestionDetail.tsx
@@ -0,0 +1,161 @@
+import { Image, Text, View } from '@tarojs/components';
+import React, { useEffect, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+import askicon from '@/common/assets/img/publishQuestion/ask.png';
+import PublishHeader from '@/common/components/PublishHeader/PublishHeader';
+import { useCourseStore } from '@/pages/main/store/store';
+
+import IconFont from '../iconfont';
+import './index.scss';
+
+interface IUser {
+  avatar: string;
+  id: number;
+  nickname: string;
+}
+
+interface IQuestion {
+  id: number;
+  questioner_id: number;
+  biz: string;
+  biz_id: number;
+  content: string;
+  answer_cnt: number;
+  preview_answers: null | Array<{
+    id: number;
+    publisher_id: number;
+    question_id: number;
+    content: string;
+    utime: number;
+    ctime: number;
+  }>;
+  utime: number;
+  ctime: number;
+  user?: IUser;
+}
+
+interface IAnswer {
+  id: number;
+  publisher_id: number;
+  question_id: number;
+  content: string;
+  stance: number;
+  total_support_count: number;
+  total_oppose_count: number;
+  total_comment_count: number;
+  utime: number;
+  ctime: number;
+  user?: IUser;
+}
+
+interface IQuestionProps {
+  question: IQuestion;
+  answers: IAnswer[];
+}
+
+const formatTime = (timestamp: number) => {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hour = date.getHours().toString().padStart(2, '0');
+  const minute = date.getMinutes().toString().padStart(2, '0');
+  const second = date.getSeconds().toString().padStart(2, '0');
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+};
+
+const QuestionDetail: React.FC<IQuestionProps> = ({ question, answers }) => {
+  const dispatch = useCourseStore(({ getPublishers }) => ({ getPublishers }));
+
+  const [questionDetail, setQuestion] = useState<IQuestion>(question);
+  const [answersDetail, setAnswers] = useState<IAnswer[]>(answers);
+
+  useEffect(() => {
+    const fetchAllPublishers = async () => {
+      // 函数，用于获取每个答案的用户信息
+      async function getAnswersWithUserInfo(ianswers: IAnswer[]) {
+        const answersWithUserInfo = await Promise.all(
+          ianswers.map(async (answer) => {
+            const user = await dispatch.getPublishers(answer.publisher_id);
+            return { ...answer, user };
+          })
+        );
+        return answersWithUserInfo;
+      }
+
+      // 调用函数并处理结果
+      const answersWithUserInfo = await getAnswersWithUserInfo(answers);
+      setAnswers(answersWithUserInfo);
+
+      // 函数，用于获取问题的提问者用户信息
+      async function getQuestionWithUserInfo(iquestion: IQuestion) {
+        try {
+          const user = await dispatch.getPublishers(iquestion.questioner_id);
+          const questionWithUserInfo = { ...iquestion, user };
+          return questionWithUserInfo;
+        } catch (error) {
+          console.error('Error fetching question with user info:', error);
+          throw error; // 重新抛出错误，可以在调用此函数的地方进行处理
+        }
+      }
+
+      // 调用函数并处理结果
+      const questionWithUserInfo = await getQuestionWithUserInfo(question);
+      setQuestion(questionWithUserInfo);
+    };
+
+    void fetchAllPublishers();
+  });
+  return (
+    <View className="questionDetail">
+      <View className="question-detail">
+        <PublishHeader
+          avatarUrl={questionDetail?.user?.avatar ?? ''}
+          nickName={questionDetail?.user?.nickname ?? ''}
+          date={formatTime(questionDetail?.ctime)}
+        />
+        <View className="question-item">
+          {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            <Image src={askicon} className="askicon"></Image>
+          }
+          <View className="question-value">{question.content}</View>
+        </View>
+      </View>
+      <View className="answer-list">
+        {answersDetail.map((answer, index) => (
+          <View key={index} className="answer-item">
+            <PublishHeader
+              avatarUrl={answer?.user?.avatar ?? ''}
+              nickName={answer?.user?.nickname ?? ''}
+              date={formatTime(answer.ctime)}
+            />
+            <View className="question-item">
+              {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                <Image src={askicon} className="askicon"></Image>
+              }
+              <View className="answer-content">
+                本网站使用cookies以提升您的使用体验及统计网站流量相关数据。继续使用本网站表示您同意我们使用cookies。我们的《隐私及Cookie政策》提供更多关于cookies使用及停用的相关信息。
+              </View>
+            </View>
+            <View className="answer-statistics">
+              <View className="icon">
+                <IconFont name="comment" />
+                {/* <Navigator className="iconfont">&#xe769;</Navigator> */}
+              </View>
+              <Text className="text1">{answer.total_comment_count}</Text>
+              <View className="icon">
+                <IconFont name="like" />
+                {/* <Navigator className="iconfont">&#xe786;</Navigator> */}
+              </View>
+              <Text className="text1">{answer.total_support_count}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default QuestionDetail;
diff --git a/src/common/components/QuestionDetail/index.scss b/src/common/components/QuestionDetail/index.scss
new file mode 100644
index 0000000..9564c01
--- /dev/null
+++ b/src/common/components/QuestionDetail/index.scss
@@ -0,0 +1,73 @@
+.questionDetail {
+  background-color: #f9f9f2;
+  width: 659.42rpx;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 207rpx;
+}
+
+.question-detail {
+  width: 603.26rpx;
+  border-bottom: #e3e3e3 solid 2rpx;
+  padding-top: 40rpx;
+  padding-bottom: 35rpx;
+}
+
+.answer-item {
+  @extend .question-detail;
+}
+
+.askicon {
+  width: 44.44rpx;
+  height: 47.05rpx;
+  margin-left: 22rpx;
+  margin-right: 60rpx;
+}
+
+.question-item {
+  font-size: 21.74rpx;
+  color: #565552;
+  display: flex;
+  margin-top: 20rpx;
+}
+
+.question-value {
+  max-width: 471rpx;
+  margin-top: 5rpx;
+}
+
+.answer-content {
+  @extend .question-value;
+}
+
+.icon {
+  width: 40rpx;
+  height: 40rpx;
+  box-shadow: 0rpx 5rpx 11rpx 2rpx rgba(0, 0, 0, 0.16);
+  opacity: 1;
+  border-radius: 50%;
+  display: inline-block;
+  text-align: center;
+  line-height: 40rpx;
+  // margin-left: 15rpx;
+  Image {
+    width: 100%;
+    height: 100%;
+  }
+}
+.text1 {
+  font-size: 22rpx;
+  font-weight: bold;
+  color: #565552;
+  margin: 0 10rpx;
+}
+
+.answer-statistics {
+  display: flex;
+  align-items: center;
+  margin-left: 450rpx;
+}
diff --git a/src/pages/publishQuestion/index.scss b/src/pages/publishQuestion/index.scss
index 4803a1b..42356f6 100644
--- a/src/pages/publishQuestion/index.scss
+++ b/src/pages/publishQuestion/index.scss
@@ -24,33 +24,6 @@
   transform: translateX(-50%);
 }
 
-.avatar {
-  width: 90.58rpx;
-  height: 90.58rpx;
-  border-radius: 100%;
-  margin-right: 10px;
-  border: #d2d5d8 solid 5rpx;
-  margin-right: 27rpx;
-}
-
-.nickname {
-  font-weight: bold;
-  font-size: 22rpx;
-  color: #565552;
-}
-
-.currentDate {
-  font-weight: 400;
-  font-size: 14rpx;
-  color: #9f9f9c;
-  margin-top: 20rpx;
-}
-
-.publish-header {
-  display: flex;
-  align-items: center;
-}
-
 .askicon {
   width: 44.44rpx;
   height: 47.05rpx;
diff --git a/src/pages/publishQuestion/index.tsx b/src/pages/publishQuestion/index.tsx
index 3da1378..5bf141e 100644
--- a/src/pages/publishQuestion/index.tsx
+++ b/src/pages/publishQuestion/index.tsx
@@ -1,10 +1,12 @@
-import { Button, Image, Text, Textarea, View } from '@tarojs/components';
+import { Button, Image, Textarea, View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useEffect, useState } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 import askicon from '@/common/assets/img/publishQuestion/ask.png';
 import { Course } from '@/common/assets/types';
+import CourseInfo from '@/common/components/CourseInfo/CourseInfo';
+import PublishHeader from '@/common/components/PublishHeader/PublishHeader';
 import { get, post } from '@/common/utils/fetch';
 
 import './index.scss';
@@ -146,18 +148,13 @@ export default function Index() {
   };
   return (
     <View>
-      <View className="theClassnme">{course?.name}</View>
-      <View className="teacherName">
-        {course?.school} {course?.teacher}
-      </View>
+      <CourseInfo name={course?.name} school={course?.school} teacher={course?.teacher} />
       <View className="publishView">
-        <View className="publish-header">
-          <Image src={avatarUrl ?? ''} className="avatar" />
-          <View className="nameDate">
-            <Text className="nickname">{nickName}</Text>
-            <View className="currentDate">{getCurrentDate()}</View>
-          </View>
-        </View>
+        <PublishHeader
+          avatarUrl={avatarUrl}
+          nickName={nickName}
+          date={getCurrentDate()}
+        />
         {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           <Image src={askicon} className="askicon"></Image>
diff --git a/src/pages/questionInfo/index.tsx b/src/pages/questionInfo/index.tsx
index f1c99e8..df45128 100644
--- a/src/pages/questionInfo/index.tsx
+++ b/src/pages/questionInfo/index.tsx
@@ -1,9 +1,67 @@
-import { Navigator, View } from '@tarojs/components';
+import { Course } from '@/common/assets/types';
+import CourseInfo from '@/common/components/CourseInfo/CourseInfo';
+import QuestionDetail from '@/common/components/QuestionDetail/QuestionDetail'; // 假设你的组件文件名为QuestionDetail.tsx
+import { get } from '@/common/utils/fetch';
+import { View } from '@tarojs/components';
+import React, { useEffect, useState } from 'react';
+
+const Index: React.FC = () => {
+  const question = {
+    id: 5,
+    questioner_id: 5208,
+    biz: 'Course',
+    biz_id: 2347,
+    content: '这节课怎么样？',
+    answer_cnt: 0,
+    preview_answers: null,
+    utime: 1725039765090,
+    ctime: 1725039765090,
+  };
+
+  const answers = [
+    {
+      id: 5,
+      publisher_id: 5208,
+      question_id: 5,
+      content: '我觉得很不错',
+      stance: 0,
+      total_support_count: 0,
+      total_oppose_count: 0,
+      total_comment_count: 0,
+      utime: 1725039834700,
+      ctime: 1725039834700,
+    },
+  ];
+
+  const [course, setCourse] = useState<Course | null>(null);
+
+  const courseId = 2347; //先用概率统计A来调试吧
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    const getCourseData = async () => {
+      try {
+        void get(`/courses/${courseId}/detail`, true).then((res) => {
+          console.log(res);
+          // 检查 res 是否有 data 属性，并且断言其类型
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          setCourse(res?.data as Course);
+        });
+      } catch (error) {
+        // 错误处理，例如弹出提示
+        console.error('Failed to fetch course data:', error);
+      }
+    };
+
+    if (courseId) void getCourseData().then((r) => console.log(r));
+  }, [courseId]); // 在courseId变化时运行
 
-export default function Index() {
   return (
     <View>
-      <Navigator url="../research/research">我要跳转到搜索页面</Navigator>
+      <CourseInfo name={course?.name} school={course?.school} teacher={course?.teacher} />
+      <QuestionDetail question={question} answers={answers} />
     </View>
   );
-}
+};
+
+export default Index;