mrr.sj.front/pages/home/components/syrCard.vue

<template>
	<view class="syr_card">
		<view :style="{ visibility: item.visible }" class="syr_item" v-for="(item, index) in showSyrList" :key="index"
			@click="onsyrClick(item)">
			<view class="imageBox">
				<image :src="item.head_photo" mode="aspectFill" class="syr_image"></image>
				<view class="distance">
					<image class="position"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/056d3548-9a6d-4ca7-8398-92078cfc47ab" />
					{{ item.distance.toFixed(2) }}km
				</view>
			</view>
			<view class="syr_info">
				<view class="syr_title_info">
					<view class="syr_title text-overflow-1">{{ item.name }}</view>
					<view class="time_info" v-if="item.earliest_reserve_time">
						<view class="time_tag">最早可约</view>
						<view class="time">{{
              item.earliest_reserve_time.slice(10, 16)
            }}</view>
					</view>
				</view>
				<view class="belong text-overflow-1">所属门店：{{ item.for_shop }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "syrCard",
		props: {
			syrList: {
				type: Array,
				default: () => [],
			},
		},
		computed: {
			showSyrList() {
				const len = this.syrList.length % 2;
				return len == 1 && len ?
					[...this.syrList, {
						...this.syrList[0],
						visible: "hidden"
					}] :
					this.syrList;
			},
		},
		methods: {
			onsyrClick(syr) {
				this.$emit("syr-click", syr);
			},

		},
	};
</script>

<style lang="less" scoped>
	.syr_card {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20rpx 18rpx;
	}

	.syr_item {
		box-sizing: border-box;
		width: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.05);

		.imageBox {
			width: 346rpx;
			height: 346rpx;
			position: relative;

			.distance {
				position: absolute;
				font-family: DINPro, DINPro;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				bottom: 14rpx;
				left: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6rpx;
				background-color: rgba(102, 102, 102, 0.6);
				padding: 4rpx 10rpx;
				border-radius: 100rpx;
				overflow: hidden;

				.position {
					width: 12rpx;
					height: 15rpx;
				}
			}
		}

		.syr_image {
			width: 346rpx;
			height: 346rpx;
		}

		.syr_info {
			padding: 20rpx 10rpx;

			.belong {
				font-size: 22rpx;
				color: #8d8d8d;
				width: 100%;
				margin-top: 8rpx;
			}

			.syr_title_info {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 20rpx;

				.syr_title {
					flex: 1;
					width: 100%;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.time_info {
					display: flex;
					align-items: center;
					font-size: 18rpx;
					// overflow: hidden;

					.time_tag {
						border-radius: 6rpx 0 0 6rpx;
						background-color: #e8101e;
						color: #fff;
						height: 31rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 4rpx;
					}

					.time {
						color: #e8101e;
						border: 1rpx solid #e8101e;
						font-family: DINPro, DINPro;
						font-weight: 500;
						border-radius: 0 6rpx 6rpx 0;
						height: 29rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 8rpx 0 1rpx;
					}
				}
			}
		}
	}
</style>