开始

封装UI基础库。
image.png

zcm-main.css

这是课下写好的一个基础库。
image.png
简化的写法
image.png
我们放到common/zcms-main.css这里
image.png
App.vue内引入。
image.png

用基础库实现详情页的底部

image.png
用UI基础库，看看可以可以少写多少的代码。

首先是一行三列，我们用flex布局。
image.png

image.png
最后一个占2.5份
image.png
收藏和购物车。
image.png
注意图标的不同
image.png

image.png
首先是字体的颜色，然后是主背景色。
image.png
这里我们有封装主色调
image.png
文字需要垂直水平方向都居中，那么就是flex布局
image.png

image.png
前面这里，背景色是白色
image.png
白色背景色，然后加一个上边框。
image.png
前面来文字也是垂直水平方向居中，然后是上下结构。
image.png
购物车也是同理的
image.png
本身我们就封装了默认的行高是1.8image.png
可能会距离有点远，这里我们把行高设置为1
image.png

查看效果。距离上边距，好像有点窄。
image.png
外层view也可以加上行高。
image.png
随便给一个高度，不一定准确。
image.png

定位到底部。fixed布局，左右下都是0的距离。
image.png

image.png
加一个点击的时候的背景色
image.png

点击
image.png
没有点击
image.png

这是详情页已经提前写好的。几乎都是通过class提前预定写好的样式去完成的整个页面
image.png

结束