<template>
  <div class="courseItem flex-h">
    <div class="img">
      <a>
        <img :src="data.img" class="centerLabel cover" alt="">
      </a>
    </div>
    <div class="flex-item flex-v" :style="{marginRight: marginRight + 'rem'}">
      <div class="flex-item">
        <div class="content">
          <div class="title flex-h">
            <div class="flex-item">
              <div>
                <span>{{data.title}}</span>
              </div>
            </div>
            <div v-if="data.getWay=='ticket'">
              <span>{{data.defaultPrice}}</span><br>
              <span>优惠券体验</span>
            </div>
          </div>
          <span>时间：{{data.remark}}</span>
          <span>地点：{{data.address}}</span>
        </div>
      </div>
      <ul v-if="data.getWay=='ticket'">
        <li v-for="(item,index) in data.tag" :key="index">{{item.TagName}}</li>
      </ul>
      <div v-if="data.getWay=='free'" class="flex-h">
        <div class="flex-item">
          <i class="iconfont icon-kecheng"></i>
          <span>团体课</span>  
        </div>
        <span>免费体验</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props: ['data', 'marginRight'],
  data () {
    return {
      
    }
  },
  computed: {
    
  },
  components: {
    
  },
  created () {
    
  },
  methods: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>