diff --git a/src/App.vue b/src/App.vue
index dbc803e..40fdd98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,5 +60,31 @@
             border-right: 16upx solid transparent;
             border-top: 16upx solid #333;
         }
+	}
+	
+	// 底部按钮
+	.fixed-bot-padding{
+		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 */
+	}
+	.fixed-bot-btn{
+        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;
+        >view{
+            height: 88upx;
+            line-height: 88upx;
+            text-align: center;
+            font-size: 32upx;
+            border-radius: 44upx;
+            background-color: $themeColor;
+            color: #fff;
+        }
     }
 </style>
diff --git a/src/pages.json b/src/pages.json
index 2b6c9ca..9550c17 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -66,6 +66,36 @@
 			}
 		},
 		{
+			"path": "pages/course/task/task",
+			"style": {
+				"navigationBarTitleText": "作业"
+			}
+		},
+		{
+			"path": "pages/course/task/task",
+			"style": {
+				"navigationBarTitleText": "作业"
+			}
+		},
+		{
+			"path": "pages/course/task_finish/task_finish",
+			"style": {
+				"navigationBarTitleText": "作业完成列表"
+			}
+		},
+		{
+			"path": "pages/course/task_info/task_info",
+			"style": {
+				"navigationBarTitleText": "作业情况"
+			}
+		},
+		{
+			"path": "pages/course/task_publish/task_publish",
+			"style": {
+				"navigationBarTitleText": "布置作业"
+			}
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 			}
diff --git a/src/pages/course/list/list.vue b/src/pages/course/list/list.vue
index 223965a..6d4ac16 100644
--- a/src/pages/course/list/list.vue
+++ b/src/pages/course/list/list.vue
@@ -5,7 +5,7 @@
             <view class="active">体验课</view>
         </view>
         <view class="cl-list">
-            <view class="cl-item" v-for="i in 10" :key="i">
+            <view class="cl-item" v-for="i in 2" :key="i">
                 <view class="ci-name">
                     <view>羽毛球课包学会(带体验课)</view>
                     <view>训练课</view>
@@ -21,8 +21,11 @@
                     <view>班级</view>
                 </view>
             </view>
+            <view class="cl-ex-item">
+
+            </view>
         </view>
-        <view class="cl-mask">
+        <view class="cl-mask" v-if="false">
             <view class="cl-modal">
                 <view class="cm-line">
                     <view>选择班级</view>
@@ -66,6 +69,7 @@
                 </view>
             </view>
         </view>
+        
     </view>
 </template>
 
diff --git a/src/pages/course/roll_call/roll_call.vue b/src/pages/course/roll_call/roll_call.vue
index cb1167d..ce8418e 100644
--- a/src/pages/course/roll_call/roll_call.vue
+++ b/src/pages/course/roll_call/roll_call.vue
@@ -8,12 +8,19 @@
             <view>5/2</view>
         </view>
         <view class="rc-list">
-            <view class="rl-item">
+            <view class="rl-item" v-for="i in 10" :key="i">
                 <view class="ri-selected"></view>
                 <image class="ri-avatar"></image>
                 <view class="ri-content">
                     <view class="rc-info">
-
+                        <view class="ri-name">
+                            <view>Adjoin</view>
+                            <image></image>
+                        </view>
+                        <view class="ri-phone">
+                            <view>12345679083</view>
+                            <image></image>
+                        </view>
                     </view>
                     <view class="rc-tip">
                         <view>剩余次数: 10次</view>
@@ -83,6 +90,36 @@ export default {
         }
         .ri-content{
             flex-grow: 1;
+            .rc-info{
+                margin-bottom: 12upx;
+                @include centerFlex(space-between);
+                .ri-name,.ri-phone{
+                    max-width: 50%;
+                    @include centerFlex(flex-start);
+                    >view{
+                        font-weight: 500;
+                        font-size: 32upx;
+                        line-height: 44upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
+                    >image{
+                        flex-shrink: 0;
+                        margin-left: 12upx;
+                        width: 36upx;
+                        height: 36upx;
+                        background-color: skyblue;
+                    }
+                }
+                .ri-phone{
+                    margin-left: 10upx;
+                    >view{
+                        font-weight: 400;
+                        font-size: 28upx;
+                        @include textHide(1);
+                    }
+                }
+            }
             .rc-tip{
                 @include centerFlex(space-between);
                 >view{
diff --git a/src/pages/course/student_list/student_list.vue b/src/pages/course/student_list/student_list.vue
index 1587624..dd7d383 100644
--- a/src/pages/course/student_list/student_list.vue
+++ b/src/pages/course/student_list/student_list.vue
@@ -27,6 +27,18 @@
                 </view>
             </view>
         </view>
+        <view class="l-mask">
+            <view class="m-modal">
+                <view class="m-tit">确定点名吗? 学员信息如下</view>
+                <view class="m-line"><text>学员: </text>张三</view>
+                <view class="m-line"><text>上课时间: </text>2020-08-22 10:30~11:30</view>
+                <view class="m-line"><text>当前次数/课程次数: </text>12/15</view>
+                <view class="m-btns">
+                    <view hover-class="hover-active">取消</view>
+                    <view hover-class="hover-active">确定</view>
+                </view>
+            </view>
+        </view>
     </view>
 </template>
 
@@ -120,4 +132,62 @@ export default {
             }
         }
     }
+    .l-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        background-color: rgba($color: #000000, $alpha: .5);
+        .m-modal{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            padding: 50upx;
+            width: 620upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .m-tit{
+                margin-bottom: 36upx;
+                text-align: center;
+                line-height: 44upx;
+                font-size: 32upx;
+                font-weight: 500;
+                color: #333;
+            }
+            .m-line{
+                font-size: 28upx;
+                line-height: 52upx;
+                color: #333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                >text{
+                    margin-right: 10upx;
+                    color: #9A9A9D;
+                }
+            }
+            .m-btns{
+                padding-top: 50upx;
+                @include centerFlex(center);
+                >view{
+                    margin: 0 14upx;
+                    width: 240upx;
+                    height: 88upx;
+                    line-height: 84upx;
+                    text-align: center;
+                    border: 2upx solid #D8D8D8;
+                    border-radius: 44upx;
+                    font-size: 32upx;
+                    color: #9A9A9D;
+                    &+view{
+                        border-color: $themeColor;
+                        background-color: $themeColor;
+                        color: #fff;
+                    }
+                }                
+            }
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/pages/course/student_review/student_review.vue b/src/pages/course/student_review/student_review.vue
index 859f6bb..326643c 100644
--- a/src/pages/course/student_review/student_review.vue
+++ b/src/pages/course/student_review/student_review.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="student-review">
+    <view class="student-review fixed-bot-padding">
         <view class="sr-section">
             <view class="ss-name">
                 <view>羽毛球课包学会(带体验课)</view>
@@ -35,7 +35,7 @@
                 </view>
             </view>
         </view>
-        <view class="sr-fixed">
+        <view class="fixed-bot-btn">
             <view hover-class="hover-active">确定</view>
         </view>
     </view>
@@ -50,9 +50,7 @@ export default {
 <style lang="scss">
     @import "~style/public.scss";
     .student-review{
-        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 */
+        
     }
     .sr-section{
         background-color: #fff;
@@ -222,23 +220,4 @@ export default {
             }
         }
     }
-    .sr-fixed{
-        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;
-        >view{
-            height: 88upx;
-            line-height: 88upx;
-            text-align: center;
-            font-size: 32upx;
-            border-radius: 44upx;
-            background-color: $themeColor;
-            color: #fff;
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/src/pages/course/task/task.vue b/src/pages/course/task/task.vue
new file mode 100644
index 0000000..a57fec5
--- /dev/null
+++ b/src/pages/course/task/task.vue
@@ -0,0 +1,99 @@
+<template>
+    <view class="course-task fixed-bot-padding">
+        <picker>
+            <view class="top-bar"><text>12</text></view>
+        </picker>
+        <view class="ct-list">
+            <view class="cl-item" v-for="i in 10" :key="i">
+                <view class="ci-date">
+                    <view>2020/09/08</view>
+                    <view>完成情况:5/20</view>
+                </view>
+                <view class="ci-content">
+                    <text>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作…</text>
+                </view>
+                <view class="cc-unfold">
+                    <text>展开</text>
+                    <image></image>
+                </view>
+                <view class="cc-btn" hover-class="hover-active">完成列表</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';
+    .course-task{
+
+    }
+    .ct-list{
+        padding: 24upx;
+        .cl-item{
+            margin-bottom: 24upx;
+            padding: 30upx 30upx 50upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            font-size: 0;
+            .ci-date{
+                margin-bottom: 40upx;
+                @include centerFlex(space-between);
+                >view{
+                    font-size: 32upx;
+                    line-height: 44upx;
+                    color: #333;
+                    max-width: 50%;
+                    @include textHide(1);
+                    &:first-child{
+                        font-weight: 500;
+                    }
+                }
+            }
+            .ci-content{
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #9a9a9d;
+                @include textHide(3);
+            }
+            .cc-unfold{
+                margin-bottom: 34upx;
+                font-size: 28upx;
+                color: $themeColor;
+                line-height: 40upx;
+                @include centerFlex(flex-end);
+                >image{
+                    margin-left: 10upx;
+                    width: 24upx;
+                    height: 24upx;
+                    background-color: skyblue;
+                }
+            }
+            .cc-btn{
+                float: right;
+                display: inline-block;
+                padding: 0 18upx;
+                height: 64upx;
+                line-height: 64upx;
+                border-radius: 32upx;
+                text-align: center;
+                font-size: 28upx;
+                color: #fff;
+                background-color: $themeColor;
+                
+            }
+            &::after{
+                content: '';
+                display: block;
+                clear: both;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/task_finish/task_finish.vue b/src/pages/course/task_finish/task_finish.vue
new file mode 100644
index 0000000..1e295d5
--- /dev/null
+++ b/src/pages/course/task_finish/task_finish.vue
@@ -0,0 +1,142 @@
+<template>
+    <view class="course-task-finish fixed-bot-padding">
+        <picker>
+            <view class="top-bar"><text>12</text></view>
+        </picker>
+        <view class="ctf-time">
+            <picker class="ct-picker">
+                <view class="cp-con">
+                    <input disabled value="2020年12月27日" />
+                    <image></image>
+                </view>
+            </picker>
+        </view>
+        <view class="ctf-list">
+            <view class="cl-item" v-for="i in 10" :key="i">
+                <view class="ci-time">10:18</view>
+                <view class="ci-content">
+                    <view class="cc-user">
+                        <image class="u-avatar"></image>
+                        <view class="u-name">Adjoin</view>
+                        <image class="u-icon"></image>
+                    </view>
+                    <view class="cc-status">
+                        <view :class="[i == 2?'active':'']">已完成</view>
+                        <image></image>
+                    </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";
+    .course-task-finish{
+
+    }
+    .ctf-time{
+        padding-top: 4upx;
+        padding-left: 20upx;
+        height: 96upx;
+        background-color: #fff;
+        .ct-picker{
+            padding: 0;
+            width: 312upx;
+            border-radius: 10upx;
+            border: 2upx solid #D8D8D8;
+            background-color: #F2F2F7;
+            .cp-con{
+                padding: 0 20upx;
+                height: 68upx;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                >image{
+                    flex-shrink: 0;
+                    width: 28upx;
+                    height: 28upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+    .ctf-list{
+        padding: 24upx;
+        .cl-item{
+            margin-bottom: 24upx;
+            padding: 20upx 24upx 44upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .ci-time{
+                text-align: right;
+                font-size: 32upx;
+                line-height: 44upx;
+                color: #9a9a9d;
+            }
+            .ci-content{
+                @include centerFlex(space-between);
+                .cc-user{
+                    @include centerFlex(space-between);
+                    .u-avatar{
+                        flex-shrink: 0;
+                        flex-grow: 0;
+                        margin-right: 20upx;
+                        width: 116upx;
+                        height: 116upx;
+                        border-radius: 50%;
+                        background-color: skyblue;
+                    }
+                    .u-name{
+                        line-height: 44upx;
+                        font-weight: 500;
+                        font-size: 32upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
+                    .u-icon{
+                        margin-left: 12upx;
+                        flex-grow: 0;
+                        flex-shrink: 0;
+                        width: 36upx;
+                        height: 36upx;
+                        background-color: skyblue;
+                    }
+                }
+                .cc-status{
+                    flex-shrink: 0;
+                    margin-left: 20upx;
+                    max-width: 30%;
+                    @include centerFlex(flex-end);
+                    >view{
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: $themeColor;
+                        @include textHide(1);
+                        &.active{
+                            color: #FF4444;
+                        }
+                    }
+                    >image{
+                        flex-shrink: 0;
+                        margin-left: 16upx;
+                        width: 32upx;
+                        height: 32upx;
+                        background-color: skyblue;
+                    }
+                }
+
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/task_info/task_info.vue b/src/pages/course/task_info/task_info.vue
new file mode 100644
index 0000000..a3dea14
--- /dev/null
+++ b/src/pages/course/task_info/task_info.vue
@@ -0,0 +1,208 @@
+<template>
+    <view class="task-info">
+        <block>
+            <view class="i-header">
+                <picker>
+                    <view class="top-bar"><text>12</text></view>
+                </picker>
+                <picker class="select-picker">
+                    <view>
+                        <input disabled value="小小李木子" />
+                        <image></image>
+                    </view>
+                </picker>
+                
+            </view>
+            <view class="i-user">
+                <image></image>
+                <view>
+                    <text>学员姓名:</text>小李张净水器净
+                </view>
+            </view>
+        </block>
+        <view class="ti-section">
+            <block v-if="false">
+                <view class="s-name">
+                    <view>羽毛球课包学会(带体验课)</view>
+                    <view>一班</view>
+                </view>
+                <view class="s-user">
+                    <view>学员名称:</view>
+                    <picker class="select-picker">
+                        <view>
+                            <input disabled value="小小李木子" />
+                            <image></image>
+                        </view>
+                    </picker>
+                </view>
+            </block>
+            
+            <view class="s-detail">
+                <view>完成情况</view>
+                <view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容村上春树吃餐……</view>
+            </view>
+            <view class="s-addr">
+                <view>视频链接：</view>
+                <view>htttp//ksjksjksj.cocfcwqcwq</view>
+                <view>复制</view>
+            </view>
+            <view class="s-imgs">
+                <image v-for="i in 5" :key="i"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .ti-section{
+        padding: 0 24upx 26upx;
+        background-color: #fff;
+        
+        .s-name{
+            height: 128upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                line-height: 44upx;
+                font-size: 32upx;
+                color: #333;
+                @include textHide(1);
+                &+view{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    max-width: 20%;
+                }
+            }
+        }
+        .s-user{
+            padding: 16upx 0;
+            @include centerFlex(flex-start);
+            >view{
+                margin-right: 22upx;
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #9a9a9d;
+            }
+            
+        }
+        .s-detail{
+            padding-top: 20upx;
+            >view{
+                &:first-child{
+                    margin-bottom: 12upx;
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                &+view{
+                    word-break: break-all;
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #9a9a9d;
+                }
+            }
+        }
+        .s-addr{
+            padding: 30upx 0;
+            @include centerFlex(space-between);
+            >view{
+                line-height: 40upx;
+                font-size: 28upx;
+                &:first-child{
+                    flex-shrink: 0;
+                    color: #333;
+                }
+                &:nth-child(2){
+                    flex-grow: 1;
+                    color: #9A9A9D;
+                    @include textHide(1);
+                }
+                &:nth-child(3){
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    width: 98upx;
+                    height: 42upx;
+                    line-height: 38upx;
+                    text-align: center;
+                    border: 2upx solid #009874;
+                    border-radius: 22upx;
+                    color: $themeColor;
+                }
+            }
+        }
+        .s-imgs{
+            padding-top: 20upx;
+            font-size: 0;
+            >image{
+                margin-bottom: 24upx;
+                width: 200upx;
+                height: 200upx;
+                border-radius: 10upx;
+                background-color: skyblue;
+                &:not(:nth-child(3n)){
+                    margin-right: 44upx;
+                }
+            }
+        }
+        
+    }
+    .i-header{
+        padding: 0 24upx 26upx;
+        background-color: #fff;
+        
+    }
+    .i-user{
+        margin: 24upx 0 24upx;
+        padding: 30upx;
+        background-color: #fff;
+        @include centerFlex(flex-start);
+        >image{
+            flex-shrink: 0;
+            margin-right: 32upx;
+            width: 112upx;
+            height: 112upx;
+            border-radius: 50%;
+            background-color: slateblue;
+
+        }
+        >view{
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #333;
+            @include textHide(1);
+            >text{
+                color: #9a9a9d;
+            }
+        }
+    }
+    .select-picker{
+        width: 312upx;
+        border: 2upx solid #D8D8D8;
+        border-radius: 10upx;
+        background-color: #F2F2F7;
+        view{
+            padding: 0 24upx;
+            height: 68upx;
+            @include centerFlex(center);
+            >input{
+                flex-grow: 1;
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #333;
+            }
+            >image{
+                flex-shrink: 0;
+                width: 28upx;
+                height: 28upx;
+                background-color: skyblue;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/task_publish/task_publish.vue b/src/pages/course/task_publish/task_publish.vue
new file mode 100644
index 0000000..be1efb9
--- /dev/null
+++ b/src/pages/course/task_publish/task_publish.vue
@@ -0,0 +1,169 @@
+<template>
+    <view class="task-publish fixed-bot-padding">
+        <view class="p-section">
+            <view class="s-desc">
+                <view class="d-tit">作业描述</view>
+                <view class="d-frame"><textarea placeholder="请输入"></textarea></view>
+            </view>
+            <view class="s-addr">
+                <view>视频链接</view>
+                <view><input value="12345" /></view>
+            </view>
+            <view class="s-imgs">
+                <view class="i-tit"><text>上传照片</text>(最多上传6张，只支持.jpg、png 格式）</view>
+                <view class="i-list">
+                    <view class="l-item" v-for="i in 5" :key="i">
+                        <image class="i-close"></image>
+                        <image class="i-img"></image>
+                    </view>
+                    <view class="l-item l-add">
+                        <view class="a-icon"></view>
+                        <view class="a-tip">上传照片</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';
+    .task-publish{
+        .p-section{
+            padding: 30upx;
+            background-color: #fff;
+        }
+        .s-desc{
+            display: flex;
+            .d-tit{
+                padding-top: 20upx;
+                flex-shrink: 0;
+                margin-right: 20upx;
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #333;
+            }
+            .d-frame{
+                flex-grow: 1;
+                padding: 16upx;
+                height: 290upx;
+                border: 2upx solid #D8D8D8;
+                border-radius: 10upx;
+                >textarea{
+                    width: 100%;
+                    height: 100%;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #9a9a9d;
+                }
+            }
+        }
+        .s-addr{
+            padding: 30upx 0;
+            @include centerFlex(space-between);
+            >view{
+               &:first-child{
+                    flex-shrink: 0;
+                    margin-right: 20upx;
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #333;
+               } 
+               &+view{
+                   padding: 0 14upx;
+                   flex-grow: 1;
+                   height: 78upx;
+                   border: 2upx solid #D8D8D8;
+                   border-radius: 10upx;
+                   >input{
+                        width: 100%;
+                        height: 100%;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: #9a9a9d;
+                   }
+               }
+            }
+        }
+        .s-imgs{
+            .i-tit{
+                line-height: 44upx;
+                font-size: 24upx;
+                color: #9a9a9d;
+                >text{
+                    font-size: 32upx;
+                    color: #333;
+                }
+            }
+            .i-list{
+                padding: 20upx 0;
+                font-size: 0;
+                .l-item{
+                    position: relative;
+                    display: inline-block;
+                    margin-bottom: 24upx;
+                    width: 200upx;
+                    height: 200upx;
+                    border-radius: 10upx;
+                    overflow: hidden;
+                    background-color: springgreen;
+                    &:not(:nth-child(3n)){
+                        margin-right: 44upx;
+                    }
+                    .i-close{
+                        position: absolute;
+                        right: 6upx;
+                        top: 6upx;
+                        z-index: 2;
+                        width: 40upx;
+                        height: 40upx;
+                        background-color: skyblue;
+                    }
+                    .i-img{
+                        width: 100%;
+                        height: 100%;
+                        background-color: yellowgreen;
+                    }
+                }
+                .l-add{
+                    padding-top: 36upx;
+                    border: 2upx solid #D8D8D8;
+                    .a-icon{
+                        position: relative;
+                        margin: 0 auto 30upx;
+                        width: 60upx;
+                        height: 60upx;
+                        background-color: slateblue;
+                        &::after,&::before{
+                            content: '';
+                            position: absolute;
+                            left: 50%;
+                            top: 50%;
+                            transform: translate(-50%, -50%);
+                            background-color: #D8D8D8;
+                            width: 60upx;
+                            height: 4upx;
+                        }
+                        &::after{
+                            height: 60upx;
+                            width: 4upx;
+                        }
+                    }
+                    .a-tip{
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        text-align: center;
+                        color: #9a9a9d;
+                    }
+                }
+            }
+        }
+    }   
+</style>
\ No newline at end of file