diff --git a/src/pagesOrder/list/components/OrderListSkeleton.vue b/src/pagesOrder/list/components/OrderListSkeleton.vue
index 5343e42..c404529 100644
--- a/src/pagesOrder/list/components/OrderListSkeleton.vue
+++ b/src/pagesOrder/list/components/OrderListSkeleton.vue
@@ -97,7 +97,11 @@
   </view>
 </template>
 
-<style>
+<style lang="scss">
+/* #ifdef H5 */
+@import './orderList.scss';
+/* #endif */
+
 .sk-transparent {
   color: transparent !important;
 }
diff --git a/src/pagesOrder/list/components/orderList.scss b/src/pagesOrder/list/components/orderList.scss
new file mode 100644
index 0000000..fbd0dc5
--- /dev/null
+++ b/src/pagesOrder/list/components/orderList.scss
@@ -0,0 +1,178 @@
+// 订单列表
+.orders {
+  .card {
+    min-height: 100rpx;
+    padding: 20rpx;
+    margin: 20rpx 20rpx 0;
+    border-radius: 10rpx;
+    background-color: #fff;
+
+    &:last-child {
+      padding-bottom: 40rpx;
+    }
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 28rpx;
+    color: #999;
+    margin-bottom: 15rpx;
+
+    .date {
+      color: #666;
+      flex: 1;
+    }
+
+    .primary {
+      color: #ff9240;
+    }
+
+    .icon-delete {
+      line-height: 1;
+      margin-left: 10rpx;
+      padding-left: 10rpx;
+      border-left: 1rpx solid #e3e3e3;
+    }
+  }
+
+  .goods {
+    display: flex;
+    margin-bottom: 20rpx;
+
+    .cover {
+      width: 170rpx;
+      height: 170rpx;
+      margin-right: 20rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+      position: relative;
+      .image {
+        width: 170rpx;
+        height: 170rpx;
+      }
+    }
+
+    .quantity {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      line-height: 1;
+      padding: 6rpx 4rpx 6rpx 8rpx;
+      font-size: 24rpx;
+      color: #fff;
+      border-radius: 10rpx 0 0 0;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .meta {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .name {
+      height: 80rpx;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .type {
+      line-height: 1.8;
+      padding: 0 15rpx;
+      margin-top: 10rpx;
+      font-size: 24rpx;
+      align-self: flex-start;
+      border-radius: 4rpx;
+      color: #888;
+      background-color: #f7f7f8;
+    }
+
+    .more {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22rpx;
+      color: #333;
+    }
+  }
+
+  .payment {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    line-height: 1;
+    padding: 20rpx 0;
+    text-align: right;
+    color: #999;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #eee;
+
+    .quantity {
+      font-size: 24rpx;
+      margin-right: 16rpx;
+    }
+
+    .amount {
+      color: #444;
+      margin-left: 6rpx;
+    }
+
+    .symbol {
+      font-size: 20rpx;
+    }
+  }
+
+  .action {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 20rpx;
+
+    .time {
+      color: #999;
+      font-size: 24rpx;
+      margin-right: 20rpx;
+    }
+
+    .button {
+      width: 180rpx;
+      height: 60rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 20rpx;
+      border-radius: 60rpx;
+      border: 1rpx solid #ccc;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .secondary {
+      color: #27ba9b;
+      border-color: #27ba9b;
+    }
+
+    .primary {
+      color: #fff;
+      background-color: #27ba9b;
+      border-color: #27ba9b;
+    }
+
+    .disabled {
+      color: #ccc;
+      background-color: #f7f7f8;
+      border-color: #eee;
+    }
+  }
+
+  .loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
+  }
+}
\ No newline at end of file
diff --git a/src/pagesOrder/list/components/orderList.vue b/src/pagesOrder/list/components/orderList.vue
index da067aa..32713f4 100644
--- a/src/pagesOrder/list/components/orderList.vue
+++ b/src/pagesOrder/list/components/orderList.vue
@@ -167,182 +167,5 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss">
-// 订单列表
-.orders {
-  .card {
-    min-height: 100rpx;
-    padding: 20rpx;
-    margin: 20rpx 20rpx 0;
-    border-radius: 10rpx;
-    background-color: #fff;
-
-    &:last-child {
-      padding-bottom: 40rpx;
-    }
-  }
-
-  .status {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 28rpx;
-    color: #999;
-    margin-bottom: 15rpx;
-
-    .date {
-      color: #666;
-      flex: 1;
-    }
-
-    .primary {
-      color: #ff9240;
-    }
-
-    .icon-delete {
-      line-height: 1;
-      margin-left: 10rpx;
-      padding-left: 10rpx;
-      border-left: 1rpx solid #e3e3e3;
-    }
-  }
-
-  .goods {
-    display: flex;
-    margin-bottom: 20rpx;
-
-    .cover {
-      width: 170rpx;
-      height: 170rpx;
-      margin-right: 20rpx;
-      border-radius: 10rpx;
-      overflow: hidden;
-      position: relative;
-      .image {
-        width: 170rpx;
-        height: 170rpx;
-      }
-    }
-
-    .quantity {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      line-height: 1;
-      padding: 6rpx 4rpx 6rpx 8rpx;
-      font-size: 24rpx;
-      color: #fff;
-      border-radius: 10rpx 0 0 0;
-      background-color: rgba(0, 0, 0, 0.6);
-    }
-
-    .meta {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .name {
-      height: 80rpx;
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .type {
-      line-height: 1.8;
-      padding: 0 15rpx;
-      margin-top: 10rpx;
-      font-size: 24rpx;
-      align-self: flex-start;
-      border-radius: 4rpx;
-      color: #888;
-      background-color: #f7f7f8;
-    }
-
-    .more {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 22rpx;
-      color: #333;
-    }
-  }
-
-  .payment {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    line-height: 1;
-    padding: 20rpx 0;
-    text-align: right;
-    color: #999;
-    font-size: 28rpx;
-    border-bottom: 1rpx solid #eee;
-
-    .quantity {
-      font-size: 24rpx;
-      margin-right: 16rpx;
-    }
-
-    .amount {
-      color: #444;
-      margin-left: 6rpx;
-    }
-
-    .symbol {
-      font-size: 20rpx;
-    }
-  }
-
-  .action {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding-top: 20rpx;
-
-    .time {
-      color: #999;
-      font-size: 24rpx;
-      margin-right: 20rpx;
-    }
-
-    .button {
-      width: 180rpx;
-      height: 60rpx;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 20rpx;
-      border-radius: 60rpx;
-      border: 1rpx solid #ccc;
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .secondary {
-      color: #27ba9b;
-      border-color: #27ba9b;
-    }
-
-    .primary {
-      color: #fff;
-      background-color: #27ba9b;
-      border-color: #27ba9b;
-    }
-
-    .disabled {
-      color: #ccc;
-      background-color: #f7f7f8;
-      border-color: #eee;
-    }
-  }
-
-  .loading-text {
-    text-align: center;
-    font-size: 28rpx;
-    color: #666;
-    padding: 20rpx 0;
-  }
-}
+@import './orderList.scss';
 </style>