usoft-town/components/home/banner.vue

<template>
  <div class="banner">
    <div class="img"/>
    <div class="banner-list">
      <div class="container">
        <ul class="list-inline">
          <li>U 智慧 · 企业</li>
          <li>U 智慧 · 园区</li>
          <li>U 智慧 · 政务</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'Banner'
    }
</script>

<style scoped type="text/scss" lang="scss">
.banner{
  margin-top:54px;
  .img{
    height:450px;
    background: url(/img/banner/1.png)no-repeat center center;
  }
  .banner-list{
    height:90px;
    background: #126a8d;
    padding-top:20px;
    ul{
      li{
        width:32%;
        height:50px;
        line-height: 50px;
        text-align: center;
        border-right:1px solid #45849a;
        &:before{
          content: '';
          display:inline-block;
          width:30px;
          height:30px;
          position:relative;
          top:8px;
          left:-20px;
        }
        &:first-child:before{
          background: url(/icon/enterprise.png)no-repeat;
        }
        &:nth-child(2):before{
          background: url(/icon/developers.png)no-repeat;
        }
        &:last-child{
          border:none;
          &:before{
            background: url(/icon/government.png)no-repeat;
          }
        }
      }
    }
  }
}
</style>