汽车的外观还有内饰内容，我打算用幻灯片展示 .. 先打开产品详情页面的视图 .. pages/vehicles/show.wxml .. 注释掉之前添加的内容 ..

用一个 swiper 组件 .. 上面加上 section 类，让它占用整个页面的高度 .. 再起个名字可以叫 story .. 再把它的 indicator-dots 设置成 true，显示一组导航点 ..

幻灯片项目用一个循环 .. 添加一个 block .. 用一下 wx:for .. 循环的数据是 entity.meta.exterior_design ..

每个项目是一个 swiper-item .. 把要显示的内容放在这个组件里 .. 添加一个 view，加上 content 类 .. 里面包装一个 sub-header ... 文字是 外观 ..

再添加个 header .. 内容是 item.header ..

然后是一段描述文字 .. description .. 显示的数据是 item.description ..

内容的下面是一个 image .. 图片的地址是 item.image .. mode 设置成 aspectFill ..

内饰

再去添加一个用来展示内饰内容的幻灯片 .. 可以直接复制一份刚才添加的这些代码 .. 然后修改一下 .. 循环的数据是 meta 下面的 interior_design .. 这个子标题文字是 内饰 ..

这里可以做个区分 .. 我们在这个幻灯片的包装上添加一个 white ..

样式

下面去设计这块视图的样式 .. 添加一个新的样式文件 .. 名字是 story.wxss .. 打开小程序的主样式文件 .. 导入刚才我们创建的样式文件 ..

在这个样式文件里，添加一个 .story .. 如果 .story 跟 white 同时在组件上出现 ... 我们就把组件的背景颜色设置成白色 ..

再设置一下 story 下面的 .content 的样式，它里面包装的文字内容 .. 可以先让它变成一个 flexbox .. display:flex .. flex-direction .. 设置成 column .. height 设置成 38.2vh .. 上边留点内边距 .. 大小是 10% .. 再让文字居中显示 .. text-align: center ..

下面是大标题的样式 .. .story .header .. 字号是 48rpx ... 加粗显示文字 .. margin-bottom 是 16px ..

接着是子标题的样式 .. .story .sub-header .. 字号可以是 28rpx .. text-transform 设置成 uppercase .. 再添加 6 个 rpx 的字间距 .. margin-bottom 可以是 8px .. 文字的颜色是黑色 .. 不透明度是 0.75 ..

我们再设置一下 story 下面的 .description .. 添加点内边距 .. 上下是 0，左右可以是 12% ...

最后是 story 下面的 image ，还有 story 下面的 video 的样式 .. 给它们添加一个统一的高度 .. 41.8vh ..