|
|
@@ -1,185 +1,268 @@
|
|
|
<template>
|
|
|
- <div class="IndexContainer">
|
|
|
- <el-container>
|
|
|
- <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
|
|
|
- <Navside :isCollapse="isCollapse"></Navside>
|
|
|
- </el-aside>
|
|
|
- <el-container>
|
|
|
- <el-header>
|
|
|
- <Headside @lefthide="left_hide"></Headside>
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
- <keep-alive>
|
|
|
- <router-view></router-view>
|
|
|
- </keep-alive>
|
|
|
- </el-main>
|
|
|
- <el-footer v-if="true"><p class="footer">济南佰意兴网络科技有限公司提供技术支持</p></el-footer>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
+ <div class="IndexContainer">
|
|
|
+ <el-container>
|
|
|
+ <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
|
|
|
+ <Navside :isCollapse="isCollapse"></Navside>
|
|
|
+ </el-aside>
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <Headside @lefthide="left_hide"></Headside>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <keep-alive>
|
|
|
+ <router-view></router-view>
|
|
|
+ </keep-alive>
|
|
|
+ </el-main>
|
|
|
+ <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
|
|
|
- if (document.body.clientWidth < 1024) {
|
|
|
- this.$message.warning('请横屏使用本系统');
|
|
|
+ // @ 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
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- 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;
|
|
|
-}
|
|
|
-
|
|
|
-.shortElaside {
|
|
|
- width: 140px !important;
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
-}
|
|
|
-
|
|
|
-.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 only screen and (max-width: 1366px) {
|
|
|
- .lognElaside {
|
|
|
- width: 70px!important;
|
|
|
- }
|
|
|
- .logoContainer img {
|
|
|
- display: none!important;
|
|
|
- }
|
|
|
- .el-main {
|
|
|
- padding: 3px!important;
|
|
|
- overflow-y: scroll;
|
|
|
- }
|
|
|
- .el-main > .context {
|
|
|
- /*height: 640px;*/
|
|
|
- /*overflow-y: scroll;*/
|
|
|
- padding: 6px!important;
|
|
|
- }
|
|
|
- .table {
|
|
|
- /*width: 950px;*/
|
|
|
- /*overflow-x: scroll;*/
|
|
|
- }
|
|
|
- .el-dialog {
|
|
|
- max-width: 960px;
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- padding: 3px;
|
|
|
- }
|
|
|
- .el-transfer__buttons {
|
|
|
- width: 60px;
|
|
|
- padding: 3px;
|
|
|
- }
|
|
|
- .el-transfer .el-button + .el-button {
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- .el-dialog {
|
|
|
- padding: 5px;
|
|
|
- padding-bottom: 15px;
|
|
|
- }
|
|
|
-}
|
|
|
+ .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) {
|
|
|
+ .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;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ max-width: 960px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-transfer__buttons {
|
|
|
+ width: 60px;
|
|
|
+ padding: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-transfer .el-button + .el-button {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ padding: 5px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 960px) and (max-width: 1024px) {
|
|
|
+ .shortElaside {
|
|
|
+ /*width: 140px !important;*/
|
|
|
+ width: 60px !important;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-container.is-vertical {
|
|
|
+ left: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-transfer__buttons {
|
|
|
+ width: 20px;
|
|
|
+ padding: 3px;
|
|
|
+ }
|
|
|
+ .el-transfer .el-button + .el-button {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .context {
|
|
|
+ border-radius: 12px;
|
|
|
+ height: 823px !important;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ padding: 5px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ max-width: 960px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
