思路：

（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>

效果展示：

（左右滑动） 

原博文

2020-11-04 19:41 −

最近在做app的UI自动化测试过程中，遇到UI大改版的问题。原本使用Airtest的图片比对来实现点击事件，改版后原有用例无法识别只能重写用例（ps：我们的app不是native开发使用的flutter技术所以无法通过元素来定位）想到工作量太大也不是解决问题的根本办法，观察新版UI发现图标和颜色改变...

0

166

相关推荐

2019-09-28 21:13 −

Python python是一种跨平台的计算机程序设计语言，是一种面向对象的动态类型语言。 最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。(以上摘自百度百科) Python是一种解释型脚本语言，可以应用于以下领域...

0

1961

2019-12-24 19:55 −

1 Web应用 https://www.cnblogs.com/yuanchenqi/articles/8869302.html2 http协议 https://www.cnblogs.com/yuanchenqi/articles/8875623...

2019-12-04 22:39 −

是不是看到题目Python就点进来了。

其实，只是个蒟蒻......

不知道学校发了什么疯，现在连普通的信息课都在讲Python，是怕我们消化不了c++吗？

虽然心里很不甘心，但不得不承认，许多时候（实际上是大部分），Python都比c++更简单。

原因：

1.Python不用打头文件（咳咳，纯属个...

0

465

2019-12-06 14:02 −

学习提纲

生成指定范围的数值列表，语法格式如下：

生成一个包括10哥随机数的列表，要求数的范围在10-100之间，代码如下

import random

randomnumber = [random.randint(10,100) for i in range(...

2019-12-18 15:00 −

保留字：and，as，assert，break，class，continue，

def，del，elif，else，except，finally，

forfromFalse，global，if，import，

in，is，lambda，nonlocal，not...

0

181

2019-12-24 21:14 −

python-requests

python-requests

作用：能够模拟浏览器向服务器发送请求的库

requests库的主要方法

方法描述

requests.request()构造一个请求，支持以下各种方法requests.get()获取html的主要方法requests.head(...

0

525

2019-12-11 17:16 −

Redis

redis是一个key-value存储系统。

赋值：set name alex查看所有key：keys *查看key对应的value：get name只存活2秒钟：set name jack ex 2

Python操作Redissudo pip install redis

1、操作模式r...

2019-11-27 16:55 −

1.安装

需要安装得模块名为pyyaml，直接pip install pyyaml

导入，直接import yaml

2.yaml文件的格式

文件格式输出可以是列表，可以是字典，可以嵌套。层级关系用空格区分，切记，不支持tab缩进

a）键值对形式

user: admin

pwd: 123

...

2019-11-23 12:52 −

# Python3随手记 - [Python3随手记](#python3%e9%9a%8f%e6%89%8b%e8%ae%b0) - [list方法](#list%e6%96%b9%e6%b3%95) - [os](#os) - [imageio](#imageio) - [Python I...