FiDA_Front/src/views/home/agent/components/ReportCard.vue

<template>
	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
		<div class="report-card-header">
			<span v-if="!isUrl && !isSketch">{{ title || '' }}</span>
			<div v-else class="web-sources flex align-center">
				<span>{{ title || '' }}</span>
				<img src="@/assets/images/link.png" class="link-icon" />
			</div>
		</div>
		<div class="report-card-content">
			<span v-if="!isUrl && !isSketch">{{ content || 'markdown.md' }}</span>
			<span v-else>{{ content || '' }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	const props = withDefaults(
		defineProps<{
			title?: string
			content?: string
			isUrl?: boolean
			isSketch?: boolean
		}>(),
		{
			isUrl: false,
			title: '',
			content: '',
			isSketch: false
		}
	)
</script>

<style lang="less" scoped>
	.report-card {
		cursor: pointer;
		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;
		position: relative;
		&.is-url {
			background: url('@/assets/images/link-card.png') no-repeat;
			background-size: 100% 100%;
		}
		&.is-sketch {
			background: url('@/assets/images/sketch-card.png') no-repeat;
			padding: 2rem 3rem;
			max-width: 52.5rem;
			height: 8rem;
			box-sizing: border-box;
			background-size: 100% 100%;
			min-height: initial;
			.report-card-header {
				margin-bottom: 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;
			.web-sources {
				column-gap: 0.8rem;
				.link-icon {
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
		&-content {
			font-family: 'Regular';
			font-weight: 300;
			font-size: 1.6rem;
			color: #7c7c7c;
		}
	}
</style>