school_ecology_h5/components/org-item/org-item.vue

<template>
	<view class="content">
		<!-- 名字区域 -->
		<view class="msg">
			<view class="msg_name">{{ item.categoryName }}</view>
			（{{ item.count }}）
		</view>

		<!-- 图标区域 -->
		<img class="img" src="@/static/images/2.png" />

		<!-- 背景图区域 插槽 -->
		<slot name="bg"></slot>
	</view>
</template>

<script setup>
defineProps(['item'])
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	width: 347rpx;
	height: 177rpx;
	font-size: 28rpx;
	font-weight: bold;
	border-radius: 12rpx;
	background-color: #f0f7ff;
	border: 2rpx solid #e6e6e6;

	.msg {
		display: flex;
		margin: 27rpx 0 0 24rpx;

		.msg_name {
			max-width: 180rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.img {
		margin: 30rpx 0 0 66rpx;
		width: 70rpx;
		height: 47rpx;
	}
}
</style>