|
|
@@ -1,5 +1,24 @@
|
|
|
<template>
|
|
|
- <view class="order-info"></view>
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="order-top">
|
|
|
+ <view class="status">配送中</view>
|
|
|
+ <text class="time">2021-05-20 07:52</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="product">
|
|
|
+ <u-image src="https://bpic.588ku.com/illus_water_img/21/07/05/ecab6de5a7b2972500459ba95cf97deb.jpg" width="160" height="160" border-radius="16" mode="cover"></u-image>
|
|
|
+ <view class="products">
|
|
|
+ <view class="product-content">
|
|
|
+ <view class="text1">
|
|
|
+ <text>南瓜粥</text>
|
|
|
+ <text>¥5</text>
|
|
|
+ </view>
|
|
|
+ <view class="text2">热</view>
|
|
|
+ <view class="text2">共1件</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -15,6 +34,47 @@ export default {
|
|
|
.order-info {
|
|
|
background: #ffffff;
|
|
|
border-radius: 12px;
|
|
|
- padding: 12px;
|
|
|
+ padding: 16px 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #f5f7fa;
|
|
|
+ .status {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $u-type-primary;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.product {
|
|
|
+ display: flex;
|
|
|
+ .product-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding-left: 10px;
|
|
|
+ .text1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1c1c1c;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
panhui