回到浏览器 .. 打开项目的 checkout 这个页面 .. 现在这里显示的是一个支付用的二维码 .. 下面我们可以再去改造一下这个视图 ..

在这个 card 容器上，再添加几个工具类 .. mt-5 添加的上边的外边距 mx-3 .. 左右两边再添加点外边距..

然后 card-body 里面，就是卡片的主体，可以先添加一个微信支付的 Logo .. 上面这个类可以改成 w-50 .. 表示占用 50% 的宽度 .. 因为我想让这个 Logo 小一点 ..

下面可以显示一个订单的金额，还有一行注释 .. 需要点自定义的样式 .. 先用一个 div .. 加上一个自定义的 css 类 .. card-price .. my-5 ，上下添加点外边距 .. pb-5 . 再添加点下边的内边距 .. 因为我想让这个价格的下面距离其它的元素大一些 ..

里面用一个 p 标签，上面加上 card-amount .. 再包装一个 small 标签 .. 一个人民币符号 .. small 标签的外面是订单上的金额 .. 这里可以先用一个静态的数字 .. 0.03

价格的下面是一小行描述文字 .. 一个 p 标签 .. 加上 card-text .. 还有 text-muted .. 这个类可以让文字不那么显眼 .. 一组 small 标签，再包装一行文字 .. 订单金额 ..

最后可以再添加一个按钮 .. 点一下这个按钮可以提交支付 .. 按钮上添加几个类 .. btn btn-primary btn-block .. 按钮文字是 确认支付 ..

再回到浏览器，可以看一下现在 checkout 页面上显示的东西 ..

样式

再回到项目 .. 打开 public 下面的 main.css .. 这个样式表是我们之前定义的 main 这个布局里面使用的一个自定义的样式表 ..

在这个样式表里，再添加点自定义的样式 .. 设置一下 .card-price .. 先设置一下它的 font-family .. "Century Gothic", sans-serif .. font-weight 可以设置成 bold ，让文字粗一些 ..

然后设计一下 .card-amount 下面的 small 标签里的样式 .. 让文字小一点 .. font-size 设置成 16px ..

最后再设计一下 .card-amount .. font-size 可以是 32px .. padding:0 .. margin 也可以是 0 ..

再回到 checkout 页面 .. 预览一下 ..