dy-admin-manager/src/views/resetTeaming/modals/activity.vue

<template>
  <div class="courseModel" style="margin-top: 12px">
    <h2 class="titles">
			<img :src="trainSmallBg" />
			<span>小班课</span>
		</h2>

    <div class="section">
      <el-row class="title-row">
        <el-col :span="12">课程类型</el-col>
        <el-col :span="5" :offset="1" style="text-align: right;">课程数</el-col>
        <el-col :span="6" style="text-align: right;">价格</el-col>
      </el-row>
      <div v-for="(item, index) in activityList" :key="index">
        <el-row class="option-row" @click.native="onCourseChange(item)">
          <el-col :span="12">
            <i class="check_default"  :class="[item.isStatus ? 'check_active' : '', item.optionalFlag ? 'disabled' : '']"></i>
            <span style="display: flex; align-items: center;">
              <template>{{ item.categoryName }}</template>
            </span>
          </el-col>
          <el-col :span="6">
						<span style="color: #AAA; font-size: 12px">{{ item.num }}节</span>
					</el-col>
          <el-col :span="6">
            <span style="color: #1A1A1A">￥{{ item.actualAmount | moneyFormat }}</span>
          </el-col>
        </el-row>
      </div>
		</div>

  </div>
</template>

<script>
export default {
    name: 'courseModel',
    props: {
			trainSmallBg: String,
			activityList: Array
    },
    methods: {
      onCourseChange(item) {
        this.$emit('onCheckItem', item)
      }
    }
}
</script>

<style lang="less" scoped>
.giveTitle {
	margin-top: 16px;
	padding-top: 8px;
	color: #1A1A1A;
	font-size: 14;
	padding-left: 24;
}
.small_point {
	position: absolute;
	left: 8px;
	top: 7px;
	width: 6px;
	height: 6px;
	background: #01C1B5;
	border-radius: 50%;
}
@import url("./signUpPayment.less");
</style>