Bladeren bron

优化宽益堂在移动端“看课记录查询”功能中日期选择组件的展示样式。

cgp 18 uur geleden
bovenliggende
commit
5f4c46afef
2 gewijzigde bestanden met toevoegingen van 57 en 0 verwijderingen
  1. 28 0
      src/views/course/courseWatchLog/index.vue
  2. 29 0
      src/views/course/courseWatchLog/watchLog.vue

+ 28 - 0
src/views/course/courseWatchLog/index.vue

@@ -1802,6 +1802,34 @@ export default {
   }
 };
 </script>
+<style>
+/** 移动端展示 **/
+@media screen and (max-width: 500px) {
+  .el-picker-panel__sidebar {
+    width: 100%;
+  }
+  .el-picker-panel {
+    width: 400px!important;
+  }
+  .el-picker-panel__content {
+    width: 100%;
+  }
+  .el-picker-panel__body{
+    margin-left: 0!important;
+    display: flex;
+    flex-direction: column;
+    min-width: auto!important;
+  }
+  .el-picker-panel__sidebar {
+    position: relative;
+  }
+  .el-picker-panel__body-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>
 <style scoped>
 /* CSS 样式 */
 .tag-container {

+ 29 - 0
src/views/course/courseWatchLog/watchLog.vue

@@ -1913,3 +1913,32 @@ export default {
   color: #66b1ff; /* 悬停时的颜色 */
 }
 </style>
+
+<style>
+/** 移动端展示 **/
+@media screen and (max-width: 500px) {
+  .el-picker-panel__sidebar {
+    width: 100%;
+  }
+  .el-picker-panel {
+    width: 400px!important;
+  }
+  .el-picker-panel__content {
+    width: 100%;
+  }
+  .el-picker-panel__body{
+    margin-left: 0!important;
+    display: flex;
+    flex-direction: column;
+    min-width: auto!important;
+  }
+  .el-picker-panel__sidebar {
+    position: relative;
+  }
+  .el-picker-panel__body-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>