diff --git a/README.md b/README.md
index 6efbf87..a17d104 100644
--- a/README.md
+++ b/README.md
@@ -39,9 +39,9 @@ npm run build:mp-weixin
 ### ipx 底部适配高度函数
 
 ```css
-    padding-bottom: 0;
-    padding-bottom: calc( 0 + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
-    padding-bottom: calc( 0 + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    padding-bottom: 0upx;
+    padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+    padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
 ```
 
 ### [蓝湖](https://lanhuapp.com/web/#/item/project/board?pid=9ab56cc5-0b3b-4a9c-8cd0-0cf57751010a)   
diff --git a/src/components/order_list/a_header/a_header.vue b/src/components/order_list/a_header/a_header.vue
new file mode 100644
index 0000000..ff6efc7
--- /dev/null
+++ b/src/components/order_list/a_header/a_header.vue
@@ -0,0 +1,35 @@
+<template>
+        <view class="header-container">
+            <view class="hc-view">欧轩智能羽毛球馆(永泰店)</view>
+            <view class="hc-view">使用中</view>
+        </view>
+        
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .header-container{
+        padding: 30upx 0;
+        border-bottom: 2upx solid #D8D8D8;
+        @include centerFlex(space-between);
+        .hc-view{
+            font-size: 28upx;
+            line-height: 40upx;
+            &:first-child{
+                font-weight: 500;
+                color: #1a1a1a;
+            }
+            &+.hc-view{
+                flex-shrink: 0;
+                margin-left: 10upx;
+                color: $themeColor;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/order_list/a_line/a_line.vue b/src/components/order_list/a_line/a_line.vue
new file mode 100644
index 0000000..9a25563
--- /dev/null
+++ b/src/components/order_list/a_line/a_line.vue
@@ -0,0 +1,55 @@
+<template>
+        <view class="a-line">
+            <view class="al-name"><slot name="name"></slot></view>
+            <view class="al-value">
+                <block v-if="isArrayValue">
+                    <view class="al-p" v-for="(e, i) in value" :key="i">{{ e || '-' }}</view>
+                </block>
+                <view class="al-p" v-else> {{ value || '-' }} </view>
+            </view>
+        </view>
+        
+</template>
+
+<script>
+export default {
+    computed: {
+        isArrayValue(){
+            let { value } = this;
+            return typeof value === 'object'&&value.length
+        }
+    },
+    props: {
+        value: {
+            default: ''
+        }
+    },
+    created(){
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .a-line{
+        display: flex;
+        align-items: flex-start;
+        .al-name{
+            flex-grow: 0;
+            flex-shrink: 0;
+            line-height: 52upx;
+            font-size: 28upx;
+            color: #9a9a9d;
+        }
+        .al-value{
+            flex-grow: 1;
+            .al-p{
+                line-height: 52upx;
+                font-size: 28upx;
+                color: #1a1a1a;
+                @include textHide(1);
+                
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/order_list/curriculum/curriculum.vue b/src/components/order_list/curriculum/curriculum.vue
new file mode 100644
index 0000000..b1febde
--- /dev/null
+++ b/src/components/order_list/curriculum/curriculum.vue
@@ -0,0 +1,31 @@
+<template>
+    <view class="value-card-container">
+        <a-header></a-header>
+        <view class="vcc-info">
+            <a-line></a-line>
+        </view>
+    </view>
+</template>
+
+<script>
+import a_header from '../a_header/a_header.vue';
+import a_line from '../a_line/a_line.vue';
+export default {
+    components: {
+        'a-header': a_header,
+        'a-line': a_line,
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .value-card-container{
+        background-color: #fff;
+        padding: 0 20upx;
+        border-radius: 10upx;
+        .vcc-info{
+            padding: 20upx 0;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/order_list/spectacular_monent/spectacular_monent.vue b/src/components/order_list/spectacular_monent/spectacular_monent.vue
new file mode 100644
index 0000000..852bda8
--- /dev/null
+++ b/src/components/order_list/spectacular_monent/spectacular_monent.vue
@@ -0,0 +1,13 @@
+<template>
+    <view>23</view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    
+</style>
\ No newline at end of file
diff --git a/src/components/order_list/value_card/value_card.vue b/src/components/order_list/value_card/value_card.vue
new file mode 100644
index 0000000..56c7e96
--- /dev/null
+++ b/src/components/order_list/value_card/value_card.vue
@@ -0,0 +1,33 @@
+<template>
+    <view class="value-card-container">
+        <a-header></a-header>
+        <view class="vcc-info">
+            <a-line :value="['白金卡', '白银卡']">
+                <block slot="name">123：</block> 
+            </a-line>
+        </view>
+    </view>
+</template>
+
+<script>
+import a_header from '../a_header/a_header.vue';
+import a_line from '../a_line/a_line.vue';
+export default {
+    components: {
+        'a-header': a_header,
+        'a-line': a_line,
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .value-card-container{
+        background-color: #fff;
+        padding: 0 20upx;
+        border-radius: 10upx;
+        .vcc-info{
+            padding: 20upx 0;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index 8d7647c..3d0c7ea 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -41,13 +41,20 @@
           </view>
       </view>
       <view class="ol-order-list">
-          <view class="ool-item" v-for="(e,i) in orderList" :key="i" >
-              <reservation-order :order-info="e" v-if="orderType == 3"></reservation-order>
-              <membership-order :order-info="e" v-if="orderType == 4"></membership-order>
-              <integral-order :order-info="e" v-if="orderType == 5"></integral-order>
-			  <timing-order  :order-info="e" v-if="orderType == 1"></timing-order>
-			  <organize-order  :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
-          </view>
+            <view class="ool-item" v-for="(e,i) in orderList" :key="i" >
+                <reservation-order :order-info="e" v-if="orderType == 3"></reservation-order>
+                <membership-order :order-info="e" v-if="orderType == 4"></membership-order>
+                <integral-order :order-info="e" v-if="orderType == 5"></integral-order>
+                <timing-order  :order-info="e" v-if="orderType == 1"></timing-order>
+                <organize-order  :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
+            </view>
+            <view class="ool-i">
+                <spectacular-monent></spectacular-monent>
+            </view>
+            <view class="ool-i">
+            <value-card></value-card>
+            </view>
+            
       </view>
       <!-- 分类tab -->
       <view class="ox-dark-mask" v-if="isShowClassify" @click="hideClassify">
@@ -100,7 +107,10 @@
     import membership_order from '../../components/membership_order/membership_order';
 	import timing_order from '../../components/timing_order/timing_order.vue'
 	import organize_order from '../../components/organize_order/organize_order.vue'
-	
+    // 20210910 新增订单模块
+	import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue'
+	import value_card from '../../components/order_list/value_card/value_card.vue'
+
     import util from '../../utils/util';
     import { servers } from '../../js/server';
     import { API } from '../../js/api';
@@ -115,6 +125,8 @@
             'integral-order': integral_order,
 			'timing-order': timing_order,
 			'organize-order': organize_order,
+            'spectacular-monent': spectacular_monent,
+            'value-card': value_card,
         },
         computed:{
             isStoreInfo(){
@@ -428,7 +440,9 @@
 <style lang="scss" scoped>
     @import "../../style/public.scss";
     .order-list{
-        
+        padding-bottom: 0upx;
+        padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
     }   
     .ol-header{
         .oh-cur-store{