打开产品页面的视图 .. pages .. vechicles .. show.wxml .. 一个 view，加个 section .. 这样它里面的内容就会占满整页 ..

先包装一个 view .. 起个名字可以叫 cover .. 里面包装一个 image .. 图像的地址是 entity.image .. mode 可以设置成 aspectFill

然后是一个 content .. 里面先添加一个 header .. 绑定一个 entity.header .. 里面可以再添加一个 sub-header ，输出的数据是 entity.sub_header ..

标题的下面是一个 meta .. 这里可以显示一个 entity.meta 下面的 price ，也就是产品的价格 ..

样式

我们再去设计一下这块视图的样式 .. 添加一个新的样式文件 .. 放在 styles 的下面，名字是 cover.wxss .. 然后在小程序的主样式里面，import 一下这个样式文件 ... 再回到这个样式文件 ..

添加一个 .cover .. 我们把封面的包装的位置设置成 relative .. 因为我想让它里面的内容基于封面的包装绝对定位 .. 因为我想让内容覆盖在图片的上面显示 ..

再设置一下 .cover 的 image ，还有 .cover 下面的 video 的样式 .. 把 height 设置成 38.2vh ..

内容

然后是 .cover 下面的 .content ，也就是内容的样式 .. 先把它变成一个 flexbox .. display: flex .. 把 justify-content ，设置成 space-between .. 调整一下项目的间隔 .. 再把 align-items: 设置成 flex-end，设置一下项目的对齐 ..

然后添加点 padding .. 上下是 8 像素，左右是 16 像素 ..

内容的 position 可以设置成 absolute ，让它绝对定位 .. bottom 设置成 0 .. 这样它会在 cover 容器的底部显示 .. width，宽度可以设置成 100% .. 再把 box-sizing 设置成 border-box ..

再用 color 调整一下文字的颜色 .. 这里可以使用 rgba 表示的颜色 .. 白色 .. 不透明度是 0.85 .. 再给它添加点阴影 .. text-shadow . 0 5px 19px rgba(0, 0, 0, 0.5) ..

让文字在图片上显示的更清楚一点，我们可以给内容添加一个黑色到透明的渐变背景 .. background-image: linear-gradient(rgba(0,0,0,0.00) 7%, rgba(0,0,0,0.36) 100%);

文字

再去设计一下 .cover 下面的大标题 .. font-size 是 36rpx .. font-weight 是 bold .. letter-spacing 是 4rpx ..

接着是 .cover 的 .sub-header ，子标题 .. font-size 是 25rpx .. font-weight 可以是 normal .. text-transform 设置成 uppercase ... letter-spacing 是 4rpx ..

最后我们再调整一下 meta 的字号 .. .cover .meta .. font-size 是 26rpx ...