任务
任务一
内容： 继续修改 ui 上的 bug
难点：
- 对 video 标签增加默认显示图片（当视频不显示时）
- svg 动画会被后面新增的节点覆盖（如果当位置重合时）
实现：
- 通过对
video标签增加poster属性作为默认显示图片
video.poster = '/static/images/ellipse.png';
<video>属性poster海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。
- 改变 svg 标签在文档中的位置（置后）
无效方法：
给 svg 内联样式增加 z-index 属性
在 SVG 中，内联样式的 z-index 属性并不会产生效果，这是因为 SVG 与 HTML 的盒模型不同，它并没有“堆叠顺序”（stacking context）的概念。
在 HTML 中，元素的层叠顺序由其 z-index 值和定位方式等多个因素决定。而在 SVG 中，元素的绘制顺序取决于它们在文档中出现的顺序，排在后面的元素会覆盖在前面的元素之上。因此，对于 SVG 中的元素，如果需要改变它们的显示顺序，应该考虑改变它们在文档中的位置。
任务二
内容： 优化 欣牧云 【我的】页面上下滑动的操作会一断一断的。
原因： 如下图。
更改前：高度单位为vh，会根据当前视口的高度来响应式变化，1vh = 1% 当前视口高度。
当我们在红色区域上下滚动时，也就是屏幕的区域，会发现页面下方的内容无法显示，而当红色区域到达屏幕顶端后（红色区域只能在屏幕区域上下波动很小距离），我们再滑动，则滑动的是黑色的区域，这时页面下方的内容才能显示，而且若当前视口高度较小，还可能导致页面显示不全。隐藏的两段滚动（我们能观察到有两个滚动条） -- 最终造成页面看起来滚动卡顿。
width: 100vh
更改后：高度单位为100%，即以父盒子宽度为准，若父盒子未指定宽度，则默认为内容撑开的高度。（或者直接不设置 width）
此时，页面的高度则为黑色区域的高度，我们滚动时，也是滚动的黑色区域，因此解决了卡顿问题。
width： 100%
