feat: url link

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

@@ -1,49 +1,79 @@
 <template>
-	<div class="report-card">
+	<div class="report-card" :class="{ 'is-url': isUrl }">
 		<div class="report-card-header">
-			<span>{{ title }}</span>
+			<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>{{ title }}</span>
+			<span v-if="!isUrl">{{ content }}</span>
+			<span v-else>Destination URL</span>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	const props = defineProps<{
-		title: string
-	}>()
+	// 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%;
+		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;
+		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;
+			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;
 		}
-    &-content{
-      font-family: 'Regular';
-      font-weight: 300;
-      font-size: 1.6rem;
-      color: #7c7c7c;
-    }
 	}
 </style>