diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 538e05b..ed8d4c3 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -99,20 +99,22 @@
             </div>
           </div>
 
-          <!-- 右侧课程列表区域 -->
+          <!-- 右侧内容区域 -->
           <div class="group_5 flex-col">
-            <!-- 课程筛选标签 -->
-            <div class="text-wrapper_1 flex-row">
-              <span class="text_12" :class="{ active: activeCourseTab === 'all' }" @click="handleCourseTabChange('all')">全部课程</span>
-              <span class="text_13" :class="{ active: activeCourseTab === 'learning' }" @click="handleCourseTabChange('learning')">学习中</span>
-              <span class="text_14" :class="{ active: activeCourseTab === 'completed' }" @click="handleCourseTabChange('completed')">已完结</span>
-            </div>
+            <!-- 课程内容 -->
+            <div v-if="isCoursesTab">
+              <!-- 课程筛选标签 -->
+              <div class="text-wrapper_1 flex-row">
+                <span class="text_12" :class="{ active: activeCourseTab === 'all' }" @click="handleCourseTabChange('all')">全部课程</span>
+                <span class="text_13" :class="{ active: activeCourseTab === 'learning' }" @click="handleCourseTabChange('learning')">学习中</span>
+                <span class="text_14" :class="{ active: activeCourseTab === 'completed' }" @click="handleCourseTabChange('completed')">已完结</span>
+              </div>
 
-            <!-- 分割线 -->
-            <div class="course-divider"></div>
+              <!-- 分割线 -->
+              <div class="course-divider"></div>
 
-            <!-- 课程列表 -->
-            <div class="course-list">
+              <!-- 课程列表 -->
+              <div class="course-list">
               <!-- 学习中的课程 -->
               <div v-for="course in filteredCourses" :key="course.id" class="box_2 flex-row justify-between">
                 <div class="block_4 flex-col">
@@ -209,17 +211,189 @@
                   尾页
                 </span>
               </div>
+              </div>
+            </div>
+
+            <!-- 作业内容 -->
+            <div v-else-if="isHomeworkTab" class="homework-content">
+              <!-- 作业筛选标签 -->
+              <div class="text-wrapper_1 flex-row">
+                <span class="text_12" :class="{ active: activeHomeworkTab === 'all' }" @click="handleHomeworkTabChange('all')">全部作业</span>
+                <span class="text_13" :class="{ active: activeHomeworkTab === 'pending' }" @click="handleHomeworkTabChange('pending')">未完成</span>
+                <span class="text_14" :class="{ active: activeHomeworkTab === 'completed' }" @click="handleHomeworkTabChange('completed')">已完成</span>
+              </div>
+
+              <!-- 分割线 -->
+              <div class="course-divider"></div>
+
+              <!-- 作业详情视图 -->
+            <div v-if="showDetailView && detailAssignment">
+              <div class="detail-header">
+                <button @click="backToAssignmentList" class="back-button">← 返回作业列表</button>
+              </div>
+              
+              <div class="group_11">
+                <!-- 头部信息 -->
+                <div class="box_5">
+                  <div class="image-text_2">
+                    <img :src="detailAssignment.teacherAvatar" alt="教师头像" class="image_22" />
+                    <div class="text-group_3">
+                      <span class="text_30">{{ detailAssignment.teacherName }}</span>
+                      <span class="text_31">{{ detailAssignment.assignTime }}</span>
+                    </div>
+                  </div>
+                  <span class="text_32" :style="{ color: detailAssignment.status === '未完成' || detailAssignment.status === '待提交' ? '#FF560C' : '#999999' }">{{ detailAssignment.status }}</span>
+                </div>
+
+                <!-- 作业内容 -->
+                <div class="text-group_4">
+                  <span class="text_33">{{ detailAssignment.title }}</span>
+                  <div class="description-container">
+                    <span class="text_34 description-full-view">
+                      {{ detailAssignment.description }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- 作业附件区域 -->
+                <div class="box_6">
+                  <div class="attachment-images">
+                    <img v-for="(attachment, index) in detailAssignment.attachments.slice(0, 5)" :key="index"
+                         src="/images/traings/traing1.png"
+                         :class="['image_' + (24 + index)]" />
+                  </div>
+                </div>
+
+                <!-- 作业按钮区域 -->
+                <div class="assignment-buttons">
+                  <template v-if="detailAssignment.status === '未完成' || detailAssignment.status === '待提交'">
+                    <div class="text-wrapper_8 submit-button" @click="showUploadFromDetail">
+                      <span class="text_36">上传作业</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+
+            <!-- 作业列表 -->
+            <div v-else>
+              <div v-for="assignment in filteredAssignments" :key="assignment.id" class="group_11">
+                <!-- 作业头部信息 -->
+                <div class="box_5">
+                  <div class="image-text_2">
+                    <img src="/images/traings/traing1.png" class="image_22" />
+                    <div class="text-group_3">
+                      <span class="text_30">{{ assignment.teacherName }}</span>
+                      <span class="text_31">{{ assignment.assignTime }}</span>
+                    </div>
+                  </div>
+                  <span class="text_32" :style="{ color: assignment.status === '未完成' || assignment.status === '待提交' ? '#FF560C' : '#999999' }">{{ assignment.status }}</span>
+                </div>
+
+                <!-- 作业内容 -->
+                <div class="text-group_4">
+                  <span class="text_33">{{ assignment.title }}</span>
+                  <div class="description-container">
+                    <span class="text_34 text-truncated">
+                      {{ assignment.description }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- 作业附件区域 -->
+                <div class="box_6">
+                 
+
+                  <!-- 附件图片列表 -->
+                  <div class="attachment-images">
+                    <img v-for="(attachment, index) in assignment.attachments.slice(0, 5)" :key="index"
+                         src="/images/traings/traing1.png"
+                         :class="['image_' + (24 + index)]" />
+                  </div>
+                </div>
+
+                <!-- 作业按钮区域 -->
+                <div class="assignment-buttons">
+                  <!-- 未完成状态显示两个按钮 -->
+                  <template v-if="assignment.status === '未完成' || assignment.status === '待提交'">
+                    <div class="text-wrapper_8 submit-button" @click="showUploadModal(assignment)">
+                      <span class="text_36">上传作业</span>
+                    </div>
+                    <div class="text-wrapper_8 view-button" @click="viewAssignmentDetail(assignment)">
+                      <span class="text_36 text-view">查看情况</span>
+                    </div>
+                  </template>
+                  <!-- 已完成状态只显示一个按钮 -->
+                  <template v-else>
+                    <div class="text-wrapper_8 details-button" @click="viewAssignmentDetail(assignment)">
+                      <span class="text_36 text-view">查看详情</span>
+                    </div>
+                  </template>
+                </div>
+
+
+              </div>
+            </div>
+            </div>
+
+            <!-- 其他内容的占位符 -->
+            <div v-else class="other-content">
+              <h2>{{ getTabTitle(activeTab) }}</h2>
+              <p>{{ activeTab }}功能开发中...</p>
             </div>
           </div>
         </div>
       </div>
 
+  <!-- 上传作业弹窗 -->
+  <n-modal v-model:show="showModal" preset="card" title="上传作业" style="width: 600px;" :mask-closable="false">
+    <template v-if="currentAssignment">
+      <div class="assignment-info">
+        <h3>{{ currentAssignment.title }}</h3>
+        <p>{{ currentAssignment.description }}</p>
+      </div>
+      <n-form>
+        <n-form-item label="标题名称" required>
+          <n-input v-model:value="uploadForm.title" placeholder="请输入标题" />
+        </n-form-item>
+        <n-form-item label="编辑内容" required>
+          <n-input
+            v-model:value="uploadForm.content"
+            type="textarea"
+            placeholder="请输入内容"
+            :autosize="{ minRows: 3, maxRows: 6 }"
+          />
+        </n-form-item>
+        <n-form-item label="上传文件" required>
+          <n-upload
+            multiple
+            directory-dnd
+            :custom-request="customRequest"
+            :default-upload="false"
+          >
+            <n-button>选择文件</n-button>
+          </n-upload>
+          <div class="file-list" v-if="uploadForm.files.length > 0">
+            <div v-for="(file, index) in uploadForm.files" :key="index" class="file-item">
+              <span>{{ file.name }}</span>
+              <span>{{ (file.size / 1024).toFixed(2) }} KB</span>
+            </div>
+          </div>
+        </n-form-item>
+      </n-form>
+      <div class="modal-footer">
+        <n-button @click="closeUploadModal">取消</n-button>
+        <n-button type="primary" @click="submitAssignment" style="margin-left: 12px;">确认</n-button>
+      </div>
+    </template>
+  </n-modal>
+
 
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useMessage } from 'naive-ui'
+import { ref, computed, onMounted, reactive } from 'vue'
+import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui'
 import { useUserStore } from '@/stores/user'
 
 // 定义课程接口
@@ -238,12 +412,34 @@ interface Course {
   progress?: number
 }
 
+// 定义作业接口
+interface Assignment {
+  id: number
+  teacherName: string
+  teacherAvatar: string
+  assignTime: string
+  status: string
+  title: string
+  description: string
+  attachments: Array<{
+    icon: string
+    name: string
+  }>
+  mainImage: string
+}
+
 const message = useMessage()
 const userStore = useUserStore()
 
-const activeTab = ref('courses')
+// 定义标签页类型
+type TabType = 'courses' | 'homework' | 'exam' | 'practice' | 'activity' | 'message' | 'materials' | 'download'
+
+const activeTab = ref<TabType>('courses')
 const activeCourseTab = ref('all')
 
+// 作业筛选状态
+const activeHomeworkTab = ref('all')
+
 // 分页相关状态
 const currentPage = ref(1)
 const pageSize = ref(5) // 每页显示5个课程
@@ -364,6 +560,73 @@ const mockCourses: Course[] = [
   }
 ]
 
+// 模拟作业数据（基于蓝湖UI设计）
+const mockAssignments: Assignment[] = [
+  {
+    id: 1,
+    teacherName: '张老师',
+    teacherAvatar: '/images/traings/traing1.png',
+    assignTime: '2024-01-15',
+    status: '待提交',
+    title: '教育心理学课程设计作业',
+    description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
+    attachments: [
+      { icon: '/images/traings/traing1.png', name: '作业要求.pdf' },
+      { icon: '/images/traings/traing1.png', name: '参考资料.docx' },
+      { icon: '/images/traings/traing1.png', name: '模板文件.pptx' },
+      { icon: '/images/traings/traing1.png', name: '评分标准.pdf' },
+      { icon: '/images/traings/traing1.png', name: '案例分析.xlsx' }
+    ],
+    mainImage: '/images/traings/traing1.png'
+  },
+  {
+    id: 2,
+    teacherName: '李老师',
+    teacherAvatar: '/images/traings/traing1.png',
+    assignTime: '2024-01-20',
+    status: '已提交',
+    title: '现代教育技术应用实践报告',
+    description: '结合本学期所学的现代教育技术知识，选择一个具体的教学场景，设计并实施一个融合信息技术的教学活动，撰写实践报告。',
+    attachments: [
+      { icon: '/images/traings/traing1.png', name: '实践指导.pdf' },
+      { icon: '/images/traings/traing1.png', name: '报告模板.docx' },
+      { icon: '/images/traings/traing1.png', name: '技术工具清单.xlsx' },
+      { icon: '/images/traings/traing1.png', name: '评价量表.pdf' },
+      { icon: '/images/traings/traing1.png', name: '优秀案例.pptx' }
+    ],
+    mainImage: '/images/traings/traing1.png'
+  },
+  {
+    id: 3,
+    teacherName: '王老师',
+    teacherAvatar: '/images/traings/traing1.png',
+    assignTime: '2024-01-18',
+    status: '未完成',
+    title: '数字化教学资源开发',
+    description: '开发一套完整的数字化教学资源，包括课件制作、视频录制、在线测试设计等，要求体现现代教育技术的应用特点。',
+    attachments: [
+      { icon: '/images/traings/traing1.png', name: '开发指南.pdf' },
+      { icon: '/images/traings/traing1.png', name: '技术要求.docx' },
+      { icon: '/images/traings/traing1.png', name: '示例资源.zip' }
+    ],
+    mainImage: '/images/traings/traing1.png'
+  },
+  {
+    id: 4,
+    teacherName: '刘老师',
+    teacherAvatar: '/images/traings/traing1.png',
+    assignTime: '2024-01-10',
+    status: '已完成',
+    title: '在线教育平台使用报告',
+    description: '体验并分析主流在线教育平台的功能特点，撰写详细的使用报告和改进建议。',
+    attachments: [
+      { icon: '/images/traings/traing1.png', name: '平台列表.pdf' },
+      { icon: '/images/traings/traing1.png', name: '评价标准.docx' }
+    ],
+    mainImage: '/images/traings/traing1.png'
+  }
+]
+
 // 获取筛选后的所有课程
 const allFilteredCourses = computed(() => {
   if (activeCourseTab.value === 'learning') {
@@ -386,10 +649,25 @@ const filteredCourses = computed(() => {
   return allFilteredCourses.value.slice(start, end)
 })
 
+// 获取筛选后的作业
+const filteredAssignments = computed(() => {
+  if (activeHomeworkTab.value === 'pending') {
+    return mockAssignments.filter(assignment => assignment.status === '待提交' || assignment.status === '未完成')
+  } else if (activeHomeworkTab.value === 'completed') {
+    return mockAssignments.filter(assignment => assignment.status === '已完成' || assignment.status === '已提交')
+  }
+  return mockAssignments
+})
+
+// 计算属性用于模板中的条件判断
+const isCoursesTab = computed(() => activeTab.value === 'courses')
+const isHomeworkTab = computed(() => activeTab.value === 'homework')
+const isOtherTab = computed(() => !isCoursesTab.value && !isHomeworkTab.value)
+
 // 处理菜单选择
-const handleMenuSelect = (key: string) => {
+const handleMenuSelect = (key: TabType) => {
   activeTab.value = key
-  message.info(`切换到${key}页面`)
+  message.info(`切换到${getTabTitle(key)}`)
 }
 
 // 获取状态文本
@@ -447,6 +725,105 @@ const handleCourseTabChange = (tab: string) => {
   currentPage.value = 1
 }
 
+// 处理作业筛选变化
+const handleHomeworkTabChange = (tab: string) => {
+  activeHomeworkTab.value = tab
+}
+
+// 获取标签标题
+const getTabTitle = (tab: TabType) => {
+  const titles: Record<TabType, string> = {
+    courses: '我的课程',
+    homework: '我的作业',
+    exam: '我的考试',
+    practice: '我的练习',
+    activity: '我的活动',
+    message: '我的消息',
+    materials: '我的资料',
+    download: '我的下载'
+  }
+  return titles[tab] || '未知页面'
+}
+
+// 上传作业弹窗状态
+const showModal = ref(false)
+const currentAssignment = ref<Assignment | null>(null)
+const uploadForm = reactive({
+  title: '',
+  content: '',
+  files: []
+})
+
+// 作业描述展开状态管理
+const expandedAssignments = ref<Record<number, boolean>>({})
+
+// 作业详情视图状态
+const showDetailView = ref(false)
+const detailAssignment = ref<Assignment | null>(null)
+
+// 查看作业详情
+const viewAssignmentDetail = (assignment: Assignment) => {
+  detailAssignment.value = assignment
+  showDetailView.value = true
+}
+
+// 返回作业列表
+const backToAssignmentList = () => {
+  showDetailView.value = false
+  detailAssignment.value = null
+}
+
+// 从详情页面跳转到上传作业
+const showUploadFromDetail = () => {
+  showUploadModal(detailAssignment.value!)
+}
+
+// 显示上传作业弹窗
+const showUploadModal = (assignment: Assignment) => {
+  currentAssignment.value = assignment
+  uploadForm.title = ''
+  uploadForm.content = ''
+  uploadForm.files = []
+  showModal.value = true
+}
+
+// 关闭上传作业弹窗
+const closeUploadModal = () => {
+  showModal.value = false
+  currentAssignment.value = null
+}
+
+// 提交作业
+const submitAssignment = () => {
+  if (!uploadForm.title.trim()) {
+    message.error('请输入标题')
+    return
+  }
+  
+  if (!uploadForm.content.trim()) {
+    message.error('请输入内容')
+    return
+  }
+  
+  if (uploadForm.files.length === 0) {
+    message.error('请上传至少一个文件')
+    return
+  }
+  
+  // 这里可以添加实际的提交逻辑
+  message.success('作业提交成功')
+  closeUploadModal()
+}
+
+// 自定义上传处理
+const customRequest = ({ file, onFinish, onError }: any) => {
+  // 模拟上传
+  setTimeout(() => {
+    uploadForm.files.push(file)
+    onFinish()
+  }, 1000)
+}
+
 onMounted(() => {
   // 初始化
 })
@@ -883,6 +1260,466 @@ onMounted(() => {
   min-width: 2.08vw; /* 40px转换为vw，页码按钮保持原宽度 */
 }
 
+/* 作业部分样式 - 严格按照蓝湖UI */
+.homework-content {
+  width: 100%;
+}
+
+/* 作业卡片主容器 */
+.group_11 {
+  position: relative;
+  width: 53.8vw; /* 1033px转换为vw */
+  min-height: 25vh; /* 设置最小高度 */
+  height: auto; /* 改为自适应高度 */
+  background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng75139e59843c2accc2ef713eac90adeeea2be065395a76d5e5e3d7365677e090') -0.05vw -0.05vh no-repeat;
+  background-size: 100% auto; /* 背景图宽度100%，高度自适应 */
+  background-color: #fff; /* 添加背景色，避免内容超出背景图范围时显示问题 */
+  margin: 1.04vh 0 3vh 1.51vw; /* 减少底部间距，避免卡片挤在一起 */
+  padding-bottom: 3vh; /* 增加内边距确保内容不会溢出 */
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e9ecef; /* 添加边框作为背景图的备选 */
+  border-radius: 8px; /* 添加圆角 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+}
+
+/* 头部信息容器 */
+.box_5 {
+  width: 51.46vw; /* 988px转换为vw */
+  height: 2.81vh; /* 54px转换为vh */
+  margin: 1.15vh 0 0 1.2vw; /* 22px 0 0 23px转换 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 教师信息 */
+.image-text_2 {
+  width: 8.07vw; /* 155px转换为vw */
+  height: 2.81vh; /* 54px转换为vh */
+  display: flex;
+  align-items: center;
+  margin-top: 1.3vh; /* 25px转换为vh (25/1920*100) */
+}
+
+/* 教师头像 */
+.image_22 {
+  width: 2.71vw; /* 52px转换为vw */
+  height: 2.71vw; /* 改为vw单位，保持正圆形 */
+  border-radius: 50%;
+  object-fit: cover;
+  margin-top: 2vh; /* 头像向下移动 */
+}
+
+/* 教师详细信息容器 */
+.text-group_3 {
+  width: 4.43vw; /* 85px转换为vw */
+  height: auto; /* 改为自适应高度 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /* 增加垂直间距 */
+  margin-left: 0.52vw; /* 10px转换为vw，头像和姓名之间的间距 */
+  margin-top: 1.6vh; /* 25px转换为vh (25/1920*100) */
+}
+
+/* 教师姓名 */
+.text_30 {
+  width: 2.81vw; /* 54px转换为vw */
+  height: 1.3vh; /* 25px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 0.94vw; /* 18px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.3vh; /* 恢复原来的行高 */
+  margin-top: 0.5vh; /* 调整姓名位置 */
+}
+
+/* 作业时间 */
+.text_31 {
+  width: 4.43vw; /* 85px转换为vw */
+  height: 1.04vh; /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.73vw; /* 14px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh; /* 20px转换为vh */
+  margin-top: 1.2vh; /* 调整时间与姓名的间距 */
+}
+
+/* 作业状态 */
+.text_32 {
+  width: 2.19vw; /* 42px转换为vw */
+  height: 1.04vh; /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.73vw; /* 14px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh; /* 20px转换为vh */
+  margin-top: 0.47vh; /* 9px转换为vh */
+}
+
+/* 作业内容区域 */
+.text-group_4 {
+  width: 48.02vw; /* 922px转换为vw */
+  height: auto; /* 改为自适应高度 */
+  margin: 5vh 0 0 4.84vw; /* 减少顶部margin，让内容更紧凑 */
+  flex-grow: 1; /* 允许内容区域伸展 */
+}
+
+/* 作业标题 */
+.text_33 {
+  width: 16.67vw; /* 320px转换为vw */
+  min-height: 1.46vh; /* 最小高度，允许内容增长 */
+  height: auto; /* 自适应高度 */
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 1.04vw; /* 20px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: normal; /* 允许文本换行 */
+  line-height: 1.8vh; /* 增加行高，提高可读性 */
+  margin-bottom: 1vh; /* 添加底部间距 */
+  display: block; /* 确保是块级元素 */
+}
+
+/* 作业描述容器 */
+.description-container {
+  width: 48.02vw; /* 922px转换为vw */
+  position: relative;
+}
+
+/* 作业描述 */
+.text_34 {
+  width: 100%;
+  min-height: 1.15vh; /* 最小高度 */
+  height: auto; /* 自适应高度 */
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 0.83vw; /* 16px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: normal; /* 允许文本换行 */
+  line-height: 1.8vh; /* 增加行高，提高可读性 */
+  display: block; /* 确保是块级元素 */
+  margin-top: 0; /* 移除顶部间距，因为已经在标题添加了底部间距 */
+  transition: all 0.3s ease; /* 添加过渡动画 */
+}
+
+/* 文本截断样式 */
+.text_34.text-truncated {
+  display: -webkit-box;
+  -webkit-line-clamp: 1; /* 限制显示1行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 展开/收起按钮 */
+.expand-toggle {
+  color: #1890ff;
+  cursor: pointer;
+  font-size: 0.73vw; /* 14px转换为vw */
+  margin-left: 0.5vw;
+  user-select: none;
+  transition: color 0.3s ease;
+}
+
+.expand-toggle:hover {
+  color: #40a9ff;
+  text-decoration: underline;
+}
+
+/* 作业详情弹窗样式 */
+.assignment-detail {
+  padding: 20px 0;
+}
+
+.detail-header {
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.detail-header h2 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.assignment-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.teacher-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.teacher-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.teacher-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.assignment-time {
+  color: #666;
+  font-size: 14px;
+}
+
+.assignment-status {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.assignment-status.未完成,
+.assignment-status.待提交 {
+  color: #ff4d4f;
+}
+
+.assignment-status.已完成,
+.assignment-status.已提交 {
+  color: #52c41a;
+}
+
+.detail-content h3 {
+  margin: 20px 0 10px 0;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.description-full {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.attachments-section {
+  margin-top: 20px;
+}
+
+.attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.attachment-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+}
+
+.attachment-name {
+  color: #333;
+  font-size: 14px;
+}
+
+/* 附件区域 */
+.box_6 {
+  width: 48.65vw; /* 934px转换为vw */
+  height: auto; /* 改为自适应高度 */
+  margin: 0.94vh 0 0 3.49vw; /* 18px 0 0 67px转换 */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 附件小图标 */
+.thumbnail_6 {
+  width: 0.57vw; /* 11px转换为vw */
+  height: 0.57vh; /* 11px转换为vh */
+  margin-top: 1.41vh; /* 27px转换为vh */
+}
+
+/* 附件大图标 */
+.image_23 {
+  width: 0.83vw; /* 16px转换为vw */
+  height: 2.03vh; /* 39px转换为vh */
+  margin: 6.51vh 0 0 0.94vw; /* 125px 0 0 18px转换 */
+}
+
+/* 附件数量文本 */
+.text_35 {
+  width: 4.27vw; /* 82px转换为vw */
+  height: 1.04vh; /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.73vw; /* 14px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh; /* 20px转换为vh */
+  margin: 7.76vh 0 0 0.31vw; /* 149px 0 0 6px转换 */
+  position: absolute;
+}
+
+/* 附件头部区域 */
+.attachment-header {
+  position: relative;
+  height: 3vh;
+  margin-bottom: 1vh;
+}
+
+/* 附件图片容器 */
+.attachment-images {
+  display: flex;
+  gap: 0.5vw;
+  align-items: center;
+  margin-top: 1vh;
+  margin-left: 2.5vh;
+}
+
+/* 附件图片样式 - 使用flex布局避免重叠 */
+.image_24, .image_25, .image_26, .image_27, .image_28 {
+  width: 4vw; /* 缩小图片尺寸 */
+  height: 4vw; /* 保持正方形 */
+  object-fit: cover;
+  border-radius: 0.3vw;
+  border: 0.05vw solid #e9ecef;
+}
+
+/* 作业按钮区域 */
+.assignment-buttons {
+  display: flex;
+  gap: 1vw;
+  margin: 2vh 0 2vh 4.95vw;
+}
+
+/* 提交按钮容器 */
+.text-wrapper_8 {
+  height: 1.72vh; /* 33px转换为vh */
+  width: 5.31vw; /* 102px转换为vw */
+  position: relative; /* 改为相对定位 */
+  cursor: pointer;
+  align-self: flex-start; /* 按钮靠左对齐 */
+  border-radius: 0.2vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 上传作业按钮 - 未完成状态 */
+.submit-button {
+ width: 102px;
+height: 33px;
+border: 1px solid #0288D1;
+}
+
+/* 查看情况按钮 - 未完成状态 */
+.view-button {
+   width: 102px;
+height: 33px;
+  background-color: #0288D1
+}
+
+/* 查看详情按钮 - 已完成状态 */
+.details-button {
+   width: 102px;
+height: 33px;
+  background-color: #0288D1
+}
+
+/* 提交按钮文字 */
+.text_36 {
+  width: auto; /* 自适应宽度 */
+  height: 1.04vh; /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: #0288D1;
+  font-size: 0.73vw; /* 14px转换为vw */
+  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 1.04vh; /* 20px转换为vh */
+  margin: 0; /* 移除边距，让按钮控制位置 */
+}
+.text-view {
+  color: #fff;
+}
+
+/* 主图样式 */
+.image_29 {
+  position: absolute;
+  left: 4.95vw; /* 95px转换为vw */
+  top: 12vh; /* 调整位置，避免与附件重叠 */
+  width: 6.98vw; /* 134px转换为vw */
+  height: 6.98vh; /* 134px转换为vh */
+  object-fit: cover;
+  border-radius: 0.3vw;
+  border: 0.05vw solid #e9ecef;
+}
+
+/* 蓝湖UI作业样式完成 */
+
+/* 简化的作业卡片样式 */
+.assignment-card-simple {
+  width: 100%;
+  margin-bottom: 2vh;
+}
+
+/* 其他内容样式 */
+.other-content {
+  width: 100%;
+  padding: 2.08vh 2.08vw; /* 40px转换 */
+  text-align: center;
+}
+
+.other-content h2 {
+  font-size: 1.25vw; /* 24px转换为vw */
+  color: rgba(51, 51, 51, 1);
+  margin-bottom: 1.04vh; /* 20px转换为vh */
+}
+
+.other-content p {
+  font-size: 0.83vw; /* 16px转换为vw */
+  color: rgba(153, 153, 153, 1);
+}
+
+/* 作业分隔线 */
+.assignment-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #E5E5E5;
+  margin: 0.89vh 0; /* 17px转换为vh */
+}
+
 /* 响应式设计 */
 @media (max-width: 1440px) {
   .profile-page {
@@ -1006,6 +1843,152 @@ onMounted(() => {
     min-width: 8vw; /* 手机端页码按钮宽度 */
   }
 
+  /* 作业部分响应式 */
+  .assignment-card {
+    width: 90vw;
+    height: auto;
+    min-height: 30vh;
+    margin: 2vh 5vw;
+    background-size: 100% 100%;
+  }
+
+  .assignment-header {
+    width: 85vw;
+    height: auto;
+    margin: 2vh 2.5vw;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1vh;
+  }
+
+  .teacher-info {
+    width: auto;
+    height: auto;
+    gap: 2vw;
+  }
+
+  .teacher-avatar {
+    width: 8vw;
+    height: 8vw;
+  }
+
+  .teacher-details {
+    width: auto;
+    height: auto;
+  }
+
+  .teacher-name {
+    font-size: 3vw;
+    width: auto;
+    height: auto;
+  }
+
+  .assignment-time {
+    font-size: 2.5vw;
+    width: auto;
+    height: auto;
+    margin-top: 0.5vh;
+  }
+
+  .assignment-status {
+    font-size: 2.5vw;
+    width: auto;
+    height: auto;
+    margin-top: 0;
+  }
+
+  .assignment-content {
+    width: 85vw;
+    height: auto;
+    margin: 2vh 2.5vw;
+  }
+
+  .assignment-title {
+    font-size: 3.5vw;
+    width: auto;
+    height: auto;
+    white-space: normal;
+    line-height: 1.4;
+  }
+
+  .assignment-description {
+    font-size: 2.8vw;
+    width: auto;
+    height: auto;
+    white-space: normal;
+    line-height: 1.4;
+    margin-top: 1vh;
+  }
+
+  .assignment-attachments {
+    width: 85vw;
+    height: auto;
+    margin: 2vh 2.5vw;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2vh;
+  }
+
+  .attachment-list {
+    flex-wrap: wrap;
+    gap: 2vw;
+  }
+
+  .attachment-item {
+    width: 15vw;
+    height: 15vw;
+  }
+
+  .attachment-count {
+    font-size: 2.5vw;
+    width: auto;
+    height: auto;
+    margin-left: 0;
+  }
+
+  .attachment-actions {
+    width: auto;
+    height: auto;
+    gap: 2vw;
+    margin-bottom: 0;
+  }
+
+  .action-btn {
+    width: 20vw;
+    height: 6vh;
+    border-radius: 1vw;
+  }
+
+  .download-btn span,
+  .submit-btn span {
+    font-size: 2.5vw;
+    width: auto;
+    height: auto;
+    margin: 0;
+  }
+
+  .assignment-main-image {
+    position: relative;
+    left: 2.5vw;
+    top: 0;
+    width: 20vw;
+    height: 20vw;
+    margin-top: 2vh;
+  }
+
+  .other-content {
+    padding: 4vh 4vw;
+  }
+
+  .other-content h2 {
+    font-size: 4vw;
+    margin-bottom: 2vh;
+  }
+
+  .other-content p {
+    font-size: 3vw;
+  }
+
   .group_7 {
     flex-direction: column;
     align-items: flex-start;
@@ -1063,4 +2046,80 @@ onMounted(() => {
     font-size: 0.63vw; /* 12px转换为vw */
   }
 }
+
+/* 上传作业弹窗样式 */
+.assignment-info {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.assignment-info h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 18px;
+  color: #333;
+}
+
+.assignment-info p {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.file-list {
+  margin-top: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.file-item:last-child {
+  border-bottom: none;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+/* 作业详情视图样式 */
+.detail-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.back-button {
+  background: none;
+  border: none;
+  color: #007bff;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 6px 12px;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.back-button:hover {
+  background-color: #f0f8ff;
+}
+
+.description-full-view {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  color: #666;
+  font-size: 14px;
+}
 </style>
\ No newline at end of file