0 环境
1 参考文档
2 正文
先找到ToolBarRight.vue(看上面文档/src/layouts/components/Header/ToolBarRight.vue)，
找到如下图的第六行，然后点进去。
menu-search-dialog内的样式
参照上面两张图，重点是上面第二张图，scss那块区域的内容。先看83-90行(总的来说就是重置对话框的样式，因为现在对话框是全屏展示，还设置了背景色，很多影响它的属性需要重置修改的)，设置背景色，把元素的边角设计成直角，并且优先级设置的很高，移除元素的阴影效果。看下图：
假如不移除元素的底部边框，这里就会多一条线。
先注释掉91-99行的代码，这里是对自动补全输入框 autocomplete进行的修改。看下图：
这里是未修改前，有位置问题：比如不居中，偏左，然后输入框的宽度有点小。。。
取消注释，再看91-99行，设置了绝对定位(看下图，乍一看它上面是有position: fixed;其实不是它,而是dialog它有个相对定位，仔细看文档，原文这么写的，由于 Dialog 使用 position: relative 定位)，上100px，左50%，又设置了元素550px的宽度，但是你会发现它竟然不是居中的，而是偏右的，说明不是以父级元素中线作为中心的，那么可以用绝对元素沿其水平轴（X轴）移动其自身宽度的50%，向左移，正好弥补了50%，到了中心点(居中定位)。然后在el-input__wrapper里重新设置背景色，盲猜是为了暗黑模式。
el-autocomplete__popper内的样式
看下图：看第102-112行的代码，其实是重置弹出内容每行图标和文字的样式。图标样式：相对定位，上2px，稍微挪一下位置，图标字体大小设为16px，文字样式：左边一个margin 10px的距离，字体大小设置为14px。
3 总结
这里样式虽然是微调，但是会有很多的细节，比如绝对定位+left 50% + transform就可以做到了，位置居中的效果。el-input__wrapper背景色的考虑。还有就是弹出的侧边栏的内容的细微修改。
