deming/pageE/mine/MineHistory.vue

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

<script>
export default {
    data() {
        return {
			historyList: [1, 2, 3, 6]
		};
    },
    onLoad() {},
    methods: {}
};
</script>
<style lang="scss" scoped>
.mine-history {
	min-height: 100vh;
	background: #ECECEC;
	.history-box {
		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 10rpx 20rpx 0;
			.item-title {
				display: flex;
				align-items: center;
				> img {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					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;
			}
			.item-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.info-name {
					font-size: 22rpx;
					color: rgba(51,51,51,1);
				}
				> img {
					width: 37rpx;
					height: 8rpx;
				}
			}
		}
	}
}
</style>