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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,342评论 0 5
  • CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 4,892评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,963评论 1 45
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,870评论 0 6
  • 基本常识与实践 css的每一个语句包括一个场所,以及这个场所的一个属性,还要应用到这个属性一个样式,一个典型的cs...
    丁俊杰_阅读 4,650评论 0 0