<template>
	<div class="report-card">
		<div class="report-card-header">
			<span>{{ report.title }}</span>
		</div>
		<div class="report-card-content">
			<span>{{ report.content }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	const props = defineProps<{
		report: any
	}>()
</script>

<style lang="less" scoped>
	.report-card {
		width:100%;
		margin: 2.4rem 0;
		min-height: 11.2rem;
		background: url('@/assets/images/report-card.png') no-repeat;
		background-size: 100% 100%;
    padding: 2.9rem;
		overflow: hidden;
		&:first-of-type{
			margin-top: 0;
		}
		&-header {
			font-family: 'Medium';
      font-size: 1.6rem;
      margin-bottom: 1.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
		}
    &-content{
      font-family: 'Regular';
      font-weight: 300;
      font-size: 1.6rem;
      color: #7c7c7c;
    }
	}
</style>
