jp-education-student/pages/parents/course/course.vue

<template>
	<view>
		<view class="head">
			<u-search placeholder="搜索课程" :show-action="false" height="80"></u-search>
		</view>
		<view class="main">
			<u-swiper :list="list"></u-swiper>
			
			<view class="content">
				<view class="classify">
					<view class="item ">
						推荐
					</view>
					<view class="item chosen">
						体育
					</view>
					<view class="item ">
						声乐
					</view>
					<view class="item">
						器乐
					</view>
					<view class="item">
						书画
					</view>
					<view class="item">
						舞蹈
					</view>
					<view class="item ">
						智力
					</view>
					<view class="item">
						茶艺
					</view>
					
				</view>
				<view class="details">
					<view class="title">
						系列全部课程
					</view>
					<view class="details-box">
						<view class="item">
							跆拳道
						</view>
						<view class="item">
							围棋
						</view>
						<view class="item">
							象棋
						</view>
						<view class="item">
							乒乓球
						</view>
						<view class="item">
							篮球
						</view>
						<view class="item">
							足球
						</view>
						<view class="item">
							花式跳绳
						</view>
						
					</view>
				</view>
				
			</view>
		</view>
		
		
		
		
		
		<ParentsTabbar :current="1" ref="tabbarMain"></ParentsTabbar>
	</view>
</template>

<script>
	import ParentsTabbar from '@/components/ParentsTabbar.vue'
	export default {
		components:{
			ParentsTabbar
		},
		data() {
			return {
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		padding: 20px 16px 40px 16px;
		background-color: rgba(13, 186, 199, 1);
	}
    .main{
		background-color: rgba(244, 246, 246, 1);
		border-radius: 20px 20px 0px 0px;
		padding: 20px 16px;
		margin-top: -16px;
		.content{
			display: flex;
			margin-top: 12px;
			.classify{
				background-color: #ffffff;
				border-radius: 12px;
				width: 28%;
				text-align: center;
				padding-bottom: 84px;
				.item{
					line-height: 32px;
					margin-top: 14px;
					font-size: 16px
				}
				.chosen{
					width: 66.7%;
					margin:14px auto 0;
					border-radius: 50px;
					background-color: rgba(13, 186, 199, 1);
					color: #ffffff;
				}
			}
			.details{
				margin-left: 12px;
				width: 68.3%;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 44px;
					border-radius: 12px;
					background-color: rgba(255, 255, 255, 1);
					text-align: center;
					font-weight: bold;
				}
				.details-box{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.item{
						
						width: 44%;
						line-height: 44px;
						border-radius: 12px;
						background-color: rgba(255, 255, 255, 1);
						color: rgba(51, 51, 51, 1);
						margin-top: 12px;
						text-align: center;
						
					}
				}
			}
		}
	}
</style>