Forráskód Böngészése

合并代码解决冲突

huangbin 4 éve
szülő
commit
a05864b58c

+ 190 - 20
src/assets/styles/mixin.less

@@ -145,8 +145,184 @@
     font-size: @fontSize;
     .rounded-corners(@rounded);
 }
+.commonInput {
+    background: #15202B;
+    border: 1px solid @m-grey14;
+    border-radius: 3px;
+    color: #E5E5E5;
+    .ant-input {
+        color: #E5E5E5;
+        background: transparent;
+        &::placeholder {
+            color: @m-grey10;
+        }
+    }
+    .ant-input-suffix {
+        color: #E5E5E5;
+    }
+}
+.tableConditionInput {
+    width: 140px;
+    height: 30px;
+    line-height: 30px;
+    background: @m-grey9;
+    .rounded-corners(3px);
+    border: 0;
+    color: @m-white1;
+    font-size: 14px;
+    &::placeholder {
+        color: @m-grey10;
+    }
+}
+.tableConditionInput+.tableConditionInput {
+    margin-left: 10px;
+}
+
+.ant-select-dropdown {
+    background: #424E59;
+    border: 1px solid #48545F;
+    box-shadow: 0px 10px 10px 0px rgba(18, 22, 24, 0.36);
+    border-radius: 5px;
+    .ant-select-item {
+        color:@m-grey1;
+    }
+     
+    .ant-select-item-option-active,.ant-select-item-option-selected,.ant-select-item-option-hover {
+        background: @m-blue0;
+        color: @m-white1;
+    }
+}
+
+// 上面表格样式
+.topTable {
+    .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-color: @m-black9;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr {
 
-::v-deep.ant-select-single {
+            }
+        }
+        .ant-table-placeholder {
+            border: 0;
+            background: @m-black2;
+        }
+    }
+}
+.ant-empty-normal {
+    color: @m-grey17;
+}
+.ant-empty-img-simple-path,.ant-empty-img-simple-ellipse {
+    fill: @m-grey17;
+}
+.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;
@@ -160,24 +336,30 @@
         color: #3A87F7;
     }
 }
-::v-deep.ant-select-single.conditionSelect {
+.inlineFormSelect.ant-select-single {
+    .rounded-corners(3px);
     .ant-select-selector {
         height: 30px;
         padding: 0 8px;
         background: #15202B;
-        border: none;
+        border: 1px solid #0C95FF;
         border-radius: 3px;
-        color: @m-grey10;
+        color: #E5E5E5;
+        .ant-select-selection-placeholder {
+            color: @m-grey10;
+        }
     }
     .ant-select-arrow {
         right: 8px;
-        color: @m-grey1;
+        color: #3A87F7;
     }
+    
 }
-.conditionSelect+.conditionSelect {
-    margin-left: 10px;
+.typeSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) {
+    border: 1px solid #0C95FF;
 }
-::v-deep.commonInput {
+
+.commonInput {
     background: #15202B;
     border: 1px solid @m-grey14;
     border-radius: 3px;
@@ -189,16 +371,4 @@
     .ant-input-suffix {
         color: #E5E5E5;
     }
-}
-.tableConditionInput {
-    width: 140px;
-    height: 30px;
-    line-height: 30px;
-    background: @m-grey9;
-    .rounded-corners(3px);
-    border: 0;
-    color: @m-white1;
-}
-.tableConditionInput+.tableConditionInput {
-    margin-left: 10px;
 }

+ 15 - 0
src/assets/styles/variables.less

@@ -19,6 +19,11 @@
 @m-grey13: #38444F;
 @m-grey13-hover: rgba(@m-grey13, .8);
 @m-grey14: #2B3F52;
+@m-grey15: #455773;
+@m-grey15-hover: rgba(@m-grey15, .8);
+@m-grey16: #405066;
+@m-grey16-hover: rgba(@m-grey16, .8);
+@m-grey17: #556772;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;
@@ -31,6 +36,8 @@
 @m-black5: #121415;
 @m-black6: #1B2F41;
 @m-black7: #15293A;
+@m-black8: #212629;
+@m-black9: #161A1C;
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;
@@ -39,6 +46,14 @@
 @m-blue3: #172B56;
 @m-blue4: #112C43;
 @m-blue5: #084258;
+@m-blue6: #26487C;
+@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);

+ 53 - 1
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>
 

+ 64 - 7
src/views/information/custom/compoments/filterTable/index.vue

@@ -2,25 +2,27 @@
   <!-- 过滤客户资料表格 -->
   <div class="filter-custom-table">
     <a-select label-in-value
+              class="conditionSelect"
+              style="width: 120px"
               v-model:value="userinfotype"
               placeholder="全部客户类型"
               @change="handleChange"
-              style="width: 120px">
+            >
       <a-select-option value="1">个人</a-select-option>
       <a-select-option value="2">企业</a-select-option>
     </a-select>
     <a-input v-model:value="nickname"
-             style="width: 140px"
+             class="tableConditionInput"
              placeholder="模糊搜索客户简称" />
     <a-input v-model:value="name"
-             style="width: 140px"
+             class="tableConditionInput"
              placeholder="模糊搜索客户名称" />
     <a-input v-model:value="phone"
-             style="width: 140px"
+             class="tableConditionInput"
              placeholder="模糊搜索手机号码" />
-    <a-button @click="search">查询</a-button>
-    <a-button @click="reset">重置</a-button>
-    <a-button @click="add">新增</a-button>
+    <a-button class="selectBtn"  @click="search">查询</a-button>
+    <a-button class="selectBtn"  @click="reset">重置</a-button>
+    <a-button class="operBtn" @click="add">新增</a-button>
     <!-- 新增弹窗 -->
     <AddCustom />
   </div>
@@ -83,5 +85,60 @@ export default defineComponent({
 
 <style lang="less">
 .filter-custom-table {
+    width: 100%;
+    display: inline-flex;
+    padding-top: 9px;
+    padding-bottom: 6px;
+}
+.ant-select-single:not(.ant-select-customize-input) {
+    margin-right: 10px;
+    // background: #252D34;
+    // .rounded-corners(3px);
+    .ant-select-selector{
+        height: 30px;
+        padding: 0 8px;
+        background: @m-grey9;
+        border: none;
+        .rounded-corners(3px);
+        color: @m-grey10;
+        .ant-select-arrow {
+            right: 8px;
+            color: @m-grey1;
+        }
+    }
+    .ant-select-arrow {
+        color: @m-grey1;
+    }
+    .ant-select-selection-item {
+         color: @m-white1;
+    }
+}
+.conditionSelect+.conditionSelect {
+    margin-left: 10px;
+}
+.selectBtn.ant-btn {
+    margin-left: 10px;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    .rounded-corners(3px);
+    &:hover,&:focus {
+        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        color: rgba(@m-white0, .8);
+        border: 0;
+    }
+}
+.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    &:hover,&:focus {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
+        color: rgba(@m-white0, .8);
+        border: 0;
+    }
 }
 </style>;

+ 1 - 0
src/views/information/custom/list/normal-use/index.vue

@@ -7,6 +7,7 @@
     <contextMenu :contextMenuList="contextMenuList"
                  :tableList="customList">
       <a-table :columns="columns"
+               class="topTable"
                :pagination="false"
                rowKey="key"
                :data-source="customList">

+ 1 - 13
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;

+ 0 - 52
src/views/market/warehouseTrade/components/listed/index.vue

@@ -128,59 +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-dropdown {
-    background:  #15202B;
-    color: #E5E5E5;
-    .ant-select-dropdown-content {
-        .rc-virtual-list {
-            .rc-virtual-list-holder {
-                .rc-virtual-list-holder-inner {
-                    .ant-select-item {
-
-                    }
-                    .ant-select-item-option-selected {
-
-                    }
-                }
-            }
-        }
-    }
-}
 ::v-deep.formProgress {
     width: 140px;
     // height: 3px;