@vigilkids/section-renderer-vue 0.1.0 → 0.1.1
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/interactions/common.d.ts +5 -0
- package/dist/interactions/common.mjs +10 -0
- package/dist/interactions/vigilkids.d.ts +5 -0
- package/dist/interactions/vigilkids.mjs +26 -0
- package/dist/preview/createPreviewApp.mjs +21 -2
- package/dist/sections/article/shared/ArticleCustomHtml.vue +46 -1
- package/dist/sections/article/vigilkids/ArticleBulletList.vue +3 -8
- package/dist/sections/article/vigilkids/ArticleCta.vue +1 -42
- package/dist/sections/article/vigilkids/ArticleFaq.vue +2 -32
- package/dist/sections/article/vigilkids/ArticleFaqItem.vue +3 -8
- package/dist/sections/article/vigilkids/ArticleFeature.vue +3 -41
- package/dist/sections/article/vigilkids/ArticleHeading.vue +2 -11
- package/dist/sections/article/vigilkids/ArticleNotice.vue +5 -64
- package/dist/sections/article/vigilkids/ArticleProsCons.vue +5 -13
- package/dist/sections/article/vigilkids/ArticleQuestion.vue +5 -23
- package/dist/sections/article/vigilkids/ArticleQuote.vue +6 -10
- package/dist/sections/article/vigilkids/ArticleStepList.vue +1 -5
- package/dist/sections/article/vigilkids/ArticleSubheading.vue +2 -23
- package/dist/sections/article/vigilkids/ArticleTable.vue +2 -6
- package/dist/sections/article/vigilkids/ArticleToc.vue +1 -5
- package/dist/sections/article/visiva/ArticleBulletList.vue +2 -3
- package/dist/sections/article/visiva/ArticleFaq.vue +2 -3
- package/dist/sections/article/visiva/ArticleFeature.vue +2 -3
- package/dist/sections/article/visiva/ArticleNotice.vue +12 -12
- package/dist/sections/article/visiva/ArticleProsCons.vue +4 -6
- package/dist/sections/article/visiva/ArticleQuestion.vue +2 -3
- package/dist/styles/products/vigilkids.css +1 -1
- package/package.json +9 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function setupCommonInteractions() {
|
|
2
|
+
document.addEventListener("click", (e) => {
|
|
3
|
+
const anchor = e.target.closest?.("a");
|
|
4
|
+
if (!anchor)
|
|
5
|
+
return;
|
|
6
|
+
const href = anchor.getAttribute("href");
|
|
7
|
+
if (!href?.startsWith("#"))
|
|
8
|
+
e.preventDefault();
|
|
9
|
+
});
|
|
10
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export function setupInteractions() {
|
|
2
|
+
document.addEventListener("click", (e) => {
|
|
3
|
+
const faqTitle = e.target.closest?.(".faq-item-title");
|
|
4
|
+
if (!faqTitle)
|
|
5
|
+
return;
|
|
6
|
+
const faqItem = faqTitle.closest(".faq-item");
|
|
7
|
+
if (!faqItem)
|
|
8
|
+
return;
|
|
9
|
+
const faqList = faqItem.closest(".faq-list");
|
|
10
|
+
const isActive = faqItem.classList.contains("active");
|
|
11
|
+
if (faqList) {
|
|
12
|
+
faqList.querySelectorAll(".faq-item.active").forEach((item) => {
|
|
13
|
+
if (item !== faqItem) {
|
|
14
|
+
item.classList.remove("active");
|
|
15
|
+
const body2 = item.querySelector(".faq-item-answer");
|
|
16
|
+
if (body2)
|
|
17
|
+
body2.style.maxHeight = "0";
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
faqItem.classList.toggle("active", !isActive);
|
|
22
|
+
const body = faqItem.querySelector(".faq-item-answer");
|
|
23
|
+
if (body)
|
|
24
|
+
body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
@@ -16,6 +16,19 @@ async function loadProductCSS(productCode) {
|
|
|
16
16
|
loadedProducts.add(productCode);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
+
const loadedInteractions = /* @__PURE__ */ new Set();
|
|
20
|
+
const productInteractionLoaders = {
|
|
21
|
+
vigilkids: () => import("../interactions/vigilkids.mjs").then((m) => m.setupInteractions())
|
|
22
|
+
};
|
|
23
|
+
async function loadProductInteractions(productCode) {
|
|
24
|
+
if (loadedInteractions.has(productCode))
|
|
25
|
+
return;
|
|
26
|
+
const loader = productInteractionLoaders[productCode];
|
|
27
|
+
if (loader) {
|
|
28
|
+
await loader();
|
|
29
|
+
loadedInteractions.add(productCode);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
19
32
|
export function createPreviewApp(selector, options) {
|
|
20
33
|
const sectionsData = ref({
|
|
21
34
|
sections: {},
|
|
@@ -44,6 +57,8 @@ export function createPreviewApp(selector, options) {
|
|
|
44
57
|
options.bridge.on("html:preview", (payload) => {
|
|
45
58
|
const data = payload;
|
|
46
59
|
rawHtmlContent.value = data.html;
|
|
60
|
+
const product = currentProduct.value || "vigilkids";
|
|
61
|
+
loadProductInteractions(product);
|
|
47
62
|
});
|
|
48
63
|
options.bridge.on("section:select", (payload) => {
|
|
49
64
|
const data = payload;
|
|
@@ -79,6 +94,7 @@ export function createPreviewApp(selector, options) {
|
|
|
79
94
|
if (data.productCode) {
|
|
80
95
|
currentProduct.value = data.productCode;
|
|
81
96
|
loadProductCSS(data.productCode);
|
|
97
|
+
loadProductInteractions(data.productCode);
|
|
82
98
|
}
|
|
83
99
|
});
|
|
84
100
|
function handleSectionClick(sectionId) {
|
|
@@ -87,7 +103,9 @@ export function createPreviewApp(selector, options) {
|
|
|
87
103
|
return () => rawHtmlContent.value !== null ? h("div", {
|
|
88
104
|
class: `article-content article-content--${currentProduct.value || "vigilkids"}`,
|
|
89
105
|
innerHTML: rawHtmlContent.value
|
|
90
|
-
}) : h(
|
|
106
|
+
}) : h("div", {
|
|
107
|
+
class: `article-content article-content--${currentProduct.value || "vigilkids"}`
|
|
108
|
+
}, [h(SectionRenderer, {
|
|
91
109
|
sectionsData: sectionsData.value,
|
|
92
110
|
editorMode: true,
|
|
93
111
|
selectedSectionId: selectedSectionId.value,
|
|
@@ -117,11 +135,12 @@ export function createPreviewApp(selector, options) {
|
|
|
117
135
|
onInlineEditUndoRedo: (action) => {
|
|
118
136
|
options.bridge.send({ type: action === "undo" ? "shortcut:undo" : "shortcut:redo" });
|
|
119
137
|
}
|
|
120
|
-
});
|
|
138
|
+
})]);
|
|
121
139
|
}
|
|
122
140
|
});
|
|
123
141
|
app.use(SectionRendererPlugin);
|
|
124
142
|
app.mount(selector);
|
|
143
|
+
import("../interactions/common.mjs").then((m) => m.setupCommonInteractions());
|
|
125
144
|
document.addEventListener("keydown", (e) => {
|
|
126
145
|
if (isEditableTarget(e))
|
|
127
146
|
return;
|
|
@@ -25,8 +25,53 @@ const htmlContent = computed(() => {
|
|
|
25
25
|
const raw = props.settings.html_content ?? props.settings.content ?? ''
|
|
26
26
|
return renderContent(raw)
|
|
27
27
|
})
|
|
28
|
+
|
|
29
|
+
// ── v-html 内容的交互处理 ──
|
|
30
|
+
// SectionWrapper 的 @click.stop 阻止事件冒泡到 document，
|
|
31
|
+
// document 级事件委托无法捕获 v-html 内的点击，
|
|
32
|
+
// 所以直接在组件根元素上用 @click 处理
|
|
33
|
+
function handleContentClick(e: MouseEvent) {
|
|
34
|
+
// FAQ 手风琴
|
|
35
|
+
const faqTitle = (e.target as HTMLElement).closest?.('.faq-item-title')
|
|
36
|
+
if (faqTitle) {
|
|
37
|
+
e.stopPropagation()
|
|
38
|
+
handleFaqToggle(faqTitle)
|
|
39
|
+
return
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// 链接拦截：阻止非锚点链接在 iframe 内导航
|
|
43
|
+
const anchor = (e.target as HTMLElement).closest?.('a')
|
|
44
|
+
if (anchor) {
|
|
45
|
+
const href = anchor.getAttribute('href')
|
|
46
|
+
if (!href?.startsWith('#')) e.preventDefault()
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function handleFaqToggle(faqTitle: Element) {
|
|
51
|
+
const faqItem = faqTitle.closest('.faq-item')
|
|
52
|
+
if (!faqItem) return
|
|
53
|
+
|
|
54
|
+
const faqList = faqItem.closest('.faq-list')
|
|
55
|
+
const isActive = faqItem.classList.contains('active')
|
|
56
|
+
|
|
57
|
+
// 手风琴互斥：收起同组其他项
|
|
58
|
+
if (faqList) {
|
|
59
|
+
faqList.querySelectorAll('.faq-item.active').forEach((item) => {
|
|
60
|
+
if (item !== faqItem) {
|
|
61
|
+
item.classList.remove('active')
|
|
62
|
+
const body = item.querySelector('.faq-item-answer') as HTMLElement | null
|
|
63
|
+
if (body) body.style.maxHeight = '0'
|
|
64
|
+
}
|
|
65
|
+
})
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// 切换当前项
|
|
69
|
+
faqItem.classList.toggle('active', !isActive)
|
|
70
|
+
const body = faqItem.querySelector('.faq-item-answer') as HTMLElement | null
|
|
71
|
+
if (body) body.style.maxHeight = isActive ? '0' : `${body.scrollHeight}px`
|
|
72
|
+
}
|
|
28
73
|
</script>
|
|
29
74
|
|
|
30
75
|
<template>
|
|
31
|
-
<div class="article-custom-html article-content" :class="[productClass]" v-html="htmlContent" />
|
|
76
|
+
<div class="article-custom-html article-content" :class="[productClass]" v-html="htmlContent" @click="handleContentClick" />
|
|
32
77
|
</template>
|
|
@@ -34,15 +34,10 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
|
-
<ul class="
|
|
37
|
+
<ul class="disc-list">
|
|
38
38
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</li>
|
|
39
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
40
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
42
41
|
</template>
|
|
43
42
|
</ul>
|
|
44
43
|
</template>
|
|
45
|
-
|
|
46
|
-
<style scoped>
|
|
47
|
-
.article-bullet-list{color:var(--article-text,#3a4259);list-style-type:disc;margin-top:10px;padding-left:20px}
|
|
48
|
-
</style>
|
|
@@ -35,7 +35,7 @@ const { editableAttrs } = useInlineEdit({
|
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<template>
|
|
38
|
-
<!-- button variant: 单个居中按钮 -->
|
|
38
|
+
<!-- button variant: 单个居中按钮 -->
|
|
39
39
|
<a
|
|
40
40
|
v-if="variant === 'button'"
|
|
41
41
|
:href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
|
|
@@ -109,45 +109,4 @@ const { editableAttrs } = useInlineEdit({
|
|
|
109
109
|
<img v-if="s.image_src" :src="String(s.image_src)" alt="" loading="lazy">
|
|
110
110
|
</div>
|
|
111
111
|
|
|
112
|
-
<!-- button-group-dark variant: 黑底容器+白边主按钮+渐变次按钮 (Visiva) -->
|
|
113
|
-
<div v-else-if="variant === 'button-group-dark'" class="btn-group-dark">
|
|
114
|
-
<div class="btn-group-dark__buttons">
|
|
115
|
-
<div v-if="s.button_text" class="btn-group-dark__item">
|
|
116
|
-
<a
|
|
117
|
-
:href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
|
|
118
|
-
class="btn btn-outline-white"
|
|
119
|
-
v-bind="editableAttrs('button_text')"
|
|
120
|
-
>
|
|
121
|
-
{{ s.button_text }}
|
|
122
|
-
</a>
|
|
123
|
-
<p
|
|
124
|
-
v-if="s.button_caption"
|
|
125
|
-
class="btn-group-dark__caption"
|
|
126
|
-
v-bind="editableAttrs('button_caption')"
|
|
127
|
-
>
|
|
128
|
-
{{ s.button_caption }}
|
|
129
|
-
</p>
|
|
130
|
-
</div>
|
|
131
|
-
<div v-if="s.secondary_button_text" class="btn-group-dark__item">
|
|
132
|
-
<a
|
|
133
|
-
:href="editorMode ? undefined : safeUrl(String(s.secondary_button_url || ''))"
|
|
134
|
-
class="btn btn-gradient"
|
|
135
|
-
v-bind="editableAttrs('secondary_button_text')"
|
|
136
|
-
>
|
|
137
|
-
{{ s.secondary_button_text }}
|
|
138
|
-
</a>
|
|
139
|
-
<p
|
|
140
|
-
v-if="s.secondary_button_caption"
|
|
141
|
-
class="btn-group-dark__caption"
|
|
142
|
-
v-bind="editableAttrs('secondary_button_caption')"
|
|
143
|
-
>
|
|
144
|
-
{{ s.secondary_button_caption }}
|
|
145
|
-
</p>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
112
|
</template>
|
|
150
|
-
|
|
151
|
-
<style scoped>
|
|
152
|
-
.btn{align-items:center;border:none;border-radius:var(--article-btn-radius,10px);box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:var(--article-btn-height,52px);justify-content:center;line-height:24px;padding:10px 20px;text-decoration:none;transition:all .3s ease;width:220px}.btn.btn-primary{background:var(--article-primary,#24c790);color:var(--article-btn-color,#fff);margin:20px auto 30px}.btn.btn-primary:active,.btn.btn-primary:hover{background:var(--article-primary-hover,#1ba97a)}.btn.outline-btn{background:#fff;border:2px solid var(--article-primary,#24c790);border-radius:var(--article-btn-radius,10px);color:var(--article-primary-hover,#1ba97a);height:var(--article-btn-height,52px);margin:20px auto 30px}.btn.outline-btn:hover{background:var(--article-primary,#24c790);color:#fff}.btn.outline-btn:active{background:var(--article-primary-hover,#1ba97a);color:#fff}.btn-group{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:30px}.btn-group .btn{margin:0}.article-try{align-items:center;background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin-top:30px;padding:40px 60px}.article-try,.article-try-content{display:flex;justify-content:space-between}.article-try-content{flex-direction:column}.article-try-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:10px;margin-top:0}.article-try-description{line-height:32px;margin-bottom:0;margin-top:0}.article-try .btn{margin:0 0 0 10px;min-width:220px}.article-show{align-items:center;background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin-top:30px;padding:40px 30px 40px 60px}.article-show,.article-show-content{display:flex;justify-content:space-between}.article-show-content{flex-direction:column}.article-show-title{font-size:24px;font-weight:700;line-height:28px;margin-bottom:14px;margin-top:0}.article-show-description{line-height:30px;margin-bottom:0;margin-top:0}.article-show .btn{margin-left:0;margin-top:20px;min-width:220px}.article-show img{border-radius:10px;height:auto;margin-left:32px;max-width:368px;-o-object-fit:cover;object-fit:cover;width:100%}.btn-group-dark{background:#000;border-radius:20px;margin-top:40px;padding:16px 40px}.btn-group-dark__buttons{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center}.btn-group-dark__item{text-align:center}.btn-group-dark__caption{color:#9ca3af;font-size:14px;font-weight:500;margin:16px 0 0}.btn.btn-outline-white{background:transparent;border:1px solid #fff;color:#fff;margin:0}.btn.btn-outline-white:hover{background:#fff;color:#000}.btn.btn-gradient{background:linear-gradient(to right,var(--article-gradient-start,#24c790),var(--article-gradient-end,#1ba97a));border:none;color:#000;margin:0}.btn.btn-gradient:hover{opacity:.9}@media (min-width:769px){.btn-group-dark{padding:40px}.btn-group-dark__buttons{flex-direction:row;gap:24px}}@media (max-width:768px){.btn-group{flex-direction:column;gap:10px}.article-try{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-try-description{line-height:21px}.article-try .btn{margin:20px 0}.article-show{flex-direction:column;padding:20px 16px;text-align:center}.article-show,.article-show-content{align-items:center}.article-show-description{line-height:21px}.article-show .btn,.article-show img{margin:20px 0}.btn-group-dark__buttons{gap:16px}}
|
|
153
|
-
</style>
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import type { BlockData } from '@vigilkids/section-core'
|
|
3
3
|
|
|
4
|
-
import { computed } from 'vue'
|
|
5
|
-
|
|
6
4
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
5
|
import ArticleFaqItem from './ArticleFaqItem.vue'
|
|
8
6
|
|
|
@@ -21,9 +19,7 @@ const emit = defineEmits<{
|
|
|
21
19
|
(e: 'undo-redo', action: 'redo' | 'undo'): void
|
|
22
20
|
}>()
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
22
|
+
useInlineEdit({
|
|
27
23
|
editorMode: () => !!props.editorMode,
|
|
28
24
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
25
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -34,35 +30,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
34
30
|
</script>
|
|
35
31
|
|
|
36
32
|
<template>
|
|
37
|
-
|
|
38
|
-
<div v-if="s.title" class="faq-card">
|
|
39
|
-
<div class="faq-card__header">
|
|
40
|
-
<h2 class="faq-card__title" v-bind="editableAttrs('title')">
|
|
41
|
-
{{ s.title }}
|
|
42
|
-
</h2>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="faq-card__list">
|
|
45
|
-
<template v-for="blockId in blockOrder" :key="blockId">
|
|
46
|
-
<div v-if="blocks[blockId]" class="faq-card__item">
|
|
47
|
-
<h3 class="faq-card__question" v-bind="blockEditableAttrs(blockId, 'question')">
|
|
48
|
-
{{ blocks[blockId]!.settings.question }}
|
|
49
|
-
</h3>
|
|
50
|
-
<p class="faq-card__answer" v-bind="blockEditableAttrs(blockId, 'answer')">
|
|
51
|
-
{{ blocks[blockId]!.settings.answer }}
|
|
52
|
-
</p>
|
|
53
|
-
</div>
|
|
54
|
-
</template>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<!-- VigilKids 风格：手风琴折叠 -->
|
|
59
|
-
<div v-else class="faq-list">
|
|
33
|
+
<div class="faq-list">
|
|
60
34
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
61
35
|
<ArticleFaqItem v-if="blocks[blockId]" :settings="blocks[blockId]!.settings" />
|
|
62
36
|
</template>
|
|
63
37
|
</div>
|
|
64
38
|
</template>
|
|
65
|
-
|
|
66
|
-
<style scoped>
|
|
67
|
-
.faq-list{background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:#333;margin-bottom:50px;margin-top:20px;padding:26px 20px}.faq-list :deep(.faq-item:not(:last-child)){margin-bottom:10px}.faq-card{background:var(--article-bg-faq,#f9fafb);border-radius:10px;font-size:14px;margin-top:40px;padding:28px 16px}.faq-card__header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.faq-card__title{color:var(--article-primary,#24c790);font-size:18px;font-weight:700;margin:0}.faq-card__list{display:flex;flex-direction:column;gap:16px}.faq-card__question{font-size:14px;font-weight:700;margin:0 0 6px}.faq-card__answer{line-height:1.6;margin:0}@media (min-width:769px){.faq-card{border-radius:15px;font-size:16px;padding:28px 20px}.faq-card__title{font-size:20px}.faq-card__list{gap:24px}.faq-card__question{font-size:16px;margin-bottom:12px}}
|
|
68
|
-
</style>
|
|
@@ -13,16 +13,11 @@ function toggle() {
|
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
15
|
<template>
|
|
16
|
-
<div class="faq-item" :class="{ active }" @click="toggle">
|
|
16
|
+
<div class="faq-item" :class="{ active }" @click="toggle">
|
|
17
17
|
<p class="faq-item-title">
|
|
18
18
|
{{ settings.question }}
|
|
19
19
|
</p>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</p>
|
|
20
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
21
|
+
<div class="faq-item-answer" v-html="settings.answer" />
|
|
23
22
|
</div>
|
|
24
23
|
</template>
|
|
25
|
-
|
|
26
|
-
<style scoped>
|
|
27
|
-
.faq-item{background:#fff;border-radius:10px;cursor:pointer;padding:32px 26px 32px 18px;position:relative;transition:all .3s ease}.faq-item:hover{transform:translateY(-2px)}.faq-item-title{cursor:pointer;font-size:18px;font-weight:700;line-height:26px;margin-bottom:0;margin-top:0;padding-right:74px;transition:margin-bottom .3s ease}.faq-item-title:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:cover;content:"";height:26px;position:absolute;right:26px;top:30px;transition:transform .3s ease;width:26px}.faq-item.active .faq-item-title{margin-bottom:18px}.faq-item.active .faq-item-title:before{transform:rotate(180deg)}.faq-item-answer{color:#666;font-size:18px;line-height:27px;margin:0;max-height:0;opacity:0;overflow:hidden;padding:0 74px 0 22px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}.faq-item.active .faq-item-answer{max-height:500px;opacity:1;padding-bottom:0;padding-top:0}@media (max-width:768px){.faq-item{padding:20px 16px}.faq-item-title{font-size:14px;line-height:16px;padding-right:40px}.faq-item-title:before{height:16px;right:16px;top:20px;width:16px}.faq-item-answer{font-size:14px;line-height:16px;padding-left:0;padding-right:0}.faq-item.active .faq-item-title{margin-bottom:10px}}
|
|
28
|
-
</style>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import type { BlockData } from '@vigilkids/section-core'
|
|
3
3
|
|
|
4
|
-
import { safeUrl } from '@vigilkids/section-core'
|
|
5
4
|
import { computed } from 'vue'
|
|
6
5
|
|
|
7
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
@@ -22,7 +21,6 @@ const emit = defineEmits<{
|
|
|
22
21
|
}>()
|
|
23
22
|
|
|
24
23
|
const s = computed(() => props.settings)
|
|
25
|
-
const variant = computed(() => String(s.value.variant || 'default'))
|
|
26
24
|
|
|
27
25
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
28
26
|
editorMode: () => !!props.editorMode,
|
|
@@ -35,51 +33,15 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
35
33
|
</script>
|
|
36
34
|
|
|
37
35
|
<template>
|
|
38
|
-
|
|
39
|
-
<div
|
|
40
|
-
v-if="variant === 'light' || variant === 'dark'"
|
|
41
|
-
class="feature-card" :class="[{ 'feature-card--dark': variant === 'dark' }]"
|
|
42
|
-
>
|
|
43
|
-
<div class="feature-card__text">
|
|
44
|
-
<h2 v-if="s.title" class="feature-card__title" v-bind="editableAttrs('title')">
|
|
45
|
-
{{ s.title }}
|
|
46
|
-
</h2>
|
|
47
|
-
<ul class="feature-card__list">
|
|
48
|
-
<template v-for="blockId in blockOrder" :key="blockId">
|
|
49
|
-
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
|
|
50
|
-
{{ blocks[blockId]!.settings.text }}
|
|
51
|
-
</li>
|
|
52
|
-
</template>
|
|
53
|
-
</ul>
|
|
54
|
-
<a
|
|
55
|
-
v-if="s.button_text"
|
|
56
|
-
:href="safeUrl(String(s.button_url || ''))"
|
|
57
|
-
class="feature-card__btn"
|
|
58
|
-
v-bind="editableAttrs('button_text')"
|
|
59
|
-
>
|
|
60
|
-
{{ s.button_text }}
|
|
61
|
-
</a>
|
|
62
|
-
</div>
|
|
63
|
-
<div v-if="s.image_src" class="feature-card__image">
|
|
64
|
-
<img :src="String(s.image_src)" alt="" loading="lazy">
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
<!-- default 变体：原有灰色特性框 (VigilKids，完全不动) -->
|
|
69
|
-
<div v-else class="article-feature">
|
|
36
|
+
<div class="article-feature">
|
|
70
37
|
<p v-if="s.title" class="article-feature-title" v-bind="editableAttrs('title')">
|
|
71
38
|
{{ s.title }}
|
|
72
39
|
</p>
|
|
73
40
|
<ul class="article-feature-list">
|
|
74
41
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</li>
|
|
42
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
43
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
78
44
|
</template>
|
|
79
45
|
</ul>
|
|
80
46
|
</div>
|
|
81
47
|
</template>
|
|
82
|
-
|
|
83
|
-
<style scoped>
|
|
84
|
-
.article-feature{background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin-top:30px;padding:30px 60px}.article-feature-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:20px;margin-top:0}.article-feature-list{line-height:32px;list-style-type:disc;padding-left:20px}@media (max-width:768px){.article-feature{padding:20px 16px}}.feature-card{align-items:center;background:var(--article-bg-light,#f3f4f6);border-radius:10px;display:flex;flex-direction:column;gap:20px;margin-top:40px;padding:28px 12px}.feature-card--dark{background:var(--article-bg-dark,#1f2937);color:#fff}.feature-card__text{max-width:426px}.feature-card__title{font-size:18px;font-weight:700;margin:0 0 16px}.feature-card__list{font-size:14px;font-weight:300;line-height:1.8;list-style-type:disc;margin:0 0 20px;padding-left:16px}.feature-card--dark .feature-card__list{color:#d1d5db}.feature-card:not(.feature-card--dark) .feature-card__list{color:var(--article-text-muted,#6b7280)}.feature-card__btn{align-items:center;background:linear-gradient(to right,var(--article-gradient-start,#24c790),var(--article-gradient-end,#1ba97a));border-radius:40px;color:#000;display:inline-flex;font-size:16px;font-weight:700;height:60px;justify-content:center;min-width:260px;text-decoration:none;transition:opacity .2s}.feature-card__btn:hover{opacity:.9}.feature-card__image img{border-radius:10px;height:auto;max-width:411px;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:769px){.feature-card{border-radius:20px;flex-direction:row;justify-content:space-between;padding:40px}.feature-card__title{font-size:20px}.feature-card__list{margin-bottom:28px}.feature-card__image img{border-radius:20px}}
|
|
85
|
-
</style>
|
|
@@ -34,19 +34,10 @@ const { editableAttrs } = useInlineEdit({
|
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
|
-
<h2
|
|
37
|
+
<h2
|
|
38
38
|
:id="String(s.anchor || '')"
|
|
39
|
-
class="
|
|
40
|
-
{
|
|
41
|
-
'article-heading--plain': variant === 'plain',
|
|
42
|
-
'article-heading--accent': variant === 'accent',
|
|
43
|
-
},
|
|
44
|
-
]"
|
|
39
|
+
:class="{ 'black-h2': variant === 'plain' }"
|
|
45
40
|
>
|
|
46
41
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
47
42
|
</h2>
|
|
48
43
|
</template>
|
|
49
|
-
|
|
50
|
-
<style scoped>
|
|
51
|
-
.article-heading{background:var(--article-bg-light,#f5f9fc);font-size:28px;font-weight:var(--article-heading-weight,700);line-height:36px;margin-bottom:30px;margin-top:var(--article-heading-mt,30px);padding:14px 30px;position:relative}.article-heading:not(.article-heading--plain):not(.article-heading--accent):before{background:var(--article-primary,#24c790);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-heading--plain{font-size:28px;line-height:36px;padding:0}.article-heading--accent,.article-heading--plain{background:transparent;color:var(--article-text,#3a4259)}.article-heading--accent{font-size:30px;font-weight:var(--article-heading-weight,700);line-height:1.2;padding:0 0 0 16px}.article-heading--accent:before{background:var(--article-primary,#24c790);border-radius:0;content:"";height:25px;left:0;position:absolute;top:4px;width:5px}.article-heading[id]{scroll-margin-top:80px}@media (max-width:768px){.article-heading{font-size:20px;line-height:23px;margin-bottom:20px;margin-top:20px;padding:16px}.article-heading:not(.article-heading--plain):not(.article-heading--accent):before{height:100%;width:4px}.article-heading--plain{font-size:20px;line-height:23px}.article-heading--accent{font-size:22px;line-height:1.2;padding-left:10px}.article-heading--accent:before{height:18px;width:4px}}
|
|
52
|
-
</style>
|
|
@@ -21,11 +21,9 @@ const emit = defineEmits<{
|
|
|
21
21
|
}>()
|
|
22
22
|
|
|
23
23
|
const s = computed(() => props.settings)
|
|
24
|
-
const
|
|
25
|
-
const isWarning = computed(() => variant.value === 'warning')
|
|
26
|
-
const isRow = computed(() => String(s.value.layout) === 'row')
|
|
24
|
+
const isWarning = computed(() => String(s.value.variant) === 'warning')
|
|
27
25
|
|
|
28
|
-
const {
|
|
26
|
+
const { blockEditableAttrs } = useInlineEdit({
|
|
29
27
|
editorMode: () => !!props.editorMode,
|
|
30
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
31
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -36,70 +34,13 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
36
34
|
</script>
|
|
37
35
|
|
|
38
36
|
<template>
|
|
39
|
-
<!-- tips / note 变体：角标样式 (Visiva) -->
|
|
40
|
-
<div v-if="variant === 'tips' || variant === 'note'" class="notice-badge">
|
|
41
|
-
<div class="notice-badge__tag">
|
|
42
|
-
<span class="notice-badge__label" v-bind="editableAttrs('title')">{{
|
|
43
|
-
s.title || 'Tips'
|
|
44
|
-
}}</span>
|
|
45
|
-
</div>
|
|
46
|
-
<div class="notice-badge__content">
|
|
47
|
-
<template v-for="blockId in blockOrder" :key="blockId">
|
|
48
|
-
<p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
|
|
49
|
-
{{ blocks[blockId]!.settings.text }}
|
|
50
|
-
</p>
|
|
51
|
-
</template>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<!-- info 变体：圆角卡片+图标标题 (Visiva) -->
|
|
56
|
-
<div v-else-if="variant === 'info'" class="notice-card">
|
|
57
|
-
<div v-if="s.title" class="notice-card__header">
|
|
58
|
-
<svg
|
|
59
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
60
|
-
width="22"
|
|
61
|
-
height="22"
|
|
62
|
-
viewBox="0 0 24 24"
|
|
63
|
-
fill="none"
|
|
64
|
-
stroke="currentColor"
|
|
65
|
-
stroke-width="2"
|
|
66
|
-
stroke-linecap="round"
|
|
67
|
-
stroke-linejoin="round"
|
|
68
|
-
>
|
|
69
|
-
<circle cx="12" cy="12" r="10" />
|
|
70
|
-
<path d="M12 16v-4" />
|
|
71
|
-
<path d="M12 8h.01" />
|
|
72
|
-
</svg>
|
|
73
|
-
<h3 class="notice-card__title" v-bind="editableAttrs('title')">
|
|
74
|
-
{{ s.title }}
|
|
75
|
-
</h3>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="notice-card__content">
|
|
78
|
-
<template v-for="blockId in blockOrder" :key="blockId">
|
|
79
|
-
<p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
|
|
80
|
-
{{ blocks[blockId]!.settings.text }}
|
|
81
|
-
</p>
|
|
82
|
-
</template>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<!-- default / warning 变体：虚线框样式 (VigilKids 原有，完全不动) -->
|
|
87
37
|
<div
|
|
88
|
-
v-else
|
|
89
38
|
class="notice-info"
|
|
90
|
-
:class="{
|
|
91
|
-
'warning': isWarning,
|
|
92
|
-
'notice-info--row-child': isRow,
|
|
93
|
-
}"
|
|
39
|
+
:class="{ 'warning': isWarning }"
|
|
94
40
|
>
|
|
95
41
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</p>
|
|
42
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
43
|
+
<p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
99
44
|
</template>
|
|
100
45
|
</div>
|
|
101
46
|
</template>
|
|
102
|
-
|
|
103
|
-
<style scoped>
|
|
104
|
-
.notice-info{background:color-mix(in srgb,var(--article-primary-hover,#1ba97a) 10%,transparent);border:2px dashed var(--article-primary-hover,#1ba97a);border-radius:10px;font-size:18px;line-height:21px;margin-bottom:20px;margin-top:30px;padding:60px 40px 40px 108px;position:relative}.notice-info:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='142' height='40' fill='none' viewBox='0 0 142 40'%3E%3Cpath fill='%2324c790' d='M0 0h142l-9.079 27.62a18 18 0 0 1-17.1 12.38H26.179a18 18 0 0 1-17.1-12.38z'/%3E%3Cpath fill='%23fff' d='M51.153 30.957h-.033c-1.017-.011-2.037-.011-3.057-.011h-1.556c-1.039 0-2.078 0-3.12-.014a4.8 4.8 0 0 1-1.681-.355c-.91-.356-1.43-1.149-1.428-2.18l.003-3.866c0-2.141 0-4.285.02-6.426.002-.582.377-1.129.697-1.416 1.238-1.132 2.584-2.543 3.147-4.446.156-.53.216-1.116.279-1.734.126-1.23.924-2.031 1.99-2.031q.63.002 1.247.369c.823.495 1.373 1.271 1.676 2.379.487 1.758.238 3.464-.035 4.927v.005a.555.555 0 0 0 .544.66h3.555c.612 0 1.49.076 2.031.732.394.479.506 1.124.34 1.977-.51 2.622-1.133 5.267-1.729 7.73-.186.769-.495 1.48-.793 2.169l-.128.295c-.34.798-1.04 1.236-1.969 1.236M35.91 30.7h-.325a2.145 2.145 0 0 1-2.139-2.139v-9.529c0-1.176.963-2.138 2.139-2.138h.325c1.176 0 2.138.962 2.138 2.138v9.527a2.14 2.14 0 0 1-2.138 2.14M76.807 21.932h-3.623v-2.285h3.623q.84 0 1.367-.274.527-.284.771-.781.245-.498.245-1.123 0-.634-.245-1.182a1.97 1.97 0 0 0-.771-.879q-.528-.332-1.367-.332h-2.608V27h-2.93V12.781h5.538q1.67 0 2.861.606 1.2.595 1.836 1.65.635 1.054.635 2.412 0 1.377-.635 2.383-.634 1.005-1.836 1.553-1.191.547-2.861.547m9.99-3.194V27h-2.813V16.434h2.647zm3.184-2.373-.05 2.608a7 7 0 0 0-.497-.05 5 5 0 0 0-.518-.028 3.1 3.1 0 0 0-1.035.156 1.85 1.85 0 0 0-.723.44 1.9 1.9 0 0 0-.43.712q-.136.42-.156.957l-.566-.176q0-1.025.205-1.884.205-.87.596-1.514.4-.645.976-.996a2.5 2.5 0 0 1 1.319-.352q.234 0 .478.04.244.028.4.087m.585 5.46v-.206q0-1.162.332-2.139a4.95 4.95 0 0 1 .967-1.709 4.3 4.3 0 0 1 1.563-1.123q.927-.41 2.129-.41 1.2 0 2.138.41.938.4 1.573 1.124a4.9 4.9 0 0 1 .976 1.709q.332.975.332 2.138v.205q0 1.152-.332 2.139a5 5 0 0 1-.976 1.709 4.3 4.3 0 0 1-1.563 1.123q-.927.4-2.129.4-1.2 0-2.138-.4a4.4 4.4 0 0 1-1.573-1.123 5.1 5.1 0 0 1-.967-1.71 6.7 6.7 0 0 1-.332-2.138m2.813-.206v.205q0 .664.117 1.24.117.577.371 1.016.264.43.684.674t1.025.244q.585 0 1.006-.244.42-.245.674-.674.255-.44.371-1.015.127-.577.127-1.24v-.206q0-.645-.127-1.21a3.2 3.2 0 0 0-.38-1.016q-.255-.45-.675-.704t-1.015-.253-1.016.253q-.41.255-.674.704a3.4 3.4 0 0 0-.37 1.015 6 6 0 0 0-.118 1.211m14.639 2.461a.9.9 0 0 0-.176-.547q-.175-.244-.654-.449-.469-.215-1.358-.39a10.6 10.6 0 0 1-1.494-.44 5.2 5.2 0 0 1-1.191-.654 2.8 2.8 0 0 1-.782-.899 2.5 2.5 0 0 1-.283-1.201q0-.665.283-1.25.294-.586.83-1.035a3.9 3.9 0 0 1 1.328-.713 5.6 5.6 0 0 1 1.778-.264q1.377 0 2.363.44.996.44 1.524 1.21.537.762.537 1.739h-2.813q0-.41-.176-.732a1.16 1.16 0 0 0-.527-.518q-.351-.195-.918-.195-.469 0-.81.166a1.25 1.25 0 0 0-.528.43 1.03 1.03 0 0 0-.176.585q0 .245.098.44.108.185.342.341t.605.294q.381.126.938.234a10.8 10.8 0 0 1 2.041.615q.898.372 1.426 1.016.527.635.527 1.67 0 .702-.313 1.289-.312.585-.898 1.025a4.6 4.6 0 0 1-1.406.674 6.6 6.6 0 0 1-1.826.234q-1.475 0-2.5-.527-1.016-.528-1.543-1.338-.518-.82-.518-1.68h2.666q.02.577.293.928.283.352.713.508.44.156.947.156.548 0 .908-.146.362-.157.547-.41a1 1 0 0 0 .196-.606'/%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:40px;left:40px;position:absolute;top:0;width:142px}.notice-info :deep(p){color:var(--article-text,#3a4259);margin-top:0;position:relative}.notice-info :deep(p:not(:last-child)){margin-bottom:16px}.notice-info :deep(p:before){background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' viewBox='0 0 30 30'%3E%3Cpath fill='%2324c790' d='M14.947 1.897C7.722 1.897 1.844 7.775 1.844 15S7.72 28.103 14.947 28.103c7.225 0 13.103-5.878 13.103-13.103S22.172 1.897 14.946 1.897m6.323 10.942-7.528 7.609-.007.005q-.003.004-.006.008c-.06.058-.134.094-.204.133-.034.02-.063.05-.1.064a.95.95 0 0 1-.706-.002c-.038-.016-.068-.048-.104-.067-.07-.04-.142-.075-.202-.134l-.005-.007-.007-.006-3.702-3.805a.94.94 0 1 1 1.348-1.31l3.034 3.117 6.853-6.928a.94.94 0 1 1 1.336 1.322'/%3E%3C/svg%3E") no-repeat 50%;content:"";height:30px;left:-38px;position:absolute;top:-4.5px;width:30px}.notice-info.warning{background:color-mix(in srgb,var(--article-warning,#f1631c) 10%,transparent);border-color:var(--article-warning,#f1631c)}.notice-info.warning:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='142' height='40' fill='none' viewBox='0 0 142 40'%3E%3Cpath fill='%23f1631c' d='M0 0h142l-9.079 27.62a18 18 0 0 1-17.1 12.38H26.179a18 18 0 0 1-17.1-12.38z'/%3E%3Cpath fill='%23fff' d='M38.14 8.478h.033c1.017.01 2.037.01 3.057.01h1.556c1.039 0 2.078 0 3.12.014a4.8 4.8 0 0 1 1.681.356c.91.355 1.43 1.148 1.427 2.18l-.002 3.865c0 2.141 0 4.285-.02 6.426-.002.583-.377 1.13-.697 1.417-1.238 1.132-2.584 2.543-3.147 4.446-.156.53-.216 1.115-.279 1.733-.126 1.23-.924 2.032-1.99 2.032-.419 0-.837-.126-1.247-.37-.823-.494-1.373-1.27-1.676-2.378-.487-1.758-.238-3.465.035-4.927v-.006a.555.555 0 0 0-.544-.659h-3.555c-.612 0-1.49-.076-2.032-.733-.393-.478-.505-1.123-.338-1.977.508-2.622 1.132-5.266 1.728-7.73.185-.768.495-1.479.793-2.168l.128-.295c.34-.799 1.04-1.236 1.969-1.236m15.244.257h.325c1.176 0 2.139.962 2.139 2.138v9.53a2.145 2.145 0 0 1-2.139 2.138h-.325a2.145 2.145 0 0 1-2.138-2.139v-9.526a2.14 2.14 0 0 1 2.138-2.141M79.512 22.283h2.92q-.089 1.436-.791 2.549-.694 1.114-1.944 1.738-1.24.625-2.988.625-1.367 0-2.451-.468a5.2 5.2 0 0 1-1.856-1.368q-.762-.888-1.162-2.148t-.4-2.822v-.987q0-1.562.41-2.822.42-1.27 1.191-2.158a5.3 5.3 0 0 1 1.866-1.367q1.084-.48 2.421-.479 1.778 0 2.999.645 1.23.645 1.904 1.777.684 1.133.82 2.578h-2.93q-.048-.86-.341-1.455a1.94 1.94 0 0 0-.889-.908q-.585-.313-1.562-.313-.733 0-1.28.274-.546.273-.918.83-.371.557-.556 1.406-.177.84-.176 1.973v1.006q0 1.103.166 1.943.166.83.508 1.406.351.567.898.86.556.283 1.338.283.918 0 1.514-.293t.908-.87q.323-.575.38-1.435m4.219-.459v-.205q0-1.162.332-2.139a4.95 4.95 0 0 1 .966-1.709 4.3 4.3 0 0 1 1.563-1.123q.927-.41 2.129-.41 1.2 0 2.138.41.938.4 1.573 1.124.645.721.976 1.709.332.975.332 2.138v.205q0 1.152-.332 2.139a5 5 0 0 1-.976 1.709 4.3 4.3 0 0 1-1.563 1.123q-.927.4-2.129.4-1.2 0-2.138-.4a4.4 4.4 0 0 1-1.573-1.123 5.1 5.1 0 0 1-.966-1.71 6.7 6.7 0 0 1-.332-2.138m2.812-.205v.205q0 .664.117 1.24.117.577.371 1.016.264.43.684.674t1.025.244q.585 0 1.006-.244.42-.245.674-.674a3.4 3.4 0 0 0 .371-1.015q.127-.577.127-1.24v-.206q0-.645-.127-1.21a3.2 3.2 0 0 0-.38-1.016 1.9 1.9 0 0 0-.675-.704q-.42-.253-1.015-.253-.596 0-1.016.253-.41.255-.674.704-.254.44-.37 1.015a6 6 0 0 0-.118 1.211m11.68-2.93V27H95.41V16.434h2.637zm-.41 2.657h-.762q0-1.173.302-2.11.304-.947.85-1.611a3.65 3.65 0 0 1 1.299-1.025 3.9 3.9 0 0 1 1.699-.362q.742 0 1.358.215.615.214 1.054.684.45.468.684 1.24.244.771.244 1.885V27h-2.832v-6.748q0-.703-.195-1.094a1.1 1.1 0 0 0-.576-.547q-.372-.166-.918-.166-.567 0-.987.225-.41.225-.683.625a3 3 0 0 0-.4.918q-.138.527-.138 1.133m14.58 2.734a.9.9 0 0 0-.176-.547q-.175-.244-.655-.449-.468-.215-1.357-.39a10.6 10.6 0 0 1-1.494-.44 5.2 5.2 0 0 1-1.191-.654 2.85 2.85 0 0 1-.782-.899 2.5 2.5 0 0 1-.283-1.201q0-.665.283-1.25.294-.586.83-1.035a3.9 3.9 0 0 1 1.328-.713 5.6 5.6 0 0 1 1.778-.264q1.377 0 2.363.44.996.44 1.524 1.21.537.762.537 1.739h-2.813q0-.41-.176-.732a1.16 1.16 0 0 0-.527-.518q-.351-.195-.918-.195-.469 0-.81.166a1.25 1.25 0 0 0-.528.43 1.03 1.03 0 0 0-.176.585q0 .245.098.44.108.185.342.341t.605.294q.381.126.938.234a10.8 10.8 0 0 1 2.041.615q.898.372 1.426 1.016.527.635.527 1.67 0 .702-.313 1.289-.312.585-.898 1.025a4.6 4.6 0 0 1-1.406.674 6.6 6.6 0 0 1-1.826.234q-1.475 0-2.5-.527-1.016-.528-1.543-1.338-.518-.82-.518-1.68h2.666q.02.577.293.928.283.352.713.508.44.156.947.156.548 0 .908-.146.362-.157.547-.41a1 1 0 0 0 .196-.606'/%3E%3C/svg%3E") no-repeat 50%;background-size:cover}.notice-info.warning :deep(p:before){background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' viewBox='0 0 30 30'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23f1631c' d='M15 1.875C7.751 1.875 1.875 7.751 1.875 15S7.751 28.125 15 28.125 28.125 22.249 28.125 15 22.249 1.875 15 1.875m6.299 17.931a1.06 1.06 0 0 1 0 1.493 1.06 1.06 0 0 1-1.492 0L15 16.49 10.195 21.3a1.06 1.06 0 0 1-1.494 0 1.06 1.06 0 0 1 0-1.492l4.805-4.804L8.7 10.195a1.058 1.058 0 0 1 .747-1.803c.28 0 .549.111.747.31L15 13.508l4.805-4.805a1.06 1.06 0 0 1 1.494-.003 1.06 1.06 0 0 1 0 1.494L16.49 15z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h30v30H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 50%}@media (max-width:768px){.notice-info{line-height:19px;padding:44px 16px 30px 44px}.notice-info:before{background-size:cover!important;height:32px;left:16px;width:114px}.notice-info :deep(p:before){background-size:cover;height:24px;left:-30px;top:-2px;width:24px}}.notice-badge{background:var(--article-bg-light,#f3f4f6);border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.notice-badge__tag{align-items:center;background:var(--article-badge,#24c790);border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding:0 8px;position:absolute;top:0}.notice-badge__label{color:#fff;font-size:14px;font-weight:700}.notice-badge__content{color:var(--article-text-muted,#6b7280);font-size:14px;font-weight:300;line-height:1.6}.notice-badge__content p{margin:0 0 8px}.notice-badge__content p:last-child{margin-bottom:0}.notice-card{background:var(--article-bg-light,#f3f4f6);border-radius:10px;margin-top:40px;padding:20px 16px}.notice-card__header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.notice-card__title{color:var(--article-text,#1f2937);font-size:16px;font-weight:600;margin:0}.notice-card__content{color:var(--article-text-muted,#6b7280);font-size:14px;font-weight:300;line-height:1.6}.notice-card__content p{margin:0 0 8px}.notice-card__content p:last-child{margin-bottom:0}@media (min-width:769px){.notice-badge{padding:36px 16px 20px}.notice-card{padding:24px}.notice-badge__content,.notice-card__content{font-size:16px}}
|
|
105
|
-
</style>
|
|
@@ -47,28 +47,20 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
47
47
|
</script>
|
|
48
48
|
|
|
49
49
|
<template>
|
|
50
|
-
<div :class="isDashed ? 'props-dashed' : 'props-solid'">
|
|
51
|
-
<!-- Pros -->
|
|
50
|
+
<div :class="isDashed ? 'props-dashed' : 'props-solid'">
|
|
52
51
|
<div class="props-left">
|
|
53
52
|
<span v-bind="editableAttrs('pros_title')">{{ s.pros_title || 'Pros' }}</span>
|
|
54
53
|
<ul>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</li>
|
|
54
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
55
|
+
<li v-for="item in pros" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
|
|
58
56
|
</ul>
|
|
59
57
|
</div>
|
|
60
|
-
<!-- Cons -->
|
|
61
58
|
<div class="props-right">
|
|
62
59
|
<span v-bind="editableAttrs('cons_title')">{{ s.cons_title || 'Cons' }}</span>
|
|
63
60
|
<ul>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</li>
|
|
61
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
62
|
+
<li v-for="item in cons" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
|
|
67
63
|
</ul>
|
|
68
64
|
</div>
|
|
69
65
|
</div>
|
|
70
66
|
</template>
|
|
71
|
-
|
|
72
|
-
<style scoped>
|
|
73
|
-
.props-dashed,.props-solid{background:var(--article-bg-light,#f5f9fc);border-radius:10px;display:grid;gap:60px;grid-template-columns:1fr 1fr;margin:20px 0;padding:20px 30px}.props-dashed{background:#fff;border:1px dashed #ccc}.props-dashed span,.props-solid span{display:block;font-size:20px;font-weight:700;line-height:28px;padding-left:14px;position:relative}.props-dashed span:before,.props-solid span:before{background:var(--article-primary,#24c790);content:"";height:14px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:6px}.props-dashed ul,.props-solid ul{color:var(--article-text,#3a4259);font-size:16px;line-height:32px;margin-top:14px;padding-left:14px}.props-dashed .props-right span:before,.props-solid .props-right span:before{background:var(--article-cons,#f44242)}@media (max-width:768px){.props-dashed,.props-solid{gap:20px;grid-template-columns:1fr;margin:16px 0;padding:16px}.props-dashed span,.props-solid span{font-size:18px;line-height:21px;padding-left:10px}.props-dashed span:before,.props-solid span:before{height:10px;width:4px}.props-dashed ul,.props-solid ul{font-size:14px;line-height:21px;margin-top:10px;padding-left:10px}}
|
|
74
|
-
</style>
|
|
@@ -25,7 +25,7 @@ const s = computed(() => props.settings)
|
|
|
25
25
|
const title = computed(() => (s.value.title as string) || 'Question:')
|
|
26
26
|
const renderedContent = computed(() => renderContent(s.value.content))
|
|
27
27
|
|
|
28
|
-
const {
|
|
28
|
+
const { editableAttrs } = useInlineEdit({
|
|
29
29
|
editorMode: () => !!props.editorMode,
|
|
30
30
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
31
31
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -36,29 +36,11 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
36
36
|
</script>
|
|
37
37
|
|
|
38
38
|
<template>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<template v-for="blockId in blockOrder" :key="blockId">
|
|
42
|
-
<div v-if="blocks[blockId]" class="qa-card__item">
|
|
43
|
-
<h3 class="qa-card__question" v-bind="blockEditableAttrs(blockId, 'question')">
|
|
44
|
-
{{ blocks[blockId]!.settings.question }}
|
|
45
|
-
</h3>
|
|
46
|
-
<p class="qa-card__answer" v-bind="blockEditableAttrs(blockId, 'answer')">
|
|
47
|
-
{{ blocks[blockId]!.settings.answer }}
|
|
48
|
-
</p>
|
|
49
|
-
</div>
|
|
50
|
-
</template>
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
<!-- VigilKids: 单条 richtext 问答 -->
|
|
54
|
-
<div v-else class="article-question">
|
|
55
|
-
<p class="article-question-title">
|
|
39
|
+
<div class="article-question">
|
|
40
|
+
<p class="article-question-title" v-bind="editableAttrs('title')">
|
|
56
41
|
{{ title }}
|
|
57
42
|
</p>
|
|
58
|
-
|
|
43
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
44
|
+
<p v-html="renderedContent" />
|
|
59
45
|
</div>
|
|
60
46
|
</template>
|
|
61
|
-
|
|
62
|
-
<style scoped>
|
|
63
|
-
.article-question{background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin:30px 0;padding:30px 30px 30px 82px}.article-question-title{font-size:20px;font-weight:700;line-height:38px;margin-bottom:20px;margin-top:0;position:relative}.article-question-title:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' fill='none' viewBox='0 0 38 38'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23f1981c' d='M19 38C8.506 38 0 29.492 0 19 0 8.506 8.506 0 19 0s19 8.506 19 19c0 10.492-8.506 19-19 19m0-35.078C10.121 2.922 2.923 10.12 2.923 19S10.121 35.077 19 35.077 35.077 27.879 35.077 19 27.879 2.922 19 2.922m5.117 14.064q-.564.72-1.213 1.277-.65.558-1.213 1.114a6.2 6.2 0 0 0-.936 1.156 2.47 2.47 0 0 0-.37 1.327q0 .614.157 1.114a7 7 0 0 0 .314.842h-3.012a5.6 5.6 0 0 1-.228-.928q-.1-.57-.1-1.127 0-.871.35-1.577.349-.708.87-1.321.52-.614 1.128-1.184.606-.573 1.127-1.114t.87-1.141.35-1.314q0-.642-.257-1.12a2.3 2.3 0 0 0-.706-.8 3.1 3.1 0 0 0-1.028-.477 4.7 4.7 0 0 0-1.235-.158q-2.126 0-4.052 1.899v-3.298q2.339-1.37 4.852-1.37 1.157 0 2.183.3a5.5 5.5 0 0 1 1.8.885q.769.585 1.213 1.455.442.873.442 2.027 0 1.1-.37 1.956a7.2 7.2 0 0 1-.936 1.577m-4.646 9.056q.813 0 1.427.571.6.529.6 1.342 0 .8-.6 1.342-.628.556-1.427.556a2.1 2.1 0 0 1-1.442-.556q-.6-.542-.599-1.342 0-.814.6-1.342.614-.57 1.44-.571'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h38v38H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:38px;left:-52px;position:absolute;top:0;width:38px}.article-question-content :deep(p){color:var(--article-text,#3a4259);margin-top:10px}.article-question-content :deep(p:first-child){margin-top:0}.article-question-content :deep(p:last-child){margin-bottom:0}.qa-card{background:var(--article-bg-light,#f3f4f6);border-radius:10px;display:flex;flex-direction:column;font-size:14px;gap:24px;margin:40px 0;padding:20px 16px}.qa-card__question{color:var(--article-text,#1f2937);font-size:14px;font-weight:600;margin:0 0 8px}.qa-card__answer{color:var(--article-text-muted,#6b7280);line-height:1.6;margin:0}@media (min-width:769px){.qa-card{border-radius:20px;padding:24px 20px}.qa-card,.qa-card__question{font-size:16px}}@media (max-width:768px){.article-question{padding:20px}.article-question-title{padding-left:52px}.article-question-title:before{left:0}}
|
|
64
|
-
</style>
|
|
@@ -35,18 +35,14 @@ const { editableAttrs } = useInlineEdit({
|
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<template>
|
|
38
|
-
<div class="article-info">
|
|
38
|
+
<div class="article-info">
|
|
39
39
|
<p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">
|
|
40
40
|
{{ s.title }}
|
|
41
41
|
</p>
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</
|
|
42
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
43
|
+
<p class="article-info-content" v-html="renderedContent" />
|
|
44
|
+
<p v-if="s.attribution" v-bind="editableAttrs('attribution')">
|
|
45
|
+
—— {{ s.attribution }}
|
|
46
|
+
</p>
|
|
47
47
|
</div>
|
|
48
48
|
</template>
|
|
49
|
-
|
|
50
|
-
<style scoped>
|
|
51
|
-
.article-info{background:var(--article-quote-bg,#f7f7f7);border:var(--article-quote-border,none);color:var(--article-text,#3a4259);font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-info:before{background:var(--article-quote-bar,#24c790);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-info-title{font-size:20px;font-weight:700;line-height:23px;margin-top:0}.article-info-content,.article-info-title{color:var(--article-text,#3a4259);margin-bottom:14px}.article-info-content{font-size:16px;font-style:italic;line-height:24px}.article-info-content :deep(p){margin-top:10px}.article-info-content :deep(p:first-child){margin-top:0}.article-info-attribution{align-items:center;display:flex;font-style:normal;margin-bottom:0;margin-top:10px}.article-info-divider{background:var(--article-text-muted,#6b7280);display:inline-block;height:1px;margin-right:8px;vertical-align:middle;width:48px}@media (max-width:768px){.article-info{font-size:14px;padding:20px 16px}.article-info:before{height:100%;width:4px}.article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-info-content{font-size:14px;line-height:21px}.article-info-attribution{text-align:right}}
|
|
52
|
-
</style>
|
|
@@ -34,7 +34,7 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
|
-
<ul class="step-list">
|
|
37
|
+
<ul class="step-list">
|
|
38
38
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
39
39
|
<li v-if="blocks[blockId]">
|
|
40
40
|
<span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{
|
|
@@ -47,7 +47,3 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
47
47
|
</template>
|
|
48
48
|
</ul>
|
|
49
49
|
</template>
|
|
50
|
-
|
|
51
|
-
<style scoped>
|
|
52
|
-
.step-list{list-style:none;margin-bottom:30px;margin-top:20px;padding:0}.step-list li:not(:last-child){margin-bottom:24px}.step-list li{color:var(--article-text,#3a4259);font-size:16px;line-height:24px}.step-list li span{font-weight:700}.step-list .primary-color{color:var(--article-primary-hover,#1ba97a)}@media (max-width:768px){.step-list li{font-size:14px;line-height:21px}.step-list li:not(:last-child){margin-bottom:21px}}
|
|
53
|
-
</style>
|
|
@@ -34,27 +34,10 @@ const { editableAttrs } = useInlineEdit({
|
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
|
-
<h3 class="
|
|
38
|
-
<!-- numbered: 实心绿色圆形+白色数字 (VigilKids) -->
|
|
37
|
+
<h3 :class="{ 'black-h3': variant === 'numbered' }">
|
|
39
38
|
<span
|
|
40
39
|
v-if="variant === 'numbered' && s.number"
|
|
41
|
-
class="
|
|
42
|
-
v-bind="editableAttrs('number')"
|
|
43
|
-
>
|
|
44
|
-
{{ s.number }}
|
|
45
|
-
</span>
|
|
46
|
-
<!-- pill: 绿色药丸标签 (Visiva) -->
|
|
47
|
-
<span
|
|
48
|
-
v-else-if="variant === 'pill' && s.label"
|
|
49
|
-
class="article-subheading__pill"
|
|
50
|
-
v-bind="editableAttrs('label')"
|
|
51
|
-
>
|
|
52
|
-
{{ s.label }}
|
|
53
|
-
</span>
|
|
54
|
-
<!-- icon: 浅色圆形+深色数字 (Visiva) -->
|
|
55
|
-
<span
|
|
56
|
-
v-else-if="variant === 'icon' && s.number"
|
|
57
|
-
class="article-subheading__icon"
|
|
40
|
+
class="green-text"
|
|
58
41
|
v-bind="editableAttrs('number')"
|
|
59
42
|
>
|
|
60
43
|
{{ s.number }}
|
|
@@ -62,7 +45,3 @@ const { editableAttrs } = useInlineEdit({
|
|
|
62
45
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
63
46
|
</h3>
|
|
64
47
|
</template>
|
|
65
|
-
|
|
66
|
-
<style scoped>
|
|
67
|
-
.article-subheading{align-items:center;color:var(--article-primary-hover,#1ba97a);display:flex;font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-subheading--numbered{color:var(--article-text,#3a4259)}.article-subheading__number{align-items:center;background:var(--article-sub-number-bg,var(--article-primary,#24c790));border:var(--article-sub-number-border,none);border-radius:50%;color:var(--article-sub-number-color,#fff);display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;width:36px}.article-subheading__pill{background:var(--article-primary,#24c790);border-radius:20px;color:#fff;display:inline-flex;height:22px;padding:0 8px}.article-subheading__icon,.article-subheading__pill{align-items:center;flex-shrink:0;font-size:14px;font-weight:600;justify-content:center;margin-right:8px}.article-subheading__icon{background:var(--article-highlight,#ecfdf5);border-radius:50%;color:var(--article-text,#3a4259);display:flex;height:24px;min-width:24px;width:24px}.article-subheading--icon,.article-subheading--pill{color:var(--article-text,#3a4259);font-weight:700}@media (max-width:768px){.article-subheading{font-size:18px}}
|
|
68
|
-
</style>
|
|
@@ -48,8 +48,8 @@ const rows = computed(() =>
|
|
|
48
48
|
</script>
|
|
49
49
|
|
|
50
50
|
<template>
|
|
51
|
-
<div class="contrast-table" :class="[{ 'sticky-table': isSticky }]">
|
|
52
|
-
<table>
|
|
51
|
+
<div class="contrast-table" :class="[{ 'sticky-table': isSticky }]">
|
|
52
|
+
<table cellspacing="0">
|
|
53
53
|
<thead align="left">
|
|
54
54
|
<tr>
|
|
55
55
|
<th
|
|
@@ -70,7 +70,3 @@ const rows = computed(() =>
|
|
|
70
70
|
</table>
|
|
71
71
|
</div>
|
|
72
72
|
</template>
|
|
73
|
-
|
|
74
|
-
<style scoped>
|
|
75
|
-
.contrast-table{background:#fff;border:1px solid var(--article-border,#e5e7eb);margin:30px 0;overflow-x:auto}.contrast-table table{border-spacing:0;color:var(--article-text,#3a4259);text-align:center;width:100%}.contrast-table td,.contrast-table th{border-bottom:1px solid var(--article-border,#e5e7eb);border-right:1px solid var(--article-border,#e5e7eb);padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td{background-color:var(--article-bg-light,#f5f9fc)}.contrast-table thead tr th{background-color:var(--article-table-header,#374151);color:var(--article-table-header-text,#fff)}.contrast-table.sticky-table tr td:first-child,.contrast-table.sticky-table tr th:first-child{font-weight:700;left:0;position:sticky;z-index:2}.contrast-table.sticky-table tr td:first-child:after,.contrast-table.sticky-table tr th:first-child:after{background-image:linear-gradient(270deg,rgba(49,49,49,0),rgba(0,0,0,.04));bottom:0;content:"";position:absolute;right:-16px;top:0;width:16px;z-index:1}.contrast-table tr td :deep(a){color:var(--article-primary-hover,#1ba97a);font-weight:400}@media (max-width:768px){.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.contrast-table tbody{font-size:14px}}
|
|
76
|
-
</style>
|
|
@@ -74,7 +74,7 @@ const { editableAttrs } = useInlineEdit({
|
|
|
74
74
|
</script>
|
|
75
75
|
|
|
76
76
|
<template>
|
|
77
|
-
<ul class="level-1">
|
|
77
|
+
<ul class="level-1">
|
|
78
78
|
<li class="table-of-contents" v-bind="editableAttrs('title')">
|
|
79
79
|
{{ title }}
|
|
80
80
|
</li>
|
|
@@ -100,7 +100,3 @@ const { editableAttrs } = useInlineEdit({
|
|
|
100
100
|
</template>
|
|
101
101
|
</ul>
|
|
102
102
|
</template>
|
|
103
|
-
|
|
104
|
-
<style scoped>
|
|
105
|
-
.level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;list-style:none;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.level-1 li,.level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.level-1 li:not(.table-of-contents):before,.level-2 li:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' fill='none' viewBox='0 0 21 12'%3E%3Cpath fill='%2324c790' d='M20.53 6.53a.75.75 0 0 0 0-1.06L15.757.697a.75.75 0 0 0-1.06 1.06L18.939 6l-4.242 4.243a.75.75 0 0 0 1.06 1.06zM0 6v.75h20v-1.5H0z'/%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.level-2{display:flex;flex-direction:column;gap:10px;list-style:none;margin-left:35px;padding:0}.level-1 a,.level-2 a{align-items:center;color:inherit;display:flex;text-decoration:none}.hot-icon{flex-shrink:0;margin-left:4px}@media (max-width:768px){.level-1 li.table-of-contents{font-size:16px}.level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}}
|
|
106
|
-
</style>
|
|
@@ -36,9 +36,8 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
36
36
|
<template>
|
|
37
37
|
<ul class="blog-h3-style1-list">
|
|
38
38
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</li>
|
|
39
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
40
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
42
41
|
</template>
|
|
43
42
|
</ul>
|
|
44
43
|
</template>
|
|
@@ -78,9 +78,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
78
78
|
<h3 class="blog-qa-card3-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
|
|
79
79
|
{{ item.settings.question }}
|
|
80
80
|
</h3>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</p>
|
|
81
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
+
<div class="blog-qa-card3-answer" v-bind="blockEditableAttrs(blockOrder[index], 'answer')" v-html="item.settings.answer" />
|
|
84
83
|
</div>
|
|
85
84
|
</div>
|
|
86
85
|
</template>
|
|
@@ -46,9 +46,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
46
46
|
|
|
47
47
|
<ul :class="isDark ? 'blog-features-card-dark-list' : 'blog-features-card-list'">
|
|
48
48
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</li>
|
|
49
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
50
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
52
51
|
</template>
|
|
53
52
|
</ul>
|
|
54
53
|
|
|
@@ -44,14 +44,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
44
44
|
<img src="https://cdn.visiva.ai/blog/temp/idea.png" alt="Lightbulb" class="blog-note-style-badge-icon">
|
|
45
45
|
<span class="blog-note-style-badge-text">Tips</span>
|
|
46
46
|
</div>
|
|
47
|
-
|
|
47
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
48
|
+
<div
|
|
48
49
|
v-for="id in blockOrder"
|
|
49
50
|
:key="id"
|
|
50
51
|
class="blog-note-style-text"
|
|
51
52
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</p>
|
|
53
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
54
|
+
/>
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
57
|
<!-- note 变体: blog-note-style2 -->
|
|
@@ -63,14 +63,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
63
63
|
<img src="https://cdn.visiva.ai/blog/temp/note.png" alt="Note" class="blog-note-style-badge-icon">
|
|
64
64
|
<span class="blog-note-style-badge-text">{{ title || 'Tips' }}</span>
|
|
65
65
|
</div>
|
|
66
|
-
|
|
66
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
67
|
+
<div
|
|
67
68
|
v-for="id in blockOrder"
|
|
68
69
|
:key="id"
|
|
69
70
|
class="blog-note-style-text"
|
|
70
71
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
</p>
|
|
72
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
73
|
+
/>
|
|
74
74
|
</div>
|
|
75
75
|
|
|
76
76
|
<!-- info 变体: blog-note-style3 -->
|
|
@@ -88,14 +88,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
88
88
|
{{ title || 'Note' }}
|
|
89
89
|
</h3>
|
|
90
90
|
</div>
|
|
91
|
-
|
|
91
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
92
|
+
<div
|
|
92
93
|
v-for="id in blockOrder"
|
|
93
94
|
:key="id"
|
|
94
95
|
class="blog-note-style3-text"
|
|
95
96
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</p>
|
|
97
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
98
|
+
/>
|
|
99
99
|
</div>
|
|
100
100
|
</template>
|
|
101
101
|
|
|
@@ -61,9 +61,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
61
61
|
</div>
|
|
62
62
|
<ul class="blog-pros-cons-list">
|
|
63
63
|
<template v-for="blockId in prosBlocks" :key="blockId">
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</li>
|
|
64
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
65
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
67
66
|
</template>
|
|
68
67
|
</ul>
|
|
69
68
|
</div>
|
|
@@ -98,9 +97,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
98
97
|
</div>
|
|
99
98
|
<ul class="blog-pros-cons-list">
|
|
100
99
|
<template v-for="blockId in consBlocks" :key="blockId">
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</li>
|
|
100
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
101
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
104
102
|
</template>
|
|
105
103
|
</ul>
|
|
106
104
|
</div>
|
|
@@ -78,9 +78,8 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
78
78
|
>
|
|
79
79
|
{{ item.settings.question }}
|
|
80
80
|
</h3>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</p>
|
|
81
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
+
<div class="blog-qa-answer" v-html="item.settings.answer" />
|
|
84
83
|
</div>
|
|
85
84
|
</div>
|
|
86
85
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.article-content--vigilkids p{color:#3a4259;margin-top:10px}.article-content--vigilkids a:not(.btn){color:#4285f4;transition:all .3s ease}.article-content--vigilkids .level-1 a,.article-content--vigilkids .level-2 a{color:#3a4259}.article-content--vigilkids .level-1 a:hover,.article-content--vigilkids .level-2 a:hover{color:#4285f4}.article-content--vigilkids .underline,.article-content--vigilkids a:not(.btn):hover{text-decoration:underline}.article-content--vigilkids .font-bold{font-weight:700}.article-content--vigilkids .primary-color{color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.article-content--vigilkids .top-level{align-items:flex-start!important;display:flex!important;flex-direction:column;gap:10px}.article-content--vigilkids .level-2{display:flex;flex-direction:column;gap:10px;margin-left:35px}.article-content--vigilkids .level-1 li,.article-content--vigilkids .level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.article-content--vigilkids .level-1 li:not(.table-of-contents):before,.article-content--vigilkids .level-2 li:before{background:url(../../assets/images/article/arrow.svg) no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.article-content--vigilkids h2{background:#f5f9fc;font-size:28px;font-weight:700;line-height:36px;margin-bottom:30px;margin-top:30px;padding:14px 30px;position:relative}.article-content--vigilkids .black-h2{background:transparent;color:#3a4259;font-size:28px;line-height:36px;padding:0}.article-content--vigilkids h2:not(.black-h2):before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids h3{align-items:center;color:hsl(var(--color-primary-hover-var));display:flex;font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-content--vigilkids .black-h3{color:#3a4259}.article-content--vigilkids h3 .green-text{align-items:center;border-radius:50%;color:#fff;display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;position:relative;width:36px}.article-content--vigilkids h3 .green-text:before{background:var(--color-primary);border-radius:50%;content:"";height:36px;left:0;position:absolute;top:0;width:36px;z-index:-1}.article-content--vigilkids .disc-list{list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--vigilkids .article-info{background:#f7f7f7;color:#3a4259;font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-content--vigilkids .article-info p:last-child{margin-bottom:0}.article-content--vigilkids .article-info:before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids .article-info-title{color:#3a4259;font-size:20px;font-weight:700;line-height:23px;margin-bottom:14px}.article-content--vigilkids .article-info-content{color:#3a4259;font-size:16px;font-style:italic;line-height:24px;margin-bottom:14px}.article-content--vigilkids .notice-info{background:hsla(var(--color-primary-hover-var),.1);border:2px dashed var(--color-primary-hover);border-radius:10px;font-size:18px;line-height:21px;margin-bottom:20px;margin-top:30px;padding:60px 40px 40px 108px;position:relative}.article-content--vigilkids .notice-info:before{background:url(../../assets/images/article/notice-info-icon.svg) no-repeat 50%;background-size:cover;content:"";height:40px;left:40px;position:absolute;top:0;width:142px}.article-content--vigilkids .notice-info p{position:relative}.article-content--vigilkids .notice-info p:not(:last-child){margin-bottom:16px}.article-content--vigilkids .notice-info p:before{background:url(../../assets/images/article/notice-info.svg) no-repeat 50%;content:"";height:30px;left:-38px;position:absolute;top:-4.5px;width:30px}.article-content--vigilkids .notice-info.warning{background:#f1631c1a;border-color:#f1631c}.article-content--vigilkids .notice-info.warning:before{background:url(../../assets/images/article/notice-warning-icon.svg) no-repeat 50%}.article-content--vigilkids .notice-info.warning p:before{background:url(../../assets/images/article/notice-warning.svg) no-repeat 50%}.article-content--vigilkids .step-list{margin-bottom:30px;margin-top:20px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:24px}.article-content--vigilkids .step-list li span{font-weight:700}.article-content--vigilkids .article-question{background:#f3f5f7;border-radius:10px;color:#3a4259;margin:30px 0;padding:30px 30px 30px 82px}.article-content--vigilkids .article-question p:last-child{margin-bottom:0}.article-content--vigilkids .article-question-title{line-height:38px;margin-bottom:11.5px}.article-content--vigilkids .article-question-title:before{background:url(../../assets/images/article/question.svg) no-repeat 50%;background-size:cover;content:"";height:38px;left:-52px;position:absolute;top:0;width:38px}.article-content--vigilkids img:not(.hot-icon){height:auto;margin:10px auto 30px;max-width:500px;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--vigilkids .btn{align-items:center;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:52px;justify-content:center;line-height:24px;margin:20px auto 30px;padding:10px 20px;transition:all .3s ease;width:220px}.article-content--vigilkids .btn,.article-content--vigilkids .btn.btn-primary{background:hsl(var(--color-primary-var))}.article-content--vigilkids .btn.btn-primary:active,.article-content--vigilkids .btn.btn-primary:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn-group{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:30px;margin-top:20px}.article-content--vigilkids .btn-group .btn{margin:0}.article-content--vigilkids .btn.outline-btn{background:#fff;border:2px solid hsl(var(--color-primary-var));color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn.outline-btn:hover{background:hsl(var(--color-primary-var));color:#fff}.article-content--vigilkids .btn.outline-btn:active{background:hsl(var(--color-primary-hover-var));color:#fff}.article-content--vigilkids .article-feature{background:#f3f5f7;border-radius:10px;color:#3a4259;margin-top:30px;padding:30px 60px}.article-content--vigilkids .article-feature-title{margin-top:0}.article-content--vigilkids .article-question-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:20px;position:relative}.article-content--vigilkids .article-feature-list{line-height:32px;list-style-type:disc;padding-left:20px}.article-content--vigilkids .article-try{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 60px}.article-content--vigilkids .article-try-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:10px}.article-content--vigilkids .article-try-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-try-description{line-height:32px}.article-content--vigilkids .article-try .btn{margin:0 0 0 10px;min-width:220px}.article-content--vigilkids .article-show{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 30px 40px 60px}.article-content--vigilkids .article-show-title{font-size:24px;font-weight:700;line-height:28px;margin-bottom:14px}.article-content--vigilkids .article-show-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-show-description{line-height:30px}.article-content--vigilkids .article-show .btn{margin-left:0;min-width:220px}.article-content--vigilkids .article-show img:not(.hot-icon){border-radius:10px;height:auto;margin-left:32px;max-width:368px;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--vigilkids .faq-list{background:#f3f5f7;border-radius:10px;color:#333;margin-bottom:50px;margin-top:20px;padding:26px 20px}.article-content--vigilkids .faq-item{background:#fff;border-radius:10px;cursor:pointer;padding:32px 26px 32px 18px;position:relative;transition:all .3s ease}.article-content--vigilkids .faq-item:hover{transform:translateY(-2px)}.article-content--vigilkids .faq-item:not(:last-child){margin-bottom:10px}.article-content--vigilkids .faq-item-title{cursor:pointer;font-size:18px;font-weight:700;line-height:26px;margin-bottom:0;margin-top:0;padding-right:74px;transition:margin-bottom .3s ease}.article-content--vigilkids .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/show_7eb7dc7834.svg) no-repeat 50%;background-size:cover;content:"";height:26px;position:absolute;right:26px;top:30px;transition:transform .3s ease,background-image .3s ease;width:26px}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:18px}.article-content--vigilkids .faq-item.active .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/close_8fdb59cd06.svg) no-repeat 50%;transform:rotate(180deg)}.article-content--vigilkids .faq-item-answer{color:#666;font-size:18px;line-height:27px;margin:0;max-height:0;opacity:0;overflow:hidden;padding:0 74px 0 22px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}.article-content--vigilkids .faq-item.active .faq-item-answer{opacity:1;padding-bottom:0;padding-top:0}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{background:#f5f9fc;border-radius:10px;display:grid;gap:60px;grid-template-columns:1fr 1fr;margin:20px 0;padding:20px 30px}.article-content--vigilkids .props-dashed{background:#fff;border:1px dashed #ccc}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{display:block;font-size:20px;font-weight:700;line-height:28px;padding-left:14px;position:relative}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{background:hsla(var(--color-primary-var),1);content:"";height:14px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:6px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{color:#3a4259;font-size:16px;line-height:32px;margin-top:14px;padding-left:14px}.article-content--vigilkids .props-dashed .props-right span:before,.article-content--vigilkids .props-solid .props-right span:before{background:#f44242}.contrast-table{background:#fff;border:1px solid #d9d9d9;margin:30px 0;overflow-x:auto}.contrast-table table{color:#333;text-align:center}.contrast-table td,.contrast-table th{border-bottom:1px solid #d9d9d9;border-right:1px solid #d9d9d9;padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}@media only screen and (max-width:500px){.contrast-table tbody{font-size:14px}}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table.sticky-table tr td:first-child,.contrast-table.sticky-table tr th:first-child{font-weight:700;left:0;position:sticky;z-index:2}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td,.contrast-table thead tr th{background-color:#f4f5f7}.contrast-table.sticky-table tr td:first-child:after,.contrast-table.sticky-table tr th:first-child:after{background-image:linear-gradient(270deg,rgba(49,49,49,0),rgba(0,0,0,.04));bottom:0;content:"";position:absolute;right:-16px;top:0;width:16px;z-index:1}.contrast-table tr td a{color:hsl(var(--color-primary-hover-var));font-weight:400}.article-content--vigilkids .notice-info-row{display:flex;gap:20px;margin-bottom:10px;margin-top:30px}.article-content--vigilkids .notice-info-row .notice-info{background:#f5f9fc;margin:0;padding-bottom:40px;padding-left:78px;padding-top:75px;width:50%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:24px;margin-bottom:16px;margin-top:0;min-height:30px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:-3px}@media (max-width:768px){.article-content--vigilkids p{font-size:14px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:16px}.article-content--vigilkids .level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}.article-content--vigilkids h2{font-size:20px;line-height:23px;margin-bottom:20px;margin-top:20px;padding:16px}.article-content--vigilkids h2:before{height:100%;width:4px}.article-content--vigilkids h3{font-size:18px}.article-content--vigilkids .article-info{font-size:14px;padding:20px 16px}.article-content--vigilkids .article-info:before{height:100%;width:4px}.article-content--vigilkids .article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-content--vigilkids .article-info-content{font-size:14px;line-height:21px}.article-content--vigilkids .article-info P:last-child{text-align:right}.article-content--vigilkids .notice-info{line-height:19px;padding:44px 16px 30px 44px}.article-content--vigilkids .notice-info:before{background-size:cover!important;height:32px;left:16px;width:114px}.article-content--vigilkids .notice-info p:before{left:-30px;top:-2px}.article-content--vigilkids .step-list li{font-size:14px;line-height:21px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:21px}.article-content--vigilkids .article-question{padding:20px}.article-content--vigilkids .article-question-title{padding-left:52px}.article-content--vigilkids .article-question-title:before{left:0}.article-content--vigilkids .btn-group{align-items:center;flex-direction:column;gap:18px}.article-content--vigilkids .faq-item{padding:24px 20px 24px 16px}.article-content--vigilkids .faq-item-title{font-size:16px;line-height:19px;padding-right:60px}.article-content--vigilkids .faq-item-title:before{height:20px;right:20px;top:22px;width:20px}.article-content--vigilkids .faq-item-answer{line-height:21px;padding-left:16px;padding-right:60px}.article-content--vigilkids .article-feature{padding:20px 16px}.article-content--vigilkids .article-try{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-try-description{line-height:21px}.article-content--vigilkids .article-try .btn{margin:20px 0}.article-content--vigilkids .article-show{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-show-content{align-items:center}.article-content--vigilkids .article-show-description{line-height:21px}.article-content--vigilkids .article-show .btn,.article-content--vigilkids .article-show img:not(.hot-icon){margin:20px 0}.article-content--vigilkids .faq-item{padding:20px 16px}.article-content--vigilkids .faq-item-title{font-size:14px;line-height:16px;padding-right:40px}.article-content--vigilkids .faq-item-answer{font-size:14px;line-height:16px;padding-left:0;padding-right:0}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:10px}.article-content--vigilkids .faq-item-title:before{right:16px;top:20px;width:16px}.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.article-content--vigilkids .black-h2{font-size:20px;line-height:23px}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{gap:20px;grid-template-columns:1fr;margin:16px 0;padding:16px}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{font-size:18px;line-height:21px;padding-left:10px}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{height:10px;width:4px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{font-size:14px;line-height:21px;margin-top:10px;padding-left:10px}.article-content--vigilkids .notice-info-row{flex-direction:column;gap:16px}.article-content--vigilkids .notice-info-row .notice-info{padding-bottom:24px;padding-left:44px;padding-top:52px;width:100%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:21px;margin-bottom:12px;min-height:24px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:0}.article-content--vigilkids .notice-info p:before{background-size:cover;height:24px;width:24px}.article-content--vigilkids .notice-info.warning p:before{background-size:cover}}@media (max-width:515px){.article-content--vigilkids img:not(.hot-icon){max-width:100%;width:auto}}.article-content--vigilkids [id]{scroll-margin-top:80px}
|
|
1
|
+
.article-content--vigilkids p{color:#3a4259;margin-top:10px}.article-content--vigilkids a:not(.btn){color:#4285f4;transition:all .3s ease}.article-content--vigilkids .level-1 a,.article-content--vigilkids .level-2 a{color:#3a4259}.article-content--vigilkids .level-1 a:hover,.article-content--vigilkids .level-2 a:hover{color:#4285f4}.article-content--vigilkids .underline,.article-content--vigilkids a:not(.btn):hover{text-decoration:underline}.article-content--vigilkids .font-bold{font-weight:700}.article-content--vigilkids .primary-color{color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.article-content--vigilkids .top-level{align-items:flex-start!important;display:flex!important;flex-direction:column;gap:10px}.article-content--vigilkids .level-2{display:flex;flex-direction:column;gap:10px;margin-left:35px}.article-content--vigilkids .level-1 li,.article-content--vigilkids .level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.article-content--vigilkids .level-1 li:not(.table-of-contents):before,.article-content--vigilkids .level-2 li:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDIxIDEyIj48cGF0aCBmaWxsPSIjMjRjNzkwIiBkPSJNMjAuNTMgNi41M2EuNzUuNzUgMCAwIDAgMC0xLjA2TDE1Ljc1Ny42OTdhLjc1Ljc1IDAgMCAwLTEuMDYgMS4wNkwxOC45MzkgNmwtNC4yNDIgNC4yNDNhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNnpNMCA2di43NWgyMHYtMS41SDB6Ii8+PC9zdmc+") no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.article-content--vigilkids h2{background:#f5f9fc;font-size:28px;font-weight:700;line-height:36px;margin-bottom:30px;margin-top:30px;padding:14px 30px;position:relative}.article-content--vigilkids .black-h2{background:transparent;color:#3a4259;font-size:28px;line-height:36px;padding:0}.article-content--vigilkids h2:not(.black-h2):before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids h3{color:hsl(var(--color-primary-hover-var));font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-content--vigilkids .black-h3{align-items:center;color:#3a4259;display:flex}.article-content--vigilkids h3 .green-text{align-items:center;border-radius:50%;color:#fff;display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;position:relative;width:36px}.article-content--vigilkids h3 .green-text:before{background:var(--color-primary);border-radius:50%;content:"";height:36px;left:0;position:absolute;top:0;width:36px;z-index:-1}.article-content--vigilkids .disc-list{list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--vigilkids .article-info{background:#f7f7f7;color:#3a4259;font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-content--vigilkids .article-info p:last-child{margin-bottom:0}.article-content--vigilkids .article-info:before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids .article-info-title{color:#3a4259;font-size:20px;font-weight:700;line-height:23px;margin-bottom:14px}.article-content--vigilkids .article-info-content{color:#3a4259;font-size:16px;font-style:italic;line-height:24px;margin-bottom:14px}.article-content--vigilkids .notice-info{background:hsla(var(--color-primary-hover-var),.1);border:2px dashed var(--color-primary-hover);border-radius:10px;font-size:18px;line-height:21px;margin-bottom:20px;margin-top:30px;padding:60px 40px 40px 108px;position:relative}.article-content--vigilkids .notice-info:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNDIgNDAiPjxwYXRoIGZpbGw9IiMyNGM3OTAiIGQ9Ik0wIDBoMTQybC05LjA3OSAyNy42MmExOCAxOCAwIDAgMS0xNy4xIDEyLjM4SDI2LjE3OWExOCAxOCAwIDAgMS0xNy4xLTEyLjM4eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01MS4xNTMgMzAuOTU3aC0uMDMzYy0xLjAxNy0uMDExLTIuMDM3LS4wMTEtMy4wNTctLjAxMWgtMS41NTZjLTEuMDM5IDAtMi4wNzggMC0zLjEyLS4wMTRhNC44IDQuOCAwIDAgMS0xLjY4MS0uMzU1Yy0uOTEtLjM1Ni0xLjQzLTEuMTQ5LTEuNDI4LTIuMThsLjAwMy0zLjg2NmMwLTIuMTQxIDAtNC4yODUuMDItNi40MjYuMDAyLS41ODIuMzc3LTEuMTI5LjY5Ny0xLjQxNiAxLjIzOC0xLjEzMiAyLjU4NC0yLjU0MyAzLjE0Ny00LjQ0Ni4xNTYtLjUzLjIxNi0xLjExNi4yNzktMS43MzQuMTI2LTEuMjMuOTI0LTIuMDMxIDEuOTktMi4wMzFxLjYzLjAwMiAxLjI0Ny4zNjljLjgyMy40OTUgMS4zNzMgMS4yNzEgMS42NzYgMi4zNzkuNDg3IDEuNzU4LjIzOCAzLjQ2NC0uMDM1IDQuOTI3di4wMDVhLjU1NS41NTUgMCAwIDAgLjU0NC42NmgzLjU1NWMuNjEyIDAgMS40OS4wNzYgMi4wMzEuNzMyLjM5NC40NzkuNTA2IDEuMTI0LjM0IDEuOTc3LS41MSAyLjYyMi0xLjEzMyA1LjI2Ny0xLjcyOSA3LjczLS4xODYuNzY5LS40OTUgMS40OC0uNzkzIDIuMTY5bC0uMTI4LjI5NWMtLjM0Ljc5OC0xLjA0IDEuMjM2LTEuOTY5IDEuMjM2TTM1LjkxIDMwLjdoLS4zMjVhMi4xNDUgMi4xNDUgMCAwIDEtMi4xMzktMi4xMzl2LTkuNTI5YzAtMS4xNzYuOTYzLTIuMTM4IDIuMTM5LTIuMTM4aC4zMjVjMS4xNzYgMCAyLjEzOC45NjIgMi4xMzggMi4xMzh2OS41MjdhMi4xNCAyLjE0IDAgMCAxLTIuMTM4IDIuMTRNNzYuODA3IDIxLjkzMmgtMy42MjN2LTIuMjg1aDMuNjIzcS44NCAwIDEuMzY3LS4yNzQuNTI3LS4yODQuNzcxLS43ODEuMjQ1LS40OTguMjQ1LTEuMTIzIDAtLjYzNC0uMjQ1LTEuMTgyYTEuOTcgMS45NyAwIDAgMC0uNzcxLS44NzlxLS41MjgtLjMzMi0xLjM2Ny0uMzMyaC0yLjYwOFYyN2gtMi45M1YxMi43ODFoNS41MzhxMS42NyAwIDIuODYxLjYwNiAxLjIuNTk1IDEuODM2IDEuNjUuNjM1IDEuMDU0LjYzNSAyLjQxMiAwIDEuMzc3LS42MzUgMi4zODMtLjYzNCAxLjAwNS0xLjgzNiAxLjU1My0xLjE5MS41NDctMi44NjEuNTQ3bTkuOTktMy4xOTRWMjdoLTIuODEzVjE2LjQzNGgyLjY0N3ptMy4xODQtMi4zNzMtLjA1IDIuNjA4YTcgNyAwIDAgMC0uNDk3LS4wNSA1IDUgMCAwIDAtLjUxOC0uMDI4IDMuMSAzLjEgMCAwIDAtMS4wMzUuMTU2IDEuODUgMS44NSAwIDAgMC0uNzIzLjQ0IDEuOSAxLjkgMCAwIDAtLjQzLjcxMnEtLjEzNi40Mi0uMTU2Ljk1N2wtLjU2Ni0uMTc2cTAtMS4wMjUuMjA1LTEuODg0LjIwNS0uODcuNTk2LTEuNTE0LjQtLjY0NS45NzYtLjk5NmEyLjUgMi41IDAgMCAxIDEuMzE5LS4zNTJxLjIzNCAwIC40NzguMDQuMjQ0LjAyOC40LjA4N20uNTg1IDUuNDZ2LS4yMDZxMC0xLjE2Mi4zMzItMi4xMzlhNC45NSA0Ljk1IDAgMCAxIC45NjctMS43MDkgNC4zIDQuMyAwIDAgMSAxLjU2My0xLjEyM3EuOTI3LS40MSAyLjEyOS0uNDEgMS4yIDAgMi4xMzguNDEuOTM4LjQgMS41NzMgMS4xMjRhNC45IDQuOSAwIDAgMSAuOTc2IDEuNzA5cS4zMzIuOTc1LjMzMiAyLjEzOHYuMjA1cTAgMS4xNTItLjMzMiAyLjEzOWE1IDUgMCAwIDEtLjk3NiAxLjcwOSA0LjMgNC4zIDAgMCAxLTEuNTYzIDEuMTIzcS0uOTI3LjQtMi4xMjkuNC0xLjIgMC0yLjEzOC0uNGE0LjQgNC40IDAgMCAxLTEuNTczLTEuMTIzIDUuMSA1LjEgMCAwIDEtLjk2Ny0xLjcxIDYuNyA2LjcgMCAwIDEtLjMzMi0yLjEzOG0yLjgxMy0uMjA2di4yMDVxMCAuNjY0LjExNyAxLjI0LjExNy41NzcuMzcxIDEuMDE2LjI2NC40My42ODQuNjc0dDEuMDI1LjI0NHEuNTg1IDAgMS4wMDYtLjI0NC40Mi0uMjQ1LjY3NC0uNjc0LjI1NS0uNDQuMzcxLTEuMDE1LjEyNy0uNTc3LjEyNy0xLjI0di0uMjA2cTAtLjY0NS0uMTI3LTEuMjFhMy4yIDMuMiAwIDAgMC0uMzgtMS4wMTZxLS4yNTUtLjQ1LS42NzUtLjcwNHQtMS4wMTUtLjI1My0xLjAxNi4yNTNxLS40MS4yNTUtLjY3NC43MDRhMy40IDMuNCAwIDAgMC0uMzcgMS4wMTUgNiA2IDAgMCAwLS4xMTggMS4yMTFtMTQuNjM5IDIuNDYxYS45LjkgMCAwIDAtLjE3Ni0uNTQ3cS0uMTc1LS4yNDQtLjY1NC0uNDQ5LS40NjktLjIxNS0xLjM1OC0uMzlhMTAuNiAxMC42IDAgMCAxLTEuNDk0LS40NCA1LjIgNS4yIDAgMCAxLTEuMTkxLS42NTQgMi44IDIuOCAwIDAgMS0uNzgyLS44OTkgMi41IDIuNSAwIDAgMS0uMjgzLTEuMjAxcTAtLjY2NS4yODMtMS4yNS4yOTQtLjU4Ni44My0xLjAzNWEzLjkgMy45IDAgMCAxIDEuMzI4LS43MTMgNS42IDUuNiAwIDAgMSAxLjc3OC0uMjY0cTEuMzc3IDAgMi4zNjMuNDQuOTk2LjQ0IDEuNTI0IDEuMjEuNTM3Ljc2Mi41MzcgMS43MzloLTIuODEzcTAtLjQxLS4xNzYtLjczMmExLjE2IDEuMTYgMCAwIDAtLjUyNy0uNTE4cS0uMzUxLS4xOTUtLjkxOC0uMTk1LS40NjkgMC0uODEuMTY2YTEuMjUgMS4yNSAwIDAgMC0uNTI4LjQzIDEuMDMgMS4wMyAwIDAgMC0uMTc2LjU4NXEwIC4yNDUuMDk4LjQ0LjEwOC4xODUuMzQyLjM0MXQuNjA1LjI5NHEuMzgxLjEyNi45MzguMjM0YTEwLjggMTAuOCAwIDAgMSAyLjA0MS42MTVxLjg5OC4zNzIgMS40MjYgMS4wMTYuNTI3LjYzNS41MjcgMS42NyAwIC43MDItLjMxMyAxLjI4OS0uMzEyLjU4NS0uODk4IDEuMDI1YTQuNiA0LjYgMCAwIDEtMS40MDYuNjc0IDYuNiA2LjYgMCAwIDEtMS44MjYuMjM0cS0xLjQ3NSAwLTIuNS0uNTI3LTEuMDE2LS41MjgtMS41NDMtMS4zMzgtLjUxOC0uODItLjUxOC0xLjY4aDIuNjY2cS4wMi41NzcuMjkzLjkyOC4yODMuMzUyLjcxMy41MDguNDQuMTU2Ljk0Ny4xNTYuNTQ4IDAgLjkwOC0uMTQ2LjM2Mi0uMTU3LjU0Ny0uNDFhMSAxIDAgMCAwIC4xOTYtLjYwNiIvPjwvc3ZnPg==") no-repeat 50%;background-size:cover;content:"";height:40px;left:40px;position:absolute;top:0;width:142px}.article-content--vigilkids .notice-info p{position:relative}.article-content--vigilkids .notice-info p:not(:last-child){margin-bottom:16px}.article-content--vigilkids .notice-info p:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMwIDMwIj48cGF0aCBmaWxsPSIjMjRjNzkwIiBkPSJNMTQuOTQ3IDEuODk3QzcuNzIyIDEuODk3IDEuODQ0IDcuNzc1IDEuODQ0IDE1UzcuNzIgMjguMTAzIDE0Ljk0NyAyOC4xMDNjNy4yMjUgMCAxMy4xMDMtNS44NzggMTMuMTAzLTEzLjEwM1MyMi4xNzIgMS44OTcgMTQuOTQ2IDEuODk3bTYuMzIzIDEwLjk0Mi03LjUyOCA3LjYwOS0uMDA3LjAwNXEtLjAwMy4wMDQtLjAwNi4wMDhjLS4wNi4wNTgtLjEzNC4wOTQtLjIwNC4xMzMtLjAzNC4wMi0uMDYzLjA1LS4xLjA2NGEuOTUuOTUgMCAwIDEtLjcwNi0uMDAyYy0uMDM4LS4wMTYtLjA2OC0uMDQ4LS4xMDQtLjA2Ny0uMDctLjA0LS4xNDItLjA3NS0uMjAyLS4xMzRsLS4wMDUtLjAwNy0uMDA3LS4wMDYtMy43MDItMy44MDVhLjk0Ljk0IDAgMSAxIDEuMzQ4LTEuMzFsMy4wMzQgMy4xMTcgNi44NTMtNi45MjhhLjk0Ljk0IDAgMSAxIDEuMzM2IDEuMzIyIi8+PC9zdmc+") no-repeat 50%;content:"";height:30px;left:-38px;position:absolute;top:-4.5px;width:30px}.article-content--vigilkids .notice-info.warning{background:#f1631c1a;border-color:#f1631c}.article-content--vigilkids .notice-info.warning:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNDIgNDAiPjxwYXRoIGZpbGw9IiNmMTYzMWMiIGQ9Ik0wIDBoMTQybC05LjA3OSAyNy42MmExOCAxOCAwIDAgMS0xNy4xIDEyLjM4SDI2LjE3OWExOCAxOCAwIDAgMS0xNy4xLTEyLjM4eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zOC4xNCA4LjQ3OGguMDMzYzEuMDE3LjAxIDIuMDM3LjAxIDMuMDU3LjAxaDEuNTU2YzEuMDM5IDAgMi4wNzggMCAzLjEyLjAxNGE0LjggNC44IDAgMCAxIDEuNjgxLjM1NmMuOTEuMzU1IDEuNDMgMS4xNDggMS40MjcgMi4xOGwtLjAwMiAzLjg2NWMwIDIuMTQxIDAgNC4yODUtLjAyIDYuNDI2LS4wMDIuNTgzLS4zNzcgMS4xMy0uNjk3IDEuNDE3LTEuMjM4IDEuMTMyLTIuNTg0IDIuNTQzLTMuMTQ3IDQuNDQ2LS4xNTYuNTMtLjIxNiAxLjExNS0uMjc5IDEuNzMzLS4xMjYgMS4yMy0uOTI0IDIuMDMyLTEuOTkgMi4wMzItLjQxOSAwLS44MzctLjEyNi0xLjI0Ny0uMzctLjgyMy0uNDk0LTEuMzczLTEuMjctMS42NzYtMi4zNzgtLjQ4Ny0xLjc1OC0uMjM4LTMuNDY1LjAzNS00LjkyN3YtLjAwNmEuNTU1LjU1NSAwIDAgMC0uNTQ0LS42NTloLTMuNTU1Yy0uNjEyIDAtMS40OS0uMDc2LTIuMDMyLS43MzMtLjM5My0uNDc4LS41MDUtMS4xMjMtLjMzOC0xLjk3Ny41MDgtMi42MjIgMS4xMzItNS4yNjYgMS43MjgtNy43My4xODUtLjc2OC40OTUtMS40NzkuNzkzLTIuMTY4bC4xMjgtLjI5NWMuMzQtLjc5OSAxLjA0LTEuMjM2IDEuOTY5LTEuMjM2bTE1LjI0NC4yNTdoLjMyNWMxLjE3NiAwIDIuMTM5Ljk2MiAyLjEzOSAyLjEzOHY5LjUzYTIuMTQ1IDIuMTQ1IDAgMCAxLTIuMTM5IDIuMTM4aC0uMzI1YTIuMTQ1IDIuMTQ1IDAgMCAxLTIuMTM4LTIuMTM5di05LjUyNmEyLjE0IDIuMTQgMCAwIDEgMi4xMzgtMi4xNDFNNzkuNTEyIDIyLjI4M2gyLjkycS0uMDg5IDEuNDM2LS43OTEgMi41NDktLjY5NCAxLjExNC0xLjk0NCAxLjczOC0xLjI0LjYyNS0yLjk4OC42MjUtMS4zNjcgMC0yLjQ1MS0uNDY4YTUuMiA1LjIgMCAwIDEtMS44NTYtMS4zNjhxLS43NjItLjg4OC0xLjE2Mi0yLjE0OHQtLjQtMi44MjJ2LS45ODdxMC0xLjU2Mi40MS0yLjgyMi40Mi0xLjI3IDEuMTkxLTIuMTU4YTUuMyA1LjMgMCAwIDEgMS44NjYtMS4zNjdxMS4wODQtLjQ4IDIuNDIxLS40NzkgMS43NzggMCAyLjk5OS42NDUgMS4yMy42NDUgMS45MDQgMS43NzcuNjg0IDEuMTMzLjgyIDIuNTc4aC0yLjkzcS0uMDQ4LS44Ni0uMzQxLTEuNDU1YTEuOTQgMS45NCAwIDAgMC0uODg5LS45MDhxLS41ODUtLjMxMy0xLjU2Mi0uMzEzLS43MzMgMC0xLjI4LjI3NC0uNTQ2LjI3My0uOTE4LjgzLS4zNzEuNTU3LS41NTYgMS40MDYtLjE3Ny44NC0uMTc2IDEuOTczdjEuMDA2cTAgMS4xMDMuMTY2IDEuOTQzLjE2Ni44My41MDggMS40MDYuMzUxLjU2Ny44OTguODYuNTU2LjI4MyAxLjMzOC4yODMuOTE4IDAgMS41MTQtLjI5M3QuOTA4LS44N3EuMzIzLS41NzUuMzgtMS40MzVtNC4yMTktLjQ1OXYtLjIwNXEwLTEuMTYyLjMzMi0yLjEzOWE0Ljk1IDQuOTUgMCAwIDEgLjk2Ni0xLjcwOSA0LjMgNC4zIDAgMCAxIDEuNTYzLTEuMTIzcS45MjctLjQxIDIuMTI5LS40MSAxLjIgMCAyLjEzOC40MS45MzguNCAxLjU3MyAxLjEyNC42NDUuNzIxLjk3NiAxLjcwOS4zMzIuOTc1LjMzMiAyLjEzOHYuMjA1cTAgMS4xNTItLjMzMiAyLjEzOWE1IDUgMCAwIDEtLjk3NiAxLjcwOSA0LjMgNC4zIDAgMCAxLTEuNTYzIDEuMTIzcS0uOTI3LjQtMi4xMjkuNC0xLjIgMC0yLjEzOC0uNGE0LjQgNC40IDAgMCAxLTEuNTczLTEuMTIzIDUuMSA1LjEgMCAwIDEtLjk2Ni0xLjcxIDYuNyA2LjcgMCAwIDEtLjMzMi0yLjEzOG0yLjgxMi0uMjA1di4yMDVxMCAuNjY0LjExNyAxLjI0LjExNy41NzcuMzcxIDEuMDE2LjI2NC40My42ODQuNjc0dDEuMDI1LjI0NHEuNTg1IDAgMS4wMDYtLjI0NC40Mi0uMjQ1LjY3NC0uNjc0YTMuNCAzLjQgMCAwIDAgLjM3MS0xLjAxNXEuMTI3LS41NzcuMTI3LTEuMjR2LS4yMDZxMC0uNjQ1LS4xMjctMS4yMWEzLjIgMy4yIDAgMCAwLS4zOC0xLjAxNiAxLjkgMS45IDAgMCAwLS42NzUtLjcwNHEtLjQyLS4yNTMtMS4wMTUtLjI1My0uNTk2IDAtMS4wMTYuMjUzLS40MS4yNTUtLjY3NC43MDQtLjI1NC40NC0uMzcgMS4wMTVhNiA2IDAgMCAwLS4xMTggMS4yMTFtMTEuNjgtMi45M1YyN0g5NS40MVYxNi40MzRoMi42Mzd6bS0uNDEgMi42NTdoLS43NjJxMC0xLjE3My4zMDItMi4xMS4zMDQtLjk0Ny44NS0xLjYxMWEzLjY1IDMuNjUgMCAwIDEgMS4yOTktMS4wMjUgMy45IDMuOSAwIDAgMSAxLjY5OS0uMzYycS43NDIgMCAxLjM1OC4yMTUuNjE1LjIxNCAxLjA1NC42ODQuNDUuNDY4LjY4NCAxLjI0LjI0NC43NzEuMjQ0IDEuODg1VjI3aC0yLjgzMnYtNi43NDhxMC0uNzAzLS4xOTUtMS4wOTRhMS4xIDEuMSAwIDAgMC0uNTc2LS41NDdxLS4zNzItLjE2Ni0uOTE4LS4xNjYtLjU2NyAwLS45ODcuMjI1LS40MS4yMjUtLjY4My42MjVhMyAzIDAgMCAwLS40LjkxOHEtLjEzOC41MjctLjEzOCAxLjEzM20xNC41OCAyLjczNGEuOS45IDAgMCAwLS4xNzYtLjU0N3EtLjE3NS0uMjQ0LS42NTUtLjQ0OS0uNDY4LS4yMTUtMS4zNTctLjM5YTEwLjYgMTAuNiAwIDAgMS0xLjQ5NC0uNDQgNS4yIDUuMiAwIDAgMS0xLjE5MS0uNjU0IDIuODUgMi44NSAwIDAgMS0uNzgyLS44OTkgMi41IDIuNSAwIDAgMS0uMjgzLTEuMjAxcTAtLjY2NS4yODMtMS4yNS4yOTQtLjU4Ni44My0xLjAzNWEzLjkgMy45IDAgMCAxIDEuMzI4LS43MTMgNS42IDUuNiAwIDAgMSAxLjc3OC0uMjY0cTEuMzc3IDAgMi4zNjMuNDQuOTk2LjQ0IDEuNTI0IDEuMjEuNTM3Ljc2Mi41MzcgMS43MzloLTIuODEzcTAtLjQxLS4xNzYtLjczMmExLjE2IDEuMTYgMCAwIDAtLjUyNy0uNTE4cS0uMzUxLS4xOTUtLjkxOC0uMTk1LS40NjkgMC0uODEuMTY2YTEuMjUgMS4yNSAwIDAgMC0uNTI4LjQzIDEuMDMgMS4wMyAwIDAgMC0uMTc2LjU4NXEwIC4yNDUuMDk4LjQ0LjEwOC4xODUuMzQyLjM0MXQuNjA1LjI5NHEuMzgxLjEyNi45MzguMjM0YTEwLjggMTAuOCAwIDAgMSAyLjA0MS42MTVxLjg5OC4zNzIgMS40MjYgMS4wMTYuNTI3LjYzNS41MjcgMS42NyAwIC43MDItLjMxMyAxLjI4OS0uMzEyLjU4NS0uODk4IDEuMDI1YTQuNiA0LjYgMCAwIDEtMS40MDYuNjc0IDYuNiA2LjYgMCAwIDEtMS44MjYuMjM0cS0xLjQ3NSAwLTIuNS0uNTI3LTEuMDE2LS41MjgtMS41NDMtMS4zMzgtLjUxOC0uODItLjUxOC0xLjY4aDIuNjY2cS4wMi41NzcuMjkzLjkyOC4yODMuMzUyLjcxMy41MDguNDQuMTU2Ljk0Ny4xNTYuNTQ4IDAgLjkwOC0uMTQ2LjM2Mi0uMTU3LjU0Ny0uNDFhMSAxIDAgMCAwIC4xOTYtLjYwNiIvPjwvc3ZnPg==") no-repeat 50%}.article-content--vigilkids .notice-info.warning p:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMwIDMwIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiNmMTYzMWMiIGQ9Ik0xNSAxLjg3NUM3Ljc1MSAxLjg3NSAxLjg3NSA3Ljc1MSAxLjg3NSAxNVM3Ljc1MSAyOC4xMjUgMTUgMjguMTI1IDI4LjEyNSAyMi4yNDkgMjguMTI1IDE1IDIyLjI0OSAxLjg3NSAxNSAxLjg3NW02LjI5OSAxNy45MzFhMS4wNiAxLjA2IDAgMCAxIDAgMS40OTMgMS4wNiAxLjA2IDAgMCAxLTEuNDkyIDBMMTUgMTYuNDkgMTAuMTk1IDIxLjNhMS4wNiAxLjA2IDAgMCAxLTEuNDk0IDAgMS4wNiAxLjA2IDAgMCAxIDAtMS40OTJsNC44MDUtNC44MDRMOC43IDEwLjE5NWExLjA1OCAxLjA1OCAwIDAgMSAuNzQ3LTEuODAzYy4yOCAwIC41NDkuMTExLjc0Ny4zMUwxNSAxMy41MDhsNC44MDUtNC44MDVhMS4wNiAxLjA2IDAgMCAxIDEuNDk0LS4wMDMgMS4wNiAxLjA2IDAgMCAxIDAgMS40OTRMMTYuNDkgMTV6Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgzMHYzMEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==") no-repeat 50%}.article-content--vigilkids .step-list{margin-bottom:30px;margin-top:20px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:24px}.article-content--vigilkids .step-list li span{font-weight:700}.article-content--vigilkids .article-question{background:#f3f5f7;border-radius:10px;color:#3a4259;margin:30px 0;padding:30px 30px 30px 82px}.article-content--vigilkids .article-question p:last-child{margin-bottom:0}.article-content--vigilkids .article-question-title{line-height:38px;margin-bottom:11.5px}.article-content--vigilkids .article-question-title:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM4IDM4Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiNmMTk4MWMiIGQ9Ik0xOSAzOEM4LjUwNiAzOCAwIDI5LjQ5MiAwIDE5IDAgOC41MDYgOC41MDYgMCAxOSAwczE5IDguNTA2IDE5IDE5YzAgMTAuNDkyLTguNTA2IDE5LTE5IDE5bTAtMzUuMDc4QzEwLjEyMSAyLjkyMiAyLjkyMyAxMC4xMiAyLjkyMyAxOVMxMC4xMjEgMzUuMDc3IDE5IDM1LjA3NyAzNS4wNzcgMjcuODc5IDM1LjA3NyAxOSAyNy44NzkgMi45MjIgMTkgMi45MjJtNS4xMTcgMTQuMDY0cS0uNTY0LjcyLTEuMjEzIDEuMjc3LS42NS41NTgtMS4yMTMgMS4xMTRhNi4yIDYuMiAwIDAgMC0uOTM2IDEuMTU2IDIuNDcgMi40NyAwIDAgMC0uMzcgMS4zMjdxMCAuNjE0LjE1NyAxLjExNGE3IDcgMCAwIDAgLjMxNC44NDJoLTMuMDEyYTUuNiA1LjYgMCAwIDEtLjIyOC0uOTI4cS0uMS0uNTctLjEtMS4xMjcgMC0uODcxLjM1LTEuNTc3LjM0OS0uNzA4Ljg3LTEuMzIxLjUyLS42MTQgMS4xMjgtMS4xODQuNjA2LS41NzMgMS4xMjctMS4xMTR0Ljg3LTEuMTQxLjM1LTEuMzE0cTAtLjY0Mi0uMjU3LTEuMTJhMi4zIDIuMyAwIDAgMC0uNzA2LS44IDMuMSAzLjEgMCAwIDAtMS4wMjgtLjQ3NyA0LjcgNC43IDAgMCAwLTEuMjM1LS4xNThxLTIuMTI2IDAtNC4wNTIgMS44OTl2LTMuMjk4cTIuMzM5LTEuMzcgNC44NTItMS4zNyAxLjE1NyAwIDIuMTgzLjNhNS41IDUuNSAwIDAgMSAxLjguODg1cS43NjkuNTg1IDEuMjEzIDEuNDU1LjQ0Mi44NzMuNDQyIDIuMDI3IDAgMS4xLS4zNyAxLjk1NmE3LjIgNy4yIDAgMCAxLS45MzYgMS41NzdtLTQuNjQ2IDkuMDU2cS44MTMgMCAxLjQyNy41NzEuNi41MjkuNiAxLjM0MiAwIC44LS42IDEuMzQyLS42MjguNTU2LTEuNDI3LjU1NmEyLjEgMi4xIDAgMCAxLTEuNDQyLS41NTZxLS42LS41NDItLjU5OS0xLjM0MiAwLS44MTQuNi0xLjM0Mi42MTQtLjU3IDEuNDQtLjU3MSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzh2MzhIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=") no-repeat 50%;background-size:cover;content:"";height:38px;left:-52px;position:absolute;top:0;width:38px}.article-content--vigilkids img:not(.hot-icon){height:auto;margin:10px auto 30px;max-width:500px;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--vigilkids .btn{align-items:center;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:52px;justify-content:center;line-height:24px;margin:20px auto 30px;padding:10px 20px;transition:all .3s ease;width:220px}.article-content--vigilkids .btn,.article-content--vigilkids .btn.btn-primary{background:hsl(var(--color-primary-var))}.article-content--vigilkids .btn.btn-primary:active,.article-content--vigilkids .btn.btn-primary:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn-group{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:30px;margin-top:20px}.article-content--vigilkids .btn-group .btn{margin:0}.article-content--vigilkids .btn.outline-btn{background:#fff;border:2px solid hsl(var(--color-primary-var));color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn.outline-btn:hover{background:hsl(var(--color-primary-var));color:#fff}.article-content--vigilkids .btn.outline-btn:active{background:hsl(var(--color-primary-hover-var));color:#fff}.article-content--vigilkids .article-feature{background:#f3f5f7;border-radius:10px;color:#3a4259;margin-top:30px;padding:30px 60px}.article-content--vigilkids .article-feature-title{margin-top:0}.article-content--vigilkids .article-question-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:20px;position:relative}.article-content--vigilkids .article-feature-list{line-height:32px;list-style-type:disc;padding-left:20px}.article-content--vigilkids .article-try{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 60px}.article-content--vigilkids .article-try-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:10px}.article-content--vigilkids .article-try-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-try-description{line-height:32px}.article-content--vigilkids .article-try .btn{margin:0 0 0 10px;min-width:220px}.article-content--vigilkids .article-show{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 30px 40px 60px}.article-content--vigilkids .article-show-title{font-size:24px;font-weight:700;line-height:28px;margin-bottom:14px}.article-content--vigilkids .article-show-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-show-description{line-height:30px}.article-content--vigilkids .article-show .btn{margin-left:0;min-width:220px}.article-content--vigilkids .article-show img:not(.hot-icon){border-radius:10px;height:auto;margin-left:32px;max-width:368px;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--vigilkids .faq-list{background:#f3f5f7;border-radius:10px;color:#333;margin-bottom:50px;margin-top:20px;padding:26px 20px}.article-content--vigilkids .faq-item{background:#fff;border-radius:10px;cursor:pointer;padding:32px 26px 32px 18px;position:relative;transition:all .3s ease}.article-content--vigilkids .faq-item:hover{transform:translateY(-2px)}.article-content--vigilkids .faq-item:not(:last-child){margin-bottom:10px}.article-content--vigilkids .faq-item-title{cursor:pointer;font-size:18px;font-weight:700;line-height:26px;margin-bottom:0;margin-top:0;padding-right:74px;transition:margin-bottom .3s ease}.article-content--vigilkids .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/show_7eb7dc7834.svg) no-repeat 50%;background-size:cover;content:"";height:26px;position:absolute;right:26px;top:30px;transition:transform .3s ease,background-image .3s ease;width:26px}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:18px}.article-content--vigilkids .faq-item.active .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/close_8fdb59cd06.svg) no-repeat 50%;transform:rotate(180deg)}.article-content--vigilkids .faq-item-answer{color:#666;font-size:18px;line-height:27px;margin:0;max-height:0;opacity:0;overflow:hidden;padding:0 74px 0 22px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}.article-content--vigilkids .faq-item.active .faq-item-answer{opacity:1;padding-bottom:0;padding-top:0}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{background:#f5f9fc;border-radius:10px;display:grid;gap:60px;grid-template-columns:1fr 1fr;margin:20px 0;padding:20px 30px}.article-content--vigilkids .props-dashed{background:#fff;border:1px dashed #ccc}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{display:block;font-size:20px;font-weight:700;line-height:28px;padding-left:14px;position:relative}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{background:hsla(var(--color-primary-var),1);content:"";height:14px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:6px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{color:#3a4259;font-size:16px;line-height:32px;margin-top:14px;padding-left:14px}.article-content--vigilkids .props-dashed .props-right span:before,.article-content--vigilkids .props-solid .props-right span:before{background:#f44242}.contrast-table{background:#fff;border:1px solid #d9d9d9;margin:30px 0;overflow-x:auto}.contrast-table table{color:#333;text-align:center}.contrast-table td,.contrast-table th{border-bottom:1px solid #d9d9d9;border-right:1px solid #d9d9d9;padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}@media only screen and (max-width:500px){.contrast-table tbody{font-size:14px}}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table.sticky-table tr td:first-child,.contrast-table.sticky-table tr th:first-child{font-weight:700;left:0;position:sticky;z-index:2}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td,.contrast-table thead tr th{background-color:#f4f5f7}.contrast-table.sticky-table tr td:first-child:after,.contrast-table.sticky-table tr th:first-child:after{background-image:linear-gradient(270deg,rgba(49,49,49,0),rgba(0,0,0,.04));bottom:0;content:"";position:absolute;right:-16px;top:0;width:16px;z-index:1}.contrast-table tr td a{color:hsl(var(--color-primary-hover-var));font-weight:400}.article-content--vigilkids .notice-info-row{display:flex;gap:20px;margin-bottom:10px;margin-top:30px}.article-content--vigilkids .notice-info-row .notice-info{background:#f5f9fc;margin:0;padding-bottom:40px;padding-left:78px;padding-top:75px;width:50%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:24px;margin-bottom:16px;margin-top:0;min-height:30px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:-3px}@media (max-width:768px){.article-content--vigilkids p{font-size:14px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:16px}.article-content--vigilkids .level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}.article-content--vigilkids h2{font-size:20px;line-height:23px;margin-bottom:20px;margin-top:20px;padding:16px}.article-content--vigilkids h2:before{height:100%;width:4px}.article-content--vigilkids h3{font-size:18px}.article-content--vigilkids .article-info{font-size:14px;padding:20px 16px}.article-content--vigilkids .article-info:before{height:100%;width:4px}.article-content--vigilkids .article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-content--vigilkids .article-info-content{font-size:14px;line-height:21px}.article-content--vigilkids .article-info P:last-child{text-align:right}.article-content--vigilkids .notice-info{line-height:19px;padding:44px 16px 30px 44px}.article-content--vigilkids .notice-info:before{background-size:cover!important;height:32px;left:16px;width:114px}.article-content--vigilkids .notice-info p:before{left:-30px;top:-2px}.article-content--vigilkids .step-list li{font-size:14px;line-height:21px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:21px}.article-content--vigilkids .article-question{padding:20px}.article-content--vigilkids .article-question-title{padding-left:52px}.article-content--vigilkids .article-question-title:before{left:0}.article-content--vigilkids .btn-group{align-items:center;flex-direction:column;gap:18px}.article-content--vigilkids .faq-item{padding:24px 20px 24px 16px}.article-content--vigilkids .faq-item-title{font-size:16px;line-height:19px;padding-right:60px}.article-content--vigilkids .faq-item-title:before{height:20px;right:20px;top:22px;width:20px}.article-content--vigilkids .faq-item-answer{line-height:21px;padding-left:16px;padding-right:60px}.article-content--vigilkids .article-feature{padding:20px 16px}.article-content--vigilkids .article-try{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-try-description{line-height:21px}.article-content--vigilkids .article-try .btn{margin:20px 0}.article-content--vigilkids .article-show{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-show-content{align-items:center}.article-content--vigilkids .article-show-description{line-height:21px}.article-content--vigilkids .article-show .btn,.article-content--vigilkids .article-show img:not(.hot-icon){margin:20px 0}.article-content--vigilkids .faq-item{padding:20px 16px}.article-content--vigilkids .faq-item-title{font-size:14px;line-height:16px;padding-right:40px}.article-content--vigilkids .faq-item-answer{font-size:14px;line-height:16px;padding-left:0;padding-right:0}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:10px}.article-content--vigilkids .faq-item-title:before{right:16px;top:20px;width:16px}.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.article-content--vigilkids .black-h2{font-size:20px;line-height:23px}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{gap:20px;grid-template-columns:1fr;margin:16px 0;padding:16px}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{font-size:18px;line-height:21px;padding-left:10px}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{height:10px;width:4px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{font-size:14px;line-height:21px;margin-top:10px;padding-left:10px}.article-content--vigilkids .notice-info-row{flex-direction:column;gap:16px}.article-content--vigilkids .notice-info-row .notice-info{padding-bottom:24px;padding-left:44px;padding-top:52px;width:100%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:21px;margin-bottom:12px;min-height:24px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:0}.article-content--vigilkids .notice-info p:before{background-size:cover;height:24px;width:24px}.article-content--vigilkids .notice-info.warning p:before{background-size:cover}}@media (max-width:515px){.article-content--vigilkids img:not(.hot-icon){max-width:100%;width:auto}}.article-content--vigilkids [id]{scroll-margin-top:80px}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vigilkids/section-renderer-vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Vue 3 adapter for OneX Section Renderer SDK",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -14,6 +14,14 @@
|
|
|
14
14
|
"import": "./dist/editor.mjs",
|
|
15
15
|
"types": "./dist/editor.d.ts"
|
|
16
16
|
},
|
|
17
|
+
"./interactions/common": {
|
|
18
|
+
"import": "./dist/interactions/common.mjs",
|
|
19
|
+
"types": "./dist/interactions/common.d.ts"
|
|
20
|
+
},
|
|
21
|
+
"./interactions/vigilkids": {
|
|
22
|
+
"import": "./dist/interactions/vigilkids.mjs",
|
|
23
|
+
"types": "./dist/interactions/vigilkids.d.ts"
|
|
24
|
+
},
|
|
17
25
|
"./styles/vigilkids": "./dist/styles/products/vigilkids.css",
|
|
18
26
|
"./styles/visiva": "./dist/styles/products/visiva.css"
|
|
19
27
|
},
|