课程大纲滚动条样式

src/components/videopage/DialogComponents.vue

@@ -315,7 +315,6 @@ const sendMessage = async () => {
     } catch (error) {
       console.error('保存AI问答次数失败:', error)
     }
-
     // // 模拟 AI 回复
     // const aiResponse = await simulateAIResponse(prompt.value)
     // messageList.value.push({

src/views/AIGeneralCourse.vue

@@ -27,7 +27,7 @@
           <!-- 菜单栏 -->
           <div class="drawer-box">
             <el-row class="tac">
-              <el-col :span="12">
+              <el-col :span="15">
                 <span class="mb-2">
                   <img :src="teachingImg" alt="教学" />
                   教学大纲
@@ -339,11 +339,27 @@ const goToAIExperience = outlineData => {
   width: rpx(135);
   height: 100%;
   flex-grow: 1;
-  position: relative;
-  background: linear-gradient(to bottom, #001169, #8a78d0);
+background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);  position: relative;
+  
   overflow-y: auto; /* 添加垂直滚动条 */
   max-height: 100%; /* 设置最大高度 */
   transition: all 0.3s ease;
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: rpx(0); // 滚动条宽度
+  }
+  &::-webkit-scrollbar-track {
+    background-color: rgba(255, 255, 255, 0.1); // 滚动条轨道背景色
+    border-radius: rpx(2); // 滚动条轨道圆角
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3); // 滚动条滑块颜色
+    border-radius: rpx(2); // 滚动条滑块圆角
+    transition: background-color 0.3s ease; // 滑块颜色过渡效果
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.5); // 鼠标悬停时的滑块颜色
+  }
 }
 .icon-expand {
   width: rpx(8);
@@ -401,7 +417,7 @@ const goToAIExperience = outlineData => {
 .el-menu-item {
   width: rpx(115);
   // height: rpx(20);
-  margin-bottom: rpx(10);
+  margin-bottom: rpx(5);
   border-radius: rpx(6);
   color: white;
   font-size: rpx(8);
@@ -422,7 +438,8 @@ const goToAIExperience = outlineData => {
 .drawer-box {
   position: absolute;
   display: flex;
-  align-items: center;
+  // align-items: center;
+  margin-top: rpx(30);
   height: 100%;
   width: 100%;
 }
@@ -614,14 +631,27 @@ const goToAIExperience = outlineData => {
 .box-2 {
   width: 100%;
   flex: 1;
-  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
   box-sizing: border-box;
-  // padding: 0 rpx(30); // 添加左右内边距
   display: flex; // 确保子元素水平排列
   flex-wrap: wrap; // 允许子元素换行;
-  align-content: center; // 顶部对齐;
   cursor: pointer; // 添加鼠标指针样式
-  margin-top: rpx(-20);
+  margin: rpx(10) 0; 
+  overflow-y: auto;
+}
+// Chrome、Edge等浏览器的滚动条样式
+.box-2::-webkit-scrollbar {
+  width: rpx(2);
+}
+.box-2::-webkit-scrollbar-track {
+  background: transparent; // 设置滚动条轨道背景
+  border-radius: rpx(3); // 设置滚动条轨道圆角
+}
+.box-2::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
+  border-radius: rpx(3); // 设置滚动条滑块圆角
+}
+.box-2::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
 }
 .small-box {
   flex: 0 0 calc(33.333% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距