2

src/pages/stuMan/coffeeManage/coffeeOrderList.vue

@@ -27,15 +27,15 @@
         </template>
         <template v-slot:body-cell-orderInfo="props">
           <q-td :props="props">
-            <div>订单号：{{props.row.OrderNo}}({{ props.row.OrderId }})</div>
-            <div>下单时间：{{props.row.CreateDate}}</div>
-            <div>付款时间：{{props.row.PaymentTime}}</div>
-            <div>订单状态：<span v-if="props.row.OrderStatus==1">待付款 </span>
+            <div class="q-my-xs"> <span class="label">订单号</span>：{{props.row.OrderNo}}({{ props.row.OrderId }})</div>
+            <div class="q-my-xs"> <span class="label">下单时间</span>：{{props.row.CreateDate}}</div>
+            <div class="q-my-xs"> <span class="label">付款时间</span>：{{props.row.PaymentTime}}</div>
+            <div class="q-my-xs"> <span class="label">订单状态</span>：<span v-if="props.row.OrderStatus==1">待付款 </span>
               <span v-if="props.row.OrderStatus==2">已完成</span>
               <span v-if="props.row.OrderStatus==3">已取消</span>
             </div>
-            <div v-if="props.row.OrderStatus==3">取消时间：{{props.row.CancelTime}}</div>
-            <div>用户：<span v-if="props.row.UserType==1">{{props.row.EmName}} <q-chip class="q-ml-xs" size="xs" color="primary" text-color="white" >内部人员</q-chip></span> 
+            <div class="q-my-xs" v-if="props.row.OrderStatus==3"> <span class="label">取消时间</span>：{{props.row.CancelTime}}</div>
+            <div class="q-my-xs"><span class="label">用户</span>：<span v-if="props.row.UserType==1">{{props.row.EmName}} <q-chip class="q-ml-xs" size="xs" color="primary" text-color="white" >内部人员</q-chip></span> 
                       <span v-if="props.row.UserType==2">{{props.row.EmName}}  <q-chip class="q-ml-xs" size="xs" color="positive" text-color="white">学生</q-chip></span>
                       <span v-if="props.row.UserType==3">{{props.row.UserName}} <q-chip class="q-ml-xs" size="xs" color="info" text-color="white">甲鹤用户</q-chip></span>
             </div>
@@ -51,11 +51,11 @@
         </template>
         <template v-slot:body-cell-priceInfo="props">
           <q-td :props="props">
-            <div>单价：{{ props.row.Unit_Price}}</div>
-            <div>应收：{{ props.row.PreferPrice}}</div>
-            <div>实收：{{ props.row.Income}}</div>
-            <div v-if="props.row.Fee">手续费：{{ props.row.Fee}}</div>
-            <div v-if="props.row.Refund">退款金额：{{ props.row.Refund}}</div>
+            <div class="q-my-xs">单价：{{ props.row.Unit_Price}}</div>
+            <div class="q-my-xs">应收：{{ props.row.PreferPrice}}</div>
+            <div class="q-my-xs">实收：{{ props.row.Income}}</div>
+            <div class="q-my-xs" v-if="props.row.Fee">手续费：{{ props.row.Fee}}</div>
+            <div class="q-my-xs" v-if="props.row.Refund">退款金额：{{ props.row.Refund}}</div>
           </q-td>
         </template>
         <template v-slot:bottom>
@@ -186,4 +186,11 @@
       },
     }
   }
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+  .label{
+    display: inline-block;
+    width:60px;
+    text-align-last: justify;
+  }
+</style>
\ No newline at end of file