优化ipad显示效果

pc/src/components/Headside.vue

@@ -1,14 +1,14 @@
 <template>
     <div id="headside">
         <nav class="navbar user-info-navbar" role="navigation">
-<!--            <i :class="[{'el-icon-s-unfold left_hide_icon':left_panel_state},{'el-icon-s-fold left_show_icon':!left_panel_state}] "-->
-<!--               @click="left_hide"></i>-->
-            <span class="title">场馆管理系统    <em>   {{current}}</em></span>
+            <!--            <i :class="[{'el-icon-s-unfold left_hide_icon':left_panel_state},{'el-icon-s-fold left_show_icon':!left_panel_state}] "-->
+            <!--               @click="left_hide"></i>-->
+            <span class="title">
+                场馆管理系统
+                <em>{{ current }}</em>
+            </span>
             <div @click="checkNews">
-                <el-badge :value="newnum"
-                          class="item"
-                          v-if="newnumState"
-                >
+                <el-badge :value="newnum" class="item" v-if="newnumState">
                     <el-button size="small">
                         <i class="el-icon-message"></i>
                     </el-button>
@@ -17,13 +17,9 @@
 
             <ul class="user-info-menu right-links list-inline list-unstyled">
                 <li class="dropdown user-profile">
-<!--                        <img class="lteHead" src="../assets/img/header/lteHead.png" height="26" width="26"/>-->
-                        <span class="el-dropdown-link customer_serve">
-                            {{user.name}}
-                          </span>
-                        <span  @click="logoutClick">
-                            退出
-                        </span>
+                    <!--                        <img class="lteHead" src="../assets/img/header/lteHead.png" height="26" width="26"/>-->
+                    <span class="el-dropdown-link customer_serve">{{ user.name }}</span>
+                    <span @click="logoutClick">退出</span>
                 </li>
             </ul>
         </nav>
@@ -31,510 +27,603 @@
 </template>
 <script>
 
-    import axios from 'axios';
-    import Global from '../Global.js'
-    import {SignOut,ManagerSelfQuery} from '../api/getApiRes.js'
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                user: {
-                    // name: localStorage.userName,
-                    name: 'admin',
+import axios from 'axios';
+import Global from '../Global.js'
+import { SignOut, ManagerSelfQuery } from '../api/getApiRes.js'
+let qs = require('qs');
+export default {
+    data() {
+        return {
+            user: {
+                // name: localStorage.userName,
+                name: 'admin',
+            },
+            time: '8:30-17:30',
+            tel: '0000-0079-000',
+            qq: '0000079000',
+            newnum: '',
+            newnumState: false,
+            left_panel_state: false,
+            current: globalcurrentWeek()
+        }
+    },
+    mounted() {
+        this.readNewNum();
+        this.getManagerSelfQuery();
+        //            定时轮询news
+        //设置10s刷新一次数据
+        // if (this.timer) {
+        //     clearInterval(this.timer);
+        // }else{
+        //     this.timer = setInterval(() => {
+        //         this.readNewNum();
+        //     },10000)
+        // }
+    },
+    methods: {
+        //            隐藏左侧和显示
+        left_hide: function() {
+            let that = this;
+            that.left_panel_state = !that.left_panel_state;
+            this.$emit('lefthide');
+            // if (!that.left_panel_state) {
+            //     this.$emit('left_hide_func');
+            // } else {
+            //     this.$emit('right_hide_func');
+            // }
+        },
+        getManagerSelfQuery() {
+            let that = this;
+            let param = {
+                token: localStorage.token,
+            };
+            let postdata = qs.stringify(param);
+            ManagerSelfQuery(postdata).then(res => {
+                let json = res;
+                if (json.Code == 0) {
+                    that.user.name = json.Rs.Name;
+                    localStorage.shopId = json.Rs.ShopId;
+                    localStorage.userLevel = json.Rs.Role.Id;
+                    localStorage.ServiceId = json.Rs.Shop.ServiceId;
+                    localStorage.ServiceKey = json.Rs.Shop.ServiceKey;
+                } 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);
+                    }
+                }
+            })
+        },
+        //            打开消息提示
+        checkNews: function() {
+            let that = this;
+            const h = this.$createElement;
+            this.$notify({
+                title: '标题名称',
+                position: 'top-left',
+                message: h('i', { style: 'color: teal' }, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'),
+                onClose: function() {
+                    //关闭时调用已读接口
                 },
-                time: '8:30-17:30',
-                tel: '0000-0079-000',
-                qq: '0000079000',
-                newnum: '',
-                newnumState: false,
-                left_panel_state: false,
-                current:globalcurrentWeek()
-            }
+                onClick: function() {
+                    //关闭时调用已读接口
+                    this.close();//关闭notify
+                    let thisdata = { name: 'message', link: '/#/message' };
+                    that.$emit('navOpen', thisdata);//跳转新的message
+                }
+            });
         },
-        mounted() {
-            this.readNewNum();
-            this.getManagerSelfQuery();
-//            定时轮询news
-            //设置10s刷新一次数据
-            // if (this.timer) {
-            //     clearInterval(this.timer);
-            // }else{
-            //     this.timer = setInterval(() => {
-            //         this.readNewNum();
-            //     },10000)
-            // }
+        //            读取消息提示数量
+        readNewNum: function() {
+            this.newnum = 0;
+            this.newnumState = false;
+            //                ajax todo
         },
-        methods: {
-//            隐藏左侧和显示
-            left_hide: function () {
-                let that = this;
-                that.left_panel_state = !that.left_panel_state;
-                this.$emit('lefthide');
-                // if (!that.left_panel_state) {
-                //     this.$emit('left_hide_func');
-                // } else {
-                //     this.$emit('right_hide_func');
-                // }
-            },
-            getManagerSelfQuery(){
+        // 退出登录
+        logoutClick: function() {
+            let that = this;
+            that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
                 let that = this;
+                that.$router.push({ path: '/login', query: { status: 1 } });
                 let param = {
                     token: localStorage.token,
                 };
                 let postdata = qs.stringify(param);
-                ManagerSelfQuery(postdata).then(res => {
+                SignOut(postdata).then(res => {
                     let json = res;
                     if (json.Code == 0) {
-                        that.user.name = json.Rs.Name;
-                        localStorage.shopId = json.Rs.ShopId;
-                        localStorage.userLevel = json.Rs.Role.Id;
-                        localStorage.ServiceId = json.Rs.Shop.ServiceId;
-                        localStorage.ServiceKey = json.Rs.Shop.ServiceKey;
+                        localStorage.clear();
+                        // that.$router.push({path: '/login', query: {status: 1}});
+                        that.$message({
+                            showClose: true,
+                            message: '当前用户已退出登陆！',
+                            type: 'success'
+                        });
                     } 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);
-                        }
+                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                     }
                 })
-            },
-//            打开消息提示
-            checkNews: function () {
-                let that = this;
-                const h = this.$createElement;
-                this.$notify({
-                    title: '标题名称',
-                    position: 'top-left',
-                    message: h('i', {style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'),
-                    onClose: function () {
-                        //关闭时调用已读接口
-                    },
-                    onClick: function () {
-                        //关闭时调用已读接口
-                        this.close();//关闭notify
-                        let thisdata = {name: 'message', link: '/#/message'};
-                        that.$emit('navOpen', thisdata);//跳转新的message
-                    }
-                });
-            },
-//            读取消息提示数量
-            readNewNum: function () {
-                this.newnum = 0;
-                this.newnumState = false;
-//                ajax todo
-            },
-            // 退出登录
-            logoutClick: function () {
-                let that = this;
-                that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(() => {
-                    let that = this;
-                    that.$router.push({path: '/login', query: {status: 1}});
-                    let param = {
-                    token: localStorage.token,
-                    };
-                    let postdata = qs.stringify(param);
-                    SignOut(postdata).then(res => {
-                        let json = res;
-                        if (json.Code == 0) {
-                            localStorage.clear();
-                            // that.$router.push({path: '/login', query: {status: 1}});
-                            that.$message({
-                                showClose: true,
-                                message: '当前用户已退出登陆！',
-                                type: 'success'
-                            });
-                        } else {
-                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
-                        }
-                    })
-                }).catch(() => {
-
-                });
-            },
+            }).catch(() => {
+
+            });
         },
-        components: {}
-    }
+    },
+    components: {}
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-    ul, li {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
+ul,
+li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#headside {
+    width: 100%;
+    height: 72px;
+    overflow: hidden;
+    float: right;
+    z-index: 1111;
+    background-color: #0063c9;
+}
+
+.user-info-navbar {
+    width: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    min-height: 72px;
+    height: 72px;
+    border: 0;
+    padding: 0;
+    margin-bottom: 0px;
+}
+
+.user-info-navbar .user-info-menu > li > a {
+    position: relative;
+    display: block;
+    padding: 12px 20px;
+    color: #979898;
+    border-bottom: 1px solid #ffffff;
+    top: 1px;
+    z-index: 5;
+}
+
+.user-info-navbar .user-info-menu > li > a .badge {
+    font-size: 9px;
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    padding: 4px;
+    min-width: 18px;
+    line-height: 1;
+}
+
+.user-info-navbar .user-info-menu > li > form {
+    position: relative;
+    display: block;
+    padding: 12px 20px;
+    padding-bottom: 5px;
+    margin: 0;
+    border-bottom: 1px solid #ffffff;
+}
+
+.user-info-navbar .user-info-menu > li.search-form .search-field,
+.navbar.horizontal-menu .navbar-inner > .nav > li.search-form .search-field {
+    position: absolute;
+    top: 25%;
+    right: 15px;
+    margin-top: 0px;
+    line-height: 1;
+    height: 25px;
+    border: 1px solid #dddddd;
+    border: 0;
+    padding: 0 10px;
+    width: 170px;
+    padding-right: 30px;
+    font-size: 12px;
+    z-index: 1;
+    visibility: hidden;
+    background: #f3f3f3;
+    zoom: 1;
+    filter: alpha(opacity=0);
+    -webkit-opacity: 0;
+    -moz-opacity: 0;
+    opacity: 0;
+}
+
+.frm-body {
+    background-color: #eeeeee;
+}
+
+.sidebar-menu {
+    display: table-cell;
+    position: relative;
+    width: 230px;
+    background: #2c2e2f;
+    z-index: 1;
+}
+
+footer.main-footer {
+    padding: 8px 20px 0px 20px;
+    border-top: 1px solid #dddddd;
+    font-size: 12px;
+    margin-left: -30px;
+    margin-right: -30px;
+    margin-top: 10px;
+    margin-bottom: -10px;
+    background-color: #eeeeee;
+}
+
+.panel {
+    position: relative;
+    background: #ffffff;
+    padding: 10px 10px;
+    border: 0;
+    margin-top: 5px;
+    margin-bottom: 0px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+.panel .panel-body {
+    padding: 0;
+    padding-top: 20px;
+    color: #000000;
+}
+
+.panel-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.panel .panel-heading {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    background: none;
+    font-size: 17px;
+    padding-bottom: 0px;
+    border-bottom: 2px solid #f5f5f5;
+}
+
+.panel.panel-color .panel-heading {
+    margin-top: -10px;
+    margin-left: -10px;
+    margin-right: -10px;
+    padding: 10px 10px;
+    border-bottom: 0;
+}
+
+.panel.panel-color.collapsed > .panel-heading {
+    margin-bottom: -10px;
+}
+
+.xe-widget.xe-progress-counter.xe-progress-counter-huise {
+    background-color: #d7d7d7;
+}
+
+.xe-widget.xe-progress-counter.xe-progress-counter-huise .xe-background {
+    color: #fff;
+}
+
+.xe-widget.xe-progress-counter.xe-progress-counter-huise .xe-upper {
+    background-color: transparent;
+}
+
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfood > tr > td,
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfood > tr > th {
+    padding: 5px 5px 5px 5px;
+}
+
+.input-sm {
+    height: 26px;
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.col-xs-1,
+.col-sm-1,
+.col-md-1,
+.col-lg-1,
+.col-xs-2,
+.col-sm-2,
+.col-md-2,
+.col-lg-2,
+.col-xs-3,
+.col-sm-3,
+.col-md-3,
+.col-lg-3,
+.col-xs-4,
+.col-sm-4,
+.col-md-4,
+.col-lg-4,
+.col-xs-5,
+.col-sm-5,
+.col-md-5,
+.col-lg-5,
+.col-xs-6,
+.col-sm-6,
+.col-md-6,
+.col-lg-6,
+.col-xs-7,
+.col-sm-7,
+.col-md-7,
+.col-lg-7,
+.col-xs-8,
+.col-sm-8,
+.col-md-8,
+.col-lg-8,
+.col-xs-9,
+.col-sm-9,
+.col-md-9,
+.col-lg-9,
+.col-xs-10,
+.col-sm-10,
+.col-md-10,
+.col-lg-10,
+.col-xs-11,
+.col-sm-11,
+.col-md-11,
+.col-lg-11,
+.col-xs-12,
+.col-sm-12,
+.col-md-12,
+.col-lg-12 {
+    position: relative;
+    min-height: 1px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.form-horizontal .form-group {
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+.btn-sm,
+.btn-group-sm > .btn {
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 2px 6px;
+    border-radius: 0px;
+}
+
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_paginate {
+    padding-top: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter {
+    padding-bottom: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.comm_style {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0 auto;
+}
+
+.img_style {
+    width: 40px;
+    /*height: 40px;*/
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+}
+
+#modal_img {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+}
+
+.modal-content {
+    margin: 0 auto;
+    /*width: 50%;*/
+    /*20170623 mefisto*/
+}
+
+.customer_serve {
+    float: right;
+    margin-right: 20px;
+    font-size: 12px;
+    color: #585858;
+    line-height: 72px;
+    text-align: right;
+}
+
+#about_us {
+    color: #03b1ff;
+    cursor: pointer;
+}
+
+.dropdown-menu-list a img {
+    width: 30px;
+    height: 30px;
+}
+
+.user-info-navbar
+    .user-info-menu
+    > li
+    .dropdown-menu
+    .dropdown-menu-list
+    li
+    a
+    .line.desc,
+.navbar.horizontal-menu
+    .navbar-inner
+    > .nav
+    > li
+    .dropdown-menu
+    .dropdown-menu-list
+    li
+    a
+    .line.desc {
+    margin-right: 0;
+}
+
+.user-info-navbar .user-info-menu > li .dropdown-menu .dropdown-menu-list li,
+.navbar.horizontal-menu
+    .navbar-inner
+    > .nav
+    > li
+    .dropdown-menu
+    .dropdown-menu-list
+    li {
+    min-height: 50px;
+}
+
+.empty_li_noti {
+    text-align: center;
+    line-height: 50px !important;
+}
+
+.disagree_invite {
+    background-color: #ff0000;
+}
+
+.agree_invite {
+    background-color: #25cc42;
+}
+
+.disagree_invite:hover {
+    background-color: #d20000;
+}
+
+.agree_invite:hover {
+    background-color: #25cc42;
+}
+
+.invite_msg {
+    width: 95%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-top: 34px;
+    margin-top: 10px;
+}
+
+.invite_time {
+    width: 95%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-top: 10px;
+}
+
+.left_hide_icon {
+    width: 20px;
+    height: 20px;
+    margin-top: 25px;
+    float: left;
+    margin-left: 15px;
+    cursor: pointer;
+    color: #badcff;
+    font-size: 22px;
+    /*background: url("../assets/img/header/right.png")top center no-repeat;*/
+}
+
+/*.left_hide_icon:hover {*/
+/*    background: #ccc;*/
+/*    color: #fff;*/
+/*}*/
+
+.left_show_icon {
+    width: 20px;
+    height: 20px;
+    margin-top: 25px;
+    float: left;
+    margin-left: 15px;
+    cursor: pointer;
+    color: #badcff;
+    font-size: 22px;
+    /*background: url("../assets/img/header/left.png")top center no-repeat;*/
+}
+
+.item {
+    float: left;
+    margin-left: 10px;
+    margin-top: 10px;
+}
+
+.el-button--small,
+.el-button--small.is-round {
+    padding: 4px 8px;
+}
+
+.user-profile {
+    float: right;
+    cursor: pointer;
+    margin-right: 29px;
+}
+
+.el-dropdown-menu__item {
+    padding: 5px;
+}
+.title {
+    float: left;
+    color: #badcff;
+    font-size: 19px;
+    line-height: 72px;
+    margin-left: 23px;
+}
+.title em {
+    font-style: normal;
+    font-size: 14px;
+    margin-left: 10px;
+    font-size: 14px;
+}
+.lteHead {
+    margin-top: 25px;
+    margin-right: 10px;
+    float: left;
+}
+.user-profile span {
+    float: left;
+    color: #fff;
+    font-size: 14px;
+    line-height: 72px;
+}
+
+@media (min-width: 960px) and (max-width: 1024px) {
     #headside {
-        width: 100%;
-        height: 72px;
-        overflow: hidden;
-        float: right;
-        z-index: 1111;
-        background-color: #0063C9;
+        height: 40px;
     }
-
     .user-info-navbar {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        min-height: 72px;
-        height: 72px;
-        border: 0;
-        padding: 0;
-        margin-bottom: 0px;
-    }
-
-    .user-info-navbar .user-info-menu > li > a {
-        position: relative;
-        display: block;
-        padding: 12px 20px;
-        color: #979898;
-        border-bottom: 1px solid #ffffff;
-        top: 1px;
-        z-index: 5;
-    }
-
-    .user-info-navbar .user-info-menu > li > a .badge {
-        font-size: 9px;
-        position: absolute;
-        top: 3px;
-        right: 10px;
-        padding: 4px;
-        min-width: 18px;
-        line-height: 1;
-    }
-
-    .user-info-navbar .user-info-menu > li > form {
-        position: relative;
-        display: block;
-        padding: 12px 20px;
-        padding-bottom: 5px;
-        margin: 0;
-        border-bottom: 1px solid #ffffff;
-    }
-
-    .user-info-navbar .user-info-menu > li.search-form .search-field,
-    .navbar.horizontal-menu .navbar-inner > .nav > li.search-form .search-field {
-        position: absolute;
-        top: 25%;
-        right: 15px;
-        margin-top: 0px;
-        line-height: 1;
-        height: 25px;
-        border: 1px solid #dddddd;
-        border: 0;
-        padding: 0 10px;
-        width: 170px;
-        padding-right: 30px;
-        font-size: 12px;
-        z-index: 1;
-        visibility: hidden;
-        background: #f3f3f3;
-        zoom: 1;
-        filter: alpha(opacity=0);
-        -webkit-opacity: 0;
-        -moz-opacity: 0;
-        opacity: 0;
-    }
-
-    .frm-body {
-        background-color: #eeeeee;
-    }
-
-    .sidebar-menu {
-        display: table-cell;
-        position: relative;
-        width: 230px;
-        background: #2c2e2f;
-        z-index: 1;
-    }
-
-    footer.main-footer {
-        padding: 8px 20px 0px 20px;
-        border-top: 1px solid #dddddd;
-        font-size: 12px;
-        margin-left: -30px;
-        margin-right: -30px;
-        margin-top: 10px;
-        margin-bottom: -10px;
-        background-color: #eeeeee;
-    }
-
-    .panel {
-        position: relative;
-        background: #ffffff;
-        padding: 10px 10px;
-        border: 0;
-        margin-top: 5px;
-        margin-bottom: 0px;
-        -webkit-box-shadow: none;
-        -moz-box-shadow: none;
-        box-shadow: none;
-    }
-
-    .panel .panel-body {
-        padding: 0;
-        padding-top: 20px;
-        color: #000000;
-    }
-
-    .panel-title {
-        margin-top: 5px;
-        margin-bottom: 5px;
-    }
-
-    .panel .panel-heading {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        background: none;
-        font-size: 17px;
-        padding-bottom: 0px;
-        border-bottom: 2px solid #f5f5f5;
-    }
-
-    .panel.panel-color .panel-heading {
-        margin-top: -10px;
-        margin-left: -10px;
-        margin-right: -10px;
-        padding: 10px 10px;
-        border-bottom: 0;
-    }
-
-    .panel.panel-color.collapsed > .panel-heading {
-        margin-bottom: -10px;
-    }
-
-    .xe-widget.xe-progress-counter.xe-progress-counter-huise {
-        background-color: #d7d7d7
-    }
-
-    .xe-widget.xe-progress-counter.xe-progress-counter-huise .xe-background {
-        color: #fff
-    }
-
-    .xe-widget.xe-progress-counter.xe-progress-counter-huise .xe-upper {
-        background-color: transparent
-    }
-
-    .table > thead > tr > td, .table > tbody > tr > td, .table > tfood > tr > td, .table > thead > tr > th, .table > tbody > tr > th, .table > tfood > tr > th {
-        padding: 5px 5px 5px 5px;
-    }
-
-    .input-sm {
-        height: 26px;
-        padding: 5px 10px;
-        font-size: 12px;
-        line-height: 1.5;
-        border-radius: 0;
-    }
-
-    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
-        position: relative;
-        min-height: 1px;
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-
-    .form-horizontal .form-group {
-        margin-left: 0px;
-        margin-right: 0px;
-    }
-
-    .btn-sm, .btn-group-sm > .btn {
-        font-size: 14px;
-        line-height: 1.5;
-        padding: 2px 6px;
-        border-radius: 0px;
-    }
-
-    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
-        padding-top: 10px;
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-
-    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
-        padding-bottom: 5px;
-        padding-left: 5px;
-        padding-right: 5px;
-    }
-
-    .comm_style {
-        max-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 0 auto;
-    }
-
-    .img_style {
-        width: 40px;
-        /*height: 40px;*/
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    #modal_img {
-        width: 300px;
-        height: 300px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .modal-content {
-        margin: 0 auto;
-        /*width: 50%;*/
-        /*20170623 mefisto*/
-    }
-
-    .customer_serve {
-        float: right;
-        margin-right: 20px;
-        font-size: 12px;
-        color: #585858;
-        line-height: 72px;
-        text-align: right;
-    }
-
-    #about_us {
-        color: #03B1FF;
-        cursor: pointer;
-    }
-
-    .dropdown-menu-list a img {
-        width: 30px;
-        height: 30px;
-    }
-
-    .user-info-navbar .user-info-menu > li .dropdown-menu .dropdown-menu-list li a .line.desc, .navbar.horizontal-menu .navbar-inner > .nav > li .dropdown-menu .dropdown-menu-list li a .line.desc {
-        margin-right: 0;
-    }
-
-    .user-info-navbar .user-info-menu > li .dropdown-menu .dropdown-menu-list li, .navbar.horizontal-menu .navbar-inner > .nav > li .dropdown-menu .dropdown-menu-list li {
-        min-height: 50px;
-
-    }
-
-    .empty_li_noti {
-        text-align: center;
-        line-height: 50px !important;
-    }
-
-    .disagree_invite {
-        background-color: #FF0000;
-    }
-
-    .agree_invite {
-        background-color: #25CC42;
-    }
-
-    .disagree_invite:hover {
-        background-color: #d20000;
-    }
-
-    .agree_invite:hover {
-        background-color: #25CC42;
-    }
-
-    .invite_msg {
-        width: 95%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 34px;
-        margin-top: 10px;
-    }
-
-    .invite_time {
-        width: 95%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 10px;
-    }
-
-    .left_hide_icon {
-        width: 20px;
-        height: 20px;
-        margin-top: 25px;
-        float: left;
-        margin-left: 15px;
-        cursor: pointer;
-        color: #BADCFF;
-        font-size: 22px;
-        /*background: url("../assets/img/header/right.png")top center no-repeat;*/
-    }
-
-    /*.left_hide_icon:hover {*/
-    /*    background: #ccc;*/
-    /*    color: #fff;*/
-    /*}*/
-
-    .left_show_icon {
-        width: 20px;
-        height: 20px;
-        margin-top: 25px;
-        float: left;
-        margin-left: 15px;
-        cursor: pointer;
-        color: #BADCFF;
-        font-size: 22px;
-        /*background: url("../assets/img/header/left.png")top center no-repeat;*/
-    }
-
-
-    .item {
-        float: left;
-        margin-left: 10px;
-        margin-top: 10px;
-    }
-
-    .el-button--small, .el-button--small.is-round {
-        padding: 4px 8px;
-    }
-
-    .user-profile {
-        float: right;
-        cursor: pointer;
-        margin-right: 29px;
-    }
-
-    .el-dropdown-menu__item {
-        padding: 5px;
+        min-height: 40px;
+        height: 40px;
     }
     .title {
-        float: left;
-        color: #BADCFF;
-        font-size: 19px;
-        line-height: 72px;
-        margin-left: 23px;
-    }
-    .title em {
-        font-style: normal;
-        font-size: 14px;
-        margin-left: 10px;
-        font-size: 14px;
-    }
-    .lteHead {
-        margin-top: 25px;
-        margin-right: 10px;
-        float: left;
-    }
-     .user-profile span {
-        float: left;
-        color: #fff;
-        font-size: 14px;
-        line-height: 72px;
+    line-height: 40px;}
+    .user-profile span {
+     line-height: 40px;
     }
+}
 </style>

pc/src/components/Navside.vue

@@ -1,28 +1,32 @@
 <template>
     <div :class="NavsideClass">
         <div class="logoContainer">
-            <img src="../assets/img/nav/logo.png" height="40" width="180"/>
+            <img src="../assets/img/nav/logo.png" height="40" width="180" />
         </div>
         <div class="userContainer">
-            <img src="../assets/img/nav/head.png" height="51" width="51"/>
+            <img src="../assets/img/nav/head.png" height="51" width="51" />
             <span>{{ ShopName }}</span>
             <em>{{ userLevelText }}</em>
         </div>
-        <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
+        <el-row :class="[{ 'shortnav': isCollapse }, { 'longNav': !isCollapse }]">
             <el-col :span="24">
                 <el-menu
-                        :default-active="userLevelDeafult"
-                        class="el-menu-vertical-demo"
-                        @open="handleOpen"
-                        @close="handleClose"
-                        @select="handleSelect"
-                        background-color="#ffffff"
-                        text-color="#777777"
-                        active-text-color="#fff"
-                        router
+                    :default-active="userLevelDeafult"
+                    class="el-menu-vertical-demo"
+                    @open="handleOpen"
+                    @close="handleClose"
+                    @select="handleSelect"
+                    background-color="#ffffff"
+                    text-color="#777777"
+                    active-text-color="#fff"
+                    router
                 >
-                    <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs"
-                                  v-if="nav.show == userLevel">
+                    <el-menu-item
+                        :index="nav.clmid"
+                        :route="nav.clmurl"
+                        v-for="nav in navs"
+                        v-if="nav.show == userLevel"
+                    >
                         <i :class="nav.icon"></i>
                         <span slot="title">{{ nav.clmname }}</span>
                     </el-menu-item>
@@ -32,389 +36,391 @@
     </div>
 </template>
 <script>
-    import Navs from '../api/Navs';
-    import {
-        ManagerSelfQuery,
-        ShopListQuery
-    } from '../api/getApiRes.js'
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                wildState: 0,
-                navs: [],
-                ShopName: '',
-                userLevelText: '',
-                NavsideClass: 'Navside',
-                userLevel: 0,
-                userLevelDeafult: "",
-            }
+import Navs from '../api/Navs';
+import {
+    ManagerSelfQuery,
+    ShopListQuery
+} from '../api/getApiRes.js'
+
+let qs = require('qs');
+export default {
+    data() {
+        return {
+            wildState: 0,
+            navs: [],
+            ShopName: '',
+            userLevelText: '',
+            NavsideClass: 'Navside',
+            userLevel: 0,
+            userLevelDeafult: "",
+        }
+    },
+    props: ['isCollapse'],
+    mounted() {
+        this.userLevelDeafult = this.$route.meta.clmid;
+        this.getTableQuery();
+        this.getManagerSelfQuery();
+        if (document.body.clientWidth < 1024) {
+            this.NavsideClass = 'NavsideShort'
+        } else {
+            this.NavsideClass = 'Navside'
+        }
+    },
+    methods: {
+        handleSelect(i, s, t) {
+            // this.$emit('TabsAdd', i);//触发事件
         },
-        props: ['isCollapse'],
-        mounted() {
-            this.userLevelDeafult = this.$route.meta.clmid;
-            this.getTableQuery();
-            this.getManagerSelfQuery();
-            if (document.body.clientWidth < 1024) {
-                this.NavsideClass = 'NavsideShort'
-            } else {
-                this.NavsideClass = 'Navside'
-            }
+        getTableQuery() {
+            // 菜单
+            this.navs = Navs;
         },
-        methods: {
-            handleSelect(i, s, t) {
-                // this.$emit('TabsAdd', i);//触发事件
-            },
-            getTableQuery() {
-                // 菜单
-                this.navs = Navs;
-            },
-            getManagerSelfQuery() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                };
-                let postdata = qs.stringify(param);
-                ManagerSelfQuery(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        that.userLevelText = json.Rs.Role.Name;
-                        // 1 会员 2 系统 3 店铺 4 教练
-                        switch (parseInt(json.Rs.Role.Id)) {
-                            case 1:
-                                that.userLevel = 1;
-                                break;
-                            case 2:
-                                that.userLevel = 2;
-                                break;
-                            case 3:
-                                that.userLevel = 3;
-                                break;
-                            case 4:
-                                that.userLevel = 4;
-                                break;
-                        }
-                        localStorage.shopId = json.Rs.ShopId;
-                        this.panelSelect(json.Rs.ShopId);
-                    } 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);
-                        }
+        getManagerSelfQuery() {
+            let that = this;
+            let param = {
+                token: localStorage.token,
+            };
+            let postdata = qs.stringify(param);
+            ManagerSelfQuery(postdata).then(res => {
+                let json = res;
+                if (json.Code == 0) {
+                    that.userLevelText = json.Rs.Role.Name;
+                    // 1 会员 2 系统 3 店铺 4 教练
+                    switch (parseInt(json.Rs.Role.Id)) {
+                        case 1:
+                            that.userLevel = 1;
+                            break;
+                        case 2:
+                            that.userLevel = 2;
+                            break;
+                        case 3:
+                            that.userLevel = 3;
+                            break;
+                        case 4:
+                            that.userLevel = 4;
+                            break;
                     }
-                })
-            },
-            // 获取所属店铺
-            panelSelect(ShopId) {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                };
-                let postdata = qs.stringify(param);
-                ShopListQuery(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        json.Rs.map(function (item) {
-                            if (item.ShopID == ShopId) {
-                                that.ShopName = item.ShopName;
-                            }
-                        })
+                    localStorage.shopId = json.Rs.ShopId;
+                    this.panelSelect(json.Rs.ShopId);
+                } 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);
                     }
-                })
-            },
-            handleOpen(key, keyPath) {
-                // console.log(key, keyPath);
-            },
-            handleClose(key, keyPath) {
-                // console.log(key, keyPath);
-            },
+                }
+            })
         },
-        watch: {
-            $route(to, from) {
-                this.userLevelDeafult = to.meta.clmid
-            },
+        // 获取所属店铺
+        panelSelect(ShopId) {
+            let that = this;
+            let param = {
+                token: localStorage.token,
+            };
+            let postdata = qs.stringify(param);
+            ShopListQuery(postdata).then(res => {
+                let json = res;
+                if (json.Code == 0) {
+                    json.Rs.map(function(item) {
+                        if (item.ShopID == ShopId) {
+                            that.ShopName = item.ShopName;
+                        }
+                    })
+                } else {
+                    that.$message.error(json.Memo + ' 错误码：' + json.Code);
+                }
+            })
         },
-    }
+        handleOpen(key, keyPath) {
+            // console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            // console.log(key, keyPath);
+        },
+    },
+    watch: {
+        $route(to, from) {
+            this.userLevelDeafult = to.meta.clmid
+        },
+    },
+}
 </script>
 <style scoped>
-    /*注释*/
-    .Navside {
-        width: 100%;
-        height: 910px;
-        /*height: 100%;*/
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        overflow-y: scroll;
-        /*overflow-y: hidden;*/
-        background-color: #fff;
-        z-index: 4444;
+/*注释*/
+.Navside {
+    width: 100%;
+    height: 910px;
+    /*height: 100%;*/
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    overflow-y: scroll;
+    /*overflow-y: hidden;*/
+    background-color: #fff;
+    z-index: 4444;
+}
+
+.NavsideShort {
+    width: 100%;
+    height: 100%;
+    /*height: 710px;*/
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    /*overflow-y: scroll;*/
+    overflow-y: scroll;
+    background-color: #fff;
+    z-index: 4444;
+}
+
+.Navside::-webkit-scrollbar {
+    /*滚动条整体样式*/
+
+    width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+
+    height: 1px;
+}
+
+.Navside::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+
+    border-radius: 3px;
+
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+
+    background: #f5f5f5;
+}
+
+.Navside::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+
+    border-radius: 3px;
+
+    background: #f5f5f5;
+}
+
+.NavsideShort::-webkit-scrollbar {
+    /*滚动条整体样式*/
+
+    width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+
+    height: 1px;
+}
+
+.NavsideShort::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+
+    border-radius: 3px;
+
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+
+    background: #f5f5f5;
+}
+
+.NavsideShort::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+
+    border-radius: 3px;
+
+    background: #f5f5f5;
+}
+
+.logoContainer {
+    width: 256px;
+    height: 72px;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    background: #3799ff;
+}
+
+.logoContainer img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-top: 1px;
+}
+
+.userContainer {
+    width: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 16px;
+    padding-top: 19px;
+    padding-bottom: 19px;
+    border-bottom: 1px solid #f0f2f5;
+    background: #fff;
+}
+
+.userContainer img {
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 16px;
+}
+
+.userContainer span {
+    width: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    color: #565656;
+    font-size: 16px;
+}
+
+.userContainer em {
+    width: 125px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    color: #fff;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    background: #e75296;
+    border-radius: 250px;
+    font-style: normal;
+    margin-top: 8px;
+    font-size: 16px;
+}
+
+/deep/ .el-menu {
+    border: none;
+}
+
+/deep/ .el-menu-item {
+}
+
+/deep/ .el-menu-item span {
+    text-align: left;
+    float: left;
+    margin-left: 70px;
+}
+
+/deep/ .el-menu-item.is-active {
+    background-color: #3799ff !important;
+    color: #fff !important;
+}
+
+/deep/ .el-menu-item:hover {
+    background-color: #3799ff !important;
+    color: #fff !important;
+}
+
+/deep/ .el-menu-item:hover i {
+    color: #fff !important;
+}
+
+/deep/ .el-menu-item i {
+    position: relative;
+    float: left;
+    line-height: 55px;
+    left: 60px;
+}
+
+/*ipad only*/
+@media (min-width: 1025px) and (max-width: 1366px) {
+    .userContainer {
+        width: 80%;
     }
 
-    .NavsideShort {
+    .el-menu-item span {
+        text-align: left;
+        float: left;
+        margin-left: 20px;
+        line-height: 40px;
+    }
+
+    .userContainer em {
         width: 100%;
-        height: 100%;
-        /*height: 710px;*/
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        /*overflow-y: scroll;*/
-        overflow-y: scroll;
-        background-color: #fff;
-        z-index: 4444
+        font-size: 12px;
     }
 
-    .Navside::-webkit-scrollbar { /*滚动条整体样式*/
-
-        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-
-        height: 1px;
-
+    .el-menu-item {
+        padding: 0 !important;
+        margin: 0;
     }
 
-    .Navside::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
-
-        border-radius: 3px;
-
-        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-
-        background: #f5f5f5;
-
-    }
-
-    .Navside::-webkit-scrollbar-track { /*滚动条里面轨道*/
-
-        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-
-        border-radius: 3px;
-
-        background: #f5f5f5;
-
+    .el-menu-item i {
+        left: 20px;
+        padding: 0;
+        margin: 0;
+        float: left;
+        line-height: 40px;
     }
 
-
-    .NavsideShort::-webkit-scrollbar { /*滚动条整体样式*/
-
-        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-
-        height: 1px;
-
+    /deep/ .el-tooltip {
+        padding: 0 !important;
     }
 
-    .NavsideShort::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
-
-        border-radius: 3px;
-
-        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-
-        background: #f5f5f5;
-
+    .userContainer span {
+        font-size: 12px;
     }
 
-    .NavsideShort::-webkit-scrollbar-track { /*滚动条里面轨道*/
-
-        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-
-        border-radius: 3px;
-
-        background: #f5f5f5;
-
+    .el-menu-item,
+    .el-submenu__title {
+        height: 40px;
     }
-
+}
+@media (min-width: 960px) and (max-width: 1024px) {
     .logoContainer {
-        width: 256px;
-        height: 72px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background: #3799FF;
+        height: 40px;
     }
-
-    .logoContainer img {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 1px;
-    }
-
-    .userContainer {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 16px;
-        padding-top: 19px;
-        padding-bottom: 19px;
-        border-bottom: 1px solid #F0F2F5;
-        background: #fff;
+    .el-container.is-vertical {
+        left: 60px;
     }
-
-    .userContainer img {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 16px;
+    .el-menu-item span {
+        text-align: left;
+        float: left;
+        margin-left: 5px;
+        line-height: 20px;
+        font-size: 12px;
+        height: 30px;
+        line-height: 30px;
     }
-
-    .userContainer span {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #565656;
-        font-size: 16px;
+    .el-menu-item i {
+        /*left: 20px;*/
+        /*padding: 0;*/
+        /*margin: 0;*/
+        /*float: left;*/
+        /*line-height: 20px;*/
+        display: none;
     }
-
     .userContainer em {
-        width: 125px;
-        height: 26px;
-        line-height: 26px;
-        text-align: center;
-        color: #fff;
+        width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        background: #E75296;
-        border-radius: 250px;
-        font-style: normal;
-        margin-top: 8px;
-        font-size: 16px;
-    }
-
-    /deep/ .el-menu {
-        border: none;
+        font-size: 12px;
     }
-
-    /deep/ .el-menu-item {
+    .el-menu-item {
+        padding: 0 !important;
+        margin: 0;
     }
 
-    /deep/ .el-menu-item span {
-        text-align: left;
-        float: left;
-        margin-left: 70px;
+    /deep/ .el-tooltip {
+        padding: 0 !important;
     }
 
-    /deep/ .el-menu-item.is-active {
-        background-color: #3799FF !important;
-        color: #fff !important;
-    }
-
-    /deep/ .el-menu-item:hover {
-        background-color: #3799FF !important;
-        color: #fff !important;
-    }
-
-    /deep/ .el-menu-item:hover i {
-        color: #fff !important;
-    }
-
-    /deep/ .el-menu-item i {
-        position: relative;
-        float: left;
-        line-height: 55px;
-        left: 60px;
-    }
-
-    /*ipad only*/
-    @media(min-width:1025px) and (max-width: 1366px){
-        .userContainer {
-            width: 80%;
-        }
-
-        .el-menu-item span {
-            text-align: left;
-            float: left;
-            margin-left: 20px;
-            line-height: 40px;
-        }
-
-        .userContainer em {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 12px;
-        }
-
-        .el-menu-item {
-            padding: 0 !important;
-            margin: 0;
-        }
-
-        .el-menu-item i {
-            left: 20px;
-            padding: 0;
-            margin: 0;
-            float: left;
-            line-height: 40px;
-        }
-
-        /deep/ .el-tooltip {
-            padding: 0 !important;
-        }
-
-        .userContainer span {
-            font-size: 12px;
-        }
-
-        .el-menu-item, .el-submenu__title {
-            height: 40px;
-        }
+    .userContainer span {
+        font-size: 12px;
     }
-    @media(min-width:960px) and (max-width: 1024px){
-        .el-container.is-vertical {
-            left: 60px;
-        }
-        .el-menu-item span {
-            text-align: left;
-            float: left;
-            margin-left: 5px;
-            line-height: 20px;
-            font-size: 12px;
-            height: 30px;
-            line-height: 30px;
-        }
-        .el-menu-item i {
-            /*left: 20px;*/
-            /*padding: 0;*/
-            /*margin: 0;*/
-            /*float: left;*/
-            /*line-height: 20px;*/
-            display: none;
-        }
-        .userContainer em {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 12px;
-        }
-        .el-menu-item {
-            padding: 0 !important;
-            margin: 0;
-        }
 
-        /deep/ .el-tooltip {
-            padding: 0 !important;
-        }
-
-        .userContainer span {
-
-            font-size: 12px;
-        }
-
-        .el-menu-item, .el-submenu__title {
-            height: 30px;
-            line-height: 30px;
-        }
+    .el-menu-item,
+    .el-submenu__title {
+        height: 30px;
+        line-height: 30px;
     }
-
+}
 </style>

pc/src/views/Index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="IndexContainer">
         <el-container>
-            <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
+            <el-aside :class="[{ 'shortElaside': isCollapse }, { 'lognElaside': !isCollapse }]">
                 <Navside :isCollapse="isCollapse"></Navside>
             </el-aside>
             <el-container>
@@ -13,261 +13,272 @@
                         <router-view></router-view>
                     </keep-alive>
                 </el-main>
-                <el-footer v-if="true"><p class="footer">济南佰意兴网络科技有限公司提供技术支持</p></el-footer>
+                <el-footer v-if="true">
+                    <p class="footer">济南佰意兴网络科技有限公司提供技术支持</p>
+                </el-footer>
             </el-container>
         </el-container>
     </div>
 </template>
 
 <script>
-    // @ is an alias to /src
-    import Headside from '@/components/Headside.vue'
-    import Navside from '@/components/Navside.vue'
-    import Navs from '../api/Navs';
-
-    export default {
-        name: 'Home',
-        data() {
-            return {
-                isCollapse: document.body.clientWidth < 1366,
-                aSideState: false,
-                thisClick: 0,
-                tabwildState: 1,
-                navs: Navs,
-                handleTabsList: [{
-                    title: '系统首页',
-                    name: '1',
-                    clmurl: '/',
-                }],
-                editableTabsValue: '1'
-            }
-        },
-        mounted() {
-            // checkScreen
-            console.log(this.isCollapse);
-            if (document.body.clientWidth < 1366) {
-                this.$message.warning('请横屏使用本系统');
-            }
-        },
-        methods: {
-            left_hide() {
-                this.aSideState = !this.aSideState;
-                this.isCollapse = !this.isCollapse;
-            },
-        },
-        components: {
-            Headside,
-            Navside
+// @ is an alias to /src
+import Headside from '@/components/Headside.vue'
+import Navside from '@/components/Navside.vue'
+import Navs from '../api/Navs';
+
+export default {
+    name: 'Home',
+    data() {
+        return {
+            isCollapse: document.body.clientWidth < 1366,
+            aSideState: false,
+            thisClick: 0,
+            tabwildState: 1,
+            navs: Navs,
+            handleTabsList: [{
+                title: '系统首页',
+                name: '1',
+                clmurl: '/',
+            }],
+            editableTabsValue: '1'
         }
+    },
+    mounted() {
+        // checkScreen
+        console.log(this.isCollapse);
+        if (document.body.clientWidth < 1366) {
+            this.$message.warning('请横屏使用本系统');
+        }
+    },
+    methods: {
+        left_hide() {
+            this.aSideState = !this.aSideState;
+            this.isCollapse = !this.isCollapse;
+        },
+    },
+    components: {
+        Headside,
+        Navside
     }
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
+.el-header {
+    padding: 0 !important;
+    height: 72px !important;
+}
+
+.lognElaside {
+    width: 256px !important;
+    overflow: hidden;
+    height: 100%;
+    float: left;
+}
+
+/deep/ .nav {
+    width: 60px;
+}
+
+.IndexContainer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #f0f2f5;
+}
+
+.IndexContainer > .el-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    padding: 10px;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    text-indent: -30%;
+    font-size: 12px;
+    color: #bdbdbd;
+    background: #f0f2f5;
+    z-index: 222;
+}
+
+.el-main {
+    width: 100%;
+    height: 100%;
+    /*min-height: 800px;*/
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    overflow-y: hidden;
+    padding: 10px 20px;
+}
+
+/*ipad only*/
+@media (min-width: 1025px) and (max-width: 1366px) {
     .el-header {
-        padding: 0 !important;
-        height: 72px !important;
+        height: 40px !important;
     }
-
-
-    .lognElaside {
-        width: 256px !important;
+    .shortElaside {
+        width: 140px !important;
+        /*width: 60px !important;*/
         overflow: hidden;
         height: 100%;
         float: left;
     }
 
-    /deep/ .nav {
-        width: 60px;
-    }
-
-    .IndexContainer {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: #F0F2F5;
+    .lognElaside {
+        width: 70px !important;
     }
 
-    .IndexContainer > .el-container {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
+    .logoContainer img {
+        display: none !important;
     }
 
-    .footer {
+    .el-main {
         position: absolute;
-        bottom: 0px;
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-        text-indent: -30%;
-        font-size: 12px;
-        color: #BDBDBD;
-        background: #F0F2F5;
-        z-index: 222;
+        top: 70px;
+        bottom: 20px;
+        padding: 3px;
+        padding-bottom: 60px;
+        overflow-y: scroll;
     }
 
-    .el-main {
-        width: 100%;
-        height: 100%;
-        /*min-height: 800px;*/
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        overflow-y: hidden;
-        padding: 10px 20px;
+    .el-main > .context {
+        /*height: 640px;*/
+        /*overflow-y: scroll;*/
+        padding: 6px !important;
     }
 
-    /*ipad only*/
-    @media (min-width: 1025px) and (max-width: 1366px) {
-        .shortElaside {
-            width: 140px !important;
-            /*width: 60px !important;*/
-            overflow: hidden;
-            height: 100%;
-            float: left;
-        }
-
-        .lognElaside {
-            width: 70px !important;
-        }
-
-        .logoContainer img {
-            display: none !important;
-        }
-
-        .el-main {
-            position: absolute;
-            top: 70px;
-            bottom: 20px;
-            padding: 3px;
-            padding-bottom: 60px;
-            overflow-y: scroll;
-        }
-
-        .el-main > .context {
-            /*height: 640px;*/
-            /*overflow-y: scroll;*/
-            padding: 6px !important;
-        }
-
-        .table {
-            /*width: 950px;*/
-            /*overflow-x: scroll;*/
-        }
+    .table {
+        /*width: 950px;*/
+        /*overflow-x: scroll;*/
+    }
 
-        .el-dialog {
-            max-width: 960px;
-        }
+    .el-dialog {
+        max-width: 960px;
+    }
 
-        .el-dialog__body {
-            padding: 3px;
-        }
+    .el-dialog__body {
+        padding: 3px;
+    }
 
-        .el-transfer__buttons {
-            width: 60px;
-            padding: 3px;
-        }
+    .el-transfer__buttons {
+        width: 60px;
+        padding: 3px;
+    }
 
-        .el-transfer .el-button + .el-button {
-            float: right;
-        }
+    .el-transfer .el-button + .el-button {
+        float: right;
+    }
 
-        .el-container.is-vertical {
-            position: absolute;
-            left: 140px;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            height: 100%;
-        }
+    .el-container.is-vertical {
+        position: absolute;
+        left: 140px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+    }
 
-        .context {
-            border-radius: 12px;
-            height: 823px !important;
-            overflow-y: scroll;
-        }
+    .context {
+        border-radius: 12px;
+        height: 823px !important;
+        overflow-y: scroll;
+    }
 
-        .el-dialog {
-            padding: 5px;
-            padding-bottom: 15px;
-        }
+    .el-dialog {
+        padding: 5px;
+        padding-bottom: 15px;
     }
+}
 
-    @media (min-width: 320px) and (max-width: 1024px) {
-        .shortElaside {
-            /*width: 140px !important;*/
-            width: 60px !important;
-            overflow: hidden;
-            height: 100%;
-            float: left;
-        }
+@media (min-width: 320px) and (max-width: 1024px) {
+    .el-header {
+        height: 40px !important;
+    }
+    .shortElaside {
+        /*width: 140px !important;*/
+        width: 60px !important;
+        overflow: hidden;
+        height: 100%;
+        float: left;
+    }
 
-        .el-container.is-vertical {
-            left: 60px;
-        }
+    .el-container.is-vertical {
+        left: 60px;
+    }
 
-        .el-transfer__buttons {
-            width: 20px;
-            padding: 3px;
-        }
-        .el-transfer .el-transfer__buttons {
-            width: 60px;
-            padding: 3px;
-        }
-        .el-transfer .el-button + .el-button {
-            float: right;
-        }
+    .el-transfer__buttons {
+        width: 20px;
+        padding: 3px;
+    }
+    .el-transfer .el-transfer__buttons {
+        width: 60px;
+        padding: 3px;
+    }
+    .el-transfer .el-button + .el-button {
+        float: right;
+    }
 
-        .context {
-            border-radius: 12px;
-            height: 823px !important;
-            overflow-y: scroll;
-        }
+    .context {
+        border-radius: 12px;
+        height: 823px !important;
+        overflow-y: scroll;
+    }
 
-        .el-dialog {
-            padding: 5px;
-            padding-bottom: 15px;
-        }
+    .el-dialog {
+        padding: 5px;
+        padding-bottom: 15px;
+    }
 
-        .lognElaside {
-            width: 70px !important;
-        }
+    .lognElaside {
+        width: 70px !important;
+    }
 
-        .logoContainer img {
-            display: none !important;
-        }
+    .logoContainer img {
+        display: none !important;
+    }
 
-        .el-main {
-            position: absolute;
-            top: 70px;
-            bottom: 20px;
-            width: 960px;
-            padding: 3px;
-            padding-bottom: 60px;
-            overflow-y: scroll;
-        }
+    .el-main {
+        position: absolute;
+        top: 40px;
+        bottom: 20px;
+        width: 960px;
+        padding: 3px;
+        padding-bottom: 60px;
+        overflow-y: scroll;
+    }
 
-        .el-main > .context {
-            /*height: 640px;*/
-            /*overflow-y: scroll;*/
-            padding: 6px !important;
-        }
+    .el-main > .context {
+        /*height: 640px;*/
+        /*overflow-y: scroll;*/
+        padding: 6px !important;
+    }
 
-        .table {
-            /*width: 950px;*/
-            /*overflow-x: scroll;*/
-        }
+    .table {
+        /*width: 950px;*/
+        /*overflow-x: scroll;*/
+    }
 
-        .el-dialog {
-            max-width: 960px;
-        }
+    .el-dialog {
+        max-width: 960px;
+    }
+    .footer {
+        height: 14px;
+        padding: 3px;
     }
+}
 </style>