Web_TracerMethodology/components/tm-check-map-list/tm-check-map-list.vue

<template>
	<view class="content-wrap">
		<view class="title-wrap">
			<text>{{item.name}}</text>
			<view>
				<image src="../../static/icon-map.png"></image>
				<text>{{item.deptClassName}}</text>
			</view>
		</view>
		<view class="content">
			<text>包含{{item.pointCount || 0}}个查核要点，{{item.itemCount || 0}}个查核项目</text>
			<text>
				要点概览：
				<text v-for="(point, c) in item.pointList" :key="c">
					{{point.name}}；
				</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item']
	}
</script>

<style lang="less">
	.content-wrap {
		.title-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 25rpx;
			>text {
				font-size: 35rpx;
				line-height: 52.5rpx;
				color: #292C33;
			}
			>view {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 17.5rpx;
				height: 35rpx;
				font-size: 17.5rpx;
				line-height: 35rpx;
				color: #8F9BB3;
				background-color: #EDF2FA;
				image {
					width: 35rpx;
					height: 35rpx;
				}
				text {
					padding-left: 10rpx;
					padding-right: 20rpx;
				}
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			padding: 11.25rpx 25rpx 20rpx;
			>text {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 20rpx;
				line-height: 30rpx;
				color: #666F80;
				&:first-child {
					margin-bottom: 5rpx;
					font-weight: bold;
					color: #292C33;
				}
			}
		}
	}
</style>