feat: 优化学习笔记页面UI和交互体验

style(BlockNoteEditorDialog): 添加append-to-body属性提升对话框显示效果

refactor(CourseDescription): 重构课程介绍组件样式，增强视觉层次感和响应式设计
- 添加卡片背景、阴影和圆角
- 优化富文本内容样式
- 添加封面图片悬停效果
- 完善移动端适配

refactor(OtherCourse): 重构其他课程推荐组件样式
- 使用卡片布局展示课程
- 添加悬停动画效果
- 优化标签和浏览数显示
- 完善空状态和响应式设计

refactor(CourseDirectory): 重构课程目录组件样式
- 使用卡片式布局
- 添加选中状态指示器
- 优化章节信息展示
- 完善移动端适配

refactor(xuxibiji): 重构学习笔记组件样式
- 使用卡片布局展示笔记
- 添加按钮悬停效果
- 优化笔记元数据展示
- 完善分页和响应式设计

refactor(pinglun): 重构评论组件样式
- 优化评论输入框布局
- 使用卡片展示评论列表
- 添加滚动条样式
- 完善移动端适配

feat(LearnNote): 新增学习笔记页面设计
- 添加极光背景效果
- 重构课程列表为卡片布局
- 优化选中状态交互
- 添加动画过渡效果
- 完善响应式设计

src/components/BlockNoteEditorDialog.vue

@@ -3,6 +3,7 @@
     v-model="dialogVisible"
     :title="title + $t('common.xuxibiji')"
     width="80%"
+    append-to-body
   >
     <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="edit_note">
       <el-form-item label="" prop="noteTitle">

src/pages/LearnNote/LearnNote.vue

@@ -1,85 +1,130 @@
 <template>
-  <div class="LearnNote container-height">
-    <Breadcrumb />
-    <div class="flex-between">
-      <div class="detail_right">
-        <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
-          <div class="gap10 mb10">
-            <div class="line_vertical"></div>
-            <div class="font_size20 bold">{{$t('common.learnNoteList')}} </div>
+  <div class="ln-page container-height">
+    <!-- ===== AURORA BACKGROUND ===== -->
+    <div class="ln-aurora-bg" aria-hidden="true">
+      <div class="ln-orb ln-orb-1"></div>
+      <div class="ln-orb ln-orb-2"></div>
+      <div class="ln-orb ln-orb-3"></div>
+      <div class="ln-grid-overlay"></div>
+      <div class="ln-noise-texture"></div>
+    </div>
+
+    <!-- ===== MAIN CONTENT ===== -->
+    <div class="ln-content">
+      <!-- Breadcrumb -->
+      <div class="ln-breadcrumb-wrapper">
+        <Breadcrumb />
+      </div>
+
+      <!-- Page Header -->
+      <div class="ln-header">
+        <div class="ln-header-content">
+          <div class="ln-title-wrapper">
+            <!-- <div class="ln-title-line"></div> -->
+            <h1 class="ln-title">{{$t('common.xuxibiji')}}</h1>
           </div>
-          <div class="flex-between course_List cursor-pointer" 
-          @click="selectedItem = item"
-          :class="{'active': item.courseId === selectedItem.courseId}"
-          v-for="item in list" :key="item.courseId">
-            <div  class="coverImageUrl border_radius_8 bg_color_f5">
-              <img :src="item.coverImageUrl" alt="" v-if="item.coverImageUrl" class="coverImageUrl border_radius_8">
+          <p class="ln-subtitle">记录学习点滴，沉淀知识精华</p>
+        </div>
+      </div>
+
+      <!-- Main Layout -->
+      <div class="ln-layout">
+        <!-- Left Sidebar - Course List -->
+        <aside class="ln-sidebar">
+          <div class="ln-sidebar-inner">
+            <div class="ln-sidebar-header">
+              <div class="ln-section-line"></div>
+              <h3 class="ln-section-title">{{$t('common.learnNoteList')}}</h3>
+              <span class="ln-course-count">{{ list.length }}</span>
             </div>
-            <div class="flex_1 ml20">
-              <div class="font_size18 bold">{{ item.courseTitle }}</div>
-              <div class="font_size14 line1 gray mt5">{{ item.courseIntro }}</div>
-              <div class="flex-center-flex-end mt5" v-if="item.courseId!=-1">
-                <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
-                  <img :src="playIcon" alt="" style="width:13px;height:15px">
-                  <div>{{$t('common.lijixuexi')}}</div>
+
+            <div class="ln-course-list">
+              <div
+                v-for="(item, index) in list"
+                :key="item.courseId"
+                class="ln-course-card"
+                :class="{ 'active': item.courseId === selectedItem.courseId }"
+                @click="selectedItem = item"
+                :style="{ animationDelay: `${index * 50}ms` }"
+              >
+                <div class="ln-course-cover">
+                  <img :src="item.coverImageUrl" alt="" v-if="item.coverImageUrl" class="ln-cover-image">
+                  <div class="ln-cover-overlay"></div>
+                  <div class="ln-cover-glow"></div>
                 </div>
+
+                <div class="ln-course-info">
+                  <h4 class="ln-course-title">{{ item.courseTitle }}</h4>
+                  <p class="ln-course-intro" v-if="item.courseIntro">{{ item.courseIntro }}</p>
+                  
+                  <div class="ln-course-actions" v-if="item.courseId !== -1" @click.stop.prevent>
+                    <button class="ln-study-btn" @click="goDetail(item)">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"/>
+                      </svg>
+                      <span>{{$t('common.lijixuexi')}}</span>
+                    </button>
+                  </div>
+                </div>
+
+                <div class="ln-card-indicator"></div>
               </div>
             </div>
+
+            <div v-if="list.length === 0" class="ln-empty-state">
+              <el-empty :image-size="120" :description="$t('common.noData')" />
+            </div>
           </div>
-          <div v-if="list.length === 0" >
-            <el-empty :image-size="200" />
+        </aside>
+
+        <!-- Right Content - Notes -->
+        <main class="ln-main">
+          <div class="ln-main-inner">
+            <Xuxibiji :info="selectedItem" />
           </div>
-        </div>
-      </div>
-      <div class="flex_1 ml20 fit_content bg_color_fff border_radius_10 padding16 box_shadow_card">
-        <Xuxibiji :info="selectedItem" />
+        </main>
       </div>
     </div>
   </div>
 </template>
+
 <script setup>
 import playIcon from '@/assets/imgs/bofang.png'
 import Xuxibiji from '@/pages/LearningSystem/components/xuxibiji.vue'
+import Breadcrumb from '@/components/Breadcrumb.vue'
 import { getCourseWithNotesList } from '@/api/course.js'
-import { isLogin,openFullScreenLoading } from '@/utils/util.js'
+import { isLogin, openFullScreenLoading } from '@/utils/util.js'
 
 import { useI18n } from 'vue-i18n' 
 const { t } = useI18n() 
 
-
 import { ref, onMounted, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from '@/pinia/appStore'
 const appStore = useAppStore()
 const route = useRoute()
 const router = useRouter()
-const list = ref({})
+const list = ref([])
 const selectedItem = ref({})
 const openLoginDialog = inject('openLoginDialog')
 
 onMounted(() => {
-  //判断是否登录
-  // if(!isLogin({callback: openLoginDialog,t})){
-  //   return;
-  // }
   getList();
 });
+
 const getList = async () => {
   let token = localStorage.getItem('token');
-  if(!token)return;
-  // 打开loading
+  if(!token) return;
+  
   const loading = openFullScreenLoading();
   getCourseWithNotesList().then(res => {
-    // 关闭loading
     loading.close();
     if(res.code === 200){
-      console.log(res)
-      // list.value = res.rows || [];
       list.value = [
         {
           courseId:'-1',
           courseTitle:t('common.personalNotes'),
-          coverImageUrl:appStore.userInfo?.userAvatar  || '',
+          coverImageUrl: appStore.userInfo?.userAvatar || '',
           courseIntro:''
         },
         ...res.rows
@@ -90,12 +135,11 @@ const getList = async () => {
     }
   })
 };
+
 const goDetail = (item) => {
-  //判断是否登录
-  if(!isLogin({callback: openLoginDialog,t})){
+  if(!isLogin({callback: openLoginDialog, t})){
     return;
   }
-  //增加参数名称
   router.push({
     path: `/learning-system/detail/${item.courseId}`,
     query: {
@@ -105,28 +149,642 @@ const goDetail = (item) => {
   })
 };
 </script>
-<style lang="scss">
-.LearnNote{
-  .detail_right{
-    max-height: calc(100vh - 120px);
-    overflow-y: auto;
+
+<style scoped lang="scss">
+/* ===== PAGE CONTAINER ===== */
+.ln-page {
+  position: relative;
+  min-height: 100vh;
+  background: linear-gradient(160deg, #eef2ff 0%, #ede9fe 28%, #e8e4ff 52%, #f3e8ff 72%, #fce7f3 100%);
+  overflow-x: hidden;
+}
+
+/* ===== AURORA BACKGROUND ===== */
+.ln-aurora-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.ln-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: float 20s ease-in-out infinite;
+}
+
+.ln-orb-1 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(79, 70, 229, 0.15), transparent 70%);
+  top: -200px;
+  right: -100px;
+  animation-delay: 0s;
+}
+
+.ln-orb-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
+  bottom: -150px;
+  left: -100px;
+  animation-delay: -7s;
+}
+
+.ln-orb-3 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(236, 72, 153, 0.1), transparent 70%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-delay: -14s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
   }
-  .course_List{
-    padding: 16px;
-    border-radius: 16px;
-    &.active{
-      background-color: rgba(45, 113, 255, 0.10) ;
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+.ln-grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(79, 70, 229, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(79, 70, 229, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  opacity: 0.5;
+}
+
+.ln-noise-texture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  opacity: 0.03;
+  mix-blend-mode: overlay;
+}
+
+/* ===== MAIN CONTENT ===== */
+.ln-content {
+  position: relative;
+  z-index: 1;
+  padding: 0 24px 40px;
+  max-width: 1428px;
+  margin: 0 auto;
+}
+
+/* ===== BREADCRUMB ===== */
+.ln-breadcrumb-wrapper {
+  padding: 20px 0;
+  animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== PAGE HEADER ===== */
+.ln-header {
+  margin-bottom: 32px;
+  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ln-header-content {
+  text-align: center;
+}
+
+.ln-title-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.ln-title-line {
+  width: 5px;
+  height: 36px;
+  background: linear-gradient(180deg, #4f46e5, #7c3aed);
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+}
+
+.ln-title {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.ln-subtitle {
+  font-size: 16px;
+  color: #6b7280;
+  margin: 0;
+  letter-spacing: 0.02em;
+  font-weight: 400;
+}
+
+/* ===== MAIN LAYOUT ===== */
+.ln-layout {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 24px;
+  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ===== SIDEBAR ===== */
+.ln-sidebar {
+  position: relative;
+}
+
+.ln-sidebar-inner {
+  position: sticky;
+  top: 20px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(79, 70, 229, 0.15);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(79, 70, 229, 0.25);
     }
-    .coverImageUrl{
-      width: 160px;
-      height: 90px;
+  }
+}
+
+.ln-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
+}
+
+.ln-section-line {
+  width: 4px;
+  height: 20px;
+  background: linear-gradient(180deg, #4f46e5, #7c3aed);
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+}
+
+.ln-section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0;
+  letter-spacing: -0.02em;
+  flex: 1;
+}
+
+.ln-course-count {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4f46e5;
+  background: rgba(79, 70, 229, 0.1);
+  padding: 4px 12px;
+  border-radius: 12px;
+}
+
+/* ===== COURSE LIST ===== */
+.ln-course-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ln-course-card {
+  position: relative;
+  display: flex;
+  gap: 14px;
+  padding: 14px;
+  background: rgba(249, 250, 251, 0.6);
+  border: 1px solid rgba(229, 231, 235, 0.5);
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+  
+  &:hover {
+    transform: translateX(6px);
+    background: rgba(255, 255, 255, 0.9);
+    border-color: rgba(79, 70, 229, 0.2);
+    box-shadow: 
+      0 8px 24px rgba(79, 70, 229, 0.12),
+      0 2px 8px rgba(0, 0, 0, 0.06),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    
+    &::before {
+      opacity: 1;
     }
+    
+    .ln-cover-image {
+      transform: scale(1.08);
+    }
+    
+    .ln-cover-glow {
+      opacity: 0.3;
+    }
+    
+    .ln-course-title {
+      color: #4f46e5;
+    }
+    
+    .ln-card-indicator {
+      opacity: 1;
+      transform: translateY(-50%) scaleY(1);
+    }
+  }
+  
+  &.active {
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
+    border-color: rgba(79, 70, 229, 0.25);
+    box-shadow: 
+      0 8px 24px rgba(79, 70, 229, 0.15),
+      0 2px 8px rgba(0, 0, 0, 0.06),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    
+    .ln-course-title {
+      color: #4f46e5;
+      font-weight: 700;
+    }
+    
+    .ln-card-indicator {
+      opacity: 1;
+      transform: translateY(-50%) scaleY(1);
+    }
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
   }
-  .xuexi{
-    color: #ffffff;
-    padding: 5px 10px;
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.ln-course-cover {
+  position: relative;
+  width: 120px;
+  height: 68px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  
+  .ln-cover-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  
+  .ln-cover-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1));
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+  
+  .ln-cover-glow {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    right: -50%;
+    bottom: -50%;
+    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.3), transparent 60%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    pointer-events: none;
+  }
+}
+
+.ln-course-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+  
+  .ln-course-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #374151;
+    margin: 0 0 6px 0;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color 0.3s ease;
+  }
+  
+  .ln-course-intro {
+    font-size: 12px;
+    color: #9ca3af;
+    margin: 0 0 8px 0;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.ln-course-actions {
+  display: flex;
+  justify-content: flex-end;
+  
+  .ln-study-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    color: white;
+    border: none;
     border-radius: 10px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 
+      0 4px 12px rgba(79, 70, 229, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    
+    svg {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.3s ease;
+    }
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 
+        0 6px 16px rgba(79, 70, 229, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3);
+      
+      svg {
+        transform: scale(1.2);
+      }
+    }
+    
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+.ln-card-indicator {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%) scaleY(0);
+  width: 4px;
+  height: 60%;
+  background: linear-gradient(180deg, #4f46e5, #7c3aed);
+  border-radius: 0 3px 3px 0;
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 0 12px rgba(79, 70, 229, 0.5);
+}
+
+.ln-empty-state {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+/* ===== MAIN CONTENT ===== */
+.ln-main {
+  position: relative;
+  min-width: 0;
+}
+
+.ln-main-inner {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 1200px) {
+  .ln-layout {
+    grid-template-columns: 340px 1fr;
+    gap: 20px;
+  }
+  
+  .ln-course-cover {
+    width: 100px;
+    height: 56px;
+  }
+}
+
+@media (max-width: 992px) {
+  .ln-content {
+    padding: 0 20px 32px;
+  }
+  
+  .ln-layout {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .ln-sidebar-inner {
+    position: static;
+    max-height: none;
+  }
+  
+  .ln-title {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .ln-content {
+    padding: 0 16px 24px;
+  }
+  
+  .ln-header {
+    margin-bottom: 24px;
+  }
+  
+  .ln-title {
+    font-size: 24px;
+  }
+  
+  .ln-subtitle {
     font-size: 14px;
   }
+  
+  .ln-sidebar-inner,
+  .ln-main-inner {
+    padding: 20px;
+    border-radius: 20px;
+  }
+  
+  .ln-course-card {
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .ln-course-cover {
+    width: 90px;
+    height: 50px;
+  }
+  
+  .ln-course-info {
+    .ln-course-title {
+      font-size: 14px;
+    }
+    
+    .ln-course-intro {
+      font-size: 11px;
+    }
+  }
+  
+  .ln-study-btn {
+    padding: 5px 12px;
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 480px) {
+  .ln-content {
+    padding: 0 12px 20px;
+  }
+  
+  .ln-title {
+    font-size: 20px;
+  }
+  
+  .ln-sidebar-inner,
+  .ln-main-inner {
+    padding: 16px;
+    border-radius: 16px;
+  }
+  
+  .ln-course-card {
+    flex-direction: column;
+    padding: 12px;
+  }
+  
+  .ln-course-cover {
+    width: 100%;
+    height: 140px;
+  }
+  
+  .ln-course-info {
+    .ln-course-intro {
+      display: none;
+    }
+  }
+  
+  .ln-course-actions {
+    margin-top: 8px;
+    
+    .ln-study-btn {
+      width: 100%;
+      justify-content: center;
+    }
+  }
 }
 </style>

src/pages/LearningSystem/components/CourseDescription.vue

@@ -1,7 +1,18 @@
 <template>
-  <div>
-    <div v-html="info.courseIntro"></div>
-    <img :src="info.coverImageUrl" alt="" style="width: 100%; height: auto;" class="border_radius_8 mt10">
+  <div class="course-description">
+    <!-- <div class="section-header">
+      <div class="header-line"></div>
+      <h3 class="section-title">{{$t('common.kechengjieshao')}}</h3>
+    </div> -->
+    
+    <div class="description-content">
+      <div class="rich-text" v-html="info.courseIntro"></div>
+      
+      <div v-if="info.coverImageUrl" class="cover-image-wrapper">
+        <img :src="info.coverImageUrl" alt="" class="cover-image">
+        <div class="image-glow"></div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -17,6 +28,290 @@ defineProps({
 const list = ref([]);
 
 </script>
-<style scoped>
+<style scoped lang="scss">
+.course-description {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    
+    .header-line {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
+      border-radius: 2px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+  }
+  
+  .description-content {
+    .rich-text {
+      font-size: 15px;
+      line-height: 1.8;
+      color: #374151;
+      
+      :deep(h1), :deep(h2), :deep(h3), :deep(h4) {
+        color: #1f2937;
+        font-weight: 700;
+        margin: 24px 0 12px 0;
+        line-height: 1.3;
+        
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+      
+      :deep(h1) { font-size: 24px; }
+      :deep(h2) { font-size: 20px; }
+      :deep(h3) { font-size: 18px; }
+      :deep(h4) { font-size: 16px; }
+      
+      :deep(p) {
+        margin: 12px 0;
+        text-align: justify;
+      }
+      
+      :deep(ul), :deep(ol) {
+        margin: 16px 0;
+        padding-left: 24px;
+        
+        li {
+          margin: 8px 0;
+          position: relative;
+          
+          &::marker {
+            color: #4f46e5;
+            font-weight: 600;
+          }
+        }
+      }
+      
+      :deep(blockquote) {
+        margin: 20px 0;
+        padding: 16px 20px;
+        background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
+        border-left: 4px solid #4f46e5;
+        border-radius: 8px;
+        font-style: italic;
+        color: #4b5563;
+      }
+      
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+        border-radius: 12px;
+        margin: 16px 0;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      }
+      
+      :deep(a) {
+        color: #4f46e5;
+        text-decoration: none;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        border-bottom: 1px solid transparent;
+        
+        &:hover {
+          color: #7c3aed;
+          border-bottom-color: #7c3aed;
+        }
+      }
+      
+      :deep(code) {
+        background: rgba(79, 70, 229, 0.08);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', monospace;
+        font-size: 13px;
+        color: #4f46e5;
+      }
+      
+      :deep(pre) {
+        background: #1f2937;
+        color: #f9fafb;
+        padding: 20px;
+        border-radius: 12px;
+        overflow-x: auto;
+        margin: 20px 0;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        
+        code {
+          background: none;
+          color: inherit;
+          padding: 0;
+        }
+      }
+      
+      :deep(table) {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        font-size: 14px;
+        
+        th, td {
+          padding: 12px 16px;
+          text-align: left;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        
+        th {
+          background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
+          font-weight: 600;
+          color: #1f2937;
+        }
+        
+        tr:hover {
+          background: rgba(79, 70, 229, 0.02);
+        }
+      }
+      
+      :deep(hr) {
+        border: none;
+        height: 1px;
+        background: linear-gradient(to right, transparent, #e5e7eb, transparent);
+        margin: 32px 0;
+      }
+      
+      :deep(strong), :deep(b) {
+        font-weight: 600;
+        color: #1f2937;
+      }
+      
+      :deep(em), :deep(i) {
+        font-style: italic;
+        color: #4b5563;
+      }
+    }
+    
+    .cover-image-wrapper {
+      position: relative;
+      margin-top: 24px;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 
+        0 8px 32px rgba(79, 70, 229, 0.12),
+        0 2px 8px rgba(0, 0, 0, 0.06);
+      
+      .cover-image {
+        width: 100%;
+        height: auto;
+        display: block;
+        transition: transform 0.3s ease;
+      }
+      
+      .image-glow {
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        right: -50%;
+        bottom: -50%;
+        background: radial-gradient(circle at center, rgba(79, 70, 229, 0.15), transparent 70%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+      }
+      
+      &:hover {
+        .cover-image {
+          transform: scale(1.02);
+        }
+        
+        .image-glow {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
 
+@media (max-width: 768px) {
+  .course-description {
+    padding: 20px;
+    border-radius: 16px;
+    
+    .section-header {
+      margin-bottom: 16px;
+      
+      .header-line {
+        height: 20px;
+      }
+      
+      .section-title {
+        font-size: 16px;
+      }
+    }
+    
+    .description-content {
+      .rich-text {
+        font-size: 14px;
+        line-height: 1.7;
+        
+        :deep(h1) { font-size: 20px; }
+        :deep(h2) { font-size: 18px; }
+        :deep(h3) { font-size: 16px; }
+        :deep(h4) { font-size: 15px; }
+      }
+      
+      .cover-image-wrapper {
+        margin-top: 20px;
+        border-radius: 14px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .course-description {
+    padding: 16px;
+    border-radius: 14px;
+    
+    .description-content {
+      .rich-text {
+        font-size: 13px;
+        line-height: 1.6;
+        
+        :deep(ul), :deep(ol) {
+          padding-left: 20px;
+        }
+        
+        :deep(blockquote) {
+          padding: 12px 16px;
+          margin: 16px 0;
+        }
+        
+        :deep(pre) {
+          padding: 16px;
+          font-size: 12px;
+        }
+        
+        :deep(table) {
+          font-size: 13px;
+          
+          th, td {
+            padding: 10px 12px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/LearningSystem/components/CourseDirectory.vue

@@ -1,31 +1,44 @@
 <template>
-  <div class="kechengmulu">
-    <div class="gap10">
-      <div class="line_vertical"></div>
-      <div class="font_size18 bold">{{$t('common.kechengmulu')}} (1/{{list.length}})</div>
+  <div class="course-directory">
+    <div class="section-header">
+      <div class="header-line"></div>
+      <h3 class="section-title">{{$t('common.kechengmulu')}} ({{selectedItemIndex + 1}}/{{list.length}})</h3>
     </div>
-    <div class="flex-center-between font_size16 gray list_item" 
-    @click="handleCheck(item)"
-    :class="{'active': selectedItem.chapterId === item.chapterId}"
-    v-for="(item, index) in list" :key="index">
-      <div class="gap10">
-        <div>{{item.chapterOrderName}}</div>
-        <div class="gap5">
-          <img :src="muluIcon" alt="" style="width:20px;height:20px" v-show="selectedItem.chapterId === item.chapterId">
-          <span>{{item.chapterName}}</span>
+    
+    <div class="chapter-list">
+      <div 
+        class="chapter-item" 
+        :class="{ 'active': selectedItem.chapterId === item.chapterId }"
+        @click="handleCheck(item)"
+        v-for="(item, index) in list" 
+        :key="index"
+      >
+        <div class="chapter-content">
+          <div class="chapter-order">{{item.chapterOrderName}}</div>
+          
+          <div class="chapter-info">
+            <img :src="muluIcon" alt="" class="chapter-icon" v-show="selectedItem.chapterId === item.chapterId">
+            <span class="chapter-name">{{item.chapterName}}</span>
+          </div>
         </div>
+        
+        <div class="chapter-duration">
+          {{item.chapterTimeConvert}}
+        </div>
+        
+        <div class="chapter-indicator" v-if="selectedItem.chapterId === item.chapterId"></div>
       </div>
-      <div>{{item.chapterTimeConvert}}</div>
     </div>
-    <div v-if="list.length === 0" >
-      <el-empty :image-size="200" />
+    
+    <div v-if="list.length === 0" class="empty-state">
+      <el-empty :image-size="120" :description="$t('common.noData')" />
     </div>
   </div>
 </template>
 <script setup>
 import muluIcon from '@/assets/imgs/mulu.png'
 import { getChaptersList } from '@/api/course.js'
-import { ref, onMounted, watch, onActivated } from 'vue'
+import { ref, computed, onMounted, watch, onActivated } from 'vue'
 import { useRouter } from 'vue-router'
 const emit = defineEmits(['purchaseFn']);
 const router = useRouter();
@@ -45,8 +58,9 @@ const props = defineProps({
 })
 const selectedItem = ref({});//选中的章节
 
-
-//监听props.info.courseId变化
+const selectedItemIndex = computed(() => {
+  return list.value.findIndex(item => item.chapterId === selectedItem.value.chapterId);
+});
 watch(() => props.info.courseId, (newVal, oldVal) => {
   if(newVal !== oldVal){
     getChaptersListFn();
@@ -103,17 +117,259 @@ const purchaseFn = (chapterId, chapterInfo={}) => {
 
 </script>
 <style scoped lang="scss">
-  .kechengmulu{
-    .list_item{
-      cursor: pointer;
-      padding: 15px 0;
-      border-bottom: 1px solid #DCDFE6;
-      &.active{
-        color: $primary-color;
+.course-directory {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+    
+    .header-line {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
+      border-radius: 2px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+  }
+  
+  .chapter-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .chapter-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 18px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid transparent;
+    
+    &:not(.active) {
+      &:hover {
+        background: rgba(79, 70, 229, 0.04);
+        transform: translateX(4px);
+        
+        .chapter-name {
+          color: #4f46e5;
+        }
+      }
+      
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 0;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        border-radius: 0 2px 2px 0;
+        transition: height 0.3s ease;
+      }
+      
+      &:hover::after {
+        height: 60%;
+      }
+    }
+    
+    &.active {
+      background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
+      border-color: rgba(79, 70, 229, 0.15);
+      box-shadow: 
+        0 4px 16px rgba(79, 70, 229, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      
+      .chapter-order {
+        color: #4f46e5;
         font-weight: 600;
       }
+      
+      .chapter-name {
+        color: #4f46e5;
+        font-weight: 600;
+      }
+      
+      .chapter-duration {
+        color: #4f46e5;
+        font-weight: 500;
+      }
+      
+      .chapter-indicator {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 60%;
+        background: linear-gradient(180deg, #4f46e5, #7c3aed);
+        border-radius: 0 3px 3px 0;
+        animation: pulse-glow 2s ease-in-out infinite;
+      }
     }
+    
+    .chapter-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      
+      .chapter-order {
+        font-size: 13px;
+        font-weight: 500;
+        color: #6b7280;
+        transition: all 0.3s ease;
+      }
+      
+      .chapter-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        .chapter-icon {
+          width: 18px;
+          height: 18px;
+          object-fit: contain;
+          filter: drop-shadow(0 2px 4px rgba(79, 70, 229, 0.3));
+        }
+        
+        .chapter-name {
+          font-size: 15px;
+          font-weight: 500;
+          color: #374151;
+          transition: all 0.3s ease;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    
+    .chapter-duration {
+      font-size: 13px;
+      color: #9ca3af;
+      font-weight: 400;
+      margin-left: 16px;
+      flex-shrink: 0;
+      transition: all 0.3s ease;
+    }
+  }
+  
+  @keyframes pulse-glow {
+    0%, 100% {
+      opacity: 1;
+      box-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
+    }
+    50% {
+      opacity: 0.8;
+      box-shadow: 0 0 16px rgba(124, 58, 237, 0.8);
+    }
+  }
+  
+  .empty-state {
+    padding: 40px 20px;
+    text-align: center;
+  }
+}
 
+@media (max-width: 768px) {
+  .course-directory {
+    padding: 20px;
+    border-radius: 16px;
+    
+    .section-header {
+      margin-bottom: 20px;
+      
+      .header-line {
+        height: 20px;
+      }
+      
+      .section-title {
+        font-size: 16px;
+      }
+    }
+    
+    .chapter-list {
+      gap: 2px;
+    }
+    
+    .chapter-item {
+      padding: 14px 16px;
+      border-radius: 10px;
+      
+      .chapter-content {
+        .chapter-order {
+          font-size: 12px;
+        }
+        
+        .chapter-info {
+          .chapter-icon {
+            width: 16px;
+            height: 16px;
+          }
+          
+          .chapter-name {
+            font-size: 14px;
+          }
+        }
+      }
+      
+      .chapter-duration {
+        font-size: 12px;
+        margin-left: 12px;
+      }
+    }
   }
+}
 
+@media (max-width: 480px) {
+  .course-directory {
+    padding: 16px;
+    border-radius: 14px;
+    
+    .section-header {
+      margin-bottom: 16px;
+      
+      .section-title {
+        font-size: 15px;
+      }
+    }
+    
+    .chapter-item {
+      padding: 12px 14px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      
+      .chapter-duration {
+        margin-left: 0;
+        font-size: 11px;
+      }
+    }
+  }
+}
 </style>

src/pages/LearningSystem/components/OtherCourse.vue

@@ -1,21 +1,49 @@
 <template>
-  <div>
-    <div class="gap10">
-      <div class="line_vertical"></div>
-      <div class="font_size20 bold">{{$t('common.qitakechengtuijian')}}</div>
+  <div class="other-course">
+    <div class="section-header">
+      <div class="header-line"></div>
+      <h3 class="section-title">{{$t('common.qitakechengtuijian')}}</h3>
     </div>
-    <div v-for="item in list" :key="item.courseId" class="flex-between mt20 cursor-pointer"
-      @click="goDetail(item)"
-    >
-      <img :src="item.coverImageUrl" alt="" style="width: 160px; height: 90px;" class="border_radius_8">
-      <div class="ml10 flex_1">
-        <div class="font_size16 bold line1">{{ item.courseTitle }}</div>
-         <el-button type="primary" size="mini" plain class="mt5" v-if="item.skillTagName">{{item.skillTagName}}</el-button>
-        <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
+    
+    <div class="course-list">
+      <div 
+        v-for="item in list" 
+        :key="item.courseId" 
+        class="course-card"
+        @click="goDetail(item)"
+      >
+        <div class="course-image-wrapper">
+          <img :src="item.coverImageUrl" alt="" class="course-image">
+          <div class="image-overlay"></div>
+        </div>
+        
+        <div class="course-content">
+          <h4 class="course-title">{{ item.courseTitle }}</h4>
+          
+          <div class="course-meta">
+            <el-tag 
+              type="primary" 
+              size="small" 
+              class="skill-tag"
+              v-if="item.skillTagName"
+            >
+              {{item.skillTagName}}
+            </el-tag>
+            
+            <div class="view-count">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="eye-icon">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                <circle cx="12" cy="12" r="3"/>
+              </svg>
+              <span>{{ item.viewCount }} {{ $t('common.renkanguo') }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    <div v-if="list.length === 0" >
-      <el-empty :image-size="200" />
+    
+    <div v-if="list.length === 0" class="empty-state">
+      <el-empty :image-size="120" :description="$t('common.noData')" />
     </div>
   </div>
 </template>
@@ -72,6 +100,264 @@ const goDetail = (item) => {
   })
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+.other-course {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+    
+    .header-line {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
+      border-radius: 2px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+  }
+  
+  .course-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .course-card {
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    background: rgba(249, 250, 251, 0.8);
+    border: 1px solid rgba(229, 231, 235, 0.6);
+    border-radius: 16px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 
+        0 12px 28px rgba(79, 70, 229, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9);
+      border-color: rgba(79, 70, 229, 0.3);
+      
+      &::before {
+        opacity: 1;
+      }
+      
+      .course-image-wrapper {
+        .image-overlay {
+          opacity: 0.15;
+        }
+      }
+      
+      .course-title {
+        color: #4f46e5;
+      }
+    }
+    
+    .course-image-wrapper {
+      position: relative;
+      width: 140px;
+      height: 80px;
+      flex-shrink: 0;
+      border-radius: 12px;
+      overflow: hidden;
+      
+      .course-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+      }
+      
+      .image-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, #4f46e5, #7c3aed);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      
+      &:hover .course-image {
+        transform: scale(1.05);
+      }
+    }
+    
+    .course-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      min-width: 0;
+      
+      .course-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #374151;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        transition: color 0.3s ease;
+      }
+      
+      .course-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        
+        .skill-tag {
+          font-size: 11px;
+          font-weight: 500;
+          border-radius: 6px;
+          padding: 4px 10px;
+          background: rgba(79, 70, 229, 0.1);
+          border-color: rgba(79, 70, 229, 0.2);
+          color: #4f46e5;
+        }
+        
+        .view-count {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 12px;
+          color: #9ca3af;
+          
+          .eye-icon {
+            width: 14px;
+            height: 14px;
+            stroke: #9ca3af;
+          }
+        }
+      }
+    }
+  }
+  
+  .empty-state {
+    padding: 40px 20px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .other-course {
+    padding: 20px;
+    border-radius: 16px;
+    
+    .section-header {
+      margin-bottom: 20px;
+      
+      .header-line {
+        height: 20px;
+      }
+      
+      .section-title {
+        font-size: 16px;
+      }
+    }
+    
+    .course-list {
+      gap: 12px;
+    }
+    
+    .course-card {
+      padding: 14px;
+      gap: 14px;
+      
+      .course-image-wrapper {
+        width: 120px;
+        height: 68px;
+        border-radius: 10px;
+      }
+      
+      .course-content {
+        .course-title {
+          font-size: 14px;
+        }
+        
+        .course-meta {
+          flex-wrap: wrap;
+          gap: 8px;
+          
+          .skill-tag {
+            font-size: 10px;
+            padding: 3px 8px;
+          }
+          
+          .view-count {
+            font-size: 11px;
+            
+            .eye-icon {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 
+@media (max-width: 480px) {
+  .other-course {
+    padding: 16px;
+    border-radius: 14px;
+    
+    .course-card {
+      flex-direction: column;
+      padding: 12px;
+      
+      .course-image-wrapper {
+        width: 100%;
+        height: 160px;
+      }
+      
+      .course-content {
+        .course-meta {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/LearningSystem/components/pinglun.vue

@@ -1,44 +1,86 @@
 <template>
-  <div class="pinglun">
-    <div class="font_size18 bold">{{$t('common.pinglun')}} ({{listTotal}})</div>
-    <div class="gap20 mt20 mb10">
-      <el-avatar :size="32" :src="appStore.avatarDefault" />
-      <div class="page-add flex_1">
-        <div class="flex-between">
-          <el-input type="textarea" v-model="comments" placeholder="请输入"  
-          :rows="1"
-          autosize
-          show-word-limit
-          maxlength="500" style="width: 100%;flex:1;"/>
-          <el-button type="primary" size="large" 
-          :loading="isSubmiting"
-          @click="handleSend" style="height:44px" class="gradient">
-          {{$t('common.send')}}
+  <div class="comment-section">
+    <div class="section-header">
+      <div class="header-line"></div>
+      <h3 class="section-title">{{$t('common.pinglun')}} <span class="comment-count">({{listTotal}})</span></h3>
+    </div>
+    
+    <div class="comment-input-area">
+      <div class="avatar-wrapper">
+        <el-avatar :size="40" :src="appStore.avatarDefault" class="user-avatar" />
+      </div>
+      
+      <div class="input-container">
+        <div class="input-wrapper">
+          <el-input 
+            type="textarea" 
+            v-model="comments" 
+            :placeholder="$t('common.pleaseInputCommentContent')"  
+            :rows="2"
+            autosize
+            show-word-limit
+            maxlength="500" 
+            class="comment-input"
+            resize="none"
+          />
+          <el-button 
+            type="primary" 
+            :loading="isSubmiting"
+            @click="handleSend" 
+            class="submit-btn gradient"
+          >
+            <span v-if="!isSubmiting">{{$t('common.send')}}</span>
+            <span v-else>{{$t('common.sending')}}</span>
           </el-button>
         </div>
       </div>
     </div>
-    <div class="list">
-      <div class="flex-between font_size16 list_item" 
-      v-for="(item, index) in list" :key="index">
-        <el-avatar :size="32" :src="item.userAvatar || appStore.avatarDefault" />
-        <div class="ml20 flex_1">
-          <div class="flex-between">
-            <div class="bold font_size14">{{item.nickName}}</div>
-            <div class="gray font_size12">{{item.createTime}}</div>
+    
+    <div class="comment-list">
+      <div 
+        class="comment-item" 
+        v-for="(item, index) in list" 
+        :key="index"
+      >
+        <div class="avatar-wrapper">
+          <el-avatar :size="40" :src="item.userAvatar || appStore.avatarDefault" class="user-avatar" />
+        </div>
+        
+        <div class="comment-content">
+          <div class="comment-header">
+            <span class="username">{{item.nickName}}</span>
+            <span class="comment-time">{{item.createTime}}</span>
           </div>
-          <div class="gray mt5 line_height22 content_pinglun">
+          
+          <div class="comment-text">
             {{item.content}}
           </div>
+          
+          <!-- <div class="comment-actions">
+            <button class="action-btn like-btn">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
+                <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
+              </svg>
+            </button>
+            
+            <button class="action-btn reply-btn">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+            </button>
+          </div> -->
         </div>
       </div>
     </div>
-    <Pagination 
-      :total="listTotal"
-      :page-size="searchFom.pageSize"
-      :current-page="searchFom.pageNum"
-      @page-change="handlePageChange"
-    />
+    
+    <div class="pagination-wrapper">
+      <Pagination 
+        :total="listTotal"
+        :page-size="searchFom.pageSize"
+        :current-page="searchFom.pageNum"
+        @page-change="handlePageChange"
+      />
+    </div>
   </div>
 </template>
 <script setup>
@@ -130,29 +172,456 @@ const handleSend = async () => {
 
 </script>
 <style lang="scss">
-  .pinglun{
-    .el-textarea{
-      .el-textarea__inner{
-        min-height: 22px !important;
-        padding: 11px 10px;
-      }
-    }
-    .list{
-      // max-height: 100vh;
-      overflow: auto;
-    }
-    .list_item{
-      cursor: pointer;
-      padding: 15px 0;
-      .content_pinglun{
-        word-break: break-all;
+.comment-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+    
+    .header-line {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
+      border-radius: 2px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+      letter-spacing: -0.02em;
+      
+      .comment-count {
+        font-size: 16px;
+        color: #6b7280;
+        font-weight: 500;
+      }
+    }
+  }
+  
+  .comment-input-area {
+    display: flex;
+    gap: 14px;
+    margin-bottom: 28px;
+    padding: 18px;
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
+    border: 1px solid rgba(79, 70, 229, 0.08);
+    border-radius: 16px;
+    transition: all 0.3s ease;
+    
+    &:focus-within {
+      border-color: rgba(79, 70, 229, 0.25);
+      box-shadow: 
+        0 4px 20px rgba(79, 70, 229, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    }
+    
+    .avatar-wrapper {
+      flex-shrink: 0;
+      
+      .user-avatar {
+        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
+        border: 2px solid rgba(255, 255, 255, 0.9);
+      }
+    }
+    
+    .input-container {
+      flex: 1;
+      min-width: 0;
+      
+      .input-wrapper {
+        display: flex;
+        gap: 12px;
+        align-items: flex-end;
+        
+        .comment-input {
+          flex: 1;
+          
+          :deep(.el-textarea__inner) {
+            min-height: 44px !important;
+            max-height: 120px;
+            padding: 12px 16px;
+            border: 1px solid #e5e7eb;
+            border-radius: 10px;
+            font-size: 14px;
+            line-height: 1.6;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.95);
+            
+            &::placeholder {
+              color: #9ca3af;
+            }
+            
+            &:hover {
+              border-color: #d1d5db;
+            }
+            
+            &:focus {
+              border-color: #4f46e5;
+              box-shadow: 
+                0 0 0 3px rgba(79, 70, 229, 0.1),
+                0 2px 8px rgba(79, 70, 229, 0.08);
+            }
+          }
+          
+          :deep(.el-textarea__inner:focus) {
+            outline: none;
+          }
+        }
+        
+        .submit-btn {
+          height: 44px;
+          padding: 0 24px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 14px;
+          letter-spacing: 0.02em;
+          white-space: nowrap;
+          flex-shrink: 0;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          background: linear-gradient(135deg, #4f46e5, #7c3aed);
+          border: none;
+          box-shadow: 
+            0 4px 12px rgba(79, 70, 229, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.2);
+          
+          &:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 
+              0 8px 20px rgba(79, 70, 229, 0.4),
+              inset 0 1px 0 rgba(255, 255, 255, 0.3);
+          }
+          
+          &:active:not(:disabled) {
+            transform: translateY(0);
+          }
+          
+          &:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+  
+  .comment-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: 500px;
+    overflow-y: auto;
+    padding-right: 4px;
+    
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(79, 70, 229, 0.15);
+      border-radius: 3px;
+      
+      &:hover {
+        background: rgba(79, 70, 229, 0.25);
+      }
+    }
+  }
+  
+  .comment-item {
+    display: flex;
+    gap: 14px;
+    padding: 18px;
+    background: rgba(249, 250, 251, 0.6);
+    border: 1px solid rgba(229, 231, 235, 0.5);
+    border-radius: 14px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    
+    &:hover {
+      background: rgba(249, 250, 251, 0.9);
+      border-color: rgba(79, 70, 229, 0.15);
+      box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
+      transform: translateX(4px);
+      
+      .comment-content {
+        .username {
+          color: #4f46e5;
+        }
+      }
+    }
+    
+    .avatar-wrapper {
+      flex-shrink: 0;
+      
+      .user-avatar {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        border: 2px solid rgba(255, 255, 255, 0.9);
+      }
+    }
+    
+    .comment-content {
+      flex: 1;
+      min-width: 0;
+      
+      .comment-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        gap: 12px;
+        
+        .username {
+          font-size: 15px;
+          font-weight: 600;
+          color: #374151;
+          transition: color 0.3s ease;
+        }
+        
+        .comment-time {
+          font-size: 12px;
+          color: #9ca3af;
+          white-space: nowrap;
+        }
+      }
+      
+      .comment-text {
+        font-size: 14px;
+        line-height: 1.7;
+        color: #4b5563;
+        word-break: break-word;
+        margin-bottom: 12px;
         display: -webkit-box;
-        // -webkit-line-clamp: 3;
+        -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         overflow: hidden;
       }
+      
+      .comment-actions {
+        display: flex;
+        gap: 12px;
+        
+        .action-btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+          padding: 0;
+          
+          .action-icon {
+            width: 16px;
+            height: 16px;
+            stroke: #9ca3af;
+            transition: all 0.3s ease;
+          }
+          
+          &:hover {
+            background: rgba(79, 70, 229, 0.08);
+            
+            .action-icon {
+              stroke: #4f46e5;
+              transform: scale(1.1);
+            }
+          }
+          
+          &.like-btn:hover .action-icon {
+            stroke: #ef4444;
+          }
+          
+          &.reply-btn:hover .action-icon {
+            stroke: #4f46e5;
+          }
+        }
+      }
     }
+  }
+  
+  .pagination-wrapper {
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(229, 231, 235, 0.6);
+  }
+}
 
+@media (max-width: 768px) {
+  .comment-section {
+    padding: 20px;
+    border-radius: 16px;
+    
+    .section-header {
+      margin-bottom: 20px;
+      
+      .header-line {
+        height: 20px;
+      }
+      
+      .section-title {
+        font-size: 16px;
+        
+        .comment-count {
+          font-size: 14px;
+        }
+      }
+    }
+    
+    .comment-input-area {
+      padding: 14px;
+      gap: 12px;
+      margin-bottom: 24px;
+      border-radius: 14px;
+      
+      .avatar-wrapper {
+        .user-avatar {
+          :deep(.el-avatar) {
+            width: 36px !important;
+            height: 36px !important;
+          }
+        }
+      }
+      
+      .input-container {
+        .input-wrapper {
+          flex-direction: column;
+          gap: 10px;
+          align-items: stretch;
+          
+          .submit-btn {
+            width: 100%;
+            height: 40px;
+          }
+        }
+      }
+    }
+    
+    .comment-list {
+      gap: 12px;
+      max-height: 400px;
+    }
+    
+    .comment-item {
+      padding: 14px;
+      gap: 12px;
+      border-radius: 12px;
+      
+      .avatar-wrapper {
+        .user-avatar {
+          :deep(.el-avatar) {
+            width: 36px !important;
+            height: 36px !important;
+          }
+        }
+      }
+      
+      .comment-content {
+        .comment-header {
+          .username {
+            font-size: 14px;
+          }
+          
+          .comment-time {
+            font-size: 11px;
+          }
+        }
+        
+        .comment-text {
+          font-size: 13px;
+          line-height: 1.6;
+        }
+        
+        .comment-actions {
+          gap: 10px;
+          
+          .action-btn {
+            width: 30px;
+            height: 30px;
+            
+            .action-icon {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+    }
+    
+    .pagination-wrapper {
+      margin-top: 20px;
+      padding-top: 16px;
+    }
   }
+}
 
+@media (max-width: 480px) {
+  .comment-section {
+    padding: 16px;
+    border-radius: 14px;
+    
+    .section-header {
+      margin-bottom: 16px;
+      
+      .section-title {
+        font-size: 15px;
+      }
+    }
+    
+    .comment-input-area {
+      padding: 12px;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      
+      .avatar-wrapper {
+        margin-bottom: 8px;
+      }
+      
+      .input-container {
+        width: 100%;
+      }
+    }
+    
+    .comment-item {
+      flex-direction: column;
+      padding: 12px;
+      
+      .avatar-wrapper {
+        align-self: flex-start;
+      }
+      
+      .comment-content {
+        .comment-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 4px;
+        }
+        
+        .comment-text {
+          -webkit-line-clamp: 3;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/LearningSystem/components/xuxibiji.vue

@@ -1,40 +1,77 @@
 <template>
-  <div class="xuxibiji">
-    <div class="gap10">
-      <div class="line_vertical"></div>
-      <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
+  <div class="note-section">
+    <div class="section-header">
+      <div class="header-line"></div>
+      <h3 class="section-title">{{$t('common.xuxibiji')}}</h3>
     </div>
-    <div class="addBtn flex-center gradient border_radius_10" @click="openAddDialog" v-if="info.courseId">
-      <div class="gap10">
-        <img :src="addIcon" alt="" style="width:30px;height:30px">
-        <span class="font_size18">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
+    
+    <div 
+      class="add-note-btn gradient" 
+      @click="openAddDialog" 
+      v-if="info.courseId"
+    >
+      <div class="btn-content">
+        <img :src="addIcon" alt="" class="add-icon">
+        <span class="btn-text">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
       </div>
+      <div class="btn-glow"></div>
     </div>
-    <div class="list_item padding16 border_radius_16 mt16 flex-center-between" 
-    v-for="(item, index) in list" :key="index">
-      <div class="flex_1">
-        <div class="bold font_size18">{{item.noteTitle}}</div>
-        <div class="gray999 mt5">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</div>
-      </div>
-      <div>
-        <el-button type="primary" plain size="large" 
-        :loading="isSubmiting"
-        @click="openAddDialog(item)">
-          <el-icon><EditPen /></el-icon>
-          <span class="ml10">{{$t('common.edit')}}</span>
-        </el-button>
-        <el-button type="danger" plain size="large" @click="handleDelete(item)">
-          <el-icon><Delete /></el-icon>
-          <span class="ml10">{{$t('common.delete')}}</span>
-        </el-button>
+    
+    <div class="note-list">
+      <div 
+        class="note-item" 
+        v-for="(item, index) in list" 
+        :key="index"
+      >
+        <div class="note-info">
+          <h4 class="note-title">{{item.noteTitle}}</h4>
+          <div class="note-meta">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="time-icon">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12 6 12 12 16 14"/>
+            </svg>
+            <span class="update-time">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</span>
+          </div>
+        </div>
+        
+        <div class="note-actions">
+          <el-button 
+            type="primary" 
+            plain 
+            size="large" 
+            :loading="isSubmiting"
+            @click="openAddDialog(item)"
+            class="action-btn edit-btn"
+          >
+            <el-icon><EditPen /></el-icon>
+            <span class="btn-label">{{$t('common.edit')}}</span>
+          </el-button>
+          
+          <el-button 
+            type="danger" 
+            plain 
+            size="large" 
+            @click="handleDelete(item)"
+            class="action-btn delete-btn"
+          >
+            <el-icon><Delete /></el-icon>
+            <span class="btn-label">{{$t('common.delete')}}</span>
+          </el-button>
+        </div>
+        
+        <!-- <div class="note-indicator"></div> -->
       </div>
     </div>
-    <Pagination 
-      :total="listTotal"
-      :page-size="searchFom.pageSize"
-      :current-page="searchFom.pageNum"
-      @page-change="handlePageChange"
-    />
+    
+    <div class="pagination-wrapper">
+      <Pagination 
+        :total="listTotal"
+        :page-size="searchFom.pageSize"
+        :current-page="searchFom.pageNum"
+        @page-change="handlePageChange"
+      />
+    </div>
+    
     <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" @submit="submit"/>
   </div>
 </template>
@@ -99,10 +136,10 @@ const getList = async (type) => {
     searchFom.pageNum = 1
   }
   // 打开loading
-  const loading = openFullScreenLoading();
+  // const loading = openFullScreenLoading();
   const res = await getnoteList(searchFom)
   // 关闭loading
-  loading.close();
+  // loading.close();
   if(res.code === 200){
     listTotal.value = res.total
     list.value = res.rows
@@ -162,17 +199,465 @@ const handleDelete = (item) => {
 
 </script>
 <style scoped lang="scss">
-  .xuxibiji{
-    .list_item{
-      background: #F5F7FA;
+.note-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 
+    0 8px 32px rgba(79, 70, 229, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+    
+    .header-line {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
+      border-radius: 2px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
     }
-    .addBtn{
-      cursor: pointer;
-      margin-top: 20px;
-      padding: 10px 20px;
-      color: #fff;
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+  }
+  
+  .add-note-btn {
+    position: relative;
+    cursor: pointer;
+    margin-top: 8px;
+    margin-bottom: 24px;
+    padding: 14px 28px;
+    color: #fff;
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    box-shadow: 
+      0 4px 16px rgba(79, 70, 229, 0.35),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    
+    &:hover {
+      transform: translateY(-3px) scale(1.02);
+      box-shadow: 
+        0 12px 32px rgba(79, 70, 229, 0.45),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3);
+      
+      .btn-glow {
+        opacity: 1;
+        animation: glow-pulse 2s ease-in-out infinite;
+      }
+      
+      .add-icon {
+        transform: rotate(90deg) scale(1.1);
+      }
+    }
+    
+    &:active {
+      transform: translateY(-1px) scale(1);
+    }
+    
+    .btn-content {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      
+      .add-icon {
+        width: 26px;
+        height: 26px;
+        filter: brightness(0) invert(1);
+        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+      }
+      
+      .btn-text {
+        font-size: 16px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+      }
+    }
+    
+    .btn-glow {
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      right: -50%;
+      bottom: -50%;
+      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.25), transparent 60%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      pointer-events: none;
+    }
+  }
+  
+  @keyframes glow-pulse {
+    0%, 100% {
+      opacity: 0.6;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+  }
+  
+  .note-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  
+  .note-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, rgba(249, 250, 251, 0.95), rgba(243, 244, 246, 0.95));
+    border: 1px solid rgba(229, 231, 235, 0.6);
+    border-radius: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    // &::before {
+    //   content: '';
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
+    //   opacity: 0;
+    //   transition: opacity 0.3s ease;
+    // }
+    
+    &:hover {
+      transform: translateY(-2px) translateX(4px);
+      box-shadow: 
+        0 12px 28px rgba(79, 70, 229, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9);
+      border-color: rgba(79, 70, 229, 0.2);
+      
+      &::before {
+        opacity: 1;
+      }
+      
+      .note-info {
+        .note-title {
+          color: #4f46e5;
+          transform: translateX(4px);
+        }
+        
+        // .time-icon {
+        //   stroke: #4f46e5;
+        //   transform: rotate(360deg);
+        // }
+      }
+      
+      .note-indicator {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+    
+    .note-info {
+      flex: 1;
+      min-width: 0;
+      transition: all 0.3s ease;
+      
+      .note-title {
+        font-size: 16px;
+        font-weight: 700;
+        color: #1f2937;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      .note-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        
+        .time-icon {
+          width: 14px;
+          height: 14px;
+          stroke: #9ca3af;
+          flex-shrink: 0;
+          transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+        }
+        
+        .update-time {
+          font-size: 13px;
+          color: #9ca3af;
+          font-weight: 400;
+        }
+      }
+    }
+    
+    .note-actions {
+      display: flex;
+      gap: 10px;
+      flex-shrink: 0;
+      
+      .action-btn {
+        padding: 8px 16px;
+        border-radius: 10px;
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border-width: 1.5px;
+        
+        .el-icon {
+          margin-right: 0;
+          transition: all 0.3s ease;
+        }
+        
+        .btn-label {
+          margin-left: 6px;
+        }
+        
+        &.edit-btn {
+          background: rgba(79, 70, 229, 0.08);
+          border-color: rgba(79, 70, 229, 0.25);
+          color: #4f46e5;
+          
+          &:hover:not(:disabled) {
+            background: rgba(79, 70, 229, 0.15);
+            border-color: rgba(79, 70, 229, 0.4);
+            color: #4338ca;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
+            
+            // .el-icon {
+            //   transform: rotate(-180deg);
+            //   color: #4338ca;
+            // }
+          }
+          
+          &:active:not(:disabled) {
+            transform: translateY(0);
+          }
+          
+          &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+          }
+        }
+        
+        &.delete-btn {
+          background: rgba(239, 68, 68, 0.06);
+          border-color: rgba(239, 68, 68, 0.2);
+          color: #ef4444;
+          
+          &:hover:not(:disabled) {
+            background: rgba(239, 68, 68, 0.12);
+            border-color: rgba(239, 68, 68, 0.35);
+            color: #dc2626;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
+            
+            // .el-icon {
+            //   transform: rotate(-180deg);
+            //   color: #dc2626;
+            // }
+          }
+          
+          &:active:not(:disabled) {
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+    
+    .note-indicator {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%) scaleY(0);
+      width: 4px;
+      height: 60%;
+      background: linear-gradient(180deg, #4f46e5, #7c3aed);
+      border-radius: 0 3px 3px 0;
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
+  }
+  
+  .pagination-wrapper {
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(229, 231, 235, 0.6);
+  }
+}
 
+@media (max-width: 768px) {
+  .note-section {
+    padding: 20px;
+    border-radius: 16px;
+    
+    .section-header {
+      margin-bottom: 20px;
+      
+      .header-line {
+        height: 20px;
+      }
+      
+      .section-title {
+        font-size: 16px;
+      }
+    }
+    
+    .add-note-btn {
+      margin-bottom: 20px;
+      padding: 12px 24px;
+      border-radius: 10px;
+      
+      .btn-content {
+        .add-icon {
+          width: 24px;
+          height: 24px;
+        }
+        
+        .btn-text {
+          font-size: 15px;
+        }
+      }
+    }
+    
+    .note-list {
+      gap: 12px;
+    }
+    
+    .note-item {
+      padding: 16px 18px;
+      gap: 14px;
+      border-radius: 14px;
+      flex-direction: column;
+      align-items: stretch;
+      
+      .note-info {
+        .note-title {
+          font-size: 15px;
+        }
+        
+        .note-meta {
+          .time-icon {
+            width: 13px;
+            height: 13px;
+          }
+          
+          .update-time {
+            font-size: 12px;
+          }
+        }
+      }
+      
+      .note-actions {
+        justify-content: flex-start;
+        
+        .action-btn {
+          padding: 7px 14px;
+          font-size: 12px;
+          
+          .btn-label {
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    
+    .pagination-wrapper {
+      margin-top: 20px;
+      padding-top: 16px;
+    }
   }
+}
 
+@media (max-width: 480px) {
+  .note-section {
+    padding: 16px;
+    border-radius: 14px;
+    
+    .section-header {
+      margin-bottom: 16px;
+      
+      .section-title {
+        font-size: 15px;
+      }
+    }
+    
+    .add-note-btn {
+      margin-bottom: 16px;
+      padding: 11px 20px;
+      border-radius: 10px;
+      width: 100%;
+      justify-content: center;
+      
+      .btn-content {
+        .add-icon {
+          width: 22px;
+          height: 22px;
+        }
+        
+        .btn-text {
+          font-size: 14px;
+        }
+      }
+    }
+    
+    .note-list {
+      gap: 10px;
+    }
+    
+    .note-item {
+      padding: 14px 16px;
+      border-radius: 12px;
+      
+      .note-info {
+        .note-title {
+          font-size: 14px;
+        }
+        
+        .note-meta {
+          .update-time {
+            font-size: 11px;
+          }
+        }
+      }
+      
+      .note-actions {
+        flex-direction: column;
+        gap: 8px;
+        
+        .action-btn {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    }
+    
+    .pagination-wrapper {
+      margin-top: 16px;
+      padding-top: 14px;
+    }
+  }
+}
 </style>