【vue组件】--左侧菜单（1）

HTML代码

<template>
  <div class="homel">
    <ul class="border-top">
      <li v-for="(item,index) in data1" :key="index">
        <span class="title"><i :class="item.class1"></i>{{item.title}}</span>
        <span class="num right">{{item.num}}</span>
      </li>
    </ul>
  </div>
</template>

script代码

<script>
  export default {
    name: 'homel',
    data() {
      return {
        data1: [{
          class1: 'iconfont icon-xiaohao',
          title: '消耗',
          num: '0'
        },{
          class1: 'iconfont icon-zhuanhua',
          title: '转化数',
          num: '0'
        },{
          class1: 'iconfont icon-chengben',
          title: '转化成本',
          num: '0'
        },{
          class1: 'iconfont icon-kedanjia',
          title: '平台点击单价',
          num: '0'
        },{
          class1: 'iconfont icon-_xiansuo',
          title: '线索量',
          num: '0'
        },{
          class1: 'iconfont icon-kehu',
          title: '客户量',
          num: '0'
        },{
          class1: 'iconfont icon-fangwen',
          title: '落地页访问量',
          num: '0'
        },{
          class1: 'iconfont icon-fangwen1',
          title: '落地页访问人数',
          num: '0'
        }]
      }
    }
  }
</script>

style代码

<style>
  .homel {
    width: 250px;
    height: 650px;
    box-shadow: 0 0 5px #ccc;
  }

  .homel ul {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-top:4px solid #007BFF;
    border-radius: 5px;
    background: #fff;
  }

  .homel ul li {
    width: calc(100% - 40px);
    height: 80px;
    padding: 0 20px;
    line-height: 80px;
    border-bottom: #F9F9F9 1px solid;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: #000;
  }

  .homel ul li .title i {
    margin-right: 10px;
    font-size: 20px;
  }

  .homel ul li .num {
    font-size: 20px;
  }
</style>

案例图