| | |
| | | <template> |
| | | <el-container style="flex: 1;"> |
| | | <div style="width: 200px;background-color: #222f3e" :style="{width: isCollapse?'70px':'250px'}"> |
| | | <el-container style="flex: 1;height: 100%;"> |
| | | <div style="width: 200px;background-color: #222f3e;height: 100%;" :style="{ width: isCollapse ? '70px' : '250px' }"> |
| | | <el-aside :width="isCollapse?'70px':'250px'"> |
| | | <el-col :gutter="20"> |
| | | <el-row :span="4"> |
| | |
| | | </div> |
| | | </el-row> |
| | | <el-row :span="20"> |
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" |
| | | background-color="#222f3e" text-color="#fff" active-text-color="#ffd04b" |
| | | :collapse="isCollapse" :unique-opened="true" |
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#222f3e" |
| | | text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :unique-opened="true" |
| | | :collapse-transition="false" :router="true"> |
| | | <!-- <el-menu-item index="/" @click="goToHome"> |
| | | <template slot="title"> |
| | |
| | | </template> |
| | | <!--二级菜单--> |
| | | |
| | | <el-menu-item :index="'/'+menu.router" |
| | | v-for="menu in item.menuLists" :key="menu.id" |
| | | <el-menu-item :index="'/' + menu.router" v-for="menu in item.menuLists" :key="menu.id" |
| | | @click="addTag(menu.router)"> |
| | | <template slot="title"> |
| | | <!--图标--> |
| | |
| | | <el-container> |
| | | <el-header class="header-container"> |
| | | |
| | | <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal" |
| | | background-color="#576574" text-color="#fff" active-text-color="#ffd04b"> |
| | | <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal" background-color="#576574" |
| | | text-color="#fff" active-text-color="#ffd04b"> |
| | | <div class="header-left"> |
| | | <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px;"></el-button> |
| | | <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" |
| | | style="height:30px;"></el-button> |
| | | </div> |
| | | <div class="tagContainer" style="display: flex;"> |
| | | <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag> |
| | | <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" |
| | | @switchTag="switchTag(index)"></tag> |
| | | </div> |
| | | <template> |
| | | <el-submenu index="1" class="custom-submenu" > |
| | | <template slot="title"> |
| | | <el-avatar src="../assets/emi.png" style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar> |
| | | <el-avatar src="../assets/emi.png" |
| | | style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar> |
| | | </template> |
| | | <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item> |
| | | <el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item> |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | .el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | height: 45px !important; |
| | | } |
| | | |
| | | .custom-submenu { |
| | | |
| | | |
| | |
| | | |
| | | .header-container { |
| | | |
| | | height: 30px !important; /* 设置较小的高度 */ |
| | | height: 30px !important; |
| | | /* 设置较小的高度 */ |
| | | } |
| | | |
| | | |
| | |
| | | width:30px; |
| | | |
| | | } |
| | | |
| | | .el-aside { |
| | | height: 100vh; |
| | | background-color: #222f3e; |