【vue3.0】4.0 某东到家（四）——搜索栏、广告位横幅和分类菜单

目前src/App.vue代码如下：

搜索栏

增加一个装搜索栏的盒子

image.png

继续优化,去iconfont准备一个搜索按钮的图标：

image.png

image.png

微调css样式：

.search {
  line-height: 0.32rem; //行高：将会自动撑开
  background: #f5f5f5;
  color: #b7b7b7;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  .custom-icon{
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.16rem;
  }
}

image.png

目前来看效果达到了，但其实文字黄焖鸡米饭是没有做限制的，比如垂直居中（现在的效果只是刚刚好，没有走样，但无法保证）。
优化一下：

广告位横幅

准备一张图片，放到public\i18n\9_16\img\banner.jpg

banner.jpg

修改 src/App.vue: