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

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

<script setup lang="ts">
	// const props = defineProps<{
	// 	title: string
	// 	isUrl?: boolean
	// }>()

	const props = withDefaults(
		defineProps<{
			title?: string
			content?: string
			isUrl?: boolean
		}>(),
		{
			isUrl: false,
			title: '',
			content: ''
		}
	)
</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;
		&.is-url {
			background: url('@/assets/images/link-card.png') no-repeat;
			background-size: 100% 100%;
		}
		// &: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;
			.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>