diff --git a/java-mall-app-shop-admin/pages/order/components/OrderItem.vue b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
new file mode 100644
index 0000000..78ac710
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
@@ -0,0 +1,301 @@
+<template>
+  <view class="order_item">
+    <view class="expresser">
+      <view class="header">#<text>38</text></view>
+      <view class="body">
+        <view class="item info">
+          <view class="name"> 谭金宇 </view>
+          <view class="btn_call"> 催快递 </view>
+        </view>
+        <view class="item time">立即送达/07-29 20:21前送达</view>
+      </view>
+      <view class="footer">
+        <view class="status">已接单</view>
+      </view>
+    </view>
+
+    <view class="user">
+      <view class="header">
+        <view class="info">
+          <view class="name">谢能坤</view>
+          <view class="mobile">13128997057</view>
+        </view>
+        <view class="box">
+          <view class="btn_call">联系顾客</view>
+        </view>
+      </view>
+      <view class="body">
+        <view class="info">
+          广西壮族自治区贵港市桂平市中山南路中山医院斜对面烧鹅大厦 8楼801
+        </view>
+        <view class="box">
+          <view class="btn_map"></view>
+        </view>
+      </view>
+      <view class="footer">
+        <view class="info"><text>备注:</text>不需要筷子，小哥请送到驿站</view>
+      </view>
+    </view>
+
+    <view class="goods">
+      <view class="body">
+        <view class="info">
+          <image src="111" mode="aspectFit" class="img" />
+          <image src="111" mode="aspectFit" class="img" />
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="total">共10件商品</view>
+        </view>
+      </view>
+
+      <view class="footer">
+        <view class="text">合计</view>
+        <view class="prize_type">¥</view>
+        <view class="prize_num">289.45</view>
+      </view>
+    </view>
+
+    <view class="tool">
+      <view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
+      <view class="body">
+        <view class="btn btn_cancel">取消订单</view>
+        <view class="btn btn_refund">退款</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.order_item {
+  padding: 24rpx;
+  border-radius: 10rpx;
+  background: #fff;
+  font-size: 24rpx;
+  color: #222;
+  
+.expresser {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+
+  .header {
+    text {
+      font-size: 48rpx;
+    }
+  }
+  .body {
+    flex: 1;
+    padding-left: 24rpx;
+    position: relative;
+
+      &::after{
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+      display: block;
+        content: " ";
+        width: 1px;
+ background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
+  background-size: 100% 16rpx; 
+  opacity: 0.2;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+
+      &.info{
+        margin-bottom: 8rpx;
+      }
+      .time {
+        color: rgba(34, 34, 34, 0.9);
+      }
+      .name {
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        &::before {
+          display: block;
+          content: " ";
+          width: 36rpx;
+          height: 36rpx;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: 6rpx;
+          margin-right: 12rpx;
+          background: url("@/static/icon_mt.png") no-repeat 50% 50%;
+          background-size: 28rpx 28rpx;
+        }
+      }
+      .btn_call {
+        display: flex;
+        align-items: center;
+        margin-left: 24rpx;
+        &::before {
+          display: block;
+          content: " ";
+          width: 32rpx;
+          height: 32rpx;
+          background: url("@/static/icon_phone.png") no-repeat;
+          background-size: 100%;
+        }
+      }
+    }
+  }
+  .footer{
+    width: 228rpx;
+    .status{
+text-align: center;
+font-size: 28rpx;
+font-weight: bold;
+    }
+  }
+}
+
+.user {
+  margin-bottom: 24rpx;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+    .info {
+      display: flex;
+      align-items: center;
+      .name {
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+    }
+    .btn_call {
+      display: flex;
+      align-items: center;
+      &::before {
+        display: block;
+        content: " ";
+        width: 32rpx;
+        height: 32rpx;
+        background: url("@/static/icon_phone.png") no-repeat;
+        background-size: 100%;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn_map {
+      width: 36rpx;
+      height: 36rpx;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 6rpx;
+      background: url("@/static/icon_map.png") no-repeat 50% 50%;
+      background-size: 28rpx 28rpx;
+    }
+    .box{
+      padding-left: 40rpx;
+    }
+  }
+
+  .footer{
+    .info{
+       margin: 16rpx 0 24rpx;
+      background: rgba(254, 247, 234, 0.5);
+    padding: 12rpx 24rpx;
+    border-radius: 8rpx;
+     text{
+      color: #FF801F;
+      display: inline-block;
+      margin-right: 12rpx;
+    }
+    }
+   
+    &::after{
+      display: block;
+        content: " ";
+        height: 1px;
+  background-image: linear-gradient(to right, #000 50%, transparent 20%);
+  background-size: 16rpx 100%;
+  opacity: 0.2;
+    }
+  }
+}
+
+.goods {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+  .body {
+    display: flex;
+    align-items: center;
+    .info {
+      display: flex;
+      align-items: center;
+    }
+    .img {
+      width: 96rpx;
+      height: 96rpx;
+      margin-right: 12rpx;
+      border-radius: 10rpx;
+      background: #666;
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: baseline;
+    line-height: 36rpx;
+    .text{
+      color: #666;
+    }
+    .prize_type{
+      margin-left: 14rpx;
+    }
+    .prize_num {
+      font-size: 36rpx;
+    }
+  }
+}
+
+.tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .header{
+    color: #666;
+     display: flex;
+  align-items: center;
+  .icon{
+    margin-left: 8rpx;
+  }
+  }
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn{
+      width: 132rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      text-align: center;
+      border: 1px solid #666;
+      border-radius: 8rpx;
+      margin-left: 24rpx;
+    }
+    .btn_refund{
+      border-color: $base-color;
+      color: $base-color;
+    }
+  }
+}
+}
+
+
+</style>
diff --git a/java-mall-app-shop-admin/pages/order/order.vue b/java-mall-app-shop-admin/pages/order/order.vue
index 660fa98..25dd3db 100644
--- a/java-mall-app-shop-admin/pages/order/order.vue
+++ b/java-mall-app-shop-admin/pages/order/order.vue
@@ -1179,6 +1179,8 @@
       </view>
     </u-popup>
     <u-toast ref="uToast"></u-toast>
+
+    <OrderItem></OrderItem>
   </view>
 </template>
 
@@ -1204,6 +1206,8 @@ import tuiGallery from "@/components/tui-gallery/tui-gallery.vue";
 import tuiRadio from "@/components/tui-radio/tui-radio.vue";
 import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
 import tuiSelect from "@/components/tui-select/tui-select.vue";
+
+import OrderItem from "./components/OrderItem.vue";
 export default {
   components: {
     tuiTabs,
@@ -1215,6 +1219,7 @@ export default {
     tuiRadio,
     tuiRadioGroup,
     tuiSelect,
+       OrderItem,
   },
   data() {
     return {
diff --git a/java-mall-app-shop-admin/static/icon_map.png b/java-mall-app-shop-admin/static/icon_map.png
new file mode 100644
index 0000000..1a4bf09
Binary files /dev/null and b/java-mall-app-shop-admin/static/icon_map.png differ
diff --git a/java-mall-app-shop-admin/static/icon_mt.png b/java-mall-app-shop-admin/static/icon_mt.png
new file mode 100644
index 0000000..2825fcf
Binary files /dev/null and b/java-mall-app-shop-admin/static/icon_mt.png differ
diff --git a/java-mall-app-shop-admin/static/icon_phone.png b/java-mall-app-shop-admin/static/icon_phone.png
new file mode 100644
index 0000000..f496d70
Binary files /dev/null and b/java-mall-app-shop-admin/static/icon_phone.png differ