diff --git a/src/assets/images/components/ProgressBar-bg.png b/src/assets/images/components/ProgressBar-bg.png
new file mode 100644
index 0000000..497c710
Binary files /dev/null and b/src/assets/images/components/ProgressBar-bg.png differ
diff --git a/src/assets/images/components/制作变焦镜-我的志愿者手记.png b/src/assets/images/components/制作变焦镜-我的志愿者手记.png
new file mode 100644
index 0000000..b2720ab
Binary files /dev/null and b/src/assets/images/components/制作变焦镜-我的志愿者手记.png differ
diff --git a/src/assets/images/components/制作变焦镜-未解锁.png b/src/assets/images/components/制作变焦镜-未解锁.png
new file mode 100644
index 0000000..2b65cf0
Binary files /dev/null and b/src/assets/images/components/制作变焦镜-未解锁.png differ
diff --git a/src/assets/images/components/完成前置-即可开启实战.png b/src/assets/images/components/完成前置-即可开启实战.png
new file mode 100644
index 0000000..2cd9aa4
Binary files /dev/null and b/src/assets/images/components/完成前置-即可开启实战.png differ
diff --git a/src/assets/images/components/进入-实战操作.png b/src/assets/images/components/进入-实战操作.png
new file mode 100644
index 0000000..a4558a0
Binary files /dev/null and b/src/assets/images/components/进入-实战操作.png differ
diff --git a/src/assets/images/vlog/bg-center.png b/src/assets/images/vlog/bg-center.png
new file mode 100644
index 0000000..3512f7a
Binary files /dev/null and b/src/assets/images/vlog/bg-center.png differ
diff --git a/src/assets/images/vlog/bg.png b/src/assets/images/vlog/bg.png
new file mode 100644
index 0000000..3321e06
Binary files /dev/null and b/src/assets/images/vlog/bg.png differ
diff --git a/src/assets/images/vlog/person.png b/src/assets/images/vlog/person.png
new file mode 100644
index 0000000..b2440d5
Binary files /dev/null and b/src/assets/images/vlog/person.png differ
diff --git a/src/assets/images/vlog/task-btn-ok.png b/src/assets/images/vlog/task-btn-ok.png
new file mode 100644
index 0000000..8e60ace
Binary files /dev/null and b/src/assets/images/vlog/task-btn-ok.png differ
diff --git a/src/assets/images/vlog/task-btn.png b/src/assets/images/vlog/task-btn.png
new file mode 100644
index 0000000..5598ee2
Binary files /dev/null and b/src/assets/images/vlog/task-btn.png differ
diff --git a/src/assets/images/vlog/task-camera.png b/src/assets/images/vlog/task-camera.png
new file mode 100644
index 0000000..5e7ebdc
Binary files /dev/null and b/src/assets/images/vlog/task-camera.png differ
diff --git a/src/assets/images/vlog/title.png b/src/assets/images/vlog/title.png
new file mode 100644
index 0000000..2bb8568
Binary files /dev/null and b/src/assets/images/vlog/title.png differ
diff --git a/src/assets/images/vlog/任务取景框/vlog初识框.png b/src/assets/images/vlog/任务取景框/vlog初识框.png
new file mode 100644
index 0000000..7ce6a7a
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/vlog初识框.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-当前.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-当前.png
new file mode 100644
index 0000000..fa952dd
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-当前.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-未选中.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-未选中.png
new file mode 100644
index 0000000..2558435
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/vlog初识-未选中.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-当前.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-当前.png
new file mode 100644
index 0000000..8558ffd
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-当前.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-未选中.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-未选中.png
new file mode 100644
index 0000000..9653f8f
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/专业剖析-未选中.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-当前.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-当前.png
new file mode 100644
index 0000000..71c0da9
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-当前.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-未选中.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-未选中.png
new file mode 100644
index 0000000..4f8bc44
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/思路提点-未选中.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-亮.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-亮.png
new file mode 100644
index 0000000..e7e75fc
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-亮.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-暗.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-暗.png
new file mode 100644
index 0000000..0965e0e
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/查看脚本-暗.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-当前.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-当前.png
new file mode 100644
index 0000000..5ef57ef
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-当前.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-未选中.png b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-未选中.png
new file mode 100644
index 0000000..25472d9
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框内置侧边/案例赏析-未选中.png differ
diff --git a/src/assets/images/vlog/任务取景框/任务取景框底板.png b/src/assets/images/vlog/任务取景框/任务取景框底板.png
new file mode 100644
index 0000000..9d6894f
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/任务取景框底板.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/vlog背景全屏待定.png b/src/assets/images/vlog/任务取景框/全屏内置/vlog背景全屏待定.png
new file mode 100644
index 0000000..f83d4d0
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/vlog背景全屏待定.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/上滑.png b/src/assets/images/vlog/任务取景框/全屏内置/上滑.png
new file mode 100644
index 0000000..82379ab
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/上滑.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/下滑.png b/src/assets/images/vlog/任务取景框/全屏内置/下滑.png
new file mode 100644
index 0000000..0ccca1c
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/下滑.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/专业剖析侧边.png b/src/assets/images/vlog/任务取景框/全屏内置/专业剖析侧边.png
new file mode 100644
index 0000000..40bd2e5
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/专业剖析侧边.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/任务取景框背景待定.png b/src/assets/images/vlog/任务取景框/全屏内置/任务取景框背景待定.png
new file mode 100644
index 0000000..8c9c3ee
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/任务取景框背景待定.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/侧边-底板未选中.png b/src/assets/images/vlog/任务取景框/全屏内置/侧边-底板未选中.png
new file mode 100644
index 0000000..fa56660
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/侧边-底板未选中.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/侧边-选中底板.png b/src/assets/images/vlog/任务取景框/全屏内置/侧边-选中底板.png
new file mode 100644
index 0000000..1f03e91
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/侧边-选中底板.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/内容策划.png b/src/assets/images/vlog/任务取景框/全屏内置/内容策划.png
new file mode 100644
index 0000000..dcd3162
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/内容策划.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/内置左上标1.png b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标1.png
new file mode 100644
index 0000000..de69fdc
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标1.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/内置左上标2.png b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标2.png
new file mode 100644
index 0000000..0095691
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标2.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/内置左上标3.png b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标3.png
new file mode 100644
index 0000000..d6132a1
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标3.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/内置左上标4.png b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标4.png
new file mode 100644
index 0000000..9083c87
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/内置左上标4.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/后期制作.png b/src/assets/images/vlog/任务取景框/全屏内置/后期制作.png
new file mode 100644
index 0000000..5dbbb06
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/后期制作.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/导学小龙角标.png b/src/assets/images/vlog/任务取景框/全屏内置/导学小龙角标.png
new file mode 100644
index 0000000..e7888f3
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/导学小龙角标.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/思路提点全屏.png b/src/assets/images/vlog/任务取景框/全屏内置/思路提点全屏.png
new file mode 100644
index 0000000..55639c5
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/思路提点全屏.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/拍摄执行.png b/src/assets/images/vlog/任务取景框/全屏内置/拍摄执行.png
new file mode 100644
index 0000000..6f33420
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/拍摄执行.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/0.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/0.png
new file mode 100644
index 0000000..cfb7e02
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/0.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/1.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/1.png
new file mode 100644
index 0000000..0b9306b
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/1.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/2.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/2.png
new file mode 100644
index 0000000..ec61b78
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/2.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/3.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/3.png
new file mode 100644
index 0000000..c65b098
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/3.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/4.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/4.png
new file mode 100644
index 0000000..eaa7c9e
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/4.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/5.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/5.png
new file mode 100644
index 0000000..588d0ae
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/5.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/6.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/6.png
new file mode 100644
index 0000000..4eac959
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/6.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/7.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/7.png
new file mode 100644
index 0000000..0f0d953
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/7.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/8.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/8.png
new file mode 100644
index 0000000..5c4f9ea
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/8.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/9.png b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/9.png
new file mode 100644
index 0000000..0df3f84
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/灰数字角标/9.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/0.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/0.png
new file mode 100644
index 0000000..17183a2
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/0.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/1.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/1.png
new file mode 100644
index 0000000..bfe102d
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/1.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/2.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/2.png
new file mode 100644
index 0000000..37bf069
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/2.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/3.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/3.png
new file mode 100644
index 0000000..6069b0e
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/3.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/4.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/4.png
new file mode 100644
index 0000000..1613700
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/4.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/5.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/5.png
new file mode 100644
index 0000000..fc3e4cb
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/5.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/6.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/6.png
new file mode 100644
index 0000000..c0e3c78
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/6.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/7.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/7.png
new file mode 100644
index 0000000..f373739
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/7.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/8.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/8.png
new file mode 100644
index 0000000..69e0364
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/8.png differ
diff --git a/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/9.png b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/9.png
new file mode 100644
index 0000000..94f0ebd
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/全屏内置/高亮数字角标/9.png differ
diff --git a/src/assets/images/vlog/任务取景框/思路提点小屏.png b/src/assets/images/vlog/任务取景框/思路提点小屏.png
new file mode 100644
index 0000000..60e16c8
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/思路提点小屏.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/《桂花酒酿小圆子》分镜头脚本.png b/src/assets/images/vlog/任务取景框/文字标题/《桂花酒酿小圆子》分镜头脚本.png
new file mode 100644
index 0000000..fbe9b56
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/《桂花酒酿小圆子》分镜头脚本.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/动态事件跟拍与抓拍.png b/src/assets/images/vlog/任务取景框/文字标题/动态事件跟拍与抓拍.png
new file mode 100644
index 0000000..83cd8bb
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/动态事件跟拍与抓拍.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/基础景别应用.png b/src/assets/images/vlog/任务取景框/文字标题/基础景别应用.png
new file mode 100644
index 0000000..7d8e42e
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/基础景别应用.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/添加背景音乐.png b/src/assets/images/vlog/任务取景框/文字标题/添加背景音乐.png
new file mode 100644
index 0000000..818c448
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/添加背景音乐.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/用视听语言初步表达观点.png b/src/assets/images/vlog/任务取景框/文字标题/用视听语言初步表达观点.png
new file mode 100644
index 0000000..6a81074
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/用视听语言初步表达观点.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/画面构图.png b/src/assets/images/vlog/任务取景框/文字标题/画面构图.png
new file mode 100644
index 0000000..10a9b49
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/画面构图.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/简单脚本策划.png b/src/assets/images/vlog/任务取景框/文字标题/简单脚本策划.png
new file mode 100644
index 0000000..09befb3
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/简单脚本策划.png differ
diff --git a/src/assets/images/vlog/任务取景框/文字标题/素材导入、剪辑拼接.png b/src/assets/images/vlog/任务取景框/文字标题/素材导入、剪辑拼接.png
new file mode 100644
index 0000000..84cc759
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/文字标题/素材导入、剪辑拼接.png differ
diff --git a/src/assets/images/vlog/任务取景框/标题条.png b/src/assets/images/vlog/任务取景框/标题条.png
new file mode 100644
index 0000000..6424d6a
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/标题条.png differ
diff --git a/src/assets/images/vlog/任务取景框/案例背景待定.png b/src/assets/images/vlog/任务取景框/案例背景待定.png
new file mode 100644
index 0000000..8a7ba7b
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/案例背景待定.png differ
diff --git a/src/assets/images/vlog/任务取景框/美食小确幸：桂花酒酿小圆子.png b/src/assets/images/vlog/任务取景框/美食小确幸：桂花酒酿小圆子.png
new file mode 100644
index 0000000..14f1e2f
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/美食小确幸：桂花酒酿小圆子.png differ
diff --git a/src/assets/images/vlog/任务取景框/装饰.png b/src/assets/images/vlog/任务取景框/装饰.png
new file mode 100644
index 0000000..cc431d7
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/装饰.png differ
diff --git a/src/assets/images/vlog/任务取景框/视频框外框样式.png b/src/assets/images/vlog/任务取景框/视频框外框样式.png
new file mode 100644
index 0000000..f48d434
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/视频框外框样式.png differ
diff --git a/src/assets/images/vlog/任务取景框/视频遮罩.png b/src/assets/images/vlog/任务取景框/视频遮罩.png
new file mode 100644
index 0000000..4c8264a
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/视频遮罩.png differ
diff --git a/src/assets/images/vlog/任务取景框/记录身边的美好.png b/src/assets/images/vlog/任务取景框/记录身边的美好.png
new file mode 100644
index 0000000..efe18e8
Binary files /dev/null and b/src/assets/images/vlog/任务取景框/记录身边的美好.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png b/src/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png
new file mode 100644
index 0000000..54c097f
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄.png b/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄.png
new file mode 100644
index 0000000..d9f73c5
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄底板.png b/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄底板.png
new file mode 100644
index 0000000..88ed323
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/中期拍摄底板.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/准备图标.png b/src/assets/images/vlog/制作变焦镜/入口节点/准备图标.png
new file mode 100644
index 0000000..5a7e143
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/准备图标.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/前期准备.png b/src/assets/images/vlog/制作变焦镜/入口节点/前期准备.png
new file mode 100644
index 0000000..e7624b0
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/前期准备.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/前期准备底板.png b/src/assets/images/vlog/制作变焦镜/入口节点/前期准备底板.png
new file mode 100644
index 0000000..f554534
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/前期准备底板.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/剪辑图标.png b/src/assets/images/vlog/制作变焦镜/入口节点/剪辑图标.png
new file mode 100644
index 0000000..cc3b3e4
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/剪辑图标.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑.png b/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑.png
new file mode 100644
index 0000000..c7fed27
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑底板.png b/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑底板.png
new file mode 100644
index 0000000..e5b8239
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/后期剪辑底板.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/备注.txt b/src/assets/images/vlog/制作变焦镜/入口节点/备注.txt
new file mode 100644
index 0000000..4450a38
--- /dev/null
+++ b/src/assets/images/vlog/制作变焦镜/入口节点/备注.txt
@@ -0,0 +1,2 @@
+流程文字选中颜色ffdf5e
+未选中ffffff
\ No newline at end of file
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/完成.png b/src/assets/images/vlog/制作变焦镜/入口节点/完成.png
new file mode 100644
index 0000000..b76e28f
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/完成.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/拍摄图标.png b/src/assets/images/vlog/制作变焦镜/入口节点/拍摄图标.png
new file mode 100644
index 0000000..862101a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/拍摄图标.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-分镜制作.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-分镜制作.png
new file mode 100644
index 0000000..fd335e0
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-分镜制作.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-剪辑.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-剪辑.png
new file mode 100644
index 0000000..ec5d116
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-剪辑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-实地取景.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-实地取景.png
new file mode 100644
index 0000000..5e184f4
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-实地取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-现场拍摄.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-现场拍摄.png
new file mode 100644
index 0000000..509df2d
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-现场拍摄.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-脚本撰写.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-脚本撰写.png
new file mode 100644
index 0000000..fed1140
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-脚本撰写.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-设备准备.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-设备准备.png
new file mode 100644
index 0000000..ce33c41
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-设备准备.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮-调色.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-调色.png
new file mode 100644
index 0000000..3da1030
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮-调色.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-分镜制作.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-分镜制作.png
new file mode 100644
index 0000000..b62b3d1
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-分镜制作.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-剪辑.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-剪辑.png
new file mode 100644
index 0000000..d5a1373
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-剪辑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-实地取景.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-实地取景.png
new file mode 100644
index 0000000..19f6a70
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-实地取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-现场拍摄.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-现场拍摄.png
new file mode 100644
index 0000000..265f9ec
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-现场拍摄.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-脚本撰写.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-脚本撰写.png
new file mode 100644
index 0000000..2ec6125
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-脚本撰写.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-设备准备.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-设备准备.png
new file mode 100644
index 0000000..df7c363
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-设备准备.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-调色.png b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-调色.png
new file mode 100644
index 0000000..4684d61
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/按钮选中-调色.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（已完成.png b/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（已完成.png
new file mode 100644
index 0000000..d87fb67
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（已完成.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（未完成.png b/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（未完成.png
new file mode 100644
index 0000000..6cb869e
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/进度装饰（未完成.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/入口节点/选中箭头.png b/src/assets/images/vlog/制作变焦镜/入口节点/选中箭头.png
new file mode 100644
index 0000000..186aa17
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/入口节点/选中箭头.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/分镜制作占位图.png b/src/assets/images/vlog/制作变焦镜/分镜制作占位图.png
new file mode 100644
index 0000000..9ce3492
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/分镜制作占位图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/0.6.png b/src/assets/images/vlog/制作变焦镜/实地取景/0.6.png
new file mode 100644
index 0000000..c1b5592
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/0.6.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/1x.png b/src/assets/images/vlog/制作变焦镜/实地取景/1x.png
new file mode 100644
index 0000000..47b523a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/1x.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/25.png b/src/assets/images/vlog/制作变焦镜/实地取景/25.png
new file mode 100644
index 0000000..269be09
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/25.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/5.png b/src/assets/images/vlog/制作变焦镜/实地取景/5.png
new file mode 100644
index 0000000..f3e06fd
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/5.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景-区域.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景-区域.png
new file mode 100644
index 0000000..7fb154b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景-区域.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景地模糊背景.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景地模糊背景.png
new file mode 100644
index 0000000..310c465
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景地模糊背景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景大图.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景大图.png
new file mode 100644
index 0000000..87924a2
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景大图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景框.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景框.png
new file mode 100644
index 0000000..571f35a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景框.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景灰色遮罩.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景灰色遮罩.png
new file mode 100644
index 0000000..a7ce908
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景灰色遮罩.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-样式外框.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-样式外框.png
new file mode 100644
index 0000000..a673e74
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-样式外框.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-遮罩.png b/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-遮罩.png
new file mode 100644
index 0000000..1dace33
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-遮罩.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地a图.png b/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地a图.png
new file mode 100644
index 0000000..a673e74
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地a图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地b图.png b/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地b图.png
new file mode 100644
index 0000000..c28ce18
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/图备用/取景地b图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/圈圈-选中.png b/src/assets/images/vlog/制作变焦镜/实地取景/圈圈-选中.png
new file mode 100644
index 0000000..6b0e4b8
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/圈圈-选中.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/实地取景入口背景.png b/src/assets/images/vlog/制作变焦镜/实地取景/实地取景入口背景.png
new file mode 100644
index 0000000..73bf77b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/实地取景入口背景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/开始取景.png b/src/assets/images/vlog/制作变焦镜/实地取景/开始取景.png
new file mode 100644
index 0000000..5725dee
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/开始取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/拉条.png b/src/assets/images/vlog/制作变焦镜/实地取景/拉条.png
new file mode 100644
index 0000000..91aef36
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/拉条.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/拍摄装饰.png b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄装饰.png
new file mode 100644
index 0000000..6503814
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄装饰.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/拍摄转盘.png b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄转盘.png
new file mode 100644
index 0000000..6e78e4a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄转盘.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/拍摄遮罩.png b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄遮罩.png
new file mode 100644
index 0000000..f89c55b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/拍摄遮罩.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-前往下一个取景地.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-前往下一个取景地.png
new file mode 100644
index 0000000..309b277
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-前往下一个取景地.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景.png
new file mode 100644
index 0000000..a3c448d
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地A.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地A.png
new file mode 100644
index 0000000..514206c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地A.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地B.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地B.png
new file mode 100644
index 0000000..e586220
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景地B.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-开始取景.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-开始取景.png
new file mode 100644
index 0000000..ce20331
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-开始取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-拍摄.png b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-拍摄.png
new file mode 100644
index 0000000..b8d0dc0
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/按钮-拍摄.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/构图指南.png b/src/assets/images/vlog/制作变焦镜/实地取景/构图指南.png
new file mode 100644
index 0000000..8f9fc4f
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/构图指南.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/装饰.png b/src/assets/images/vlog/制作变焦镜/实地取景/装饰.png
new file mode 100644
index 0000000..f135854
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/装饰.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/0.6.png b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/0.6.png
new file mode 100644
index 0000000..9df7fb9
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/0.6.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/1x.png b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/1x.png
new file mode 100644
index 0000000..1891cc1
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/1x.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/25.png b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/25.png
new file mode 100644
index 0000000..5c118e6
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/25.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/5.png b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/5.png
new file mode 100644
index 0000000..48660e3
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/实地取景/转盘数字-选中后变色ffe553/5.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png
new file mode 100644
index 0000000..575f82e
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/ai脚本工具.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/ai脚本工具.png
new file mode 100644
index 0000000..35f3852
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/ai脚本工具.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/侧边导航栏.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/侧边导航栏.png
new file mode 100644
index 0000000..7eb6226
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/侧边导航栏.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-亮.png
new file mode 100644
index 0000000..257e9e9
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-暗.png
new file mode 100644
index 0000000..ad25297
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/光线运用总结-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-亮.png
new file mode 100644
index 0000000..6ff1fdf
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-暗.png
new file mode 100644
index 0000000..5fbef8f
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜成片-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-亮.png
new file mode 100644
index 0000000..8f1b853
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-暗.png
new file mode 100644
index 0000000..9c2a5f2
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/分镜格式-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-亮.png
new file mode 100644
index 0000000..ffc0f65
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-暗.png
new file mode 100644
index 0000000..70c1948
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/手机-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/拍摄指南.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/拍摄指南.png
new file mode 100644
index 0000000..76ba25c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/拍摄指南.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-展开.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-展开.png
new file mode 100644
index 0000000..b5d851b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-展开.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-收缩.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-收缩.png
new file mode 100644
index 0000000..5764a17
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/按钮-收缩.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-亮.png
new file mode 100644
index 0000000..e4e0048
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-暗.png
new file mode 100644
index 0000000..23fad2b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/撰写格式-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-分镜制作.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-分镜制作.png
new file mode 100644
index 0000000..5d5c5f5
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-分镜制作.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-剪辑.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-剪辑.png
new file mode 100644
index 0000000..4570ea3
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-剪辑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png
new file mode 100644
index 0000000..d8a2d0c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png
new file mode 100644
index 0000000..762829b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-实地取景.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-实地取景.png
new file mode 100644
index 0000000..3ace776
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-实地取景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-脚本撰写.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-脚本撰写.png
new file mode 100644
index 0000000..60e8443
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-脚本撰写.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-设备准备.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-设备准备.png
new file mode 100644
index 0000000..be7de04
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-设备准备.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色.png
new file mode 100644
index 0000000..62ba420
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色实践.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色实践.png
new file mode 100644
index 0000000..1523d6b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-调色实践.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-亮.png
new file mode 100644
index 0000000..29adf67
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-暗.png
new file mode 100644
index 0000000..07e499a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/样例展示-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-亮.png
new file mode 100644
index 0000000..8688d7b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-暗.png
new file mode 100644
index 0000000..2171860
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例视频-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-亮.png
new file mode 100644
index 0000000..1b5eb8b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-暗.png
new file mode 100644
index 0000000..3d26c53
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/案例预热-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-亮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-亮.png
new file mode 100644
index 0000000..95327fc
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-亮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-暗.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-暗.png
new file mode 100644
index 0000000..945f225
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/运镜方式总结-暗.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/选中按钮.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/选中按钮.png
new file mode 100644
index 0000000..9912a89
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/左边导航栏/选中按钮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/按钮-开始学习.png b/src/assets/images/vlog/制作变焦镜/按钮-开始学习.png
new file mode 100644
index 0000000..0d6587d
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/按钮-开始学习.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》光线运用总结.png b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》光线运用总结.png
new file mode 100644
index 0000000..33f26d1
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》光线运用总结.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png
new file mode 100644
index 0000000..63a8b48
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》运镜方式总结.png b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》运镜方式总结.png
new file mode 100644
index 0000000..0e132e0
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》运镜方式总结.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/分镜成片.png b/src/assets/images/vlog/制作变焦镜/文字标题/分镜成片.png
new file mode 100644
index 0000000..eb64e69
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/分镜成片.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/分镜格式.png b/src/assets/images/vlog/制作变焦镜/文字标题/分镜格式.png
new file mode 100644
index 0000000..1376737
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/分镜格式.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/包装.png b/src/assets/images/vlog/制作变焦镜/文字标题/包装.png
new file mode 100644
index 0000000..5f18a7a
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/包装.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/基础剪辑操作.png b/src/assets/images/vlog/制作变焦镜/文字标题/基础剪辑操作.png
new file mode 100644
index 0000000..ee865c8
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/基础剪辑操作.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/拉.png b/src/assets/images/vlog/制作变焦镜/文字标题/拉.png
new file mode 100644
index 0000000..9ea88ad
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/拉.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/推.png b/src/assets/images/vlog/制作变焦镜/文字标题/推.png
new file mode 100644
index 0000000..7389933
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/推.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/摇.png b/src/assets/images/vlog/制作变焦镜/文字标题/摇.png
new file mode 100644
index 0000000..975ce86
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/摇.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/操作豆包协作完成志愿者脚本.png b/src/assets/images/vlog/制作变焦镜/文字标题/操作豆包协作完成志愿者脚本.png
new file mode 100644
index 0000000..447368c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/操作豆包协作完成志愿者脚本.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/智能调色.png b/src/assets/images/vlog/制作变焦镜/文字标题/智能调色.png
new file mode 100644
index 0000000..84ea155
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/智能调色.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/智能调色和滤镜.png b/src/assets/images/vlog/制作变焦镜/文字标题/智能调色和滤镜.png
new file mode 100644
index 0000000..480bc07
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/智能调色和滤镜.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-冬日物语.png b/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-冬日物语.png
new file mode 100644
index 0000000..3ca8190
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-冬日物语.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-落日电影.png b/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-落日电影.png
new file mode 100644
index 0000000..2c98ef6
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/滤镜-落日电影.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/版权伦理规范.png b/src/assets/images/vlog/制作变焦镜/文字标题/版权伦理规范.png
new file mode 100644
index 0000000..0649724
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/版权伦理规范.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/考考你的摄影天赋，想一想，如果要拍志愿者服务画面可以用到哪些运镜？.png b/src/assets/images/vlog/制作变焦镜/文字标题/考考你的摄影天赋，想一想，如果要拍志愿者服务画面可以用到哪些运镜？.png
new file mode 100644
index 0000000..c002218
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/考考你的摄影天赋，想一想，如果要拍志愿者服务画面可以用到哪些运镜？.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png b/src/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png
new file mode 100644
index 0000000..8b4c43c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/文字标题/音效处理.png b/src/assets/images/vlog/制作变焦镜/文字标题/音效处理.png
new file mode 100644
index 0000000..84ccac7
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/文字标题/音效处理.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/版权伦理规范.png b/src/assets/images/vlog/制作变焦镜/版权伦理规范.png
new file mode 100644
index 0000000..8129bfc
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/版权伦理规范.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/导学小龙装饰.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/导学小龙装饰.png
new file mode 100644
index 0000000..782efbf
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/导学小龙装饰.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看光线分析表格.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看光线分析表格.png
new file mode 100644
index 0000000..0a25d83
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看光线分析表格.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看运镜分析表格.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看运镜分析表格.png
new file mode 100644
index 0000000..cc504ac
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/按钮-查看运镜分析表格.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景1占位.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景1占位.png
new file mode 100644
index 0000000..73bf77b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景1占位.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景2占位.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景2占位.png
new file mode 100644
index 0000000..c65ed53
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/现场拍摄-背景2占位.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/答题遮罩.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/答题遮罩.png
new file mode 100644
index 0000000..4f7b992
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/答题遮罩.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/现场拍摄/选择按钮.png b/src/assets/images/vlog/制作变焦镜/现场拍摄/选择按钮.png
new file mode 100644
index 0000000..c2b7d4d
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/现场拍摄/选择按钮.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/脚本撰写占位图.png b/src/assets/images/vlog/制作变焦镜/脚本撰写占位图.png
new file mode 100644
index 0000000..d2740d3
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/脚本撰写占位图.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/表格背景.png b/src/assets/images/vlog/制作变焦镜/表格背景.png
new file mode 100644
index 0000000..9538ba2
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/表格背景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/内容-安卓小米.png b/src/assets/images/vlog/制作变焦镜/设备准备/内容-安卓小米.png
new file mode 100644
index 0000000..7d27721
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/内容-安卓小米.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/内容-苹果.png b/src/assets/images/vlog/制作变焦镜/设备准备/内容-苹果.png
new file mode 100644
index 0000000..3c055f2
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/内容-苹果.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/按钮-右滑.png b/src/assets/images/vlog/制作变焦镜/设备准备/按钮-右滑.png
new file mode 100644
index 0000000..7515128
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/按钮-右滑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/按钮-左滑.png b/src/assets/images/vlog/制作变焦镜/设备准备/按钮-左滑.png
new file mode 100644
index 0000000..f52a662
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/按钮-左滑.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/标题-安卓小米.png b/src/assets/images/vlog/制作变焦镜/设备准备/标题-安卓小米.png
new file mode 100644
index 0000000..80a8350
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/标题-安卓小米.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/标题-苹果.png b/src/assets/images/vlog/制作变焦镜/设备准备/标题-苹果.png
new file mode 100644
index 0000000..8cd403c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/标题-苹果.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/浮空屏.png b/src/assets/images/vlog/制作变焦镜/设备准备/浮空屏.png
new file mode 100644
index 0000000..c78cb44
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/浮空屏.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机1.png b/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机1.png
new file mode 100644
index 0000000..bd2243c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机1.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机2.png b/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机2.png
new file mode 100644
index 0000000..49839e1
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/设备-手机2.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/设备准备/设备准备-背景.png b/src/assets/images/vlog/制作变焦镜/设备准备/设备准备-背景.png
new file mode 100644
index 0000000..f70a01c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/设备准备/设备准备-背景.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 不可开启.png b/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 不可开启.png
new file mode 100644
index 0000000..77487ea
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 不可开启.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 可开启.png b/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 可开启.png
new file mode 100644
index 0000000..6c7e59c
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/开启对比 - 可开启.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/按钮-保存.png b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-保存.png
new file mode 100644
index 0000000..1ad7ada
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-保存.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/按钮-结束调色实践.png b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-结束调色实践.png
new file mode 100644
index 0000000..8996ae0
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-结束调色实践.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/按钮-试试其他调色.png b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-试试其他调色.png
new file mode 100644
index 0000000..65781ec
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-试试其他调色.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色未选中.png b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色未选中.png
new file mode 100644
index 0000000..6b61468
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色未选中.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色选中.png b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色选中.png
new file mode 100644
index 0000000..31f507b
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/按钮-调色选中.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/调色实践/调色实践.png b/src/assets/images/vlog/制作变焦镜/调色实践/调色实践.png
new file mode 100644
index 0000000..3e82427
Binary files /dev/null and b/src/assets/images/vlog/制作变焦镜/调色实践/调色实践.png differ
diff --git a/src/assets/images/vlog/标题栏-中间.png b/src/assets/images/vlog/标题栏-中间.png
new file mode 100644
index 0000000..f919dea
Binary files /dev/null and b/src/assets/images/vlog/标题栏-中间.png differ
diff --git a/src/assets/images/vlog/脚本切图/光线运用.png b/src/assets/images/vlog/脚本切图/光线运用.png
new file mode 100644
index 0000000..ae3d945
Binary files /dev/null and b/src/assets/images/vlog/脚本切图/光线运用.png differ
diff --git a/src/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png b/src/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png
new file mode 100644
index 0000000..de0bbdd
Binary files /dev/null and b/src/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png differ
diff --git a/src/assets/images/vlog/脚本切图/桂花酒酿小圆子.png b/src/assets/images/vlog/脚本切图/桂花酒酿小圆子.png
new file mode 100644
index 0000000..d0eaf61
Binary files /dev/null and b/src/assets/images/vlog/脚本切图/桂花酒酿小圆子.png differ
diff --git a/src/assets/images/vlog/脚本切图/运镜方式.png b/src/assets/images/vlog/脚本切图/运镜方式.png
new file mode 100644
index 0000000..111cb85
Binary files /dev/null and b/src/assets/images/vlog/脚本切图/运镜方式.png differ
diff --git a/src/assets/images/vlog/进度数字/0.png b/src/assets/images/vlog/进度数字/0.png
new file mode 100644
index 0000000..14f34ca
Binary files /dev/null and b/src/assets/images/vlog/进度数字/0.png differ
diff --git a/src/assets/images/vlog/进度数字/1.png b/src/assets/images/vlog/进度数字/1.png
new file mode 100644
index 0000000..2a08e03
Binary files /dev/null and b/src/assets/images/vlog/进度数字/1.png differ
diff --git a/src/assets/images/vlog/进度数字/2.png b/src/assets/images/vlog/进度数字/2.png
new file mode 100644
index 0000000..d7e6f63
Binary files /dev/null and b/src/assets/images/vlog/进度数字/2.png differ
diff --git a/src/assets/images/vlog/进度数字/3.png b/src/assets/images/vlog/进度数字/3.png
new file mode 100644
index 0000000..f2e945f
Binary files /dev/null and b/src/assets/images/vlog/进度数字/3.png differ
diff --git a/src/assets/images/vlog/进度数字/4.png b/src/assets/images/vlog/进度数字/4.png
new file mode 100644
index 0000000..b05b68f
Binary files /dev/null and b/src/assets/images/vlog/进度数字/4.png differ
diff --git a/src/assets/images/vlog/进度数字/5.png b/src/assets/images/vlog/进度数字/5.png
new file mode 100644
index 0000000..12bf8e2
Binary files /dev/null and b/src/assets/images/vlog/进度数字/5.png differ
diff --git a/src/assets/images/vlog/进度数字/6.png b/src/assets/images/vlog/进度数字/6.png
new file mode 100644
index 0000000..ac0bba4
Binary files /dev/null and b/src/assets/images/vlog/进度数字/6.png differ
diff --git a/src/assets/images/vlog/进度数字/7.png b/src/assets/images/vlog/进度数字/7.png
new file mode 100644
index 0000000..5a18ac3
Binary files /dev/null and b/src/assets/images/vlog/进度数字/7.png differ
diff --git a/src/assets/images/vlog/进度数字/8.png b/src/assets/images/vlog/进度数字/8.png
new file mode 100644
index 0000000..bde83aa
Binary files /dev/null and b/src/assets/images/vlog/进度数字/8.png differ
diff --git a/src/assets/images/vlog/进度数字/9.png b/src/assets/images/vlog/进度数字/9.png
new file mode 100644
index 0000000..565be27
Binary files /dev/null and b/src/assets/images/vlog/进度数字/9.png differ
diff --git a/src/assets/images/vlog/进度数字/进度.png b/src/assets/images/vlog/进度数字/进度.png
new file mode 100644
index 0000000..02f1d16
Binary files /dev/null and b/src/assets/images/vlog/进度数字/进度.png differ
diff --git a/src/assets/images/vlog/进度数字/％.png b/src/assets/images/vlog/进度数字/％.png
new file mode 100644
index 0000000..f8b5b8d
Binary files /dev/null and b/src/assets/images/vlog/进度数字/％.png differ
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
new file mode 100644
index 0000000..6b25e8c
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -0,0 +1,277 @@
+<!-- 
+  进度条组件
+  用于显示制作变焦镜的步骤进度
+-->
+
+<template>
+  <div class="progress-bar-container">
+    <!-- 主进度条 -->
+    <div class="progress-bar">
+      <!-- 中间步骤指示器 -->
+      <div class="steps-section" v-if="currentStep > 0">
+        <!-- 标题区域 -->
+        <div class="absolute top-0 left-40">
+          <img
+            :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
+            alt="制作变焦镜-我的志愿者手记"
+            class="title-image"
+          />
+        </div>
+        <div
+          v-for="(step, index) in steps.slice(0, 3)"
+          :key="index"
+          class="step-item"
+          :class="getStepStatus(index)"
+        >
+          <span class="step-text">{{ step.name }}</span>
+          <div class="step-dots">•••••</div>
+        </div>
+      </div>
+      <div class="absolute top-0 left-40" v-else>
+        <img
+          :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.UNLOCKED)"
+          alt="未解锁"
+          class="icon-image"
+        />
+      </div>
+
+      <!-- 右侧完成按钮 -->
+      <div class="right-section">
+        <button @click="handleComplete" :disabled="!canComplete">
+          <img
+            :src="
+              getStaticImage(
+                canComplete
+                  ? IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON
+                  : IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON_DISABLED
+              )
+            "
+            alt="完成前置-即可开启实战"
+            class="button-image"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+
+// 定义组件属性
+interface Props {
+  /** 当前步骤索引 (0-3) */
+  currentStep?: number
+}
+
+// 定义事件
+interface Emits {
+  /** 点击完成按钮时触发 */
+  complete: []
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentStep: 0
+})
+
+const emit = defineEmits<Emits>()
+
+// 计算属性：是否可以完成（当前在最后一步）
+const canComplete = computed(() => props.currentStep === 3)
+
+// 处理完成按钮点击
+const handleComplete = () => {
+  if (canComplete.value) {
+    emit('complete')
+  }
+}
+
+// 步骤配置
+const steps = [
+  { name: '前期准备', icon: '📋' },
+  { name: '中期拍摄', icon: '📹' },
+  { name: '后期剪辑', icon: '🎬' },
+  { name: '即可开启实战', icon: '⚡' }
+]
+
+// 获取步骤状态
+const getStepStatus = (stepIndex: number) => {
+  if (stepIndex < props.currentStep) return 'completed'
+  if (stepIndex === props.currentStep) return 'current'
+  return 'locked'
+}
+</script>
+
+<style scoped>
+.progress-bar-container {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.title-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.progress-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 15px 20px;
+  height: 292px;
+  background-image: url('@/assets/images/components/ProgressBar-bg.png');
+  background-size: cover;
+  box-sizing: border-box;
+}
+
+.icon-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.steps-section {
+  width: 1600px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 30px 20px 0;
+  gap: 15px;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+}
+
+.step-text {
+  font-size: 26px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  white-space: nowrap;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.step-dots {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 3px;
+  font-weight: bold;
+}
+
+/* 步骤状态样式 */
+.step-item.completed .step-text {
+  color: #4ade80;
+  font-weight: bold;
+  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
+}
+
+.step-item.completed .step-dots {
+  color: #4ade80;
+  text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
+}
+
+.step-item.current .step-text {
+  color: #fbbf24;
+  font-weight: bold;
+  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
+}
+
+.step-item.current .step-dots {
+  color: #fbbf24;
+  text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
+}
+
+.step-item.locked .step-text {
+  color: rgba(255, 255, 255, 0.7);
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+.step-item.locked .step-dots {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.right-section {
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.2s ease;
+}
+
+button:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+button:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+.button-image {
+  height: auto;
+  object-fit: contain;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .progress-bar {
+    flex-direction: column;
+    gap: 15px;
+    padding: 20px 15px;
+  }
+
+  .right-section {
+    min-width: auto;
+    justify-content: center;
+  }
+
+  .steps-section {
+    flex-direction: column;
+    gap: 10px;
+    margin: 0;
+  }
+
+  .step-item {
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  .step-dots {
+    display: none;
+  }
+
+  .button-image {
+    width: 80px;
+  }
+}
+
+@media (max-width: 480px) {
+  .progress-bar {
+    padding: 15px 10px;
+  }
+
+  .step-text {
+    font-size: 16px;
+  }
+
+  .button-image {
+    width: 70px;
+  }
+}
+</style>
diff --git a/src/components/ProgressBar/README.md b/src/components/ProgressBar/README.md
new file mode 100644
index 0000000..0ddeb0e
--- /dev/null
+++ b/src/components/ProgressBar/README.md
@@ -0,0 +1,95 @@
+# ProgressBar 进度条组件
+
+用于显示制作变焦镜的步骤进度，包含标题、步骤指示器和完成按钮。
+
+## 功能特性
+
+- 🎯 显示制作变焦镜的四个步骤：前期准备、中期拍摄、后期剪辑、即可开启实战
+- 🎨 蓝色渐变背景，符合设计规范
+- 📱 响应式设计，支持移动端
+- ⚡ 支持步骤状态管理和事件回调
+- 🖼️ 使用项目统一的图片资源管理
+
+## 使用方法
+
+```vue
+<template>
+  <ProgressBar
+    :current-step="currentStep"
+    @complete="handleComplete"
+    @step-change="handleStepChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+
+const currentStep = ref(0)
+
+const handleComplete = () => {
+  console.log('完成前置条件，开启实战！')
+  // 处理完成逻辑
+}
+
+const handleStepChange = step => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+</script>
+```
+
+## Props
+
+| 属性        | 类型   | 默认值 | 说明               |
+| ----------- | ------ | ------ | ------------------ |
+| currentStep | number | 0      | 当前步骤索引 (0-3) |
+
+## Events
+
+| 事件名     | 参数         | 说明               |
+| ---------- | ------------ | ------------------ |
+| complete   | -            | 点击完成按钮时触发 |
+| stepChange | step: number | 步骤变化时触发     |
+
+## 样式定制
+
+组件使用 scoped 样式，可以通过以下 CSS 变量进行定制：
+
+```css
+.progress-bar {
+  --primary-color: #4a90e2;
+  --secondary-color: #7bb3f0;
+  --accent-color: #00ffff;
+  --text-color: white;
+}
+```
+
+## 使用示例
+
+### 不同状态展示
+
+```vue
+<template>
+  <!-- 初始状态：未开始 -->
+  <ProgressBar :current-step="0" />
+
+  <!-- 进行中：当前在第3步 -->
+  <ProgressBar :current-step="2" />
+
+  <!-- 即将完成：当前在第4步，可以点击完成按钮 -->
+  <ProgressBar :current-step="3" />
+</template>
+```
+
+### 状态说明
+
+- **未解锁**：`currentStep < 3`，显示"未解锁"状态
+- **已解锁**：`currentStep >= 3`，显示"已解锁"状态
+- **可完成**：`currentStep === 3`，完成按钮可点击
+
+## 响应式断点
+
+- 桌面端：> 768px
+- 平板端：≤ 768px
+- 移动端：≤ 480px
diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts
new file mode 100644
index 0000000..a016bf6
--- /dev/null
+++ b/src/components/ProgressBar/index.ts
@@ -0,0 +1,6 @@
+/**
+ * 进度条组件导出
+ */
+
+export { default as ProgressBar } from './ProgressBar.vue'
+export type * from './types'
diff --git a/src/components/ProgressBar/types.ts b/src/components/ProgressBar/types.ts
new file mode 100644
index 0000000..9f29c5a
--- /dev/null
+++ b/src/components/ProgressBar/types.ts
@@ -0,0 +1,40 @@
+/**
+ * 进度条组件类型定义
+ */
+
+/** 步骤状态 */
+export type StepStatus = 'locked' | 'current' | 'completed'
+
+/** 步骤配置 */
+export interface StepConfig {
+  /** 步骤名称 */
+  name: string
+  /** 步骤图标 */
+  icon?: string
+  /** 步骤状态 */
+  status?: StepStatus
+  /** 是否可点击 */
+  clickable?: boolean
+}
+
+/** 进度条组件属性 */
+export interface ProgressBarProps {
+  /** 当前步骤索引 (0-3) */
+  currentStep?: number
+  /** 自定义步骤配置 */
+  steps?: StepConfig[]
+  /** 是否显示标题 */
+  showTitle?: boolean
+  /** 标题文本 */
+  title?: string
+}
+
+/** 进度条组件事件 */
+export interface ProgressBarEmits {
+  /** 点击完成按钮时触发 */
+  complete: []
+  /** 步骤变化时触发 */
+  stepChange: [step: number]
+  /** 点击步骤时触发 */
+  stepClick: [step: number]
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..6cabb23
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,12 @@
+/**
+ * 组件统一导出
+ */
+
+// 按钮组件
+export * from './Button'
+
+// 引导组件
+export * from './Guide'
+
+// 进度条组件
+export * from './ProgressBar'
diff --git a/src/router/index.ts b/src/router/index.ts
index 72ef4eb..dee3ba1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,6 +25,15 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '开始拍摄'
     }
+  },
+  // vlog 发现与记录
+  {
+    path: '/vlog',
+    name: 'Vlog',
+    component: () => import('@/views/vlog/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
   }
 ]
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a0aea79..7e71aac 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -63,6 +63,16 @@ export const IMAGE_PATHS = {
     VIDEO2: 'home/action/video2',
     VIDEO3: 'home/action/video3'
   },
+  // vlog
+  VLOG: {
+    BG: 'vlog/bg',
+    BG_CENTER: 'vlog/bg-center',
+    TITLE: 'vlog/title',
+    TASK_CAMERA: 'vlog/task-camera',
+    TASK_BTN_OK: 'vlog/task-btn-ok',
+    TASK_BTN: 'vlog/task-btn',
+    TASK_PERSON: 'vlog/person'
+  },
 
   //按钮
   BUTTONS: {
@@ -122,5 +132,14 @@ export const IMAGE_PATHS = {
     POPUP_VLOG: 'home/模块区域/选中弹出-vlog'
   },
   // 节点数字
-  NODE_NUMBERS: Array.from({ length: 10 }, (_, i) => `home/节点数字/${i}`)
+  NODE_NUMBERS: Array.from({ length: 10 }, (_, i) => `home/节点数字/${i}`),
+
+  // 进度条组件相关
+  PROGRESS_BAR: {
+    TITLE: 'components/制作变焦镜-我的志愿者手记',
+    UNLOCKED: 'components/制作变焦镜-未解锁',
+    COMPLETE_BUTTON: 'components/进入-实战操作',
+    COMPLETE_BUTTON_DISABLED: 'components/完成前置-即可开启实战',
+    BACKGROUND: 'components/制作变焦镜-底板'
+  }
 } as const
diff --git a/src/views/home/action.vue b/src/views/home/action.vue
index 9ba24e4..37014a9 100644
--- a/src/views/home/action.vue
+++ b/src/views/home/action.vue
@@ -3,6 +3,9 @@ import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
 import { computed, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 // 响应式状态
 const status = ref(false)
@@ -48,6 +51,13 @@ const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
   }, 100)
 }
 
+const handleClick = () => {
+  router.push({
+    //首字母大写
+    name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
+  })
+}
+
 // 计算属性
 const selectedImage = computed(() => {
   return getBackgroundImage(imageMap[selectedModule.value])
@@ -68,15 +78,16 @@ onMounted(() => {
     ></div>
 
     <!-- 选择模块 -->
-    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8]']">
+    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
       <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
     </div>
 
     <!-- 电视机 -->
     <div
-      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200"
+      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200 cursor-pointer"
       :class="{ 'opacity-50': isImageLoading }"
       :style="{ backgroundImage: selectedImage }"
+      @click.stop="handleClick"
     ></div>
 
     <ImgButton
diff --git a/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue b/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
index 8797233..a0c2df8 100644
--- a/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
+++ b/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
@@ -115,5 +115,6 @@ watch(
   position: relative;
   width: 100%;
   height: 1000px;
+  pointer-events: none;
 }
 </style>
diff --git a/src/views/vlog/index.vue b/src/views/vlog/index.vue
new file mode 100644
index 0000000..6e0263f
--- /dev/null
+++ b/src/views/vlog/index.vue
@@ -0,0 +1,59 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+
+const currentStep = ref(0)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+  // 处理完成逻辑
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" />
+    </div>
+
+    <!-- 引导任务 -->
+    <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
+
+    <div class="absolute bottom-0 w-full">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>