思路: 字体的 div 使用 position:aboslute
<template>
<view class="course">
<view>
<u-tabs :list="Tlist" :is-scroll="false" inactive-color="#666666" active-color="#222222" :current="current" @change="change">
</u-tabs>
</view>
<view class="wrap">
<view class="cList">
<view class="card">
<image class="img" src="https://wx3.sinaimg.cn/crop.0.44.1305.725/0088iClIly1glph1kgmywj31090mowve.jpg" >
</image>
<view class="desc">
<view class="title">
<text>啊实打实v啊v阿飞青蛙恶气啊啊撒啊啊啊啊啊</text>
</view>
<view class="bottom">
<view class="level">
<text>k1零基础</text>
</view>
<view class="time">
<text>k1零基础</text>
</view>
<view class="people">
<text>k1零基础</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
Tlist: [{
name: '热身'
},
{
name: '减脂'
}, {
name: '增肌'
}, {
name: '塑型'
}
]
}
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>
<style lang="scss" scoped>
.course {
.wrap {
margin: 30rpx 20rpx;
.cList {
.card {
background: #000;
.img {
width: 100%;
height: 300rpx;
border-radius: 10rpx;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
.desc {
height: 120rpx;
margin-top: -120rpx;
position:absolute;
.title {
color: #fff;
font-size: 38rpx;
margin-left: 20rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom {
display: flex;
margin-top: 10rpx;
font-size: 28rpx;
position:absolute;
color: #f7f7f7;
margin-left: 24rpx;
.level {}
.time {}
.people {}
}
}
}
}
}
}
</style>