diff --git a/src/pagesOrder/detail/components/PageSkeleton.vue b/src/pagesOrder/detail/components/PageSkeleton.vue
index e69de29..87c3960 100644
--- a/src/pagesOrder/detail/components/PageSkeleton.vue
+++ b/src/pagesOrder/detail/components/PageSkeleton.vue
@@ -0,0 +1,454 @@
+
+
+
+ 等待付款
+
+ 应付金额: ¥ 99.00
+ 支付剩余
+
+
+ 00
+ 时
+ 29
+ 分
+ 36
+ 秒
+
+
+
+ 去支付
+
+
+
+ 马斯克 13900139000
+ 北京市 北京市 西城区1122332
+
+
+
+
+
+
+
+ 亮碟多效合一洗涤块495g
+ 495g
+
+
+ ¥
+ 69.90
+
+
+ x1
+
+
+
+
+
+ 商品总价:
+ 99.00
+
+
+ 运费:
+ 0.00
+
+
+ 应付金额:
+ 69.90
+
+
+
+
+ 订单信息
+
+
+ 订单编号: 1922925007051165697
+ 复制
+
+ 下单时间: 2025-05-15 16:00:23
+
+
+
+
+ 猜你喜欢
+
+
+
+
+
+
+
+
+
+
+
+ 去支付
+ 取消订单
+
+
+
+
+
diff --git a/src/pagesOrder/detail/detail.scss b/src/pagesOrder/detail/detail.scss
new file mode 100644
index 0000000..c3c7438
--- /dev/null
+++ b/src/pagesOrder/detail/detail.scss
@@ -0,0 +1,435 @@
+page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.navbar {
+ width: 750rpx;
+ color: #000;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9;
+ /* background-color: #f8f8f8; */
+ background-color: transparent;
+
+ .wrap {
+ position: relative;
+
+ .title {
+ height: 44px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 32rpx;
+ /* color: #000; */
+ color: transparent;
+ }
+
+ .back {
+ position: absolute;
+ left: 0;
+ height: 44px;
+ width: 44px;
+ font-size: 44rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* color: #000; */
+ color: #fff;
+ }
+ }
+}
+
+.viewport {
+ background-color: #f7f7f8;
+}
+
+.overview {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ line-height: 1;
+ padding-bottom: 30rpx;
+ color: #fff;
+ background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
+ background-size: cover;
+
+ .status {
+ font-size: 36rpx;
+ }
+
+ .status::before {
+ margin-right: 6rpx;
+ font-weight: 500;
+ }
+
+ .tips {
+ margin: 30rpx 0;
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+
+ .money {
+ margin-right: 30rpx;
+ }
+ }
+
+ .button-group {
+ margin-top: 30rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .button {
+ width: 260rpx;
+ height: 64rpx;
+ margin: 0 10rpx;
+ text-align: center;
+ line-height: 64rpx;
+ font-size: 28rpx;
+ color: #27ba9b;
+ border-radius: 68rpx;
+ background-color: #fff;
+ }
+}
+
+.shipment {
+ line-height: 1.4;
+ padding: 0 20rpx;
+ margin: 20rpx 20rpx 0;
+ border-radius: 10rpx;
+ background-color: #fff;
+
+ .locate,
+ .item {
+ min-height: 120rpx;
+ padding: 30rpx 30rpx 25rpx 75rpx;
+ background-size: 50rpx;
+ background-repeat: no-repeat;
+ background-position: 6rpx center;
+ }
+
+ .locate {
+ background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
+
+ .user {
+ font-size: 26rpx;
+ color: #444;
+ }
+
+ .address {
+ font-size: 24rpx;
+ color: #666;
+ }
+ }
+
+ .item {
+ background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
+ border-bottom: 1rpx solid #eee;
+ position: relative;
+
+ .message {
+ font-size: 26rpx;
+ color: #444;
+ }
+
+ .date {
+ font-size: 24rpx;
+ color: #666;
+ }
+ }
+}
+
+.goods {
+ margin: 20rpx 20rpx 0;
+ padding: 0 20rpx;
+ border-radius: 10rpx;
+ background-color: #fff;
+
+ .item {
+ padding: 30rpx 0;
+ border-bottom: 1rpx solid #eee;
+
+ .navigator {
+ display: flex;
+ margin: 20rpx 0;
+ }
+
+ .cover {
+ width: 170rpx;
+ height: 170rpx;
+ border-radius: 10rpx;
+ margin-right: 20rpx;
+ }
+
+ .meta {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ }
+
+ .name {
+ height: 80rpx;
+ font-size: 26rpx;
+ color: #444;
+ }
+
+ .type {
+ line-height: 1.8;
+ padding: 0 15rpx;
+ margin-top: 6rpx;
+ font-size: 24rpx;
+ align-self: flex-start;
+ border-radius: 4rpx;
+ color: #888;
+ background-color: #f7f7f8;
+ }
+
+ .price {
+ display: flex;
+ margin-top: 6rpx;
+ font-size: 24rpx;
+ }
+
+ .symbol {
+ font-size: 20rpx;
+ }
+
+ .original {
+ color: #999;
+ text-decoration: line-through;
+ }
+
+ .actual {
+ margin-left: 10rpx;
+ color: #444;
+ }
+
+ .text {
+ font-size: 22rpx;
+ }
+
+ .quantity {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ font-size: 24rpx;
+ color: #444;
+ }
+
+ .action {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-start;
+ padding: 30rpx 0 0;
+
+ .button {
+ width: 200rpx;
+ height: 60rpx;
+ text-align: center;
+ justify-content: center;
+ line-height: 60rpx;
+ margin-left: 20rpx;
+ border-radius: 60rpx;
+ border: 1rpx solid #ccc;
+ font-size: 26rpx;
+ color: #444;
+ }
+
+ .primary {
+ color: #27ba9b;
+ border-color: #27ba9b;
+ }
+ }
+ }
+
+ .total {
+ line-height: 1;
+ font-size: 26rpx;
+ padding: 20rpx 0;
+ color: #666;
+
+ .row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10rpx 0;
+ }
+
+ .symbol::before {
+ content: '¥';
+ font-size: 80%;
+ margin-right: 3rpx;
+ }
+
+ .primary {
+ color: #cf4444;
+ font-size: 36rpx;
+ }
+ }
+}
+
+.detail {
+ line-height: 1;
+ padding: 30rpx 20rpx 0;
+ margin: 20rpx 20rpx 0;
+ font-size: 26rpx;
+ color: #666;
+ border-radius: 10rpx;
+ background-color: #fff;
+
+ .title {
+ font-size: 30rpx;
+ color: #444;
+ }
+
+ .row {
+ padding: 20rpx 0;
+
+ .item {
+ padding: 10rpx 0;
+ display: flex;
+ align-items: center;
+ }
+
+ .copy {
+ border-radius: 20rpx;
+ font-size: 20rpx;
+ border: 1px solid #ccc;
+ padding: 5rpx 10rpx;
+ margin-left: 10rpx;
+ }
+ }
+}
+
+.toolbar-height {
+ height: 100rpx;
+ box-sizing: content-box;
+}
+
+.toolbar {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: calc(var(--window-bottom));
+ z-index: 1;
+
+ height: 100rpx;
+ padding: 0 20rpx;
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+ border-top: 1rpx solid #ededed;
+ border-bottom: 1rpx solid #ededed;
+ background-color: #fff;
+ box-sizing: content-box;
+
+ .button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 200rpx;
+ height: 72rpx;
+ margin-left: 15rpx;
+ font-size: 26rpx;
+ border-radius: 72rpx;
+ border: 1rpx solid #ccc;
+ color: #444;
+ }
+
+ .delete {
+ order: 4;
+ }
+
+ .button {
+ order: 3;
+ }
+
+ .secondary {
+ order: 2;
+ color: #27ba9b;
+ border-color: #27ba9b;
+ }
+
+ .primary {
+ order: 1;
+ color: #fff;
+ background-color: #27ba9b;
+ }
+}
+
+.popup-root {
+ padding: 30rpx 30rpx 0;
+ border-radius: 10rpx 10rpx 0 0;
+ overflow: hidden;
+
+ .title {
+ font-size: 30rpx;
+ text-align: center;
+ margin-bottom: 30rpx;
+ }
+
+ .description {
+ font-size: 28rpx;
+ padding: 0 20rpx;
+
+ .tips {
+ color: #444;
+ margin-bottom: 12rpx;
+ }
+
+ .cell {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15rpx 0;
+ color: #666;
+ }
+
+ .icon::before {
+ content: '\e6cd';
+ font-family: 'erabbit' !important;
+ font-size: 38rpx;
+ color: #999;
+ }
+
+ .icon.checked::before {
+ content: '\e6cc';
+ font-size: 38rpx;
+ color: #27ba9b;
+ }
+ }
+
+ .footer {
+ display: flex;
+ justify-content: space-between;
+ padding: 30rpx 0 40rpx;
+ font-size: 28rpx;
+ color: #444;
+
+ .button {
+ flex: 1;
+ height: 72rpx;
+ text-align: center;
+ line-height: 72rpx;
+ margin: 0 20rpx;
+ color: #444;
+ border-radius: 72rpx;
+ border: 1rpx solid #ccc;
+ }
+
+ .primary {
+ color: #fff;
+ background-color: #27ba9b;
+ border: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pagesOrder/detail/detail.vue b/src/pagesOrder/detail/detail.vue
index 483ac24..dc999e6 100644
--- a/src/pagesOrder/detail/detail.vue
+++ b/src/pagesOrder/detail/detail.vue
@@ -221,6 +221,7 @@