Jingde-town-wechat-uniapp/pages_order/service/StudyFurther.vue

<template>
	<view class="page">
		<navbar title="我要研学" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="search">
			<uv-search 
			placeholder="搜索服务" 
			v-model="keyword" 
			:animation="true"
			height="70"
			searchIconSize="44"
			>
			</uv-search>
		</view>
		
		<view class="list">
			<view class="item"
			v-for="(item,index) in 3"
			:key="index">
				<view class="image">
					<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
					<view class="type">
						报名中
					</view>
				</view>
				<view class="info">
					<view class="title">
						2024年景德镇艺术研学定金
					</view>
					<view class="price">
						￥5000.00
					</view>
				</view>
			</view>
		</view>
		
		<tabber/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style  scoped lang="scss">
.page{
	.search{
		background-color: #fff;
		height: 110rpx;
		width: 100%;
		uv-search{
			
		}
	}
	.list{
		.item{
			margin: 30rpx 20rpx 50rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx 10rpx #00000011;
			.image{
				width: 100%;
				height: 400rpx;
				position: relative;
				image{
					width: 100%;
					height: 90%;
					border-radius: 20rpx;
					margin-top: 10rpx;
				}
				.type{
					position: absolute;
					top: -10rpx;
					height: 62rpx;
					left: 30rpx;
					background-color: darkgoldenrod;
					color: #fff;
					font-size: 28rpx;
					padding: 0 18rpx;
					border-radius: 14rpx;
					line-height: 56rpx;
				}
			}
			.info{
				
				.title{
					margin-left: 14rpx;
					margin-bottom: 8rpx;
					font-size: 32rpx;
					font-weight: 700;
				}
				.price{
					font-size: 30rpx;
					margin-left: 12rpx;
					margin-bottom: 8rpx;
					color: darkgoldenrod;
				}
			}
		}
	}
}
</style>