discounts-minapp/study/index.vue

<template>
	<view class="study">
		<view class="top-box">

			<view class="search-box">
				<input class="search" type="text" :value="search" />
				<image class="icon" src="../static/search.png" mode=""></image>
				<button class="btn" type="default">搜索</button>
			</view>
			
			<image class="banner" src="../static/yanxue.png" mode=""></image>
			
			<view class="type-box">
				<view class="type-item" @click="jump('./inspect')">
					<image class="icon" src="../static/yanxue1.png" mode=""></image>
					<view class="sub-title">
						虚拟考察
					</view>
				</view>
				
				<view class="type-item" @click="jump('./route')">
					<image class="icon" src="../static/yanxue2.png" mode=""></image>
					<view class="sub-title">
						个性路径
					</view>
				</view>
				
				<view class="type-item" @click="jump('./schedule')">
					<image class="icon" src="../static/yanxue3.png" mode=""></image>
					<view class="sub-title">
						学习进度
					</view>
				</view>
				
				<view class="type-item" @click="jump('./community')">
					<image class="icon" src="../static/yanxue4.png" mode=""></image>
					<view class="sub-title">
						互动社区
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="title-box">
				<view class="title">
					热门课程
					
				</view>
				
				<view class="more">
					查看更多
					<u-icon name="arrow-right" size="24rpx" color="#121212"></u-icon>
				</view>
			</view>
			
			<view class="hot-list">
				<view class="item">
<!-- 					<image class="icon" src="https://alipic.lanhuapp.com/XDSlicePNGMAX04b8341240661e82881f895f65bedb357bfc0052be13668c09975dcf269ac570.png" mode=""></image> -->
					<zs-img src="https://gd-hbimg.huaban.com/89311fee7c0633833d6f55bc6f987ecf2b4d580598985-EEpwsJ" width="100%" height="164rpx" radius="half"></zs-img>
					<view class="title">
						少儿编程培训基础班
					</view>
					<view class="author-info">
						<image class="head" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623" mode=""></image>
						<view class="name">
							李老师
						</view>
					</view>
				</view>
				
				<view class="item">
	<!-- 				<image class="icon" src="https://alipic.lanhuapp.com/XDSlicePNGMAXe07fd43e559405e57406bd95070f7f221dc99bba9ab4c31834bb2bbe1eed8c53.png" mode=""></image> -->
					<zs-img src="https://gd-hbimg.huaban.com/15f6b3f398b496225424ea69676e9484bb7935283de93-NWPARD" width="100%" height="164rpx"></zs-img>
					<view class="title">
						少儿编程培训基础班
					</view>
					<view class="author-info">
						<image class="head" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623" mode=""></image>
						<view class="name">
							李老师
						</view>
					</view>
				</view>
			</view>
			
			<view class="title-box">
				<view class="title">
					热门课程
					
				</view>
				
				<view class="more">
					查看更多
					<u-icon name="arrow-right" size="24rpx" color="#121212"></u-icon>
				</view>
			</view>
			
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<zs-img :src="item.img" width="164rpx" height="164rpx"></zs-img>
					<view class="info">
						<view class="title">
							少儿编程培训基础班
						</view>
						<view class="types">
							AI培训 | 编程
						</view>
						<view class="author-info">
							<image class="head" :src="item.head" mode=""></image>
							<view class="name">
								李老师
							</view>
						</view>
					</view>
					
					<image class="play" src="../static/play.png" mode=""></image>
				</view>
				
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				list:[
					{
						img:'https://gd-hbimg.huaban.com/5519accd3d95a5f992bd2f485fa5ca04c9af67be56754-gus75N_fw658webp',
						head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623'
					},
					{
						img:'https://gd-hbimg.huaban.com/f6c02f600c1de991ba0e457c263f70d076c61cb535e9c-Yi5djy',
						head:'https://gd-hbimg.huaban.com/54c90225377e9ddb9aa260a735f429edf15309361cb73-QCueku_fw658webp'
					},
					{
						img:'https://gd-hbimg.huaban.com/e893b5ded9bcba900a5dde2dabe09d1cf8b4fa43a31c4-usH1ui_fw658webp',
						head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1e0466ff-3a60-4544-9630-318439662daf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695371853&t=0d9cf33ea0b96e7e0d2778264668a623'
					}
				]
			}
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" >
	.study {
		background: #F9F9F9;
		padding-bottom: 100rpx;
		.top-box{
			background: #fff;
			padding: 0 30rpx;
			.search-box {
				position: relative;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				margin-bottom: 24rpx;
				background: #F9F9F9;
				.icon {
					width: 37rpx;
					height: 37rpx;
					position: absolute;
					top: 50%;
					left: 36rpx;
					transform: translateY(-50%);
				}

				.search {
					line-height: 80rpx;
					height: 80rpx;
					padding-left: 100rpx;
					padding-right: 130rpx;
				}

				.btn {
					position: absolute;
					top: 8rpx;
					right: 10rpx;
					width: 108rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: linear-gradient(180deg, #9DC1FF 0%, #1C92FD 100%);
					color: #fff;
					font-size: 28rpx;
					border-radius: 32rpx;
					padding: 0;
				}
			}
			
			.banner{
				width: 100%;
				height: 240rpx;
			}
			
			.type-box{
				display: flex;
				.type-item{
					flex: 1;
					text-align: center;
					padding: 30rpx 0;
					.icon{
						width: 64rpx;
						height: 64rpx;
					}
					.sub-title{
						font-size: 24rpx;
						font-weight: 400;
						color: #121212;
						margin-top: 16rpx;
					}
				}
			}
		}
		
		.content{
			padding: 0 30rpx;
			.title-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;
				.title{
					font-size: 32rpx;
					font-weight: bold;
					color: #0F0F0F;
					position: relative;
					z-index: 1;
					&::before{
						content: '';
						position: absolute;
						top: 50%;
						left: -10rpx;
						z-index:0;
						transform: translateY(-50%);
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						background: linear-gradient(180deg, #9DC1FF 0%, #1C92FD 100%);
						opacity: .6;
					}
				}
				.more{
					font-size: 24rpx;
					font-weight: 400;
					color: #121212;
					display: flex;
				}
			}
			
			.hot-list{
				display: flex;
				justify-content: space-between;
				.item{
					width: 332rpx;
					height: 302rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					.icon{
						width: 100%;
						height: 164rpx;
					}
					.title{
						font-size: 28rpx;
						font-weight: bold;
						color: #0F0F0F;
						padding: 20rpx;
					}
					.author-info{
						display: flex;
						align-items: center;
						.head{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							background: #999;
							margin-left: 20rpx;
						}
						.name{
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
						}
					}
				}
			}
			
			.list{
				.item{
					background: #fff;
					padding: 20rpx;
					border-radius: 16rpx;
					display: flex;
					margin-bottom: 20rpx;
					.icon{
						width: 164rpx;
						height: 164rpx;
					}
					.info{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						.title{
							font-size: 28rpx;
							font-weight: bold;
							color: #0F0F0F;
						}
						.types{
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
						.author-info{
							display: flex;
							align-items: center;
							.head{
								width: 48rpx;
								height: 48rpx;
								border-radius: 50%;
								background: #999;
							}
							.name{
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								margin-left: 10rpx;
							}
						}
				
					}
					.play{
						width: 40rpx;
						height: 40rpx;
						align-self: center;
					}
				}
			}
		}
	}
</style>