Search Bar
搜索栏
位于导航栏 · G05 浅色背景
搜索框 330px,白色背景;左侧搜索图标+提示词,右侧智能助手图标;外部加号图标 36×36px G60
语音输入图标变体
位于导航栏 · DB60 蓝色背景
搜索框背景 rgba(0,0,0,0.10);图标和文字白色/半透明白;布局与浅色背景一致
语音输入图标变体
位于导航栏下方
搜索框 382px(全宽),高度 36px,位于导航栏底部下方独立一行
搜索状态
搜索时,下拉选项中出现的关键字高亮为 DB60 颜色;搜索框内文字为常规颜色
DB60 蓝色背景搜索状态
属性值Token
搜索框 — 通用
搜索框高度36px--sb-height
圆角全圆角 999px--sb-radius
搜索行高度54px(搜索框 36px 垂直居中)--sb-row-height
两端边距16px--sb-padding
内部 padding左右各 12px--sb-inner-padding
文字字号14px--sb-font-size
文字字重400--sb-font-weight
搜索图标16×16px,stroke-width: 2--sb-search-icon-size
加号图标容器36×36px(图标 20×20px)--sb-plus-icon-size
搜索框与加号间距16px--sb-gap
位于导航栏 — 搜索框宽度
搜索框宽度330px--sb-in-navbar-width
位于导航栏下方 — 搜索框宽度
搜索框宽度382px--sb-below-navbar-width
G05 浅色背景
头部背景#F5F7FA G05--sb-light-bg → --G05
搜索框背景#FFFFFF G0 白色--sb-light-search-bg → --G0
搜索框描边无border: none
搜索图标颜色#A8B4C8 G40--sb-light-icon-color → --G40
占位符颜色#A8B4C8 G40--sb-light-placeholder-color → --G40
输入文字颜色#223355 G60--sb-light-text-color → --G60
关键字颜色#3388FF DB60--sb-light-keyword-color → --DB60
加号图标颜色#223355 G60--sb-light-plus-color → --G60
智能助手图标20×20px 蓝色渐变圆形gradient(DB60→DB30)
语音输入图标20×20px G40--sb-light-icon-color → --G40
清空按钮18×18px 圆形,G40 背景 + 白色 ×—
DB60 蓝色背景
头部背景#3388FF DB60--sb-blue-bg → --DB60
搜索框背景rgba(0,0,0,0.10) G80_10%--sb-blue-search-bg → G80_10%
搜索框描边无border: none
搜索图标颜色rgba(255,255,255,0.5)--sb-blue-icon-color
占位符颜色rgba(255,255,255,0.5)--sb-blue-placeholder-color
输入文字颜色#FFFFFF 白色--sb-blue-text-color
关键字颜色#FFFFFF 白色--sb-blue-keyword-color
加号图标颜色#FFFFFF 白色--sb-blue-plus-color
智能助手图标20×20px 半透明白圆形 rgba(255,255,255,0.25)—
语音输入图标20×20px rgba(255,255,255,0.5)--sb-blue-icon-color
清空按钮18×18px 圆形,rgba(255,255,255,0.5) 背景 + 白色 ×—
搜索状态 · 下拉选项
下拉选项背景G0 #FFFFFF 白色—
选项行高度44px—
选项行边距16px 两端—
选项搜索图标16×16px G40—
选项关键字颜色#3388FF DB60--sb-light-keyword-color → --DB60
选项关键字字重500font-weight: 500
选项非关键字颜色#223355 G60--sb-light-text-color → --G60
选项文字字号14px—
选项分隔线G10 #E9ECF2 1px—
搜索框输入文字常规颜色 G60(G05背景)/ 白色(DB60背景),不高亮—
返回组件首页