diff --git a/src/components/kv_line.vue b/src/components/kv_line.vue
index 7739be3..dd1cdc5 100644
--- a/src/components/kv_line.vue
+++ b/src/components/kv_line.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="kv-line">
-        <view class="kl-name">{{ label || '' }}</view>
+        <view class="kl-name" :style="labelStyle">{{ label || '' }}</view>
         <view class="kl-val"><slot name="default">value</slot></view>
         <slot name="right"></slot>
     </view>
@@ -13,6 +13,10 @@ export default {
             type: String,
             default: ''
         },
+        labelStyle: {
+            type: String,
+            default: ''
+        }
     }
 }
 </script>
diff --git a/src/pages.json b/src/pages.json
index 608631a..1486b78 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -898,6 +898,18 @@
 					"style" : {
 						"navigationBarTitleText": "水阀卡管理" 
 					}
+				},
+				{
+					"path": "pages/card/detail",
+					"style" : {
+						"navigationBarTitleText": "水阀卡详情" 
+					}
+				},
+				{
+					"path": "pages/card/use_record",
+					"style" : {
+						"navigationBarTitleText": "使用记录" 
+					}
 				}
 			]
 		}
diff --git a/src/subpackage/shower/components/time_range.vue b/src/subpackage/shower/components/time_range.vue
new file mode 100644
index 0000000..875acf6
--- /dev/null
+++ b/src/subpackage/shower/components/time_range.vue
@@ -0,0 +1,71 @@
+<template>
+    <view class="time-range">
+        <view class="tr-name">日期</view>
+        <view class="tr-right">
+            <picker mode="date" @change="sDate = $event.detail.value">
+                <view class="tr-frame">
+                    <input type="text" disabled class="tf-ipt" :value="sDate" placeholder="请选择时间">
+                    <image class="tf-icon" mode="aspectFit" src="/subpackage/shower/static/images/calendar.png"></image>
+                </view>
+            </picker>
+            <view class="tr-txt">至</view>
+            <picker mode="date" @change="eDate = $event.detail.value">
+                <view class="tr-frame">
+                    <input type="text" disabled class="tf-ipt" :value="eDate" placeholder="请选择时间">
+                    <image class="tf-icon" mode="aspectFit" src="/subpackage/shower/static/images/calendar.png"></image>
+                </view>
+            </picker>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            sDate: '',
+            eDate: ''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .time-range{
+        padding: 20upx 24upx;
+        background: #fff;
+        @include ctf(space-between);
+        .tr-name{
+            flex-shrink: 0;
+            @include flcw(32upx, 44upx, #1A1A1A, 500);
+        }
+        .tr-right{
+            @include ctf(flex-end);
+            .tr-frame{
+                flex-shrink: 0;
+                padding: 0 18upx;
+                width: 230upx;
+                height: 62upx;
+                border: 2upx solid #979797;
+                border-radius: 4upx;
+                @include ctf(space-between);
+                .tf-ipt{
+                    flex-grow: 1;
+                    @include flcw(24upx, 34upx, #1A1A1A, 500);
+                }
+                .tf-icon{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    display: block;
+                    width: 32upx;
+                    height: 32upx;
+                }
+            }
+            .tr-txt{
+                margin: 0 28upx;
+                flex-shrink: 0;
+                @include flcw(32upx, 44upx, #1A1A1A, 500);
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/card/detail.vue b/src/subpackage/shower/pages/card/detail.vue
new file mode 100644
index 0000000..500f30d
--- /dev/null
+++ b/src/subpackage/shower/pages/card/detail.vue
@@ -0,0 +1,106 @@
+<template>
+    <view class="card-detail">
+        <view class="cd-box cb-card">
+            <view class="cc-stadium">欧轩智能场馆(永泰店)</view>
+            <view class="cc-lines">
+                <kv-line label-style="color: #1A1A1A;" label="水阀卡卡号：">124646</kv-line>
+                <kv-line label-style="color: #1A1A1A;" label="手机号码：">18316466456</kv-line>
+                <kv-line label-style="color: #1A1A1A;" label="微信昵称：">张三</kv-line>
+                <kv-line label-style="color: #1A1A1A;font-weitht: 500;" label="可用时长："><text class="cl-orange">100分00秒</text></kv-line>
+            </view>
+            <view class="cc-btns">
+                <view class="cb-item">消费记录</view>
+                <view class="cb-item red">扣费</view>
+                <view class="cb-item orange">充值</view>
+            </view>
+        </view>
+        <view class="cd-box cd-record">
+            <view class="cr-tit">购卡记录</view>
+            <view class="cr-time">购卡  2020-05-23  13:25</view>
+            <view class="cr-lines">
+                <kv-line label="名称：">智能浴室用水卡</kv-line>
+                <kv-line label="时长：">100分钟</kv-line>
+                <kv-line label="售价：">￥999</kv-line>
+                <kv-line label="支付金额：">￥999</kv-line>
+                <kv-line label="途径：">小程序</kv-line>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import kv_line from "@/components/kv_line.vue";
+export default {
+    components: {
+        'kv-line': kv_line
+    },
+}
+</script>
+
+<style lang="scss">
+    .card-detail{
+        padding: 24upx;
+        @include isPd(24upx);
+        .cd-box{
+            position: relative;
+            padding: 30upx;
+            background: #fff;
+            border-radius: 10upx;
+            &+.cd-box{
+                margin-top: 24upx;
+            }
+        }
+        .cb-card{
+            .cc-stadium{
+                @include flcw(28upx, 40upx, #333333, 500);
+                @include tHide;
+                &::after{
+                    content: '';
+                    display: block;
+                    margin-top: 26upx;
+                    height: 1px;
+                    background: #D8D8D8;
+                }
+            }
+            .cc-lines{
+                padding-top: 20upx;
+                .cl-orange{
+                    color: #FF873D;
+                    font-weight: 500;
+                }
+            }
+            .cc-btns{
+                margin-top: 30upx;
+                @include ctf;
+                .cb-item{
+                    width: 176upx;
+                    text-align: center;
+                    border: 2upx solid #9A9A9D;
+                    border-radius: 10upx;
+                    @include flcw(32upx, 76upx, #9a9a9d, 500);
+                    &.red{
+                        color: #EA5061;
+                        border-color: #EA5061;
+                    }
+                    &.orange{
+                        color: #FF873D;
+                        border-color: #FF873D;
+                    }
+                    &+.cb-item{
+                        margin-left: 58upx;
+                    }
+                }
+            }
+        }
+        .cd-record{
+            .cr-tit{
+                @include flcw(28upx, 40upx, #9C9C9F);
+            }
+            .cr-time{
+                margin-top: 20upx;
+                @include flcw(28upx, 52upx, #1A1A1A, 500);
+            }
+        }
+        
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/pages/card/use_record.vue b/src/subpackage/shower/pages/card/use_record.vue
new file mode 100644
index 0000000..970076b
--- /dev/null
+++ b/src/subpackage/shower/pages/card/use_record.vue
@@ -0,0 +1,23 @@
+<template>
+    <view class="use-record">
+        <time-range></time-range>
+        <view class="ur-list">
+            9989
+        </view>
+    </view>
+</template>
+
+<script>
+import time_range from "../../components/time_range.vue";
+export default {
+    components: {
+        'time-range': time_range
+    },
+}
+</script>
+
+<style lang="scss">
+    .use-record{
+        
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/shower/static/images/calendar.png b/src/subpackage/shower/static/images/calendar.png
new file mode 100644
index 0000000..5bde83f
Binary files /dev/null and b/src/subpackage/shower/static/images/calendar.png differ