<template>
    <view class="mine-history">
		<view v-for="(item, index) in historyList" :key="index" class="history-item">
			<view class="item-title">
				<img src="" />
				<view>小米店铺</view>
			</view>
			<view class="item-image"></view>
			<view class="item-info">
				<view class="info-name">{{ item }}</view>
				<view>...</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			historyList: [1, 2, 3]
		};
    },
    onLoad() {},
    methods: {}
};
</script>
<style lang="scss" scoped>
.mine-history{
	background: #ECECEC;
	padding: 20rpx 30rpx 0;
	display: flex;
	flex-wrap: wrap;
	.history-item {
		width: 220rpx;
		height: 290rpx;
		background: rgba(255,255,255,1);
		border-radius: 10rpx;
		padding: 20rpx 20rpx 22rpx;
		margin: 0 15rpx 20rpx 0;
		.item-title {
			display: flex;
			align-items: center;
			> img {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				border: 1rpx solid #000;
				margin-right: 19rpx;
			}
			> view {
				font-size: 24rpx;
				color: rgba(51,51,51,1);
			}
		}
		.item-image {
			margin: 20rpx 0 17rpx;
			width: 180rpx;
			height: 140rpx;
			border-radius: 10rpx;
			border: 1rpx solid #000;
		}
		.item-info {
			display: flex;
			align-items: center;
			.info-name {
				font-size: 22rpx;
				color: rgba(51,51,51,1);
			}
		}
	}
}
</style>
