no message

src/views/mallManagement/order/order_detail/index.vue

@@ -71,11 +71,12 @@
         </el-row>
       </div>
     </div>
-    <div class="order-receive-info" style="padding-bottom: 15px;">
+
+    <div class="order-receive-info">
       <el-row :gutter="30">
         <el-col :xs="24" :sm="12" :lg="12">
           <div class="main-detail">
-            <div class="title">订单信息</div>
+            <h3>订单信息</h3>
             <div class="item">
               <div class="label">收货人信息：</div>
               <div class="value">{{ orderDetail.receUserName }} ({{ orderDetail.recePhone }})</div>
@@ -131,44 +132,50 @@
       </el-row>
     </div>
 
-    <div class="order-detail" v-if="orderDetail.orderOldProductDTOList && orderDetail.orderOldProductDTOList.length > 0" style="margin-bottom: 20px;">
-      <!-- 回收 -->
-      <el-table :data="orderDetail.orderOldProductDTOList" style="width: 100%;" size="small" border>
-        <el-table-column prop="mainName" label="大类" align="center"></el-table-column>
-        <el-table-column prop="smallName" label="小类" align="center"></el-table-column>
-        <el-table-column prop="specName" label="型号" align="center"></el-table-column>
-        <el-table-column prop="itemList" label="属性" align="center">
-          <template slot-scope="scope">
-            {{scope.row.itemList.map(o => o.dictName).join('、')}}
-          </template>
-        </el-table-column>
-        <el-table-column prop="unit" label="单位" align="center">
-          <template>台</template>
-        </el-table-column>
-        <el-table-column prop="num" label="数量" align="center"></el-table-column>
-        <el-table-column prop="payAmount" label="旧机金额" align="center"></el-table-column>
-        <el-table-column prop="yjhxDkFlag" label="支付方式" align="center">
-          <template slot-scope="scope">
-            {{ {1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值'}[scope.row.yjhxDkFlag] }}
-          </template>
-        </el-table-column>
-      </el-table>
+    <div v-if="orderDetail.orderOldProductDTOList && orderDetail.orderOldProductDTOList.length > 0" style="margin-bottom: 30px;">
+      <h3>旧机信息</h3>
+      <div class="order-detail">
+        <!-- 回收 -->
+        <el-table :data="orderDetail.orderOldProductDTOList" style="width: 100%;" size="small" border>
+          <el-table-column prop="mainName" label="大类" align="center"></el-table-column>
+          <el-table-column prop="smallName" label="小类" align="center"></el-table-column>
+          <el-table-column prop="specName" label="型号" align="center"></el-table-column>
+          <el-table-column prop="itemList" label="属性" align="center">
+            <template slot-scope="scope">
+              {{scope.row.itemList.map(o => o.dictName).join('、')}}
+            </template>
+          </el-table-column>
+          <el-table-column prop="unit" label="单位" align="center">
+            <template>台</template>
+          </el-table-column>
+          <el-table-column prop="num" label="数量" align="center"></el-table-column>
+          <el-table-column prop="payAmount" label="旧机金额" align="center"></el-table-column>
+          <el-table-column prop="yjhxDkFlag" label="支付方式" align="center">
+            <template slot-scope="scope">
+              {{ {1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值'}[scope.row.yjhxDkFlag] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
-    <div class="order-detail" v-if="compensateList.length > 0" style="margin-bottom: 20px;">
-      <!-- 理赔表格 -->
-      <el-table :data="compensateList" style="width: 100%;" size="small" border>
-        <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
-        <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
-        <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
-        <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
-        <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
-        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
-      </el-table>
+    <div v-if="compensateList.length > 0" style="margin-bottom: 30px;">
+      <h3>理赔信息</h3>
+      <div class="order-detail">
+        <!-- 理赔表格 -->
+        <el-table :data="compensateList" style="width: 100%;" size="small" border>
+          <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
+          <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
+          <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
+          <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
+          <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
+          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
+        </el-table>
+      </div>
     </div>
 
+    <h3>商品信息</h3>
     <div class="order-detail">
-
       <!-- 订单表格 -->
       <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
         <el-table-column label="商品信息" min-width="200">
@@ -1231,7 +1238,7 @@ export default {
 }
 
 .order-receive-info {
-  margin: 15px 0;
+  margin: 15px 0 30px;
   padding: 15px;
   background: #f5f7fa;