思路：

（1）排版：使用弹性布局，将页面排列出来，再用v-for循环出来

（2）在最大的盒子加overflow-x: scroll; 达到左右滑动

（3）使用定位（子绝父相）让文字显示在图片上面

源码如下：

<template>
	<view>
		<!-- 挑战活动版块 -->
		<view class="examine">
			<view class="examine-item" v-for="(item,index) in examinelist">
				<view class="examine-plan">
					<image :src="item.image" mode="widthFix"></image>
					<image :src="item.src" class="img" mode="widthFix"></image>
					<view class="title">请输入你的名字</view>
					<view class="start-time">请输入开始时间</view>
					<view class="end-time">请输入结束时间</view>
					<view class="examine-time">
						<view class="item">
							<view class="item-num">40</view>
							<view class="item-min">min</view>
						</view>
						<view class="item-day">day 01</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				examinelist: [{
						image: '/static/home/motion4.jpg',
						src: '/static/home/3.png'
					},
					{
						image: '/static/home/motion5.jpg',
						src: '/static/home/2.png'
					},
					{
						image: '/static/home/motion6.jpg',
						src: '/static/home/3.png'
					}
				],
			}
		},
		methods: {



		}
	}
</script>
<style lang="scss">
	.examine {
		overflow-x: scroll; //左右滑动
		padding: 20upx;
		display: flex;
		width: 95%;
		margin: 30upx auto;
		.examine-item {
			position: relative; //父盒子，相对定位
			display: flex;
			width: 256upx;
			height: 383upx;
			border-radius: 20upx;
			margin-right: 50upx;
			.examine-plan {
				position: relative;
				width: 256upx;
				height: 383upx;
				border-radius: 20upx;
				.img {
					width: 80upx;
					position: absolute; 
					top: -20upx;
					left: 30upx;
				}
				.title {//子盒子
					position: absolute; //子盒子，绝对定位
					top: 95upx; //顶部与父盒子的距离
					left: 20upx; //左边与父盒子的距离
					font-size: 28upx;
					color: #FFFFFF;
				}
				.start-time {
					position: absolute;
					top: 156upx;
					left: 20upx;
					font-size: 22upx;
					color: #FFFFFF;
				}
				.end-time {
					position: absolute;
					top: 200upx;
					left: 20upx;
					font-size: 22upx;
					color: #FFFFFF;
				}
				.examine-time {
					position: absolute;
					bottom: 40upx;
					left: 20upx;
					display: flex;
					width: 90%;
					margin: auto;
					justify-content: space-between; //子盒子左右排列
					align-items: flex-end; //指最后一个子盒子
					.item {
						display: flex;
						align-items: flex-end;
						.item-num {
							font-size: 40upx;
							color: #FFFFFF;
						}
						.item-min {
							font-size: 20upx;
							color: #FFFFFF;
							vertical-align: bottom; //文字底部与父盒子底部对齐
						}
					}
					.item-day {
						font-size: 20upx;
						color: #FFFFFF;
						vertical-align: bottom;
					}
				}
				image {
					width: 256upx;
					height: 383upx;
					border-radius: 20upx;
				}
			}
		}
	}
</style>

效果展示：

（左右滑动）