14-首页秒杀上

这里主要是布局以及字体图标与文字的对齐，字体图标大颜色，以及秒杀栏的结构等

可以看出业务逻辑是，一旦请求到数据，就渲染成功，，看到数据变化，就每隔一秒，刷新一次剩余时间返回

• 关于vertical-align（常用于设置图片或字体图标在父元素中的竖直方向位置）

  
  image.png
• 关于宽度和元素宽度
  如果设置宽度为100%，并且设置了内边距，由于一开始内边距不算在宽度里，会被忽略，必须加上box-sizing:border-box;使内边距算在元素的宽度里
• 关于渐变色
  lineargradient(to 方向,开始色号,结束色号)
• 关于布局
  宽高
  内容的水平、竖直对齐方向
  边框样式和形状
  内边距、外边距
  内容的大小、颜色
  背景颜色
  整体的布局或定位方式

iconfont:字体图标的使用，要现在相关文件复制在assets的fonts文件夹下，并且在base中引入默认样式和导入文件路径，在文中通过普通的修改字体样式的方法修改字体图标的大小和颜色，如果无法满意对齐，使用vertical-align

1 本地的显示

• 目录结构

  
  image.png

• 结构

  
  image.png

• 样式

  
  image.png
  image.png

• 显示

  
  image.png

image.png

2 获取state数据的显示

监听界面数据的变化

image.png

当输入计算属性或者data中的数据名称，强制转换成字符串，监听该数据的变化

封装秒的时间处理函数：
1 新建assets/js/tools.js
2 输入秒，返回小时/分钟/秒的对象

• 拿到服务器的数据

  
  image.png

• 显示服务器的数据
  

  image.png
  由于是服务器返回的数据，需要确保数据返回了再生成元素，这点很重要

• 监听数据的变化，调用函数

  
  image.png