<style> .pintuanMain { height: 100%; display: flex; -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 0; font-size: 14px; } .pintuanMain .mainLeftMenu { position: relative; display: flex; flex-direction: row; color: #fff; } .pintuanMain .leftMenu1 { background: #444444; cursor: pointer; width: 200px; height: 100%; overflow-y: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pintuanMain .asideInner { background: rgba(0, 0, 0, 0.15); padding: 6px 6px; width: 100%; border-radius: 3px; font-weight: bold; } .pintuanMain .F_Logo { height: 60px; background: #464d54; color: #f2f2f2; cursor: pointer; font-weight: bold; text-align: center; padding: 0 15px; display: flex; align-items: center; } .pintuanMain .mainRightContent { width: 100%; height: 100%; background-color: #f3f3f3; } .pintuanMain .mainRightTop { width: 100%; height: 60px; background: #fff; display: flex; justify-content: space-between; color: #909399; } .pintuanMain .mainRightLeft { width: 110px; height: 60px; line-height: 62px; text-align: center; margin-left: 30px; cursor: pointer; position: relative; top: -2px; } .pintuanMain .marinRightList { display: flex; flex-wrap: wrap; align-items: center; width: 300px; float: right; } .pintuanMain .marinRightList ul { display: flex; width: 100%; justify-content: space-around; } .pintuanMain .marinRightList ul li { display: block; list-style-type: none; cursor: pointer; color: #909399; outline: none; border: none; } .pintuanMain .main_routerPage { padding: 20px; overflow-y: scroll; } .pintuanMain .pintuanSetUU{ position: fixed; width: 200px; height: 100%; position: fixed; top: 60px; left: 0; overflow: auto; z-index: 5; background-color: rgb(84, 92, 100); } .pintuanMain .pintuanSetUU .menu_item{ font-size: 14px; color: #303133; padding: 0 20px; cursor: pointer; -webkit-transition: border-color .3s,background-color .3s,color .3s; transition: border-color .3s,background-color .3s,color .3s; box-sizing: border-box; height:56px; line-height: 56px; list-style: none; white-space: nowrap; color:#fff; display: flex; align-items: center; } .pintuanMain .pintuanSetUU .menu_item i { margin-right: 5px; width: 24px; text-align: center; font-size: 18px; vertical-align: middle; color:#909399; } .pintuanMain .menu_item:hover{ background-color: rgba(67,74,80); } .pintuanMain .F_Logo:hover{ background-color: #30353a; color:#fff; } .pintuanMain .Fchecked{ color:rgb(255, 208, 75)!important; } .pintuanMain .Fchecked i{ color:rgb(255, 208, 75)!important; } </style> <template> <div class="pintuanMain"> <div class="mainLeftMenu"> <div class="leftMenu1"> <div class="F_Logo"> <div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}} </div> </div> <ul class="pintuanSetUU"> <li class="menu_item" :class="{'Fchecked':isChecked=='/pintuanSet'}" @click="isChecked='/pintuanSet',CommonJump('pintuanSet')"> <i class="el-icon-menu"></i><span>拼团设置</span> </li> <li class="menu_item" :class="{'Fchecked':isChecked=='/pintuanMsg'}" @click="isChecked='/pintuanMsg',CommonJump('pintuanMsg')"> <i class="el-icon-menu"></i><span>消息通知</span> </li> <li class="menu_item" :class="{'Fchecked':isChecked=='/pintuanList'}" @click="isChecked='/pintuanList',CommonJump('pintuanList')"> <i class="el-icon-menu"></i><span>拼团活动</span> </li> <li class="menu_item" :class="{'Fchecked':isChecked=='/ActiveData'}" @click="isChecked='/ActiveData',CommonJump('ActiveData')"> <i class="el-icon-menu"></i><span>活动数据</span> </li> </ul> </div> </div> <div class="mainRightContent"> <div class="mainRightTop"> <div class="mainRightLeft">微信小程序</div> <div class="marinRightList"> <ul> <li style="display:none">缓存</li> <li style="display:none"> title="教程管理"> <el-dropdown trigger="click"> <span class="el-dropdown-link"> 教程管理<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>操作教程</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </li> <li :title="currentUser.MallName"> <el-dropdown trigger="click"> <span class="el-dropdown-link"> {{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item> <el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item> <el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </li> </ul> </div> </div> <div class="main_routerPage" :style="{height: Height+'px'}"> <router-view /> </div> </div> </div> </template> <script> export default { data() { return { currentUser: {}, isChecked:'', Height:0 }; }, created() { this.currentUser = this.getLocalStorage(); this.isChecked=this.$route.path; if(this.$route.query.FIndex){ this.CommonJump('pintuanSet'); this.isChecked='/pintuanSet' } }, methods: { }, mounted() { this.Height = document.documentElement.clientHeight - 60; //监听浏览器窗口变化 window.onresize = () => { this.Height = document.documentElement.clientHeight - 60 } } }; </script>