学生端选课进课闭环

Html/apps/static/css/desktop.css

@@ -1,9 +1,11 @@
 
+
         /* 左右两侧的页面内容 */
         .sidebar {
             background-color: #f0f0f0;
-            padding: 20px;
             height: 100%;
+            display: flex;
+            flex-direction: column; /* 使子元素垂直排列 */
         }
 
         body {
@@ -16,7 +18,8 @@
         .chatbox {
             flex-grow: 1;
             padding: 20px;
-            height: 75%;
+            width: 100%;
+            flex: 1;
             overflow-y: auto;
             border: 1px solid #ccc;
             background-color: #f9f9f9;
@@ -69,14 +72,7 @@
             height: 100%;
             position: relative;
         }
-        /* 中间的拖拽条 */
-        .resizer {
-            width: 5px;
-            background-color: #ccc;
-            cursor: ew-resize;
-            position: relative;
-        }
-        
+
         .chatbox-header {
             padding: 10px;
             background-color: #f1f1f1;
@@ -110,19 +106,16 @@
             padding: 5px 10px;
         }
         #leftSidebar, .vscode-web, #rightSidebar {
-            height: 100vh;
+            height: 100%;
             overflow: auto;
           }
         
-        #dragbar, #dragbar2 {
-          background-color: #ccc;
-          cursor: col-resize;
-        }
+
           /* 主容器，使用 grid 布局 */
         #maxcontainer {
             display: grid;
             grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 默认宽度比例 */
-            height: 100vh;
+            height: 100%;
         }
         
         /* 各区域基础样式 */
@@ -133,22 +126,24 @@
         .vscode-web {
             width: 100%;
             height: 100%;
-            border: none;
         }
         
+
         .resizer {
             background-color: #ccc;
             cursor: col-resize;
-            width: 5px; /* 设置拖动条宽度 */
+            width: 5px; 
         }
-                
+        
+
+        
         .gutter {
             background-color: #ccc; /* 分隔条颜色 */
             cursor: col-resize;
         }#container {
             display: grid;
             grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 初始比例 */
-            height: 100vh;
+            height: 100%;
           }
           
           #leftSidebar, #vscodeWeb, #rightSidebar {
@@ -174,13 +169,18 @@
 }
 
 .progress-title {
-    height: 60px;  /* 每个进度节点的高度 */
+    height: 60px;
     text-align: center;
-    line-height: 60px;  /* 垂直居中 */
-    margin: 2px;  /* 水平方向上的间隔 */
+    line-height: 60px;
+    margin-right: 2px;
     border: 1px solid #ddd;
     transition: background-color 0.3s ease;
     position: relative;
+    
+    /* 新增以下属性实现文字溢出省略 */
+    white-space: nowrap;  /* 防止文字换行 */
+    overflow: hidden;     /* 隐藏溢出内容 */
+    text-overflow: ellipsis;  /* 溢出部分显示为省略号 */
 }
 
 
@@ -295,4 +295,42 @@
 }
 .toggle-button .icon {
     font-size: 20px;
-}
+}
+
+
+
+
+
+
+
+
+
+
+
+/* 设置滚动条的宽度、颜色等 */
+-webkit-scrollbar {
+    width: 8px; /* 初始滚动条宽度 */
+    height: 8px; /* 水平滚动条宽度 */
+}
+
+/* 设置滚动条轨道的颜色 */
+-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+/* 设置滚动条滑块的颜色 */
+-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+/* 当鼠标悬停在滚动条上时，改变其宽度和颜色 */
+-webkit-scrollbar:hover {
+    width: 12px; /* 鼠标悬停时变粗 */
+    height: 12px;
+}
+
+/* 滚动条滑块的颜色变化 */
+-webkit-scrollbar-thumb:hover {
+    background: #555; /* 鼠标悬停时变暗 */
+}