feat(search): 搜索组件样式修改

src/base/basic-var.less

@@ -72,6 +72,8 @@
   --ti-mobile-common-color-text-weaken-ligtht: var(--ti-mobile-base-color-common-7); /* 文本_弱化色_浅色/提示*/
   --ti-mobile-common-color-text-weaken-disabled: var(--ti-mobile-base-color-common-8); /* 文本_弱化色_浅色/禁用*/
   --ti-mobile-common-color-text-white: var(--ti-mobile-base-color-common-12); /* 文本_白色*/
+  --ti-mobile-common-color-text-placeholder-primary: #dbe5fc; /* placeholder_主要*/
+  --ti-mobile-common-color-text-placeholder-gray: #acacac; /* placeholder_灰*/
 
   /* 文本链接色*/
   --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/
@@ -83,6 +85,7 @@
   --ti-mobile-common-color-line-hightlight: var(--ti-mobile-base-color-brand-1); /* 高亮_描边色*/
   --ti-mobile-common-color-line-dark: var(--ti-mobile-base-color-common-9); /* 深_描边色*/
   --ti-mobile-common-color-line-light: var(--ti-mobile-base-color-common-10); /* 浅_描边色*/
+  --ti-mobile-common-color-line-white: var(--ti-mobile-base-color-common-12); /* 白色*/
 
   /* 蒙层色*/
   --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/
@@ -92,6 +95,7 @@
   --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/
   --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/
   --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/
+  --ti-mobile-common-bg-color-blue-1: var(--ti-mobile-base-color-brand-2); /* 背景_蓝*/
   --ti-mobile-common-bg-color-disabled: #e8e8e8; /* 背景_禁用*/
   --ti-mobile-common-bg-color-dark-gray: var(--ti-mobile-base-color-bg-1); /* 背景_深灰*/
 }

src/search/index.js

@@ -1,8 +1,18 @@
 export default {
-  'tiny-mobile-search-input-height': '44px',
-  'tiny-mobile-search-input-border-color': '#ccc',
-  'tiny-mobile-search-text-color': '#333',
-  'tiny-mobile-search-bgcolor': '#fff',
-  'tiny-mobile-search-icon-color': '#ccc',
-  'tiny-mobile-search-close-icon-color': '#999'
-}
+  "tiny-mobile-search-height": "44px",
+  "tiny-mobile-search-input-height": "32px",
+  "tiny-mobile-search-input-border-radius": "32px",
+  "tiny-mobile-search-input-bg-color-gray": "#f5f5f5",
+  "tiny-mobile-search-input-bg-color-primary": "rgba(255, 255, 255, 0.15)",
+  "tiny-mobile-search-font-size": "14px",
+  "tiny-mobile-search-text-color-gray": "#191919",
+  "tiny-mobile-search-text-color-primary": "#fff",
+  "tiny-mobile-search-icon-fill-color-gray": "#dbdbdb",
+  "tiny-mobile-search-icon-fill-color-primary": "#fff",
+  "tiny-mobile-search-caret-color-primary": "#fff",
+  "tiny-mobile-search-caret-color-gray": "#4a79fe",
+  "tiny-mobile-search-bg-color-primary": "#3168f1",
+  "tiny-mobile-search-bg-color-gray": "#fff",
+  "tiny-mobile-search-placeholder-text-color-primary": "#dbe5fc",
+  "tiny-mobile-search-placeholder-text-color-gray": "#acacac",
+};

src/search/index.less

@@ -19,24 +19,26 @@
 @search-prefix-cls: ~'@{css-prefix}mobile-search';
 
 .@{search-prefix-cls} {
-  position: relative;
   display: flex;
+  align-items: center;
   box-sizing: border-box;
-  height: var(--ti-mobile-search-input-height, 44px);
-  line-height: var(--ti-mobile-search-input-height, 44px);
-  background-color: var(--ti-mobile-search-bgcolor, #fff);
+  height: var(--ti-mobile-search-height);
   outline: none;
-  .hairline('bottom', var(--ti-mobile-search-input-border-color, #ccc));
 
   & &__line {
     position: relative;
     flex: auto;
+    height: var(--ti-mobile-search-input-height);
+    margin-left: 16px;
+    border-radius: var(--ti-mobile-search-input-border-radius);
+    overflow: hidden;
+    box-sizing: border-box;
+    background: transparent;
 
     &::after {
       content: '';
       width: 200%;
       height: 200%;
-      background: var(--ti-mobile-search-bgcolor, #fff);
       box-sizing: border-box;
       position: absolute;
       top: 0;
@@ -47,67 +49,75 @@
   }
 
   & &__box {
+    display: flex;
+    align-items: center;
     position: relative;
-    box-sizing: border-box;
-    width: 100%;
     height: 100%;
-    padding-right: 30px;
-    padding-left: 30px;
+    padding-left: 16px;
+    padding-right: 16px;
     z-index: 2;
-    opacity: 0;
+    backdrop-filter: blur(5px);
   }
 
-  & &__label {
-    position: absolute;
-    right: 1px;
-    bottom: 1px;
-    left: 1px;
-    color: var(--ti-mobile-search-icon-color, #ccc);
-    background: var(--ti-mobile-search-bgcolor, #fff);
-    text-align: center;
-    z-index: 1;
+  &-gray &__box {
+    background: var(--ti-mobile-search-input-bg-color-gray);
+  }
+
+  &-primary &__box {
+    background: var(--ti-mobile-search-input-bg-color-primary);
   }
 
   & &__input {
     box-sizing: content-box;
     width: 100%;
-    height: 1.42857143em;
-    padding: 4px 0;
+    height: 100%;
     border: 0;
     margin-left: 8px;
-    color: var(--ti-mobile-search-text-color, #333);
+    padding-right: 15px;
+    color: var(--ti-mobile-search-text-color-primary);
     background: transparent;
-    font-size: 15px;
-    line-height: 1.42857143em;
-    caret-color: #f36164;
+    font-size: var(--ti-mobile-search-font-size);
     outline: none;
-    .placeholder(@color: var(--ti-mobile-search-close-icon-color, #999));
 
-    &:focus {
-      .placeholder(@color: #d9d9d9);
+    &-primary {
+      color: var(--ti-mobile-search-text-color-primary);
+      caret-color: var(--ti-mobile-search-caret-color-primary);
+      .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
+      &:focus {
+        .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
+      }
+    }
+
+    &-gray {
+      color: var(--ti-mobile-search-text-color-gray);
+      caret-color: var(--ti-mobile-search-caret-color-gray);
+      .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
+      &:focus {
+        .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
+      }
     }
   }
 
+  &-primary {
+    background-color: var(--ti-mobile-search-bg-color-primary);
+  }
+
+  &-gray {
+    background-color: var(--ti-mobile-search-bg-color-gray);
+  }
+
   & &__icon {
     text-decoration: none;
     display: flex;
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
 
     .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-icon-color, #ccc);
-      font-size: 16px;
+      fill: var(--ti-mobile-search-placeholder-text-color-primary);
     }
   }
 
-  & &__icon-label {
-    margin-right: 8px;
-
+  &-gray &__icon {
     .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-icon-color, #ccc);
-      font-size: 16px;
+      fill: var(--ti-mobile-search-placeholder-text-color-gray);
     }
   }
 
@@ -116,28 +126,47 @@
     top: 0;
     right: 0;
     padding: 0 8px;
-    line-height: 44px;
     cursor: pointer;
+  }
 
+  &-primary {
     .@{css-prefix}svg {
-      fill: var(--ti-mobile-search-close-icon-color, #999);
-      font-size: 16px;
+      fill: var(--ti-mobile-search-icon-fill-color-primary);
     }
   }
 
+  &-gray {
+    .@{css-prefix}svg {
+      fill: var(--ti-mobile-search-icon-fill-color-gray);
+    }
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 100%;
+    color: var(--ti-mobile-search-text-color-primary);
+  }
+
+  &-gray {
+    color: var(--ti-mobile-search-text-color-gray);
+  }
+
   & &__present {
-    display: none;
-    padding: 0 12px;
-    border-left: 1px solid var(--ti-mobile-search-input-border-color, #ccc);
-    color: var(--ti-mobile-search-text-color, #333);
-    background-color: var(--ti-mobile-search-bgcolor, #fff);
-    font-size: 16px;
-    line-height: 44px;
+    color: var(--ti-mobile-search-text-color-primary);
+    font-size: var(--ti-mobile-search-font-size);
+    line-height: 1;
     white-space: nowrap;
     cursor: pointer;
     outline: none;
   }
 
+  &-gray &__present {
+    color: var(--ti-mobile-search-text-color-gray);
+  }
+
   &.focus &__present {
     display: block;
   }
@@ -150,11 +179,6 @@
     opacity: 1;
   }
 
-  & &__text {
-    color: var(--ti-mobile-search-text-color, #333);
-    font-size: 16px;
-  }
-
   &.collapse &__input {
     padding: 0;
     width: 30px;

src/search/vars.less

@@ -1,8 +1,18 @@
 :root {
-  --ti-mobile-search-input-height: 44px;
-  --ti-mobile-search-input-border-color: #ccc;
-  --ti-mobile-search-text-color: var(--ti-mobile-base-color-info-normal, #333333);
-  --ti-mobile-search-bgcolor: var(--ti-mobile-base-color-light, #fff);
-  --ti-mobile-search-icon-color: #ccc;
-  --ti-mobile-search-close-icon-color: var(--ti-mobile-base-color-placeholder, #999);
+  --ti-mobile-search-height: 44px;
+  --ti-mobile-search-input-height: 32px;
+  --ti-mobile-search-input-border-radius: 32px;
+  --ti-mobile-search-input-bg-color-gray: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
+  --ti-mobile-search-input-bg-color-primary: rgba(255, 255, 255, 0.15);
+  --ti-mobile-search-font-size: 14px;
+  --ti-mobile-search-text-color-gray: var(--ti-mobile-common-color-text-primary, #191919);
+  --ti-mobile-search-text-color-primary: var(--ti-mobile-common-color-text-white, #fff);
+  --ti-mobile-search-icon-fill-color-gray: #dbdbdb;
+  --ti-mobile-search-icon-fill-color-primary: #fff;
+  --ti-mobile-search-caret-color-primary: var(--ti-mobile-common-color-line-white, #fff);
+  --ti-mobile-search-caret-color-gray: var(--ti-mobile-common-color-line-hightlight, #4a79fe);
+  --ti-mobile-search-bg-color-primary: var(--ti-mobile-common-bg-color-blue-1, #3168f1);
+  --ti-mobile-search-bg-color-gray: var(--ti-mobile-common-bg-color-white, #fff);
+  --ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-common-color-text-placeholder-primary, #dbe5fc);
+  --ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-common-color-text-placeholder-gray, #acacac);
 }