| | |
| | | <template> |
| | | <view> |
| | | |
| | | <view class="order-records"> |
| | | <view class="tj-container-p"> |
| | | <view class="tj-container"> |
| | | <view class="tj-each"> |
| | | <view class="value">9</view> |
| | | <view class="label">买家</view> |
| | | </view> |
| | | <view class="tj-each"> |
| | | <view class="value">9扎</view> |
| | | <view class="label">交易</view> |
| | | </view> |
| | | <view class="tj-each"> |
| | | <view class="value">0.00</view> |
| | | <view class="label">理赔</view> |
| | | </view> |
| | | <view class="tj-each"> |
| | | <view class="value">401.12</view> |
| | | <view class="label">交易合计</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="p15" style="min-height: calc(100vh - 160rpx);"> |
| | | <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data> |
| | | <view v-for="(item,index) in list" :key="index" class="order-records-list list-container"> |
| | | <view class="order-records-item list-item"> |
| | | <view class="title flex"> |
| | | <view>{{item.title}}</view> |
| | | <view class="m-l-a m-r-0 topic-gray">测试人员</view> |
| | | </view> |
| | | <view class="line"></view> |
| | | <view class="form"> |
| | | <view class="form-item"> |
| | | <view class="label">数量</view> |
| | | <view class="value">1</view> |
| | | </view> |
| | | <view class="form-item"> |
| | | <view class="label">单价</view> |
| | | <view class="value">¥32.00</view> |
| | | </view> |
| | | <view class="form-item"> |
| | | <view class="label">小计</view> |
| | | <view class="value red">¥32.00</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 判断是否到底了,自动吧 --> |
| | | <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | |
| | | |
| | | } |
| | | }, |
| | | methods: { |
| | | |
| | | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | .order-records { |
| | | .order-records-list { |
| | | padding: 20rpx 30rpx; |
| | | |
| | | </style> |
| | | .order-records-item { |
| | | padding: 24rpx 34rpx; |
| | | margin-bottom: 20rpx; |
| | | |
| | | |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 28rpx; |
| | | color: #000000; |
| | | line-height: 40rpx; |
| | | } |
| | | |
| | | .line { |
| | | height: 2rpx solid #EEEEEE; |
| | | margin-top: 16rpx; |
| | | margin-bottom: 16rpx; |
| | | } |
| | | |
| | | .form { |
| | | display: flex; |
| | | |
| | | .form-item { |
| | | flex: 1; |
| | | min-width: 40%; |
| | | max-width: 50%; |
| | | |
| | | .label { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #666666; |
| | | line-height: 34rpx; |
| | | } |
| | | |
| | | .label::after { |
| | | content: ":"; |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #666666; |
| | | line-height: 34rpx; |
| | | } |
| | | |
| | | .value { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #000000; |
| | | line-height: 34rpx; |
| | | } |
| | | |
| | | .value.red { |
| | | color: #CF0000; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tj-container-p { |
| | | background: #E6F2EB; |
| | | padding: 30rpx; |
| | | |
| | | .tj-container { |
| | | height: 148rpx; |
| | | background: #FFFFFF; |
| | | border-radius: 8rpx; |
| | | |
| | | .tj-each { |
| | | .label { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #000000; |
| | | line-height: 34rpx; |
| | | } |
| | | |
| | | .value { |
| | | font-weight: 400; |
| | | font-size: 32rpx; |
| | | color: #CF0000; |
| | | line-height: 44rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |