Browse Source

feat:修复时间选择器的问题并做大屏主题适配

liu.shiyi 1 năm trước cách đây
mục cha
commit
842e47fe17

+ 2 - 7
data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue

@@ -62,12 +62,12 @@
         >
           <el-date-picker
             v-model="config.endTime"
-            popper-class="dateClass"
-            :append-to-body="true"
+            popper-class="bs-date-popper-class"
             type="datetime"
             placeholder="请选择结束日期"
             :picker-options="pickerOptions"
             value-format="timestamp"
+            :append-to-body="false"
           />
         </el-form-item>
       </div>
@@ -137,9 +137,4 @@ export default {
 .lc-field-body {
   padding: 12px 16px;
 }
-/deep/.dateClass{
-  .el-time-panel{
-    width: 138px!important;
-  }
-}
 </style>

+ 39 - 1
data-room-ui/packages/assets/style/bsTheme.scss

@@ -160,7 +160,7 @@
     border-color: var(--bs-el-border) !important;
     background-color: var(--bs-el-background-3) !important;
   }
- 
+
   .popper__arrow {
     bottom: 0 !important;
     border-top-color: var(--bs-el-background-1) !important;
@@ -589,3 +589,41 @@
     color: var(--bs-el-title);
   }
 }
+
+//el-date-picker
+.bs-date-popper-class{
+  background-color: var(--bs-background-1) !important;
+  left: -115px!important;
+  .el-picker-panel__footer{
+    background-color: var(--bs-background-1) !important;
+    border-top:1px solid var(--bs-background-2);
+  }
+  .el-date-table td.disabled div{
+    background-color: var(--bs-background-2) !important;
+  }
+  .popper__arrow{
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+  .el-button + .el-button{
+    color: var(--bs-el-text) !important;
+    border-color: var(--bs-el-border) !important;
+    background-color: var(--bs-el-color-primary) !important;
+  }
+  .el-input__inner{
+    border: 1px solid #DCDFE6!important;
+  }
+  .el-time-panel{
+    left: -33px!important;
+    background-color: var(--bs-background-2) !important;
+  }
+  .el-time-spinner__item.active:not(.disabled){
+    color: var(--bs-el-text) !important;
+  }
+  .el-time-panel__btn{
+    color: var(--bs-el-text) !important;
+  }
+  .el-time-panel__btn.confirm{
+    color: var(--bs-el-color-primary) !important;
+  }
+}