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 class="web-sources flex">
				<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%;
		// height: 11.2rem;
		margin: 1.2rem 0 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;
		margin-bottom: 0;
		padding: 2rem 3rem;
		max-width: 52.5rem;
		box-sizing: border-box;
		height: 8rem;
		&.is-url {
			background: url('@/assets/images/link-card.png') no-repeat;
			background-size: 100% 100%;
			// margin: 2.4rem 0;
		}
		&.is-sketch {
			background: url('@/assets/images/sketch-card.png') no-repeat;
			background-size: 100% 100%;
			.report-card-header {
				margin-bottom: 0;
			}
		}

		&-header {
			font-family: 'Medium';
			font-size: 1.2rem;
			// margin-bottom: 1.3rem;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			.web-sources {
				column-gap: 0.8rem;
				align-items: flex-start;
				word-break: break-all;
				.link-icon {
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
		&-content {
			font-family: 'Regular';
			font-weight: 300;
			font-size: 1.2rem;
			color: #7c7c7c;
		}
	}
</style>