diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss
new file mode 100644
index 0000000..ad8a7b2
--- /dev/null
+++ b/src/pages/order/components/kindList/index.module.scss
@@ -0,0 +1,100 @@
+.orders_list_con{
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    .order_list{
+        &:nth-child(n+2) {
+            margin-top: 30px;
+        }
+        .order_list_title{
+            display: flex;
+            align-items: center;
+            .tag{
+                font-size: $font_size_min;
+                background-color: #CDE5FF;
+                padding: 5px 10px;
+                border-radius: 6px;
+                color: $color_main;
+            }
+            .title{
+                font-weight: 700;
+                font-size: $font_size;
+                margin-left: 20px;
+                flex:1;
+            }
+            .num{
+                color: $color_font_two;
+                font-size: $font_size_min;
+            }
+        }
+    }
+    .order_list_scroll{
+        margin-top: 30px;
+        
+        .order_list_item {
+            display: flex;
+            &:nth-child(2) {
+                margin-top: 30px;
+            }
+            .order_list_item_img{
+                width: 126px;
+                height: 126px;
+                border-radius: 20px;
+                background-color: red;
+            }
+            .order_list_item_con{
+                display: flex;
+                width: 100%;
+                flex:1;
+                border-bottom: 1px solid #f0f0f0;
+                height: 150px;
+                padding-top: 20px;
+                box-sizing: border-box;
+            }
+            .order_list_item_des{
+                flex:1;
+                box-sizing: border-box;
+                padding-left: 30px;
+                .order_list_item_title{
+                    font-weight: 700;
+                    font-size: $font_size;
+                    margin-bottom: 15px;
+                }
+                .order_list_item_price{
+                    font-size: 26px;
+                    color: $color_font_three;
+                }
+            }
+            .order_list_item_count{
+                .count_num{
+                    color: $color_main;
+                    font-size: $font_size;
+                    margin-bottom: 15px;
+                    font-weight: 400;
+                    text{
+                        font-size: $font_size_min;
+                    }
+                }
+                .count_price {
+                    font-size: $font_size;
+                    font-weight: 700;
+                    text{
+                        font-size: $font_size_min;
+                    }
+                }
+            }
+        }
+    }
+
+    .order_estimated_amount{
+        display: flex;
+        align-items: flex-end;
+        flex-direction: column;
+        padding: 30px 0;
+        .order_price_des{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+        }
+    }
+}
diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx
new file mode 100644
index 0000000..17d026a
--- /dev/null
+++ b/src/pages/order/components/kindList/index.tsx
@@ -0,0 +1,88 @@
+import { View } from "@tarojs/components"
+import { useState } from "react"
+import EstimatedAmount from "../estimatedAmount"
+import styles  from './index.module.scss'
+
+export default () => {
+    const [price, setPrice] = useState(123000.33)
+    return (
+        <>
+            <View className={styles.orders_list_con}>
+                <View className={styles.order_list}>
+                    <View className={styles.order_list_title}>
+                        <View className={styles.tag}>大货</View>
+                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
+                        <View className={styles.num}>共3种</View>
+                    </View>
+                    <View className={styles.order_list_scroll}>
+                        <View className={styles.order_list_item}>
+                            <View className={styles.order_list_item_img}></View>
+                            <View className={styles.order_list_item_con}>
+                                <View className={styles.order_list_item_des}>
+                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
+                                    <View className={styles.order_list_item_price}>¥40/kg</View>
+                                </View>
+                                <View className={styles.order_list_item_count}>
+                                    <View className={styles.count_num}>×1<text>条</text></View>
+                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
+                                </View>
+                            </View>
+                        </View>
+                        <View className={styles.order_list_item}>
+                            <View className={styles.order_list_item_img}></View>
+                            <View className={styles.order_list_item_con}>
+                                <View className={styles.order_list_item_des}>
+                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
+                                    <View className={styles.order_list_item_price}>¥40/kg</View>
+                                </View>
+                                <View className={styles.order_list_item_count}>
+                                    <View className={styles.count_num}>×1<text>条</text></View>
+                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.order_list}>
+                    <View className={styles.order_list_title}>
+                        <View className={styles.tag}>大货</View>
+                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
+                        <View className={styles.num}>共3种</View>
+                    </View>
+                    <View className={styles.order_list_scroll}>
+                        <View className={styles.order_list_item}>
+                            <View className={styles.order_list_item_img}></View>
+                            <View className={styles.order_list_item_con}>
+                                <View className={styles.order_list_item_des}>
+                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
+                                    <View className={styles.order_list_item_price}>¥40/kg</View>
+                                </View>
+                                <View className={styles.order_list_item_count}>
+                                    <View className={styles.count_num}>×1<text>条</text></View>
+                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
+                                </View>
+                            </View>
+                        </View>
+                        <View className={styles.order_list_item}>
+                            <View className={styles.order_list_item_img}></View>
+                            <View className={styles.order_list_item_con}>
+                                <View className={styles.order_list_item_des}>
+                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
+                                    <View className={styles.order_list_item_price}>¥40/kg</View>
+                                </View>
+                                <View className={styles.order_list_item_count}>
+                                    <View className={styles.count_num}>×1<text>条</text></View>
+                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.order_estimated_amount}>
+                    <EstimatedAmount number={price}/>    
+                    <View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
+                </View>
+            </View>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss
index b8c8cb1..ee30d79 100644
--- a/src/pages/order/index.module.scss
+++ b/src/pages/order/index.module.scss
@@ -54,105 +54,7 @@
             font-size: $font_size;
         }
     }
-    .orders_list_con{
-        margin-top: 20px;
-        background-color: #fff;
-        border-radius: 20px;
-        padding: 20px;
-    }
-    .order_list{
-        &:nth-child(n+2) {
-            margin-top: 30px;
-        }
-        .order_list_title{
-            display: flex;
-            align-items: center;
-            .tag{
-                font-size: $font_size_min;
-                background-color: #CDE5FF;
-                padding: 5px 10px;
-                border-radius: 6px;
-                color: $color_main;
-            }
-            .title{
-                font-weight: 700;
-                font-size: $font_size;
-                margin-left: 20px;
-                flex:1;
-            }
-            .num{
-                color: $color_font_two;
-                font-size: $font_size_min;
-            }
-        }
-    }
-    .order_list_scroll{
-        margin-top: 30px;
-        
-        .order_list_item {
-            display: flex;
-            &:nth-child(2) {
-                margin-top: 30px;
-            }
-            .order_list_item_img{
-                width: 126px;
-                height: 126px;
-                border-radius: 20px;
-                background-color: red;
-            }
-            .order_list_item_con{
-                display: flex;
-                width: 100%;
-                flex:1;
-                border-bottom: 1px solid #f0f0f0;
-                height: 150px;
-                padding-top: 20px;
-                box-sizing: border-box;
-            }
-            .order_list_item_des{
-                flex:1;
-                box-sizing: border-box;
-                padding-left: 30px;
-                .order_list_item_title{
-                    font-weight: 700;
-                    font-size: $font_size;
-                    margin-bottom: 15px;
-                }
-                .order_list_item_price{
-                    font-size: 26px;
-                    color: $color_font_three;
-                }
-            }
-            .order_list_item_count{
-                .count_num{
-                    color: $color_main;
-                    font-size: $font_size;
-                    margin-bottom: 15px;
-                    font-weight: 400;
-                    text{
-                        font-size: $font_size_min;
-                    }
-                }
-                .count_price {
-                    font-size: $font_size;
-                    font-weight: 700;
-                    text{
-                        font-size: $font_size_min;
-                    }
-                }
-            }
-        }
-    }
-    .order_estimated_amount{
-        display: flex;
-        align-items: flex-end;
-        flex-direction: column;
-        padding: 30px 0;
-        .order_price_des{
-            font-size: $font_size_medium;
-            color: $color_font_two;
-        }
-    }
+
     .order_desc{
         display: flex;
         align-items: center;
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 1e3dea4..8d9b365 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -2,6 +2,7 @@ import { Text, View } from "@tarojs/components"
 import classnames from "classnames";
 import { useEffect, useState } from "react";
 import EstimatedAmount from "./components/estimatedAmount";
+import KindList from "./components/kindList";
 import styles  from './index.module.scss'
  
  export default () => {
@@ -19,82 +20,7 @@ import styles  from './index.module.scss'
                 <View className={styles.order_address_text}>请选择收货地址及信息</View>
                 <View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
             </View>
-            <View className={styles.orders_list_con}>
-                <View className={styles.order_list}>
-                    <View className={styles.order_list_title}>
-                        <View className={styles.tag}>大货</View>
-                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
-                        <View className={styles.num}>共3种</View>
-                    </View>
-                    <View className={styles.order_list_scroll}>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                    </View>
-                </View>
-                <View className={styles.order_list}>
-                    <View className={styles.order_list_title}>
-                        <View className={styles.tag}>大货</View>
-                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
-                        <View className={styles.num}>共3种</View>
-                    </View>
-                    <View className={styles.order_list_scroll}>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                    </View>
-                </View>
-                <View className={styles.order_estimated_amount}>
-                    <EstimatedAmount number={price}/>    
-                    <View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
-                </View>
-            </View>
+            <KindList/>
             <View className={styles.order_desc}>
                 <View className={styles.order_desc_con}>订单备注</View>
                 <View className={styles.order_desc_text}>点击填写</View>