限制最新预约的显示数量

pc/src/views/Main.vue

@@ -87,26 +87,14 @@
                                 <span>预约人数：{{ c.OrderNum }} 人</span>
                             </div>
                             <em></em>
-                            <el-button
-                                type="primary"
-                                plain
-                                @click="goFinish(c)"
-                                v-if="c.FinishClass == 0"
-                            >上课</el-button>
+                            <el-button type="primary" plain @click="goFinish(c)" v-if="c.FinishClass == 0">上课
+                            </el-button>
                             <!--<el-button type="danger" plain @click="goFinish(c)" v-if="c.FinishClass == 0">关课-->
                             <!--</el-button>-->
-                            <el-button
-                                type="primary"
-                                plain
-                                @click="checkClassOverPrepare(c)"
-                                v-if="c.FinishClass == 2"
-                            >管理</el-button>
-                            <el-button
-                                type="primary"
-                                plain
-                                @click="goFinish(c)"
-                                v-if="c.FinishClass == 3"
-                            >编辑</el-button>
+                            <el-button type="primary" plain @click="checkClassOverPrepare(c)" v-if="c.FinishClass == 2">
+                                管理</el-button>
+                            <el-button type="primary" plain @click="goFinish(c)" v-if="c.FinishClass == 3">编辑
+                            </el-button>
                         </div>
                     </li>
                     <span class="tips" v-if="PreFinishList == 0">
@@ -154,17 +142,11 @@
                 </div>
                 <ul>
                     <!--                    TodayVipOrder-->
-                    <li v-for="as in appointList" @click="goAppointDetail(as.UserName)">
+                    <li v-for="(as ,index) in appointList" @click="goAppointDetail(as.UserName)" v-if="index < 6">
                         <div class="asTitle">
                             <span>
                                 <img :src="as.Head" alt v-if="as.Head" width="25px" height="25px" />
-                                <img
-                                    src="../assets/img/nav/head.png"
-                                    alt
-                                    v-else
-                                    width="25px"
-                                    height="25px"
-                                />
+                                <img src="../assets/img/nav/head.png" alt v-else width="25px" height="25px" />
                                 <div>{{ as.UserName }} {{ as.Phone }}</div>
                             </span>
                             <span>
@@ -186,10 +168,7 @@
                             </span>
                             <span>
                                 <div>预约课程：</div>
-                                <s
-                                    class="blue"
-                                    :style="{ background: as.ClassColor }"
-                                >{{ as.ClassName }}</s>
+                                <s class="blue" :style="{ background: as.ClassColor }">{{ as.ClassName }}</s>
                             </span>
                             <span v-if="as.RemainHour != ''">
                                 <div>剩余课时：</div>
@@ -213,1015 +192,1020 @@
 </template>
 
 <script>
-import {
-    ClassPreFinishListQuery,
-    WaitingBeginClassList,
-    ClassOngoingList,
-    OrderStatistics,
-    VipUserStatistics,
-    ClassStatistics,
-    ClassOverPrepare,
-    VipUserOrderQuery,
-    ClassHourStatistics,
-    LastOrderQuery,
-} from "../api/getApiRes";
-
-let qs = require('qs');
-export default {
-    data() {
-        return {
-            editableTabsValue: '1',
-            getNowDate: getNowDate(),
-            classList: [],
-            PreFinishList: [],
-            appointList: [],
-            TodayClassOrder: [],
-            TodayVipOrder: [],
-            AllCount: 0,
-            YesterdayCount: 0,
-            YestodayOrderNum: 0,
-            NowCount: 0,
-            CountAdd: 0,
-            TodayIncreaseNum: 0,
-            TodayOrderNum: 0,
-            ClassNum: 0,
-            TodayOrderSttNum: 0,
-            TotalRemainNormalhour: 0,
-            TotalRemainGifthour: 0,
-            userLevel: localStorage.userLevel,
-            isCollapse: document.body.clientWidth < 1367,
-            // clientWidth:document.body.clientWidth
-        }
-    },
-    mounted() {
-        let that = this;
-        // 下课管理
-        this.getVipUserStatistics();
-        this.getClassStatistics();
-        this.ClassQuery();
-        this.getClassHourStatistics();
-        this.getVipUserOrderQuery();
-        // 预约统计
-        this.getOrderStatistics();
-        this.getWaitingBeginClassList();
-        this.timer = setInterval(() => {
-            that.getVipUserOrderQuery();
+    import {
+        ClassPreFinishListQuery,
+        WaitingBeginClassList,
+        ClassOngoingList,
+        OrderStatistics,
+        VipUserStatistics,
+        ClassStatistics,
+        ClassOverPrepare,
+        VipUserOrderQuery,
+        ClassHourStatistics,
+        LastOrderQuery,
+    } from "../api/getApiRes";
+
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                editableTabsValue: '1',
+                getNowDate: getNowDate(),
+                classList: [],
+                PreFinishList: [],
+                appointList: [],
+                TodayClassOrder: [],
+                TodayVipOrder: [],
+                AllCount: 0,
+                YesterdayCount: 0,
+                YestodayOrderNum: 0,
+                NowCount: 0,
+                CountAdd: 0,
+                TodayIncreaseNum: 0,
+                TodayOrderNum: 0,
+                ClassNum: 0,
+                TodayOrderSttNum: 0,
+                TotalRemainNormalhour: 0,
+                TotalRemainGifthour: 0,
+                userLevel: localStorage.userLevel,
+                isCollapse: document.body.clientWidth < 1367,
+                // clientWidth:document.body.clientWidth
+            }
+        },
+        mounted() {
+            let that = this;
+            // 下课管理
             this.getVipUserStatistics();
             this.getClassStatistics();
             this.ClassQuery();
+            this.getClassHourStatistics();
+            this.getVipUserOrderQuery();
+            // 预约统计
             this.getOrderStatistics();
             this.getWaitingBeginClassList();
-        }, 10000);
-    },
-    watch: {
-        $route(to) {
-            if (to.name == 'Main') {
+            this.timer = setInterval(() => {
+                that.getVipUserOrderQuery();
                 this.getVipUserStatistics();
                 this.getClassStatistics();
                 this.ClassQuery();
-                this.getClassHourStatistics();
-                this.getVipUserOrderQuery();
                 this.getOrderStatistics();
                 this.getWaitingBeginClassList();
-            } else {
-                clearInterval(this.timer);//页面销毁时清除定时器
-            }
-        },
-    },
-    destroyed() {
-        clearInterval(this.timer);//页面销毁时清除定时器
-    },
-    methods: {
-        goLesson() {
-            this.$router.push({
-                path: '/appoint',
-            })
+            }, 10000);
         },
-        goAppointDetail(name) {
-            this.$router.push({
-                path: '/appoint',
-                query: {
-                    page: 'second',
-                    name: name
+        watch: {
+            $route(to) {
+                if (to.name == 'Main') {
+                    this.getVipUserStatistics();
+                    this.getClassStatistics();
+                    this.ClassQuery();
+                    this.getClassHourStatistics();
+                    this.getVipUserOrderQuery();
+                    this.getOrderStatistics();
+                    this.getWaitingBeginClassList();
+                } else {
+                    clearInterval(this.timer);//页面销毁时清除定时器
                 }
-            })
+            },
         },
-        goPage(url, page) {
-            this.$router.push({
-                path: '/' + url,
-                query: {
-                    page: page
-                }
-            })
+        destroyed() {
+            clearInterval(this.timer);//页面销毁时清除定时器
         },
-        // 会员统计
-        getVipUserStatistics() {
-            let that = this;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            VipUserStatistics(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.AllCount = json.Rs.AllCount;
-                    that.YesterdayCount = json.Rs.YesterdayCount;
-                    that.NowCount = json.Rs.NowCount;
-                    that.CountAdd = json.Rs.CountAdd;
-                } else {
-                    if (json.Code == 1010) {
+        methods: {
+            goLesson() {
+                this.$router.push({
+                    path: '/appoint',
+                })
+            },
+            goAppointDetail(name) {
+                this.$router.push({
+                    path: '/appoint',
+                    query: {
+                        page: 'second',
+                        name: name
+                    }
+                })
+            },
+            goPage(url, page) {
+                this.$router.push({
+                    path: '/' + url,
+                    query: {
+                        page: page
+                    }
+                })
+            },
+            // 会员统计
+            getVipUserStatistics() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                VipUserStatistics(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.AllCount = json.Rs.AllCount;
+                        that.YesterdayCount = json.Rs.YesterdayCount;
+                        that.NowCount = json.Rs.NowCount;
+                        that.CountAdd = json.Rs.CountAdd;
+                    } else {
+                        if (json.Code == 1010) {
+                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+                            that.$router.push({ path: '/login', query: { status: 1 } });
+                            return false
+                        } else {
+                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+                        }
+                    }
+                })
+            },
+            // 课程统计
+            getClassStatistics() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                ClassStatistics(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.ClassNum = json.Rs.ClassNum;
+                        that.TodayOrderSttNum = json.Rs.TodayOrderSttNum;
+                    } else {
                         that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                        that.$router.push({ path: '/login', query: { status: 1 } });
-                        return false
+                    }
+                })
+            },
+            getOrderStatistics() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                OrderStatistics(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+                        if (json.Rs) {
+                            that.TodayIncreaseNum = json.Rs.TodayIncreaseNum;
+                            that.TodayOrderNum = json.Rs.TodayOrderNum;
+                            that.YestodayOrderNum = json.Rs.YestodayOrderNum;
+                        }
                     } else {
                         that.$message.error(json.Memo + ' 错误码：' + json.Code);
                     }
-                }
-            })
-        },
-        // 课程统计
-        getClassStatistics() {
-            let that = this;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            ClassStatistics(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.ClassNum = json.Rs.ClassNum;
-                    that.TodayOrderSttNum = json.Rs.TodayOrderSttNum;
-                } else {
-                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                }
-            })
-        },
-        getOrderStatistics() {
-            let that = this;
-            that.loading = true;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            OrderStatistics(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.loading = false;
-                    if (json.Rs) {
-                        that.TodayIncreaseNum = json.Rs.TodayIncreaseNum;
-                        that.TodayOrderNum = json.Rs.TodayOrderNum;
-                        that.YestodayOrderNum = json.Rs.YestodayOrderNum;
+                })
+            },
+            checkClassOverPrepare(row) {
+                let that = this;
+                // courseEdit
+                this.$router.push({
+                    path: '/courseEdit', query: {
+                        StdId: row.StdId,
+                        ClassName: row.ClassName,
+                        BeginStr: row.BeginStr,
+                        EndStr: row.EndStr,
+                        FinishClass: row.FinishClass,
                     }
-                } else {
-                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                }
-            })
-        },
-        checkClassOverPrepare(row) {
-            let that = this;
-            // courseEdit
-            this.$router.push({
-                path: '/courseEdit', query: {
-                    StdId: row.StdId,
-                    ClassName: row.ClassName,
-                    BeginStr: row.BeginStr,
-                    EndStr: row.EndStr,
-                    FinishClass: row.FinishClass,
-                }
-            });
-        },
-        goFinish(row) {
-            this.$router.push({
-                path: '/courses', query: {
-                    // id: row.StdId,
-                    // classId: row.ClassId,
-                    // ClassName: row.ClassName,
-                    // BeginTime: row.BeginTime,
-                }
-            });
-        },
-        getWaitingBeginClassList() {
-            let that = this;
-            that.loading = true;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            WaitingBeginClassList(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.loading = false;
-                    that.classList = json.Rs;
-                    //ipad显示内容减少 
-                    if (that.isCollapse) {
-                        that.classList = [];
-                        for (var i = 0; i < 3; i++) {
-                            that.classList.push(json.Rs[i]);
+                });
+            },
+            goFinish(row) {
+                this.$router.push({
+                    path: '/courses', query: {
+                        // id: row.StdId,
+                        // classId: row.ClassId,
+                        // ClassName: row.ClassName,
+                        // BeginTime: row.BeginTime,
+                    }
+                });
+            },
+            getWaitingBeginClassList() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                WaitingBeginClassList(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+                        that.classList = json.Rs;
+                        //ipad显示内容减少 
+                        if (that.isCollapse) {
+                            that.classList = [];
+                            for (var i = 0; i < 3; i++) {
+                                that.classList.push(json.Rs[i]);
+                            }
                         }
+                    } else {
+                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                     }
-                } else {
-                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                }
-            })
-        },
-        // 下课管理
-        ClassQuery() {
-            let that = this;
-            that.loading = true;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            ClassOngoingList(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.loading = false;
-                    if (json.Rs) {
-                        that.PreFinishList = json.Rs;
+                })
+            },
+            // 下课管理
+            ClassQuery() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                ClassOngoingList(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+                        if (json.Rs) {
+                            that.PreFinishList = json.Rs;
+                        }
+                    } else {
+                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                     }
-                } else {
-                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                }
-            })
-        },
-        getClassHourStatistics() {
-            let that = this;
-            let param = {
-                token: localStorage.token,
-            };
-            let postdata = qs.stringify(param);
-            ClassHourStatistics(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.TotalRemainNormalhour = json.Rs.TotalRemainNormalhour;
-                    that.TotalRemainGifthour = json.Rs.TotalRemainGifthour;
-                } else {
-                    that.$message.error(json.Memo);
-                }
-            })
-        },
-        // 最新预约
-        getVipUserOrderQuery() {
-            let that = this;
-            that.loading = true;
-            let param = {
-                token: localStorage.token,
-                classId: 0,
-                orderDate: globalcurrent(),
-                stdId: 0,
-            };
-            let postdata = qs.stringify(param);
-            // VipUserOrderQuery(postdata).then(res => {
-            LastOrderQuery(postdata).then(res => {
-                let json = res;
-                if (json.Code == 0) {
-                    that.loading = false;
-                    if (json.Rs) {
-                        that.appointList = json.Rs;
+                })
+            },
+            getClassHourStatistics() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                ClassHourStatistics(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.TotalRemainNormalhour = json.Rs.TotalRemainNormalhour;
+                        that.TotalRemainGifthour = json.Rs.TotalRemainGifthour;
+                    } else {
+                        that.$message.error(json.Memo);
                     }
+                })
+            },
+            // 最新预约
+            getVipUserOrderQuery() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                    classId: 0,
+                    orderDate: globalcurrent(),
+                    stdId: 0,
+                };
+                let postdata = qs.stringify(param);
+                // VipUserOrderQuery(postdata).then(res => {
+                LastOrderQuery(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+                        if (json.Rs) {
+
+                            that.appointList = json.Rs;
+                        }
+                    } else {
+                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
+                    }
+                })
+            }
+        },
+        filters: {
+            parseDate: function (value) {
+                if (!value) {
+                    return false
                 } else {
-                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
+                    let res = nonTfmtDatetoLength(value, 10).substr(5, 10);
+                    return res;
                 }
-            })
-        }
-    },
-    filters: {
-        parseDate: function(value) {
-            if (!value) {
-                return false
-            } else {
-                let res = nonTfmtDatetoLength(value, 10).substr(5, 10);
-                return res;
-            }
+            },
         },
-    },
-}
+    }
 </script>
 
 <style scoped>
-ul,
-li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-em {
-    font-style: normal;
-}
-
-.container {
-    width: 100%;
-   /* height: 760px;*/
-    overflow: hidden;
-    overflow-y: scroll;
-    display: block;
-    margin: 0 auto;
-    padding-bottom: 60px;
-}
-
-.container > .lt {
-    width: 1173px;
-    float: left;
-    margin-top: 0px;
-}
-
-.container > .rt {
-    /*width: 436px;*/
-    width: 26%;
-    height: 100%;
-    float: right;
-}
-
-.lt .top {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-}
-
-.lt .top li {
-    width: 377px;
-    height: 140px;
-    float: left;
-    background: #fff;
-    border-radius: 12px;
-    margin-right: 20px;
-    cursor: pointer;
-}
-
-.lt .top li:nth-child(3) {
-    margin-right: 0;
-}
-
-.top li img {
-    float: left;
-    margin-top: 17px;
-    margin-left: 30px;
-    margin-right: 24px;
-}
-
-.top li .liRight {
-    width: 200px;
-    float: left;
-    margin-top: 17px;
-}
-
-.top .liRight h5 {
-    margin: 0;
-    padding: 0;
-    text-align: left;
-}
-
-.top .liRight span {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    text-align: left;
-    font-size: 26px;
-    font-family: Arial;
-    margin-top: 7px;
-    margin-bottom: 20px;
-}
-
-.liRight em {
-    font-size: 14px;
-    text-align: right;
-}
-
-.btLine {
-    width: 84%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    border-top: 1px solid #f0f2f5;
-    padding-top: 17px;
-}
-
-.btLine em {
-    font-size: 14px;
-}
-
-.btLine .emlt {
-    width: 50%;
-    float: left;
-    text-align: left;
-}
-
-.btLine i {
-    font-size: 18px;
-    color: #bdbdbd;
-}
-
-.emlt i {
-    float: left;
-}
-
-.finish {
-    width: 100%;
-    min-height: 358px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    background: #fff;
-    margin-top: 15px;
-    border-radius: 12px;
-    padding-top: 15px;
-    padding-bottom: 0px;
-}
-
-.finish .title {
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    padding-left: 30px;
-}
-
-.finish .title h5 {
-    margin: 0;
-    float: left;
-    font-size: 18px;
-}
-
-.finish .title span {
-    float: right;
-    margin-right: 43px;
-    font-size: 14px;
-    color: #717171;
-}
-
-.finish ul {
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    padding-left: 30px;
-    padding-right: 30px;
-    margin: 0 auto;
-    margin-top: 10px;
-}
-
-.finish ul li {
-    width: 347px;
-    height: 149px;
-    overflow: hidden;
-    float: left;
-    margin-bottom: 14px;
-}
-
-.finish ul li:nth-child(2) {
-    margin-left: 24px;
-    margin-right: 24px;
-}
-
-.finish ul li:nth-child(5) {
-    margin-left: 24px;
-    margin-right: 24px;
-}
-
-.finish li .finListTitle {
-    width: 100%;
-    height: 35px;
-    line-height: 35px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    background-color: #3799ff;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-    color: #000;
-}
-
-li .finListTitle em {
-    float: left;
-    color: #fff;
-    padding-left: 5%;
-}
-
-li .finListTitle s {
-    float: right;
-    text-decoration: none;
-    color: #fff;
-    padding-right: 5%;
-}
-
-.finish li .context {
-    width: 344px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    border: 1px solid #e8e8e8;
-    border-top: none;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
-}
-
-.finish .context em {
-    width: 85px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    height: 40px;
-    line-height: 30px;
-    color: #bdbdbd;
-}
-
-.context button {
-    height: 30px;
-    line-height: 30px;
-    padding-top: 0;
-}
-
-.context .ctl {
-    width: 211px;
-    float: left;
-    padding-left: 16px;
-    margin-right: 20px;
-}
-
-.ctl span {
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    background-color: #f8f8f8;
-    color: #404040;
-    font-size: 14px;
-    text-align: left;
-    padding-left: 20px;
-    margin-bottom: 15px;
-}
-
-.ctl span:nth-child(2) {
-    margin-bottom: 0px;
-}
-
-/deep/ .el-button--primary.is-plain {
-    background-color: #fff;
-}
-
-/deep/ .el-button--primary.is-plain:hover {
-    color: #005ea2 !important;
-}
-
-.blue {
-    color: #3799ff;
-}
-
-.appoint {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    background: #fff;
-    margin-top: 15px;
-    border-radius: 12px;
-    padding-top: 15px;
-    padding-bottom: 1px;
-}
-
-.appoint .title {
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    padding-left: 30px;
-}
-
-.appoint .title h5 {
-    margin: 0;
-    float: left;
-    font-size: 18px;
-}
-
-.appoint .title span {
-    float: right;
-    margin-right: 43px;
-    font-size: 14px;
-    color: #717171;
-}
-
-.appoint .appointCard {
-    min-height: 195px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    padding-left: 30px;
-    padding-right: 30px;
-}
-
-/deep/ .el-card {
-    width: 150px;
-    float: left;
-    margin-right: 31px;
-    padding: 0;
-    border-radius: 12px;
-}
-
-/deep/ .el-card:nth-child(last) {
-    margin-right: 0;
-}
-
-/deep/ .el-card__body {
-    padding: 0;
-}
-
-.cardTitle {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    height: 40px;
-    line-height: 40px;
-    background: #f0f2f5;
-}
-
-.appointCard span {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    color: #777777;
-    font-family: Arial;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    font-size: 16px;
-}
-
-.appointCard em {
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    font-size: 12px;
-    margin-bottom: 14px;
-    text-align: left;
-    padding-left: 16px;
-    padding-right: 16px;
-}
-
-.appointCard em i {
-    float: right;
-    color: #000000;
-    padding-right: 3px;
-}
-
-.appointCard em s {
-    /*width: 47px;*/
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    font-style: normal;
-    text-decoration: none;
-    float: right;
-    border-radius: 3px;
-    padding: 0 3px;
-}
-
-.appointCard em s.blue {
-    background-color: #e5f2ff;
-    color: #3799ff;
-}
-
-.appointCard em s.red {
-    background-color: #e5f2ff;
-    color: rgb(204, 2, 2);
-}
-
-.rtContext {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    overflow-y: hidden;
-    display: block;
-    margin: 0 auto;
-    margin-top: 0px;
-    background: #fff;
-    padding: 0;
-    border-radius: 12px;
-    min-height: 826px;
-    background: #fff;
-}
-
-.rtContext .rtTitle {
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    padding: 10px 30px;
-}
-
-.rtTitle h5 {
-    margin: 0;
-    float: left;
-    font-size: 18px;
-}
-
-.rtTitle span {
-    float: right;
-    font-size: 14px;
-    color: #bdbdbd;
-    cursor: pointer;
-}
-
-.rtContext ul {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    height: 100%;
-    overflow: hidden;
-    overflow-y: scroll;
-    margin: 0 auto;
-    padding-left: 30px;
-    padding-right: 30px;
-}
-
-.rtContext li {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    border-bottom: 1px solid #f0f2f5;
-    padding-top: 30px;
-    padding-bottom: 10px;
-    cursor: pointer;
-}
-
-.asTitle {
-    height: 30px;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    text-align: left;
-    line-height: 20px;
-    color: #000000;
-    font-size: 14px;
-}
-
-.asTitle span div {
-    margin-left: 8px;
-}
-
-.asTitle img {
-    float: left;
-    margin-right: 5px;
-}
-
-.asTitle span {
-    width: 50%;
-    height: 30px;
-    line-height: 26px;
-    float: left;
-    margin-right: 0px;
-}
-
-.asTitle em {
-    width: 50%;
-    float: left;
-    text-align: right;
-}
-.asTitle span div {
-    float: left;
-}
-
-.asContent {
-    width: 100%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-}
-
-.asContent span {
-    width: 50%;
-    float: left;
-    font-size: 14px;
-    color: #bdbdbd;
-    margin-bottom: 10px;
-    text-align: left;
-    text-indent: 8px;
-}
-
-.asContent span em {
-    color: #000;
-    text-align: left;
-    float: left;
-}
-
-.asContent span s {
-    text-decoration: none;
-    color: #000;
-    border-radius: 250px;
-    padding: 3px 5px;
-    text-align: center;
-}
-
-.asContent span div {
-    float: left;
-}
-
-.asContent span s.blue {
-    background-color: #e5f2ff;
-}
-
-.box-card {
-    cursor: pointer;
-}
-
-.box-card em {
-    font-style: normal;
-}
-
-i {
-    font-style: normal;
-}
-
-.asContent .green {
-    color: #25cc42;
-}
-
-.asContent .red {
-    color: red;
-}
-
-.asContent .yellow {
-    color: #ffdd00;
-}
-
-/deep/ a {
-    color: #03b1ff;
-}
-
-.tips {
-    color: #333;
-    font-size: 14px !important;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    margin-top: 10px;
-    line-height: 30px;
-}
-
-.middleTips {
-    margin-top: 180px;
-}
-
-.esmall {
-    float: right;
-    font-size: 14px;
-    text-align: right;
-}
-
-/*ipad only*/
-@media only screen and (max-width: 1366px) {
-    .container {
-        /*height: 600px;*/
-        padding-top: 6px;
+    ul,
+    li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
     }
 
-    .container .lt {
-        width: 80%;
+    em {
+        font-style: normal;
     }
 
-    .asTitle {
-        height: 60px;
+    .container {
+        width: 100%;
+        /* height: 760px;*/
+        overflow: hidden;
+        overflow-y: scroll;
+        display: block;
+        margin: 0 auto;
+        padding-bottom: 60px;
     }
 
-    .asTitle img {
-        display: none;
+    .container>.lt {
+        width: 1173px;
+        float: left;
+        margin-top: 0px;
     }
 
-    .asTitle span {
-        width: 100%;
+    .container>.rt {
+        /*width: 436px;*/
+        width: 26%;
+        height: 100%;
+        float: right;
     }
 
     .lt .top {
-        width: 96%;
-        /* float: left; */
-        margin-bottom: 1px;
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
     }
 
     .lt .top li {
-        width: 32%;
-        margin-right: 2%;
+        width: 377px;
+        height: 140px;
+        float: left;
+        background: #fff;
+        border-radius: 12px;
+        margin-right: 20px;
+        cursor: pointer;
+    }
+
+    .lt .top li:nth-child(3) {
+        margin-right: 0;
+    }
+
+    .top li img {
+        float: left;
+        margin-top: 17px;
+        margin-left: 30px;
+        margin-right: 24px;
     }
 
     .top li .liRight {
-        width: 40%;
+        width: 200px;
+        float: left;
+        margin-top: 17px;
+    }
+
+    .top .liRight h5 {
+        margin: 0;
+        padding: 0;
+        text-align: left;
+    }
+
+    .top .liRight span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: left;
+        font-size: 26px;
+        font-family: Arial;
+        margin-top: 7px;
+        margin-bottom: 20px;
+    }
+
+    .liRight em {
+        font-size: 14px;
+        text-align: right;
     }
 
     .btLine {
-        width: 96%;
+        width: 84%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        border-top: 1px solid #f0f2f5;
+        padding-top: 17px;
     }
 
     .btLine em {
-        font-size: 12px;
-        /* float: left; */
-        line-height: 22px;
+        font-size: 14px;
+    }
+
+    .btLine .emlt {
+        width: 50%;
+        float: left;
+        text-align: left;
+    }
+
+    .btLine i {
+        font-size: 18px;
+        color: #bdbdbd;
+    }
+
+    .emlt i {
+        float: left;
     }
+
     .finish {
-        /* float: left; */
+        width: 100%;
+        min-height: 358px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #fff;
+        margin-top: 15px;
+        border-radius: 12px;
+        padding-top: 15px;
+        padding-bottom: 0px;
+    }
+
+    .finish .title {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-left: 30px;
+    }
+
+    .finish .title h5 {
+        margin: 0;
+        float: left;
+        font-size: 18px;
+    }
+
+    .finish .title span {
+        float: right;
+        margin-right: 43px;
+        font-size: 14px;
+        color: #717171;
+    }
+
+    .finish ul {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-left: 30px;
+        padding-right: 30px;
+        margin: 0 auto;
+        margin-top: 10px;
     }
 
     .finish ul li {
-        width: 30%;
-        /*height: 159px;*/
+        width: 347px;
+        height: 149px;
         overflow: hidden;
-        padding-bottom: 20px;
+        float: left;
+        margin-bottom: 14px;
+    }
+
+    .finish ul li:nth-child(2) {
+        margin-left: 24px;
+        margin-right: 24px;
+    }
+
+    .finish ul li:nth-child(5) {
+        margin-left: 24px;
+        margin-right: 24px;
+    }
+
+    .finish li .finListTitle {
+        width: 100%;
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background-color: #3799ff;
+        border-top-left-radius: 7px;
+        border-top-right-radius: 7px;
+        color: #000;
+    }
+
+    li .finListTitle em {
+        float: left;
+        color: #fff;
+        padding-left: 5%;
+    }
+
+    li .finListTitle s {
+        float: right;
+        text-decoration: none;
+        color: #fff;
+        padding-right: 5%;
     }
 
     .finish li .context {
-        width: 99%;
+        width: 344px;
         overflow: hidden;
         display: block;
-        margin: 0;
-        padding: 0px;
-        height: auto !important;
-        padding-bottom: 5px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+        margin: 0 auto;
+        border: 1px solid #e8e8e8;
+        border-top: none;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
+    }
+
+    .finish .context em {
+        width: 85px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        height: 40px;
+        line-height: 30px;
+        color: #bdbdbd;
+    }
+
+    .context button {
+        height: 30px;
+        line-height: 30px;
+        padding-top: 0;
+    }
+
+    .context .ctl {
+        width: 211px;
+        float: left;
+        padding-left: 16px;
+        margin-right: 20px;
     }
 
-    .finish li .context .ctl {
+    .ctl span {
         width: 100%;
+        height: 30px;
+        line-height: 30px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background-color: #f8f8f8;
+        color: #404040;
+        font-size: 14px;
+        text-align: left;
+        padding-left: 20px;
+        margin-bottom: 15px;
+    }
+
+    .ctl span:nth-child(2) {
+        margin-bottom: 0px;
+    }
+
+    /deep/ .el-button--primary.is-plain {
+        background-color: #fff;
+    }
+
+    /deep/ .el-button--primary.is-plain:hover {
+        color: #005ea2 !important;
+    }
+
+    .blue {
+        color: #3799ff;
+    }
+
+    .appoint {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #fff;
+        margin-top: 15px;
+        border-radius: 12px;
+        padding-top: 15px;
+        padding-bottom: 1px;
+    }
+
+    .appoint .title {
         overflow: hidden;
         display: block;
+        margin: 0 auto;
+        padding-left: 30px;
+    }
+
+    .appoint .title h5 {
         margin: 0;
-        padding: 0;
-        padding-top: 6px;
-        margin-bottom: 3px;
+        float: left;
+        font-size: 18px;
     }
 
-    .ctl span {
-        width: 80%;
+    .appoint .title span {
+        float: right;
+        margin-right: 43px;
+        font-size: 14px;
+        color: #717171;
+    }
+
+    .appoint .appointCard {
+        min-height: 195px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-top: 25px;
+        padding-bottom: 25px;
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+
+    /deep/ .el-card {
+        width: 150px;
+        float: left;
+        margin-right: 31px;
         padding: 0;
-        font-size: 12px;
-        text-align: center;
+        border-radius: 12px;
     }
 
-    .finish {
-        width: 97%;
+    /deep/ .el-card:nth-child(last) {
+        margin-right: 0;
     }
 
-    .appoint {
-        width: 97%;
+    /deep/ .el-card__body {
+        padding: 0;
     }
 
-    .finish .context em {
-        height: 30px;
+    .cardTitle {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        height: 40px;
         line-height: 40px;
+        background: #f0f2f5;
+    }
+
+    .appointCard span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #777777;
+        font-family: Arial;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 16px;
+    }
+
+    .appointCard em {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
         font-size: 12px;
-        float: left;
+        margin-bottom: 14px;
+        text-align: left;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    .appointCard em i {
+        float: right;
+        color: #000000;
+        padding-right: 3px;
     }
 
-    .finish .context {
-        height: auto !important;
-        padding-bottom: 5px;
+    .appointCard em s {
+        /*width: 47px;*/
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        font-style: normal;
+        text-decoration: none;
+        float: right;
+        border-radius: 3px;
+        padding: 0 3px;
     }
 
-    .el-main > .container {
-        /*height: 772px;*/
+    .appointCard em s.blue {
+        background-color: #e5f2ff;
+        color: #3799ff;
     }
 
-    .container .rt {
-        width: 20%;
+    .appointCard em s.red {
+        background-color: #e5f2ff;
+        color: rgb(204, 2, 2);
+    }
+
+    .rtContext {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        overflow-y: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 0px;
+        background: #fff;
+        padding: 0;
+        border-radius: 12px;
+        min-height: 826px;
+        background: #fff;
+    }
+
+    .rtContext .rtTitle {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding: 10px 30px;
+    }
+
+    .rtTitle h5 {
+        margin: 0;
+        float: left;
+        font-size: 18px;
     }
 
     .rtTitle span {
-        font-size: 12px;
-        line-height: 30px;
+        float: right;
+        font-size: 14px;
+        color: #bdbdbd;
+        cursor: pointer;
     }
 
     .rtContext ul {
-        padding: 2px !important;
-        font-size: 12px;
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        height: 100%;
+        overflow: hidden;
+        overflow-y: scroll;
+        margin: 0 auto;
+        padding-left: 30px;
+        padding-right: 30px;
     }
-    .appoint {
-        /* float: left; */
-        margin-top: 9px;
+
+    .rtContext li {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        border-bottom: 1px solid #f0f2f5;
+        padding-top: 30px;
+        padding-bottom: 10px;
+        cursor: pointer;
     }
 
     .asTitle {
+        height: 30px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: left;
+        line-height: 20px;
+        color: #000000;
+        font-size: 14px;
+    }
+
+    .asTitle span div {
+        margin-left: 8px;
+    }
+
+    .asTitle img {
+        float: left;
+        margin-right: 5px;
+    }
+
+    .asTitle span {
+        width: 50%;
+        height: 30px;
+        line-height: 26px;
+        float: left;
+        margin-right: 0px;
+    }
+
+    .asTitle em {
+        width: 50%;
+        float: left;
+        text-align: right;
+    }
+
+    .asTitle span div {
         float: left;
     }
 
     .asContent {
         width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
     }
 
     .asContent span {
-        width: 100%;
+        width: 50%;
+        float: left;
+        font-size: 14px;
+        color: #bdbdbd;
+        margin-bottom: 10px;
+        text-align: left;
+        text-indent: 8px;
+    }
+
+    .asContent span em {
+        color: #000;
+        text-align: left;
+        float: left;
+    }
+
+    .asContent span s {
+        text-decoration: none;
+        color: #000;
+        border-radius: 250px;
+        padding: 3px 5px;
+        text-align: center;
+    }
+
+    .asContent span div {
+        float: left;
+    }
+
+    .asContent span s.blue {
+        background-color: #e5f2ff;
+    }
+
+    .box-card {
+        cursor: pointer;
+    }
+
+    .box-card em {
+        font-style: normal;
+    }
+
+    i {
+        font-style: normal;
+    }
+
+    .asContent .green {
+        color: #25cc42;
+    }
+
+    .asContent .red {
+        color: red;
+    }
+
+    .asContent .yellow {
+        color: #ffdd00;
+    }
+
+    /deep/ a {
+        color: #03b1ff;
+    }
+
+    .tips {
+        color: #333;
+        font-size: 14px !important;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        font-size: 12px;
-        height: 20px;
+        margin-top: 10px;
+        line-height: 30px;
     }
-    .appoint  .appointCard {
-        padding-top: 4px;
-        padding-bottom: 4px;
+
+    .middleTips {
+        margin-top: 180px;
+    }
+
+    .esmall {
+        float: right;
+        font-size: 14px;
+        text-align: right;
+    }
+
+    /*ipad only*/
+    @media only screen and (max-width: 1366px) {
+        .container {
+            /*height: 600px;*/
+            padding-top: 6px;
+        }
+
+        .container .lt {
+            width: 80%;
+        }
+
+        .asTitle {
+            height: 60px;
+        }
+
+        .asTitle img {
+            display: none;
+        }
+
+        .asTitle span {
+            width: 100%;
+        }
+
+        .lt .top {
+            width: 96%;
+            /* float: left; */
+            margin-bottom: 1px;
+        }
+
+        .lt .top li {
+            width: 32%;
+            margin-right: 2%;
+        }
+
+        .top li .liRight {
+            width: 40%;
+        }
+
+        .btLine {
+            width: 96%;
+        }
+
+        .btLine em {
+            font-size: 12px;
+            /* float: left; */
+            line-height: 22px;
+        }
+
+        .finish {
+            /* float: left; */
+        }
+
+        .finish ul li {
+            width: 30%;
+            /*height: 159px;*/
+            overflow: hidden;
+            padding-bottom: 20px;
+        }
+
+        .finish li .context {
+            width: 99%;
+            overflow: hidden;
+            display: block;
+            margin: 0;
+            padding: 0px;
+            height: auto !important;
+            padding-bottom: 5px;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .finish li .context .ctl {
+            width: 100%;
+            overflow: hidden;
+            display: block;
+            margin: 0;
+            padding: 0;
+            padding-top: 6px;
+            margin-bottom: 3px;
+        }
+
+        .ctl span {
+            width: 80%;
+            padding: 0;
+            font-size: 12px;
+            text-align: center;
+        }
+
+        .finish {
+            width: 97%;
+        }
+
+        .appoint {
+            width: 97%;
+        }
+
+        .finish .context em {
+            height: 30px;
+            line-height: 40px;
+            font-size: 12px;
+            float: left;
+        }
+
+        .finish .context {
+            height: auto !important;
+            padding-bottom: 5px;
+        }
+
+        .el-main>.container {
+            /*height: 772px;*/
+        }
+
+        .container .rt {
+            width: 20%;
+        }
+
+        .rtTitle span {
+            font-size: 12px;
+            line-height: 30px;
+        }
+
+        .rtContext ul {
+            padding: 2px !important;
+            font-size: 12px;
+        }
+
+        .appoint {
+            /* float: left; */
+            margin-top: 9px;
+        }
+
+        .asTitle {
+            float: left;
+        }
+
+        .asContent {
+            width: 100%;
+        }
+
+        .asContent span {
+            width: 100%;
+            overflow: hidden;
+            display: block;
+            margin: 0 auto;
+            font-size: 12px;
+            height: 20px;
+        }
+
+        .appoint .appointCard {
+            padding-top: 4px;
+            padding-bottom: 4px;
+        }
     }
-}
-</style>
+</style>