Browse Source

修改menu

master
liupeng 7 months ago
parent
commit
fb1e608a44
  1. 20
      src/views/ModelMain.less
  2. 45
      src/views/ModelMain.vue

20
src/views/ModelMain.less

@ -15,6 +15,10 @@
align-items: center; align-items: center;
margin: 0 20px; margin: 0 20px;
} }
.app-header-menu-wrap{
flex:1;
display: flex;
flex-direction: row;
.app-header-menu{ .app-header-menu{
height: 100%; height: 100%;
padding:0 16px; padding:0 16px;
@ -31,22 +35,6 @@
color: #fff color: #fff
} }
} }
.el-menu-item{
line-height: 50px;
}
.el-menu--horizontal{
height: 50px;
flex:1;
border: none;
&>.el-menu-item{
height: 50px;
}
&>.el-sub-menu {
height: 50px;
.el-sub-menu__title{
height: 50px;
}
}
} }
.user{ .user{
display: flex; display: flex;

45
src/views/ModelMain.vue

@ -2,53 +2,12 @@
<div class="app-wrap"> <div class="app-wrap">
<div class="app-header"> <div class="app-header">
<div class="logo"><img :src="Logo" alt="" style="height: 30px;width: 169px"></div> <div class="logo"><img :src="Logo" alt="" style="height: 30px;width: 169px"></div>
<div class="app-header-menu-wrap">
<div class="app-header-menu" v-for="rootMenu in calcRootMenu" @click="clickRootMenu" <div class="app-header-menu" v-for="rootMenu in calcRootMenu" @click="clickRootMenu"
v-menus:left="rootMenu.children" v-menus:left="rootMenu.children"
>{{ rootMenu.label }} <component :is="renderIcon('element ArrowDown')"></component> >{{ rootMenu.label }} <component :is="renderIcon('element ArrowDown')"></component>
</div> </div>
</div>
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect">
<el-sub-menu index="1">
<template #title>文件模型</template>
<el-menu-item index="1-1">新建模型</el-menu-item>
<el-menu-item index="1-2">保存</el-menu-item>
<el-divider></el-divider>
<el-menu-item index="1-3">导出</el-menu-item>
<el-menu-item index="1-4">导入</el-menu-item>
<el-divider></el-divider>
<el-menu-item index="1-5">退出</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>编辑</template>
<el-menu-item index="2-1">查找</el-menu-item>
<el-divider></el-divider>
<el-menu-item index="2-2">复制</el-menu-item>
<el-menu-item index="2-3">粘贴</el-menu-item>
<el-menu-item index="2-4">删除</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>仿真</template>
<el-menu-item index="3-1">开始仿真</el-menu-item>
<el-divider></el-divider>
<el-menu-item index="3-2">停止仿真</el-menu-item>
<el-divider></el-divider>
<el-menu-item index="3-3">暂停</el-menu-item>
<el-menu-item index="3-4">继续</el-menu-item>
<el-menu-item index="3-5">仿真速度X1</el-menu-item>
<el-menu-item index="3-6">仿真速度X2</el-menu-item>
<el-menu-item index="3-7">仿真速度X3</el-menu-item>
<el-menu-item index="3-8">仿真速度X4</el-menu-item>
<el-menu-item index="3-9">仿真速度X5</el-menu-item>
</el-sub-menu>
<el-menu-item index="4">基础数据</el-menu-item>
<el-menu-item index="5">小工具</el-menu-item>
</el-menu>
<div class="user"> <div class="user">
<span> <span>
<component :is="renderIcon('element User')"></component> <component :is="renderIcon('element User')"></component>

Loading…
Cancel
Save