listItem.vue

<template>
  <div class="list-item" @click="clickHandle">
    <div class="list-item-cell picture">
      <img :src="data.itemPoster" class="full-width"/>
    </div>
    <div class="list-item-cell info">
      <div class="title text-danger">{{data.title ? data.title : ""}}<span class="text-danger">({{data.subTitle}}项可使用)</span></div>
      <p v-for="(item, index) in data.des" :key="index">{{item}}</p>
    </div>
    <div class="list-item-cell arrow">
      <i class="glyphicon glyphicon-menu-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListItem',
  data () {
    return {
    }
  },
  props: ['data'],
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  methods: {
    clickHandle () {
      this.$emit('clickHandle')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list-item {
  background-color:#ffffff;
  border-radius: 5px;
  box-shadow: 1px 8px 10px #e2e3e4;
  margin-bottom: 1.2em;
  display: table;
  width: 100%;
  font-size: 1em;
}
.list-item > div {
  display: table-cell;
  vertical-align: middle;
}
.list-item > .picture {
  width:35%;
  padding:1em 0 1em 1em;
}
.list-item > .info {
  padding:1em 0.8em;
  color:#9aa0a4;
}
.list-item > .info .title{
  font-size: 1em;
  font-weight:bold;
  margin-bottom:0.5em;
}
.list-item > .info p {
  margin-bottom: 0;
}
.list-item > .arrow {
  width: 1.6em;
  font-size: 1.2em;
  color: #949595;
  text-align: left;
}
</style>