样式修改

src/assets/styles/mixin.less

@@ -145,7 +145,7 @@
     font-size: @fontSize;
     .rounded-corners(@rounded);
 }
-::v-deep.commonInput {
+.commonInput {
     background: #15202B;
     border: 1px solid @m-grey14;
     border-radius: 3px;
@@ -153,6 +153,9 @@
     .ant-input {
         color: #E5E5E5;
         background: transparent;
+        &::placeholder {
+            color: @m-grey10;
+        }
     }
     .ant-input-suffix {
         color: #E5E5E5;
@@ -230,4 +233,142 @@
 }
 .ant-empty-img-simple-g {
     stroke: @m-grey17;
+}
+
+.add-custom {
+    .ant-modal-content {
+        background: #0F1A25;
+        border-radius: 5px;
+        .ant-modal-close {
+            .ant-modal-close-x {
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                .ant-modal-close-icon {
+                    color: #1271BA;
+                }
+            }
+        }
+        .ant-modal-header {
+            height: 40px;
+            background: linear-gradient(0deg, #112C43, #084258);
+            border-radius: 5px;
+            padding: 0;
+            text-align: center;
+            border-bottom: 0;
+            .ant-modal-title {
+                line-height: 40px;
+                font-size: 16px;
+                color: @m-white0;
+            }
+        }
+        .ant-modal-body {
+
+        }
+        .ant-modal-footer {
+            border-top: 0;
+            text-align: center;
+            padding-bottom: 31px;
+            .ant-btn-primary {
+                width: 200px;
+                height: 34px;
+                line-height: 34px;
+                border: 0;
+                background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%);
+                border-radius: 3px;
+                font-size: 16px;
+                color: @m-white0;
+                &:hover {
+                    background: linear-gradient(0deg, @m-blue8-hover 0%, @m-blue9-hover 100%);
+                    color: @m-white0-hover;
+                }
+            }
+        }
+    }
+}
+
+.ant-form.inlineForm {
+    .ant-row.ant-form-item {
+        margin-bottom: 21px;
+        .ant-form-item-label {
+            width: 80px;
+            line-height: 30px;
+            text-align: left;
+            label {
+                color: @m-grey1;
+                &::after {
+                    content: ''
+                }
+            }
+        }
+        .ant-form-item-control-wrapper {
+            .ant-form-item-control {
+                line-height: 30px;
+            }
+
+        }
+    }
+    .relative.ant-form-item {
+        position: relative;
+        .tip {
+            position: absolute;
+            font-size: 14px;
+            color: @m-grey1;
+        }
+    }
+    .tc.ant-form-item {
+        .ant-form-item-control-wrapper {
+            margin: 0 auto;
+        }
+    }
+}
+.ant-select-single {
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: #15202B;
+        border: 1px solid #0C95FF;
+        border-radius: 3px;
+        color: #E5E5E5;
+    }
+    .ant-select-arrow {
+        right: 8px;
+        color: #3A87F7;
+    }
+}
+.inlineFormSelect.ant-select-single {
+    .rounded-corners(3px);
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: #15202B;
+        border: 1px solid #0C95FF;
+        border-radius: 3px;
+        color: #E5E5E5;
+        .ant-select-selection-placeholder {
+            color: @m-grey10;
+        }
+    }
+    .ant-select-arrow {
+        right: 8px;
+        color: #3A87F7;
+    }
+    
+}
+.typeSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) {
+    border: 1px solid #0C95FF;
+}
+
+.commonInput {
+    background: #15202B;
+    border: 1px solid @m-grey14;
+    border-radius: 3px;
+    color: #E5E5E5;
+    .ant-input {
+        color: #E5E5E5;
+        background: transparent;
+    }
+    .ant-input-suffix {
+        color: #E5E5E5;
+    }
 }

src/assets/styles/variables.less

@@ -50,6 +50,10 @@
 @m-blue6-hover: rgba(@m-blue6, .8);
 @m-blue7: #29538C;
 @m-blue7-hover: rgba(@m-blue7, .8);
+@m-blue8: #3163BA;
+@m-blue8-hover: rgba(@m-blue8, .8);
+@m-blue9: #4179DB;
+@m-blue9-hover: rgba(@m-blue9, .8);
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

src/views/information/custom/compoments/addCustom/index.vue

@@ -11,7 +11,59 @@
                 :loading="loading"
                 @click="submit">完成</a-button>
     </template>
-    新增客户资料
+    <a-form class="inlineForm" :form="form" @submit="handleSearch">
+            <a-row :gutter="24">
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="客户类型" >
+                        <a-select class="typeSelect" style="width: 200px" placeholder="请选择客户类型">
+                            <a-select-option value="1">
+                                客户一
+                            </a-select-option>
+                            <a-select-option value="2">
+                                客户二
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </a-col>
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="企业名称">
+                        <a-input class="commonInput" style="width: 200px"/>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24">
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="挂牌数量">
+                        <a-input class="commonInput" suffix="吨" style="width: 200px"/>
+                    </a-form-item>
+                </a-col>
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="起摘数量" class="relative">
+                        <a-input class="commonInput" suffix="吨" style="width: 200px" />
+                        <div class="tip">最小单位：1吨</div>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24">
+                <a-col
+                :span="24"
+                >
+                    <a-form-item>
+                        <a-progress class="formProgress" :percent="30" />
+                        <div class="unit"><span>0</span><span>300吨</span></div>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </a-form>
+    
   </a-modal>
 </template>
 

src/views/market/warehouseTrade/components/delisting/index.vue

@@ -226,19 +226,7 @@ export default defineComponent({
     height: 14px;
     line-height: 14px;
 }
-::v-deep.commonInput {
-    background: #15202B;
-    border: 1px solid @m-grey14;
-    border-radius: 3px;
-    color: #E5E5E5;
-    .ant-input {
-        color: #E5E5E5;
-        background: transparent;
-    }
-    .ant-input-suffix {
-        color: #E5E5E5;
-    }
-}
+
 .listedBtn {
     width: 120px;
     height: 30px;

src/views/market/warehouseTrade/components/listed/index.vue

@@ -128,55 +128,7 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-::v-deep.ant-form.inlineForm {
-    .ant-row.ant-form-item {
-        margin-bottom: 21px;
-        .ant-form-item-label {
-            width: 80px;
-            line-height: 30px;
-            text-align: left;
-            label {
-                color: @m-grey1;
-                &::after {
-                    content: ''
-                }
-            }
-        }
-        .ant-form-item-control-wrapper {
-            .ant-form-item-control {
-                line-height: 30px;
-            }
 
-        }
-    }
-    .relative.ant-form-item {
-        position: relative;
-        .tip {
-            position: absolute;
-            font-size: 14px;
-            color: @m-grey1;
-        }
-    }
-    .tc.ant-form-item {
-        .ant-form-item-control-wrapper {
-            margin: 0 auto;
-        }
-    }
-}
-::v-deep.ant-select-single {
-    .ant-select-selector {
-        height: 30px;
-        padding: 0 8px;
-        background: #15202B;
-        border: 1px solid #0C95FF;
-        border-radius: 3px;
-        color: #E5E5E5;
-    }
-    .ant-select-arrow {
-        right: 8px;
-        color: #3A87F7;
-    }
-}
 ::v-deep.formProgress {
     width: 140px;
     // height: 3px;