h5-tiyu/components/ty-video/ty-video.vue

<template>
	<view class="page u-flex u-row-between">
		<view class="item" v-for="(item,index) in 20" :key="index">
			<image src="/static/logo.png" style="width: 334rpx;height: 204rpx;" mode=""></image>
			<view class="title u-line-1">武忠祥领衔|25考研数学3213</view>
			<view class="write">齐春峰</view>
			<view class="money">¥1288.00</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ty-video",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 24rpx;
	}

	.page {
		width: 750rpx;
		min-height: 70vh;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 8rpx 28rpx 34rpx;
		flex-wrap: wrap;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 330rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}

	.write {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
		margin-top: 8rpx;
	}

	.money {
		font-size: 28rpx;
		font-family: SFPro, SFPro;
		font-weight: 500;
		color: #CC3300;
		margin-top: 12rpx;
	}
</style>