@vigilkids/section-renderer-vue 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composables/useInlineEdit.d.ts +1 -1
- package/dist/composables/useInlineEdit.mjs +4 -2
- package/dist/composables/useLazyRender.mjs +2 -1
- package/dist/composables/useRegistry.d.ts +1 -1
- package/dist/composables/useRegistry.mjs +6 -3
- package/dist/composables/useSectionSEO.mjs +10 -5
- package/dist/composables/useSectionStyle.d.ts +1 -1
- package/dist/composables/useSectionStyle.mjs +10 -6
- package/dist/editor.d.ts +2 -2
- package/dist/editor.mjs +2 -2
- package/dist/index.d.ts +12 -12
- package/dist/index.mjs +8 -8
- package/dist/preview/createPreviewApp.mjs +12 -4
- package/dist/renderer/FallbackSection.vue +9 -3
- package/dist/renderer/LazySection.vue +25 -22
- package/dist/renderer/SectionErrorBoundary.vue +3 -1
- package/dist/renderer/SectionRenderer.vue +19 -6
- package/dist/renderer/SectionWrapper.vue +4 -5
- package/dist/sections/RichTextSection.vue +12 -12
- package/dist/sections/article/prosemirror.mjs +8 -4
- package/dist/sections/article/shared/ArticleCustomHtml.vue +1 -1
- package/dist/sections/article/shared/ArticleImage.vue +3 -3
- package/dist/sections/article/vigilkids/ArticleBulletList.vue +2 -2
- package/dist/sections/article/vigilkids/ArticleCta.vue +48 -21
- package/dist/sections/article/vigilkids/ArticleFaq.vue +11 -5
- package/dist/sections/article/vigilkids/ArticleFaqItem.vue +6 -2
- package/dist/sections/article/vigilkids/ArticleFeature.vue +16 -8
- package/dist/sections/article/vigilkids/ArticleHeading.vue +3 -4
- package/dist/sections/article/vigilkids/ArticleNotice.vue +33 -9
- package/dist/sections/article/vigilkids/ArticleProsCons.vue +6 -6
- package/dist/sections/article/vigilkids/ArticleQuestion.vue +11 -5
- package/dist/sections/article/vigilkids/ArticleQuote.vue +6 -4
- package/dist/sections/article/vigilkids/ArticleStepList.vue +8 -4
- package/dist/sections/article/vigilkids/ArticleSubheading.vue +18 -6
- package/dist/sections/article/vigilkids/ArticleTable.vue +9 -8
- package/dist/sections/article/vigilkids/ArticleToc.vue +13 -9
- package/dist/sections/article/visiva/ArticleBulletList.vue +2 -2
- package/dist/sections/article/visiva/ArticleCta.vue +127 -30
- package/dist/sections/article/visiva/ArticleFaq.vue +22 -8
- package/dist/sections/article/visiva/ArticleFeature.vue +20 -7
- package/dist/sections/article/visiva/ArticleHeading.vue +2 -2
- package/dist/sections/article/visiva/ArticleNotice.vue +7 -5
- package/dist/sections/article/visiva/ArticleProsCons.vue +37 -23
- package/dist/sections/article/visiva/ArticleQuestion.vue +18 -7
- package/dist/sections/article/visiva/ArticleQuote.vue +9 -5
- package/dist/sections/article/visiva/ArticleStepList.vue +9 -4
- package/dist/sections/article/visiva/ArticleSubheading.vue +32 -27
- package/dist/sections/article/visiva/ArticleTable.vue +79 -60
- package/dist/sections/article/visiva/ArticleToc.vue +42 -12
- package/dist/styles/products/visiva.css +1 -1
- package/package.json +10 -3
|
@@ -3,8 +3,8 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
3
3
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
|
-
import { renderContent } from '../prosemirror'
|
|
7
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { renderContent } from '../prosemirror'
|
|
8
8
|
|
|
9
9
|
const props = defineProps<{
|
|
10
10
|
blockOrder: string[]
|
|
@@ -28,19 +28,23 @@ const { editableAttrs } = useInlineEdit({
|
|
|
28
28
|
editorMode: () => !!props.editorMode,
|
|
29
29
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
30
30
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
31
|
-
onEditStart:
|
|
31
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
32
32
|
onEditEnd: () => emit('inline-edit-end'),
|
|
33
|
-
onUndoRedo:
|
|
33
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
34
34
|
})
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<template>
|
|
38
38
|
<div class="blog-quote">
|
|
39
|
-
<h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">
|
|
39
|
+
<h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">
|
|
40
|
+
{{ s.title }}
|
|
41
|
+
</h3>
|
|
40
42
|
<p class="blog-quote-text" v-html="renderedContent" />
|
|
41
43
|
<div v-if="s.attribution" class="blog-quote-footer">
|
|
42
44
|
<span class="blog-quote-divider" />
|
|
43
|
-
<p class="blog-quote-author">
|
|
45
|
+
<p class="blog-quote-author">
|
|
46
|
+
by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span>
|
|
47
|
+
</p>
|
|
44
48
|
</div>
|
|
45
49
|
</div>
|
|
46
50
|
</template>
|
|
@@ -27,18 +27,23 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
27
27
|
editorMode: () => !!props.editorMode,
|
|
28
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
30
|
-
onEditStart:
|
|
30
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
31
31
|
onEditEnd: () => emit('inline-edit-end'),
|
|
32
|
-
onUndoRedo:
|
|
32
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
33
33
|
})
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
37
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
38
38
|
<h5 v-if="blocks[blockId]" class="blog-step">
|
|
39
|
-
<span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{
|
|
39
|
+
<span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{
|
|
40
|
+
blocks[blockId]!.settings.label
|
|
41
|
+
}}</span>
|
|
40
42
|
<span>. </span>
|
|
41
|
-
<span
|
|
43
|
+
<span
|
|
44
|
+
v-bind="blockEditableAttrs(blockId, 'description')"
|
|
45
|
+
v-html="String(blocks[blockId]!.settings.description || '')"
|
|
46
|
+
/>
|
|
42
47
|
</h5>
|
|
43
48
|
</template>
|
|
44
49
|
</template>
|
|
@@ -27,57 +27,62 @@ const { editableAttrs } = useInlineEdit({
|
|
|
27
27
|
editorMode: () => !!props.editorMode,
|
|
28
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
30
|
-
onEditStart:
|
|
30
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
31
31
|
onEditEnd: () => emit('inline-edit-end'),
|
|
32
|
-
onUndoRedo:
|
|
32
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
33
33
|
})
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
37
|
<!-- blog-h3-style1: plain -->
|
|
38
|
-
<h3
|
|
39
|
-
v-if="variant === 'plain'"
|
|
40
|
-
:id="String(s.anchor || '')"
|
|
41
|
-
class="blog-h3-style1"
|
|
42
|
-
>
|
|
38
|
+
<h3 v-if="variant === 'plain'" :id="String(s.anchor || '')" class="blog-h3-style1">
|
|
43
39
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
44
40
|
</h3>
|
|
45
41
|
|
|
46
42
|
<!-- blog-h3-style2: numbered -->
|
|
47
|
-
<h3
|
|
48
|
-
v-else-if="variant === 'numbered'"
|
|
49
|
-
:id="String(s.anchor || '')"
|
|
50
|
-
class="blog-h3-style2"
|
|
51
|
-
>
|
|
43
|
+
<h3 v-else-if="variant === 'numbered'" :id="String(s.anchor || '')" class="blog-h3-style2">
|
|
52
44
|
<span class="blog-h3-style2-number" v-bind="editableAttrs('number')">{{ s.number }}</span>
|
|
53
45
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
54
46
|
</h3>
|
|
55
47
|
|
|
56
48
|
<!-- blog-h3-style3: pill -->
|
|
57
|
-
<h3
|
|
58
|
-
v-else-if="variant === 'pill'"
|
|
59
|
-
:id="String(s.anchor || '')"
|
|
60
|
-
class="blog-h3-style3"
|
|
61
|
-
>
|
|
49
|
+
<h3 v-else-if="variant === 'pill'" :id="String(s.anchor || '')" class="blog-h3-style3">
|
|
62
50
|
<span class="blog-h3-style3-badge" v-bind="editableAttrs('label')">{{ s.label }}</span>
|
|
63
51
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
64
52
|
</h3>
|
|
65
53
|
|
|
66
54
|
<!-- blog-h3-style4: icon -->
|
|
67
|
-
<h3
|
|
68
|
-
v-else-if="variant === 'icon'"
|
|
69
|
-
:id="String(s.anchor || '')"
|
|
70
|
-
class="blog-h3-style4"
|
|
71
|
-
>
|
|
55
|
+
<h3 v-else-if="variant === 'icon'" :id="String(s.anchor || '')" class="blog-h3-style4">
|
|
72
56
|
<div class="blog-h3-style4-icon-wrapper">
|
|
73
57
|
<!-- #h3-round -->
|
|
74
|
-
<svg
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
<svg
|
|
59
|
+
class="blog-h3-style4-icon"
|
|
60
|
+
width="24"
|
|
61
|
+
height="24"
|
|
62
|
+
viewBox="0 0 24 24"
|
|
63
|
+
fill="none"
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
>
|
|
66
|
+
<mask
|
|
67
|
+
id="h3-round-mask0"
|
|
68
|
+
style="mask-type: alpha"
|
|
69
|
+
maskUnits="userSpaceOnUse"
|
|
70
|
+
x="0"
|
|
71
|
+
y="0"
|
|
72
|
+
width="24"
|
|
73
|
+
height="24"
|
|
74
|
+
>
|
|
75
|
+
<rect width="24" height="24" fill="#D9D9D9" />
|
|
77
76
|
</mask>
|
|
78
77
|
<g mask="url(#h3-round-mask0)">
|
|
79
|
-
<path
|
|
80
|
-
|
|
78
|
+
<path
|
|
79
|
+
d="M14.0337 0.558447C14.5853 0.180022 15.3451 0.38452 15.6344 0.989291L17.6614 5.22613C17.7689 5.45078 17.9497 5.63206 18.174 5.73992L22.4014 7.77291C23.0042 8.06278 23.2081 8.82181 22.8315 9.37363L20.1843 13.2521C20.0445 13.457 19.9788 13.7035 19.9979 13.9511L20.3599 18.6396C20.4114 19.3066 19.8569 19.8616 19.1907 19.8099L14.5177 19.4472C14.2698 19.428 14.0229 19.4941 13.818 19.6347L9.95375 22.2858C9.40216 22.6642 8.64241 22.4597 8.35308 21.855L6.32609 17.6181C6.21862 17.3935 6.03775 17.2122 5.81348 17.1043L1.58608 15.0713C0.983319 14.7815 0.779391 14.0225 1.15601 13.4706L3.80314 9.59211C3.94293 9.38728 4.0087 9.14072 3.98959 8.89312L3.62762 4.20466C3.57612 3.53761 4.13053 2.9827 4.79682 3.03441L9.46977 3.39706C9.71768 3.4163 9.96454 3.35015 10.1694 3.20958L14.0337 0.558447Z"
|
|
80
|
+
fill="#1FB04F"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d="M8.26009 1.55404C8.54364 0.946524 9.30138 0.734741 9.85654 1.10785L13.7459 3.72178C13.9521 3.86038 14.1996 3.92415 14.4473 3.90254L19.1165 3.49501C19.7823 3.43691 20.342 3.98649 20.2968 4.65402L19.9796 9.34576C19.9628 9.59354 20.0309 9.83947 20.1727 10.043L22.8566 13.8959C23.2385 14.4441 23.0418 15.205 22.4418 15.5007L18.234 17.5742C18.0108 17.6842 17.8317 17.8672 17.7264 18.0929L15.7399 22.3491C15.4563 22.9566 14.6986 23.1684 14.1434 22.7953L10.2541 20.1814C10.0478 20.0428 9.80035 19.979 9.55264 20.0006L4.88341 20.4081C4.21766 20.4662 3.65799 19.9167 3.70313 19.2491L4.02038 14.5574C4.03714 14.3096 3.96902 14.0637 3.82728 13.8602L1.14335 10.0073C0.761488 9.45907 0.958166 8.6981 1.55813 8.40245L5.76591 6.32891C5.98914 6.21891 6.16827 6.0359 6.2736 5.81023L8.26009 1.55404Z"
|
|
84
|
+
fill="#F7FFFA"
|
|
85
|
+
/>
|
|
81
86
|
</g>
|
|
82
87
|
</svg>
|
|
83
88
|
<span class="blog-h3-style4-number">{{ s.number }}</span>
|
|
@@ -18,12 +18,15 @@ interface ColumnDef {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
function parseJsonOrArray<T>(value: unknown): T[] {
|
|
21
|
-
if (Array.isArray(value))
|
|
21
|
+
if (Array.isArray(value))
|
|
22
|
+
return value as T[]
|
|
22
23
|
if (typeof value === 'string') {
|
|
23
24
|
try {
|
|
24
25
|
const parsed = JSON.parse(value)
|
|
25
|
-
if (Array.isArray(parsed))
|
|
26
|
-
|
|
26
|
+
if (Array.isArray(parsed))
|
|
27
|
+
return parsed as T[]
|
|
28
|
+
}
|
|
29
|
+
catch {
|
|
27
30
|
/* JSON 解析失败，返回空数组 */
|
|
28
31
|
}
|
|
29
32
|
}
|
|
@@ -34,14 +37,12 @@ const variant = computed(() => String(s.value.variant || 'default'))
|
|
|
34
37
|
|
|
35
38
|
const columns = computed<ColumnDef[]>(() => {
|
|
36
39
|
const raw = parseJsonOrArray<ColumnDef | string>(s.value.columns)
|
|
37
|
-
return raw.map((item)
|
|
38
|
-
typeof item === 'string' ? { label: item } : item,
|
|
39
|
-
)
|
|
40
|
+
return raw.map(item => (typeof item === 'string' ? { label: item } : item))
|
|
40
41
|
})
|
|
41
42
|
|
|
42
43
|
const rows = computed(() =>
|
|
43
44
|
props.blockOrder
|
|
44
|
-
.filter(
|
|
45
|
+
.filter(id => props.blocks[id]?.type === 'table-row')
|
|
45
46
|
.map((id) => {
|
|
46
47
|
const block = props.blocks[id]!
|
|
47
48
|
return parseJsonOrArray<string>(block.settings.cells)
|
|
@@ -53,67 +54,35 @@ const expanded = ref(false)
|
|
|
53
54
|
|
|
54
55
|
<template>
|
|
55
56
|
<!-- blog-table: default -->
|
|
56
|
-
<div v-if="variant === 'default'" class="blog-table-
|
|
57
|
-
<
|
|
58
|
-
<thead>
|
|
59
|
-
<tr class="blog-table-header">
|
|
60
|
-
<th
|
|
61
|
-
v-for="(col, idx) in columns"
|
|
62
|
-
:key="idx"
|
|
63
|
-
:class="idx === columns.length - 1 ? 'blog-table-header-cell-last' : 'blog-table-header-cell'"
|
|
64
|
-
>
|
|
65
|
-
{{ col.label }}
|
|
66
|
-
</th>
|
|
67
|
-
</tr>
|
|
68
|
-
</thead>
|
|
69
|
-
<tbody>
|
|
70
|
-
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-row">
|
|
71
|
-
<td
|
|
72
|
-
v-for="(cell, cellIdx) in row"
|
|
73
|
-
:key="cellIdx"
|
|
74
|
-
:class="
|
|
75
|
-
cellIdx === 0
|
|
76
|
-
? 'blog-table-cell-first'
|
|
77
|
-
: cellIdx === row.length - 1
|
|
78
|
-
? 'blog-table-cell-last'
|
|
79
|
-
: 'blog-table-cell'
|
|
80
|
-
"
|
|
81
|
-
v-html="cell"
|
|
82
|
-
/>
|
|
83
|
-
</tr>
|
|
84
|
-
</tbody>
|
|
85
|
-
</table>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<!-- blog-table-plus: collapsible -->
|
|
89
|
-
<div v-else-if="variant === 'collapsible'" class="blog-table-plus-container">
|
|
90
|
-
<div
|
|
91
|
-
class="blog-table-plus-content"
|
|
92
|
-
:class="{ 'blog-table-plus-content--expanded': expanded }"
|
|
93
|
-
>
|
|
57
|
+
<div v-if="variant === 'default'" class="blog-table-scroll">
|
|
58
|
+
<div class="blog-table-wrapper">
|
|
94
59
|
<table class="blog-table">
|
|
95
60
|
<thead>
|
|
96
|
-
<tr class="blog-table-
|
|
61
|
+
<tr class="blog-table-header">
|
|
97
62
|
<th
|
|
98
63
|
v-for="(col, idx) in columns"
|
|
99
64
|
:key="idx"
|
|
100
|
-
:class="
|
|
65
|
+
:class="
|
|
66
|
+
idx === columns.length - 1
|
|
67
|
+
? 'blog-table-header-cell-last'
|
|
68
|
+
: 'blog-table-header-cell'
|
|
69
|
+
"
|
|
101
70
|
>
|
|
102
71
|
{{ col.label }}
|
|
103
72
|
</th>
|
|
104
73
|
</tr>
|
|
105
74
|
</thead>
|
|
106
75
|
<tbody>
|
|
107
|
-
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-
|
|
76
|
+
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-row">
|
|
108
77
|
<td
|
|
109
78
|
v-for="(cell, cellIdx) in row"
|
|
110
79
|
:key="cellIdx"
|
|
111
80
|
:class="
|
|
112
81
|
cellIdx === 0
|
|
113
|
-
? 'blog-table-
|
|
82
|
+
? 'blog-table-cell-first'
|
|
114
83
|
: cellIdx === row.length - 1
|
|
115
|
-
? 'blog-table-
|
|
116
|
-
: 'blog-table-
|
|
84
|
+
? 'blog-table-cell-last'
|
|
85
|
+
: 'blog-table-cell'
|
|
117
86
|
"
|
|
118
87
|
v-html="cell"
|
|
119
88
|
/>
|
|
@@ -121,16 +90,66 @@ const expanded = ref(false)
|
|
|
121
90
|
</tbody>
|
|
122
91
|
</table>
|
|
123
92
|
</div>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<!-- blog-table-plus: collapsible -->
|
|
96
|
+
<div v-else-if="variant === 'collapsible'" class="blog-table-scroll">
|
|
97
|
+
<div class="blog-table-plus-container">
|
|
98
|
+
<div
|
|
99
|
+
class="blog-table-plus-content"
|
|
100
|
+
:class="{ 'blog-table-plus-content--expanded': expanded }"
|
|
128
101
|
>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
102
|
+
<table class="blog-table">
|
|
103
|
+
<thead>
|
|
104
|
+
<tr class="blog-table-plus-header">
|
|
105
|
+
<th
|
|
106
|
+
v-for="(col, idx) in columns"
|
|
107
|
+
:key="idx"
|
|
108
|
+
:class="
|
|
109
|
+
idx === columns.length - 1
|
|
110
|
+
? 'blog-table-header-cell-last'
|
|
111
|
+
: 'blog-table-header-cell'
|
|
112
|
+
"
|
|
113
|
+
>
|
|
114
|
+
{{ col.label }}
|
|
115
|
+
</th>
|
|
116
|
+
</tr>
|
|
117
|
+
</thead>
|
|
118
|
+
<tbody>
|
|
119
|
+
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-plus-row">
|
|
120
|
+
<td
|
|
121
|
+
v-for="(cell, cellIdx) in row"
|
|
122
|
+
:key="cellIdx"
|
|
123
|
+
:class="
|
|
124
|
+
cellIdx === 0
|
|
125
|
+
? 'blog-table-plus-cell-first'
|
|
126
|
+
: cellIdx === row.length - 1
|
|
127
|
+
? 'blog-table-plus-cell-last'
|
|
128
|
+
: 'blog-table-plus-cell'
|
|
129
|
+
"
|
|
130
|
+
v-html="cell"
|
|
131
|
+
/>
|
|
132
|
+
</tr>
|
|
133
|
+
</tbody>
|
|
134
|
+
</table>
|
|
135
|
+
</div>
|
|
136
|
+
<div v-if="!expanded" class="blog-table-plus-overlay">
|
|
137
|
+
<button class="blog-table-plus-toggle" @click="expanded = true">
|
|
138
|
+
<!-- #extend -->
|
|
139
|
+
<svg
|
|
140
|
+
width="20"
|
|
141
|
+
height="20"
|
|
142
|
+
viewBox="0 0 24 24"
|
|
143
|
+
fill="none"
|
|
144
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
145
|
+
>
|
|
146
|
+
<path
|
|
147
|
+
d="M10.884 17.3698L10.944 17.4348C11.0833 17.5742 11.2487 17.6847 11.4308 17.7602C11.6129 17.8356 11.808 17.8745 12.005 17.8745C12.2021 17.8745 12.3972 17.8356 12.5793 17.7602C12.7613 17.6847 12.9267 17.5742 13.066 17.4348L20.844 9.65678C21.1173 9.37387 21.2685 8.99497 21.2651 8.60167C21.2616 8.20838 21.1039 7.83216 20.8258 7.55405C20.5477 7.27594 20.1714 7.11818 19.7782 7.11477C19.3849 7.11135 19.006 7.26254 18.723 7.53578L12.007 14.2508L5.28205 7.52578C5.14361 7.38258 4.97804 7.26838 4.795 7.18986C4.61195 7.11133 4.4151 7.07005 4.21594 7.06841C4.01677 7.06677 3.81927 7.10482 3.63496 7.18033C3.45065 7.25584 3.28323 7.36729 3.14245 7.5082C3.00168 7.6491 2.89038 7.81663 2.81505 8.00101C2.73971 8.18539 2.70185 8.38293 2.70368 8.5821C2.7055 8.78126 2.74697 8.97807 2.82567 9.16104C2.90437 9.34401 3.01872 9.50947 3.16205 9.64778L10.884 17.3698Z"
|
|
148
|
+
fill="#2C2C2C"
|
|
149
|
+
/>
|
|
150
|
+
</svg>
|
|
151
|
+
</button>
|
|
152
|
+
</div>
|
|
134
153
|
</div>
|
|
135
154
|
</div>
|
|
136
155
|
</template>
|
|
@@ -9,7 +9,7 @@ interface TocGroup {
|
|
|
9
9
|
id: string
|
|
10
10
|
text: string
|
|
11
11
|
anchor: string
|
|
12
|
-
children: { id: string
|
|
12
|
+
children: { id: string, text: string, anchor: string, hot: boolean }[]
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
const props = defineProps<{
|
|
@@ -34,7 +34,8 @@ const tocGroups = computed<TocGroup[]>(() => {
|
|
|
34
34
|
|
|
35
35
|
for (const blockId of props.blockOrder) {
|
|
36
36
|
const block = props.blocks[blockId]
|
|
37
|
-
if (!block)
|
|
37
|
+
if (!block)
|
|
38
|
+
continue
|
|
38
39
|
|
|
39
40
|
if (block.type === 'toc-h2') {
|
|
40
41
|
groups.push({
|
|
@@ -43,7 +44,8 @@ const tocGroups = computed<TocGroup[]>(() => {
|
|
|
43
44
|
anchor: String(block.settings.anchor || ''),
|
|
44
45
|
children: [],
|
|
45
46
|
})
|
|
46
|
-
}
|
|
47
|
+
}
|
|
48
|
+
else if (block.type === 'toc-h3' && groups.length > 0) {
|
|
47
49
|
groups[groups.length - 1]!.children.push({
|
|
48
50
|
id: blockId,
|
|
49
51
|
text: String(block.settings.text || ''),
|
|
@@ -60,9 +62,9 @@ const { editableAttrs } = useInlineEdit({
|
|
|
60
62
|
editorMode: () => !!props.editorMode,
|
|
61
63
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
62
64
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
63
|
-
onEditStart:
|
|
65
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
64
66
|
onEditEnd: () => emit('inline-edit-end'),
|
|
65
|
-
onUndoRedo:
|
|
67
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
66
68
|
})
|
|
67
69
|
</script>
|
|
68
70
|
|
|
@@ -70,15 +72,35 @@ const { editableAttrs } = useInlineEdit({
|
|
|
70
72
|
<div class="blog-toc">
|
|
71
73
|
<div class="blog-toc-header">
|
|
72
74
|
<!-- #triangle-full -->
|
|
73
|
-
<svg
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
<svg
|
|
76
|
+
class="blog-toc-icon"
|
|
77
|
+
width="16"
|
|
78
|
+
height="16"
|
|
79
|
+
viewBox="0 0 20 20"
|
|
80
|
+
fill="none"
|
|
81
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
82
|
+
>
|
|
83
|
+
<mask
|
|
84
|
+
id="triangle-full-mask0"
|
|
85
|
+
style="mask-type: alpha"
|
|
86
|
+
maskUnits="userSpaceOnUse"
|
|
87
|
+
x="0"
|
|
88
|
+
y="0"
|
|
89
|
+
width="20"
|
|
90
|
+
height="20"
|
|
91
|
+
>
|
|
92
|
+
<rect width="20" height="20" fill="#D9D9D9" />
|
|
76
93
|
</mask>
|
|
77
94
|
<g mask="url(#triangle-full-mask0)">
|
|
78
|
-
<path
|
|
95
|
+
<path
|
|
96
|
+
d="M8.43188 5.98075C9.23262 4.96929 10.7673 4.96929 11.5681 5.98075L16.9339 12.7586C17.9719 14.0697 17.0381 16 15.3658 16H4.6342C2.96193 16 2.02812 14.0697 3.0661 12.7586L8.43188 5.98075Z"
|
|
97
|
+
fill="black"
|
|
98
|
+
/>
|
|
79
99
|
</g>
|
|
80
100
|
</svg>
|
|
81
|
-
<h2 class="blog-toc-title" v-bind="editableAttrs('title')">
|
|
101
|
+
<h2 class="blog-toc-title" v-bind="editableAttrs('title')">
|
|
102
|
+
{{ title }}
|
|
103
|
+
</h2>
|
|
82
104
|
</div>
|
|
83
105
|
|
|
84
106
|
<ul class="blog-toc-list">
|
|
@@ -97,8 +119,16 @@ const { editableAttrs } = useInlineEdit({
|
|
|
97
119
|
</a>
|
|
98
120
|
<div v-if="child.hot" class="blog-toc-hot-tag-wrapper">
|
|
99
121
|
<!-- #hot-tag -->
|
|
100
|
-
<svg
|
|
101
|
-
|
|
122
|
+
<svg
|
|
123
|
+
class="blog-toc-hot-tag-bg"
|
|
124
|
+
viewBox="0 0 23 12"
|
|
125
|
+
fill="none"
|
|
126
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
d="M19.3997 0C21.0565 0 22.3997 1.34315 22.3997 3V9C22.3997 10.6569 21.0565 12 19.3997 12H4.39966C2.7428 12 1.39966 10.6569 1.39966 9V6.42188L0.300049 5.78711C-0.0999011 5.55615 -0.0999345 4.97898 0.300049 4.74805L1.39966 4.11328V3C1.39966 1.34315 2.7428 7.24787e-08 4.39966 0H19.3997Z"
|
|
130
|
+
fill="#FF0000"
|
|
131
|
+
/>
|
|
102
132
|
</svg>
|
|
103
133
|
<span class="blog-toc-hot-tag-text">HOT</span>
|
|
104
134
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.article-content--visiva p{color:#1a1a1a;font-size:16px;line-height:1.7;margin-top:10px}.article-content--visiva a{color:#1fb04f;transition:all .3s ease}.article-content--visiva a:hover{text-decoration:underline}.article-content--visiva .font-bold,.article-content--visiva b,.article-content--visiva strong{font-weight:700}.article-content--visiva .underline{text-decoration:underline}.article-content--visiva>h2{font-size:30px;font-weight:900;line-height:1.2;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:24px;font-weight:900;line-height:1.2;margin-top:16px}.article-content--visiva ul{margin-top:10px}.article-content--visiva .disc-list{font-size:14px;line-height:1.8;list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--visiva>img:not(.hot-icon):not(.icon){border-radius:24px;display:block;height:auto;margin:10px auto 30px;max-width:100%;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--visiva .btn{align-items:center;border:none;border-radius:40px;box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:60px;justify-content:center;line-height:24px;margin:20px auto 30px;min-width:220px;padding:10px 20px;text-decoration:none;transition:all .3s ease}.article-content--visiva .btn.btn-primary{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.article-content--visiva .btn.btn-primary:hover{opacity:.9}.article-content--visiva .btn.outline-btn{background:#fff;border:2px solid #1fb04f;color:#1fb04f}.article-content--visiva .btn.outline-btn:hover{background:#1fb04f;color:#fff}.article-content--visiva .btn-group{align-items:center;display:flex;gap:24px;justify-content:center;margin-bottom:30px}.article-content--visiva .btn-group .btn{margin:0}.article-content--visiva .contrast-table{border:1px solid #d4d4d4;border-radius:20px;margin-top:40px;overflow:hidden}.article-content--visiva .contrast-table table{border-collapse:collapse;min-width:600px;width:100%}.article-content--visiva .contrast-table thead tr{background:#292929;color:#fff}.article-content--visiva .contrast-table th{font-size:14px;font-weight:600;padding:17px 16px}.article-content--visiva .contrast-table td{border-top:1px solid #d9d9d9;font-size:14px;padding:17px 16px}.article-content--visiva .sticky-table{overflow-x:auto}@media (max-width:768px){.article-content--visiva p{font-size:14px}.article-content--visiva>h2{font-size:22px;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:18px}.article-content--visiva .btn-group{flex-direction:column;gap:10px}.article-content--visiva>img:not(.hot-icon):not(.icon){max-width:100%}}.article-content--visiva .blog-paragraph,.article-content--visiva .blog-paragraph-normal{margin-top:20px}.article-content--visiva .blog-paragraph-large{font-size:20px;margin-top:40px}.article-content--visiva .blog-paragraph-highlight{color:var(--primary-1000,#1fb04f);text-decoration:underline}.article-content--visiva .blog-paragraph-bg-highlight{background-color:#ecffb9}.article-content--visiva .blog-paragraph-bold{font-weight:700}@media (max-width:640px){.article-content--visiva .blog-paragraph{font-size:14px}}.article-content--visiva .blog-intro-text{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-intro-list{font-weight:300;list-style-position:inside;list-style-type:disc;padding-left:20px}.article-content--visiva .blog-intro-list-item{margin-top:8px}.article-content--visiva .blog-intro-text-secondary{font-size:16px;line-height:24px;margin-top:8px}.article-content--visiva .blog-toc{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-toc-title{color:#000;font-size:16px;font-weight:600;line-height:24px}.article-content--visiva .blog-toc-list{color:#000}.article-content--visiva .blog-toc-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.article-content--visiva .blog-toc-numbered-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:decimal;margin-top:8px;padding-left:36px}.article-content--visiva .blog-toc-numbered-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-numbered-list>li{display:list-item;list-style-position:outside;list-style-type:decimal}.article-content--visiva .blog-toc-numbered-item{align-items:center;display:flex;gap:8px}.article-content--visiva .blog-toc-hot-tag-wrapper{align-items:center;display:flex;gap:4px;position:relative}.article-content--visiva .blog-toc-hot-tag-text{color:#fff;font-family:Roboto,sans-serif;font-size:12px;font-style:italic;font-weight:900;line-height:16px;transform:scale(.75);transform-origin:center}.article-content--visiva .blog-h2-style1{font-size:22px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h2-style1-text{margin-top:16px}.article-content--visiva .blog-h2-style2{font-size:22px;font-weight:900;gap:8px;line-height:1;margin-top:16px;padding-left:8px;position:relative}.article-content--visiva .blog-h2-style2-indicator{background-color:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.article-content--visiva .blog-h2-style2-link{color:#1fb04f}.article-content--visiva .blog-h3-style1{font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style1-text{margin-top:4px}.article-content--visiva .blog-h3-style1-list{font-size:12px;font-weight:300;line-height:16px;list-style-position:inside;list-style-type:disc;margin-top:16px;padding-left:20px}.article-content--visiva .blog-h3-style1-list>*+*{margin-top:8px}.article-content--visiva .blog-h3-style2{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style2>*+*{margin-left:8px}.article-content--visiva .blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:9999px;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;line-height:28px;transform:translateY(0);width:24px}.article-content--visiva .blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style3>*+*{margin-left:4px}.article-content--visiva .blog-h3-style3-badge{background-color:#1fb04f;border-radius:20px;color:#fff;display:inline-block;font-size:16px;font-weight:600;height:22px;line-height:22px;line-height:24px;padding-left:8px;padding-right:8px;transform:translateY(4px)}.article-content--visiva .blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style4>*+*{margin-left:4px}.article-content--visiva .blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;line-height:24px;position:relative;width:24px}.article-content--visiva .blog-h3-style4-icon{left:0;position:absolute;top:1px}.article-content--visiva .blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;line-height:24px;position:relative;z-index:10}.article-content--visiva .blog-placeholder-image{background-color:#d9d9d9;border-radius:24px;height:300px;margin-top:40px;width:100%}.article-content--visiva .blog-button-single-wrapper{margin-top:40px;text-align:center}.article-content--visiva .blog-button-single{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-single:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-single-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.article-content--visiva .blog-button-group-button-black{align-items:center;background-color:#000;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-black:hover{background-color:rgba(0,0,0,.8)}.article-content--visiva .blog-button-group-button-green{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-group-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group-note{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:16px}.article-content--visiva .blog-button-group-note-text{color:#666262;font-size:14px;font-weight:500;line-height:20px}.article-content--visiva .blog-button-group-dark{background-color:#000;border-radius:20px;margin-top:40px;padding:40px 16px}.article-content--visiva .blog-button-group-dark-inner{align-items:center;display:flex;flex-direction:column;gap:16px}.article-content--visiva .blog-button-group-dark-button{align-items:center;background-color:#000;border:1px solid #fff;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-dark-button:hover{background-color:#fff;color:#000}.article-content--visiva .blog-quote{background-color:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.article-content--visiva .blog-quote-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:16px}.article-content--visiva .blog-quote-text{font-size:12px;font-style:italic;line-height:16px;line-height:1.625;margin-bottom:8px}.article-content--visiva .blog-quote-footer{align-items:flex-end;display:flex;gap:8px}.article-content--visiva .blog-quote-divider{background-color:#666262;display:inline-block;height:1px;margin-bottom:4px;width:48px}.article-content--visiva .blog-quote-author{color:#666262;font-size:12px;line-height:16px}.article-content--visiva .blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;min-width:0;overflow-x:auto;text-align:center}.article-content--visiva .blog-table{border-collapse:collapse;min-width:800px;width:100%}.article-content--visiva .blog-table-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px}.article-content--visiva .blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.article-content--visiva .blog-table-header-cell-last{font-size:14px;font-weight:600;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.article-content--visiva .blog-table-cell{border-right:1px solid #d9d9d9;padding:17px 16px}.article-content--visiva .blog-table-cell:hover{font-weight:400}.article-content--visiva .blog-table-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;padding:17px 16px}.article-content--visiva .blog-table-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-cell-last{font-size:14px;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-plus-container{background-color:#fff;border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;overflow:hidden;position:relative;text-align:center}.article-content--visiva .blog-table-plus-content{max-height:500px;min-width:0;overflow-x:auto;overflow:hidden;position:relative;transition:all .3s ease-in-out}.article-content--visiva .blog-table-plus-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.article-content--visiva .blog-table-plus-toggle{align-items:center;background-color:#fff;border:1px solid #d4d4d4;border-radius:9999px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;position:absolute;transform:translateY(-50%) translateX(-50%);transition:all .3s;width:50px;z-index:10}.article-content--visiva .blog-table-plus-toggle:hover{background-color:#f9fafb}.article-content--visiva .blog-table-plus-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px;position:sticky;top:0;z-index:10}.article-content--visiva .blog-table-plus-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;min-height:80px}.article-content--visiva .blog-table-plus-cell{border-right:1px solid #d9d9d9;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-last{font-size:14px;line-height:20px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.article-content--visiva .blog-pros-cons-card{background-color:#f7f8fa;border-radius:10px;flex:1 1 0%;padding:20px 12px}.article-content--visiva .blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.article-content--visiva .blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-pros-cons-list{color:#000;font-size:14px;line-height:20px;list-style-position:inside;list-style-type:disc}.article-content--visiva .blog-pros-cons-list>*+*{margin-top:12px}.article-content--visiva .blog-step{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.article-content--visiva .blog-step-link{color:#1fb04f;font-weight:900}.article-content--visiva .blog-note-style{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.article-content--visiva .blog-note-style-badge{align-items:center;background-color:#02a967;border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding-left:8px;padding-right:8px;position:absolute;top:0}.article-content--visiva .blog-note-style-badge-text{color:#fff;font-size:14px;font-weight:700;line-height:20px}.article-content--visiva .blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-note-style2{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 12px 20px;position:relative}.article-content--visiva .blog-features-card{align-items:center;background-color:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-content{max-width:426px}.article-content--visiva .blog-features-card-title{font-size:18px;font-weight:700;line-height:28px;margin-bottom:16px;text-align:center}.article-content--visiva .blog-features-card-list{color:#666262;font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-features-card-image-wrapper{max-width:411px}.article-content--visiva .blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--visiva .blog-features-card-dark{align-items:center;background-color:#2e2e2e;border-radius:10px;color:#fff;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-dark-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-dark-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-dark-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-dark-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-note-style3{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.article-content--visiva .blog-note-style3-title{color:#000;font-weight:600}.article-content--visiva .blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-qa-card{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-qa-item{margin-bottom:24px}.article-content--visiva .blog-qa-question{font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-question-black{color:#000;font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-answer{color:#666262;line-height:1.625}.article-content--visiva .blog-qa-answer-label{color:#000;font-weight:600}.article-content--visiva .blog-qa-card2-title{font-size:24px;font-weight:700;line-height:32px;margin-top:40px}.article-content--visiva .blog-qa-card2-intro{font-size:14px;line-height:20px;margin-top:20px}.article-content--visiva .blog-qa-card2-container{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:20px;padding:20px 16px}.article-content--visiva .blog-qa-card3{background-color:#f8fffb;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:28px 16px}.article-content--visiva .blog-qa-card3-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-qa-card3-title{color:#1fb04f;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-qa-card3-item{margin-bottom:16px}.article-content--visiva .blog-qa-card3-question{font-weight:700;margin-bottom:6px}.article-content--visiva .blog-qa-card3-answer{line-height:1.625}@media (min-width:768px){.article-content--visiva .blog-intro-text,.article-content--visiva .blog-intro-text-secondary{font-size:20px;line-height:28px}.article-content--visiva .blog-toc{border-radius:20px;padding:40px 32px}.article-content--visiva .blog-toc-title{font-size:20px;line-height:28px}.article-content--visiva .blog-h2-style1{font-size:30px}.article-content--visiva .blog-h2-style2{font-size:30px;padding-left:16px}.article-content--visiva .blog-h2-style2-indicator{height:25px;width:5px}.article-content--visiva .blog-h3-style1{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style1-text{margin-top:16px}.article-content--visiva .blog-h3-style1-list{font-size:14px;line-height:20px;margin-top:8px}.article-content--visiva .blog-h3-style2,.article-content--visiva .blog-h3-style3{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style3>*+*{margin-left:12px}.article-content--visiva .blog-h3-style4{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style4>*+*{margin-left:12px}.article-content--visiva .blog-button-single-wrapper{text-align:left}.article-content--visiva .blog-button-single{min-width:220px}.article-content--visiva .blog-button-group{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-button-black{min-width:220px}.article-content--visiva .blog-button-group-button-green{min-width:260px}.article-content--visiva .blog-button-group-note{margin-top:20px}.article-content--visiva .blog-button-group-dark-inner{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-dark-button{min-width:220px}.article-content--visiva .blog-quote{border-radius:20px;padding:30px 28px}.article-content--visiva .blog-quote-title{font-size:20px;line-height:1}.article-content--visiva .blog-quote-text{font-size:14px;line-height:20px;margin-bottom:16px}.article-content--visiva .blog-quote-author{font-size:14px;line-height:20px}.article-content--visiva .blog-pros-cons{flex-direction:row;gap:24px}.article-content--visiva .blog-pros-cons-card{border-radius:20px;padding:26px 30px}.article-content--visiva .blog-step{font-size:20px;line-height:1}.article-content--visiva .blog-note-style-text{font-size:16px;line-height:24px}.article-content--visiva .blog-note-style2{padding-left:16px;padding-right:16px}.article-content--visiva .blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-title{font-size:20px;line-height:1;text-align:left}.article-content--visiva .blog-features-card-list{margin-bottom:28px}.article-content--visiva .blog-features-card-button{min-width:260px}.article-content--visiva .blog-features-card-image{border-radius:20px;min-height:239px}.article-content--visiva .blog-features-card-dark{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-dark-list{margin-bottom:28px}.article-content--visiva .blog-features-card-dark-button{min-width:260px}.article-content--visiva .blog-note-style3{border-radius:15px;padding:24px}.article-content--visiva .blog-note-style3-text{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card2-title{font-size:28px}.article-content--visiva .blog-qa-card2-intro{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card2-container{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card3{border-radius:15px;font-size:16px;line-height:24px;padding-left:20px;padding-right:20px}.article-content--visiva .blog-qa-card3-title{font-size:20px;line-height:1}.article-content--visiva .blog-qa-card3-item{margin-bottom:24px}.article-content--visiva .blog-qa-card3-question{margin-bottom:12px}}@media (max-width:640px){.article-content--visiva .blog-h2-style1-text,.article-content--visiva .blog-h3-style1-text,.article-content--visiva .blog-toc-list{font-size:14px;line-height:20px}.article-content--visiva .blog-toc-numbered-list{font-size:12px;line-height:16px}}@media (max-width:768px){.article-content--visiva .blog-h2-style2-text,.article-content--visiva .blog-intro-list{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card-button,.article-content--visiva .blog-features-card-dark-button{margin-left:auto;margin-right:auto}}
|
|
1
|
+
.article-content--visiva p{color:#1a1a1a;font-size:16px;line-height:1.7;margin-top:10px}.article-content--visiva a{color:#1fb04f;transition:all .3s ease}.article-content--visiva a:hover{text-decoration:underline}.article-content--visiva .font-bold,.article-content--visiva b,.article-content--visiva strong{font-weight:700}.article-content--visiva .underline{text-decoration:underline}.article-content--visiva>h2{font-size:30px;font-weight:900;line-height:1.2;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:24px;font-weight:900;line-height:1.2;margin-top:16px}.article-content--visiva ul{margin-top:10px}.article-content--visiva .disc-list{font-size:14px;line-height:1.8;list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--visiva>img:not(.hot-icon):not(.icon){border-radius:24px;display:block;height:auto;margin:10px auto 30px;max-width:100%;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--visiva .btn{align-items:center;border:none;border-radius:40px;box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:60px;justify-content:center;line-height:24px;margin:20px auto 30px;min-width:220px;padding:10px 20px;text-decoration:none;transition:all .3s ease}.article-content--visiva .btn.btn-primary{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.article-content--visiva .btn.btn-primary:hover{opacity:.9}.article-content--visiva .btn.outline-btn{background:#fff;border:2px solid #1fb04f;color:#1fb04f}.article-content--visiva .btn.outline-btn:hover{background:#1fb04f;color:#fff}.article-content--visiva .btn-group{align-items:center;display:flex;gap:24px;justify-content:center;margin-bottom:30px}.article-content--visiva .btn-group .btn{margin:0}.article-content--visiva .contrast-table{border:1px solid #d4d4d4;border-radius:20px;margin-top:40px;overflow:hidden}.article-content--visiva .contrast-table table{border-collapse:collapse;min-width:600px;width:100%}.article-content--visiva .contrast-table thead tr{background:#292929;color:#fff}.article-content--visiva .contrast-table th{font-size:14px;font-weight:600;padding:17px 16px}.article-content--visiva .contrast-table td{border-top:1px solid #d9d9d9;font-size:14px;padding:17px 16px}.article-content--visiva .sticky-table{overflow-x:auto}@media (max-width:768px){.article-content--visiva p{font-size:14px}.article-content--visiva>h2{font-size:22px;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:18px}.article-content--visiva .btn-group{flex-direction:column;gap:10px}.article-content--visiva>img:not(.hot-icon):not(.icon){max-width:100%}}.article-content--visiva .blog-paragraph,.article-content--visiva .blog-paragraph-normal{margin-top:20px}.article-content--visiva .blog-paragraph-large{font-size:20px;margin-top:40px}.article-content--visiva .blog-paragraph-highlight{color:var(--primary-1000,#1fb04f);text-decoration:underline}.article-content--visiva .blog-paragraph-bg-highlight{background-color:#ecffb9}.article-content--visiva .blog-paragraph-bold{font-weight:700}@media (max-width:640px){.article-content--visiva .blog-paragraph{font-size:14px}}.article-content--visiva .blog-intro-text{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-intro-list{font-weight:300;list-style-position:inside;list-style-type:disc;padding-left:20px}.article-content--visiva .blog-intro-list-item{margin-top:8px}.article-content--visiva .blog-intro-text-secondary{font-size:16px;line-height:24px;margin-top:8px}.article-content--visiva .blog-toc{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-toc-title{color:#000;font-size:16px;font-weight:600;line-height:24px}.article-content--visiva .blog-toc-list{color:#000}.article-content--visiva .blog-toc-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.article-content--visiva .blog-toc-numbered-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:decimal;margin-top:8px;padding-left:36px}.article-content--visiva .blog-toc-numbered-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-numbered-list>li{display:list-item;list-style-position:outside;list-style-type:decimal}.article-content--visiva .blog-toc-numbered-item{align-items:center;display:flex;gap:8px}.article-content--visiva .blog-toc-hot-tag-wrapper{align-items:center;display:flex;gap:4px;position:relative}.article-content--visiva .blog-toc-hot-tag-text{color:#fff;font-family:Roboto,sans-serif;font-size:12px;font-style:italic;font-weight:900;line-height:16px;transform:scale(.75);transform-origin:center}.article-content--visiva .blog-toc-icon{flex-shrink:0;height:16px;width:16px}.article-content--visiva .blog-toc-link{color:inherit;text-decoration:none}.article-content--visiva .blog-toc-hot-tag-bg{min-height:12px;min-width:22px;position:absolute;width:100%}.article-content--visiva .blog-h2-style1{font-size:22px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h2-style1-text{margin-top:16px}.article-content--visiva .blog-h2-style2{font-size:22px;font-weight:900;gap:8px;line-height:1;margin-top:16px;padding-left:8px;position:relative}.article-content--visiva .blog-h2-style2-indicator{background-color:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.article-content--visiva .blog-h2-style2-link{color:#1fb04f}.article-content--visiva .blog-h3-style1{font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style1-text{margin-top:4px}.article-content--visiva .blog-h3-style1-list{font-size:12px;font-weight:300;line-height:16px;list-style-position:inside;list-style-type:disc;margin-top:16px;padding-left:20px}.article-content--visiva .blog-h3-style1-list>*+*{margin-top:8px}.article-content--visiva .blog-h3-style2{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style2>*+*{margin-left:8px}.article-content--visiva .blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:9999px;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;line-height:28px;transform:translateY(0);width:24px}.article-content--visiva .blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style3>*+*{margin-left:4px}.article-content--visiva .blog-h3-style3-badge{background-color:#1fb04f;border-radius:20px;color:#fff;display:inline-block;font-size:16px;font-weight:600;height:22px;line-height:22px;line-height:24px;padding-left:8px;padding-right:8px;transform:translateY(4px)}.article-content--visiva .blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style4>*+*{margin-left:4px}.article-content--visiva .blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;line-height:24px;position:relative;width:24px}.article-content--visiva .blog-h3-style4-icon{left:0;position:absolute;top:1px}.article-content--visiva .blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;line-height:24px;position:relative;z-index:10}.article-content--visiva .blog-placeholder-image{background-color:#d9d9d9;border-radius:24px;height:300px;margin-top:40px;width:100%}.article-content--visiva .blog-button-single-wrapper{margin-top:40px;text-align:center}.article-content--visiva .blog-button-single{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-single:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-single-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.article-content--visiva .blog-button-group-button-black{align-items:center;background-color:#000;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-black:hover{background-color:rgba(0,0,0,.8)}.article-content--visiva .blog-button-group-button-green{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-group-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group-note{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:16px}.article-content--visiva .blog-button-group-note-text{color:#666262;font-size:14px;font-weight:500;line-height:20px}.article-content--visiva .blog-button-group-dark{background-color:#000;border-radius:20px;margin-top:40px;padding:40px 16px}.article-content--visiva .blog-button-group-dark-inner{align-items:center;display:flex;flex-direction:column;gap:16px}.article-content--visiva .blog-button-group-dark-button{align-items:center;background-color:#000;border:1px solid #fff;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-dark-button:hover{background-color:#fff;color:#000}.article-content--visiva .blog-quote{background-color:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.article-content--visiva .blog-quote-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:16px}.article-content--visiva .blog-quote-text{font-size:12px;font-style:italic;line-height:16px;line-height:1.625;margin-bottom:8px}.article-content--visiva .blog-quote-footer{align-items:flex-end;display:flex;gap:8px}.article-content--visiva .blog-quote-divider{background-color:#666262;display:inline-block;height:1px;margin-bottom:4px;width:48px}.article-content--visiva .blog-quote-author{color:#666262;font-size:12px;line-height:16px}.article-content--visiva .blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;min-width:0;overflow-x:auto;scrollbar-width:none;text-align:center;-ms-overflow-style:none}.article-content--visiva .blog-table-wrapper::-webkit-scrollbar{display:none}.article-content--visiva .blog-table{border-collapse:collapse;min-width:800px;width:100%}.article-content--visiva .blog-table-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px}.article-content--visiva .blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.article-content--visiva .blog-table-header-cell:last-child{border-right:none}.article-content--visiva .blog-table-header-cell-last{font-size:14px;font-weight:600;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.article-content--visiva .blog-table-cell{border-right:1px solid #d9d9d9;padding:17px 16px}.article-content--visiva .blog-table-cell:last-child{border-right:none}.article-content--visiva .blog-table-cell:hover{font-weight:400}.article-content--visiva .blog-table-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;padding:17px 16px}.article-content--visiva .blog-table-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-cell-last{font-size:14px;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-plus-container{background-color:#fff;border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;overflow:hidden;position:relative;text-align:center}.article-content--visiva .blog-table-plus-content{max-height:500px;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none;transition:max-height .3s ease-in-out;-ms-overflow-style:none}.article-content--visiva .blog-table-plus-content::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-plus-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.article-content--visiva .blog-table-plus-toggle{align-items:center;background-color:#fff;border:1px solid #d4d4d4;border-radius:9999px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;position:absolute;transform:translateY(-50%) translateX(-50%);transition:all .3s;width:50px;z-index:10}.article-content--visiva .blog-table-plus-toggle:hover{background-color:#f9fafb}.article-content--visiva .blog-table-plus-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px;position:sticky;top:0;z-index:10}.article-content--visiva .blog-table-plus-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;min-height:80px}.article-content--visiva .blog-table-plus-cell{border-right:1px solid #d9d9d9;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell:last-child{border-right:none}.article-content--visiva .blog-table-plus-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-last{font-size:14px;line-height:20px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.article-content--visiva .blog-pros-cons-card{background-color:#f7f8fa;border-radius:10px;flex:1 1 0%;padding:20px 12px}.article-content--visiva .blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.article-content--visiva .blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-pros-cons-list{color:#000;font-size:14px;line-height:20px;list-style-position:inside;list-style-type:disc}.article-content--visiva .blog-pros-cons-list>*+*{margin-top:12px}.article-content--visiva .blog-step{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.article-content--visiva .blog-step-link{color:#1fb04f;font-weight:900}.article-content--visiva .blog-note-style{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.article-content--visiva .blog-note-style-badge{align-items:center;background-color:#02a967;border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding-left:8px;padding-right:8px;position:absolute;top:0}.article-content--visiva .blog-note-style-badge-text{color:#fff;font-size:14px;font-weight:700;line-height:20px}.article-content--visiva .blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-note-style2{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 12px 20px;position:relative}.article-content--visiva .blog-features-card{align-items:center;background-color:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-content{max-width:426px}.article-content--visiva .blog-features-card-title{font-size:18px;font-weight:700;line-height:28px;margin-bottom:16px;text-align:center}.article-content--visiva .blog-features-card-list{color:#666262;font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-features-card-image-wrapper{max-width:411px}.article-content--visiva .blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--visiva .blog-features-card-dark{align-items:center;background-color:#2e2e2e;border-radius:10px;color:#fff;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-dark-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-dark-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-dark-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-dark-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-note-style3{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.article-content--visiva .blog-note-style3-title{color:#000;font-weight:600}.article-content--visiva .blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-qa-card{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-qa-item{margin-bottom:24px}.article-content--visiva .blog-qa-question{font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-question-black{color:#000;font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-answer{color:#666262;line-height:1.625}.article-content--visiva .blog-qa-answer-label{color:#000;font-weight:600}.article-content--visiva .blog-qa-card2-title{font-size:24px;font-weight:700;line-height:32px;margin-top:40px}.article-content--visiva .blog-qa-card2-intro{font-size:14px;line-height:20px;margin-top:20px}.article-content--visiva .blog-qa-card2-container{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:20px;padding:20px 16px}.article-content--visiva .blog-qa-card3{background-color:#f8fffb;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:28px 16px}.article-content--visiva .blog-qa-card3-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-qa-card3-title{color:#1fb04f;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-qa-card3-item{margin-bottom:16px}.article-content--visiva .blog-qa-card3-question{font-weight:700;margin-bottom:6px}.article-content--visiva .blog-qa-card3-answer{line-height:1.625}@media (min-width:768px){.article-content--visiva .blog-intro-text,.article-content--visiva .blog-intro-text-secondary{font-size:20px;line-height:28px}.article-content--visiva .blog-toc{border-radius:20px;padding:40px 32px}.article-content--visiva .blog-toc-title{font-size:20px;line-height:28px}.article-content--visiva .blog-h2-style1{font-size:30px}.article-content--visiva .blog-h2-style2{font-size:30px;padding-left:16px}.article-content--visiva .blog-h2-style2-indicator{height:25px;width:5px}.article-content--visiva .blog-h3-style1{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style1-text{margin-top:16px}.article-content--visiva .blog-h3-style1-list{font-size:14px;line-height:20px;margin-top:8px}.article-content--visiva .blog-h3-style2,.article-content--visiva .blog-h3-style3{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style3>*+*{margin-left:12px}.article-content--visiva .blog-h3-style4{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style4>*+*{margin-left:12px}.article-content--visiva .blog-button-single-wrapper{text-align:left}.article-content--visiva .blog-button-single{min-width:220px}.article-content--visiva .blog-button-group{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-button-black{min-width:220px}.article-content--visiva .blog-button-group-button-green{min-width:260px}.article-content--visiva .blog-button-group-note{margin-top:20px}.article-content--visiva .blog-button-group-dark-inner{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-dark-button{min-width:220px}.article-content--visiva .blog-quote{border-radius:20px;padding:30px 28px}.article-content--visiva .blog-quote-title{font-size:20px;line-height:1}.article-content--visiva .blog-quote-text{font-size:14px;line-height:20px;margin-bottom:16px}.article-content--visiva .blog-quote-author{font-size:14px;line-height:20px}.article-content--visiva .blog-pros-cons{flex-direction:row;gap:24px}.article-content--visiva .blog-pros-cons-card{border-radius:20px;padding:26px 30px}.article-content--visiva .blog-step{font-size:20px;line-height:1}.article-content--visiva .blog-note-style-text{font-size:16px;line-height:24px}.article-content--visiva .blog-note-style2{padding-left:16px;padding-right:16px}.article-content--visiva .blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-title{font-size:20px;line-height:1;text-align:left}.article-content--visiva .blog-features-card-list{margin-bottom:28px}.article-content--visiva .blog-features-card-button{min-width:260px}.article-content--visiva .blog-features-card-image{border-radius:20px;min-height:239px}.article-content--visiva .blog-features-card-dark{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-dark-list{margin-bottom:28px}.article-content--visiva .blog-features-card-dark-button{min-width:260px}.article-content--visiva .blog-note-style3{border-radius:15px;padding:24px}.article-content--visiva .blog-note-style3-text{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card2-title{font-size:28px}.article-content--visiva .blog-qa-card2-intro{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card2-container{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card3{border-radius:15px;font-size:16px;line-height:24px;padding-left:20px;padding-right:20px}.article-content--visiva .blog-qa-card3-title{font-size:20px;line-height:1}.article-content--visiva .blog-qa-card3-item{margin-bottom:24px}.article-content--visiva .blog-qa-card3-question{margin-bottom:12px}}@media (max-width:640px){.article-content--visiva .blog-h2-style1-text,.article-content--visiva .blog-h3-style1-text,.article-content--visiva .blog-toc-list{font-size:14px;line-height:20px}.article-content--visiva .blog-toc-numbered-list{font-size:12px;line-height:16px}}@media (max-width:768px){.article-content--visiva .blog-h2-style2-text,.article-content--visiva .blog-intro-list{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card-button,.article-content--visiva .blog-features-card-dark-button{margin-left:auto;margin-right:auto}.article-content--visiva .blog-table-scroll{margin-right:-16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:#fff}.article-content--visiva .blog-table-scroll::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-scroll>.blog-table-plus-container,.article-content--visiva .blog-table-scroll>.blog-table-wrapper{margin-right:16px;overflow:hidden;width:-moz-max-content;width:max-content}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vigilkids/section-renderer-vue",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Vue 3 adapter for OneX Section Renderer SDK",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -22,7 +22,10 @@
|
|
|
22
22
|
],
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"scripts": {
|
|
25
|
-
"build": "unbuild"
|
|
25
|
+
"build": "unbuild",
|
|
26
|
+
"lint": "eslint .",
|
|
27
|
+
"lint:fix": "eslint . --fix",
|
|
28
|
+
"format": "prettier --write src/"
|
|
26
29
|
},
|
|
27
30
|
"publishConfig": {
|
|
28
31
|
"access": "public"
|
|
@@ -33,10 +36,14 @@
|
|
|
33
36
|
"directory": "packages/section-renderer-vue"
|
|
34
37
|
},
|
|
35
38
|
"peerDependencies": {
|
|
36
|
-
"@vigilkids/section-core": "
|
|
39
|
+
"@vigilkids/section-core": "workspace:*",
|
|
37
40
|
"vue": "^3.4.0"
|
|
38
41
|
},
|
|
39
42
|
"devDependencies": {
|
|
43
|
+
"@antfu/eslint-config": "^4.13.2",
|
|
44
|
+
"eslint": "^9.22.0",
|
|
45
|
+
"eslint-config-prettier": "^10.1.1",
|
|
46
|
+
"prettier": "^3.5.3",
|
|
40
47
|
"unbuild": "^3.5.0",
|
|
41
48
|
"vue-tsc": "^2.0.21"
|
|
42
49
|
}
|