104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
<template>
|
|
<main class="agreement-preview-page">
|
|
<section class="agreement-preview-card">
|
|
<article class="agreement-content">
|
|
<p
|
|
v-for="(paragraph, index) in currentDoc.paragraphs"
|
|
:key="`${paragraph.slice(0, 12)}-${index}`"
|
|
class="agreement-paragraph"
|
|
:class="{
|
|
'agreement-paragraph--heading': isHeadingParagraph(paragraph),
|
|
'agreement-paragraph--sub': isSubParagraph(paragraph)
|
|
}"
|
|
v-html="paragraph"
|
|
/>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import docs from './agreementDocs'
|
|
|
|
export default {
|
|
name: 'AgreementPreview',
|
|
computed: {
|
|
currentDoc() {
|
|
return docs[this.$route.params.type] || docs.user
|
|
}
|
|
},
|
|
methods: {
|
|
isHeadingParagraph(paragraph) {
|
|
return /^<strong>[^<]+<\/strong>$/.test(String(paragraph || '').trim())
|
|
},
|
|
isSubParagraph(paragraph) {
|
|
const text = String(paragraph || '').trim()
|
|
return /^(?:\d+\.\d+\.|\d+\.\s|[0-9]+\.\s)/.test(text.replace(/<[^>]+>/g, ''))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.agreement-preview-page {
|
|
height: 100vh;
|
|
min-height: 100vh;
|
|
padding: 48px 24px 64px;
|
|
overflow-y: auto;
|
|
color: #111827;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.agreement-preview-card {
|
|
width: min(920px, 100%);
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.agreement-content {
|
|
color: #374151;
|
|
font-size: 15px;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.agreement-content p {
|
|
margin: 0 0 14px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.agreement-content p.agreement-paragraph--heading {
|
|
margin-top: 6px;
|
|
margin-bottom: 10px;
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.agreement-content p.agreement-paragraph--sub {
|
|
padding-left: 1.25em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
::v-deep .agreement-content strong {
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.agreement-content p:first-child {
|
|
color: #0f172a;
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.agreement-content p:first-child ::v-deep strong {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.agreement-preview-page {
|
|
padding: 28px 16px 36px;
|
|
}
|
|
}
|
|
</style>
|