From d5fa1382dafeee561650acc0280b1164d196bcbe Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 14 Sep 2021 18:01:10 +0800
Subject: [PATCH] add order modules

---
 src/pages.json                                     |  10 +-
 .../order/pages/curriculum/detail/detail.vue       |  18 +
 .../order/pages/value_card/detail/detail.vue       | 549 +++++++++++++++++++++
 .../order/pages/value_card/value_card.vue          | 170 -------
 .../value_card/xpense_tracker/xpense_tracker.vue   | 176 +++++++
 5 files changed, 751 insertions(+), 172 deletions(-)
 create mode 100644 src/subpackage/order/pages/curriculum/detail/detail.vue
 create mode 100644 src/subpackage/order/pages/value_card/detail/detail.vue
 delete mode 100644 src/subpackage/order/pages/value_card/value_card.vue
 create mode 100644 src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue

diff --git a/src/pages.json b/src/pages.json
index ebce81d..48b1b23 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -389,11 +389,17 @@
 		{
 			"root": "subpackage/order",
 			"pages": [
-			  {
-					"path": "pages/value_card/value_card",
+				{
+					"path": "pages/value_card/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "储值卡详情" 
 					}
+				},
+				{
+					"path": "pages/value_card/xpense_tracker/xpense_tracker",
+					"style" : {
+						"navigationBarTitleText": "消费记录" 
+					}
 				}
 			]
 		}
diff --git a/src/subpackage/order/pages/curriculum/detail/detail.vue b/src/subpackage/order/pages/curriculum/detail/detail.vue
new file mode 100644
index 0000000..5d65ed9
--- /dev/null
+++ b/src/subpackage/order/pages/curriculum/detail/detail.vue
@@ -0,0 +1,18 @@
+<template>
+    <view class="curriculum-info">
+        
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .curriculum-info{
+        
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/value_card/detail/detail.vue b/src/subpackage/order/pages/value_card/detail/detail.vue
new file mode 100644
index 0000000..9e7040a
--- /dev/null
+++ b/src/subpackage/order/pages/value_card/detail/detail.vue
@@ -0,0 +1,549 @@
+<template>
+    <view class="value-card-order-info">
+        <view class="i-box vc-header">
+            <view class="vh-name">
+                <view>欧轩智能场馆(羽毛球永泰店)</view>
+            </view>
+            <view class="vh-info">
+                <view class="vi-line">储值卡卡号：124646</view>
+                <view class="vi-line">手机号码：18316466456</view>
+                <view class="vi-line">储值卡余额：1000</view>
+            </view>
+            <view class="vh-btns">
+                <view>消费记录</view>
+                <view class="red">扣费</view>
+                <view class="orange">充值</view>
+            </view>
+            <image class="vh-tag"></image>
+        </view>
+        <view class="i-box vc-info">
+            <view class="vc-tit">储值卡信息</view>
+            <a-line :value="'yiming'">
+                <block slot="name">微信昵称：</block> 
+            </a-line>
+            <a-line :value="'白金储值卡'">
+                <block slot="name">储值卡名称：</block> 
+            </a-line>
+            <a-line :value="'个人卡（1/1 ）'">
+                <block slot="name">卡类型：</block> 
+            </a-line>
+            <a-line :value="'至2022.08.28'">
+                <block slot="name">有效期：</block> 
+            </a-line>
+        </view>
+        <view class="i-box vc-record">
+            <view class="vc-tit">购卡记录</view>
+            <view class="vr-tit">升级  2020-05-23  13:25</view>
+            <a-line :value="'黄金储值卡'">
+                <block slot="name">名称：</block> 
+            </a-line>
+            <a-line :value="'1000元'">
+                <block slot="name">面值：</block> 
+            </a-line>
+            <a-line :value="'￥1999'">
+                <block slot="name">售价：</block> 
+            </a-line>
+            <a-line :value="'￥1000'">
+                <block slot="name">支付金额：</block> 
+            </a-line>
+            <a-line :value="'￥10（30天内有效）'">
+                <block slot="name">赠送金额：</block> 
+            </a-line>
+            <a-line :value="'小程序'">
+                <block slot="name">途径：</block> 
+            </a-line>
+
+            <view class="vr-border"></view>
+            
+            <view class="vr-tit">升级  2020-05-23  13:25</view>
+            <a-line :value="'黄金储值卡'">
+                <block slot="name">名称：</block> 
+            </a-line>
+            <a-line :value="'1000元'">
+                <block slot="name">面值：</block> 
+            </a-line>
+            <a-line :value="'￥1999'">
+                <block slot="name">售价：</block> 
+            </a-line>
+            <a-line :value="'￥1000'">
+                <block slot="name">支付金额：</block> 
+            </a-line>
+            <a-line :value="'￥10（30天内有效）'">
+                <block slot="name">赠送金额：</block> 
+            </a-line>
+            <a-line :value="'小程序'">
+                <block slot="name">途径：</block> 
+            </a-line>
+        </view>
+
+        <view class="vc-mask" v-if="false">
+            <view class="vc-recharge">
+                <image class="vr-close"></image>
+                <view class="vr-tit">充值</view>
+                
+                <view class="vr-info">
+                    <view><text>储值卡号：</text>20195171564566</view>
+                    <view><text>手机号码：</text>18316553478</view>
+                    <view><text>余额：</text>￥75.25</view>
+                </view>
+
+                <view class="vr-edit">
+                    <view class="ve-line">
+                        <view class="vl-name"><text>*</text>充值金额</view>
+                        <view class="vl-ipt">
+                            <view class="vi-box">
+                                <view class="vb-btn"></view>
+                                <view class="vb-ipt">
+                                    <input />
+                                </view>
+                                <view class="vb-btn"></view>
+                            </view>
+                            <view class="vi-unit">元</view>
+                        </view>
+                    </view>
+                    <view class="ve-line">
+                        <view class="vl-name"><text>*</text>充值赠送金额</view>
+                        <view class="vl-ipt">
+                            <view class="vi-box">
+                                <view class="vb-btn"></view>
+                                <view class="vb-ipt">
+                                    <input />
+                                </view>
+                                <view class="vb-btn"></view>
+                            </view>
+                            <view class="vi-unit">元</view>
+                        </view>
+                    </view>
+                    <view class="ve-line">
+                        <view class="vl-name"><text>*</text>赠送有效期</view>
+                        <view class="vl-ipt">
+                            <view class="vi-box">
+                                <view class="vb-btn"></view>
+                                <view class="vb-ipt">
+                                    <input />
+                                </view>
+                                <view class="vb-btn"></view>
+                            </view>
+                            <view class="vi-unit">天</view>
+                        </view>
+                    </view>
+                    <view class="ve-line">
+                        <view class="vl-name"><text>*</text>延长有效期</view>
+                        <view class="vl-ipt">
+                            <view class="vi-box">
+                                <view class="vb-btn"></view>
+                                <view class="vb-ipt">
+                                    <input />
+                                </view>
+                                <view class="vb-btn"></view>
+                            </view>
+                            <view class="vi-unit">天</view>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="vr-btns">
+                    <view class="white">取消</view>
+                    <view>确认</view>
+                </view>
+                
+            </view>
+        </view>
+        
+        <view class="vc-mask" v-if="false">
+            <view class="vc-recharge vc-deductions">
+                <image class="vr-close"></image>
+                <view class="vr-tit">扣费</view>
+                
+                <view class="vr-info">
+                    <view><text>储值卡号：</text>20195171564566</view>
+                    <view><text>手机号码：</text>18316553478</view>
+                    <view><text>余额：</text>￥75.25</view>
+                </view>
+
+                <view class="vr-edit">
+                    <view class="ve-line">
+                        <view class="vl-name"><text>*</text>充值金额</view>
+                        <view class="vl-ipt">
+                            <view class="vi-box">
+                                <view class="vb-btn"></view>
+                                <view class="vb-ipt">
+                                    <input />
+                                </view>
+                                <view class="vb-btn"></view>
+                            </view>
+                            <view class="vi-unit">元</view>
+                        </view>
+                    </view>
+                    <view class="ve-line" style="margin-bottom: 20rpx;">
+                        <view class="vl-name"><text>*</text>消费场景(单选)</view>
+                    </view>
+                    
+                    <view class="vd-ipt">
+                        <picker>
+                            <view class="vi-box">
+                                <input />
+                                <image></image>
+                            </view>
+                        </picker>
+                        <view class="vi-box vi-remark">
+                            <input />
+                        </view>
+                    </view>
+                </view>
+
+
+
+                <view class="vr-btns">
+                    <view>确认</view>
+                </view>
+                
+            </view>
+        </view>
+
+        <view class="vc-mask">
+            <view class="tip-modal">
+                <image class="tm-close"></image>
+                <image class="tm-icon"></image>
+                <view class="tm-tit">扣费成功！</view>
+                <view class="tm-info">
+                    <view>
+                        <view>扣费金额：<text>-￥50</text></view>
+                        <view>当前余额：￥25.25 </view>
+                        <view>储值卡号：20195171564566</view>
+                        <view>手机号码：18316553478</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import a_line from '../../../../../components/order_list/a_line/a_line.vue';
+export default {
+    components: {
+        'a-line': a_line,
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .value-card-order-info{
+        padding: 24upx;
+        padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        >.i-box{
+            position: relative;
+            margin: 0 auto 24upx;
+            padding: 30upx;
+            border-radius: 10upx;
+            background-color: #fff;
+        }
+        .vc-tit{
+            margin-bottom: 20upx;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #9C9C9F;
+        }
+        .vc-header{
+            .vh-name{
+                padding-bottom: 26upx;
+                border-bottom: 2upx solid #D8D8D8;
+                >view{
+                    line-height: 40upx;
+                    font-weight: 500;
+                    font-size: 28upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                
+            }
+            .vh-info{
+                padding: 20upx 0 30upx;
+                .vi-line{
+                    line-height: 48upx;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                    @include textHide(1);
+                }
+            }
+            .vh-btns{
+                @include centerFlex(space-between);
+                >view{
+                    width: 176upx;
+                    height: 80upx;
+                    border: 2upx solid #9A9A9D;
+                    border-radius: 10upx;
+                    text-align: center;
+                    line-height: 76upx;
+                    font-size: 32upx;
+                    color: #9a9a9d;
+                    &.red{
+                        color: #EA5061;
+                        border-color: #EA5061;
+                    }
+                    &.orange{
+                        color: #FF873D;
+                        border-color: #FF873D;
+                    }
+                }
+            }
+            .vh-tag{
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 132upx;
+                height: 132upx;
+                background-color: skyblue;
+            }
+        }
+        .vc-info{
+            margin-bottom: 24upx;
+        }
+        .vc-record{
+            .vr-tit{
+                line-height: 52upx;
+                font-weight: 500;
+                font-size: 28upx;
+                color: #1a1a1a;
+            }
+            .vr-border{
+                margin: 30upx 0;
+                height: 2upx;
+                background-color: #D8D8D8;
+            }
+        }
+
+    }   
+    .vc-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba($color: #000000, $alpha: .5);
+
+    }
+    .vc-recharge{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding-top: 78upx;
+        padding-bottom: 72upx;
+        width: 620upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .vr-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 34upx;
+            height: 34upx;
+            background-color: skyblue;
+        }
+        .vr-tit{
+            margin-bottom: 34upx;
+            text-align: center;
+            line-height: 44upx;
+            font-weight: 500;
+            font-size: 32upx;
+            color: #333;
+        }
+        .vr-info{
+            margin-bottom: 26upx;
+            padding: 0 56upx;
+            >view{
+                line-height: 48upx;
+                font-size: 28upx;
+                color: #1a1a1a;
+                @include textHide(1);
+                &:last-child{
+                    color: #ff873d;
+                    >text{
+                        color: #1a1a1a;
+                    }
+                }
+            }
+        }
+        .vr-edit{
+            margin-bottom: 60upx;
+            .ve-line{
+                margin-bottom: 10upx;
+                padding: 0 56upx;
+                @include centerFlex(space-between);
+                .vl-name{
+                    flex-shrink: 0;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                    >text{
+                        color: #EA5061;
+                    }
+                }
+                .vl-ipt{
+                    flex-shrink: 0;
+                    @include centerFlex(flex-end);
+                    .vi-box{
+                        @include centerFlex(center);
+                        .vb-btn{
+                            position: relative;
+                            width: 58upx;
+                            height: 56upx;
+                            background-color: #f2f2f7;
+                            &:first-child{
+                                border-top-left-radius: 10upx;
+                                border-bottom-left-radius: 10upx;
+                            }
+                            &::before{
+                                content: '';
+                                position: absolute;
+                                left: 50%;
+                                top: 50%;
+                                transform: translate(-50%, -50%);
+                                width: 24upx;
+                                height: 4upx;
+                                border-radius: 2upx;
+                                background-color: #9a9a9d;
+                            }
+
+                        }
+                        .vb-ipt{
+                            margin: 0 4upx;
+                            padding: 0 10upx;
+                            width: 132upx;
+                            height: 56upx;
+                            background-color: #f2f2f7;
+                            >input {
+                                width: 100%;
+                                height: 100%;
+                                text-align: center;
+                                font-size: 28upx;
+                                color: #1a1a1a;
+                            }
+                            &+.vb-btn{
+                                border-top-right-radius: 10upx;
+                                border-bottom-right-radius: 10upx;
+                                &::after{
+                                    content: '';
+                                    position: absolute;
+                                    left: 50%;
+                                    top: 50%;
+                                    transform: translate(-50%, -50%);
+                                    height: 24upx;
+                                    width: 4upx;
+                                    border-radius: 2upx;
+                                    background-color: #9a9a9d;
+                                }
+                            }
+                        }
+                    }
+                    .vi-unit{
+                        margin-left: 20upx;
+                        font-size: 28upx;
+                        color: #1a1a1a;
+                    }
+                }
+            }
+        }
+        .vr-btns{
+            @include centerFlex(center);
+            >view{
+                margin: 0 20upx;
+                width: 240upx;
+                height: 88upx;
+                line-height: 84upx;
+                text-align: center;
+                border-radius: 10upx;
+                border: 2upx solid $themeColor;
+                color: #fff;
+                background-color: $themeColor;
+                .white{
+                    background-color: #fff;
+                    color: $themeColor;
+                }
+            }
+        }
+    }   
+    .vc-deductions{
+        
+        .vd-ipt{
+            padding: 0 68upx;
+            .vi-box{
+                height: 88upx;
+                border-radius: 10upx;
+                border: 2upx solid #D8D8D8;
+                padding: 0 20upx;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    width: 100%;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+                >image{
+                    flex-shrink: 0;
+                    width: 32upx;
+                    height: 32upx;
+                    margin-left: 20upx;
+                    background-color: skyblue;
+                }
+            }
+            .vi-remark{
+                margin-top: 20upx;
+                
+            }
+        }
+    }
+    .tip-modal{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding-top: 120upx;
+        width: 620upx;
+        height: 630upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .tm-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 34upx;
+            height: 34upx;
+            background-color: skyblue;
+        }
+        .tm-icon{
+            margin: 0 auto 30upx;
+            display: block;
+            width: 100upx;
+            height: 100upx;
+            background-color: skyblue;
+        }
+        .tm-tit{
+            margin-bottom: 70upx;
+            text-align: center;
+            font-size: 32upx;
+            font-weight: 500;
+            color: #333;
+        }
+        .tm-info{
+            padding: 0 30upx;
+            @include centerFlex(center);
+            >view{
+                >view{
+                    font-size: 28upx;
+                    line-height: 48upx;
+                    color: #9a9a9d;
+                    @include textHide(1);
+                    >text{
+                        color: #1a1a1a;
+                    }
+                }
+            }
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/value_card/value_card.vue b/src/subpackage/order/pages/value_card/value_card.vue
deleted file mode 100644
index c46adfd..0000000
--- a/src/subpackage/order/pages/value_card/value_card.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-    <view class="value-card-order-info">
-        <view class="i-box vc-header">
-            <view class="vh-name">
-                <view>欧轩智能场馆(羽毛球永泰店)</view>
-            </view>
-            <view class="vh-info">
-                <view class="vi-line">储值卡卡号：124646</view>
-                <view class="vi-line">手机号码：18316466456</view>
-                <view class="vi-line">储值卡余额：1000</view>
-            </view>
-            <view class="vh-btns">
-                <view>消费记录</view>
-                <view class="red">扣费</view>
-                <view class="orange">充值</view>
-            </view>
-        </view>
-        <view class="i-box vc-info">
-            <view class="vc-tit">储值卡信息</view>
-            <a-line :value="'yiming'">
-                <block slot="name">微信昵称：</block> 
-            </a-line>
-            <a-line :value="'白金储值卡'">
-                <block slot="name">储值卡名称：</block> 
-            </a-line>
-            <a-line :value="'个人卡（1/1 ）'">
-                <block slot="name">卡类型：</block> 
-            </a-line>
-            <a-line :value="'至2022.08.28'">
-                <block slot="name">有效期：</block> 
-            </a-line>
-        </view>
-
-        <view class="i-box vc-record">
-            <view class="vc-tit">购卡记录</view>
-            <view class="vr-tit">升级  2020-05-23  13:25</view>
-            <a-line :value="'黄金储值卡'">
-                <block slot="name">名称：</block> 
-            </a-line>
-            <a-line :value="'1000元'">
-                <block slot="name">面值：</block> 
-            </a-line>
-            <a-line :value="'￥1999'">
-                <block slot="name">售价：</block> 
-            </a-line>
-            <a-line :value="'￥1000'">
-                <block slot="name">支付金额：</block> 
-            </a-line>
-            <a-line :value="'￥10（30天内有效）'">
-                <block slot="name">赠送金额：</block> 
-            </a-line>
-            <a-line :value="'小程序'">
-                <block slot="name">途径：</block> 
-            </a-line>
-
-            <view class="vr-border"></view>
-            
-            <view class="vr-tit">升级  2020-05-23  13:25</view>
-            <a-line :value="'黄金储值卡'">
-                <block slot="name">名称：</block> 
-            </a-line>
-            <a-line :value="'1000元'">
-                <block slot="name">面值：</block> 
-            </a-line>
-            <a-line :value="'￥1999'">
-                <block slot="name">售价：</block> 
-            </a-line>
-            <a-line :value="'￥1000'">
-                <block slot="name">支付金额：</block> 
-            </a-line>
-            <a-line :value="'￥10（30天内有效）'">
-                <block slot="name">赠送金额：</block> 
-            </a-line>
-            <a-line :value="'小程序'">
-                <block slot="name">途径：</block> 
-            </a-line>
-        </view>
-    </view>
-</template>
-
-<script>
-import a_line from '../../../../components/order_list/a_line/a_line.vue';
-export default {
-    components: {
-        'a-line': a_line,
-    }
-}
-</script>
-
-<style lang="scss">
-    @import '~style/public.scss';
-    .value-card-order-info{
-        padding: 24upx;
-        >.i-box{
-            position: relative;
-            margin: 0 auto 24upx;
-            padding: 30upx;
-            border-radius: 10upx;
-            background-color: #fff;
-        }
-        .vc-tit{
-            margin-bottom: 20upx;
-            line-height: 40upx;
-            font-size: 28upx;
-            color: #9C9C9F;
-        }
-        .vc-header{
-            .vh-name{
-                padding-bottom: 26upx;
-                border-bottom: 2upx solid #D8D8D8;
-                >view{
-                    line-height: 40upx;
-                    font-weight: 500;
-                    font-size: 28upx;
-                    color: #333;
-                    @include textHide(1);
-                }
-                
-            }
-            .vh-info{
-                padding: 20upx 0 30upx;
-                .vi-line{
-                    line-height: 48upx;
-                    font-size: 28upx;
-                    color: #1a1a1a;
-                    @include textHide(1);
-                }
-            }
-            .vh-btns{
-                @include centerFlex(center);
-                >view{
-                    margin: 0 30upx;
-                    width: 176upx;
-                    height: 80upx;
-                    border: 2upx solid #9A9A9D;
-                    border-radius: 10upx;
-                    text-align: center;
-                    line-height: 76upx;
-                    font-size: 32upx;
-                    color: #9a9a9d;
-                    &.red{
-                        color: #EA5061;
-                        border-color: #EA5061;
-                    }
-                    &.orange{
-                        color: #FF873D;
-                        border-color: #FF873D;
-                    }
-                }
-            }
-        }
-        .vc-info{
-            margin-bottom: 24upx;
-        }
-        .vc-record{
-            .vr-tit{
-                line-height: 52upx;
-                font-weight: 500;
-                font-size: 28upx;
-                color: #1a1a1a;
-            }
-            .vr-border{
-                margin: 30upx 0;
-                height: 2upx;
-                background-color: #D8D8D8;
-            }
-        }
-    }   
-    
-</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue b/src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue
new file mode 100644
index 0000000..f709ab2
--- /dev/null
+++ b/src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue
@@ -0,0 +1,176 @@
+<template>
+    <view class="xpense-tracker">
+        <view class="xt-header">
+            <view>日期</view>
+            <picker>
+                <view class="xh-picker">
+                    <input />
+                    <view></view>
+                </view>
+            </picker>
+            <image></image>
+        </view>
+        <view class="xt-list">
+            <view class="xl-item" v-for="i in 20" :key="i">
+                <view class="xi-header">
+                    <view class="xh-addr">
+                        <image class="xa-logo"></image>
+                        <view>广州欧轩智能羽毛球馆(永泰店)</view>
+                        <image class="xa-icon"></image>
+                    </view>
+                    <view class="xh-time">12月7日 13:25 </view>
+                </view>
+                <view class="xi-info">
+                    <view class="xi-price">
+                        <view>消费-预订场地</view>
+                        <view>-100</view>
+                    </view>
+                    <view class="xi-amount">
+                        <view>
+                            <image></image>
+                            <text>yiming</text>
+                        </view>
+                        <view>余额 10000.09</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .xpense-tracker{
+        padding-bottom: 24upx;
+        padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .xt-header{
+        padding: 0 24upx;
+        height: 138upx;
+        background-color: #fff;
+        @include centerFlex(space-between);
+        >view{
+            flex-shrink: 0;
+            font-size: 28upx;
+            color: #333;
+        }
+        .xh-picker{
+            height: 88upx;
+            width: 548upx;
+            padding: 0 20upx;
+            border-radius: 10upx;
+            border: 2upx solid #d8d8d8;
+            @include centerFlex(space-between);
+            >input{
+                flex-grow: 1;
+                height: 100%;
+                font-size: 28upx;
+                color: #333;
+            }
+            >view{
+                flex-shrink: 0;
+                width: 0;
+                height: 0;
+                border-left: 14upx solid transparent;
+                border-right: 14upx solid transparent;
+                border-top: 16upx solid #cccccc;
+            }
+        }
+        >image{
+            width: 52upx;
+            height: 52upx;
+            background-color: skyblue;
+        }
+    }   
+    .xt-list{
+        padding:  24upx;
+        .xl-item{
+            margin-bottom: 24upx;
+            padding: 0 26upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .xi-header{
+                padding-top: 28upx;
+                padding-bottom: 16upx;
+                border-bottom: 2upx solid #D8D8D8;
+                .xh-addr{
+                    @include centerFlex(space-between);
+                    .xa-logo{
+                        flex-shrink: 0;
+                        margin-right: 24upx;
+                        width: 60upx;
+                        height: 60upx;
+                        background-color: skyblue;
+                    }
+                    >view{
+                        flex-grow: 1;
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        color: #1a1a1a;
+                        @include textHide(1);
+                    }
+                    .xa-icon{
+                        flex-shrink: 0;
+                        width: 32upx;
+                        height: 32upx;
+                        background-color: skyblue;
+                    }
+                }
+                .xh-time{
+                    padding-left: 78upx;
+                    font-size: 28upx;
+                    line-height: 48upx;
+                    color: #9a9a9d;
+                }
+            }
+            .xi-info{
+                padding-top: 30upx;
+                padding-bottom: 30upx;
+                .xi-price{
+                    margin-bottom: 20upx;
+                    @include centerFlex(space-between);
+                    >view{
+                        font-size: 28upx;
+                        color: #1a1a1a;
+                        max-width: 50%;
+                        @include textHide(1);
+                        &+view{
+                            font-size: 32upx;
+                            font-weight: 500;
+                        }
+                    }
+                }
+                .xi-amount{
+                    @include centerFlex(space-between);
+                    >view{
+                        max-width: 50%;
+                        font-size: 26upx;
+                        color: #9a9a9d;
+                        @include textHide(1);
+                        &:first-child{
+                            >image{
+                                vertical-align: middle;
+                                margin-right: 8upx;
+                                width: 28upx;
+                                height: 28upx;
+                                background-color: skyblue;
+                            }
+                        }
+                        &+view{
+                            font-size: 28upx;
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+</style>
\ No newline at end of file