fix:新员工项目学习页面移动端样式调整

src/views/new-employee/StudyPage.vue

@@ -451,7 +451,9 @@ export default {
 }
 
 .content {
+  box-sizing: border-box;
   max-width: 1200px;
+  width: 100%;
   margin: 16px auto 40px;
   padding: 0 16px;
   display: flex;
@@ -459,6 +461,7 @@ export default {
 }
 .main {
   flex: 1;
+  min-width: 0;
 }
 .sidebar {
   width: 360px;
@@ -480,12 +483,14 @@ export default {
   background: #ffffff;
   border-radius: 8px 8px 0 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-  width: 68%;
+  width: 100%;
+  box-sizing: border-box;
 }
 .filter-group {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
 .label {
   color: #333333;
@@ -584,6 +589,8 @@ export default {
   display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
+  flex-wrap: wrap;
 }
 .progress {
   position: relative;
@@ -592,6 +599,7 @@ export default {
   background: #eff2f6;
   border-radius: 4px;
   overflow: hidden;
+  min-width: 0;
 }
 .bar {
   position: absolute;
@@ -846,6 +854,7 @@ export default {
   .sidebar {
     width: 100%;
     margin-top: 0;
+    order: -1;
   }
   .filters {
     width: 100%;
@@ -884,7 +893,8 @@ export default {
     align-items: center;
   }
   .progress {
-    min-width: 180px;
+    min-width: 0;
+    width: 100%;
   }
   .pagination {
     padding: 8px 0 0;
@@ -912,6 +922,19 @@ export default {
     box-shadow: inset 0 0 0 5px #ffffff;
   }
 }
+
+/* 桌面端恢复原布局宽度与不换行 */
+@media (min-width: 769px) {
+  .filters {
+    width: 68%;
+  }
+  .filter-group {
+    flex-wrap: nowrap;
+  }
+  .progress-wrap {
+    flex-wrap: nowrap;
+  }
+}
 </style>
 
 <style lang="scss">