football/pages/course/CourseManagement/CourseManagement.vue

<template>
	<view class="CourseManagement">
		<view class="Course-list">
			<view class="Course-list-item" v-for="(item, index) in courseListData" :key="index">
				<view class="Course-left">
					<image src="../../../static/image/course/img1.png" mode=""></image>
				</view>	
				<view class="Course-right">
					<view class="title">
						<view class="title-content">
							{{item.title}}
						</view>
						<view class="title-money">
							¥ {{item.money}}
						</view>
					</view>
					<view class="Course-time">
						<text class="Course-lesson-time">{{item.time}}</text>
						<text class="spacer">|</text>
						<text class="Course-lesson-week">{{item.times}}</text>
					</view>
					<view class="Course-btn">
						<view class="cancel-btn" v-show="true">
							我要退款
						</view>
						<view class="submit-btn">
							立即上课
						</view>
					</view>
				</view>
			</view>
			<view class="placeholder-view"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'CourseManagement',
		data() {
			return {
				courseListData:[
					{
						img:'../../../static/image/course/img1.png',
						title: '4-6岁幼儿兴趣班',
						money: '30',
						time:'共7课时',
						times: '周二、周四上课',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img2.png',
						title: '7-9岁幼儿兴趣班',
						money: '40',
						time:'共7课时',
						times: '周二、周四上课',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img3.png',
						title: '9-12岁幼儿兴趣班',
						money: '60',
						time:'共7课时',
						times: '周二、周四上课',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img4.png',
						title: '12-15岁幼儿兴趣班',
						money: '70',
						time:'共7课时',
						times: '周二、周四上课',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
				
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.placeholder-view{
	width: 100%;
	height: 100upx;
}
.Course-list-item{
	width: 100%;
	height: 295upx;
	margin: 10upx 0;
	padding: 20upx 15upx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:0px 7px 8px 0px rgba(237,237,237,0.36);
}
.Course-left{
	// width: 40%;
	width: 219upx;
	height: 219upx;
	margin-right: 35upx;
	image{
		width: 100%;
		height: 100%;
	}
}
.Course-right{
	width: 60%;
	.title{
		width: 100%;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 27upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		.title-content,.title-money{
			font-size:30upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(72,72,72,1);
		}
		.title-content{
			width: 70%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.title-money{
			width: 30%;
			color: #FF1111;
			text-align: right;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
	
	.Course-time{
		width: 100%;
		height: 60upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		.Course-lesson-time,.Course-lesson-week{
			text-align: center;
			font-size:26upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(97,97,97,1);
		}
		.spacer{
			text-align: center;
			font-size:26upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(97,97,97,1);
			margin: 0 25upx;
		}
	}
	.Course-btn{
		width: 100%;
		height: 60upx;
		margin-top: 35upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.cancel-btn{
			width: 177upx;
			height: 59upx;
			line-height: 57upx;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(129,129,129,1);
			border: 1px solid #A0A0A0;
			text-align: center;
			border-radius: 30upx;
			margin-right: 34upx;
		}
		.submit-btn{
			width: 177upx;
			height: 59upx;
			line-height: 57upx;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			background: #F09A21;
			border: 1px solid #F09A21;
			text-align: center;
			border-radius: 30upx;
		}
	}
}
</style>