commit

src/assets/styles/mixin.less

@@ -746,60 +746,140 @@
 
 }
 
-// 弹窗表格样式
-// .dialogTable {
-//     .ant-table {
-//         width: 100%;
-//         table {
-//             border: 0;
-//         }
-//         .ant-table-thead {
-//             tr {
-//                 box-shadow: 0px 1px 0px 0px #2E3539;
-//                 th {
-//                     line-height: 34px;
-//                     background: @m-black8;
-//                     padding-top: 0;
-//                     padding-bottom: 0;
-//                     color: @m-grey17;
-//                     font-size: 14px;
-//                     border-right: 1px solid @m-black9;
-//                     border-bottom: 1px solid @m-black9;
-//                     white-space: nowrap;
-//                     text-overflow: ellipsis;
-//                     overflow: hidden;
-//                 }
-//             }
-//         }
-//         .ant-table-tbody {
-//             tr {
-//                 td {
-//                     height: 34px;
-//                     line-height: 34px;
-//                     padding: 0 8px;
-//                     border-right: 1px solid @m-black9;
-//                     border-bottom: 1px solid @m-black9;
-//                     font-size: 16px;
-//                     color: @m-white1;
-//                     white-space: nowrap;
-//                     text-overflow: ellipsis;
-//                     overflow: hidden;
-//                 }
-//             }
-//             tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row, 
-//                 td {
-//                     background-color: @m-blue3;
-//                 }
-//             }
-//             tr.ant-table-expanded-row {
-//                 td {
-//                     text-align: right;
-//                 }
-//             }
-//         }
-//         .ant-table-placeholder {
-//             border: 0;
-//             background: @m-black2;
-//         }
-//     }
-// }
+// 日期输入框 @m-grey21
+.commonPicker.ant-calendar-picker {
+    width: 200px !important;
+    .ant-input {
+        background: @m-grey21;
+        border-color: @m-grey14;
+        .ant-calendar-range-picker-input {
+            color: @m-white0;
+            font-size: 14px;
+            &::placeholder {
+                color: @m-grey10;
+            }
+        }
+        .ant-calendar-picker-clear {
+            background: @m-white0;
+        }
+        .ant-calendar-range-picker-separator {
+            font-size: 14px;
+            color: @m-grey2;
+        }
+    }
+}
+
+.ant-popover {
+    .ant-popover-content {
+        border: 1px solid @m-grey22;
+        .rounded-corners(5px);
+        .ant-popover-arrow {
+            border-top-color: @m-grey22;
+            border-left-color: @m-grey22;
+        }
+        .ant-popover-inner {
+            .ant-popover-inner-content {
+                border-image-width: 0;
+                background: @m-grey22;
+                color: @m-white0;
+                padding: 5px 15px;
+                &:hover {
+                    color: @m-blue0;
+                }
+            }
+        }
+    }
+}
+
+.ant-calendar-picker-container {
+    .ant-calendar-range {
+        background: @m-grey22;
+        border-color: @m-grey22;
+        .ant-calendar-panel {
+            .ant-calendar-date-panel {
+                .ant-calendar-range-part {
+                    .ant-calendar-input-wrap {
+                        border-bottom-color: @m-grey23;
+                        .ant-calendar-input {
+                            background: transparent;
+                            border: 1px solid @m-grey1;
+                            color: @m-white0;
+                            &::placeholder {
+                                color: @m-grey1;
+                            }
+                        }
+                    }
+                    .ant-calendar-header {
+                        .ant-calendar-prev-year-btn,.ant-calendar-prev-month-btn {
+                            color: @m-grey1;
+                            &::before,&::after {
+                                border-color: @m-grey2;
+                            }
+                        }
+                        .ant-calendar-month-select,.ant-calendar-year-select {
+                            color: @m-grey1;
+                        }
+                    }
+                    .ant-calendar-body {
+                        border-top-color: @m-grey1;
+                        .ant-calendar-column-header-inner {
+                            color: @m-grey1;
+                        }
+                        .ant-calendar-cell {
+                            .ant-calendar-date {
+                                background: transparent;
+                                color: @m-white0;
+                            }
+                        }
+                        .ant-calendar-last-day-of-month,.ant-calendar-next-month-btn-day {
+                            .ant-calendar-date {
+                                color: @m-white1;
+                            }
+                        }
+                        .ant-calendar-disabled-cell {
+                            .ant-calendar-date {
+                                color: @m-grey1;
+                            }
+                        }
+                        .ant-calendar-selected-day {
+                            .ant-calendar-date {
+                                color: @m-blue0;
+                            }
+                        }
+                        .ant-calendar-active-week {
+                            .ant-calendar-cell {
+                                .ant-calendar-date {
+                                    background: transparent;
+                                }
+                            }
+                        }
+                    }
+                }
+                .ant-calendar-range-middle {
+                    color: @m-white1;
+                }
+            }
+        }
+        .ant-calendar-footer {
+            border-top-color: @m-grey1;
+            .ant-calendar-time-picker-btn {
+                color: @m-grey1;
+            }
+            .ant-calendar-ok-btn {
+                background-color: @m-blue0;
+                border-color: @m-blue0;
+                color: @m-white0;
+                &:hover {
+                    background-color: @m-blue0-hover;
+                    border-color: @m-blue0-hover;
+                    color: @m-white0-hover;
+                }
+            }
+        }
+    }
+}
+.ant-calendar-range {
+    .ant-calendar-in-range-cell::before {
+        background: @m-grey22-hover;
+    }
+}

src/assets/styles/variables.less

@@ -28,6 +28,9 @@
 @m-grey19: #162534;
 @m-grey20: #1B2A38;
 @m-grey21: #15202B;
+@m-grey22: #424E59;
+@m-grey22-hover: rgba(@m-grey22, .8);
+@m-grey23: #48545F;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;

src/views/information/spot-contract/components/add/index.vue

@@ -231,9 +231,11 @@
           </a-col>
           <a-col :span="12">
             <a-form-item label="数量"
-                         name="Qty">
+                         name="Qty"
+                         >
               <a-input class="dialogInput suffixGrey"
                        v-model:value="formState.Qty"
+                       style="width: 200px"
                        placeholder="请输入数量"
                        :suffix="numberUnit" />
             </a-form-item>
@@ -335,6 +337,7 @@
             <a-col :span="24">
               <a-form-item label="交收期">
                 <a-range-picker v-model:value="deliveryDate"
+                                class="commonPicker"
                                 :disabled-date="disabledDate"
                                 :show-time="{hideDisabledOptions: true}"
                                 format="YYYY-MM-DD" />

src/views/information/spot-contract/components/resubmit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 重新提交现货合同-->
-  <a-modal class="modify-custom"
+  <a-modal class="commonModal modify-custom"
            title="重新提交现货合同"
            v-model:visible="visible"
            @cancel="cancel"