meta兼容

pc/src/components/Headside.vue

@@ -1,11 +1,11 @@
 <template>
     <div id="headside">
         <nav class="navbar user-info-navbar" role="navigation">
-            <i
+            <!-- <i
                 v-if="isCollapse"
                 :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>
+            ></i> -->
             <span class="title">
                 场馆管理系统
                 <em>{{ current }}</em>
@@ -41,7 +41,7 @@ let qs = require('qs');
 export default {
     data() {
         return {
-            isCollapse: document.body.clientWidth < 1366,
+            isCollapse: document.body.clientWidth < 1367,
             user: {
                 name: 'admin',
             },
@@ -664,7 +664,7 @@ footer.main-footer {
     padding-left: 10px;
 }
 
-@media (min-width: 960px) and (max-width: 1024px) {
+@media (min-width: 960px) and (max-width: 1367px) {
     #headside {
         height: 40px;
     }

pc/src/components/Navside.vue

@@ -2,9 +2,11 @@
     <div :class="NavsideClass">
         <div class="logoContainer">
             <img src="../assets/img/nav/logo.png" height="40" width="180" />
+            <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>
         </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>
@@ -34,6 +36,8 @@
     export default {
         data() {
             return {
+                isCollapse: document.body.clientWidth < 1366,
+                left_panel_state: true,
                 wildState: 0,
                 navs: [],
                 ShopName: '',
@@ -43,7 +47,7 @@
                 userLevelDeafult: "",
             }
         },
-        props: ['isCollapse'],
+        // props: ['isCollapse'],
         mounted() {
             this.userLevelDeafult = this.$route.meta.clmid;
             this.getTableQuery();
@@ -55,6 +59,18 @@
             }
         },
         methods: {
+            //            隐藏左侧和显示
+            left_hide: function () {
+                let that = this;
+                that.left_panel_state = !that.left_panel_state;
+                that.isCollapse = !that.isCollapse;
+                this.$emit('lefthide');
+                // if (!that.left_panel_state) {
+                //     this.$emit('left_hide_func');
+                // } else {
+                //     this.$emit('right_hide_func');
+                // }
+            },
             handleSelect(i, s, t) {
                 // this.$emit('TabsAdd', i);//触发事件
             },
@@ -316,55 +332,39 @@
         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;
+    @media (min-width: 960px) and (max-width: 1367px) {
+        .left_hide_icon {
+            width: 20px;
+            height: 20px;
+            margin-top: 8px;
             float: left;
-            line-height: 40px;
-        }
-
-        /deep/ .el-tooltip {
-            padding: 0 !important;
+            margin-left: 15px;
+            cursor: pointer;
+            color: #badcff;
+            font-size: 22px;
+            /*background: url("../assets/img/header/right.png")top center no-repeat;*/
         }
 
-        .userContainer span {
-            font-size: 12px;
-        }
+        /*.left_hide_icon:hover {*/
+        /*    background: #ccc;*/
+        /*    color: #fff;*/
+        /*}*/
 
-        .el-menu-item,
-        .el-submenu__title {
-            height: 40px;
+        .left_show_icon {
+            width: 20px;
+            height: 20px;
+            margin-top: 8px;
+            float: left;
+            margin-left: 15px;
+            cursor: pointer;
+            color: #badcff;
+            font-size: 22px;
+            /*background: url("../assets/img/header/left.png")top center no-repeat;*/
         }
-    }
 
-    @media (min-width: 960px) and (max-width: 1024px) {
         .logoContainer {
             height: 40px;
         }

pc/src/views/Index.vue

@@ -2,13 +2,13 @@
     <div class="IndexContainer">
         <el-container>
             <el-aside :class="[{ 'shortElaside': isCollapse }, { 'lognElaside': !isCollapse }]">
-                <Navside :isCollapse="isCollapse"></Navside>
+                <Navside :isCollapse="isCollapse" @lefthide="left_hide"></Navside>
             </el-aside>
             <el-container>
                 <el-header>
                     <Headside @lefthide="left_hide"></Headside>
                 </el-header>
-                <el-main>
+                <el-main :style="{'height': clientHeight+'px'}">
                     <keep-alive>
                         <router-view></router-view>
                     </keep-alive>
@@ -22,242 +22,173 @@
 </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;
+    // @ 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 < 1367,
+                clientHeight: document.documentElement.clientHeight,
+                aSideState: false,
+                thisClick: 0,
+                tabwildState: 1,
+                navs: Navs,
+                handleTabsList: [{
+                    title: '系统首页',
+                    name: '1',
+                    clmurl: '/',
+                }],
+                editableTabsValue: '1'
+            }
         },
-    },
-    components: {
-        Headside,
-        Navside
+        mounted() {
+            // checkScreen
+            console.log(this.isCollapse);
+            if (document.body.clientWidth < 768) {
+                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 {
-        height: 40px !important;
+        padding: 0 !important;
+        height: 72px !important;
     }
-    .shortElaside {
-        width: 140px !important;
-        /*width: 60px !important;*/
+
+    .lognElaside {
+        width: 256px !important;
         overflow: hidden;
         height: 100%;
         float: left;
     }
 
-    .lognElaside {
-        width: 170px;
-    }
-
-    .logoContainer img {
-        display: none !important;
+    /deep/ .nav {
+        width: 60px;
     }
 
-    .el-main {
+    .IndexContainer {
         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;*/
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: #f0f2f5;
     }
 
-    .el-dialog {
-        max-width: 960px;
+    .IndexContainer>.el-container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
     }
 
-    .el-dialog__body {
-        padding: 3px;
+    .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-transfer__buttons {
-        width: 60px;
-        padding: 3px;
+    .el-main {
+        width: 100%;
+        height: 100%;
+        /*min-height: 800px;*/
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        /* overflow-y: scroll; */
+        padding: 10px 20px;
     }
 
-    .el-transfer .el-button + .el-button {
-        float: right;
-    }
 
-    .el-container.is-vertical {
-        position: absolute;
-        left: 140px;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        height: 100%;
-    }
+    @media (min-width: 320px) and (max-width: 1367px) {
+        .el-header {
+            height: 40px !important;
+        }
 
-    .context {
-        border-radius: 12px;
-        height: 823px !important;
-        overflow-y: scroll;
-    }
+        .shortElaside {
+            width: 60px !important;
+            overflow: hidden;
+            height: 100%;
+            float: left;
+        }
 
-    .el-dialog {
-        padding: 5px;
-        padding-bottom: 15px;
-    }
-}
+        .el-container.is-vertical {
+            left: 60px;
+            display: -webkit-box;
+            /* OLD - iOS 6-, Safari 3.1-6 */
+            display: -moz-box;
+            /* OLD - Firefox 19- (buggy but mostly works) */
+            display: -ms-flexbox;
+            /* TWEENER - IE 10 */
+            display: -webkit-flex;
+            /* NEW - Chrome */
+            display: flex;
+            /* NEW, Spec - Opera 12.1, Firefox 20+ */
+        }
 
-@media (min-width: 320px) and (max-width: 1024px) {
-    .el-header {
-        height: 40px !important;
-    }
-    .shortElaside {
-        width: 60px !important;
-        overflow: hidden;
-        height: 100%;
-        float: left;
-    }
+        .el-transfer__buttons {
+            width: 20px;
+            padding: 3px;
+        }
 
-    .el-container.is-vertical {
-        left: 60px;
-        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-        display: -ms-flexbox; /* TWEENER - IE 10 */
-        display: -webkit-flex; /* NEW - Chrome */
-        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-    }
+        .el-transfer .el-transfer__buttons {
+            width: 60px;
+            padding: 3px;
+        }
 
-    .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 .el-button+.el-button {
+            float: right;
+        }
 
-     /*.context {
+        /*.context {
         border-radius: 12px;
         height: 823px !important;
         overflow-y: scroll;
     }*/
 
-    .el-dialog {
-        padding: 5px;
-        padding-bottom: 15px;
-    }
+        .el-dialog {
+            padding: 5px;
+            padding-bottom: 15px;
+        }
 
-    .el-aside.lognElaside {
-        width: 100px !important;
-    }
+        .el-aside.lognElaside {
+            width: 100px !important;
+        }
 
-    .logoContainer img {
-        display: none !important;
-    }
+        .logoContainer img {
+            display: none !important;
+        }
 
-    .el-main {
-         /*position: absolute;
+        .el-main {
+            /*position: absolute;
         top: 40px;
         bottom: 20px;
         width: 960px;
@@ -265,33 +196,38 @@ export default {
         padding-bottom: 60px;
           height: 780px;
       */
-      height:760px;
-      overflow-y: visible;
-      padding-bottom: 60px;
-      margin-bottom: 30px;
-    }
+            position: relative;
+            top: 0;
+            bottom: 0;
+            /* height: 100%; */
+            overflow-y: scroll;
+            padding-bottom: 60px;
+            margin-bottom: 30px;
+        }
 
-    .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;
-    }
-    /deep/ .el-footer {
-        display: none;
-    }
-    .footer {
-        display: none;
-        height: 14px;
-        padding: 3px;
+        .el-dialog {
+            max-width: 960px;
+        }
+
+        /deep/ .el-footer {
+            display: none;
+        }
+
+        .footer {
+            display: none;
+            height: 14px;
+            padding: 3px;
+        }
     }
-}
-</style>
+</style>

pc/src/views/Main.vue

@@ -6,7 +6,7 @@
                     <li @click="goPage('member')">
                         <img src="../assets/img/main/member.png" height="54" width="54" />
                         <div class="liRight">
-                            <h5>会员人数</h5>
+                            <h5>会员人数 {{clientWidth}}</h5>
                             <span>{{ AllCount }}</span>
                         </div>
                         <div class="btLine">
@@ -249,7 +249,8 @@ export default {
             TotalRemainNormalhour: 0,
             TotalRemainGifthour: 0,
             userLevel: localStorage.userLevel,
-            isCollapse: document.body.clientWidth < 1366,
+            isCollapse: document.body.clientWidth < 1367,
+            // clientWidth:document.body.clientWidth
         }
     },
     mounted() {

pc/src/views/heartEquip.vue

@@ -9,7 +9,7 @@
             <div class="panel-body">
                 <div class="panel_control">
                     <el-row :gutter="20">
-                        <el-col :span="6">
+                        <el-col :span="5">
                             <em>心率设备:</em>
                             <el-input v-model="panel.str" placeholder="请输入编号" type="number"></el-input>
                         </el-col>
@@ -25,7 +25,7 @@
                         <!--</el-option>-->
                         <!--</el-select>-->
                         <!--</el-col>-->
-                        <el-col :span="4">
+                        <el-col :span="2">
                             <el-button size type="primary" @click="query" plain>查询</el-button>
                         </el-col>
                     </el-row>
@@ -76,7 +76,7 @@
                 <!--width="90"-->
                 <!--&gt;-->
                 <!--</el-table-column>-->
-                <el-table-column prop="Sn" label="序列号" align="InVenueNo" width="80px" sortable></el-table-column>
+                <el-table-column prop="Sn" label="序列号" align="InVenueNo" width="100px" sortable></el-table-column>
                 <el-table-column prop="UserName" label="用户" align="center" sortable>
                     <template slot-scope="scope">
                         {{ scope.row.UserName }}
@@ -965,4 +965,8 @@ export default {
     width: 70%;
     float: right;
 }
+.panel_control /deep/ .el-input {
+    width: 90px;
+    float: left;
+}
 </style>

pc/src/views/heartEquipPerson.vue

@@ -9,7 +9,7 @@
             <div class="panel-body">
                 <div class="panel_control">
                     <el-row :gutter="20">
-                        <el-col :span="6">
+                        <el-col :span="5">
                             <em>心率设备:</em>
                             <el-input v-model="panel.str" placeholder="请输入编号" type="number"></el-input>
                         </el-col>
@@ -25,7 +25,7 @@
                                 <!--</el-option>-->
                             <!--</el-select>-->
                         <!--</el-col>-->
-                        <el-col :span="4">
+                        <el-col :span="2">
                             <el-button size="" type="primary" @click="query" plain>查询</el-button>
                         </el-col>
                     </el-row>
@@ -65,7 +65,7 @@
                         prop="Sn"
                         label="序列号"
                         align="InVenueNo"
-                         width="80px"
+                         width="100px"
                         sortable
                 >
                 </el-table-column>
@@ -978,4 +978,8 @@
     /deep/ .el-dialog .el-select {
         width: 100%;
     }
+    .panel_control /deep/ .el-input {
+    width: 90px;
+    float: left;
+}
 </style>