第二课 制作底部导航

一、src/style/base.css

html{
    font-size:100px;
}

body{
    font-size:.12rem
}

二、App.vue

 <div id="app">
    <div class="docker">
      <span class="docker__item">首页</span>
      <span class="docker__item">购物车</span>
      <span class="docker__item">订单</span>
      <span class="docker__item">我的</span>
    </div>
  </div>
  
  .docker{
    display: flex;
    position: absolute;
    width: 100%;
    left:0;
    bottom:0;
    height: 0.49rem;
    border-top:1px solid #f1f1f1;
    background: #ccc;
    padding: 0 .18rem;
    box-sizing: border-box;
  }
  .docker__item{
    flex:1;
    text-align: center;
    line-height: 0.49rem;
  }

三、制作小图标iconfont

选好你要得小图标

https://www.iconfont.cn/

新建文件夹 scr/style/iconfont.css

@font-face {
  font-family: 'iconfont';  /* project id 3157800 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_3157800_xtmxxwrydz.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_3157800_xtmxxwrydz.woff') format('woff'),
  url('//at.alicdn.com/t/font_3157800_xtmxxwrydz.ttf') format('truetype'),
  url('#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<div class="docker">
      <span class="docker__item">
        <div class="iconfont">&#xe603;</div>
        首页
      </span>
      <span class="docker__item">
         <div class="iconfont">&#xe60d;</div>
        购物车
      </span>
      <span class="docker__item">
         <div class="iconfont">&#xe601;</div>
        订单
      </span>
      <span class="docker__item">
        <div class="iconfont">&#xe624;</div>
        我的
      </span>
    </div>

加入高亮，去掉底部背景，修改title字体大小

<div class="docker">
      <span class="docker__item docker__item--active">
        <div class="iconfont">&#xe603;</div>
        <div class="docker__title">首页</div>
      </span>
      <span class="docker__item">
         <div class="iconfont">&#xe60d;</div>
         <div class="docker__title">购物车</div>
      </span>
      <span class="docker__item">
         <div class="iconfont">&#xe601;</div>
         <div class="docker__title">订单</div>
      </span>
      <span class="docker__item">
        <div class="iconfont">&#xe624;</div>
        <div class="docker__title">我的</div>
      </span>
    </div>
    
     .iconfont{
    font-size: .18rem !important;
    margin: 0.06rem 0 0.02rem 0;
  }
  .docker__title{
    font-size: 20px;
    transform: scale(0.5,0.5);
    transform-origin: center top;
  }
  .docker__item--active{
    color: #1fa4fc;
  }

四、用scss改写

.docker{
    display: flex;
    position: absolute;
    width: 100%;
    left:0;
    bottom:0;
    height: 0.49rem;
    border-top:1px solid #f1f1f1;
    padding: 0 .18rem;
    box-sizing: border-box;
    &__item{
      flex:1;
      text-align: center;
      .iconfont{
        font-size: .18rem !important;
        margin: 0.06rem 0 0.02rem 0;
      }
      .docker__title{
        font-size: 20px;
        transform: scale(0.5,0.5);
        transform-origin: center top;
      }
      &--active{
        color: #1fa4fc;
      }
    }
  }