6.小程序页面布局 - 账单明细

在小程序中实现账单明细页面的布局，可以使用微信小程序自带的WXML和WXSS。以下是一个简单的示例：

<!-- 账单明细页面的布局 -->
<view class="container">
  <view class="bill-header">
    <text>账单明细</text>
  </view>
  <view class="bill-list">
    <view class="bill-item">
      <text>商品名称</text>
      <text>金额</text>
    </view>
    <!-- 这里可以用循环展示多个商品和金额 -->
    <view class="bill-item">
      <text>商品A</text>
      <text>100元</text>
    </view>
    <view class="bill-item">
      <text>商品B</text>
      <text>200元</text>
    </view>
    <!-- 更多商品和金额... -->
  </view>
  <view class="bill-total">
    <text>总金额: 300元</text>
  </view>
</view>

/* WXSS样式 */
.container {
  padding: 20rpx;
}
 
.bill-header {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20rpx;
}
 
.bill-list {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20rpx;
}
 
.bill-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}
 
.bill-total {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}

这个示例中，我们定义了一个container容器，其中包含了头部（bill-header）、商品列表（bill-list）和总额（bill-total）三个部分。商品列表中，每个商品信息由bill-item表示，并且使用了Flex布局来实现商品名称和金额的并排展示。

在实际应用中，你可能需要根据实际的数据动态生成商品列表，这时可以使用小程序的数据绑定功能来实现。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的样式和交互功能。