使用 flex布局，一行两个卡片

最新推荐文章于 2025-03-07 15:52:25 发布

.Passion

最新推荐文章于 2025-03-07 15:52:25 发布

阅读量1.3w

点赞数 9

本文链接：https://blog.youkuaiyun.com/qq_43923045/article/details/108355950

版权

前端同时被 2 个专栏收录

43 篇文章

订阅专栏

移动端

43 篇文章

订阅专栏

在这里插入图片描述

	<view class="flex justify-around flex-wrap">
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
			<video-card></video-card>
		</view>

<template>
	<view  class="video-card ">
		<view class="image">
			<image src="../../../static/demo/list2/1.jpg"></image>
		</view>
		<view class="title">
			<text>我租了个日本小姐姐陪我谈了三个钟...</text>
			 
		</view>
		<view class="bar flex justify-between">
			<view class="left">恶搞</view>
			<view class="right"><view class="more lg text-gray cuIcon-moreandroid"></view></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.video-card{
		width: 327upx;
		height: 401upx;
		border-radius: 40upx;
		.image image{
			width: 330upx;
			height: 233upx;
		}
		.title{
			font-size: 28upx;
			font-weight: bold;
		}
		.bar{
			.left{
				color: #bfbfbf;
			}
			.right{
				.more{
					width: 30upx;
					height: 50upx;
				}
			}
		}
	}
	
</style>