Browse Source

feat:添加暗黑样式

AmandaG 11 months ago
parent
commit
886b2e9f61

+ 1 - 1
src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -129,7 +129,7 @@ const placeholder = computed(() => {
     >
       <template #suffixIcon>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_date_b"></use>
           </svg>
         </span>

+ 4 - 0
src/styles/Antdui.scss

@@ -91,4 +91,8 @@
 }
 .ant-picker .ant-picker-clear:hover {
   color: var(--color-neutral-1);
+}
+.ant-picker {
+  background-color: var(--management-bg-bolor);
+  color: var(--color-neutral-1);
 }

+ 4 - 1
src/styles/elementui.scss

@@ -353,7 +353,7 @@ div .el-select__placeholder.is-transparent {
   }
 }
 div.el-input__wrapper {
-  box-shadow: 0 0 0 1px var(--color-border) inset;
+  box-shadow: 0 0 0 1px var(--border-color-1) inset;
   padding-left: 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
@@ -732,4 +732,7 @@ div label.smile_radio .el-radio__inner {
 }
 div .el-radio__inner:hover {
   border-color: var(--color-theme);
+}
+div .dash_popver {
+  background-color: var(--management-bg-bolor) !important;
 }

+ 17 - 7
src/views/Dashboard/src/components/DashFiters.vue

@@ -182,7 +182,7 @@ const DateRangeSearch = () => {
           </span>
           Filters
           <span class="iconfont_icon">
-            <svg class="iconfont" aria-hidden="true">
+            <svg class="iconfont icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
@@ -283,7 +283,7 @@ const DateRangeSearch = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   margin-bottom: 8px;
 }
 :deep(.el-checkbox-button__inner:hover) {
@@ -292,10 +292,10 @@ const DateRangeSearch = () => {
   border-color: var(--color-btn-default-bg-hover);
 }
 :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-  border-color: var(--color-border);
+  border-color: var(--border-color-1);
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-1);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -315,13 +315,19 @@ const DateRangeSearch = () => {
 }
 :deep(.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner) {
   background-color: #eaebed;
-  border-color: var(--color-border);
+  border-color: var(--border-color-1);
   color: #2b2f36;
   font-weight: 700;
 }
 // :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-//   border-color: var(--color-border);
+//   border-color: var(--border-color-1);
 // }
+:deep(.el-radio-button__original-radio:disabled + .el-radio-button__inner) {
+  border-color: var(--border-color-1);
+}
+:deep(.el-checkbox-button.is-disabled .el-checkbox-button__inner) {
+  border-color: var(--border-color-1);
+}
 .Dash_title {
   height: 48px;
   font-size: 16px;
@@ -345,7 +351,7 @@ const DateRangeSearch = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color-1);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -369,6 +375,7 @@ const DateRangeSearch = () => {
   height: 40px;
   display: flex;
   align-items: center;
+  border-color: var(--border-color-1);
 }
 :deep(
     .el-radio-button.is-active
@@ -378,15 +385,18 @@ const DateRangeSearch = () => {
   height: 40px;
   display: flex;
   align-items: center;
+  border-color: var(--border-color-1);
 }
 :deep(.el-radio-button:first-child .el-radio-button__inner) {
   height: 40px;
   display: flex;
+  border-color: var(--border-color-1);
   align-items: center;
 }
 :deep(.el-radio-button__inner) {
   display: flex;
   align-items: center;
   height: 40px;
+  border-color: var(--border-color-1);
 }
 </style>