null/pages/mine/myCollection.vue

<template>
	<view class="page">
		<view class="item-wrap" v-for="(item,idx) in 3" :key="idx">
			<view class="ic-wrap align-center justify-center">
				<!-- <image src="/static/love.png" mode="widthFix" class="ic"></image> -->
				<image src="/static/c-lovefull.png" mode="widthFix" class="ic"></image>
			</view>
			<view class="t align-center">
				<image src="/static/temp/pro.png" mode="aspectFill" class="img"></image>
				<view class="info">
					<view class="name clamp">
						幸福西饼万达店
					</view>
					<view class="loc clamp">
						河东区万达广场1F东门入口
					</view>
				</view>
			</view>
			<view class="b">
				距离您 <text class="m">864m</text>
			</view>
		</view>
		<safe-area bgColor="#f8f8f8" />
	</view>
</template>

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

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.page{
	padding: 30rpx;
}
.item-wrap{
	width: 690rpx;
	// height: 186rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	border-radius: 20rpx;
	position: relative;
	margin-bottom: 24rpx;
	padding-bottom: 30rpx;
	.ic-wrap{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		.ic{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.t{
		height: 133rpx;
		padding: 0 24rpx;
		.img{
			width: 68rpx;
			height: 68rpx;
			border-radius: 68rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.name{
			width: 500rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.loc{
			width: 500px;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 20rpx;
		}
	}
	.b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		max-width: 500rpx;
		padding: 0 27rpx;
		.m{
			color:#92B99C;
		}
	}
	
}
</style>