diff --git a/src/pages.json b/src/pages.json
index 9550c17..10ba51b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -96,6 +96,42 @@
 			}
 		},
 		{
+			"path": "pages/course/experience/experience",
+			"style": {
+				"navigationBarTitleText": "体验课预约列表"
+			}
+		},
+		{
+			"path": "pages/course/offer/offer",
+			"style": {
+				"navigationBarTitleText": "报价详情页"
+			}
+		},
+		{
+			"path": "pages/course/offer_info/offer_info",
+			"style": {
+				"navigationBarTitleText": "报价详情页"
+			}
+		},
+		{
+			"path": "pages/approve/list/list",
+			"style": {
+				"navigationBarTitleText": "我的审批"
+			}
+		},
+		{
+			"path": "pages/shift/application/application",
+			"style": {
+				"navigationBarTitleText": "换班"
+			}
+		},
+		{
+			"path": "pages/shift/record/record",
+			"style": {
+				"navigationBarTitleText": "我的换班"
+			}
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 			}
diff --git a/src/pages/approve/list/list.vue b/src/pages/approve/list/list.vue
new file mode 100644
index 0000000..22f4e30
--- /dev/null
+++ b/src/pages/approve/list/list.vue
@@ -0,0 +1,307 @@
+<template>
+    <view class="approve-list">
+        <view class="l-tabs">
+            <view v-for="i in 3" :key="i">
+                <view class="t-txt active">
+                    <text>预约审批</text>
+                    <view class="t-label">99</view>
+                </view>
+            </view>
+        </view>
+        <view class="l-bar">
+            <view>审核人数:3人</view>
+            <view>审批记录</view>
+        </view>
+        <view class="l-null" v-if="false">
+            <image></image>
+            <view>抱歉，没有相关课程订单信息...</view>
+        </view>
+        <view class="l-list" v-else>
+            <view class="l-item">
+                <view class="l-content">
+                    <view class="c-user">
+                        <image></image>
+                        <view>胡可课</view>
+                    </view>
+                    <view class="c-content">
+                        <view class="c-name">羽毛球课程(羽毛球课)</view>
+                        <view class="c-times">
+                            <view v-for="i in 10" :key="i">2020-08-22 10:30</view>
+                        </view>
+                    </view>
+                    <view class="c-status">
+                        <view class="s-icon" v-if="false"></view>
+                        <view class="s-txt s-active" v-else>通过</view>
+                    </view>
+                    
+                </view>
+                <view class="l-reason">
+                    <view>原因:</view>
+                    <view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内…</view>
+                </view>
+                <view class="l-unfold">
+                    <view>
+                        <text>展开</text>
+                        <image></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <view class="l-bot-bar">
+            <view class="bb-select">
+                <view></view>
+                <text>全选</text>
+            </view>
+            <view class="bb-btns">
+                <view>不同意</view>
+                <view>同意</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .approve-list{  
+        padding-bottom: 120upx;
+        padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .l-tabs{
+        margin-bottom: 28upx;
+        background-color: #fff;
+        @include centerFlex(center);
+        >view{
+            flex-grow: 0;
+            width: 33.33%;
+            display: flex;
+            justify-content: center;
+            .t-txt{
+                position: relative;
+                height: 96upx;
+                line-height: 96upx;
+                font-size: 28upx;
+                color: #333;
+                .t-label{
+                    position: absolute;
+                    right: -34upx;
+                    top: 18upx;
+                    width: 32upx;
+                    height: 32upx;
+                    border-radius: 50%;
+                    line-height: 32upx;
+                    text-align: center;
+                    font-size: 20upx;
+                    font-weight: 400;
+                    color: #fff;
+                    background-color: #FF4444;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                &.active{
+                    font-weight: 600;
+                    color: $themeColor;
+                    &::after{
+                        content: '';
+                        position: absolute;
+                        display: block;
+                        left: 0;
+                        bottom: 0;
+                        width: 100%;
+                        height: 8upx;
+                        background-color: $themeColor;
+                        border-radius: 4upx;
+                    }
+                }
+            }
+        }
+    }
+    .l-bar{
+        padding: 0 50upx;
+        height: 92upx;
+        background-color: yellowgreen;
+        @include centerFlex(space-between);
+        >view{
+            font-size: 28upx;
+            line-height: 40upx;
+            &:first-child{
+                max-width: 60%;
+                color: #333;
+                @include textHide(1);
+            }
+            &+view{
+                color: $themeColor;
+                font-weight: 600;
+            }
+        }
+    }
+    .l-list{
+        padding: 0 24upx;
+        .l-item{
+            padding: 24upx;
+            background-color: #fff;
+            .l-content{
+                display: flex;
+                justify-content: space-between;
+                .c-user{
+                    flex-shrink: 0;
+                    margin-right: 30upx;
+                    >image{
+                        margin: 0 auto 8upx;
+                        display: block;
+                        width: 100upx;
+                        height: 100upx;
+                        border-radius: 50%;
+                        background-color: skyblue;
+                    }
+                    >view{
+                        max-width: 120upx;
+                        line-height: 40upx;
+                        text-align: center;
+                        font-size: 28upx;
+                        color: #9a9a9d;
+                        @include textHide(1);
+                    }
+                }
+                .c-content{
+                    flex-grow: 1;
+                    padding-top: 26upx;
+                    .c-name,.c-times>view{
+                        font-size: 28upx;
+                        line-height: 52upx;
+                        color: #333;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+                .c-status{
+                    flex-shrink: 0;
+                    padding-top: 60upx;
+                    .s-icon{
+                        width: 36upx;
+                        height: 36upx;
+                        border: 2upx solid #9a9a9d;
+                        border-radius: 50%;
+                        >image{
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                    .s-txt{
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        color: $themeColor;
+                        &.s-active{
+                            color: #FF4444;
+                        }
+                    }
+                }
+                
+            }
+            .l-reason{
+                padding-top: 14upx;
+                border-top: 2upx solid #D8D8D8;
+                display: flex;
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                        margin-right: 20upx;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: #9a9a9d;
+                    }
+                }
+            }
+            .l-unfold{
+                padding: 10upx 0 0;
+                @include centerFlex(flex-end);
+                >view{
+                    font-size: 28upx;
+                    line-height: 46upx;
+                    color: $themeColor;
+                    >image{
+                        margin-left: 10upx;
+                        width: 24upx;
+                        height: 24upx;
+                        background-color: skyblue;
+                    }
+                }
+            }
+        }
+    }
+    .l-null{
+        padding-top: 94upx;
+        >image{
+            margin: 0 auto 20upx;
+            display: block;
+            width: 346upx;
+            height: 346upx;
+            background-color: skyblue;
+        }
+        >view{
+            text-align: center;
+            line-height: 44upx;
+            font-size: 32upx;
+            color: #9A9A9D;
+        }
+    }
+    .l-bot-bar{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        padding: 10upx 24upx;
+        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        width: 100%;
+        background-color: #fff;
+        @include centerFlex(space-between);
+        .bb-select{
+            flex-shrink: 0;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #333;
+            @include centerFlex(flex-start);
+            >view{
+                margin-right: 14upx;
+                width: 36upx;
+                height: 36upx;
+                border-radius: 50%;
+                border: 2upx solid #9a9a9d;
+            }
+            
+        }
+        .bb-btns{
+            flex-shrink: 0;
+            @include centerFlex(flex-end);
+            >view{
+                width: 220upx;
+                height: 88upx;
+                line-height: 84upx;
+                text-align: center;
+                border-radius: 44upx;
+                border: 2upx solid $themeColor;
+                color: $themeColor;
+                &+view{
+                    margin-left: 20upx;
+                    background-color: $themeColor;
+                    color: #fff;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/experience/experience.vue b/src/pages/course/experience/experience.vue
new file mode 100644
index 0000000..5ecde1e
--- /dev/null
+++ b/src/pages/course/experience/experience.vue
@@ -0,0 +1,251 @@
+<template>
+    <view class="course-experience">
+        <view class="e-tab">
+            <view><image></image><text>未报价</text></view>
+            <view><image></image><text>未报价</text></view>
+        </view>
+        <view class="e-unfold">
+            <view><text>全部展开</text><image></image></view>
+        </view>
+        <view class="e-list">
+            <view class="l-item" v-for="i in 5" :key="i">
+                <view class="i-header">
+                    <view class="h-icon" v-if="false"></view>
+                    <view class="h-status red" v-else>已支付</view>
+                </view>
+                <view class="i-info">
+                    <image></image>
+                    <view>
+                        <view class="i-content">
+                            <view class="c-line">
+                                <text>昵称：</text>长大
+                            </view>
+                            <view class="c-line">
+                                <text>学员姓名：</text>长大
+                            </view>
+                            <view class="c-line">
+                                <text>性别：</text>长大
+                            </view>
+                            <view class="c-line">
+                                <text>联系方式：</text>123456789789
+                            </view>
+                        </view>
+                        <view class="i-btns">
+                            <view v-if="true" hover-class="hover-active">报价</view>
+                            <view class="b-detail" hover-class="hover-active" v-else>详情</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="i-list">
+                    <view class="l-line" v-for="j in 5" :key="j">
+                        <text>课程一：</text>羽毛球技能技巧大班大班大班大班大班
+                    </view>
+                </view>
+                <view class="i-unfold">
+                    <text>展开</text>
+                    <image></image>
+                </view>
+            </view>
+        </view>
+        <view class="e-fixed-bar">
+            <view class="fb-select">
+                <view></view>
+                <text>全选</text>
+            </view>
+            <view class="fb-btn" hover-class="hover-active">召开体验课</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .course-experience{
+        padding-bottom: 108upx;
+        padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .e-tab{
+        background-color: #fff;
+        @include centerFlex(space-between);
+        >view{
+            flex-grow: 1;
+            max-width: 50%;
+            height: 108upx;
+            line-height: 108upx;
+            text-align: center;
+            font-size: 32upx;
+            color: #9A9A9D;
+            >image{
+                margin-right: 16upx;
+                vertical-align: middle;
+                width: 56upx;
+                height: 56upx;
+                background-color: skyblue;
+            }
+        }
+    }
+    .e-unfold{
+        padding: 20upx 24upx;
+        @include centerFlex(flex-end);
+        >view{
+            font-size: 28upx;
+            line-height: 40upx;
+            color: #333;
+            >image{
+                margin-left: 12upx;
+                vertical-align: middle;
+                width: 28upx;
+                height: 28upx;
+                background-color: skyblue;
+            }
+        }
+    }
+    .e-list{
+        padding: 0 24upx;
+        .l-item{
+            margin-bottom: 24upx;
+            padding: 20upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            border: 2upx solid $themeColor;
+            .i-header{
+                @include centerFlex(flex-end);
+
+                .h-icon{
+                    width: 36upx;
+                    height: 36upx;
+                    border: 2upx solid #9a9a9d;
+                    border-radius: 50%;
+                    >image{
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .h-status{
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #333;
+                    &.red{
+                        color: #FF4444;
+                    }
+                }
+            }
+            .i-info{
+                display: flex;
+                padding-bottom: 22upx;
+                >image{
+                    flex-shrink: 0;
+                    margin-right: 20upx;
+                    width: 88upx;
+                    height: 88upx;
+                    border-radius: 50%;
+                    background-color: skyblue;
+                }
+                >view{
+                    flex-grow: 1;
+                    @include centerFlex(space-between);
+                }
+                .i-content{
+                    flex-grow: 1;
+                    .c-line{
+                        font-size: 28upx;
+                        line-height: 50upx;
+                        color: #333;
+                        @include textHide(1);
+                        >text{
+                            color: #9a9a9d;
+                        }
+                    }
+                }
+                .i-btns{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    >view{
+                        width: 176upx;
+                        height: 72upx;
+                        line-height: 68upx;
+                        text-align: center;
+                        font-size: 32upx;
+                        color: #fff;
+                        border: 2upx solid #FF873D;
+                        border-radius: 36upx;
+                        background-color: #FF873D;
+                        &.b-detail{
+                            background-color: #fff;
+                            border-color: $themeColor;
+                            color: $themeColor;
+                        }
+                    }
+                }
+            }
+            .i-list{
+                padding: 18upx 0 26upx;
+                border-top: 2upx solid #D8D8D8;
+                .l-line{
+                    font-size: 28upx;
+                    line-height: 52upx;
+                    color: #333;
+                    @include textHide(1);
+                    >text{
+                        color: #9a9a9d;
+                    }
+                }
+            }
+            .i-unfold{
+                font-size: 28upx;
+                line-height: 46upx;
+                color: $themeColor;
+                text-align: right;
+                >image{
+                    margin-left: 10upx;
+                    vertical-align: middle;
+                    width: 24upx;
+                    height: 24upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+
+    .e-fixed-bar{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #fff;
+        padding: 10upx 24upx;
+        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        @include centerFlex(space-between);
+        .fb-select{
+            font-size: 28upx;
+            line-height: 40upx;
+            color: #333;
+            >view{
+                margin-right: 14upx;
+                display: inline-block;
+                vertical-align: middle;
+                width: 36upx;
+                height: 36upx;
+                border-radius: 50%;
+                border: 2upx solid #9a9a9d;
+            }
+        }
+        .fb-btn{
+            width: 544upx;
+            height: 88upx;
+            line-height: 88upx;
+            text-align: center;
+            border-radius: 44upx;            
+            font-size: 32upx;
+            color: #fff;
+            background-color: $themeColor;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/list/list.vue b/src/pages/course/list/list.vue
index 6d4ac16..3b3db47 100644
--- a/src/pages/course/list/list.vue
+++ b/src/pages/course/list/list.vue
@@ -22,7 +22,14 @@
                 </view>
             </view>
             <view class="cl-ex-item">
-
+                <view class="ei-tit">
+                    <view>羽毛球课包学会(带体验课)</view>
+                    <view>预约中</view>
+                </view>
+                <view class="ei-line"><text>预约人数:</text>20</view>
+                <view class="ei-btns">
+                    <view hover-class="hover-active">查看详情</view>
+                </view>
             </view>
         </view>
         <view class="cl-mask" v-if="false">
@@ -160,6 +167,57 @@ export default {
                 }
             }
         }
+        .cl-ex-item{
+            padding: 44upx 24upx 34upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .ei-tit{
+                margin-bottom: 18upx;
+                @include centerFlex(space-between);
+                >view{
+                    &:first-child{
+                        line-height: 44upx;
+                        font-size: 32upx;
+                        font-weight: 500;
+                        color: #333;
+                        @include textHide(1);
+                    }
+                    &+view{
+                        flex-grow: 0;
+                        flex-shrink: 0;
+                        font-size: 28upx;
+                        color: #9A9A9D;
+                        &.active{
+                            color: $themeColor;
+                        }
+                    }
+                }
+            }
+            .ei-line{
+                margin-bottom: 20upx;
+                font-size: 28upx;
+                color: #333;
+                @include textHide(1);
+                >text{
+                    margin-right: 20upx;
+                    color: #9A9A9D;
+                }
+            }
+            .ei-btns{
+                @include centerFlex(flex-end);
+                >view{
+                    width: 192upx;
+                    height: 72upx;
+                    line-height: 68upx;
+                    text-align: center;
+                    font-size: 28upx;
+                    border: 2upx solid $themeColor;
+                    border-radius: 36upx;
+                    color: $themeColor;
+                }
+            }
+
+        }
     }
     .cl-mask{
         position: fixed;
diff --git a/src/pages/course/offer/offer.vue b/src/pages/course/offer/offer.vue
new file mode 100644
index 0000000..782a4b3
--- /dev/null
+++ b/src/pages/course/offer/offer.vue
@@ -0,0 +1,159 @@
+<template>
+    <view class="course-offer fixed-bot-padding">
+        <view class="o-section">
+            <view class="s-line">
+                <view class="l-tit">课程名称: </view>
+                <view class="l-txt">哈哈哈哈哈哈哈哈哈</view>
+            </view>
+            <view class="s-line">
+                <view class="l-tit">上课用户: </view>
+                <view class="l-txt">张三</view>
+            </view>
+            <view class="s-line">
+                <view class="l-tit">课程次数: </view>
+                <view class="l-frame"><input value="12222" /></view>
+            </view>
+            <view class="s-line">
+                <view class="l-tit">课程报价: </view>
+                <view class="l-frame"><input value="12222" /></view>
+                <view class="l-txt">元</view>
+            </view>
+        </view>
+        <view class="fixed-bot-btn"><view hover-class="hover-active">确定</view></view>
+
+        <view class="o-mask">
+            <view class="m-modal">
+                <view class="m-tit">请确定课程报价信息</view>
+                <view class="m-lines">
+                    <view><text>课程名称:</text>羽毛球课程羽毛球课程(包学会)</view>
+                    <view><text>上课用户:</text>羽毛球课程羽毛球课程(包学会)</view>
+                    <view><text>课程次数:</text>羽毛球课程羽毛球课程(包学会)</view>
+                    <view><text>课程报价:</text>羽毛球课程羽毛球课程(包学会)</view>
+                </view>
+                <view class="m-btns">
+                    <view hover-class="hover-active">取消</view>
+                    <view hover-class="hover-active">提交</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .course-offer{
+
+    }
+    .o-section{
+        padding: 34upx 24upx;
+        .s-line{
+
+            @include centerFlex(flex-start);
+            .l-tit{
+                flex-shrink: 0;
+                margin-right: 50upx;
+                line-height: 70upx;
+                font-size: 28upx;
+                color: #9a9a9d;
+            }
+            .l-txt{
+                height: 70upx;
+                line-height: 70upx;
+                flex-grow: 1;
+                font-size: 28upx;
+                color: #333;
+                @include textHide(1);
+            }
+            .l-frame{
+                margin-bottom: 8upx;
+                flex-grow: 0;
+                flex-shrink: 0;
+                margin-right: 10upx;
+                padding: 0 12upx;
+                width: 312upx;
+                height: 68upx;
+                border: 2upx solid #D8D8D8;
+                border-radius: 10upx;
+                background-color: #f7f7f7;
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .o-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 3;
+        background-color: rgba($color: #000000, $alpha: .5);
+    }
+    .m-modal{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding: 40upx 50upx 60upx;
+        width: 620upx;
+        border-radius: 10upx;
+        background-color: #fff;
+        .m-tit{
+            margin-bottom: 40upx;
+            text-align: center;
+            line-height: 44upx;
+            font-size: 32upx;
+            font-weight: 500;
+            color: #333;
+        }
+        .m-lines{
+            margin-bottom: 40upx;
+            padding: 0 50upx;
+            >view{
+                font-size: 28upx;
+                line-height: 60upx;
+                color: #333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                >text{
+                    margin-right: 12upx;
+                    color: #9A9A9D;
+                }
+            }
+        }
+        .m-btns{
+            @include centerFlex(center);
+            >view{
+                margin: 0 14upx;
+                width: 240upx;
+                height: 88upx;
+                line-height: 84upx;
+                border-radius: 44upx;
+                text-align: center;
+                border: 2upx solid #D8D8D8;
+                font-size: 32upx;
+                color: #9A9A9D;
+                &+view{
+                    background-color: $themeColor;
+                    border-color: $themeColor;
+                    color: #fff;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/offer_info/offer_info.vue b/src/pages/course/offer_info/offer_info.vue
new file mode 100644
index 0000000..4b2c3da
--- /dev/null
+++ b/src/pages/course/offer_info/offer_info.vue
@@ -0,0 +1,54 @@
+<template>
+    <view class="offer-info">
+        <view class="i-status i-active">等待客户支付</view>
+        <view class="i-setion">
+            <view class="s-line" v-for="i in 5" :key="i"><text>课程名称：</text>羽毛球必杀训练课</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    page{
+        background-color: #fff;
+    }
+    .offer-info{
+        
+    }
+    .i-status{
+        margin-bottom: 40upx;
+        height: 144upx;
+        line-height: 144upx;
+        text-align: center;
+        font-size: 40upx;
+        font-weight: 600;
+        color: #FF873D;
+        background-color: rgba($color: #FF873D, $alpha: .09);
+        &.i-active{
+            color: #009874;
+            background-color: rgba($color: $themeColor, $alpha: .09);
+        }
+    }
+    .i-setion{
+        padding: 0 30upx;
+        .s-line{
+            margin-bottom: 12upx;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            >text{
+                color: #9a9a9d;
+            }
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/pages/shift/application/application.vue b/src/pages/shift/application/application.vue
new file mode 100644
index 0000000..e7e204c
--- /dev/null
+++ b/src/pages/shift/application/application.vue
@@ -0,0 +1,89 @@
+<template>
+    <view class="shift-application fixed-bot-padding">
+        <view class="a-warn">注：私教课以及用户预约的课程不可换班</view>
+        <view class="a-tit">我的换班</view>
+        <view class="a-ipts">
+            <view v-for="i in 4" :key="i">
+                <input placeholder="请选择课程" />
+                <image></image>
+            </view>
+        </view>
+        <view class="a-tip">
+            <view>换班需要换班教练的时间为空闲。</view>
+            <view>换班后您的时间为空闲，记得前往我的时间。</view>
+            <view>管理您的时间哦。</view>
+        </view>
+        <view class="fixed-bot-btn"><view hover-class="hover-active">提交换班申请</view></view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .shift-application{
+        
+    }
+    .a-warn{
+        margin-bottom: 52upx;
+        height: 92upx;
+        line-height: 92upx;
+        text-align: center;
+        font-size: 28upx;
+        color: #FF873D;
+        background-color: rgba($color: #FF873D, $alpha: .2);
+    }
+    .a-tit{
+        line-height: 44upx;
+        text-align: center;
+        font-size: 32upx;
+        font-weight: 500;
+        color: #333;
+
+    }
+    .a-ipts{
+        padding-top: 24upx;
+        >view{
+            margin: 0 auto 24upx;
+            width: 538upx;
+            height: 88upx;
+            border: 2upx solid #d8d8d8;
+            border-radius: 10upx;
+            padding: 0 20upx;
+            @include centerFlex(space-between);
+            >input{
+                flex-grow: 1;
+                height: 100%;
+                font-size: 28upx;
+                color: #333;
+            }
+            >image{
+                margin-left: 20upx;
+                flex-shrink: 0;
+                width: 28upx;
+                height: 28upx;
+                background-color: skyblue;
+            }
+        }
+
+    }
+    .a-tip{
+        margin: 0 auto;
+        width: 538upx;
+        >view{
+            font-size: 26upx;
+            line-height: 36upx;
+            color: #9a9a9d;
+        }
+    }
+    .fixed-bot-btn{
+        border-top: 2upx solid #D8D8D8;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/shift/record/record.vue b/src/pages/shift/record/record.vue
new file mode 100644
index 0000000..b25def3
--- /dev/null
+++ b/src/pages/shift/record/record.vue
@@ -0,0 +1,100 @@
+<template>
+    <view class="shift-record">
+        <view class="r-list">
+            <view class="l-item" v-for="i in 10" :key="i">
+                <view class="i-status active">已提交</view>
+                <view class="i-top">
+                    <view class="i-line">
+                        <view>课程名称:</view>
+                        <view>
+                            <view>篮球初级课</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="i-bot">
+                    <view class="i-line">
+                        <view>课程名称:</view>
+                        <view>
+                            <view>2020/08/22 10:30~12:30</view>
+                            <view>2020/08/22 10:30~12:30</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="i-unfold">
+                    <text>展开</text>
+                    <image></image>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .shift-record{
+
+    }
+    .r-list{
+        padding: 24upx;
+        .l-item{
+            margin-bottom: 24upx;
+            padding: 20upx 24upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .i-status{
+                text-align: right;
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #333;
+                &.active{
+                    color: $themeColor;
+                }
+            }
+            .i-top{
+                padding-bottom: 20upx;
+                border-bottom: 2upx solid #D8D8D8;
+            }
+            .i-line{
+                display: flex;
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                        margin-right: 14upx;
+                        line-height: 52upx;
+                        font-size: 28upx;
+                        color: #9A9A9D;
+                    }
+                    &+view{
+                        flex-grow: 1;
+                        >view{
+                            line-height: 52upx;
+                            font-size: 28upx;
+                            color: #333;
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+            .i-unfold{
+                line-height: 46upx;
+                font-size: 28upx;
+                color: $themeColor;
+                @include centerFlex(flex-end);
+
+                >image{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    width: 24upx;
+                    height: 24upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file