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

<template>
	<view class="page">
		<view class="top u-flex u-row-between">
			<view class="u-flex">
				<text class="fen">教材级别</text>
				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
				</image>
			</view>
			<view class="u-flex">
				<text class='fen'>教学层次</text>
				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
				</image>
			</view>
			<view class="u-flex">
				<text class='fen'>专业分类</text>
				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
				</image>
			</view>
			<view class="" class='fen'>获奖教材</view>
			<view class="new">新书推荐</view>
		</view>
		<view class="u-flex u-row-between" style="flex-wrap: wrap;">
			<view class="" v-for="(item,index) in 5" :key="index" style="margin-top: 26rpx;">
				<image src="/static/logo.png" style="width: 334rpx;height: 460rpx;" mode=""></image>
				<view class="title">新时代大学生劳动教育教…</view>
				<view class="writer">丁爱萍，林秀丽</view>
				<view class="" style="margin-top: 8rpx;">
					<text class="ding">定价</text>
					<text class="money">¥38.5</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 20rpx;
	}

	.writer {
		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: 400;
		color: #CC3300;
	}

	.ding {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
	}

	.page {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 28rpx 24rpx;
	}

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

		.new {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #06A971;
		}
	}
</style>