改为PageLayout布局

src/components/detail/BasicDetail.vue

@@ -1,38 +1,38 @@
 <template>
-  <div>
-    <a-card :bordered="false">
-      <detail-list title="退款详情">
-        <detail-list-item term="取货单号">1000000000</detail-list-item>
-        <detail-list-item term="状态">已取货</detail-list-item>
-        <detail-list-item term="销售单号">987654321</detail-list-item>
-        <detail-list-item term="子订单">1234567890</detail-list-item>
-      </detail-list>
-      <a-divider style="margin-bottom: 32px"/>
-      <detail-list title="用户信息">
-        <detail-list-item term="用户姓名">付小小</detail-list-item>
-        <detail-list-item term="联系电话">18100000001</detail-list-item>
-        <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
-        <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路19号</detail-list-item>
-        <detail-list-item term="备注">无</detail-list-item>
-      </detail-list>
-      <a-divider style="margin-bottom: 32px"/>
-      <div class="title">退货商品</div>
-      <a-table
-        style="margin-bottom: 24px"
-        :columns="goodsColumns"
-        :dataSource="goodsData"
-        :pagination="false"
-      >
-      </a-table>
-      <div class="title">退货进度</div>
-      <a-table
-        :columns="scheduleColumns"
-        :dataSource="scheduleData"
-        :pagination="false"
-      >
-      </a-table>
-    </a-card>
-  </div>
+    <page-layout title="基础详情页">
+      <a-card :bordered="false">
+        <detail-list title="退款详情">
+          <detail-list-item term="取货单号">1000000000</detail-list-item>
+          <detail-list-item term="状态">已取货</detail-list-item>
+          <detail-list-item term="销售单号">987654321</detail-list-item>
+          <detail-list-item term="子订单">1234567890</detail-list-item>
+        </detail-list>
+        <a-divider style="margin-bottom: 32px"/>
+        <detail-list title="用户信息">
+          <detail-list-item term="用户姓名">付小小</detail-list-item>
+          <detail-list-item term="联系电话">18100000001</detail-list-item>
+          <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
+          <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路19号</detail-list-item>
+          <detail-list-item term="备注">无</detail-list-item>
+        </detail-list>
+        <a-divider style="margin-bottom: 32px"/>
+        <div class="title">退货商品</div>
+        <a-table
+          style="margin-bottom: 24px"
+          :columns="goodsColumns"
+          :dataSource="goodsData"
+          :pagination="false"
+        >
+        </a-table>
+        <div class="title">退货进度</div>
+        <a-table
+          :columns="scheduleColumns"
+          :dataSource="scheduleData"
+          :pagination="false"
+        >
+        </a-table>
+      </a-card>
+    </page-layout>
 </template>
 
 <script>
@@ -42,6 +42,7 @@ import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
 import DetailList from '../tool/DetailList'
 import ADivider from 'vue-antd-ui/es/divider/index'
 import ATable from 'vue-antd-ui/es/table'
+import PageLayout from '../layout/PageLayout'
 
 const DetailListItem = DetailList.Item
 
@@ -189,7 +190,7 @@ const scheduleData = [
 
 export default {
   name: 'BasicDetail',
-  components: {ATable, ADivider, DetailListItem, DetailList, AAvatar, ATooltip, ACard},
+  components: {PageLayout, ATable, ADivider, DetailListItem, DetailList, AAvatar, ATooltip, ACard},
   data () {
     return {
       goodsColumns,