flex布局，实现简单的 视频学习列表

<template>
	<view class="video-card   align-center">
		<view class="left">
			<image src="../../../static/demo/list2/2.jpg" class="image"></image>
			
		</view>
		<view class="right">
			<text class="title">美女歌手演唱会</text>
			<view class="time">今天10:20</view>
			<view class="bar">
				<view class="left">
					<text class="lg text-gray cuIcon-video"></text>
					<text>203.6万</text>
				</view>
				<view class="right">
					<text class="lg text-gray cuIcon-comment"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script></script>

<style lang="scss" scoped>
$img-height:162rpx;
$img-width:260rpx;
.video-card {
	width: 750rpx;
	height: 255rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #d9d9d9;
	.left{
		width: $img-width;
	}

	.image {
		width: $img-width;
		height: $img-height;
		border-radius: $border-radius-15;
	}
	

	.right {
		height: $img-height;
		margin-left: 30rpx;
		margin-right: 28rpx;
		width: calc(750rpx - 260rpx);
		display: flex;
		flex-direction: column;
		.title{
			font-size: 35rpx;
			font-weight: bold;
		}
		.time{
			color:$grey-text-color;
		}
		.bar{
			color: $grey-text-color;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			line-height: 50rpx;
			height: 50rpx;
			max-height: 50rpx;
			overflow: hidden;
			.left,.right{
				height: 50rpx;
			}
		}
	}
}
</style>

最后

以上就是发嗲美女为你收集整理的flex布局，实现简单的 视频学习列表的全部内容，希望文章能够帮你解决flex布局，实现简单的 视频学习列表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。