<template>
  <view :style="'background:'+course.background" class="course">
		 <view class="course-tag" :class="{'un-catering':!course.applying}">{{course.applying?'报名中':'未开启'}}</view>
		 <image class="course-back" mode="widthFix" :src="course.back"></image>
	   <view class="course-ch text-xl">{{course.ch}}</view>
		 <view class="course-en text-lg">{{course.en}}</view>
  </view>
</template>

<script>
export default {
  props: {
    course: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      key: 1212
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.course{
	position:relative;
	padding:24px;
	width:100%;
	border-radius:10px;
	text-align:center;
	&-tag{
		    position: absolute;
        right: 0;
        top: 0;
        font-size: 10px;
        border-radius: 0 10px 0 18px;
        background: #e93e32;
        padding:2rpx 20rpx;
				&.un-catering{
					background:#d6d6d6;
				}
	}
	&-back{
        position: absolute;
        width: 80px;
        right: 0;
        bottom: 0;
	}
	&-ch{
		font-size:20px;
	}
	&-en{
		margin-top:10px;
		font-size:16px;
	}
}
</style>
