diff --git a/frontend/admin/src/pages/order/invoice/index.vue b/frontend/admin/src/pages/order/invoice/index.vue
index 586850619..e93357e12 100644
--- a/frontend/admin/src/pages/order/invoice/index.vue
+++ b/frontend/admin/src/pages/order/invoice/index.vue
@@ -252,7 +252,6 @@
         <el-form-item label="发票备注：" v-if="formInline.is_invoice === 1">
           <el-input
             v-model="formInline.remark"
-            value="备注"
             type="textarea"
             :autosize="{ minRows: 2, maxRows: 5 }"
             placeholder="请输入发票备注"
@@ -263,9 +262,9 @@
         </div>
       </el-form>
     </el-dialog>
-    <el-dialog v-model="orderShow" title="订单详情" class="order_box" width="720px">
-      <orderDetall :orderId="orderId" @detall="detall" v-if="orderShow"></orderDetall>
-    </el-dialog>
+    <el-drawer v-model="orderShow" title="订单详情" size="720px" class="order-detail-drawer">
+      <OrderCenterDetail v-if="orderShow" :id="orderId" />
+    </el-drawer>
     <el-dialog
       v-model="invoiceModalShow"
       title="发票信息"
@@ -283,7 +282,7 @@ import { computed, ref } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useMediaStore } from '@/store/module/media';
-import orderDetall from './orderDetall';
+import OrderCenterDetail from '@/pages/order/orderCenter/detail.vue';
 import {
   orderInvoiceChart,
   orderInvoiceList,
@@ -388,10 +387,6 @@ function handleMessage(event) {
   }
 }
 
-function detall(e) {
-  orderShow.value = e;
-}
-
 function orderInfo(id) {
   orderId.value = id;
   orderShow.value = true;
@@ -543,4 +538,7 @@ function onClickTab() {
   color: var(--prev-color-primary);
   cursor: pointer;
 }
+:deep(.order-detail-drawer .el-drawer__body) {
+  padding: 20px 0 !important;
+}
 </style>
diff --git a/frontend/admin/src/pages/order/invoice/orderDetall.vue b/frontend/admin/src/pages/order/invoice/orderDetall.vue
deleted file mode 100644
index c37631c17..000000000
--- a/frontend/admin/src/pages/order/invoice/orderDetall.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <div class="order_detail" v-loading="spinShow" v-if="orderDetail.userInfo">
-    <div class="msg-box">
-      <div class="box-title">收货信息</div>
-      <div class="msg-wrapper">
-        <div class="msg-item">
-          <div class="item"><span>用户昵称：</span>{{ orderDetail.userInfo.nickname }}</div>
-          <div class="item"><span>收货人：</span>{{ orderDetail.orderInfo.real_name }}</div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>联系电话：</span>{{ orderDetail.orderInfo.user_phone }}</div>
-          <div class="item"><span>收货地址：</span>{{ orderDetail.orderInfo.user_address }}</div>
-        </div>
-      </div>
-    </div>
-    <div class="msg-box" style="border: none">
-      <div class="box-title">订单信息</div>
-      <div class="msg-wrapper">
-        <div class="msg-item">
-          <div class="item"><span>订单ID：</span>{{ orderDetail.orderInfo.order_id }}</div>
-          <div class="item" style="color: red">
-            <span style="color: red">订单状态：</span>{{ orderDetail.orderInfo._status._title }}
-          </div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>商品总数：</span>{{ orderDetail.orderInfo.total_num }}</div>
-          <div class="item">
-            <span>商品总价：</span
-            >{{ parseFloat(orderDetail.orderInfo.total_price) + parseFloat(orderDetail.orderInfo.vip_true_price || 0) }}
-          </div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>交付邮费：</span>{{ orderDetail.orderInfo.pay_postage }}</div>
-          <div class="item"><span>优惠券金额：</span>{{ orderDetail.orderInfo.coupon_price }}</div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>会员商品优惠：</span>{{ orderDetail.orderInfo.vip_true_price || 0.0 }}</div>
-          <div class="item"><span>积分抵扣：</span>{{ orderDetail.orderInfo.deduction_price || 0.0 }}</div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>实际支付：</span>{{ orderDetail.orderInfo.pay_price }}</div>
-          <div class="item"><span>创建时间：</span>{{ orderDetail.orderInfo.add_time }}</div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>支付方式：</span>{{ orderDetail.orderInfo._status._payType }}</div>
-          <div class="item"><span>推广人：</span>{{ orderDetail.userInfo.spread_name }}</div>
-        </div>
-        <div class="msg-item">
-          <div class="item"><span>商家备注：</span>{{ orderDetail.orderInfo.mark }}</div>
-        </div>
-      </div>
-    </div>
-    <div class="goods-box">
-      <el-table :data="orderList">
-        <el-table-column label="商品ID" width="80">
-          <template #default="scope">
-            <span>{{ scope.row.productInfo.id }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="商品名称" min-width="160">
-          <template #default="scope">
-            <div class="product_info">
-              <img :src="scope.row.productInfo.image" alt="" />
-              <p>{{ scope.row.productInfo.store_name }}</p>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="商品分类" min-width="160">
-          <template #default="scope">
-            <div>{{ scope.row.class_name }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="商品售价" min-width="160">
-          <template #default="scope">
-            <div>{{ scope.row.productInfo.price }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="商品数量" min-width="160">
-          <template #default="scope">
-            <div>{{ scope.row.cart_num }}</div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { orderInvoiceInfo } from '@/api/order';
-
-defineOptions({ name: 'order_detail' });
-
-const props = defineProps({
-  orderId: {
-    type: [String, Number],
-    default: '',
-  },
-});
-
-const emit = defineEmits(['detall']);
-
-const orderDetail = ref({});
-const orderList = ref([]);
-const spinShow = ref(false);
-
-function getOrderInfo() {
-  spinShow.value = true;
-  orderInvoiceInfo(props.orderId)
-    .then((res) => {
-      spinShow.value = false;
-      orderDetail.value = res.data;
-      orderList.value = res.data.orderInfo.cartInfo;
-    })
-    .catch((err) => {
-      spinShow.value = false;
-      ElMessage.error(err.msg);
-      emit('detall', false);
-    });
-}
-
-onMounted(() => {
-  getOrderInfo();
-});
-</script>
-
-<style lang="scss" scoped>
-.order_detail {
-  .msg-box {
-    border-bottom: 1px solid #e8eaed;
-
-    .box-title {
-      padding-top: 20px;
-      font-size: 15px;
-      font-weight: 500;
-      color: var(--prev-color-text-regular);
-      line-height: 15px;
-    }
-
-    .msg-wrapper {
-      margin-top: 15px;
-      padding-bottom: 10px;
-
-      .msg-item {
-        display: flex;
-
-        .item {
-          flex: 1;
-          margin-bottom: 15px;
-          color: var(--prev-color-text-primary);
-          font-size: 13px;
-          span {
-            font-size: 13px;
-            font-weight: 400;
-            color: var(--prev-color-text-secondary);
-          }
-        }
-      }
-    }
-
-    &:first-child .box-title {
-      padding-top: 0;
-    }
-  }
-
-  .product_info {
-    display: flex;
-    align-items: center;
-
-    img {
-      width: 36px;
-      height: 36px;
-      border-radius: 4px;
-      margin-right: 10px;
-    }
-  }
-}
-</style>