92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
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>
|