zhibo/components/release-item-card/release-item-card.vue

<template>
	<view class="release_item-card">
		<view class="align-center relative">
			<view class="relative" v-if="data.user">
				<u-avatar :src="data.user.head_img" size="85rpx"></u-avatar>
				<view :class="data.user.sex==0?'gender':'gender gender-woman'">
					<u-icon :name="data.user.sex==0?'man':'woman'" color="#fff"></u-icon>
				</view>
			</view>
			<view class="flex-1 ml20 column justify-between" style="height: 80rpx;">
				<text class="bold fs26">{{data.contacts}}</text>
				<text>{{data.create_time}}</text>
			</view>
			<view class="right_tag centerV">已报名{{data.enroll_num}}人</view>
		</view>
		<text class="mt40 ellipsis lines-2">{{data.content}}</text>
		<view class="mt20 images" v-if="data.images">
			<u-image v-for="(item,index) in data.images.split(',')" :key="index" :src="item" showLoading lazyLoad width="100%"
				height="200rpx" radius="20rpx" @click.passive.stop="previewImage(0,data.images.split(','))" />
		</view>
		<view class="mt20 justify-between">
			<view class="align-center flex-1 mr30 base-bg-2 p10 radius16">
				<u-icon name="clock" color="#EB6446"></u-icon>
				<text class="ml20">{{data.set_of_time}}</text>
			</view>
			<view class="align-center  base-bg-2 ptb10 plr30 radius16" style="width: 20%;">
				<u-icon name="account" color="#EB6446"></u-icon>
				<text class="ml20">{{data.num}}人</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		previewImage
	} from '@/core/app';
	import config from '@/core/config/index.js';
	name: "release-item-card"
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
</script>

<style lang="scss">
	.release_item-card {
		padding: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		font-size: 22rpx;

		.gender {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 30rpx;
			height: 30rpx;
			background: #67b4d5;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&-woman {
				background: #f9719a;
			}
		}

		.right_tag {
			position: absolute;
			right: 0;
			top: 0;
			padding: 10rpx 20rpx;
			height: calc(61rpx - 20rpx);
			background: linear-gradient(102deg, #F1AE73 0%, #EC5232 100%);
			border-radius: 16rpx;
			color: #fff;
		}

		.images {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 30rpx;
		}
	}
</style>