@vigilkids/section-renderer-vue 0.5.0 → 0.5.2
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/README.md +20 -1
- package/dist/interactions/vigilkids.d.ts +7 -7
- package/dist/interactions/vigilkids.mjs +140 -62
- package/dist/sections/article/prosemirror.d.ts +2 -0
- package/dist/sections/article/prosemirror.mjs +8 -0
- package/dist/sections/article/vigilkids/ArticleProductCard.vue +0 -6
- package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue +27 -21
- package/dist/sections/article/vigilkids/ArticleRetentionBanner.vue +4 -3
- package/dist/sections/article/vigilkids/ArticleSectionIntro.vue +12 -5
- package/dist/sections/article/vigilkids/ArticleStyledHeading.vue +1 -1
- package/dist/sections/article/vigilkids/ArticleTipNote.vue +2 -1
- package/dist/sections/article/vigilkids/ArticleTocList.vue +11 -4
- package/dist/sections/article/vigilkids/ArticleTopAd.vue +53 -44
- package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue +2 -2
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.vue +10 -8
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.vue +7 -2
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.vue +18 -9
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.vue +7 -4
- package/dist/styles/products/vigilkids.css +1 -1
- package/dist/styles/utilities.css +1 -1
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -10,7 +10,6 @@ pnpm add @vigilkids/section-renderer-vue
|
|
|
10
10
|
|
|
11
11
|
**Peer Dependencies:**
|
|
12
12
|
- `vue` ≥ 3.4
|
|
13
|
-
- `@vigilkids/section-core` (workspace)
|
|
14
13
|
|
|
15
14
|
## Usage
|
|
16
15
|
|
|
@@ -51,6 +50,26 @@ import '@vigilkids/section-renderer-vue/styles/vigilkids'
|
|
|
51
50
|
import '@vigilkids/section-renderer-vue/styles/visiva'
|
|
52
51
|
```
|
|
53
52
|
|
|
53
|
+
### Raw HTML Utility Classes
|
|
54
|
+
|
|
55
|
+
适用于 `article-custom-html` 或原始 HTML 模板,作用域限定在 `.article-content`:
|
|
56
|
+
|
|
57
|
+
- 间距:`mt-{n}` `mb-{n}` `ml-{n}` `mr-{n}` `p-{n}` `px-{n}` `py-{n}`
|
|
58
|
+
- 自动居中:`ml-auto` `mr-auto` `mx-auto`
|
|
59
|
+
- 布局:`block` `inline-block`
|
|
60
|
+
- 宽度:`w-full` `w-fit`
|
|
61
|
+
- 字号:`text-12` ~ `text-36`
|
|
62
|
+
- 字重:`font-normal` `font-medium` `font-semibold` `font-bold` `font-black`
|
|
63
|
+
- 对齐:`text-left` `text-center` `text-right`
|
|
64
|
+
- 行高:`leading-tight` `leading-normal` `leading-relaxed` `leading-loose`
|
|
65
|
+
|
|
66
|
+
示例:
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<img class="block w-fit mx-auto mb-20" src="..." alt="..." />
|
|
70
|
+
<p class="mb-20 text-18 font-bold">%base_year%</p>
|
|
71
|
+
```
|
|
72
|
+
|
|
54
73
|
## Components
|
|
55
74
|
|
|
56
75
|
| Component | Purpose |
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* 推荐文章轮播(Module 4)
|
|
15
|
-
* - 桌面 ≥1025px
|
|
16
|
-
* - 移动端 ≤1024px
|
|
15
|
+
* - 桌面 ≥1025px:超过 3 张卡片才启用轮播,3 张及以下保持静态布局
|
|
16
|
+
* - 移动端 ≤1024px:超过 1 张卡片就启用轮播
|
|
17
17
|
*
|
|
18
|
-
* 幂等:容器级
|
|
19
|
-
* 内存:embla
|
|
18
|
+
* 幂等:容器级 WeakMap 保证重复调用不会重复挂媒体查询或重复 new embla
|
|
19
|
+
* 内存:embla 实例、媒体查询监听和 dot 点击都在 destroyInteractions 中统一释放
|
|
20
20
|
*/
|
|
21
21
|
export declare function setupCarousel(root?: Document | HTMLElement): void;
|
|
22
22
|
/**
|
|
@@ -33,13 +33,13 @@ export declare function setupRetentionBanner(root?: Document | HTMLElement): voi
|
|
|
33
33
|
* 激活所有产品交互
|
|
34
34
|
* 幂等:所有子函数都有各自的绑定保护,重复调用安全
|
|
35
35
|
*/
|
|
36
|
-
export declare function setupInteractions(): void;
|
|
36
|
+
export declare function setupInteractions(root?: Document | HTMLElement): void;
|
|
37
37
|
/**
|
|
38
38
|
* 销毁产品交互
|
|
39
39
|
*
|
|
40
40
|
* 必须在组件卸载前调用,避免:
|
|
41
|
-
* - embla 实例持有 viewport 引用 +
|
|
42
|
-
* -
|
|
41
|
+
* - embla 实例持有 viewport 引用 + 媒体查询监听导致内存泄漏
|
|
42
|
+
* - dot 点击事件和可见状态残留,影响下次重挂载
|
|
43
43
|
*
|
|
44
44
|
* 不强制解绑 FAQ document delegate:
|
|
45
45
|
* - document 级委托不持有 root 引用,卸载不会产生泄漏
|
|
@@ -1,5 +1,118 @@
|
|
|
1
1
|
const emblaInstances = /* @__PURE__ */ new WeakMap();
|
|
2
|
+
const carouselBindings = /* @__PURE__ */ new WeakMap();
|
|
3
|
+
let emblaCarouselPromise = null;
|
|
2
4
|
let faqDelegateBound = false;
|
|
5
|
+
function loadEmblaCarousel() {
|
|
6
|
+
if (!emblaCarouselPromise)
|
|
7
|
+
emblaCarouselPromise = import("embla-carousel").then(({ default: EmblaCarousel }) => EmblaCarousel);
|
|
8
|
+
return emblaCarouselPromise;
|
|
9
|
+
}
|
|
10
|
+
function addMediaQueryListener(mediaQuery, handler) {
|
|
11
|
+
if ("addEventListener" in mediaQuery)
|
|
12
|
+
mediaQuery.addEventListener("change", handler);
|
|
13
|
+
else
|
|
14
|
+
mediaQuery.addListener(handler);
|
|
15
|
+
}
|
|
16
|
+
function removeMediaQueryListener(mediaQuery, handler) {
|
|
17
|
+
if ("removeEventListener" in mediaQuery)
|
|
18
|
+
mediaQuery.removeEventListener("change", handler);
|
|
19
|
+
else
|
|
20
|
+
mediaQuery.removeListener(handler);
|
|
21
|
+
}
|
|
22
|
+
function shouldActivateCarousel(cardCount, isMobile) {
|
|
23
|
+
return isMobile ? cardCount > 1 : cardCount > 3;
|
|
24
|
+
}
|
|
25
|
+
function clearDotHandlers(binding) {
|
|
26
|
+
if (!binding)
|
|
27
|
+
return;
|
|
28
|
+
binding.dotHandlers.forEach((handler, dot) => {
|
|
29
|
+
dot.removeEventListener("click", handler);
|
|
30
|
+
});
|
|
31
|
+
binding.dotHandlers.clear();
|
|
32
|
+
}
|
|
33
|
+
function setCarouselActive(el, active) {
|
|
34
|
+
el.dataset.carouselActive = active ? "1" : "0";
|
|
35
|
+
}
|
|
36
|
+
function resetCarouselState(el, viewport, binding) {
|
|
37
|
+
const embla = emblaInstances.get(el);
|
|
38
|
+
if (embla) {
|
|
39
|
+
embla.destroy();
|
|
40
|
+
emblaInstances.delete(el);
|
|
41
|
+
}
|
|
42
|
+
clearDotHandlers(binding);
|
|
43
|
+
viewport.classList.remove("recommend-slider-ready");
|
|
44
|
+
setCarouselActive(el, false);
|
|
45
|
+
el.querySelectorAll(".recommend-card").forEach((card) => {
|
|
46
|
+
card.classList.remove("is-active");
|
|
47
|
+
});
|
|
48
|
+
el.querySelectorAll(".recommend-dot").forEach((dot) => {
|
|
49
|
+
dot.classList.remove("active");
|
|
50
|
+
dot.hidden = true;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function syncCarouselState(el, embla, snapCount) {
|
|
54
|
+
const activeIndex = embla.selectedScrollSnap();
|
|
55
|
+
const dots = el.querySelectorAll(".recommend-dot");
|
|
56
|
+
const cards = el.querySelectorAll(".recommend-card");
|
|
57
|
+
dots.forEach((dot, index) => {
|
|
58
|
+
const visible = index < snapCount;
|
|
59
|
+
dot.hidden = !visible;
|
|
60
|
+
dot.classList.toggle("active", visible && index === activeIndex);
|
|
61
|
+
});
|
|
62
|
+
cards.forEach((card, index) => {
|
|
63
|
+
card.classList.toggle("is-active", index === activeIndex);
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
function refreshCarousel(el, viewport, binding) {
|
|
67
|
+
binding.revision += 1;
|
|
68
|
+
const revision = binding.revision;
|
|
69
|
+
const isMobile = binding.mediaQuery.matches;
|
|
70
|
+
const cardCount = el.querySelectorAll(".recommend-card").length;
|
|
71
|
+
resetCarouselState(el, viewport, binding);
|
|
72
|
+
if (!shouldActivateCarousel(cardCount, isMobile))
|
|
73
|
+
return;
|
|
74
|
+
void loadEmblaCarousel().then((EmblaCarousel) => {
|
|
75
|
+
if (carouselBindings.get(el) !== binding || binding.revision !== revision)
|
|
76
|
+
return;
|
|
77
|
+
const currentCardCount = el.querySelectorAll(".recommend-card").length;
|
|
78
|
+
const currentIsMobile = binding.mediaQuery.matches;
|
|
79
|
+
if (!shouldActivateCarousel(currentCardCount, currentIsMobile))
|
|
80
|
+
return;
|
|
81
|
+
const embla = EmblaCarousel(viewport, {
|
|
82
|
+
loop: false,
|
|
83
|
+
align: "start",
|
|
84
|
+
containScroll: "trimSnaps"
|
|
85
|
+
});
|
|
86
|
+
const snapCount = embla.scrollSnapList().length;
|
|
87
|
+
if (snapCount < 2) {
|
|
88
|
+
embla.destroy();
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
emblaInstances.set(el, embla);
|
|
92
|
+
viewport.classList.add("recommend-slider-ready");
|
|
93
|
+
setCarouselActive(el, true);
|
|
94
|
+
const dots = el.querySelectorAll(".recommend-dot");
|
|
95
|
+
dots.forEach((dot, index) => {
|
|
96
|
+
const visible = index < snapCount;
|
|
97
|
+
dot.hidden = !visible;
|
|
98
|
+
dot.classList.toggle("active", visible && index === 0);
|
|
99
|
+
if (!visible)
|
|
100
|
+
return;
|
|
101
|
+
const clickHandler = () => {
|
|
102
|
+
embla.scrollTo(index);
|
|
103
|
+
};
|
|
104
|
+
binding.dotHandlers.set(dot, clickHandler);
|
|
105
|
+
dot.addEventListener("click", clickHandler);
|
|
106
|
+
});
|
|
107
|
+
const syncActive = () => {
|
|
108
|
+
syncCarouselState(el, embla, snapCount);
|
|
109
|
+
};
|
|
110
|
+
embla.on("init", syncActive);
|
|
111
|
+
embla.on("select", syncActive);
|
|
112
|
+
embla.on("reInit", syncActive);
|
|
113
|
+
syncActive();
|
|
114
|
+
});
|
|
115
|
+
}
|
|
3
116
|
function setupFaqAccordion() {
|
|
4
117
|
if (faqDelegateBound)
|
|
5
118
|
return;
|
|
@@ -29,61 +142,28 @@ function setupFaqAccordion() {
|
|
|
29
142
|
body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
|
|
30
143
|
});
|
|
31
144
|
}
|
|
32
|
-
function wireDesktopDotClicks(root) {
|
|
33
|
-
const dots = root.querySelectorAll(".recommend-dot");
|
|
34
|
-
const cards = root.querySelectorAll(".recommend-card");
|
|
35
|
-
dots.forEach((dot, i) => {
|
|
36
|
-
if (dot.dataset.bound === "1")
|
|
37
|
-
return;
|
|
38
|
-
dot.dataset.bound = "1";
|
|
39
|
-
dot.addEventListener("click", () => {
|
|
40
|
-
const target = cards[i];
|
|
41
|
-
if (target)
|
|
42
|
-
target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
145
|
export function setupCarousel(root = document) {
|
|
47
146
|
const els = root.querySelectorAll('[data-component="related-articles-carousel"]');
|
|
48
147
|
els.forEach((el) => {
|
|
49
|
-
if (el
|
|
148
|
+
if (carouselBindings.has(el))
|
|
50
149
|
return;
|
|
51
|
-
el.dataset.emblaInit = "1";
|
|
52
150
|
const viewport = el.querySelector(".recommend-grid");
|
|
53
151
|
if (!viewport)
|
|
54
152
|
return;
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
viewport.classList.add("recommend-slider-ready");
|
|
70
|
-
const dots = el.querySelectorAll(".recommend-dot");
|
|
71
|
-
const cards = el.querySelectorAll(".recommend-card");
|
|
72
|
-
const syncActive = () => {
|
|
73
|
-
const idx = embla.selectedScrollSnap();
|
|
74
|
-
dots.forEach((d, i) => d.classList.toggle("active", i === idx));
|
|
75
|
-
cards.forEach((c, i) => c.classList.toggle("is-active", i === idx));
|
|
76
|
-
};
|
|
77
|
-
embla.on("select", syncActive);
|
|
78
|
-
embla.on("init", syncActive);
|
|
79
|
-
syncActive();
|
|
80
|
-
dots.forEach((dot, i) => {
|
|
81
|
-
if (dot.dataset.bound === "1")
|
|
82
|
-
return;
|
|
83
|
-
dot.dataset.bound = "1";
|
|
84
|
-
dot.addEventListener("click", () => embla.scrollTo(i));
|
|
85
|
-
});
|
|
86
|
-
});
|
|
153
|
+
const mediaQuery = window.matchMedia("(max-width: 1024px)");
|
|
154
|
+
let binding;
|
|
155
|
+
const mediaQueryHandler = () => {
|
|
156
|
+
refreshCarousel(el, viewport, binding);
|
|
157
|
+
};
|
|
158
|
+
binding = {
|
|
159
|
+
dotHandlers: /* @__PURE__ */ new Map(),
|
|
160
|
+
mediaQuery,
|
|
161
|
+
mediaQueryHandler,
|
|
162
|
+
revision: 0
|
|
163
|
+
};
|
|
164
|
+
carouselBindings.set(el, binding);
|
|
165
|
+
addMediaQueryListener(mediaQuery, mediaQueryHandler);
|
|
166
|
+
mediaQueryHandler();
|
|
87
167
|
});
|
|
88
168
|
}
|
|
89
169
|
export function setupRetentionBanner(root = document) {
|
|
@@ -109,26 +189,24 @@ export function setupRetentionBanner(root = document) {
|
|
|
109
189
|
});
|
|
110
190
|
});
|
|
111
191
|
}
|
|
112
|
-
export function setupInteractions() {
|
|
192
|
+
export function setupInteractions(root = document) {
|
|
113
193
|
setupFaqAccordion();
|
|
114
|
-
setupCarousel();
|
|
115
|
-
setupRetentionBanner();
|
|
194
|
+
setupCarousel(root);
|
|
195
|
+
setupRetentionBanner(root);
|
|
116
196
|
}
|
|
117
197
|
export function destroyInteractions(root = document) {
|
|
118
198
|
const carousels = root.querySelectorAll('[data-component="related-articles-carousel"]');
|
|
119
199
|
carousels.forEach((el) => {
|
|
120
|
-
const embla = emblaInstances.get(el);
|
|
121
|
-
if (embla) {
|
|
122
|
-
embla.destroy();
|
|
123
|
-
emblaInstances.delete(el);
|
|
124
|
-
}
|
|
125
|
-
delete el.dataset.emblaInit;
|
|
126
|
-
el.querySelectorAll('.recommend-dot[data-bound="1"]').forEach((dot) => {
|
|
127
|
-
delete dot.dataset.bound;
|
|
128
|
-
});
|
|
129
200
|
const viewport = el.querySelector(".recommend-grid");
|
|
130
|
-
if (viewport)
|
|
131
|
-
|
|
201
|
+
if (!viewport)
|
|
202
|
+
return;
|
|
203
|
+
const binding = carouselBindings.get(el);
|
|
204
|
+
if (binding) {
|
|
205
|
+
binding.revision += 1;
|
|
206
|
+
removeMediaQueryListener(binding.mediaQuery, binding.mediaQueryHandler);
|
|
207
|
+
carouselBindings.delete(el);
|
|
208
|
+
}
|
|
209
|
+
resetCarouselState(el, viewport, binding);
|
|
132
210
|
});
|
|
133
211
|
const banners = root.querySelectorAll('[data-component="retention-banner"]');
|
|
134
212
|
banners.forEach((el) => {
|
|
@@ -67,3 +67,11 @@ export function renderContent(content) {
|
|
|
67
67
|
}
|
|
68
68
|
return "";
|
|
69
69
|
}
|
|
70
|
+
const singleParagraphWrapperPattern = /^\s*<p(?:\s[^>]*)?>([\s\S]*)<\/p>\s*$/i;
|
|
71
|
+
export function renderInlineContent(content) {
|
|
72
|
+
const html = renderContent(content);
|
|
73
|
+
const matched = html.match(singleParagraphWrapperPattern);
|
|
74
|
+
if (!matched)
|
|
75
|
+
return html;
|
|
76
|
+
return matched[1] ?? "";
|
|
77
|
+
}
|
|
@@ -11,10 +11,6 @@ import ProductCardVariantE from './product-card/ProductCardVariantE.vue'
|
|
|
11
11
|
import ProductCardVariantF from './product-card/ProductCardVariantF.vue'
|
|
12
12
|
import ProductCardVariantG from './product-card/ProductCardVariantG.vue'
|
|
13
13
|
|
|
14
|
-
// ArticleProductCard 分发器(Shopify Hydrogen section variants 模式)
|
|
15
|
-
// 根据 variant 选择子组件 + 根 class,内联 HTML 全部下沉到 variant 子组件
|
|
16
|
-
// 子组件各自持有完整 useInlineEdit 契约,保证可独立替换和单测
|
|
17
|
-
|
|
18
14
|
const props = defineProps<{
|
|
19
15
|
blockOrder: string[]
|
|
20
16
|
blocks: Record<string, BlockData>
|
|
@@ -32,7 +28,6 @@ const emit = defineEmits<{
|
|
|
32
28
|
|
|
33
29
|
const variant = computed(() => String(props.settings.variant || 'A').toUpperCase())
|
|
34
30
|
|
|
35
|
-
// variant 到 { 根 class, 子组件 } 的映射(对齐 vigilkids.css 1494-1500)
|
|
36
31
|
const VARIANT_MAP = {
|
|
37
32
|
A: { class: 'product-card', component: ProductCardVariantA },
|
|
38
33
|
B: { class: 'product-card-compact', component: ProductCardVariantB },
|
|
@@ -43,7 +38,6 @@ const VARIANT_MAP = {
|
|
|
43
38
|
G: { class: 'product-card-checklist', component: ProductCardVariantG },
|
|
44
39
|
} as const
|
|
45
40
|
|
|
46
|
-
// 未知 variant 时回退到 A,保证数据异常不会渲染空节点
|
|
47
41
|
const resolved = computed(() => VARIANT_MAP[variant.value as keyof typeof VARIANT_MAP] || VARIANT_MAP.A)
|
|
48
42
|
</script>
|
|
49
43
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import type { BlockData } from '@vigilkids/section-core'
|
|
2
|
+
import type { ArticleReferenceSnapshot, BlockData } from '@vigilkids/section-core'
|
|
3
3
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
@@ -25,12 +25,28 @@ const s = computed(() => props.settings)
|
|
|
25
25
|
const items = computed(() =>
|
|
26
26
|
props.blockOrder
|
|
27
27
|
.filter(id => props.blocks[id]?.type === 'related_item')
|
|
28
|
-
.map(id =>
|
|
28
|
+
.map((id) => {
|
|
29
|
+
const block = props.blocks[id]!
|
|
30
|
+
const article = block.settings.article as ArticleReferenceSnapshot | null | undefined
|
|
31
|
+
const overrideImageURL = String(block.settings.cover_image_url || '')
|
|
32
|
+
const overrideImageAlt = String(block.settings.cover_image_alt || '')
|
|
33
|
+
const featuredImageAlt = article?.featured_image_alt || ''
|
|
34
|
+
const title = article?.title || ''
|
|
35
|
+
|
|
36
|
+
return {
|
|
37
|
+
id,
|
|
38
|
+
href: article?.url_path || '#',
|
|
39
|
+
title,
|
|
40
|
+
description: article?.excerpt || '',
|
|
41
|
+
imageURL: overrideImageURL || article?.featured_image_url || '',
|
|
42
|
+
imageAlt: overrideImageAlt || featuredImageAlt || title,
|
|
43
|
+
}
|
|
44
|
+
}),
|
|
29
45
|
)
|
|
30
46
|
|
|
31
47
|
const showDots = computed(() => !!s.value.show_dots)
|
|
32
48
|
|
|
33
|
-
const { editableAttrs
|
|
49
|
+
const { editableAttrs } = useInlineEdit({
|
|
34
50
|
editorMode: () => !!props.editorMode,
|
|
35
51
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
36
52
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -42,39 +58,29 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
42
58
|
|
|
43
59
|
<template>
|
|
44
60
|
<section class="article-recommend" data-component="related-articles-carousel">
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</h2>
|
|
61
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
62
|
+
<h2 v-if="s.title" class="article-recommend-title" v-bind="editableAttrs('title')" v-html="s.title" />
|
|
48
63
|
<div class="recommend-grid">
|
|
49
64
|
<a
|
|
50
65
|
v-for="(item, i) in items"
|
|
51
66
|
:key="item.id"
|
|
52
|
-
:href="
|
|
67
|
+
:href="item.href"
|
|
53
68
|
class="recommend-card"
|
|
54
69
|
>
|
|
55
70
|
<div class="recommend-card-image">
|
|
56
71
|
<img
|
|
57
|
-
:src="
|
|
58
|
-
:alt="
|
|
72
|
+
:src="item.imageURL"
|
|
73
|
+
:alt="item.imageAlt"
|
|
59
74
|
>
|
|
60
75
|
</div>
|
|
61
76
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
62
|
-
<p
|
|
63
|
-
class="recommend-card-title"
|
|
64
|
-
v-bind="blockEditableAttrs(item.id, 'title')"
|
|
65
|
-
v-html="item.block.settings.title"
|
|
66
|
-
/>
|
|
77
|
+
<p class="recommend-card-title" v-html="item.title" />
|
|
67
78
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
68
|
-
<p
|
|
69
|
-
class="recommend-card-desc"
|
|
70
|
-
v-bind="blockEditableAttrs(item.id, 'description')"
|
|
71
|
-
v-html="item.block.settings.description"
|
|
72
|
-
/>
|
|
79
|
+
<p class="recommend-card-desc" v-html="item.description" />
|
|
73
80
|
<span class="sr-only">{{ i + 1 }}</span>
|
|
74
81
|
</a>
|
|
75
82
|
</div>
|
|
76
|
-
<div v-if="showDots && items.length >
|
|
77
|
-
<!-- 首屏先给第一个 dot 标 active 作为 init 前视觉提示;embla 初始化后由 interactions/vigilkids.ts 的 syncActive 接管 -->
|
|
83
|
+
<div v-if="showDots && items.length > 1" class="recommend-dots">
|
|
78
84
|
<span
|
|
79
85
|
v-for="(item, i) in items"
|
|
80
86
|
:key="item.id"
|
|
@@ -80,8 +80,8 @@ const { editableAttrs } = useInlineEdit({
|
|
|
80
80
|
class="retention-banner-btn"
|
|
81
81
|
:href="(s.cta_url as string) || '#'"
|
|
82
82
|
v-bind="editableAttrs('cta_label')"
|
|
83
|
+
v-html="s.cta_label"
|
|
83
84
|
>
|
|
84
|
-
{{ s.cta_label }}
|
|
85
85
|
</a>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
@@ -91,8 +91,9 @@ const { editableAttrs } = useInlineEdit({
|
|
|
91
91
|
aria-label="Close"
|
|
92
92
|
@click.stop="handleClose"
|
|
93
93
|
>
|
|
94
|
-
<svg width="
|
|
95
|
-
<path d="
|
|
94
|
+
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
95
|
+
<path d="M12 1L1 12" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
96
|
+
<path d="M12 12L1 1" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
96
97
|
</svg>
|
|
97
98
|
</button>
|
|
98
99
|
</div>
|
|
@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../prosemirror'
|
|
7
8
|
|
|
8
9
|
const props = defineProps<{
|
|
9
10
|
blockOrder: string[]
|
|
@@ -25,7 +26,11 @@ const s = computed(() => props.settings)
|
|
|
25
26
|
const items = computed(() =>
|
|
26
27
|
props.blockOrder
|
|
27
28
|
.filter(id => props.blocks[id]?.type === 'intro_item')
|
|
28
|
-
.map(id => ({
|
|
29
|
+
.map(id => ({
|
|
30
|
+
id,
|
|
31
|
+
block: props.blocks[id]!,
|
|
32
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
33
|
+
})),
|
|
29
34
|
)
|
|
30
35
|
|
|
31
36
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
@@ -42,15 +47,17 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
42
47
|
<section>
|
|
43
48
|
<p class="section-intro">
|
|
44
49
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
45
|
-
<span class="section-intro-bold" v-bind="editableAttrs('bold_text')" v-html="s.bold_text" />
|
|
50
|
+
<span v-if="s.bold_text" class="section-intro-bold" v-bind="editableAttrs('bold_text')" v-html="s.bold_text" />
|
|
46
51
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
47
|
-
<span v-bind="editableAttrs('intro_text')" v-html="s.intro_text" />
|
|
52
|
+
<span v-if="s.intro_text" v-bind="editableAttrs('intro_text')" v-html="s.intro_text" />
|
|
48
53
|
</p>
|
|
49
|
-
<ul class="section-intro-list">
|
|
54
|
+
<ul v-if="items.length" class="section-intro-list">
|
|
50
55
|
<li v-for="item in items" :key="item.id">
|
|
51
56
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
52
|
-
<span v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.
|
|
57
|
+
<span v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
53
58
|
</li>
|
|
54
59
|
</ul>
|
|
60
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
61
|
+
<p v-if="s.trailing_text" class="section-intro" v-bind="editableAttrs('trailing_text')" v-html="s.trailing_text" />
|
|
55
62
|
</section>
|
|
56
63
|
</template>
|
|
@@ -41,7 +41,7 @@ const { editableAttrs } = useInlineEdit({
|
|
|
41
41
|
<template>
|
|
42
42
|
<h3 :class="headingClass">
|
|
43
43
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
44
|
-
<span :class="iconClass" v-bind="editableAttrs('
|
|
44
|
+
<span :class="iconClass" v-bind="editableAttrs('badge_text')" v-html="s.badge_text" />
|
|
45
45
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
46
46
|
<span v-bind="editableAttrs('text')" v-html="s.text" />
|
|
47
47
|
</h3>
|
|
@@ -50,7 +50,8 @@ const { editableAttrs } = useInlineEdit({
|
|
|
50
50
|
<div :class="containerClass">
|
|
51
51
|
<div :class="labelClass">
|
|
52
52
|
<img v-if="s.icon_url" :src="(s.icon_url as string)" :alt="(s.label_text as string) || ''">
|
|
53
|
-
|
|
53
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
54
|
+
<span v-bind="editableAttrs('label_text')" v-html="s.label_text" />
|
|
54
55
|
</div>
|
|
55
56
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
56
57
|
<p :class="contentClass" v-bind="editableAttrs('content')" v-html="s.content" />
|
|
@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../prosemirror'
|
|
7
8
|
|
|
8
9
|
const props = defineProps<{
|
|
9
10
|
blockOrder: string[]
|
|
@@ -31,10 +32,14 @@ const isOrdered = computed(() => variant.value === 'ordered')
|
|
|
31
32
|
const items = computed(() =>
|
|
32
33
|
props.blockOrder
|
|
33
34
|
.filter(id => props.blocks[id]?.type === 'toc_item')
|
|
34
|
-
.map(id => ({
|
|
35
|
+
.map(id => ({
|
|
36
|
+
id,
|
|
37
|
+
block: props.blocks[id]!,
|
|
38
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
39
|
+
})),
|
|
35
40
|
)
|
|
36
41
|
|
|
37
|
-
const { blockEditableAttrs } = useInlineEdit({
|
|
42
|
+
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
38
43
|
editorMode: () => !!props.editorMode,
|
|
39
44
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
40
45
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -45,12 +50,14 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
45
50
|
</script>
|
|
46
51
|
|
|
47
52
|
<template>
|
|
53
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
54
|
+
<p v-if="s.title" class="toc-title" v-bind="editableAttrs('title')" v-html="s.title" />
|
|
48
55
|
<ol v-if="isOrdered" :class="listClass">
|
|
49
56
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
50
|
-
<li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.
|
|
57
|
+
<li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
51
58
|
</ol>
|
|
52
59
|
<ul v-else :class="listClass">
|
|
53
60
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
54
|
-
<li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.
|
|
61
|
+
<li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
55
62
|
</ul>
|
|
56
63
|
</template>
|
|
@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../prosemirror'
|
|
7
8
|
|
|
8
9
|
const props = defineProps<{
|
|
9
10
|
blockOrder: string[]
|
|
@@ -25,7 +26,11 @@ const s = computed(() => props.settings)
|
|
|
25
26
|
const features = computed(() =>
|
|
26
27
|
props.blockOrder
|
|
27
28
|
.filter(id => props.blocks[id]?.type === 'feature')
|
|
28
|
-
.map(id => ({
|
|
29
|
+
.map(id => ({
|
|
30
|
+
id,
|
|
31
|
+
block: props.blocks[id]!,
|
|
32
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
33
|
+
})),
|
|
29
34
|
)
|
|
30
35
|
|
|
31
36
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
@@ -39,52 +44,56 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
39
44
|
</script>
|
|
40
45
|
|
|
41
46
|
<template>
|
|
42
|
-
<section
|
|
43
|
-
<div class="top-banner
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<p
|
|
52
|
-
v-if="s.description"
|
|
53
|
-
class="top-banner-desc"
|
|
54
|
-
v-bind="editableAttrs('description')"
|
|
55
|
-
v-html="s.description"
|
|
56
|
-
/>
|
|
57
|
-
<ul v-if="features.length" class="top-banner-features">
|
|
47
|
+
<section>
|
|
48
|
+
<div class="top-banner">
|
|
49
|
+
<div class="top-banner-info">
|
|
50
|
+
<img
|
|
51
|
+
v-if="s.header_image_url"
|
|
52
|
+
class="top-banner-header"
|
|
53
|
+
:src="(s.header_image_url as string)"
|
|
54
|
+
:alt="(s.header_alt as string) || ''"
|
|
55
|
+
>
|
|
58
56
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
59
|
-
<
|
|
60
|
-
v-
|
|
61
|
-
|
|
62
|
-
v-bind="
|
|
63
|
-
v-html="
|
|
57
|
+
<p
|
|
58
|
+
v-if="s.description"
|
|
59
|
+
class="top-banner-desc"
|
|
60
|
+
v-bind="editableAttrs('description')"
|
|
61
|
+
v-html="s.description"
|
|
64
62
|
/>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
63
|
+
<ul v-if="features.length" class="top-banner-features">
|
|
64
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
65
|
+
<li
|
|
66
|
+
v-for="item in features"
|
|
67
|
+
:key="item.id"
|
|
68
|
+
v-bind="blockEditableAttrs(item.id, 'text')"
|
|
69
|
+
v-html="item.renderedText"
|
|
70
|
+
/>
|
|
71
|
+
</ul>
|
|
72
|
+
<div class="action-buttons">
|
|
73
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
74
|
+
<a
|
|
75
|
+
v-if="s.cta_primary_label"
|
|
76
|
+
class="action-btn-primary"
|
|
77
|
+
:href="(s.cta_primary_url as string) || '#'"
|
|
78
|
+
v-bind="editableAttrs('cta_primary_label')"
|
|
79
|
+
v-html="s.cta_primary_label"
|
|
80
|
+
/>
|
|
81
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
+
<a
|
|
83
|
+
v-if="s.cta_outline_label"
|
|
84
|
+
class="action-btn-outline"
|
|
85
|
+
:href="(s.cta_outline_url as string) || '#'"
|
|
86
|
+
v-bind="editableAttrs('cta_outline_label')"
|
|
87
|
+
v-html="s.cta_outline_label"
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
<img
|
|
92
|
+
v-if="s.mockup_image_url"
|
|
93
|
+
class="top-banner-mockup"
|
|
94
|
+
:src="(s.mockup_image_url as string)"
|
|
95
|
+
:alt="(s.mockup_alt as string) || ''"
|
|
79
96
|
>
|
|
80
|
-
{{ s.cta_outline_label }}
|
|
81
|
-
</a>
|
|
82
97
|
</div>
|
|
83
|
-
<img
|
|
84
|
-
v-if="s.mockup_image_url"
|
|
85
|
-
class="top-banner-mockup"
|
|
86
|
-
:src="(s.mockup_image_url as string)"
|
|
87
|
-
:alt="(s.mockup_alt as string) || ''"
|
|
88
|
-
>
|
|
89
98
|
</section>
|
|
90
99
|
</template>
|
|
@@ -14,8 +14,8 @@ const { s, editableAttrs } = props
|
|
|
14
14
|
<template>
|
|
15
15
|
<div class="action-buttons">
|
|
16
16
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
17
|
-
<a :href="(s.cta_primary_url as string) || '#'" class="
|
|
17
|
+
<a :href="(s.cta_primary_url as string) || '#'" class="action-btn-primary" v-bind="editableAttrs('cta_primary_label')" v-html="s.cta_primary_label" />
|
|
18
18
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
19
|
-
<a :href="(s.cta_outline_url as string) || '#'" class="
|
|
19
|
+
<a :href="(s.cta_outline_url as string) || '#'" class="action-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
|
|
20
20
|
</div>
|
|
21
21
|
</template>
|
|
@@ -4,10 +4,9 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../../prosemirror'
|
|
7
8
|
import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
|
|
8
9
|
|
|
9
|
-
// Variant D: 功能列表 + 手机图(product-card-features)
|
|
10
|
-
// 消费 feature_item 类型的 blocks 渲染功能列表项
|
|
11
10
|
const props = defineProps<{
|
|
12
11
|
blockOrder: string[]
|
|
13
12
|
blocks: Record<string, BlockData>
|
|
@@ -25,11 +24,14 @@ const emit = defineEmits<{
|
|
|
25
24
|
|
|
26
25
|
const s = computed(() => props.settings)
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
const featureItems = computed(() =>
|
|
27
|
+
const featureDots = computed(() =>
|
|
30
28
|
props.blockOrder
|
|
31
|
-
.filter(id => props.blocks[id]?.type === '
|
|
32
|
-
.map(id => ({
|
|
29
|
+
.filter(id => props.blocks[id]?.type === 'feature_dot')
|
|
30
|
+
.map(id => ({
|
|
31
|
+
id,
|
|
32
|
+
block: props.blocks[id]!,
|
|
33
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
34
|
+
})),
|
|
33
35
|
)
|
|
34
36
|
|
|
35
37
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
@@ -47,9 +49,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
47
49
|
<div>
|
|
48
50
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
49
51
|
<p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
|
|
50
|
-
<ul class="
|
|
52
|
+
<ul class="feature-dot-list">
|
|
51
53
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
52
|
-
<li v-for="item in
|
|
54
|
+
<li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
53
55
|
</ul>
|
|
54
56
|
<ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
|
|
55
57
|
</div>
|
|
@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../../prosemirror'
|
|
7
8
|
import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
|
|
8
9
|
|
|
9
10
|
// Variant E: 两侧装饰 + feature-dot(product-card-split)
|
|
@@ -28,7 +29,11 @@ const s = computed(() => props.settings)
|
|
|
28
29
|
const featureDots = computed(() =>
|
|
29
30
|
props.blockOrder
|
|
30
31
|
.filter(id => props.blocks[id]?.type === 'feature_dot')
|
|
31
|
-
.map(id => ({
|
|
32
|
+
.map(id => ({
|
|
33
|
+
id,
|
|
34
|
+
block: props.blocks[id]!,
|
|
35
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
36
|
+
})),
|
|
32
37
|
)
|
|
33
38
|
|
|
34
39
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
@@ -48,7 +53,7 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
48
53
|
<p class="split-product-name product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
|
|
49
54
|
<ul class="feature-dot-list">
|
|
50
55
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
51
|
-
<li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.
|
|
56
|
+
<li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
52
57
|
</ul>
|
|
53
58
|
<ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
|
|
54
59
|
</div>
|
|
@@ -4,11 +4,8 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../../prosemirror'
|
|
7
8
|
|
|
8
|
-
// Variant F: 按钮纵向排列(product-card-vertical)
|
|
9
|
-
// 左右分栏 + 中间分隔线结构,CTA 按钮垂直堆叠
|
|
10
|
-
// 因结构与其它 variant 的 action-buttons 横向布局差异大,未使用共享 CtaGroup
|
|
11
|
-
// 保留直接渲染 a 标签,保证纵向容器的样式作用于按钮本身
|
|
12
9
|
const props = defineProps<{
|
|
13
10
|
blockOrder: string[]
|
|
14
11
|
blocks: Record<string, BlockData>
|
|
@@ -26,7 +23,17 @@ const emit = defineEmits<{
|
|
|
26
23
|
|
|
27
24
|
const s = computed(() => props.settings)
|
|
28
25
|
|
|
29
|
-
const
|
|
26
|
+
const featureChecks = computed(() =>
|
|
27
|
+
props.blockOrder
|
|
28
|
+
.filter(id => props.blocks[id]?.type === 'feature_check')
|
|
29
|
+
.map(id => ({
|
|
30
|
+
id,
|
|
31
|
+
block: props.blocks[id]!,
|
|
32
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
33
|
+
})),
|
|
34
|
+
)
|
|
35
|
+
|
|
36
|
+
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
30
37
|
editorMode: () => !!props.editorMode,
|
|
31
38
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
32
39
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
@@ -43,14 +50,16 @@ const { editableAttrs } = useInlineEdit({
|
|
|
43
50
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
44
51
|
<p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
|
|
45
52
|
</div>
|
|
46
|
-
|
|
47
|
-
|
|
53
|
+
<ul class="feature-check-list">
|
|
54
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
55
|
+
<li v-for="item in featureChecks" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
56
|
+
</ul>
|
|
48
57
|
</div>
|
|
49
58
|
<div class="card-vertical-divider" />
|
|
50
59
|
<div class="card-vertical-right">
|
|
51
60
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
52
|
-
<a :href="(s.cta_primary_url as string) || '#'" class="
|
|
61
|
+
<a :href="(s.cta_primary_url as string) || '#'" class="action-btn-primary" v-bind="editableAttrs('cta_primary_label')" v-html="s.cta_primary_label" />
|
|
53
62
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
54
|
-
<a :href="(s.cta_outline_url as string) || '#'" class="
|
|
63
|
+
<a :href="(s.cta_outline_url as string) || '#'" class="action-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
|
|
55
64
|
</div>
|
|
56
65
|
</template>
|
|
@@ -4,10 +4,9 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../../composables/useInlineEdit'
|
|
7
|
+
import { renderInlineContent } from '../../prosemirror'
|
|
7
8
|
import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
|
|
8
9
|
|
|
9
|
-
// Variant G: 蓝底 checklist(product-card-checklist)
|
|
10
|
-
// 与 D 相同使用 feature_item blocks,但无图片,根 class 切换为深色主题
|
|
11
10
|
const props = defineProps<{
|
|
12
11
|
blockOrder: string[]
|
|
13
12
|
blocks: Record<string, BlockData>
|
|
@@ -28,7 +27,11 @@ const s = computed(() => props.settings)
|
|
|
28
27
|
const featureItems = computed(() =>
|
|
29
28
|
props.blockOrder
|
|
30
29
|
.filter(id => props.blocks[id]?.type === 'feature_item')
|
|
31
|
-
.map(id => ({
|
|
30
|
+
.map(id => ({
|
|
31
|
+
id,
|
|
32
|
+
block: props.blocks[id]!,
|
|
33
|
+
renderedText: renderInlineContent(props.blocks[id]!.settings.text),
|
|
34
|
+
})),
|
|
32
35
|
)
|
|
33
36
|
|
|
34
37
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
@@ -46,7 +49,7 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
46
49
|
<p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
|
|
47
50
|
<ul class="product-feature-list">
|
|
48
51
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
49
|
-
<li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.
|
|
52
|
+
<li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
|
|
50
53
|
</ul>
|
|
51
54
|
<ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
|
|
52
55
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "../utilities.css";.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{position:relative;width:-moz-fit-content;width:fit-content}.article-content--vigilkids .hot-icon{display:inline-block;margin-left:4px;vertical-align:middle}.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;width:100%}.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,.contrast-table thead{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 .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 .article-feature-list li,.article-content--vigilkids .disc-list li{font-size:14px}.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 .highlight-paragraph{font-weight:500;line-height:26px}.article-content--vigilkids .highlight-red{color:#f40d00}.article-content--vigilkids .highlight-orange{color:#ff8b07}.article-content--vigilkids .highlight-green{color:#009663}.article-content--vigilkids .section-intro{font-size:20px;line-height:30px}.article-content--vigilkids .section-intro-bold{font-weight:700}.article-content--vigilkids .section-intro-list{font-weight:300;line-height:24px;list-style:none;padding-left:20px}.article-content--vigilkids .section-intro-list li{margin-bottom:8px;padding-left:16px;position:relative}.article-content--vigilkids .section-intro-list li:before{background:#4d4d4d;border-radius:50%;content:"";height:4px;left:0;position:absolute;top:10px;width:4px}.article-content--vigilkids .toc-title{color:#000;font-size:18px;font-weight:600;line-height:27px;margin:0 0 10px}.article-content--vigilkids .toc-list-dot{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0 0 20px;padding:0}.article-content--vigilkids .toc-list-dot li{line-height:24px;padding-left:16px;position:relative}.article-content--vigilkids .toc-list-dot li:before{background:#4d4d4d;border-radius:50%;content:"";height:4px;left:0;position:absolute;top:10px;width:4px}.article-content--vigilkids .toc-list-check{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0 0 20px;padding:0}.article-content--vigilkids .toc-list-check li{color:#000;line-height:24px;padding-left:24px;position:relative}.article-content--vigilkids .toc-list-check li:before{background:#24c790 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' fill='none' viewBox='0 0 7 6'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 3 1.5 1.5L6 1'/%3E%3C/svg%3E") no-repeat 50%;background-size:7px 6px;border-radius:50%;content:"";height:12px;left:0;position:absolute;top:6px;width:12px}.article-content--vigilkids .toc-list-grid{display:grid;gap:5px 40px;grid-template-columns:250px 250px;justify-content:start;list-style:none;margin:0 0 20px;padding:0}.article-content--vigilkids .toc-list-grid li{color:#000;line-height:24px;padding-left:14px;position:relative}.article-content--vigilkids .toc-list-grid li:before{background:#24c790;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:10px;width:5px}.article-content--vigilkids .toc-list-ordered{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0;padding:0 0 0 16px}.article-content--vigilkids .toc-list-ordered li{color:#000;font-size:14px;line-height:21px}.article-content--vigilkids .h3-num-circle,.article-content--vigilkids .h3-num-ring,.article-content--vigilkids .h3-num-rounded,.article-content--vigilkids .h3-num-square,.article-content--vigilkids .h3-num-triangle,.article-content--vigilkids .h3-tips-badge{color:#121212;font-size:18px;font-weight:600;line-height:normal;margin-top:20px}.article-content--vigilkids .h3-num-circle .h3-icon{border-radius:50%;height:24px;min-width:24px;width:24px}.article-content--vigilkids .h3-num-circle .h3-icon,.article-content--vigilkids .h3-tips-badge .h3-badge{align-items:center;background:#1fb04f;color:#fff;display:inline-flex;font-size:14px;font-weight:700;justify-content:center;margin-right:8px}.article-content--vigilkids .h3-tips-badge .h3-badge{border-radius:20px;padding:2px 8px;white-space:nowrap}.article-content--vigilkids .h3-num-triangle .h3-icon{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDIxIDI0Ij48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNOS4yNzYuM2EyLjIzIDIuMjMgMCAwIDEgMi4yMzMgMGw4LjE2IDQuNzFhMi4yMyAyLjIzIDAgMCAxIDEuMTE2IDEuOTM0djkuNDIyYzAgLjc5Ny0uNDI2IDEuNTM0LTEuMTE3IDEuOTMzbC04LjE2IDQuNzExYTIuMjMgMi4yMyAwIDAgMS0yLjIzMiAwbC04LjE2LTQuNzFBMi4yMyAyLjIzIDAgMCAxIDAgMTYuMzY1VjYuOTQ0YzAtLjc5OC40MjYtMS41MzUgMS4xMTYtMS45MzR6Ii8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iLjM5IiB4Mj0iMTAuMzkiIHkxPSIzLjY1IiB5Mj0iMjMuNjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDRlMjc4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGFhNjNlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+") no-repeat 50%;background-size:contain;font-size:12px}.article-content--vigilkids .h3-num-square .h3-icon,.article-content--vigilkids .h3-num-triangle .h3-icon{align-items:center;color:#fff;display:inline-flex;font-weight:700;height:24px;justify-content:center;margin-right:8px;min-width:24px;width:24px}.article-content--vigilkids .h3-num-square .h3-icon{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZjRhMjA5IiBkPSJNMCAxMEMwIDQuNDc3IDQuNDc3IDAgMTAgMGg0YzUuNTIzIDAgMTAgNC40NzcgMTAgMTB2MTBhNCA0IDAgMCAxLTQgNEgxMEM0LjQ3NyAyNCAwIDE5LjUyMyAwIDE0eiIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;font-size:14px}.article-content--vigilkids .h3-num-rounded .h3-icon{align-items:center;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIyMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMzIDIyIj48cGF0aCBmaWxsPSIjZDM1YmZmIiBkPSJNMCA0YTQgNCAwIDAgMSA0LTRoMjQuODM3YzIuODk2IDAgNC44MzMgMi45ODMgMy42NTMgNS42M2wtNi4yNDQgMTRBNCA0IDAgMCAxIDIyLjU5NCAyMkg0YTQgNCAwIDAgMS00LTR6Ii8+PC9zdmc+") no-repeat 50%;background-size:contain;color:#fff;display:inline-flex;font-size:14px;font-weight:700;height:22px;justify-content:center;margin-right:8px;min-width:33px;padding-right:4px;width:33px}.article-content--vigilkids .h3-num-ring .h3-icon{align-items:center;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIyNyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI3IDI3Ij48cGF0aCBzdHJva2U9IiMxZmIwNGYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEzLjUgMjYuNWM3LjE4IDAgMTMtNS44MiAxMy0xM3MtNS44Mi0xMy0xMy0xM0M4LjE3LjUgMy41OSAzLjcwNyAxLjU4MyA4LjI5NkExMyAxMyAwIDAgMCAuNSAxMy41YzAgMS41Mi4yNiAyLjk3OC43NCA0LjMzMyIvPjxjaXJjbGUgY3g9IjEzLjUiIGN5PSIxMy41IiByPSIxMyIgZmlsbD0iIzFmYjA0ZiIgZmlsbC1vcGFjaXR5PSIuMjkiLz48Y2lyY2xlIGN4PSIxMy41IiBjeT0iMTMuNSIgcj0iMTAuNSIgZmlsbD0iIzFmYjA0ZiIgc3Ryb2tlPSIjMWZiMDRmIi8+PGNpcmNsZSBjeD0iMS4yNCIgY3k9IjE3LjgzIiByPSIyIiBmaWxsPSIjMWZiMDRmIi8+PC9zdmc+") no-repeat 50%;background-size:contain;color:#fff;display:inline-flex;font-size:17px;font-weight:500;height:27px;justify-content:center;line-height:21px;margin-right:8px;min-width:27px;width:27px}.article-content--vigilkids .article-recommend{margin-top:50px;overflow-x:hidden;overflow-y:visible}.article-content--vigilkids .article-recommend-title{font-size:32px;font-weight:700;line-height:48px;margin-bottom:30px;text-align:center}.article-content--vigilkids .recommend-grid{display:grid;gap:20px;grid-template-columns:repeat(3,320px);justify-content:center}.article-content--vigilkids .recommend-card{background:#fff;border-radius:12px;box-shadow:0 0 22px -7px rgba(42,52,67,.19),0 8px 16px -14px rgba(42,52,67,.06),0 18px 28px -24px rgba(42,52,67,.035);display:block;padding:10px;text-decoration:none}.article-content--vigilkids .recommend-card-image{border-radius:12px;height:177px;overflow:hidden;width:300px}.article-content--vigilkids .recommend-card-image img{height:100%;margin:0;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--vigilkids .recommend-card-title{color:#000;font-size:14px;font-weight:700;line-height:16px;margin:14px 0 0}.article-content--vigilkids .recommend-card-desc{font-size:12px;line-height:150%;margin:4px 0 0}.article-content--vigilkids .recommend-dots{align-items:center;display:flex;gap:10px;justify-content:center;margin-top:20px}.article-content--vigilkids .recommend-dot{background:#b8b8b8;border-radius:40px;height:8px;width:8px}.article-content--vigilkids .recommend-dot.active{background:#24c790;width:30px}.article-content--vigilkids .retention-banner{background:linear-gradient(90deg,#ceffeb,#ecfff6 26.7%,#cafdd6);box-sizing:border-box;margin:20px 0;max-width:100%;min-height:100px;padding:16px 50px 16px 24px;position:relative}.article-content--vigilkids .retention-banner-inner{align-items:center;display:flex;gap:16px;height:100%;margin:0 auto;width:-moz-fit-content;width:fit-content}.article-content--vigilkids img.retention-banner-img{height:76px;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:120px}.article-content--vigilkids .retention-banner-text{color:#000;font-size:12px;font-weight:600;line-height:18px;margin:0}.article-content--vigilkids .retention-highlight{color:#ff3564;font-weight:700}.article-content--vigilkids a.retention-banner-btn{align-items:center;background:hsl(var(--color-primary-var));border-radius:6px;color:#fff;display:inline-flex;font-family:Roboto,sans-serif;font-size:12px;font-weight:500;height:30px;justify-content:center;margin-top:12px;text-decoration:none;transition:all .3s ease;width:121px}.article-content--vigilkids a.retention-banner-btn:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .retention-banner-close{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;justify-content:center;line-height:0;padding:0;position:absolute;right:16px;top:10px;z-index:1}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-checklist,.article-content--vigilkids .product-card-compact,.article-content--vigilkids .product-card-features,.article-content--vigilkids .product-card-image,.article-content--vigilkids .product-card-split,.article-content--vigilkids .product-card-vertical{border-radius:9px;box-sizing:border-box;margin-bottom:20px;max-width:100%}.article-content--vigilkids .product-card-content{max-width:55%}.article-content--vigilkids .product-card{min-height:120px;padding:24px 30px}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-compact{align-items:center;background:linear-gradient(90deg,#e5ffed,#dbffee) padding-box,linear-gradient(90deg,#b5ffce,#98e8c2) border-box;border:1px solid transparent;display:flex;gap:20px;justify-content:space-between}.article-content--vigilkids .product-card-compact{min-height:100px;padding:20px 30px}.article-content--vigilkids .product-card-image{align-items:center;background:linear-gradient(90deg,#e5ffed,#dbffee) padding-box,linear-gradient(90deg,#b5ffce,#98e8c2) border-box;border:1px solid transparent;display:flex;min-height:170px;padding:30px 30px 30px 5px}.article-content--vigilkids .product-card-image img{flex-shrink:0;height:109px;margin-left:25px;margin-right:49px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-image .action-buttons{margin-top:20px}.article-content--vigilkids .product-card-features{align-items:center;background:#eafff8;border:1px solid #a7dfcc;display:flex;min-height:239px;padding:30px 30px 30px 0;position:relative}.article-content--vigilkids .product-card-features img{flex-shrink:0;height:136px;margin-left:25px;margin-right:14px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-features>div{padding-left:35px}.article-content--vigilkids .product-card-features>div>.product-name{font-size:18px;line-height:27px}.article-content--vigilkids .product-card-features .action-buttons{margin-top:20px}.article-content--vigilkids .product-card-split{align-items:center;background:linear-gradient(91.3deg,#d3fff5 -.99%,#cee8ff 103.74%) padding-box,linear-gradient(90deg,#84ffe5,#9dd5ff) border-box;border:1px solid transparent;border-radius:9px;display:flex;gap:54px;margin-top:26px;min-height:239px;padding:30px 30px 30px 41px;position:relative}.article-content--vigilkids .product-card-split>img{flex-shrink:0;height:160px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-split>div{padding-left:15px;padding-top:10px}.article-content--vigilkids .product-card-split .split-product-name{display:none;margin:0 0 12px}.article-content--vigilkids .product-card-split .feature-dot-list{margin:0}.article-content--vigilkids .product-card-split .action-buttons{margin-top:30px}.article-content--vigilkids .product-card-split:after,.article-content--vigilkids .product-card-split:before{background:#fff;content:"";height:14px;left:213px;position:absolute;width:28px;z-index:2}.article-content--vigilkids .product-card-split:before{border-radius:0 0 14px 14px;top:-1px}.article-content--vigilkids .product-card-split:after{border-radius:14px 14px 0 0;bottom:-1px}.article-content--vigilkids .product-card-vertical{background:#eafff8;border:1px solid #a7dfcc;border-radius:9px;display:flex;margin-top:100px;min-height:267px;position:relative}.article-content--vigilkids .product-card-vertical .card-vertical-left{box-sizing:border-box;flex-shrink:0;padding:20px 30px 24px;width:531px}.article-content--vigilkids .product-card-vertical .card-vertical-header{align-items:center;display:flex;gap:10px;margin-bottom:-4px}.article-content--vigilkids .product-card-vertical .card-vertical-header img{flex-shrink:0;height:160px;margin-left:-15px;margin-top:-80px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-vertical .card-vertical-header .product-name{transform:translate(-70px,-20px)}.article-content--vigilkids .product-card-vertical .card-vertical-divider{border-left:1px dashed #24c790;margin:2px 0;width:0}.article-content--vigilkids .product-card-vertical .card-vertical-right{align-items:center;display:flex;flex:1;flex-direction:column;flex-shrink:0;gap:25px;justify-content:center;padding:0 40px}.article-content--vigilkids .product-card-vertical .dashed-line{border-left:1px dashed #24c790;height:262px;left:531px;position:absolute;top:2px;width:0}.article-content--vigilkids .product-card-checklist{background:#f0f6ff;border:1px solid #dae9ff;border-radius:9px;min-height:387px;padding:30px 20px}.article-content--vigilkids .product-card-checklist .product-name{margin-bottom:15px}.article-content--vigilkids .product-card-checklist .action-buttons{justify-content:center;margin-top:30px}.article-content--vigilkids p.product-name{font-size:20px;font-weight:600;line-height:30px;margin:0}.article-content--vigilkids .product-desc{font-size:14px;font-weight:400;line-height:140%;margin:6px 0 0}.article-content--vigilkids .action-buttons{display:flex;gap:15px}.article-content--vigilkids .feature-dot-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:10px 0 0;padding:0}.article-content--vigilkids .feature-dot-list li{font-size:14px;line-height:140%;padding-left:14px;position:relative}.article-content--vigilkids .feature-dot-list li:before{background:#24c790;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:7px;width:5px}.article-content--vigilkids .feature-check-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.article-content--vigilkids .feature-check-list li{font-size:14px;line-height:140%;padding-left:24px;position:relative}.article-content--vigilkids .feature-check-list li:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%2324c790' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 7.5 3 3 6-6'/%3E%3C/svg%3E") no-repeat 50%;content:"";height:15px;left:0;position:absolute;top:3px;width:15px}.article-content--vigilkids .product-feature-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}.article-content--vigilkids .product-feature-list li{font-size:14px;line-height:140%;padding-left:24px;position:relative}.article-content--vigilkids .product-feature-list li:before{background:#24c790 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none' viewBox='0 0 8 7'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 3.5 2 2L7 1'/%3E%3C/svg%3E") no-repeat 50%;background-size:8px 7px;border-radius:50%;content:"";height:14px;left:0;position:absolute;top:3px;width:14px}.article-content--vigilkids .sub-section-title{font-weight:600;line-height:24px}.article-content--vigilkids a.action-btn-primary{align-items:center;background:hsl(var(--color-primary-var));border-radius:8px;color:#fff;display:inline-flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;height:42px;justify-content:center;text-decoration:none;transition:all .3s ease;width:154px}.article-content--vigilkids a.action-btn-primary:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids a.action-btn-outline{align-items:center;border:1px solid hsl(var(--color-primary-var));border-radius:8px;color:hsl(var(--color-primary-var));display:inline-flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:700;height:42px;justify-content:center;text-decoration:none;transition:all .3s ease;width:154px}.article-content--vigilkids a.action-btn-outline:hover{background:hsl(var(--color-primary-var));color:#fff}.article-content--vigilkids .product-info-banner{align-items:center;background:linear-gradient(90deg,#d1ffde,#befade);border-radius:9px;box-sizing:border-box;display:flex;gap:20px;margin:30px 0 20px;max-width:100%;padding:20px 52px 20px 30px}.article-content--vigilkids .product-info-banner img.banner-logo{align-self:flex-start;border-radius:8px;flex-shrink:0;height:46px;margin:0;max-width:none;width:46px}.article-content--vigilkids .product-info-banner .banner-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.article-content--vigilkids .product-info-banner .banner-title{font-size:18px;font-weight:600;line-height:27px;margin:0}.article-content--vigilkids .product-info-banner .banner-desc{font-size:14px;font-weight:400;line-height:140%;margin:0}.article-content--vigilkids .product-info-banner .banner-platform-row{align-items:center;display:flex;gap:8px;margin-top:8px}.article-content--vigilkids .product-info-banner .banner-available{color:#666;flex-shrink:0;font-size:10px;line-height:16px}.article-content--vigilkids .product-info-banner .banner-platforms{align-items:center;display:flex}.article-content--vigilkids .product-info-banner .banner-platforms img,.article-content--vigilkids .product-info-banner img.banner-platforms-icons{height:20px;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:auto}.article-content--vigilkids .product-info-banner .product-info-banner-btn{align-items:center;background:hsl(var(--color-primary-var));border-radius:8px;display:flex;flex-shrink:0;gap:0;height:54px;justify-content:center;text-decoration:none;transition:all .3s ease;width:180px}.article-content--vigilkids .product-info-banner .product-info-banner-btn:before{content:none}.article-content--vigilkids .product-info-banner .product-info-banner-btn span{color:#fff;font-size:18px;font-weight:500;line-height:21px}.article-content--vigilkids .product-info-banner-btn:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .tips-box{background:#fffae1;border:1px solid #fff3a2;border-radius:5px;box-sizing:border-box;margin-bottom:40px;max-width:100%;min-height:121px;padding:40px 16px 16px;position:relative}.article-content--vigilkids .tips-box-label{align-items:flex-end;background:#f99f19;border-radius:5px 5px 5px 0;display:inline-flex;gap:4px;height:24px;left:-1px;padding:0 8px;position:absolute;top:-1px}.article-content--vigilkids .tips-box-label img{height:12px;margin-bottom:6px;width:12px}.article-content--vigilkids .tips-box-label span{color:#fff;font-size:14px;font-weight:500;line-height:24px}.article-content--vigilkids .note-box{background:#eaf7f1;border-radius:5px;box-sizing:border-box;margin-bottom:20px;max-width:100%;min-height:121px;padding:36px 16px 16px;position:relative}.article-content--vigilkids .note-box-label{align-items:flex-end;background:#24c790;border-radius:5px 0 5px 0;display:inline-flex;gap:4px;height:22px;left:0;padding:0 6px;position:absolute;top:0}.article-content--vigilkids .note-box-label img{height:12px;margin-bottom:5px;width:12px}.article-content--vigilkids .note-box-label span{color:#fff;font-size:13px;font-weight:500;line-height:22px}.article-content--vigilkids .note-box.note-warning{background:#fff8f0;border-color:#f0d8a8}.article-content--vigilkids .note-box.note-warning .note-box-label{background:#ff9800}.article-content--vigilkids .note-box-content,.article-content--vigilkids .tips-box-content{margin:0}.article-content--vigilkids .top-banner{align-items:center;background:linear-gradient(270.88deg,rgba(145,248,159,.8) .75%,rgba(213,255,229,.8) 28.3%,rgba(209,255,234,.8) 67.73%,rgba(167,255,218,.8) 99.99%);border-radius:10px;box-sizing:border-box;display:flex;gap:24px;margin:20px 0;max-width:100%;padding:20px 126px 20px 117px;position:relative}.article-content--vigilkids .top-banner-info{flex:1;min-width:0}.article-content--vigilkids img.top-banner-header{display:block;height:32px;margin:0 0 8px;max-width:none;width:auto}.article-content--vigilkids .top-banner-desc{color:#000;font-weight:500;line-height:24px;margin:0 0 10px}.article-content--vigilkids .top-banner-features{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0 auto 20px;padding:0}.article-content--vigilkids .top-banner-features li{color:#000;font-family:Poppins,sans-serif;font-size:13px;line-height:20px;padding-left:14px;position:relative}.article-content--vigilkids .top-banner-features li:before{background:#009663;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:8px;width:5px}.article-content--vigilkids img.top-banner-mockup{flex-shrink:0;height:auto;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:267px}.article-content--vigilkids .top-banner-section-title{margin-bottom:0}@media (max-width:1024px) and (min-width:769px){.article-content--vigilkids .recommend-grid{grid-template-columns:repeat(2,minmax(0,320px))}}@media (max-width:1024px){.article-content--vigilkids{overflow-x:hidden}.article-content--vigilkids .toc-list-grid{display:flex;flex-direction:column;gap:5px;grid-template-columns:none;justify-content:flex-start}.article-content--vigilkids .toc-list-grid li{width:100%}.article-content--vigilkids .article-recommend .recommend-grid{box-sizing:border-box;display:flex;grid-template-columns:none;justify-content:flex-start;max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;width:100%;-webkit-overflow-scrolling:touch;align-items:flex-start;gap:24px;margin:0;padding:6px 12px 22px;scroll-padding-left:12px;scroll-padding-right:12px;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;-ms-overflow-style:none}.article-content--vigilkids .article-recommend .recommend-card{background:#fff;border-radius:12px;box-shadow:0 2px 10px -7px rgba(42,52,67,.18),0 10px 22px -18px rgba(42,52,67,.1),0 18px 30px -26px rgba(42,52,67,.06);box-sizing:border-box;flex:0 0 100%;isolation:isolate;margin:0;max-width:100%;min-width:100%;overflow:visible;padding:10px;position:relative;scroll-snap-align:start}.article-content--vigilkids .recommend-card .recommend-card-image{aspect-ratio:300/177;height:auto;width:100%}.article-content--vigilkids .recommend-card .recommend-card-image img{display:block}.article-content--vigilkids .recommend-card .recommend-card-title{font-size:14px;line-height:16px;margin:12px 0 0;padding:0}.article-content--vigilkids .recommend-card .recommend-card-desc{font-size:12px;line-height:18px;margin:4px 0 10px;padding:0}.article-content--vigilkids .recommend-dots{gap:8px;margin-top:0}.article-content--vigilkids .recommend-dot.active{width:24px}.article-content--vigilkids .retention-banner{box-sizing:border-box;height:auto;padding:18px 14px 16px;width:100%}.article-content--vigilkids .retention-banner-inner{flex-direction:column;gap:12px;text-align:center}.article-content--vigilkids img.retention-banner-img{height:auto;width:98px}.article-content--vigilkids .retention-banner-text{font-size:12px;line-height:18px;margin:0 auto;max-width:268px}.article-content--vigilkids a.retention-banner-btn{border-radius:8px;font-size:12px;height:38px;line-height:14px;margin-top:14px;width:176px}.article-content--vigilkids .retention-banner-close{height:24px;right:10px;top:10px;width:24px}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-compact{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;text-align:center;width:100%}.article-content--vigilkids .product-card .product-card-content,.article-content--vigilkids .product-card-compact .product-card-content{max-width:100%;width:100%}.article-content--vigilkids .product-card-image{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;position:static;text-align:center;width:100%}.article-content--vigilkids .product-card-image>div{width:100%}.article-content--vigilkids .product-card-features{margin-top:30px}.article-content--vigilkids .product-card-features,.article-content--vigilkids .product-card-split,.article-content--vigilkids .product-card-vertical{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;position:static;width:100%}.article-content--vigilkids .product-card-vertical{margin-top:56px;overflow:visible;padding-top:0}.article-content--vigilkids .product-card-features img,.article-content--vigilkids .product-card-image img,.article-content--vigilkids .product-card-split img,.article-content--vigilkids .product-card-vertical img{align-self:center;height:112px;margin-bottom:8px;margin-left:0;margin-right:0;position:static}.article-content--vigilkids .product-card-split>img{height:115px;margin-bottom:6px;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;width:127px}.article-content--vigilkids .product-card-features>div,.article-content--vigilkids .product-card-split>div,.article-content--vigilkids .product-card-vertical>div{padding-left:0;padding-top:0;position:static;width:100%}.article-content--vigilkids .product-card-split .split-product-name{display:block;margin:0 0 10px;text-align:center}.article-content--vigilkids .product-card-features .product-name,.article-content--vigilkids .product-card-image .product-name,.article-content--vigilkids .product-card-vertical .product-name{font-size:18px;line-height:27px;text-align:center}.article-content--vigilkids .product-card-split:after,.article-content--vigilkids .product-card-split:before{display:none}.article-content--vigilkids .product-card-vertical .card-vertical-left{padding:0;width:100%}.article-content--vigilkids .product-card-vertical .card-vertical-header{flex-direction:column;gap:0;margin-bottom:8px;text-align:center}.article-content--vigilkids .product-card-vertical .card-vertical-header img{height:132px;margin-bottom:4px;margin-left:0;margin-top:-44px}.article-content--vigilkids .product-card-vertical .card-vertical-header .product-name{font-size:18px;line-height:27px;max-width:100%;transform:none}.article-content--vigilkids .product-card-vertical .card-vertical-divider{display:none}.article-content--vigilkids .product-card-vertical .card-vertical-right{flex-direction:row;gap:12px;justify-content:center;padding:0;width:100%}.article-content--vigilkids .product-card-vertical .dashed-line{display:none}.article-content--vigilkids .product-card-vertical .action-buttons{flex-direction:column;gap:10px}.article-content--vigilkids .action-buttons{flex-wrap:nowrap;gap:12px;justify-content:center;width:100%}.article-content--vigilkids .product-card-checklist{box-sizing:border-box;padding:20px 16px;width:100%}.article-content--vigilkids p.product-name{font-size:18px;line-height:27px}.article-content--vigilkids .feature-check-list li,.article-content--vigilkids .feature-dot-list li,.article-content--vigilkids .product-desc,.article-content--vigilkids .product-feature-list li{font-size:12px;line-height:17px}.article-content--vigilkids .sub-section-title{font-size:14px;line-height:21px}.article-content--vigilkids .product-info-banner{box-sizing:border-box;display:block;height:212px;margin:30px 0 20px;max-width:100%;padding:0;position:relative;text-align:left;width:100%}.article-content--vigilkids .product-info-banner img.banner-logo{height:42px;left:calc(50% - 101px);margin:0;position:absolute;top:30px;width:42px}.article-content--vigilkids .product-info-banner .banner-body{display:block;gap:0;left:calc(50% - 52px);position:absolute;top:31px;width:153px}.article-content--vigilkids .product-info-banner .banner-title{font-size:16px;line-height:24px}.article-content--vigilkids .product-info-banner .banner-desc{font-size:12px;line-height:17px}.article-content--vigilkids .product-info-banner .banner-platform-row{align-items:center;display:flex;gap:12px;justify-content:flex-start;margin:20px 0 0;position:static;width:226px}.article-content--vigilkids .product-info-banner .banner-available{font-size:10px;line-height:15px}.article-content--vigilkids .product-info-banner .banner-platforms img{height:16px}.article-content--vigilkids .product-info-banner .product-info-banner-btn{height:40px;left:50%;position:absolute;top:128px;transform:translateX(-50%);width:154px}.article-content--vigilkids .product-info-banner .product-info-banner-btn:before{content:none}.article-content--vigilkids .product-info-banner .product-info-banner-btn span{font-size:14px;line-height:16px}.article-content--vigilkids .note-box,.article-content--vigilkids .tips-box{box-sizing:border-box;padding:34px 14px 14px;width:100%}.article-content--vigilkids .note-box-content,.article-content--vigilkids .tips-box-content{font-size:14px;line-height:20px}.article-content--vigilkids .top-banner{align-items:center;flex-direction:column;gap:0;min-height:0;padding:30px 14px;width:100%}.article-content--vigilkids img.top-banner-header{height:32px;margin:0 auto 10px;width:auto}.article-content--vigilkids .top-banner-desc{font-size:14px;line-height:21px;margin-bottom:10px;text-align:center}.article-content--vigilkids .top-banner-features{gap:8px;margin:0 auto 14px;max-width:100%;width:100%}.article-content--vigilkids .top-banner-features li{font-size:12px;line-height:18px;padding-left:11px}.article-content--vigilkids .top-banner-features li:before{top:6px}.article-content--vigilkids img.top-banner-mockup{display:none}.article-content--vigilkids a.action-btn-outline,.article-content--vigilkids a.action-btn-primary{font-size:14px;height:40px;line-height:16px;min-width:0}}@media (max-width:768px){.article-content--vigilkids li{font-size:14px}.article-content--vigilkids .section-intro{font-size:14px;line-height:21px}.article-content--vigilkids .section-intro-list{margin:10px 0;padding-left:0}.article-content--vigilkids .section-intro-list li{font-size:12px;line-height:21px}.article-content--vigilkids .h3-num-circle,.article-content--vigilkids .h3-num-ring,.article-content--vigilkids .h3-num-rounded,.article-content--vigilkids .h3-num-square,.article-content--vigilkids .h3-num-triangle,.article-content--vigilkids .h3-tips-badge{font-size:16px}.article-content--vigilkids .article-recommend-title{font-size:24px;line-height:36px}.article-content--vigilkids .feature-check-list,.article-content--vigilkids .feature-dot-list{gap:10px}}.article-content--vigilkids [id]{scroll-margin-top:80px}
|
|
1
|
+
@import "../utilities.css";.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{position:relative;width:-moz-fit-content;width:fit-content}.article-content--vigilkids .hot-icon{display:inline-block;margin-left:4px;vertical-align:middle}.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;width:100%}.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,.contrast-table thead{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 .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 .article-feature-list li,.article-content--vigilkids .disc-list li{font-size:14px}.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 .highlight-paragraph{font-weight:500;line-height:26px}.article-content--vigilkids .highlight-red{color:#f40d00}.article-content--vigilkids .highlight-orange{color:#ff8b07}.article-content--vigilkids .highlight-green{color:#009663}.article-content--vigilkids .section-intro{font-size:20px;line-height:30px}.article-content--vigilkids .section-intro-bold{font-weight:700}.article-content--vigilkids .section-intro-list{font-weight:300;line-height:24px;list-style:none;padding-left:20px}.article-content--vigilkids .section-intro-list li{margin-bottom:8px;padding-left:16px;position:relative}.article-content--vigilkids .section-intro-list li:before{background:#4d4d4d;border-radius:50%;content:"";height:4px;left:0;position:absolute;top:10px;width:4px}.article-content--vigilkids .toc-title{color:#000;font-size:18px;font-weight:600;line-height:27px;margin:0 0 10px}.article-content--vigilkids .toc-list-dot{display:flex;flex-direction:column;gap:5px;list-style:none;margin:10px 0 20px;padding:0}.article-content--vigilkids .toc-list-dot li{line-height:24px;padding-left:16px;position:relative}.article-content--vigilkids .toc-list-dot li:before{background:#4d4d4d;border-radius:50%;content:"";height:4px;left:0;position:absolute;top:10px;width:4px}.article-content--vigilkids .toc-list-check{display:flex;flex-direction:column;gap:5px;list-style:none;margin:10px 0 20px;padding:0}.article-content--vigilkids .toc-list-check li{color:#000;line-height:24px;padding-left:24px;position:relative}.article-content--vigilkids .toc-list-check li:before{background:#24c790 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' fill='none' viewBox='0 0 7 6'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 3 1.5 1.5L6 1'/%3E%3C/svg%3E") no-repeat 50%;background-size:7px 6px;border-radius:50%;content:"";height:12px;left:0;position:absolute;top:6px;width:12px}.article-content--vigilkids .toc-list-grid{display:grid;gap:5px 40px;grid-template-columns:250px 250px;justify-content:start;list-style:none;margin:10px 0 20px;padding:0}.article-content--vigilkids .toc-list-grid li{color:#000;line-height:24px;padding-left:14px;position:relative}.article-content--vigilkids .toc-list-grid li:before{background:#24c790;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:10px;width:5px}.article-content--vigilkids .toc-list-ordered{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0;padding:0 0 0 16px}.article-content--vigilkids .toc-list-ordered li{color:#000;font-size:14px;line-height:21px}.article-content--vigilkids .h3-num-circle,.article-content--vigilkids .h3-num-ring,.article-content--vigilkids .h3-num-rounded,.article-content--vigilkids .h3-num-square,.article-content--vigilkids .h3-num-triangle,.article-content--vigilkids .h3-tips-badge{color:#121212;font-size:18px;font-weight:600;line-height:normal;margin-top:20px}.article-content--vigilkids .h3-num-circle .h3-icon{border-radius:50%;height:24px;min-width:24px;width:24px}.article-content--vigilkids .h3-num-circle .h3-icon,.article-content--vigilkids .h3-tips-badge .h3-badge{align-items:center;background:#1fb04f;color:#fff;display:inline-flex;font-size:14px;font-weight:700;justify-content:center;margin-right:8px}.article-content--vigilkids .h3-tips-badge .h3-badge{border-radius:20px;padding:2px 8px;white-space:nowrap}.article-content--vigilkids .h3-num-triangle .h3-icon{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDIxIDI0Ij48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNOS4yNzYuM2EyLjIzIDIuMjMgMCAwIDEgMi4yMzMgMGw4LjE2IDQuNzFhMi4yMyAyLjIzIDAgMCAxIDEuMTE2IDEuOTM0djkuNDIyYzAgLjc5Ny0uNDI2IDEuNTM0LTEuMTE3IDEuOTMzbC04LjE2IDQuNzExYTIuMjMgMi4yMyAwIDAgMS0yLjIzMiAwbC04LjE2LTQuNzFBMi4yMyAyLjIzIDAgMCAxIDAgMTYuMzY1VjYuOTQ0YzAtLjc5OC40MjYtMS41MzUgMS4xMTYtMS45MzR6Ii8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iLjM5IiB4Mj0iMTAuMzkiIHkxPSIzLjY1IiB5Mj0iMjMuNjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDRlMjc4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGFhNjNlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+") no-repeat 50%;background-size:contain;font-size:12px}.article-content--vigilkids .h3-num-square .h3-icon,.article-content--vigilkids .h3-num-triangle .h3-icon{align-items:center;color:#fff;display:inline-flex;font-weight:700;height:24px;justify-content:center;margin-right:8px;min-width:24px;width:24px}.article-content--vigilkids .h3-num-square .h3-icon{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZjRhMjA5IiBkPSJNMCAxMEMwIDQuNDc3IDQuNDc3IDAgMTAgMGg0YzUuNTIzIDAgMTAgNC40NzcgMTAgMTB2MTBhNCA0IDAgMCAxLTQgNEgxMEM0LjQ3NyAyNCAwIDE5LjUyMyAwIDE0eiIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;font-size:14px}.article-content--vigilkids .h3-num-rounded .h3-icon{align-items:center;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIyMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMzIDIyIj48cGF0aCBmaWxsPSIjZDM1YmZmIiBkPSJNMCA0YTQgNCAwIDAgMSA0LTRoMjQuODM3YzIuODk2IDAgNC44MzMgMi45ODMgMy42NTMgNS42M2wtNi4yNDQgMTRBNCA0IDAgMCAxIDIyLjU5NCAyMkg0YTQgNCAwIDAgMS00LTR6Ii8+PC9zdmc+") no-repeat 50%;background-size:contain;color:#fff;display:inline-flex;font-size:14px;font-weight:700;height:22px;justify-content:center;margin-right:8px;min-width:33px;padding-right:4px;width:33px}.article-content--vigilkids .h3-num-ring .h3-icon{align-items:center;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIyNyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI3IDI3Ij48cGF0aCBzdHJva2U9IiMxZmIwNGYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEzLjUgMjYuNWM3LjE4IDAgMTMtNS44MiAxMy0xM3MtNS44Mi0xMy0xMy0xM0M4LjE3LjUgMy41OSAzLjcwNyAxLjU4MyA4LjI5NkExMyAxMyAwIDAgMCAuNSAxMy41YzAgMS41Mi4yNiAyLjk3OC43NCA0LjMzMyIvPjxjaXJjbGUgY3g9IjEzLjUiIGN5PSIxMy41IiByPSIxMyIgZmlsbD0iIzFmYjA0ZiIgZmlsbC1vcGFjaXR5PSIuMjkiLz48Y2lyY2xlIGN4PSIxMy41IiBjeT0iMTMuNSIgcj0iMTAuNSIgZmlsbD0iIzFmYjA0ZiIgc3Ryb2tlPSIjMWZiMDRmIi8+PGNpcmNsZSBjeD0iMS4yNCIgY3k9IjE3LjgzIiByPSIyIiBmaWxsPSIjMWZiMDRmIi8+PC9zdmc+") no-repeat 50%;background-size:contain;color:#fff;display:inline-flex;font-size:17px;font-weight:500;height:27px;justify-content:center;line-height:21px;margin-right:8px;min-width:27px;width:27px}.article-content--vigilkids .article-recommend{margin-top:50px;overflow-x:hidden;overflow-y:visible}.article-content--vigilkids .article-recommend-title{background:none;font-size:32px;font-weight:700;line-height:48px;margin-bottom:30px;text-align:center}.article-content--vigilkids .article-recommend-title:before{display:none}.article-content--vigilkids .recommend-grid{display:grid;gap:20px;grid-template-columns:repeat(3,320px);justify-content:center}@media (min-width:1025px){.article-content--vigilkids .article-recommend[data-carousel-active="1"] .recommend-grid{align-items:stretch;display:flex;grid-template-columns:none;justify-content:flex-start;max-width:100%;overflow:hidden;width:100%}.article-content--vigilkids .article-recommend[data-carousel-active="1"] .recommend-card{box-sizing:border-box;flex:0 0 calc(33.33333% - 13.33333px);max-width:calc(33.33333% - 13.33333px);min-width:calc(33.33333% - 13.33333px)}.article-content--vigilkids .article-recommend[data-carousel-active="1"] .recommend-card-image{aspect-ratio:300/177;height:auto;width:100%}.article-content--vigilkids .article-recommend[data-carousel-active="1"] .recommend-card-image img{display:block}}.article-content--vigilkids .recommend-card{background:#fff;border-radius:12px;box-shadow:0 0 22px -7px rgba(42,52,67,.19),0 8px 16px -14px rgba(42,52,67,.06),0 18px 28px -24px rgba(42,52,67,.035);display:block;padding:10px;text-decoration:none}.article-content--vigilkids .recommend-card-image{border-radius:12px;height:177px;overflow:hidden;width:300px}.article-content--vigilkids .recommend-card-image img{height:100%;margin:0;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--vigilkids .recommend-card-title{color:#000;font-size:14px;font-weight:700;line-height:16px;margin:14px 0 0}.article-content--vigilkids .recommend-card-desc{font-size:12px;line-height:150%;margin:4px 0 0}.article-content--vigilkids .recommend-dots{align-items:center;display:none;gap:10px;justify-content:center;margin-top:20px}.article-content--vigilkids .article-recommend[data-carousel-active="1"] .recommend-dots{display:flex}.article-content--vigilkids .recommend-dot{background:#b8b8b8;border-radius:40px;height:8px;width:8px}.article-content--vigilkids .recommend-dot.active{background:#24c790;width:30px}.article-content--vigilkids .retention-banner{background:linear-gradient(90deg,#ceffeb,#ecfff6 26.7%,#cafdd6);box-sizing:border-box;margin:20px 0;max-width:100%;min-height:100px;padding:16px 50px 16px 24px;position:relative}.article-content--vigilkids .retention-banner-inner{align-items:center;display:flex;gap:16px;height:100%;margin:0 auto;width:-moz-fit-content;width:fit-content}.article-content--vigilkids img.retention-banner-img{height:76px;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:120px}.article-content--vigilkids .retention-banner-text{color:#000;font-size:12px;font-weight:600;line-height:18px;margin:0}.article-content--vigilkids .retention-highlight{color:#ff3564;font-weight:700}.article-content--vigilkids a.retention-banner-btn{align-items:center;background:hsl(var(--color-primary-var));border-radius:6px;color:#fff;display:inline-flex;font-family:Roboto,sans-serif;font-size:12px;font-weight:500;height:30px;justify-content:center;margin-top:12px;text-decoration:none;transition:all .3s ease;width:121px}.article-content--vigilkids a.retention-banner-btn:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .retention-banner-close{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;justify-content:center;line-height:0;padding:0;position:absolute;right:16px;top:10px;z-index:1}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-checklist,.article-content--vigilkids .product-card-compact,.article-content--vigilkids .product-card-features,.article-content--vigilkids .product-card-image,.article-content--vigilkids .product-card-split,.article-content--vigilkids .product-card-vertical{border-radius:9px;box-sizing:border-box;margin-bottom:20px;max-width:100%}.article-content--vigilkids .product-card-content{max-width:55%}.article-content--vigilkids .product-card{min-height:120px;padding:24px 30px}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-compact{align-items:center;background:linear-gradient(90deg,#e5ffed,#dbffee) padding-box,linear-gradient(90deg,#b5ffce,#98e8c2) border-box;border:1px solid transparent;display:flex;gap:20px;justify-content:space-between}.article-content--vigilkids .product-card-compact{min-height:100px;padding:20px 30px}.article-content--vigilkids .product-card-image{align-items:center;background:linear-gradient(90deg,#e5ffed,#dbffee) padding-box,linear-gradient(90deg,#b5ffce,#98e8c2) border-box;border:1px solid transparent;display:flex;min-height:170px;padding:30px 30px 30px 5px}.article-content--vigilkids .product-card-image img{flex-shrink:0;height:109px;margin-left:25px;margin-right:49px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-image .action-buttons{margin-top:20px}.article-content--vigilkids .product-card-features{align-items:center;background:#eafff8;border:1px solid #a7dfcc;display:flex;min-height:239px;padding:30px 30px 30px 0;position:relative}.article-content--vigilkids .product-card-features img{flex-shrink:0;height:136px;margin-left:25px;margin-right:14px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-features>div{padding-left:35px}.article-content--vigilkids .product-card-features>div>.product-name{font-size:18px;line-height:27px}.article-content--vigilkids .product-card-features .action-buttons{margin-top:20px}.article-content--vigilkids .product-card-split{align-items:center;background:linear-gradient(91.3deg,#d3fff5 -.99%,#cee8ff 103.74%) padding-box,linear-gradient(90deg,#84ffe5,#9dd5ff) border-box;border:1px solid transparent;border-radius:9px;display:flex;gap:54px;margin-top:26px;min-height:239px;padding:30px 30px 30px 41px;position:relative}.article-content--vigilkids .product-card-split>img{flex-shrink:0;height:160px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-split>div{padding-left:15px;padding-top:10px}.article-content--vigilkids .product-card-split .split-product-name{display:none;margin:0 0 12px}.article-content--vigilkids .product-card-split .feature-dot-list{margin:0}.article-content--vigilkids .product-card-split .action-buttons{margin-top:30px}.article-content--vigilkids .product-card-split:after,.article-content--vigilkids .product-card-split:before{background:#fff;content:"";height:14px;left:213px;position:absolute;width:28px;z-index:2}.article-content--vigilkids .product-card-split:before{border-radius:0 0 14px 14px;top:-1px}.article-content--vigilkids .product-card-split:after{border-radius:14px 14px 0 0;bottom:-1px}.article-content--vigilkids .product-card-vertical{background:#eafff8;border:1px solid #a7dfcc;border-radius:9px;display:flex;margin-top:100px;min-height:267px;position:relative}.article-content--vigilkids .product-card-vertical .card-vertical-left{box-sizing:border-box;flex-shrink:0;padding:20px 30px 24px;width:531px}.article-content--vigilkids .product-card-vertical .card-vertical-header{align-items:center;display:flex;gap:10px;margin-bottom:-4px}.article-content--vigilkids .product-card-vertical .card-vertical-header img{flex-shrink:0;height:160px;margin-left:-15px;margin-top:-80px;-o-object-fit:contain;object-fit:contain}.article-content--vigilkids .product-card-vertical .card-vertical-header .product-name{transform:translate(-70px,-20px)}.article-content--vigilkids .product-card-vertical .card-vertical-divider{border-left:1px dashed #24c790;margin:2px 0;width:0}.article-content--vigilkids .product-card-vertical .card-vertical-right{align-items:center;display:flex;flex:1;flex-direction:column;flex-shrink:0;gap:25px;justify-content:center;padding:0 40px}.article-content--vigilkids .product-card-vertical .dashed-line{border-left:1px dashed #24c790;height:262px;left:531px;position:absolute;top:2px;width:0}.article-content--vigilkids .product-card-checklist{background:#f0f6ff;border:1px solid #dae9ff;border-radius:9px;min-height:387px;padding:30px 20px}.article-content--vigilkids .product-card-checklist .product-name{margin-bottom:15px}.article-content--vigilkids .product-card-checklist .action-buttons{justify-content:center;margin-top:30px}.article-content--vigilkids p.product-name{font-size:20px;font-weight:600;line-height:30px;margin:0}.article-content--vigilkids .product-desc{font-size:14px;font-weight:400;line-height:140%;margin:6px 0 0}.article-content--vigilkids .action-buttons{display:flex;gap:15px}.article-content--vigilkids .feature-dot-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:10px 0 0;padding:0}.article-content--vigilkids .feature-dot-list li{font-size:14px;line-height:140%;padding-left:14px;position:relative}.article-content--vigilkids .feature-dot-list li:before{background:#24c790;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:7px;width:5px}.article-content--vigilkids .feature-check-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.article-content--vigilkids .feature-check-list li{font-size:14px;line-height:140%;padding-left:24px;position:relative}.article-content--vigilkids .feature-check-list li:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%2324c790' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 7.5 3 3 6-6'/%3E%3C/svg%3E") no-repeat 50%;content:"";height:15px;left:0;position:absolute;top:3px;width:15px}.article-content--vigilkids .product-feature-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}.article-content--vigilkids .product-feature-list li{font-size:14px;line-height:140%;padding-left:24px;position:relative}.article-content--vigilkids .product-feature-list li:before{background:#24c790 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none' viewBox='0 0 8 7'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 3.5 2 2L7 1'/%3E%3C/svg%3E") no-repeat 50%;background-size:8px 7px;border-radius:50%;content:"";height:14px;left:0;position:absolute;top:3px;width:14px}.article-content--vigilkids .sub-section-title{font-weight:600;line-height:24px}.article-content--vigilkids a.action-btn-primary{align-items:center;background:hsl(var(--color-primary-var));border-radius:8px;color:#fff;display:inline-flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;height:42px;justify-content:center;text-decoration:none;transition:all .3s ease;width:154px}.article-content--vigilkids a.action-btn-primary:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids a.action-btn-outline{align-items:center;border:1px solid hsl(var(--color-primary-var));border-radius:8px;color:hsl(var(--color-primary-var));display:inline-flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:700;height:42px;justify-content:center;text-decoration:none;transition:all .3s ease;width:154px}.article-content--vigilkids a.action-btn-outline:hover{background:hsl(var(--color-primary-var));color:#fff}.article-content--vigilkids .product-info-banner{align-items:center;background:linear-gradient(90deg,#d1ffde,#befade);border-radius:9px;box-sizing:border-box;display:flex;gap:20px;margin:30px 0 20px;max-width:100%;padding:20px 52px 20px 30px}.article-content--vigilkids .product-info-banner img.banner-logo{align-self:flex-start;border-radius:8px;flex-shrink:0;height:46px;margin:0;max-width:none;width:46px}.article-content--vigilkids .product-info-banner .banner-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.article-content--vigilkids .product-info-banner .banner-title{font-size:18px;font-weight:600;line-height:27px;margin:0}.article-content--vigilkids .product-info-banner .banner-desc{font-size:14px;font-weight:400;line-height:140%;margin:0}.article-content--vigilkids .product-info-banner .banner-platform-row{align-items:center;display:flex;gap:8px;margin-top:8px}.article-content--vigilkids .product-info-banner .banner-available{color:#666;flex-shrink:0;font-size:10px;line-height:16px}.article-content--vigilkids .product-info-banner .banner-platforms{align-items:center;display:flex}.article-content--vigilkids .product-info-banner .banner-platforms img,.article-content--vigilkids .product-info-banner img.banner-platforms-icons{height:20px;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:auto}.article-content--vigilkids .product-info-banner .product-info-banner-btn{align-items:center;background:hsl(var(--color-primary-var));border-radius:8px;color:#fff;display:flex;flex-shrink:0;gap:0;height:54px;justify-content:center;text-decoration:none;transition:all .3s ease;width:180px}.article-content--vigilkids .product-info-banner .product-info-banner-btn:before{content:none}.article-content--vigilkids .product-info-banner .product-info-banner-btn span{color:#fff;font-size:18px;font-weight:500;line-height:21px}.article-content--vigilkids .product-info-banner-btn:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .tips-box{background:#fffae1;border:1px solid #fff3a2;border-radius:5px;box-sizing:border-box;margin-bottom:20px;margin-top:20px;max-width:100%;min-height:121px;padding:40px 16px 16px;position:relative}.article-content--vigilkids .tips-box-label{align-items:flex-end;background:#f99f19;border-radius:5px 5px 5px 0;display:inline-flex;gap:4px;height:24px;left:-1px;padding:0 8px;position:absolute;top:-1px}.article-content--vigilkids .tips-box-label img{height:12px;margin-bottom:6px;width:12px}.article-content--vigilkids .tips-box-label span{color:#fff;font-size:14px;font-weight:500;line-height:24px}.article-content--vigilkids .note-box{background:#eaf7f1;border-radius:5px;box-sizing:border-box;margin-bottom:20px;margin-top:20px;max-width:100%;min-height:121px;padding:36px 16px 16px;position:relative}.article-content--vigilkids .note-box-label{align-items:flex-end;background:#24c790;border-radius:5px 0 5px 0;display:inline-flex;gap:4px;height:22px;left:0;padding:0 6px;position:absolute;top:0}.article-content--vigilkids .note-box-label img{height:12px;margin-bottom:5px;width:12px}.article-content--vigilkids .note-box-label span{color:#fff;font-size:13px;font-weight:500;line-height:22px}.article-content--vigilkids .note-box.note-warning{background:#fff8f0;border-color:#f0d8a8}.article-content--vigilkids .note-box.note-warning .note-box-label{background:#ff9800}.article-content--vigilkids .note-box-content,.article-content--vigilkids .tips-box-content{margin:0}.article-content--vigilkids .top-banner{align-items:center;background:linear-gradient(270.88deg,rgba(145,248,159,.8) .75%,rgba(213,255,229,.8) 28.3%,rgba(209,255,234,.8) 67.73%,rgba(167,255,218,.8) 99.99%);border-radius:10px;box-sizing:border-box;display:flex;gap:24px;margin:20px 0;max-width:100%;padding:20px 126px 20px 117px;position:relative}.article-content--vigilkids .top-banner-info{flex:1;min-width:0}.article-content--vigilkids img.top-banner-header{display:block;height:32px;margin:0 0 8px;max-width:none;width:auto}.article-content--vigilkids .top-banner-desc{color:#000;font-weight:500;line-height:24px;margin:0 0 10px}.article-content--vigilkids .top-banner-features{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0 auto 20px;padding:0}.article-content--vigilkids .top-banner-features li{color:#000;font-family:Poppins,sans-serif;font-size:13px;line-height:20px;padding-left:14px;position:relative}.article-content--vigilkids .top-banner-features li:before{background:#009663;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:8px;width:5px}.article-content--vigilkids img.top-banner-mockup{flex-shrink:0;height:auto;margin:0;max-width:none;-o-object-fit:contain;object-fit:contain;width:267px}.article-content--vigilkids .top-banner-section-title{margin-bottom:0}@media (max-width:1024px) and (min-width:769px){.article-content--vigilkids .recommend-grid{grid-template-columns:repeat(2,minmax(0,320px))}}@media (max-width:1024px){.article-content--vigilkids{overflow-x:hidden}.article-content--vigilkids .toc-list-grid{display:flex;flex-direction:column;gap:5px;grid-template-columns:none;justify-content:flex-start}.article-content--vigilkids .toc-list-grid li{width:100%}.article-content--vigilkids .article-recommend .recommend-grid{box-sizing:border-box;display:flex;grid-template-columns:none;justify-content:flex-start;max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;width:100%;-webkit-overflow-scrolling:touch;align-items:flex-start;gap:24px;margin:0;padding:6px 12px 22px;scroll-padding-left:12px;scroll-padding-right:12px;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;-ms-overflow-style:none}.article-content--vigilkids .article-recommend .recommend-card{background:#fff;border-radius:12px;box-shadow:0 2px 10px -7px rgba(42,52,67,.18),0 10px 22px -18px rgba(42,52,67,.1),0 18px 30px -26px rgba(42,52,67,.06);box-sizing:border-box;flex:0 0 100%;isolation:isolate;margin:0;max-width:100%;min-width:100%;overflow:visible;padding:10px;position:relative;scroll-snap-align:start}.article-content--vigilkids .recommend-card .recommend-card-image{aspect-ratio:300/177;height:auto;width:100%}.article-content--vigilkids .recommend-card .recommend-card-image img{display:block}.article-content--vigilkids .recommend-card .recommend-card-title{font-size:14px;line-height:16px;margin:12px 0 0;padding:0}.article-content--vigilkids .recommend-card .recommend-card-desc{font-size:12px;line-height:18px;margin:4px 0 10px;padding:0}.article-content--vigilkids .recommend-dots{gap:8px;margin-top:0}.article-content--vigilkids .recommend-dot.active{width:24px}.article-content--vigilkids .retention-banner{box-sizing:border-box;height:auto;padding:18px 14px 16px;width:100%}.article-content--vigilkids .retention-banner-inner{flex-direction:column;gap:12px;text-align:center}.article-content--vigilkids img.retention-banner-img{height:auto;width:98px}.article-content--vigilkids .retention-banner-text{font-size:12px;line-height:18px;margin:0 auto;max-width:268px}.article-content--vigilkids a.retention-banner-btn{border-radius:8px;font-size:12px;height:38px;line-height:14px;margin-top:14px;width:176px}.article-content--vigilkids .retention-banner-close{height:24px;right:10px;top:10px;width:24px}.article-content--vigilkids .product-card,.article-content--vigilkids .product-card-compact{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;text-align:center;width:100%}.article-content--vigilkids .product-card .product-card-content,.article-content--vigilkids .product-card-compact .product-card-content{max-width:100%;width:100%}.article-content--vigilkids .product-card-image{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;position:static;text-align:center;width:100%}.article-content--vigilkids .product-card-image>div{width:100%}.article-content--vigilkids .product-card-features{margin-top:30px}.article-content--vigilkids .product-card-features,.article-content--vigilkids .product-card-split,.article-content--vigilkids .product-card-vertical{align-items:center;box-sizing:border-box;flex-direction:column;gap:14px;height:auto;padding:18px 14px 16px;position:static;width:100%}.article-content--vigilkids .product-card-vertical{margin-top:56px;overflow:visible;padding-top:0}.article-content--vigilkids .product-card-features img,.article-content--vigilkids .product-card-image img,.article-content--vigilkids .product-card-split img,.article-content--vigilkids .product-card-vertical img{align-self:center;height:112px;margin-bottom:8px;margin-left:0;margin-right:0;position:static}.article-content--vigilkids .product-card-split>img{height:115px;margin-bottom:6px;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;width:127px}.article-content--vigilkids .product-card-features>div,.article-content--vigilkids .product-card-split>div,.article-content--vigilkids .product-card-vertical>div{padding-left:0;padding-top:0;position:static;width:100%}.article-content--vigilkids .product-card-split .split-product-name{display:block;margin:0 0 10px;text-align:center}.article-content--vigilkids .product-card-features .product-name,.article-content--vigilkids .product-card-image .product-name,.article-content--vigilkids .product-card-vertical .product-name{font-size:18px;line-height:27px;text-align:center}.article-content--vigilkids .product-card-split:after,.article-content--vigilkids .product-card-split:before{display:none}.article-content--vigilkids .product-card-vertical .card-vertical-left{padding:0;width:100%}.article-content--vigilkids .product-card-vertical .card-vertical-header{flex-direction:column;gap:0;margin-bottom:8px;text-align:center}.article-content--vigilkids .product-card-vertical .card-vertical-header img{height:132px;margin-bottom:4px;margin-left:0;margin-top:-44px}.article-content--vigilkids .product-card-vertical .card-vertical-header .product-name{font-size:18px;line-height:27px;max-width:100%;transform:none}.article-content--vigilkids .product-card-vertical .card-vertical-divider{display:none}.article-content--vigilkids .product-card-vertical .card-vertical-right{flex-direction:row;gap:12px;justify-content:center;padding:0;width:100%}.article-content--vigilkids .product-card-vertical .dashed-line{display:none}.article-content--vigilkids .product-card-vertical .action-buttons{flex-direction:column;gap:10px}.article-content--vigilkids .action-buttons{gap:12px;justify-content:center;width:100%}.article-content--vigilkids .product-card-checklist{box-sizing:border-box;padding:20px 16px;width:100%}.article-content--vigilkids p.product-name{font-size:18px;line-height:27px}.article-content--vigilkids .feature-check-list li,.article-content--vigilkids .feature-dot-list li,.article-content--vigilkids .product-desc,.article-content--vigilkids .product-feature-list li{font-size:12px;line-height:17px}.article-content--vigilkids .sub-section-title{font-size:14px;line-height:21px}.article-content--vigilkids .product-info-banner{box-sizing:border-box;display:block;height:212px;margin:30px 0 20px;max-width:100%;padding:0;position:relative;text-align:left;width:100%}.article-content--vigilkids .product-info-banner img.banner-logo{height:42px;left:calc(50% - 101px);margin:0;position:absolute;top:30px;width:42px}.article-content--vigilkids .product-info-banner .banner-body{display:block;gap:0;left:calc(50% - 52px);position:absolute;top:31px;width:153px}.article-content--vigilkids .product-info-banner .banner-title{font-size:16px;line-height:24px}.article-content--vigilkids .product-info-banner .banner-desc{font-size:12px;line-height:17px}.article-content--vigilkids .product-info-banner .banner-platform-row{align-items:center;display:flex;gap:12px;justify-content:flex-start;margin:20px 0 0 -60px;position:static;width:226px}.article-content--vigilkids .product-info-banner .banner-available{font-size:10px;line-height:15px}.article-content--vigilkids .product-info-banner .banner-platforms img{height:16px}.article-content--vigilkids .product-info-banner .product-info-banner-btn{height:40px;left:50%;position:absolute;top:128px;transform:translateX(-50%);width:154px}.article-content--vigilkids .product-info-banner .product-info-banner-btn:before{content:none}.article-content--vigilkids .product-info-banner .product-info-banner-btn span{font-size:14px;line-height:16px}.article-content--vigilkids .note-box,.article-content--vigilkids .tips-box{box-sizing:border-box;padding:34px 14px 14px;width:100%}.article-content--vigilkids .note-box-content,.article-content--vigilkids .tips-box-content{font-size:14px;line-height:20px}.article-content--vigilkids .top-banner{align-items:center;flex-direction:column;gap:0;min-height:0;padding:30px 14px;width:100%}.article-content--vigilkids img.top-banner-header{height:32px;margin:0 auto 10px;width:auto}.article-content--vigilkids .top-banner-desc{font-size:14px;line-height:21px;margin-bottom:10px;text-align:center}.article-content--vigilkids .top-banner-features{gap:8px;margin:0 auto 14px;max-width:100%;width:100%}.article-content--vigilkids .top-banner-features li{font-size:12px;line-height:18px;padding-left:11px}.article-content--vigilkids .top-banner-features li:before{top:6px}.article-content--vigilkids img.top-banner-mockup{display:none}.article-content--vigilkids a.action-btn-outline,.article-content--vigilkids a.action-btn-primary{font-size:14px;height:40px;line-height:16px;min-width:0}}@media (max-width:768px){.article-content--vigilkids li{font-size:14px}.article-content--vigilkids .section-intro{font-size:14px;line-height:21px}.article-content--vigilkids .section-intro-list{margin:10px 0;padding-left:0}.article-content--vigilkids .section-intro-list li{font-size:12px;line-height:21px}.article-content--vigilkids .h3-num-circle,.article-content--vigilkids .h3-num-ring,.article-content--vigilkids .h3-num-rounded,.article-content--vigilkids .h3-num-square,.article-content--vigilkids .h3-num-triangle,.article-content--vigilkids .h3-tips-badge{font-size:16px}.article-content--vigilkids .article-recommend-title{font-size:24px;line-height:36px}.article-content--vigilkids .feature-check-list,.article-content--vigilkids .feature-dot-list{gap:10px}}.article-content--vigilkids [id]{scroll-margin-top:80px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.article-content .mt-0{margin-top:0}.article-content .mt-5{margin-top:5px}.article-content .mt-10{margin-top:10px}.article-content .mt-15{margin-top:15px}.article-content .mt-20{margin-top:20px}.article-content .mt-30{margin-top:30px}.article-content .mt-40{margin-top:40px}.article-content .mb-0{margin-bottom:0}.article-content .mb-5{margin-bottom:5px}.article-content .mb-10{margin-bottom:10px}.article-content .mb-15{margin-bottom:15px}.article-content .mb-20{margin-bottom:20px}.article-content .mb-30{margin-bottom:30px}.article-content .mb-40{margin-bottom:40px}.article-content .ml-5{margin-left:5px}.article-content .ml-10{margin-left:10px}.article-content .ml-15{margin-left:15px}.article-content .ml-20{margin-left:20px}.article-content .mr-5{margin-right:5px}.article-content .mr-10{margin-right:10px}.article-content .mr-15{margin-right:15px}.article-content .mr-20{margin-right:20px}.article-content .pt-5{padding-top:5px}.article-content .pt-10{padding-top:10px}.article-content .pt-15{padding-top:15px}.article-content .pt-20{padding-top:20px}.article-content .pb-5{padding-bottom:5px}.article-content .pb-10{padding-bottom:10px}.article-content .pb-15{padding-bottom:15px}.article-content .pb-20{padding-bottom:20px}.article-content .pl-5{padding-left:5px}.article-content .pl-10{padding-left:10px}.article-content .pl-15{padding-left:15px}.article-content .pl-20{padding-left:20px}.article-content .pr-5{padding-right:5px}.article-content .pr-10{padding-right:10px}.article-content .pr-15{padding-right:15px}.article-content .pr-20{padding-right:20px}.article-content .p-5{padding:5px}.article-content .p-10{padding:10px}.article-content .p-15{padding:15px}.article-content .p-20{padding:20px}.article-content .px-5{padding-left:5px;padding-right:5px}.article-content .px-10{padding-left:10px;padding-right:10px}.article-content .px-15{padding-left:15px;padding-right:15px}.article-content .px-20{padding-left:20px;padding-right:20px}.article-content .py-5{padding-bottom:5px;padding-top:5px}.article-content .py-10{padding-bottom:10px;padding-top:10px}.article-content .py-15{padding-bottom:15px;padding-top:15px}.article-content .py-20{padding-bottom:20px;padding-top:20px}.article-content .text-12{font-size:12px}.article-content .text-14{font-size:14px}.article-content .text-16{font-size:16px}.article-content .text-18{font-size:18px}.article-content .text-20{font-size:20px}.article-content .text-24{font-size:24px}.article-content .text-28{font-size:28px}.article-content .text-30{font-size:30px}.article-content .text-32{font-size:32px}.article-content .text-36{font-size:36px}.article-content .font-normal{font-weight:400}.article-content .font-medium{font-weight:500}.article-content .font-semibold{font-weight:600}.article-content .font-bold{font-weight:700}.article-content .font-black{font-weight:900}.article-content .text-left{text-align:left}.article-content .text-center{text-align:center}.article-content .text-right{text-align:right}.article-content .leading-tight{line-height:1.25}.article-content .leading-normal{line-height:1.5}.article-content .leading-relaxed{line-height:1.75}.article-content .leading-loose{line-height:2}
|
|
1
|
+
.article-content .mt-0{margin-top:0}.article-content .mt-5{margin-top:5px}.article-content .mt-10{margin-top:10px}.article-content .mt-15{margin-top:15px}.article-content .mt-20{margin-top:20px}.article-content .mt-30{margin-top:30px}.article-content .mt-40{margin-top:40px}.article-content .mb-0{margin-bottom:0}.article-content .mb-5{margin-bottom:5px}.article-content .mb-10{margin-bottom:10px}.article-content .mb-15{margin-bottom:15px}.article-content .mb-20{margin-bottom:20px}.article-content .mb-30{margin-bottom:30px}.article-content .mb-40{margin-bottom:40px}.article-content .ml-5{margin-left:5px}.article-content .ml-10{margin-left:10px}.article-content .ml-15{margin-left:15px}.article-content .ml-20{margin-left:20px}.article-content .ml-auto{margin-left:auto}.article-content .mr-5{margin-right:5px}.article-content .mr-10{margin-right:10px}.article-content .mr-15{margin-right:15px}.article-content .mr-20{margin-right:20px}.article-content .mr-auto{margin-right:auto}.article-content .mx-auto{margin-left:auto;margin-right:auto}.article-content .pt-5{padding-top:5px}.article-content .pt-10{padding-top:10px}.article-content .pt-15{padding-top:15px}.article-content .pt-20{padding-top:20px}.article-content .pb-5{padding-bottom:5px}.article-content .pb-10{padding-bottom:10px}.article-content .pb-15{padding-bottom:15px}.article-content .pb-20{padding-bottom:20px}.article-content .pl-5{padding-left:5px}.article-content .pl-10{padding-left:10px}.article-content .pl-15{padding-left:15px}.article-content .pl-20{padding-left:20px}.article-content .pr-5{padding-right:5px}.article-content .pr-10{padding-right:10px}.article-content .pr-15{padding-right:15px}.article-content .pr-20{padding-right:20px}.article-content .p-5{padding:5px}.article-content .p-10{padding:10px}.article-content .p-15{padding:15px}.article-content .p-20{padding:20px}.article-content .px-5{padding-left:5px;padding-right:5px}.article-content .px-10{padding-left:10px;padding-right:10px}.article-content .px-15{padding-left:15px;padding-right:15px}.article-content .px-20{padding-left:20px;padding-right:20px}.article-content .py-5{padding-bottom:5px;padding-top:5px}.article-content .py-10{padding-bottom:10px;padding-top:10px}.article-content .py-15{padding-bottom:15px;padding-top:15px}.article-content .py-20{padding-bottom:20px;padding-top:20px}.article-content .block{display:block}.article-content .inline-block{display:inline-block}.article-content .w-full{width:100%}.article-content .w-fit{width:-moz-fit-content;width:fit-content}.article-content .text-12{font-size:12px}.article-content .text-14{font-size:14px}.article-content .text-16{font-size:16px}.article-content .text-18{font-size:18px}.article-content .text-20{font-size:20px}.article-content .text-24{font-size:24px}.article-content .text-28{font-size:28px}.article-content .text-30{font-size:30px}.article-content .text-32{font-size:32px}.article-content .text-36{font-size:36px}.article-content .font-normal{font-weight:400}.article-content .font-medium{font-weight:500}.article-content .font-semibold{font-weight:600}.article-content .font-bold{font-weight:700}.article-content .font-black{font-weight:900}.article-content .text-left{text-align:left}.article-content .text-center{text-align:center}.article-content .text-right{text-align:right}.article-content .leading-tight{line-height:1.25}.article-content .leading-normal{line-height:1.5}.article-content .leading-relaxed{line-height:1.75}.article-content .leading-loose{line-height:2}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vigilkids/section-renderer-vue",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "Vue 3 adapter for OneX Section Renderer SDK",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -30,8 +30,15 @@
|
|
|
30
30
|
],
|
|
31
31
|
"sideEffects": false,
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"@vigilkids/section-core": "workspace:*",
|
|
33
34
|
"embla-carousel": "^8.3.0"
|
|
34
35
|
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "unbuild",
|
|
38
|
+
"lint": "eslint .",
|
|
39
|
+
"lint:fix": "eslint . --fix",
|
|
40
|
+
"format": "prettier --write src/"
|
|
41
|
+
},
|
|
35
42
|
"publishConfig": {
|
|
36
43
|
"access": "public"
|
|
37
44
|
},
|
|
@@ -41,8 +48,7 @@
|
|
|
41
48
|
"directory": "packages/section-renderer-vue"
|
|
42
49
|
},
|
|
43
50
|
"peerDependencies": {
|
|
44
|
-
"vue": "^3.4.0"
|
|
45
|
-
"@vigilkids/section-core": "0.1.1"
|
|
51
|
+
"vue": "^3.4.0"
|
|
46
52
|
},
|
|
47
53
|
"devDependencies": {
|
|
48
54
|
"@antfu/eslint-config": "^4.13.2",
|
|
@@ -51,11 +57,5 @@
|
|
|
51
57
|
"prettier": "^3.5.3",
|
|
52
58
|
"unbuild": "^3.5.0",
|
|
53
59
|
"vue-tsc": "^2.0.21"
|
|
54
|
-
},
|
|
55
|
-
"scripts": {
|
|
56
|
-
"build": "unbuild",
|
|
57
|
-
"lint": "eslint .",
|
|
58
|
-
"lint:fix": "eslint . --fix",
|
|
59
|
-
"format": "prettier --write src/"
|
|
60
60
|
}
|
|
61
|
-
}
|
|
61
|
+
}
|