H5_QiCaiYao/page_salesman_customer/Focuson_commodities/Focuson_commodities.vue

<template>
	<view class="head">
		<view class="df aic jcsb">
			<div class="thirty">近30天收藏/浏览过的</div>
			<div class="specific-date">2022-09-12</div>
		</view>
		<view class="list">
			<div class="df aic">
				<div class="list-img">
					<div class="collect df aic jcsa" style="background: #FF7D02;">收藏</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)"></image>
				</div>
				<div class="list-list">
					<div class="list-name">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="df aic remarks">
						<div class="remarks-address">产地：山东</div>
						<div class="unit-price">规格：0.5kg/袋</div>
					</div>
					<div class="price">
						￥28.88<span>/袋</span>
					</div>
				</div>
				<div class="time">×4</div>
			</div>
			<div class="df aic">
				<div class="list-img">
					<div class="collect df aic jcsa" style="background: #00C594;">浏览</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)"></image>
				</div>
				<div class="list-list">
					<div class="list-name">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="df aic remarks">
						<div class="remarks-address">产地：山东</div>
						<div class="unit-price">规格：0.5kg/袋</div>
					</div>
					<div class="price">
						￥28.88<span>/袋</span>
					</div>
				</div>
				<div class="time">×4</div>
			</div>
		</view>
		<view class="df aic jcsb">
			<div class=""></div>
			<div class="specific-date mt">2022-09-11</div>
		</view>
		<view class="list">
			<div class="df aic">
				<div class="list-img">
					<div class="collect df aic jcsa" style="background: #FF7D02;">收藏</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)"></image>
				</div>
				<div class="list-list">
					<div class="list-name">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="df aic remarks">
						<div class="remarks-address">产地：山东</div>
						<div class="unit-price">规格：0.5kg/袋</div>
					</div>
					<div class="price">
						￥28.88<span>/袋</span>
					</div>
				</div>
				<div class="time">×4</div>
			</div>
			<div class="df aic">
				<div class="list-img">
					<div class="collect df aic jcsa" style="background: #00C594;">浏览</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)"></image>
				</div>
				<div class="list-list">
					<div class="list-name">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="df aic remarks">
						<div class="remarks-address">产地：山东</div>
						<div class="unit-price">规格：0.5kg/袋</div>
					</div>
					<div class="price">
						￥28.88<span>/袋</span>
					</div>
				</div>
				<div class="time">×4</div>
			</div>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.head{
	padding: 24rpx;
	.mt{
		margin: 24rpx 6rpx 0 0;
	}
	.thirty{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #585858;
		line-height: 40rpx;
	}
	.specific-date{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #585858;
		line-height: 40rpx;
	}
	.list{
		width: 702rpx;
		// height: 448rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		.list-list{
			margin-left: 24rpx;
			.list-name{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.remarks{
				margin-top: 16rpx;
				.remarks-address{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-right: 16rpx;
				}
				.unit-price{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}
			
		}
		.list-img{
			width: 176rpx;
			height: 176rpx;
			border-radius: 8rpx;
			position: relative;
			.collect{
				position: absolute;
				top: 12rpx;
				left: 0;
				width: 66rpx;
				height: 36rpx;
				border-radius: 0rpx 21rpx 21rpx 0rpx;
				opacity: 0.83;
				font-size: 20rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 28rpx;
				z-index: 10;
			}
			image{
				width: 176rpx;
				height: 176rpx;
				border-radius: 8rpx;
			}
		}
		.price{
			font-size: 24rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #F33B50;
			line-height: 40rpx;
			margin-top: 46rpx;
			span{
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 34px;
				margin-left: 4rpx;
			}
		}
		.time{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin-left: 20rpx;
		}
	}
}
</style>