<view class="train" >
<scroll-view scroll-x="true" >
<view class="card-content">
<view class="card-item"
style="margin-right:20rpx; display: inline-block;"
v-for="(res, sub) in item.fileList" :key="sub">
<view class="video-show">
<video :src="res.downloadUrl" type="video/mp4" ></video>
</view>
<!-- <view style="position: absolute;bottom: 0;right: 0;">
<image style="width: 200rpx;height: 166rpx;"
:src="`/static/zjz1School/classify${index + 1}.png`" mode="aspectFill" />
</view> -->
</view>
</view>
</scroll-view>
</view>
.train {
width: 100%;
.card-content {
display: flex;
overflow-x: auto;
width: 100%;
.card-item {
position: relative;
width: 410rpx;
height: 246rpx;
border-radius: 10rpx;
margin-right: 24rpx;
display: flex;
align-items: center;
justify-content: center;
.video-show {
width: 410rpx;
height: 246rpx;
border-radius: 10rpx;
overflow: hidden;
video {
width: 100%;
height: 100%;
object-fit: cover;
poster: "path/to/poster.jpg"; //视频默认图片
}
}
}
.btn {
width: 172rpx;
height: 56rpx;
background: linear-gradient(117deg, #5c8bfe 0%, #1e4df6 100%);
border-radius: 29rpx;
opacity: 1;
line-height: 56rpx;
text-align: center;
color: #fff;
font-size: 24rpx;
}
}
}
css卡片滑块
web前端妹子2023-11-07 18:09