这里主要是底部商品栏的秒杀，界面。会做静态的和动态的，动态的尤其要注意在watch中如何操作渲染元素
如果拿到服务器的数据需要操作界面元素，一般是通过watch和$nextClick 配合使用，确保不仅数据更新了并且界面更新了
如何设置水平滚动：
一般需要子元素的宽度大于父元素的宽度
通过鼠标的水平位移控制子元素的左外边距
也可以使用iscroll框架，节省时间，但是由于很久没有更新
不适用于vue
这里选用css的属性，控制水平滚动，在容器内设置容器内的内容水平滚动，并且消除滚动条
插入字体图标
1 静态显示秒杀商品
-
文件目录
image.png
设置网页的背景色默认为灰色，每一栏为白色
-
结构
image.png
类的命名规则是全部小写，子类继承父类，用-隔开
- 样式
image.png
image.png
image.png
需要注意要给滚动元素的容器设置overflow-x的属性，确保里面的子元素具有滚动属性
2 服务器显示数据
子元素宽度要根据返回商品个数变化
-
数据获取
image.png -
数据渲染
image.png
只有确保数据数据返回了，才能通过v-for获取其中的对象
-
数据监听处理设置宽度
- 封装倒计时函数
image.png
- 监听数据变化操作界面
image.png
