78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Case } from '@/types/business/cases'
|
|
|
|
interface Props {
|
|
item: Case
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="case-rich">
|
|
<section
|
|
v-for="(section, index) in props.item.sections"
|
|
:key="`${index}-${section.title}`"
|
|
class="case-rich__card"
|
|
>
|
|
<h3 v-if="section.title" class="case-rich__title">
|
|
{{ section.title }}
|
|
</h3>
|
|
<div class="case-rich__html" v-html="section.content" />
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.case-rich {
|
|
.flex(column, flex-start, stretch);
|
|
gap: @spacing-base;
|
|
|
|
&__card {
|
|
padding: @spacing-lg;
|
|
border-radius: @radius-base;
|
|
background: @white;
|
|
}
|
|
|
|
&__title {
|
|
.flex(row, flex-start, center);
|
|
gap: @spacing-sm;
|
|
margin-bottom: @spacing-base;
|
|
font-size: @font-size-lg;
|
|
font-weight: 600;
|
|
color: @heading-color;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
background: @primary-color;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&__html {
|
|
font-size: @font-size-base;
|
|
line-height: 1.8;
|
|
color: @text-color;
|
|
word-break: break-word;
|
|
|
|
:deep(p) {
|
|
margin-bottom: @spacing-sm;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
:deep(img),
|
|
:deep(video) {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: @spacing-sm;
|
|
border-radius: @radius-sm;
|
|
}
|
|
}
|
|
}
|
|
</style>
|