fix:移动端样式调整

src/views/new-employee/StudyPage.vue

@@ -824,6 +824,94 @@ export default {
   color: #8a8f99;
   text-align: center;
 }
+
+/* 移动端自适应 */
+@media (max-width: 768px) {
+  .banner {
+    padding-top: 20px;
+  }
+  .banner-inner {
+    padding: 16px 12px 0;
+  }
+  .title {
+    font-size: 18px;
+    line-height: 1.4;
+  }
+  .content {
+    flex-direction: column;
+    gap: 12px;
+    margin: 12px auto 28px;
+    padding: 0 12px;
+  }
+  .sidebar {
+    width: 100%;
+    margin-top: 0;
+  }
+  .filters {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 12px 10px;
+  }
+  .filter-group {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .pill-radios {
+    padding-top: 8px;
+  }
+  .pill-radios >>> .el-radio-button__inner {
+    margin-right: 6px;
+    padding: 6px 10px;
+  }
+  .list-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .list-item img {
+    width: 100%;
+    max-width: 320px;
+  }
+  .title-box {
+    flex-direction: column;
+    gap: 6px;
+  }
+  .item-right {
+    text-align: left;
+  }
+  .progress-wrap {
+    align-items: center;
+  }
+  .progress {
+    min-width: 180px;
+  }
+  .pagination {
+    padding: 8px 0 0;
+  }
+  .profile {
+    padding: 16px 14px;
+  }
+  .avatar {
+    margin-top: -40px;
+  }
+  .progress-circles {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .circle {
+    width: 48%;
+  }
+  .ring {
+    width: 68px;
+    height: 68px;
+  }
+  .ring span {
+    width: 52px;
+    height: 52px;
+    box-shadow: inset 0 0 0 5px #ffffff;
+  }
+}
 </style>
 
 <style lang="scss">