test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

添加Header菜单修改样式

This commit is contained in:
shiziyuan9527 2020-02-20 17:42:22 +08:00
parent 681db17d4c
commit c2af2179b0
3 changed files with 89 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/performance/App.vue
View File

@ -1,8 +1,15 @@
<template> <template>
<el-col v-if="auth"> <el-col v-if="auth">
<el-row id="header-top" type="flex" justify="space-between" align="middle"> <el-row id="header-top" type="flex" justify="space-between" align="middle">
<a class="logo"/> <el-col :span="4">
<ms-user/> <a class="logo"/>
</el-col>
<el-col :span="10">
<ms-top-menus/>
</el-col>
<el-col :span="10">
<ms-user/>
</el-col>
</el-row> </el-row>
<el-row id="header-bottom" type="flex" justify="space-between" align="middle"> <el-row id="header-bottom" type="flex" justify="space-between" align="middle">
<el-col :span="10"> <el-col :span="10">
@ -26,6 +33,7 @@
<script> <script>
import MsMenus from "./components/HeaderMenus"; import MsMenus from "./components/HeaderMenus";
import MsTopMenus from "./components/HeaderTopMenus";
import MsSetting from "./components/HeaderSetting"; import MsSetting from "./components/HeaderSetting";
import MsView from "./components/router/View"; import MsView from "./components/router/View";
import MsUser from "./components/HeaderUser"; import MsUser from "./components/HeaderUser";
@ -49,7 +57,7 @@
window.location.href = "/login" window.location.href = "/login"
}); });
}, },
components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView}, components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView, MsTopMenus},
methods: { methods: {
} }
} }

39
frontend/src/performance/components/HeaderTopMenus.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<el-menu mode="horizontal" menu-trigger="click"
background-color="rgb(44, 42, 72)"
class="header-top-menus"
text-color="#F2F2F2"
active-text-color="#fff"
:default-active="$route.path"
router>
<el-menu-item index="1">功能测试</el-menu-item>
<el-menu-item index="/createTest" onselectstart="return false">性能测试</el-menu-item>
<el-menu-item index="/setting" onselectstart="return false">系统设置</el-menu-item>
</el-menu>
</template>
<script>
export default {
name: "MsTopMenus"
}
</script>
<style>
.header-top-menus.el-menu--horizontal > li {
height: 40px;
line-height: 40px;
color: inherit;
}
.header-top-menus.el-menu--horizontal > li.el-submenu > * {
height: 39px;
line-height: 40px;
color: inherit;
}
.header-top-menus.el-menu--horizontal > li.is-active {
background: #595591 !important;
}
</style>
<style scoped>
</style>

85
frontend/src/performance/components/HeaderUser.vue
View File

@ -1,46 +1,44 @@
<template> <template>
<div class="ms-org-ws"> <el-row>
<el-row :gutter="10" style="height:200px;"> <el-col :span="10" :offset="8">
<el-col :span="16" :offset="4"> <el-menu :unique-opened="true" mode="horizontal" router
<el-menu :unique-opened="true" mode="horizontal" router menu-trigger="click"
menu-trigger="click" class="header-user-menu"
class="header-user-menu" background-color="rgb(44, 42, 72)"
background-color="rgb(44, 42, 72)" text-color="#fff">
text-color="#fff"> <el-submenu index="1" popper-class="submenu">
<el-submenu index="1" popper-class="submenu"> <template slot="title">组织</template>
<template slot="title">组织</template> <label v-for="(item,index) in organizationList" :key="index">
<label v-for="(item,index) in organizationList" :key="index"> <el-menu-item @click="clickMenu(item)">{{item.name}}
<el-menu-item @click="clickMenu(item)">{{item.name}} <i class="el-icon-check"
<i class="el-icon-check" v-if="item.id === currentUserInfo.lastSourceId || item.id === workspaceParentId"></i>
v-if="item.id === currentUserInfo.lastSourceId || item.id === workspaceParentId"></i> </el-menu-item>
</el-menu-item> </label>
</label> </el-submenu>
</el-submenu> <el-submenu index="2" popper-class="submenu">
<el-submenu index="2" popper-class="submenu"> <template slot="title">工作空间</template>
<template slot="title">工作空间</template> <label v-for="(item,index) in workspaceList" :key="index">
<label v-for="(item,index) in workspaceList" :key="index"> <el-menu-item @click="clickMenu(item)">
<el-menu-item @click="clickMenu(item)"> {{item.name}}
{{item.name}} <i class="el-icon-check" v-if="item.id === currentUserInfo.lastSourceId"></i>
<i class="el-icon-check" v-if="item.id === currentUserInfo.lastSourceId"></i> </el-menu-item>
</el-menu-item> </label>
</label> </el-submenu>
</el-submenu> </el-menu>
</el-menu> </el-col>
</el-col>
<el-col :span="4"> <el-col :span="3" :offset="3">
<el-dropdown size="medium" @command="handleCommand"> <el-dropdown size="medium" @command="handleCommand">
<span class="dropdown-link"> <span class="dropdown-link">
{{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/> {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="personal">个人信息</el-dropdown-item> <el-dropdown-item command="personal">个人信息</el-dropdown-item>
<el-dropdown-item command="logout">退出系统</el-dropdown-item> <el-dropdown-item command="logout">退出系统</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-col> </el-col>
</el-row> </el-row>
</div>
</template> </template>
<script> <script>
@ -139,11 +137,6 @@
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: rgb(245, 245, 245); color: rgb(245, 245, 245);
}
.ms-org-ws {
width: 30%;
height: 40px;
line-height: 40px; line-height: 40px;
} }