<template>
  <div class="multi-nav">
    <div class="inner">
      <div class="nav-title">这是标题</div>
      <div class="nav-content">
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
        <div class="item">
          <div class="item-inner">
            <img src=""
                 alt="">
            <p>单项名字</p>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>

/**
* @author: 过飞
* @createData: 2020年09月17日 14:44:25
* @version：v1.0
*
* @desc: 功能描述
*/
export default {
  name: '',

  components: {},

  mixins: [],

  props: {},

  data() {
    return {

    }
  },

  computed: {},

  watch: {},

  created() { },

  mounted() { },

  methods: {}

}
</script>
<style lang="scss" scoped >
.multi-nav {
  background-color: #fff;
  .inner {
    .nav-title {
      font-size: 16px;
      font-weight: bold;
      padding: 10px;
    }
    .nav-content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .item {
        width: 25%;
        min-width: 60px;
        margin-bottom: 10px;
        .item-inner {
          text-align: center;
          margin: 0 auto 0;
          &:nth-child(4n) {
            margin-right: 0;
          }
          &:last-child {
            margin-right: 0;
          }
          & > img {
            display: block;
            margin: 0 auto 0;
            width: 40px;
            height: 40px;
            background-color: #eee;
          }
          & > p {
            font-size: 12px;
            margin: 10px 0 0 0;
          }
        }
      }
    }
  }
}
</style>
