浏览代码

信息-客户资料-样式修改

marymelisa 4 年之前
父节点
当前提交
14e05d48ba

+ 19 - 32
src/assets/styles/mixin.less

@@ -145,38 +145,6 @@
     font-size: @fontSize;
     .rounded-corners(@rounded);
 }
-
-::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.ant-select-single.conditionSelect {
-    .ant-select-selector {
-        height: 30px;
-        padding: 0 8px;
-        background: #15202B;
-        border: none;
-        border-radius: 3px;
-        color: @m-grey10;
-    }
-    .ant-select-arrow {
-        right: 8px;
-        color: @m-grey1;
-    }
-}
-.conditionSelect+.conditionSelect {
-    margin-left: 10px;
-}
 ::v-deep.commonInput {
     background: #15202B;
     border: 1px solid @m-grey14;
@@ -198,7 +166,26 @@
     .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;
+    }
 }

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

@@ -19,6 +19,10 @@
 @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-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;
@@ -39,6 +43,10 @@
 @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);
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

+ 62 - 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>
   </div>
 </template>
 
@@ -75,5 +77,58 @@ 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 {
+    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 {
+        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        color: rgba(@m-white0, .8);
+    }
+}
+.operBtn:extend(.selectBtn) {
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    &:hover {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
+        color: rgba(@m-white0, .8);
+    }
 }
 </style>;

+ 12 - 16
src/views/market/warehouseTrade/components/listed/index.vue

@@ -163,22 +163,18 @@ export default defineComponent({
         }
     }
 }
-::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.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 {