<template>

<div>

<div class='wrapper'>123</div>

  <div class="docker">

    <span class='docker__item docker__item--active'>

      <div class='iconfont'>&#xe6f1;</div>

      <div class='docker__title'>首页</div>

      </span>

    <span class='docker__item'>

      <div class='iconfont'>&#xe671;</div>

      <div class='docker__title'>订单</div>

      </span>

    <span class='docker__item'>

      <div class='iconfont'>&#xe603;</div>

      <div class='docker__title'>购物车</div>

      </span>

    <span class='docker__item'>

      <div class='iconfont'>&#xe604;</div>

      <div class='docker__title'>我的</div>

      </span>

  </div>

</div>

</template>

<style lang="scss">

.wrapper{

  position: absolute;

  top: 0;

  left: 0;

  bottom: .50rem;

  right: 0;

  background-color:blue;

}

.docker{

  display: flex;

  box-sizing: border-box;

  padding:0 .18rem;

  position: absolute;

  left:0;

  bottom: 0;

  width: 100%;

  height: .49rem;

  border-top: .01rem solid #F1F1F1 ;

  &__item{

    flex:1;

  text-align: center;

  .iconfont{

  font-size: .2rem;

  padding: .07rem 0 .02rem 0;

}

  &--active{

    color:#1FA4FC;

  }

  }

&__title{

    font-size: .2rem;

    transform: scale(.5, .5);

    transform-origin: center top;

  }

}

</style>