From 8e146666f7902efa2b66846d3d31ea69e8688c7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Mon, 1 Sep 2025 17:56:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix=EF=BC=9A=E9=85=8D=E5=90=88=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AF=E6=8E=A5=E5=8F=A3=E5=8F=98=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts           | 22 +++++++++++-----------
 src/api/modules/auth.ts    |  6 +++---
 src/api/modules/content.ts |  2 +-
 src/api/modules/course.ts  | 36 ++++++++++++++++++------------------
 src/api/modules/exam.ts    |  4 ++--
 src/views/AICompanion.vue  | 28 ++++++++++++++++++++++++----
 6 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 484d7a9..62eb5c1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -19,8 +19,8 @@ export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localho
 export const API_ENDPOINTS = {
   // 认证相关
   AUTH: {
-    LOGIN: '/biz/user/login',
-    USER_INFO: '/biz/user/info',
+    LOGIN: '/aiol/aiolUser/login',
+    USER_INFO: '/aiol/aiolUser/info',
     REGISTER: '/auth/register',
     LOGOUT: '/auth/logout',
     REFRESH: '/auth/refresh',
@@ -36,12 +36,12 @@ export const API_ENDPOINTS = {
   
   // 课程相关
   COURSES: {
-    LIST: '/biz/course/list',
+    LIST: '/aiol/aiolCourse/query_list',
     SEARCH: '/courses/search',
     POPULAR: '/courses/popular',
     LATEST: '/courses/latest',
     RECOMMENDED: '/courses/recommended',
-    DETAIL: '/biz/course/detail',
+    DETAIL: '/aiol/aiolCourse/detail',
     CHAPTERS: '/courses/:id/chapters',
     LESSONS: '/courses/:id/lessons',
     ENROLL: '/courses/:id/enroll',
@@ -54,18 +54,18 @@ export const API_ENDPOINTS = {
   
   // 分类相关
   CATEGORIES: {
-    LIST: '/biz/course/category/list',
+    LIST: '/aiol/aiolCourse/category/list',
     COURSES: '/categories/:id/courses',
   },
 
   // 专题相关
   SUBJECTS: {
-    LIST: '/biz/course/subject/list',
+    LIST: '/aiol/aiolCourse/subject/list',
   },
 
   // 难度相关
   DIFFICULTIES: {
-    LIST: '/biz/course/difficulty/list',
+    LIST: '/aiol/aiolCourse/difficulty/list',
   },
   
   // 章节课时相关
@@ -187,14 +187,14 @@ export const API_ENDPOINTS = {
   // 考试题库相关
   EXAM: {
     // 题库管理
-    REPO_CREATE: '/biz/repo/courseAdd',
-    REPO_LIST: '/biz/repo/repoList',
+    REPO_CREATE: '/aiol/repo/courseAdd',
+    REPO_LIST: '/aiol/repo/repoList',
     REPO_DELETE: '/gen/repo/repo/delete',
     REPO_EDIT: '/gen/repo/repo/edit',
     
     // 题目管理
-    QUESTION_LIST: '/biz/repo/questionList/:repoId',
-    QUESTION_DETAIL: '/biz/repo/repoList/:questionId',
+    QUESTION_LIST: '/aiol/repo/questionList/:repoId',
+    QUESTION_DETAIL: '/aiol/repo/repoList/:questionId',
     QUESTION_ADD: '/gen/question/question/add',
     QUESTION_EDIT: '/gen/question/question/edit',
     QUESTION_DELETE: '/gen/question/question/delete',
diff --git a/src/api/modules/auth.ts b/src/api/modules/auth.ts
index d2c0ad1..55a5015 100644
--- a/src/api/modules/auth.ts
+++ b/src/api/modules/auth.ts
@@ -25,10 +25,10 @@ export class AuthApi {
         password: data.password
       }
 
-      console.log('🚀 发送登录请求:', { url: '/biz/user/login', data: { ...loginData, password: '***' } })
+      console.log('🚀 发送登录请求:', { url: '/aiol/aiolUser/login', data: { ...loginData, password: '***' } })
 
       // 调用后端API
-      const response = await ApiRequest.post<any>('/biz/user/login', loginData)
+      const response = await ApiRequest.post<any>('/aiol/aiolUser/login', loginData)
 
       console.log('🔍 Login API Response:', response)
       console.log('🔍 Response Code:', response.code)
@@ -231,7 +231,7 @@ export class AuthApi {
 
   // 获取当前用户信息 - 使用后端实际接口
   static async getUserInfo(): Promise<UserInfoResponse> {
-    const response = await ApiRequest.get<any>('/biz/user/info')
+    const response = await ApiRequest.get<any>('/aiol/aiolUser/info')
 
     console.log('🔍 getUserInfo - 原始响应:', response)
 
diff --git a/src/api/modules/content.ts b/src/api/modules/content.ts
index d6ce017..1702e25 100644
--- a/src/api/modules/content.ts
+++ b/src/api/modules/content.ts
@@ -12,7 +12,7 @@ export class ContentApi {
   static async getContent(contentKey: string): Promise<any> {
     try {
       console.log(`🚀 调用内容API，contentKey: ${contentKey}`)
-      const response = await ApiRequest.get(`/biz/index/content/${contentKey}`)
+      const response = await ApiRequest.get(`/aiol/index/content/${contentKey}`)
       console.log('📋 内容API响应:', response)
       return response
     } catch (error) {
diff --git a/src/api/modules/course.ts b/src/api/modules/course.ts
index ab7aca6..c625c56 100644
--- a/src/api/modules/course.ts
+++ b/src/api/modules/course.ts
@@ -109,7 +109,7 @@ export class CourseApi {
       console.log('🔍 查询参数:', queryParams)
 
       // 调用后端API
-      const response = await ApiRequest.get<any>('/biz/course/list', queryParams)
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/query_list', queryParams)
       console.log('🔍 课程列表API响应:', response)
 
       // 处理后端响应格式
@@ -187,7 +187,7 @@ export class CourseApi {
       console.log('🚀 调用课程详情API，课程ID:', id)
 
       // 调用后端API
-      const response = await ApiRequest.get<any>('/biz/course/detail', { id })
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/detail', { id })
 
       console.log('🔍 课程详情API响应:', response)
 
@@ -294,7 +294,7 @@ export class CourseApi {
   static async getCourseById(id: string): Promise<ApiResponse<Course>> {
     try {
       // 调用后端课程详情接口
-      const response = await ApiRequest.get<any>('/biz/course/detail', { id })
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/detail', { id })
 
       console.log('🔍 课程详情API响应:', response)
 
@@ -408,7 +408,7 @@ export class CourseApi {
       console.log('🚀 获取课程分类列表')
 
       // 调用后端API（不需要token）
-      const response = await ApiRequest.get<any>('/biz/course/category/list')
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/category/list')
 
       console.log('🔍 分类API响应:', response)
 
@@ -452,7 +452,7 @@ export class CourseApi {
       console.log('🚀 获取课程专题列表')
 
       // 调用后端API（不需要token）
-      const response = await ApiRequest.get<any>('/biz/course/subject/list')
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/subject/list')
 
       console.log('🔍 专题API响应:', response)
 
@@ -496,7 +496,7 @@ export class CourseApi {
       console.log('🚀 获取课程难度列表')
 
       // 调用后端API（不需要token）
-      const response = await ApiRequest.get<any>('/biz/course/difficulty/list')
+      const response = await ApiRequest.get<any>('/aiol/aiolCourse/difficulty/list')
 
       console.log('🔍 难度API响应:', response)
 
@@ -551,9 +551,9 @@ export class CourseApi {
   }>> {
     try {
       console.log('🔍 报名课程，课程ID:', courseId)
-      console.log('🔍 API请求URL: /biz/course/' + courseId + '/enroll')
+      console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/enroll')
 
-      const response = await ApiRequest.post<any>(`/biz/course/${courseId}/enroll`)
+      const response = await ApiRequest.post<any>(`/aiol/aiolCourse/${courseId}/enroll`)
       console.log('🔍 报名API响应:', response)
 
       // 处理后端响应格式
@@ -623,9 +623,9 @@ export class CourseApi {
   }>> {
     try {
       console.log('🔍 检查课程报名状态，课程ID:', courseId)
-      console.log('🔍 API请求URL: /biz/course/' + courseId + '/is_enrolled')
+      console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/is_enrolled')
 
-      const response = await ApiRequest.get<any>(`/biz/course/${courseId}/is_enrolled`)
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/is_enrolled`)
       console.log('🔍 报名状态API响应:', response)
 
       // 处理后端响应格式
@@ -695,9 +695,9 @@ export class CourseApi {
   static async getCourseSections(courseId: string): Promise<ApiResponse<CourseSectionListResponse>> {
     try {
       console.log('🔍 获取课程章节数据，课程ID:', courseId)
-      console.log('🔍 API请求URL: /biz/course/' + courseId + '/section')
+      console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/section')
 
-      const response = await ApiRequest.get<any>(`/biz/course/${courseId}/section`)
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/section`)
       console.log('🔍 章节API响应:', response)
 
       // 处理后端响应格式
@@ -907,9 +907,9 @@ export class CourseApi {
   static async getCourseInstructors(courseId: string): Promise<ApiResponse<Instructor[]>> {
     try {
       console.log('🔍 获取课程讲师数据，课程ID:', courseId)
-      console.log('🔍 API请求URL: /biz/course/' + courseId + '/teachers')
+      console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/teachers')
 
-      const response = await ApiRequest.get<any>(`/biz/course/${courseId}/teachers`)
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/teachers`)
       console.log('🔍 讲师API响应:', response)
 
       // 处理后端响应格式
@@ -968,9 +968,9 @@ export class CourseApi {
   static async getSectionVideos(courseId: string, sectionId: string): Promise<ApiResponse<SectionVideo[]>> {
     try {
       console.log('🔍 获取章节视频数据，课程ID:', courseId, '章节ID:', sectionId)
-      console.log('🔍 API请求URL: /biz/course/' + courseId + '/section_video/' + sectionId)
+      console.log('🔍 API请求URL: /aiol/aiolCourse/' + courseId + '/section_video/' + sectionId)
 
-      const response = await ApiRequest.get<any>(`/biz/course/${courseId}/section_video/${sectionId}`)
+      const response = await ApiRequest.get<any>(`/aiol/aiolCourse/${courseId}/section_video/${sectionId}`)
       console.log('🔍 章节视频API响应:', response)
 
       // 处理后端响应格式
@@ -1090,9 +1090,9 @@ export class CourseApi {
   static async getCourseComments(courseId: string): Promise<ApiResponse<CourseComment[]>> {
     try {
       console.log('🔍 获取课程评论数据，课程ID:', courseId)
-      console.log('🔍 API请求URL: /biz/comment/course/' + courseId + '/list')
+      console.log('🔍 API请求URL: /aiol/aiolComment/course/' + courseId + '/list')
 
-      const response = await ApiRequest.get<any>(`/biz/comment/course/${courseId}/list`)
+      const response = await ApiRequest.get<any>(`/aiol/aiolComment/course/${courseId}/list`)
       console.log('🔍 评论API响应:', response)
 
       // 处理后端响应格式
diff --git a/src/api/modules/exam.ts b/src/api/modules/exam.ts
index 75cd072..f6b02d7 100644
--- a/src/api/modules/exam.ts
+++ b/src/api/modules/exam.ts
@@ -29,7 +29,7 @@ export class ExamApi {
    */
   static async createCourseRepo(data: CreateRepoRequest): Promise<ApiResponse<string>> {
     console.log('🚀 创建课程题库:', data)
-    const response = await ApiRequest.post<string>('/biz/repo/courseAdd', data)
+    const response = await ApiRequest.post<string>('/aiol/repo/courseAdd', data)
     console.log('✅ 创建课程题库成功:', response)
     return response
   }
@@ -38,7 +38,7 @@ export class ExamApi {
    * 获取课程题库
    */
   static async getCourseRepoList(): Promise<ApiResponseWithResult<Repo[]>> {
-    const response = await ApiRequest.get<{ result: Repo[] }>(`/biz/repo/repoList`)
+    const response = await ApiRequest.get<{ result: Repo[] }>(`/aiol/repo/repoList`)
     console.log('✅ 获取课程题库列表成功:', response)
     return response
   }
diff --git a/src/views/AICompanion.vue b/src/views/AICompanion.vue
index 49b5df0..bc40c03 100644
--- a/src/views/AICompanion.vue
+++ b/src/views/AICompanion.vue
@@ -1697,9 +1697,10 @@ onMounted(() => {
 }
 
 .container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 32px;
+  max-width: none;
+  margin: 0;
+  padding-left: 120px;
+  padding-right: 125px;
 }
 
 .breadcrumb {
@@ -1723,7 +1724,7 @@ onMounted(() => {
 
 .course-content {
   display: flex;
-  gap: 30px;
+  gap: 64px;
   width: 100%;
   flex-direction: row-reverse;
 }
@@ -3635,10 +3636,21 @@ onMounted(() => {
 }
 
 /* 响应式设计 */
+/* 大屏幕 - 使用120px左右边距 */
+@media (min-width: 1400px) {
+  .container {
+    padding-left: 120px;
+    padding-right: 120px;
+    max-width: none;
+    margin: 0;
+  }
+}
+
 @media (max-width: 1399px) and (min-width: 1200px) {
   .container {
     padding: 0 24px;
     max-width: 1200px;
+    margin: 0 auto;
   }
 
   .sidebar {
@@ -3650,6 +3662,7 @@ onMounted(() => {
   .container {
     padding: 0 20px;
     max-width: 992px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -3666,6 +3679,7 @@ onMounted(() => {
   .container {
     padding: 0 16px;
     max-width: 768px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -3682,6 +3696,7 @@ onMounted(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -3703,6 +3718,7 @@ onMounted(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .video-player.unregistered {
@@ -3967,6 +3983,8 @@ onMounted(() => {
 @media (max-width: 480px) {
   .container {
     padding: 0 12px;
+    margin: 0 auto;
+    max-width: 480px;
   }
 
   .video-player.unregistered {
@@ -4025,6 +4043,8 @@ onMounted(() => {
 @media (max-width: 360px) {
   .container {
     padding: 0 8px;
+    margin: 0 auto;
+    max-width: 360px;
   }
 
   .video-player.unregistered {

From b3ed88602f6d177986c580d6c37da9bf29a11bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Mon, 1 Sep 2025 20:04:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9Aai=E4=BC=B4=E5=AD=A6=E7=9A=84?=
 =?UTF-8?q?=E6=9C=AA=E6=8A=A5=E5=90=8D=E5=B7=B2=E6=8A=A5=E5=90=8D=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E5=A4=AE=E8=A7=86=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=8A=95?=
 =?UTF-8?q?=E8=AF=89=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84=EF=BC=8Cai?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8Bbug=E4=BF=AE=E6=94=B9=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/CourseExchanged.vue | 322 ++++++++++++++++++++++++++++++++--
 1 file changed, 312 insertions(+), 10 deletions(-)

diff --git a/src/views/CourseExchanged.vue b/src/views/CourseExchanged.vue
index 0871467..0089595 100644
--- a/src/views/CourseExchanged.vue
+++ b/src/views/CourseExchanged.vue
@@ -126,8 +126,8 @@
 
                 <!-- 课程描述 -->
                 <div class="course-description">
-                  <div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span>这里</span> 反馈</div>
-                  <span>稿件投诉</span>
+                  <div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span @click="openComplaintModal('feedback')">这里</span> 反馈</div>
+                  <span @click="openComplaintModal('complaint')">稿件投诉</span>
                 </div>
 
 
@@ -696,10 +696,10 @@
             </div>
           </div>
           <div class="ai-assistant-interface">
-            <div class="banner-button">
+            <!-- <div class="banner-button">
               <img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
               <span class="button-text">普通</span>
-            </div>
+            </div> -->
 
 
             <!-- AI主要内容区域 -->
@@ -966,6 +966,59 @@
       </div>
     </div>
   </div>
+
+  <!-- 投诉/反馈弹窗 -->
+  <n-modal v-model:show="complaintModalVisible" style="width: 600px;">
+    <div class="complaint-modal">
+      <!-- 自定义标题 -->
+      <div class="complaint-modal-header">
+        <div class="complaint-modal-title">投诉/反馈</div>
+        <div class="complaint-modal-divider"></div>
+      </div>
+
+      <div class="complaint-modal-content">
+        <!-- 投诉内容 -->
+        <div class="complaint-section">
+          <div class="complaint-label">投诉内容：</div>
+          <div class="complaint-input-wrapper">
+            <n-input
+              v-model:value="complaintContent"
+              type="textarea"
+              placeholder="请输入您想要投诉或反馈的内容"
+              :rows="8"
+              :maxlength="500"
+              show-count
+              class="complaint-textarea"
+            />
+          </div>
+        </div>
+
+        <!-- 上传图片 -->
+        <div class="upload-section">
+          <div class="upload-label">上传图片：</div>
+          <div class="upload-wrapper">
+            <n-upload
+              v-model:file-list="uploadFileList"
+              :max="5"
+              list-type="image-card"
+              accept="image/*"
+              :custom-request="handleUpload"
+            >
+              <div class="upload-area">
+                <div class="upload-plus">+</div>
+              </div>
+            </n-upload>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部按钮 -->
+      <div class="modal-actions">
+        <n-button @click="cancelComplaint" class="cancel-btn">取消</n-button>
+        <n-button type="primary" @click="submitComplaint" class="submit-btn">提交</n-button>
+      </div>
+    </div>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
@@ -1935,6 +1988,63 @@ const notesList = ref([
 ])
 const editingNoteIndex = ref(-1)
 
+// 投诉/反馈弹窗相关状态
+const complaintModalVisible = ref(false)
+const complaintContent = ref('')
+const complaintType = ref<'feedback' | 'complaint'>('feedback')
+const uploadFileList = ref([])
+
+// 打开投诉弹窗
+const openComplaintModal = (type: 'feedback' | 'complaint') => {
+  complaintType.value = type
+  complaintModalVisible.value = true
+  complaintContent.value = ''
+  uploadFileList.value = []
+}
+
+// 取消投诉
+const cancelComplaint = () => {
+  complaintModalVisible.value = false
+  complaintContent.value = ''
+  uploadFileList.value = []
+}
+
+// 提交投诉
+const submitComplaint = async () => {
+  if (!complaintContent.value.trim()) {
+    message.warning('请输入投诉内容')
+    return
+  }
+
+  try {
+    // 这里可以调用API提交投诉
+    console.log('提交投诉:', {
+      type: complaintType.value,
+      content: complaintContent.value,
+      files: uploadFileList.value
+    })
+
+    message.success('提交成功，我们会尽快处理您的反馈')
+    complaintModalVisible.value = false
+    complaintContent.value = ''
+    uploadFileList.value = []
+  } catch (error) {
+    console.error('提交投诉失败:', error)
+    message.error('提交失败，请稍后重试')
+  }
+}
+
+// 处理文件上传
+const handleUpload = ({ file, onFinish, onError }: any) => {
+  // 这里可以实现真实的文件上传逻辑
+  console.log('上传文件:', file)
+
+  // 模拟上传成功
+  setTimeout(() => {
+    onFinish()
+  }, 1000)
+}
+
 // 发送聊天消息
 const sendMessage = () => {
   if (chatMessage.value.trim()) {
@@ -2097,9 +2207,10 @@ onActivated(() => {
 }
 
 .container {
-  /* max-width: 1400px; */
-  width: 100%;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
+  padding-left: 120px;
+  padding-right: 120px;
 }
 
 .breadcrumb {
@@ -2126,7 +2237,7 @@ onActivated(() => {
 
 .course-content {
   display: flex;
-  gap: 20px;
+  gap: 32px;
   width: 100%;
   flex-direction: row-reverse;
 }
@@ -4109,7 +4220,8 @@ onActivated(() => {
 /* AI助手界面样式 */
 .ai-assistant-interface {
   position: relative;
-  min-width: 360px;
+  width: 360px; /* 固定宽度，不再自适应 */
+  flex-shrink: 0; /* 防止收缩 */
   /* background: white; */
   padding-top: 12px;
   margin-top: 30px;
@@ -5023,10 +5135,29 @@ onActivated(() => {
 }
 
 /* 响应式设计 */
+/* 大屏幕 - 使用120px左右边距 */
+@media (min-width: 1400px) {
+  .container {
+    padding-left: 120px;
+    padding-right: 120px;
+    max-width: none;
+    margin: 0;
+  }
+
+  .course-content {
+    gap: 32px;
+  }
+}
+
 @media (max-width: 1399px) and (min-width: 1200px) {
   .container {
     padding: 0 24px;
     max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .course-content {
+    gap: 20px;
   }
 
   .sidebar {
@@ -5038,6 +5169,7 @@ onActivated(() => {
   .container {
     padding: 0 20px;
     max-width: 992px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5054,6 +5186,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 768px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5070,6 +5203,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5091,6 +5225,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .video-player.unregistered {
@@ -5355,6 +5490,8 @@ onActivated(() => {
 @media (max-width: 480px) {
   .container {
     padding: 0 12px;
+    margin: 0 auto;
+    max-width: 480px;
   }
 
   .video-player.unregistered {
@@ -5413,6 +5550,8 @@ onActivated(() => {
 @media (max-width: 360px) {
   .container {
     padding: 0 8px;
+    margin: 0 auto;
+    max-width: 360px;
   }
 
   .video-player.unregistered {
@@ -5599,7 +5738,7 @@ onActivated(() => {
   background: transparent;
   border: none;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 16px; /* 调整字体大小从12px到16px */
   color: #666;
   border-radius: 4px;
   transition: all 0.2s ease;
@@ -6189,4 +6328,167 @@ onActivated(() => {
 .no-comments {
   color: #999;
 }
+
+/* 投诉/反馈弹窗样式 */
+.complaint-modal {
+  background: white;
+  border-radius: 2px;
+  padding: 24px;
+}
+
+.complaint-modal-header {
+  margin-bottom: 24px;
+}
+
+.complaint-modal-title {
+  width: 72px;
+  height: 22px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 16px;
+  color: #000000;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  margin-bottom: 16px;
+}
+
+.complaint-modal-divider {
+  width: 506px;
+  height: 1px;
+  background: #E6E6E6;
+}
+
+.complaint-modal-content {
+  padding: 20px 0;
+}
+
+.complaint-section {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.complaint-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-right: 16px;
+  white-space: nowrap;
+  padding-top: 8px;
+}
+
+.complaint-input-wrapper {
+  flex: 1;
+}
+
+.complaint-textarea {
+  width: 428px;
+  height: 214px;
+  background: #F5F8FB;
+  border-radius: 2px;
+}
+
+.upload-section {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.upload-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-right: 16px;
+  white-space: nowrap;
+  padding-top: 8px;
+}
+
+.upload-wrapper {
+  flex: 1;
+}
+
+.upload-area {
+  width: 100px;
+  height: 100px;
+  background: white;
+  border: 1px dashed #d9d9d9;
+  border-radius: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+
+.upload-area:hover {
+  border-color: #40a9ff;
+}
+
+.upload-plus {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-plus::before,
+.upload-plus::after {
+  content: '';
+  position: absolute;
+  background: #666666;
+}
+
+.upload-plus::before {
+  width: 10px;
+  height: 1px;
+}
+
+.upload-plus::after {
+  width: 1px;
+  height: 10px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 24px;
+  
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  color: #666;
+}
+
+.cancel-btn:hover {
+  background: #e6f7ff;
+  border-color: #40a9ff;
+  color: #40a9ff;
+}
+
+.submit-btn {
+  background: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+.submit-btn:hover {
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+
+/* 课程描述中的可点击元素样式 */
+.course-description span {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.course-description span:hover {
+  color: #40a9ff;
+}
 </style>
\ No newline at end of file