Merge branch 'dev' of http://110.42.96.65:19890/GoCo/OL-LearnPlatform-Frontend into dev

src/components/auth/LoginModal.vue

@@ -38,7 +38,7 @@
         </form>
 
         <div class="form-footer">
-          <p>登录即代表同意我们的 <a href="#" class="link">《服务协议隐私政策》</a></p>
+          <p>登录即代表同意我们的 <a @click="goToServiceAgreement" class="link">《服务协议隐私政策》</a></p>
         </div>
       </div>
     </div>
@@ -48,6 +48,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
 import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { AuthApi } from '@/api'
 
@@ -64,6 +65,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const message = useMessage()
+const router = useRouter()
 const userStore = useUserStore()
 
 const showModal = computed({
@@ -197,6 +199,14 @@ const handleLogin = async () => {
     isLoading.value = false
   }
 }
+
+// 跳转到服务协议页面
+const goToServiceAgreement = () => {
+  // 关闭当前模态框
+  closeModal()
+  // 跳转到服务协议页面
+  router.push('/service-agreement')
+}
 </script>
 
 export default {

src/components/auth/RegisterModal.vue

@@ -46,7 +46,7 @@
         </form>
 
         <div class="form-footer">
-          <p>注册即代表同意我们的 <a href="#" class="link">《服务协议隐私政策》</a></p>
+          <p>注册即代表同意我们的 <a @click="goToServiceAgreement" class="link">《服务协议隐私政策》</a></p>
         </div>
       </div>
     </div>
@@ -56,6 +56,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
 import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
 import { AuthApi } from '@/api'
 
 interface Props {
@@ -71,6 +72,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const message = useMessage()
+const router = useRouter()
 
 const showModal = computed({
   get: () => props.show,
@@ -209,6 +211,14 @@ const sendVerificationCode = async () => {
     }
   }
 }
+
+// 跳转到服务协议页面
+const goToServiceAgreement = () => {
+  // 关闭当前模态框
+  closeModal()
+  // 跳转到服务协议页面
+  router.push('/service-agreement')
+}
 </script>
 
 export default {

src/components/course/DPlayerVideo.vue

@@ -88,18 +88,51 @@ const loadDPlayer = (): Promise<void> => {
       return
     }
 
-    // 加载 CSS
+    // 尝试多个CDN源
-    const cssLink = document.createElement('link')
+    const cdnSources = [
-    cssLink.rel = 'stylesheet'
+      {
-    cssLink.href = 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.css'
+        css: 'https://unpkg.com/dplayer@1.27.1/dist/DPlayer.min.css',
-    document.head.appendChild(cssLink)
+        js: 'https://unpkg.com/dplayer@1.27.1/dist/DPlayer.min.js'
+      },
+      {
+        css: 'https://cdn.bootcdn.net/ajax/libs/dplayer/1.27.1/DPlayer.min.css',
+        js: 'https://cdn.bootcdn.net/ajax/libs/dplayer/1.27.1/DPlayer.min.js'
+      },
+      {
+        css: 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.css',
+        js: 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js'
+      }
+    ]
 
-    // 加载 JS
+    let currentIndex = 0
-    const script = document.createElement('script')
+
-    script.src = 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js'
+    const tryLoadFromCDN = () => {
-    script.onload = () => resolve()
+      if (currentIndex >= cdnSources.length) {
-    script.onerror = () => reject(new Error('Failed to load DPlayer'))
+        reject(new Error('All CDN sources failed to load DPlayer'))
-    document.head.appendChild(script)
+        return
+      }
+
+      const source = cdnSources[currentIndex]
+
+      // 加载 CSS
+      const cssLink = document.createElement('link')
+      cssLink.rel = 'stylesheet'
+      cssLink.href = source.css
+      document.head.appendChild(cssLink)
+
+      // 加载 JS
+      const script = document.createElement('script')
+      script.src = source.js
+      script.onload = () => resolve()
+      script.onerror = () => {
+        console.warn(`Failed to load DPlayer from ${source.js}, trying next CDN...`)
+        currentIndex++
+        tryLoadFromCDN()
+      }
+      document.head.appendChild(script)
+    }
+
+    tryLoadFromCDN()
   })
 }
 
@@ -278,12 +311,13 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   height: 578px;
-  background: #000;
+  background: transparent;
 }
 
 .dplayer-wrapper {
   width: 100%;
   height: 100%;
+  background: transparent;
 }
 
 .video-placeholder {
@@ -298,7 +332,7 @@ onUnmounted(() => {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: transparent;
   color: white;
   cursor: pointer;
 }
@@ -310,8 +344,9 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.3);
   z-index: 1;
+  border-radius: 12px;
 }
 
 .placeholder-content {

src/router/index.ts

@@ -196,6 +196,14 @@ const routes: RouteRecordRaw[] = [
   },
 
   // 首页与课程
+  {
+    path: '/service-agreement',
+    name: 'ServiceAgreement',
+    component: () => import('@/views/ServiceAgreement.vue'),
+    meta: {
+      title: '服务协议与隐私政策'
+    }
+  },
   {
     path: '/',
     name: 'Home',

src/views/Ai.vue

@@ -2818,4 +2818,242 @@ button:active {
   line-height: 18px;
   margin-top: 25px;
 }
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .page {
+    width: 100% !important;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .block_1 {
+    width: 100% !important;
+    height: auto !important;
+  }
+
+  .section_1 {
+    width: 100% !important;
+    height: auto !important;
+    padding: 0 20px;
+  }
+
+  .text-wrapper_2 {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .group_3 {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 30px;
+  }
+
+  .group_6 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .group_27 {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .section_1 {
+    padding: 0 20px;
+  }
+
+  .group_6 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .group_12 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .group_21 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  /* 调整卡片宽度 */
+  .box_5, .group_13, .group_18, .group_20, .group_22, .group_23 {
+    width: 100% !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .section_1 {
+    padding: 0 15px;
+  }
+
+  .text_13 {
+    font-size: 28px !important;
+  }
+
+  .text_14 {
+    font-size: 16px !important;
+  }
+
+  .group_3 {
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .group_6 {
+    gap: 15px;
+  }
+
+  .box_5 {
+    width: 100% !important;
+  }
+
+  .group_27 {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .box_18, .box_20, .box_21, .box_22 {
+    width: 100% !important;
+    margin-bottom: 15px;
+  }
+
+  /* 调整图片尺寸 */
+  .image_7, .image_8, .image_9, .image_10, .image_11,
+  .image_12, .image_13, .image_14, .image_15, .image_16,
+  .image_17, .image_18 {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 200px;
+    object-fit: cover;
+  }
+
+  /* 左侧导航区域调整 */
+  .group_5 {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  /* 项目卡片调整 */
+  .group_12 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .group_13 {
+    width: 100% !important;
+  }
+
+  .group_18, .group_20 {
+    width: 100% !important;
+    margin-bottom: 20px;
+  }
+
+  /* 底部导航调整 */
+  .group_21 {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .group_22, .group_23 {
+    width: 100% !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .section_1 {
+    padding: 0 10px;
+  }
+
+  .text_13 {
+    font-size: 24px !important;
+  }
+
+  .text_14 {
+    font-size: 14px !important;
+  }
+
+  .group_3 {
+    gap: 10px;
+  }
+
+  .group_6, .group_27 {
+    gap: 10px;
+  }
+
+  /* 文字大小调整 */
+  .text_19, .text_20, .text_32, .text_35, .text_38, .text_41 {
+    font-size: 14px !important;
+    white-space: normal !important;
+    word-wrap: break-word;
+  }
+
+  .text_33, .text_36, .text_39, .text_42, .text_47, .text_50, .text_53, .text_56 {
+    font-size: 12px !important;
+    line-height: 1.4 !important;
+    white-space: normal !important;
+    word-wrap: break-word;
+  }
+
+  /* 按钮和交互元素调整 */
+  .image-text_1, .image-text_2, .image-text_3, .image-text_15, .image-text_16 {
+    padding: 8px !important;
+    min-height: 40px;
+  }
+
+  /* 卡片内边距调整 */
+  .box_5, .box_11, .box_13, .box_18, .box_19, .box_20, .box_21, .box_22 {
+    padding: 15px !important;
+  }
+
+  /* 标题文字换行 */
+  .paragraph_1, .paragraph_2, .paragraph_3, .paragraph_4 {
+    white-space: normal !important;
+    word-wrap: break-word;
+    line-height: 1.3 !important;
+  }
+}
+
+/* 通用响应式修复 */
+@media (max-width: 1920px) {
+  /* 修复所有固定宽度元素 */
+  .page, .block_1, .section_1, .group_1, .group_2 {
+    width: 100% !important;
+    max-width: 100vw;
+  }
+
+  /* 确保内容不会溢出 */
+  * {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* 图片响应式 */
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* 文本容器响应式 */
+  .text-wrapper_2, .text-group_1, .text-group_2, .text-group_3,
+  .text-group_13, .text-group_14, .text-group_15, .text-group_16,
+  .text-group_19, .text-group_20, .text-group_21, .text-group_22,
+  .text-group_23, .text-group_24, .text-group_25, .text-group_26,
+  .text-group_27, .text-group_28, .text-group_29, .text-group_30,
+  .text-group_31, .text-group_32, .text-group_33, .text-group_34,
+  .text-group_35, .text-group_36, .text-group_37, .text-group_38,
+  .text-group_39, .text-group_40, .text-group_41, .text-group_42,
+  .text-group_43 {
+    width: auto !important;
+    max-width: 100%;
+  }
+}
 </style>

src/views/Faculty.vue

@@ -38,13 +38,15 @@
         <div class="faculty-grid">
           <div v-for="teacher in paginatedTeachers" :key="teacher.id" class="faculty-card">
             <div class="card-header">
-              <div class="avatar-container" @mouseenter="toggleCourseInfo(teacher.id)">
+              <div class="avatar-container"
+                   @mouseenter="showCourseInfo(teacher.id)"
+                   @mouseleave="hideCourseInfo(teacher.id)">
                 <!-- 师资头像 -->
                 <img :src="teacher.avatar" :alt="teacher.name" class="teacher-avatar" />
                 <div v-if="teacher.featured" class="featured-badge"></div>
 
                 <!-- 课程介绍盒子 -->
-                <div v-if="expandedTeacherId === teacher.id" class="course-info-box" :class="{ active: expandedTeacherId === teacher.id }">
+                <div class="course-info-box" :class="{ active: expandedTeacherId === teacher.id }">
                   <div class="course-info-content">
                     <h4 class="course-title">课程介绍：</h4>
                     <p class="course-description">主讲课程为《Python语言程序设计》、《动画原理与实现》、《虚拟现实技术与应用》等。</p>
@@ -135,6 +137,16 @@ const toggleCourseInfo = (teacherId: number) => {
   }
 }
 
+// 鼠标悬停显示课程信息
+const showCourseInfo = (teacherId: number) => {
+  expandedTeacherId.value = teacherId
+}
+
+// 鼠标离开隐藏课程信息
+const hideCourseInfo = (teacherId: number) => {
+  expandedTeacherId.value = null
+}
+
 // 筛选标签数据
 const filterTabs = ref([
   { id: 'all', name: '全部' },
@@ -586,11 +598,13 @@ height: 37px;
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
   z-index: 10;
   transform: translateY(100%);
-  transition: transform 0.3s ease-out;
+  opacity: 0;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .course-info-box.active {
   transform: translateY(0);
+  opacity: 1;
 }
 
 .course-info-content {
@@ -627,10 +641,7 @@ height: 37px;
   box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
 } */
 
-.faculty-card:hover .course-info-box,
+/* 移除冲突的hover样式，改用JavaScript控制 */
-.course-info-box:hover {
-  transform: translateY(0);
-}
 
 /* 箭头按钮旋转动画 */
 /* .card-arrow {

src/views/Home.vue

@@ -6,7 +6,7 @@
       <div class="hero-content">
         <h2>中小学教师人工智能素养<span>提升</span>在线学习平台</h2>
         <p>为教师量身定制，帮助教师快速掌握AI技术、教学应用与伦理规范，赋能智慧课堂</p>
-        <button>立即学习</button>
+        <button @click="goToCoursesPage">立即学习</button>
       </div>
     </section>
 
@@ -538,7 +538,25 @@ const router = useRouter()
 const courseStore = useCourseStore()
 // @ts-ignore
 const userStore = useUserStore()
-const { loginModalVisible, registerModalVisible, handleAuthSuccess } = useAuth()
+const { loginModalVisible, registerModalVisible, handleAuthSuccess: originalHandleAuthSuccess } = useAuth()
+
+// 自定义认证成功处理，登录后跳转到个人中心
+const handleAuthSuccess = () => {
+  originalHandleAuthSuccess()
+  // 登录成功后跳转到个人中心
+  router.push('/profile')
+}
+
+// 跳转到个人中心页面（需要登录检查）
+const goToCoursesPage = () => {
+  if (userStore.isLoggedIn) {
+    // 已登录，跳转到个人中心
+    router.push('/profile')
+  } else {
+    // 未登录，显示登录模态框
+    loginModalVisible.value = true
+  }
+}
 
 // 跳转到课程详情页面
 const goToCourseDetail = async (courseId: string) => {

src/views/Profile.vue

@@ -2290,7 +2290,7 @@ const isMessageTab = computed(() => activeTab.value === 'message')
 // 处理菜单选择
 const handleMenuSelect = (key: TabType) => {
   activeTab.value = key
-  message.info(`切换到${getTabTitle(key)}`)
+  // message.info(`切换到${getTabTitle(key)}`)
 }
 
 // 获取状态文本
@@ -4280,6 +4280,44 @@ onActivated(() => {
     padding: 16px;
     min-height: 240px;
   }
+
+  /* 考试标题在小屏幕上给分数留出空间并允许换行 */
+  .exam-title {
+    padding-right: 80px; /* 给分数徽章留出空间 */
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: normal;
+  }
+
+  /* 分数徽章保持在右上角不换行 */
+  .exam-score-badge {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    white-space: nowrap;
+  }
+}
+
+/* 更小屏幕的适配 */
+@media (max-width: 480px) {
+  .exam-card {
+    padding: 12px;
+    min-height: 220px;
+  }
+
+  .exam-title {
+    padding-right: 70px; /* 给分数徽章留出更多空间 */
+    font-size: 14px;
+  }
+
+  .exam-score-badge {
+    top: 12px;
+    right: 12px;
+  }
+
+  .score-text {
+    font-size: 16px;
+  }
 }
 
 /* 简化的作业卡片样式 */

src/views/ServiceAgreement.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="service-agreement-page">
+    <div class="container">
+     
+
+      <!-- 协议内容 -->
+      <div class="agreement-content">
+        <!-- 用户协议部分 -->
+        <div class="agreement-section">
+          <h2 class="section-title">用户协议</h2>
+          <p class="update-info">更新日期：2025年8月31日</p>
+
+          <div class="content-text">
+            <p>在注册中小学教师人工智能素养提升在线学习平台（下称"平台"）或使用平台的任何页面之前（包括访问任何课程资料、讨论区或使用其他电子服务）之前，请务必审慎阅读、充分理解本用户协议（下称"本服务条款"）、隐私政策、诚信守则和Cookie政策的内容，特别是免除或限制责任的条款，限制、免责条款可能以黑体加粗形式提示您注意。</p>
+
+            <p>本服务条款、隐私政策、诚信守则和Cookie政策是您与平台之间的协议（下称"本协议"）。不论您是否为注册用户，您使用本产品软件即视为您已阅读并同意接受本协议的约束。如果您不希望受本协议条款的约束，我们将无法为您提供服务。</p>
+
+            <p>如果您未满18周岁，请在法定监护人的监护、指导下阅读本协议和使用本产品。</p>
+
+            <p>平台保留在不事先通知您的情况下随时修改本服务条款的权利。本服务条款的任何修改在本页面上发布后立即生效，并附更新后的生效日期。在本产品进行任何修改之后，您继续访问本产品即视为您已接受修改后的服务条款和本产品的其他全部修改。请定期访问本页面以了解本服务条款的最新版本。</p>
+          </div>
+
+      
+        </div>
+
+        <!-- 隐私政策部分 -->
+        <div class="agreement-section">
+          <h2 class="section-title">隐私政策</h2>
+          <p class="update-info">更新日期：2025年8月31日</p>
+
+          <div class="content-text">
+            <p>在注册中小学教师人工智能素养提升在线学习平台（下称"平台"）或使用平台的任何页面之前（包括访问任何课程资料、讨论区或使用其他电子服务）之前，请务必审慎阅读、充分理解本用户协议（下称"本服务条款"）、隐私政策、诚信守则和Cookie政策的内容，特别是免除或限制责任的条款，限制、免责条款可能以黑体加粗形式提示您注意。</p>
+
+            <p>本服务条款、隐私政策、诚信守则和Cookie政策是您与平台之间的协议（下称"本协议"）。不论您是否为注册用户，您使用本产品软件即视为您已阅读并同意接受本协议的约束。如果您不希望受本协议条款的约束，我们将无法为您提供服务。</p>
+
+            <p>如果您未满18周岁，请在法定监护人的监护、指导下阅读本协议和使用本产品。</p>
+
+            <p>平台保留在不事先通知您的情况下随时修改本服务条款的权利。本服务条款的任何修改在本页面上发布后立即生效，并附更新后的生效日期。在本产品进行任何修改之后，您继续访问本产品即视为您已接受修改后的服务条款和本产品的其他全部修改。请定期访问本页面以了解本服务条款的最新版本。</p>
+          </div>
+
+          <h3 class="subsection-title">平台简述</h3>
+          <div class="content-text">
+            <p>平台为用户提供线上学习支持，包括但不限于：（1）包括图文、视频、讨论、作业等学习单元的学习；（2）视频在线观看；（3）公告区与讨论区师生、同学间互动；（4）线上考试。</p>
+          </div>
+
+          <h3 class="subsection-title">网络行为准则</h3>
+          <div class="content-text">
+            <p>您同意对您使用本产品和您的用户发布内容承担责任。"用户发布内容"是指您和本产品的其他用户在本产品上提交、发布、发表和分发的所有内容，包括但不限于所有帖子、评论、视频和上传的文件。您同意您将根据本服务条款、诚信守则和所有适用的法律法规使用本产品，不得利用本产品从事违法违规行为。您同意尊重当地的社会公德、道德和风俗习惯，避免因使用本产品而使平台卷入任何政治和公共事件。如果您的行为违反本条约定，您应当为此承担全部法律及相关行政责任，相关国家机关或机构可能会对您提起诉讼、罚款或采取其他制裁措施，并要求平台给予协助，您对由此给平台或他人造成损害的，您应依法予以赔偿，平台不承担任何责任。</p>
+
+            <p>作为您使用平台服务的条件之一，您不得以任何试图损坏、禁用、超载或损害平台服务器及连接平台服务器的网站，或影响他人使用本产品的方式使用本产品。您不得试图通过黑客手段、密码破解或任何其他手段未经授权地访问本产品、其他帐号、软硬件系统和连接平台服务器的网络。您不得通过任何不当手段获取或者试图获取存储在本产品、其服务器和相关计算机上的资料和信息。</p>
+
+            <p><strong>本产品严格禁止以下内容：</strong>诽谤、骚扰或威胁他人的内容；讨论试图从事的非法活动的内容；侵犯他人知识产权及其他与知识产权有关的合法权利的内容；粗俗、色情、淫秽、下流、暴力和非法的内容；广告或者其他形式的商业宣传；与政治活动相关的内容；病毒、木马、蠕虫、数据包炸弹、篡改的文件、恶意软件、间谍软件或者其他类似的可能损害他人计算机运行或财产的内容；恶意虚构或者故意误导他人的内容。</p>
+
+            <p>此外，您同意不抓取和批量下载本产品的内容，包括但不限于系统上的用户列表或目录、在线教材、用户发布内容或用户信息。在使用本产品时，您不得冒用或者试图冒用他人身份。</p>
+          </div>
+
+        
+        </div>
+      </div>
+
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.service-agreement-page {
+  min-height: 100vh;
+  background: #f8f9fa;
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.container {
+  width: 1420px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+
+
+.agreement-content {
+  width: 1420px;
+  height: auto;
+  background: #FFFFFF;
+  border-radius: 0;
+  padding: 0 120px;
+  box-shadow: none;
+  margin: 0 auto;
+}
+
+.agreement-section {
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin: 60px 0 24px 0;
+  text-align: center;
+}
+
+.update-info {
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 40px;
+}
+
+.subsection-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #444;
+  margin: 32px 0 16px 0;
+}
+
+.content-text {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #555;
+  margin-bottom: 24px;
+}
+
+.content-text p {
+  margin-bottom: 16px;
+  text-align: justify;
+}
+
+.content-text ul {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.content-text li {
+  margin-bottom: 8px;
+  list-style-type: disc;
+}
+
+.update-date {
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+  margin-top: 40px !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1440px) {
+  .container {
+    width: 95%;
+    max-width: 1420px;
+  }
+
+  .agreement-content {
+    padding: 0 60px 60px 60px;
+  }
+}
+
+@media (max-width: 768px) {
+  .service-agreement-page {
+    padding: 24px 16px;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  .agreement-content {
+    padding: 0 24px 40px 24px;
+  }
+
+  .section-title {
+    font-size: 22px;
+    margin: 40px 0 20px 0;
+  }
+
+  .subsection-title {
+    font-size: 18px;
+  }
+}
+</style>