From 7c411af00a51264fa421aa7c2f02670d80286f4d Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Mon, 25 Jan 2021 18:07:49 +0800
Subject: [PATCH] add all styke

---
 src/App.vue                                        |  26 +-
 src/pages.json                                     |  48 ++++
 src/pages/course/class_change/class_change.vue     | 111 +++++++++
 src/pages/course/class_list/class_list.vue         | 115 +++++++++
 src/pages/course/list/list.vue                     | 262 +++++++++++++++++++++
 src/pages/course/roll_call/roll_call.vue           | 108 +++++++++
 src/pages/course/student_list/student_list.vue     | 123 ++++++++++
 src/pages/course/student_review/student_review.vue | 244 +++++++++++++++++++
 src/pages/message_info/message_info.vue            |  44 ++++
 src/pages/store_list/store_list.vue                | 102 ++++++++
 10 files changed, 1182 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/course/class_change/class_change.vue
 create mode 100644 src/pages/course/class_list/class_list.vue
 create mode 100644 src/pages/course/list/list.vue
 create mode 100644 src/pages/course/roll_call/roll_call.vue
 create mode 100644 src/pages/course/student_list/student_list.vue
 create mode 100644 src/pages/course/student_review/student_review.vue
 create mode 100644 src/pages/message_info/message_info.vue
 create mode 100644 src/pages/store_list/store_list.vue

diff --git a/src/App.vue b/src/App.vue
index 08441c9..dbc803e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,8 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	@import '~style/public.scss';
 	/*每个页面公共css */
 	page{
 		background-color: #f2f2f7;
@@ -37,4 +38,27 @@
 		background-color: rgba(0,0,0,.1);
 	}
 	/* btn hover-class */ 
+
+	.top-bar{
+        padding: 0 26upx;
+        height: 98upx;
+        width: 100%;
+        line-height: 98upx;
+        font-size: 32upx;
+        font-weight: 500;
+        color: #333;
+        background-color: #fff;
+        @include textHide(1);
+        &::after{
+            content: '';
+            margin-left: 24upx;
+            display: inline-block;
+            vertical-align: middle;
+            width: 0;
+            height: 0;
+            border-left: 16upx solid transparent;
+            border-right: 16upx solid transparent;
+            border-top: 16upx solid #333;
+        }
+    }
 </style>
diff --git a/src/pages.json b/src/pages.json
index bcbc40e..2b6c9ca 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -18,6 +18,54 @@
 			}
 		},
 		{
+			"path": "pages/message_info/message_info",
+			"style": {
+				"navigationBarTitleText": "消息详情"
+			}
+		},
+		{
+			"path": "pages/store_list/store_list",
+			"style": {
+				"navigationBarTitleText": "门店列表"
+			}
+		},
+		{
+			"path": "pages/course/list/list",
+			"style": {
+				"navigationBarTitleText": "我的课程"
+			}
+		},
+		{
+			"path": "pages/course/class_list/class_list",
+			"style": {
+				"navigationBarTitleText": "班级列表"
+			}
+		},
+		{
+			"path": "pages/course/student_list/student_list",
+			"style": {
+				"navigationBarTitleText": "学员列表"
+			}
+		},
+		{
+			"path": "pages/course/class_change/class_change",
+			"style": {
+				"navigationBarTitleText": "学员调班"
+			}
+		},
+		{
+			"path": "pages/course/student_review/student_review",
+			"style": {
+				"navigationBarTitleText": "学员点评"
+			}
+		},
+		{
+			"path": "pages/course/roll_call/roll_call",
+			"style": {
+				"navigationBarTitleText": "点名"
+			}
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 			}
diff --git a/src/pages/course/class_change/class_change.vue b/src/pages/course/class_change/class_change.vue
new file mode 100644
index 0000000..0528907
--- /dev/null
+++ b/src/pages/course/class_change/class_change.vue
@@ -0,0 +1,111 @@
+<template>
+    <view class="class-change">
+        <view class="cc-user">
+            <image class="cu-avatar"></image>
+            <view>Adjoin</view>
+            <image class="cu-icon"></image>
+        </view>
+
+        <view class="cc-picker">
+            <picker>
+                <view>
+                    <input disabled placeholder="请选择班级" />
+                    <image></image>
+                </view>
+            </picker>
+        </view>
+        <view class="cc-fixed">
+            <view hover-class="hover-active">确定</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    page{
+        background-color: #fff;
+    }
+    .class-change{
+
+    }
+    .cc-user{
+        padding: 36upx 24upx 18upx;
+        @include centerFlex(flex-start);
+        >image{
+            flex-grow: 0;
+            flex-shrink: 0;
+            background-color: skyblue;
+        }
+        .cu-avatar{
+            margin-right: 32upx;
+            width: 96upx;
+            height: 96upx;
+            border-radius: 50%;
+        }
+        .cu-icon{
+            margin-left: 12upx;
+            width: 36upx;
+            height: 36upx;
+        }
+        >view{
+            font-size: 32upx;
+            font-weight: 500;
+            line-height: 44upx;
+            max-width: 70%;
+            @include textHide(1)
+        }
+    }
+    .cc-picker{
+        margin-left: auto;
+        margin-right: 24upx;
+        width: 574upx;
+        border-radius: 10upx;
+        border: 2upx solid #D8D8D8;
+        view{
+            padding-left: 40upx;
+            padding-right: 14upx;
+            width: 574upx;
+            height: 84upx;
+            @include centerFlex(space-between);
+            >input{
+                flex-grow: 1;
+                font-size: 28upx;
+                color: #333;
+                height: 100%;
+            }
+            >image{
+                flex-shrink: 0;
+                margin-left: 20upx;
+                width: 28upx;
+                height: 28upx;
+                background-color: skyblue;
+            }
+        }
+    }
+    .cc-fixed{
+        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 */
+        >view{
+            height: 88upx;
+            line-height: 88upx;
+            text-align: center;
+            border-radius: 44upx;
+            font-size: 32upx;
+            background-color: $themeColor;
+            color: #fff;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/pages/course/class_list/class_list.vue b/src/pages/course/class_list/class_list.vue
new file mode 100644
index 0000000..6191cfc
--- /dev/null
+++ b/src/pages/course/class_list/class_list.vue
@@ -0,0 +1,115 @@
+<template>
+    <view class="class-list">
+        <picker>
+            <view class="cl-bar"><text>12</text></view>
+        </picker>
+        <view class="cl-list">
+            <view class="cl-item" v-for="i in 10" :key="i">
+                <view class="ci-name">
+                    <view>二班</view>
+                    <view :class="[i==2?'active':'']">已成班</view>
+                </view>
+                <view class="ci-line"><text>学员人数:</text>10人</view>
+                <view class="ci-btns">
+                    <view hover-class="hover-active">点名</view>
+                    <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";   
+    .class-list{
+
+    }
+    .cl-bar{
+        padding: 0 26upx;
+        height: 98upx;
+        width: 100%;
+        line-height: 98upx;
+        font-size: 32upx;
+        font-weight: 500;
+        color: #333;
+        background-color: #fff;
+        @include textHide(1);
+        &::after{
+            content: '';
+            margin-left: 24upx;
+            display: inline-block;
+            vertical-align: middle;
+            width: 0;
+            height: 0;
+            border-left: 16upx solid transparent;
+            border-right: 16upx solid transparent;
+            border-top: 16upx solid #333;
+        }
+    }
+    .cl-list{
+        padding: 24upx;
+        .cl-item{
+            margin-bottom: 24upx;
+            padding: 24upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .ci-name{
+                @include centerFlex(space-between);
+                >view{
+                    &:first-child{
+                        flex-grow: 1;
+                        line-height: 44upx;
+                        font-weight: 500;
+                        font-size: 32upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
+                    &+view{
+                        flex-shrink: 0;
+                        margin-left: 20upx;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: $themeColor;
+                        &.active{
+                            color: #FF4444;
+                        }
+                    }
+                }
+            }
+            .ci-line{
+                margin-bottom: 28upx;
+                font-size: 28upx;
+                line-height: 52upx;
+                color: #333;
+                @include textHide(1);
+                >text{
+                    margin-right: 52upx;
+                    color: #9A9A9D;
+                }
+            }
+            .ci-btns{
+                @include centerFlex(flex-end);
+                >view{
+                    width: 160upx;
+                    height: 72upx;
+                    line-height: 72upx;
+                    text-align: center;
+                    border-radius: 36upx;
+                    font-size: 28upx;
+                    background-color: $themeColor;
+                    color: #fff;
+                    &:not(:first-child){
+                        margin-left: 24upx;
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/list/list.vue b/src/pages/course/list/list.vue
new file mode 100644
index 0000000..223965a
--- /dev/null
+++ b/src/pages/course/list/list.vue
@@ -0,0 +1,262 @@
+<template>
+    <view class="course-list">
+        <view class="cl-tab">
+            <view>正式课</view>
+            <view class="active">体验课</view>
+        </view>
+        <view class="cl-list">
+            <view class="cl-item" v-for="i in 10" :key="i">
+                <view class="ci-name">
+                    <view>羽毛球课包学会(带体验课)</view>
+                    <view>训练课</view>
+                </view>
+                <view class="ci-lines">
+                    <text>班级数: </text>10
+                </view>
+                <view class="ci-lines">
+                    <text>班级数: </text>10
+                </view>
+                <view class="cl-btns">
+                    <view>预约上课</view>
+                    <view>班级</view>
+                </view>
+            </view>
+        </view>
+        <view class="cl-mask">
+            <view class="cl-modal">
+                <view class="cm-line">
+                    <view>选择班级</view>
+                    <picker>
+                        <view class="cl-frame">
+                            <input disabled placeholder="请选择班级" />
+                            <image></image>
+                        </view>
+                    </picker>
+                </view>
+                <view class="cm-line">
+                    <view>选择日期</view>
+                    <picker mode="date">
+                        <view class="cl-frame">
+                            <input disabled placeholder="请选择日期" />
+                            <image></image>
+                        </view>
+                    </picker>
+                </view>
+                <view class="cm-line">
+                    <view>选择时间</view>
+                    <view class="cl-content">
+                        <picker mode="time">
+                            <view class="cc-frame">
+                                <input disabled placeholder="请选择时间"/>
+                                <image></image>
+                            </view>
+                        </picker>
+                        <view>-</view>
+                        <picker mode="time">
+                            <view class="cc-frame">
+                                <input disabled placeholder="请选择时间"/>
+                                <image></image>
+                            </view>
+                        </picker>
+                    </view>
+                </view>
+                <view class="cm-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";
+    .course-list{
+
+    }
+    .cl-tab{
+        height: 96upx;
+        background-color: #fff;
+        @include centerFlex(space-around);
+        >view{
+            width: 160upx;
+            height: 64upx;
+            line-height: 64upx;
+            text-align: center;
+            border-radius: 32upx;
+            font-size: 32upx;
+            font-weight: 500;
+            color: #333;
+            &.active{
+                background-color: $themeColor;
+                color: #fff;
+            }
+        }
+    }
+    .cl-list{
+        padding: 24upx;
+        .cl-item{
+            margin-bottom: 24upx;
+            padding: 30upx 20upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .ci-name{
+                margin-bottom: 10upx;
+                @include centerFlex(space-between);
+                >view{
+                    &:first-child{
+                        flex-grow: 1;
+                        line-height: 44upx;
+                        font-weight: 500;
+                        font-size: 32upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
+                    &:nth-child(2){
+                        flex-shrink: 0;
+                        margin-left: 10upx;
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        color: #333;
+                    }
+                }
+            }
+            .ci-lines{
+                margin-bottom: 10upx;
+                line-height: 52upx;
+                font-size: 28upx;
+                color: #333;
+                @include textHide(1);
+                >text{
+                    margin-right: 12upx;
+                    color: #9A9A9D;
+                }
+            }
+            .cl-btns{
+                @include centerFlex(flex-end);
+                >view{
+                    width: 192upx;
+                    height: 72upx;
+                    text-align: center;
+                    line-height: 72upx;
+                    border-radius: 36upx;
+                    font-size: 28upx;
+                    font-weight: 500;
+                    background-color: $themeColor;
+                    color: #fff;
+                    &:not(:first-child){
+                        margin-left: 24upx;
+                    }
+                }
+            }
+        }
+    }
+    .cl-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba($color: #000000, $alpha: .5);
+    }
+    .cl-modal{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 660upx;
+        transform: translate(-50%, -50%);
+        border-radius: 10upx;
+        padding: 50upx 34upx;
+        background-color: #fff;
+        .cm-line{
+            margin-bottom: 24upx;
+            @include centerFlex(flex-start);
+            >view:first-child{
+                flex-shrink: 0;
+                flex-grow: 0;
+                margin-right: 14upx;
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #333;
+            }
+            .cl-frame{
+                padding: 0 26upx;
+                width: 460upx;
+                height: 88upx;
+                border: 2upx solid #D8D8D8;
+                border-radius: 10upx;
+                @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;
+                }
+            }
+            .cl-content{
+                width: 460upx;
+                @include centerFlex(space-between);
+                >view{
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #9a9a9d;
+                }
+                .cc-frame{
+                    padding: 0 12upx;
+                    height: 88upx;
+                    width: 212upx;
+                    border: 2upx solid #D8D8D8;
+                    border-radius: 10upx;
+                    @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;
+                    }
+                }
+
+            }
+        }
+        .cm-btns{
+            @include centerFlex(center);
+            >view{
+                margin: 0 14upx;
+                height: 88upx;
+                width: 240upx;
+                line-height: 84upx;
+                text-align: center;
+                border-radius: 44upx;
+                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/roll_call/roll_call.vue b/src/pages/course/roll_call/roll_call.vue
new file mode 100644
index 0000000..cb1167d
--- /dev/null
+++ b/src/pages/course/roll_call/roll_call.vue
@@ -0,0 +1,108 @@
+<template>
+    <view class="roll-call">
+        <picker>
+            <view class="top-bar"><text>12</text></view>
+        </picker>
+        <view class="rc-time">
+            <view>课程时间:  2020/12/19    13:00~14:15</view>
+            <view>5/2</view>
+        </view>
+        <view class="rc-list">
+            <view class="rl-item">
+                <view class="ri-selected"></view>
+                <image class="ri-avatar"></image>
+                <view class="ri-content">
+                    <view class="rc-info">
+
+                    </view>
+                    <view class="rc-tip">
+                        <view>剩余次数: 10次</view>
+                        <view>未点名</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .roll-call{
+
+    }
+    .rc-time{
+        padding: 0 24upx;
+        margin-bottom: 24upx;
+        height: 100upx;
+        border-top: 2upx solid #D8D8D8;
+        background-color: #fff;
+        @include centerFlex(space-between);
+        >view{
+            font-size: 32upx;
+            color: #9a9a9d;
+            &:first-child{
+                flex-grow: 1;
+                @include textHide(1);
+            }
+            &+view{
+                flex-shrink: 0;
+                max-width: 20%;
+                @include textHide(1);
+            }
+        }
+    }
+    .rc-list{
+
+    }
+    .rl-item{
+        padding: 54upx 24upx;
+        margin-bottom: 24upx;
+        background-color: #fff;
+        @include centerFlex(flex-start);
+        .ri-selected{
+            flex-shrink: 0;
+            margin-right: 26upx;
+            width: 40upx;
+            height: 40upx;
+            background-color: skyblue;
+        }
+        .ri-avatar{
+            flex-shrink: 0;
+            flex-grow: 0;
+            margin-right: 20upx;
+            width: 116upx;
+            height: 116upx;
+            border-radius: 50%;
+            background-color: skyblue;
+        }
+        .ri-content{
+            flex-grow: 1;
+            .rc-tip{
+                @include centerFlex(space-between);
+                >view{
+                    @include textHide(1);
+                    &:first-child{
+                        flex-grow: 1;
+                        font-size: 24upx;
+                        line-height: 34upx;
+                        color: #9a9a9d;
+                    }
+                    &+view{
+                        margin-left: 20upx;
+                        max-width: 26%;
+                        flex-shrink: 0;
+                        font-weight: 500;
+                        font-size: 28upx;
+                        color: $themeColor;
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/course/student_list/student_list.vue b/src/pages/course/student_list/student_list.vue
new file mode 100644
index 0000000..1587624
--- /dev/null
+++ b/src/pages/course/student_list/student_list.vue
@@ -0,0 +1,123 @@
+<template>
+    <view class="student-list">
+        <picker>
+            <view class="top-bar"><text>12</text></view>
+        </picker>
+        <view class="sl-list">
+            <view class="sl-item" v-for="i in 10" :key="i">
+                <view class="si-content">
+                    <image></image>
+                    <view>
+                        <view class="sc-info">
+                            <view class="si-name">
+                                <view>Adjoin</view>
+                                <image></image>
+                            </view>
+                            <view class="si-phone">
+                                <view>123453</view>
+                                <image></image>
+                            </view>
+                        </view>
+                        <view class="sc-lave">剩余次数: 10次</view>
+                    </view>
+                </view>
+                <view class="si-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';
+    .student-list{
+
+    }
+    .sl-list{
+        padding: 24upx;
+        .sl-item{
+            margin-bottom: 24upx;
+            padding: 46upx 24upx 28upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .si-content{
+                margin-bottom: 16upx;
+                @include centerFlex(space-between);
+                >image{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    margin-right: 20upx;
+                    width: 116upx;
+                    height: 116upx;
+                    border-radius: 50%;
+                    background-color: skyblue;
+                }
+                >view{
+                    flex-grow: 1;
+                    .sc-info{
+                        margin-bottom: 12upx;
+                        @include centerFlex(space-between);
+                        .si-name,.si-phone{
+                            max-width: 50%;
+                            flex-grow: 1;
+                            @include centerFlex(flex-start);
+                            >view{
+                                font-size: 28upx;
+                                font-weight: 500;
+                                line-height: 44upx;
+                                color: #333;
+                                @include textHide(1);
+                            }
+                            >image{
+                                flex-shrink: 0;
+                                flex-grow: 0;
+                                width: 34upx;
+                                height: 34upx;
+                                margin-left: 14upx;
+                                background-color: skyblue;
+                            }
+                        }
+                        .si-phone{
+                            justify-content: flex-end;
+                            >view{
+                                text-align: right;
+                                font-weight: 400;
+                            }
+                        }
+                    }
+                    .sc-lave{
+                        line-height: 34upx;
+                        font-size: 24upx;
+                        color: #9a9a9d;
+                        @include textHide(1);
+                    }
+                }
+            }
+            .si-btns{
+                @include centerFlex(flex-end);
+                >view{
+                    width: 160upx;
+                    height: 72upx;
+                    text-align: center;
+                    line-height: 72upx;
+                    border-radius: 36upx;
+                    font-size: 28upx;
+                    font-weight: 500;
+                    background-color: $themeColor;
+                    color: #fff;
+                    &:not(:first-child){
+                        margin-left: 24upx;
+                    }
+                }
+            }
+        }
+    }
+</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
new file mode 100644
index 0000000..859f6bb
--- /dev/null
+++ b/src/pages/course/student_review/student_review.vue
@@ -0,0 +1,244 @@
+<template>
+    <view class="student-review">
+        <view class="sr-section">
+            <view class="ss-name">
+                <view>羽毛球课包学会(带体验课)</view>
+                <view>一班</view>
+            </view>
+            <view class="ss-user">
+                <view>学员名称:</view>
+                <picker class="su-picker">
+                    <view>
+                        <input disabled placeholder="选择姓名" />
+                        <image></image>
+                    </view>
+                </picker>
+            </view>
+            <view class="ss-review">
+                <view>学员点评:</view>
+                <view>
+                    <textarea placeholder="请输入您的点评、建议或者发现的问题"></textarea>
+                </view>
+            </view>
+            <view class="ss-title">
+                <text>上传照片</text>
+                (最多上传3张，只支持.jpg、png 格式）
+            </view>
+            <view class="ss-pics">
+                <view class="sp-item" v-for="i in 5" :key="i">
+                    <image class="si-close"></image>
+                    <image class="si-img"></image>
+                </view>
+                <view class="sp-item sp-add">
+                    <view></view>
+                    <view>上传照片</view>
+                </view>
+            </view>
+        </view>
+        <view class="sr-fixed">
+            <view hover-class="hover-active">确定</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<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;
+        padding: 0 26upx;
+        .ss-name{
+            padding: 48upx 0 36upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(space-between);
+            >view{
+                line-height: 44upx;
+                font-weight: 500;
+                font-size: 32upx;
+                color: #333;
+                &+view{
+                    margin-left: 20upx;
+                    flex-shrink: 0;
+                }
+                &:first-child{
+                    flex-grow: 1;
+                    @include textHide(1);
+                }
+            }
+        }
+        .ss-user{
+            padding: 16upx 0 24upx;
+            @include centerFlex(flex-start);
+            >view{
+                &:first-child{
+                    margin-right: 22upx;
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #9a9a9d;
+                    
+                }
+            }
+            .su-picker{
+                width: 312upx;
+                border: 2upx solid #D8D8D8;
+                border-radius: 10upx;
+                background-color: #F2F2F7;
+                view{
+                    padding: 0 28upx;
+                    height: 68upx;
+                    @include centerFlex(space-between);
+                }
+                input{
+                    flex-grow: 1;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                image{
+                    margin-left: 16upx;
+                    flex-shrink: 0;
+                    width: 28upx;
+                    height: 28upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+        .ss-review{
+            display: flex;
+            padding-bottom: 24upx;
+            border-bottom: 2upx solid #D8D8D8;
+            >view{
+                &:first-child{
+                    flex-shrink: 0;
+                    margin-right: 22upx;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #333;
+                }
+                &+view{
+                    padding: 30upx;
+                    flex-grow: 1;
+                    height: 226upx;
+                    border-radius: 10upx;
+                    border: 2upx solid #D8D8D8;
+                    >textarea{
+                        width: 100%;
+                        height: 100%;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                }
+            }
+        }
+        .ss-title{
+            padding: 16upx 0 20upx;
+            font-size: 24upx;
+            line-height: 44upx;
+            color: #9a9a9d;
+            >text{
+                font-size: 32upx;
+                color: #333;
+            }
+        }
+        .ss-pics{
+            padding-bottom: 62upx;
+            font-size: 0;
+            .sp-item{
+                position: relative;
+                display: inline-block;
+                margin-bottom: 24upx;
+                width: 200upx;
+                height: 200upx;
+                border-radius: 10upx;
+                background-color: greenyellow;
+                overflow: hidden;
+                &:not(:nth-child(3n)){
+                    margin-right: 44upx;
+                }
+                .si-close{
+                    position: absolute;
+                    right: 6upx;
+                    top: 6upx;
+                    z-index: 2;
+                    width: 40upx;
+                    height: 40upx;
+                    background-color: skyblue;
+                }
+                .si-img{
+                    width: 100%;
+                    height: 100%;
+                    background-color: royalblue;
+                }
+                &.sp-add{
+                    padding-top: 36upx;
+                    >view{
+                        &:first-child{
+                            position: relative;
+                            margin: 0 auto 30upx;
+                            width: 60upx;
+                            height: 60upx;
+                            background-color: springgreen;
+                            &::before{
+                                content: '';
+                                position: absolute;
+                                left: 50%;
+                                top: 50%;
+                                transform: translate(-50%, -50%);
+                                display: block;
+                                width: 60upx;
+                                height: 4upx;
+                                background-color: #D8D8D8;
+                            }
+                            &::after{
+                                content: '';
+                                position: absolute;
+                                left: 50%;
+                                top: 50%;
+                                transform: translate(-50%, -50%);
+                                display: block;
+                                width: 4upx;
+                                height: 60upx;
+                                background-color: #D8D8D8;
+                            }
+                        }
+                        &+view{
+                            text-align: center;
+                            line-height: 40upx;
+                            font-size: 28upx;
+                            color: #9a9a9d;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .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/message_info/message_info.vue b/src/pages/message_info/message_info.vue
new file mode 100644
index 0000000..8bd8626
--- /dev/null
+++ b/src/pages/message_info/message_info.vue
@@ -0,0 +1,44 @@
+<template>
+    <view class="message-info">
+        <view class="mi-title">欧轩智能商家助手上线啦</view>
+        <view class="mt-time">2020/11/23</view>
+        <view class="mt-content">
+            <text>   出去就像是想和是想和想去市区秀嘘嘘和文化文物 i 和芜湖 u哦哦无所谓 i 睡觉哇想你看我看完我忘记我看拳脚交加没清醒就没去现场希望开学前去想你亲亲就像是想和是想和想去市区秀嘘嘘和文化文物 i 和芜湖 u哦哦无所谓 i 睡觉哇想你看我看完我忘记我看拳脚交加没清醒就没去现场希望开学才说得出设身处地千秋万代事情都是</text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .message-info{
+        padding: 44upx 24upx;
+        .mi-title{
+            margin-bottom: 10upx;
+            line-height: 52upx;
+            font-size: 38upx;
+            font-weight: 500;
+            color: #333;
+        }
+        .mt-time{
+            margin-bottom: 38upx;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #9a9a9d;
+        }
+        .mt-content{
+            line-height: 40upx;
+            word-break: break-all;
+            font-size: 28upx;
+            color: #9a9a9d;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/store_list/store_list.vue b/src/pages/store_list/store_list.vue
new file mode 100644
index 0000000..8a70e0e
--- /dev/null
+++ b/src/pages/store_list/store_list.vue
@@ -0,0 +1,102 @@
+<template>
+    <view class="store-list">
+        <view class="sl-item" v-for="i in 10" :key="i">
+            <image class="si-logo"></image>
+            <view class="si-content">
+                <view class="sc-top">
+                    <view>欧轩智能场馆(羽毛球永泰店)</view>
+                    <image></image>
+                </view>
+                <view :class="['sc-tag', i==2?'active':'']"><text>正常营业</text></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .store-list{
+        padding-bottom: 20upx;
+        padding-bottom: calc( 20upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 20upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .sl-item{
+        padding-left: 20upx;
+        @include centerFlex(space-between);
+        >.si-logo{
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin-right: 48upx;
+            width: 100upx;
+            height: 100upx;
+            border-radius: 50%;
+            border: 2upx solid #D8D8D8;
+            background-color: skyblue;
+        }
+        .si-content{
+            flex-grow: 1;
+            padding: 40upx 0;
+            padding-right: 26upx;
+            border-bottom: 2upx solid #D8D8D8;
+            font-size: 0;
+            .sc-top{
+                margin-bottom: 24upx;
+                @include centerFlex(space-between);
+                >view{
+                    height: 44upx;
+                    line-height: 44upx;
+                    flex-grow: 1;
+                    font-weight: 500;
+                    font-size: 32upx;
+                    color: #333;
+                    @include textHide(1);
+                }   
+                >image{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    height: 32upx;
+                    width: 32upx;
+                    background-color: skyblue;
+                }
+            }
+            .sc-tag{
+                display: inline-block;
+                padding: 0 14upx;
+                height: 28upx;
+                line-height: 24upx;
+                text-align: center;
+                font-size: 20upx;
+                color: $themeColor;
+                border: 2upx solid $themeColor;
+                border-radius: 14upx;
+                &::before{
+                    content: '';
+                    display: inline-block;
+                    vertical-align: middle;
+                    margin-right: 12upx;
+                    width: 8upx;
+                    height: 8upx;
+                    border-radius: 50%;
+                    background-color: $themeColor;
+                }
+                &.active{
+                    color: #FF4444;
+                    border-color: #FF4444;
+                    &::before{
+                        background-color: #FF4444;
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file