思路:
(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>
效果展示:
(左右滑动)