From 564ac6e66a834b8f14374dc2d022c56d2c09fef2 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Tue, 6 Sep 2022 16:29:41 +0800
Subject: [PATCH] =?UTF-8?q?style(search):=20=E4=BC=98=E5=8C=96search=20?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E7=BB=84=E4=BB=B6=E4=B8=8D=E5=90=8Csize=E7=9A=84?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=20#1199?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/search/src/search.scss    | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss
index a96416e99a..ac654e09a3 100644
--- a/packages/devui-vue/devui/search/src/search.scss
+++ b/packages/devui-vue/devui/search/src/search.scss
@@ -13,11 +13,14 @@
   }
 
   .#{$devui-prefix}-input {
-    padding: 4px 60px 4px 8px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 100%;
+    height: $devui-size-md;
+    // 60px = clear + icon 的宽度
+    padding: 4px 60px 4px 8px;
+    font-size: $devui-font-size-md;
     color: $devui-text;
     box-sizing: border-box;
     border: 1px solid $devui-form-control-line;
@@ -48,11 +51,10 @@
 
   &__clear {
     position: absolute;
-    right: 36px;
+    right: $devui-size-md;
     cursor: pointer;
     height: 100%;
-    font-size: 10px;
-    @include size(30px, 100%);
+    @include size($devui-size-md, $devui-size-md);
     @include flex;
 
     &::after {
@@ -74,50 +76,54 @@
     z-index: 1;
     right: 0;
     top: 0;
-    font-size: 16px;
-    width: 36px;
-    height: 100%;
+    width: $devui-size-md;
+    height: $devui-size-md;
     @include flex;
   }
 
   &--sm {
     .#{$devui-prefix}-input {
+      height: $devui-size-sm;
+      font-size: $devui-font-size-sm;
+
       &.#{$devui-prefix}-input--sm {
-        font-size: $devui-font-size;
-        padding-right: 60px;
+        padding: 0 48px 0 6px;
       }
     }
 
     .#{$devui-prefix}-search__icon {
-      font-size: 14px;
-      @include size(34px, 26px);
+      font-size: $devui-font-size-sm;
+      @include size($devui-size-sm, $devui-size-sm);
     }
 
     .#{$devui-prefix}-search__clear {
-      @include size(26px, 100%);
+      font-size: $devui-font-size-sm;
+      @include size($devui-size-sm, $devui-size-sm);
 
-      right: 34px;
+      right: $devui-size-sm;
     }
   }
 
   &--lg {
     .#{$devui-prefix}-input {
-      padding: 4px 36px 4px 10px;
+      height: $devui-size-lg;
+      font-size: $devui-font-size-lg;
 
       &.#{$devui-prefix}-input--lg {
-        padding-right: 75px;
+        padding: 4px 80px 4px 10px;
       }
     }
 
     .#{$devui-prefix}-search__icon {
-      font-size: 18px;
-      @include size(46px, 46px);
+      font-size: $devui-font-size-lg;
+      @include size($devui-size-lg, $devui-size-lg);
     }
 
     .#{$devui-prefix}-search__clear {
-      @include size(40px, 100%);
+      font-size: $devui-font-size-lg;
+      @include size($devui-size-lg, $devui-size-lg);
 
-      right: 46px;
+      right: $devui-size-lg;
     }
   }
 
@@ -140,15 +146,17 @@
 
   &--left {
     .#{$devui-prefix}-input {
-      padding: 4px 26px 4px 30px;
+      padding-right: $devui-size-md;
+      padding-left: $devui-size-md;
 
       &.#{$devui-prefix}-input--lg {
-        padding-right: 28px;
-        padding-left: 48px;
+        padding-right: $devui-size-lg;
+        padding-left: $devui-size-lg;
       }
 
       &.#{$devui-prefix}-input--sm {
-        padding-right: 24px;
+        padding-right: $devui-size-sm;
+        padding-left: $devui-size-sm;
       }
     }