football/pages/course/index/index.vue

<template>
	<view class="course">
		<!-- 头部 -->
		<view class="custom-header-container">
			<view class="header-bg" :style="{height:headerBgHeight}">
				<image src="../../../static/image/course/bg.png"/>
			</view>
			<view class="custom-header-status-bar" :style="{height:getStausBarHeight}"></view>
			<view class="custom-header-top-container">
				<view class="custom-header-title">课程报名</view>
			</view>
		</view>
		
		<view class="banner">
			<swiper class="swipe" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item :url="item.url" v-for="(item, index) in bannerImg" :key="index">
					<image :src="item.img" mode="aspectFill" :title="item.title" class="banner-img"/>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="course-list-icon">
			<view class="img">
				<image src="../../../static/image/course/creation.png" mode=""></image>
			</view>
			<text>课程报名</text>
		</view>
		<view class="course-list">
			<view class="course-list-item" v-for="(item, index) in courseListData" :key="index">
				<view class="course-item-left">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="course-item-right">
					<view class="course-item-title">
						{{item.title}}
					</view>
					<view class="course-item-content">
						{{item.content}}
					</view>
					<view class="course-item-moneyAndBtn">
						<view class="moneyAndBtn-money">
						   <text>￥</text> 30.00
						</view>
						<view class="moneyAndBtn-btn" @click="navTo">
							立即报名
						</view>
					</view>
				</view>
			</view>
			<view class="placeholder-view">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'courseIndex',
		data() {
			return {
				courseListData:[
					{
						img:'../../../static/image/course/img1.png',
						title: '4-6岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img2.png',
						title: '7-9岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img3.png',
						title: '9-12岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../../static/image/course/img4.png',
						title: '12-15岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},

				],
				bannerImg:[
					{img:'../../../static/image/course/banner.png'}
				]
			}
		},
		computed:{
			getStausBarHeight(){
				try {
					const res = uni.getSystemInfoSync();
					return res.statusBarHeight + 'px';
				} catch (err) {
					console.log(err)
				}
			},
			headerBgHeight(){
				try {
					const res = uni.getSystemInfoSync();
					return 120+44+res.statusBarHeight + 'px';
				} catch (err) {
					console.log(err)
				}
			}
		},
		methods: {
			navTo(){
				uni.navigateTo({
					url: 'pages/goods/goods'
				})
			}
		}
	}
</script>

<style lang="scss">
.custom-header-container{
	width: 100%;
	top: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	font-size: 26upx;
	background: transparent;
	.header-bg{
		width: 100%;
		position: absolute;
		overflow: hidden;
		z-index: -1;
		image{
			width: 100%;
			height: 230px;
		}
	}
	.custom-header-status-bar{
		width: 100%;
		top: 0;
		position: sticky;
		z-index: 100;
	}
	.custom-header-top-container{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 15upx;
		.custom-header-title{
			height: 44px;
			line-height: 44px;
			font-size: 36upx;
			font-weight:400;
			font-family:Source Han Sans CN;
			color: #FBF9F9;
		}
	}
	.cu-bar{
		width: 100%;
		height: 55px;
	}
	.head-search{
		width: 100%;
		height: 60upx;
		.head-search-item{
			width: 690upx;
			height: 65upx;
			background: #fff;
			border-radius: 50%;
		}
	}
}	

.banner{
	width: 94vw;
	height: auto;
	margin: 0 3vw;
	padding: 5vw 0;
	z-index: 1;
	.swipe {
		width: 100%;
		height: 42vw;
		/* background: #eee; */
		border-radius: 10px;
		overflow: hidden;
		z-index: 1;
		.banner-img{
			width: 100%;
			height: 100%;
		}
	}
}
	
.course-list-icon{
	width: 100%;
	height: 60upx;
	padding-left: 20upx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 30upx 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	.img{
		width: 29upx;
		height: 31upx;
		margin-right: 10upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	text{
		font-size:34upx;
		font-family:Source Han Sans CN;
		font-weight:500;
		color:rgba(61,61,61,1);
	}
}
.placeholder-view{
	width: 100%;
	height: 100upx;
}
.course-list-item{
	width: 100%;
	height: 242upx;
	padding: 15upx;
	border-bottom: 1rpx solid #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.course-item-left{
	width: 251upx;
	height: 200upx;
	margin-right: 20upx;
	image{
		width: 100%;
		height: 100%;
	}
}
.course-item-right{
	.course-item-title{
		width: 430upx;
		font-size:34upx;
		font-family:Source Han Sans CN;
		font-weight:500;
		color:rgba(61,61,61,1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.course-item-content{
		width: 430upx;
		height: 35upx;
		margin: 15upx 0 20upx 0;
		font-size:26upx;
		font-family:Source Han Sans CN;
		font-weight:400;
		color:rgba(112,112,112,1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.course-item-moneyAndBtn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.moneyAndBtn-money{
			font-size:34upx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color: #FF4800;
			text{
				font-size:34upx;
				font-family:Source Han Sans CN;
				font-weight:500;
				color: #FF4800;
				margin: 0 8upx;
			}
		}
		.moneyAndBtn-btn{
			font-size:34upx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color: #fff;
			background: #F09A21;
			padding: 10upx 22upx;
			text-align: center;
			box-shadow: 0 4px 10px #999;
			border-radius: 8upx;
		}
	}
}
</style>