newyqg/pages/hall/history.vue

<template>
	<view class="center">
		<view class="product">
			<image class="product-image" src="../../static/img/afternoon.png" mode=""></image>
			<view class="product-font font1">趣豆商城挂售礼盒</view>
			<view class="product-font font2">艺术家：李丹丹</view>
			<view class="product-font font2">创作时间：2022年01月30日</view>
		</view>
		<view class="main">
			<view class="main-item">
				<view class="main-left">日期</view>
				<view class="main-right">归属人</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
			<view class="main-item">
				<view class="main-left">2022年01月20日</view>
				<view class="main-right">林兰</view>
			</view>
		</view>
		<view class="ma">
			<view class="ma-main">
				
			</view>
			<view class="ma-font">
				溯源二维码
			</view>
		</view>
	</view>
</template>

<script></script>

<style lang="scss">
.center {
	background: #f8f8f8;
	height: auto;
	min-height: 100%;
}
.product {
	width: 670rpx;
	padding: 44rpx 0 40rpx 0;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 34rpx auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	.product-image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}
	.product-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1d2023;
	}
	.font1 {
		margin-top: 34rpx;
	}
	.font2 {
		margin-top: 44rpx;
	}
}
.main {
	width: 670rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	.main-item:first-child {
		border-top: none;
	}
	.main-item {
		padding: 2rpx 20rpx;
		display: flex;
		align-items: center;
		height: 104rpx;
		border-top: 1px solid #dddddd;
		.main-left {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1d2023;
		}
		.main-right {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1d2023;
		}
	}
}
.ma {
	width: 670rpx;
	padding: 46rpx 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	.ma-main {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		background: #000;
	}
	.ma-font {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1D2023;
		margin-top: 34rpx;
		text-align: center;
	}
}
</style>