luoyang-uniapp-app/pages/indexEntry/findShcool/shcoolDetail/comp/tab1.vue

<template>
	<view class="tabCon">
		<view class="tab1">
			<view class="card" v-for="(item, index) in classList" :key="index">
				<view class="flex-b">
					<view class="left_con">
						<view class="name">{{ item.name }}</view>
						<view class="price"><text>￥</text> {{ $u.utils.priceTo(item.totalAmount) }}</view>
					</view>
					<view class="btn" @click="goSign(item)">报名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['classList'],
		methods: {
			async goSign(item) {
				this.$store.commit('upDateSchoolCoach', {})
				this.$store.commit('updateSchool', {})
				this.$store.commit('upDateSchoolClass', item)
				this.$u.utils.clickSignUp()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabCon {
		width: 100%;
		padding: 0 20rpx 1rpx 20rpx;
	  .tab1 {
		  width: 100%;
	    .card {
			height: 143rpx;
			background: #F6F7FA;
			border: 1px solid #F6F7FA;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
	      .name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			font-weight: 700;
	      }
	      .price {
	      	font-size: 36rpx;
	      	color: $themC;
			font-weight: 700;
			text {
				font-size: 24rpx;
				font-weight: 400;
			}
	      }
	      	
	      .btn {
			  width: 112rpx;
			  height: 55rpx;
			  background: $themC;
			  border-radius: 28rpx;
	      	font-size: 24rpx;
	      	color: #fff;
	      	text-align: center;
	      	line-height: 55rpx;
	      }
	    }
	  }
	}
</style>