mall-web-ssr/components/applyPurchase/articleFour.vue

<template>
  <div class="article_four">
    <ul class="list-unstyled">
      <li v-for="item in list">
        <div class="img">
          <img :src="'/images/applyPurchase/' + item.img">
        </div>
        <div class="info_right">
          <h4 v-text="item.title"></h4>
          <p v-text="item.info"></p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list: [{
          img: 'xiaolvgao.png',
          title: '效率高',
          info: '批量求购，一键上传，广获价格信息'
        }, {
          img: 'shujuhua.png',
          title: '数据化',
          info: '千万产品数据匹配，推送现货比对购买安心'
        }, {
          img: 'kedianzi.png',
          title: '可垫资',
          info: '可申请垫资服务，提升资金周转率'
        }]
      }
    }
  }
</script>
<style lang="scss" type="text/scss" scoped>
  .article_four{
    position:relative;
    border-radius:5px;
    margin-bottom:20px;
    background: #fff;
    ul{
      padding:10px 0;
      li{
        height:70px;
        line-height: 70px;
        .img{
          float:left;
          width:65px;
          text-align: center;
          img{}
        }
        .info_right{
          padding-top:10px;
          margin-left:65px;
          vertical-align:top;
          color:#666;
          h4{
            line-height: 20px;
            font-size: 14px;
            margin:0;
          }
          p{
            line-height: 16px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>