Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 937ff08a by liuyong
Options

修改菜单

1 parent 3f76f439
Inline Side-by-side
Showing with 338 additions and 96 deletions
src/views/Main/index.vue
...@@ -28,39 +28,93 @@ ...@@ -28,39 +28,93 @@
<div class="menu_container"> <div class="menu_container">
<el-popover <el-popover
placement="bottom" placement="bottom"
width="600" width="640"
class="menu_item" class="menu_item"
style="margin-right: 50px;cursor: pointer;position: relative;" style="margin-right: 50px;cursor: pointer;position: relative;"
trigger="hover"> trigger="hover">
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构元模型管理</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p @click="jumpPage('架构元素管理')">架构元素管理</p> <span style="margin-left: 5px;">架构元模型管理</span>
<p>架构元素关系管理</p> </div>
<p @click="jumpPage('元模型管理')">元模型管理</p>
<p>架构视图配置</p> <div class="menu_1_item_subtitle" @click="jumpPage('架构元素管理')">
<p>元模型字典管理</p> <img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构元素管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构元素关系管理</span>
</div>
<div class="menu_1_item_subtitle" @click="jumpPage('元模型管理')">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">元模型管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构视图配置</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">元模型字典管理</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构视图管理</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>架构视图管理</p> <span style="margin-left: 5px;">架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构视图管理</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>总体架构资产维护</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p @click="jumpPage('总体架构资产管理')">总体架构资产管理</p> <span style="margin-left: 5px;">总体架构资产维护</span>
<p>企业中台服务清单</p> </div>
<p>现状架构资产管理</p>
<p>架构演进路线资产管理</p> <div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产管理')">
<p>总体架构资产可视化展示</p> <img src="@/assets/三级圆环.png" alt="">
<p>总体架构资产智能搜索</p> <span style="margin-left: 5px;">总体架构资产管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">企业中台服务清单</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">现状架构资产管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构演进路线资产管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">总体架构资产可视化展示</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">总体架构资产智能搜索</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>系统架构资产维护</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>系统架构资产维护</p> <span style="margin-left: 5px;">系统架构资产维护</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">系统架构资产维护</span>
</div>
</div> </div>
</div> </div>
<div slot="reference"> <div slot="reference">
...@@ -73,58 +127,157 @@ ...@@ -73,58 +127,157 @@
</el-popover> </el-popover>
<el-popover <el-popover
placement="bottom" placement="bottom"
width="800" width="960"
class="menu_item" class="menu_item"
style="margin-right: 50px;cursor: pointer;position: relative;" style="margin-right: 50px;cursor: pointer;position: relative;"
trigger="hover"> trigger="hover">
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<p>系统架构图设计</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>业务活动视图设计</p> <span style="margin-left: 5px;">系统架构图设计</span>
<p>应用功能视图设计</p> </div>
<p>概念数据系统流转图设计</p>
<p>关键技术选型视图设计</p> <div class="menu_1_item_subtitle">
<p>网络安全布防视图设计</p> <img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">业务活动视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">应用功能视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">概念数据系统流转图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">关键技术选型视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">网络安全布防视图设计</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>系统架构视图设计（概要设计)</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>业务活动视图设计</p> <span style="margin-left: 5px;">系统架构视图设计（概要设计)</span>
<p>应用功能视图设计</p> </div>
<p>数据模型及流转视图设计</p>
<p>技术相关视图设计</p> <div class="menu_1_item_subtitle">
<p>安全防护视图设计</p> <img src="@/assets/三级圆环.png" alt="">
<p>其他视图设计</p> <span style="margin-left: 5px;">业务活动视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">应用功能视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">数据模型及流转视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">技术相关视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">安全防护视图设计</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">其他视图设计</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>系统架构管控要求</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>评审情况(概要设计)</p> <span style="margin-left: 5px;">系统架构管控要求</span>
<p>系统架构遵从检查</p> </div>
<p>系统架构政策审查</p>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">评审情况(概要设计)</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">系统架构遵从检查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">系统架构政策审查</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>概要设计评审</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>批次计划管理</p> <span style="margin-left: 5px;">概要设计评审</span>
<p>需求管理</p> </div>
<p>概设材料审查</p>
<p>概设材料在线意见编制</p> <div class="menu_1_item_subtitle">
<p>概设关联业务管理</p> <img src="@/assets/三级圆环.png" alt="">
<p>概设评审基础管理</p> <span style="margin-left: 5px;">批次计划管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">需求管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">概设材料审查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">概设材料在线意见编制</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">概设关联业务管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">概设评审基础管理</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构督查</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>收集资料配置</p> <span style="margin-left: 5px;">架构督查</span>
<p>架构督查材料收集</p> </div>
<p>架构督查分析</p>
<p>督查通报管理</p> <div class="menu_1_item_subtitle">
<p>督查问颗整改</p> <img src="@/assets/三级圆环.png" alt="">
<p>遵从检查</p> <span style="margin-left: 5px;">收集资料配置</span>
<p>政策审查</p> </div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构督查材料收集</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构督查分析</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">督查通报管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">督查问颗整改</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">遵从检查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">政策审查</span>
</div>
</div> </div>
</div> </div>
<div slot="reference"> <div slot="reference">
...@@ -137,20 +290,33 @@ ...@@ -137,20 +290,33 @@
</el-popover> </el-popover>
<el-popover <el-popover
placement="bottom" placement="bottom"
width="320" width="420"
class="menu_item" class="menu_item"
style="margin-right: 50px;cursor: pointer;position: relative;" style="margin-right: 50px;cursor: pointer;position: relative;"
trigger="hover"> trigger="hover">
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构遵从符合度检查</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>架构遵从符合度检查</p> <span style="margin-left: 5px;">架构遵从符合度检查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">架构遵从符合度检查</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>技术政策符合度检查</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>技术政策符合度检查</p> <span style="margin-left: 5px;">技术政策符合度检查</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">技术政策符合度检查</span>
</div>
</div> </div>
</div> </div>
<div slot="reference"> <div slot="reference">
...@@ -164,25 +330,46 @@ ...@@ -164,25 +330,46 @@
</el-popover> </el-popover>
<el-popover <el-popover
placement="bottom" placement="bottom"
width="320" width="420"
class="menu_item" class="menu_item"
style="margin-right: 50px;cursor: pointer;position: relative;" style="margin-right: 50px;cursor: pointer;position: relative;"
trigger="hover"> trigger="hover">
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构全景智能大屏</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>电网数字化项目建设分析</p> <span style="margin-left: 5px;">架构全景智能大屏</span>
<p>公司架构蓝图实现情况分析</p> </div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">电网数字化项目建设分析</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">公司架构蓝图实现情况分析</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>智能驾驶舱</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>管理智能驾驶舱</p> <span style="margin-left: 5px;">智能驾驶舱</span>
<p>业务智能驾驶舱</p> </div>
<p>项目智能驾驶舱</p>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">管理智能驾驶舱</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">业务智能驾驶舱</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">项目智能驾驶舱</span>
</div>
</div> </div>
</div> </div>
<div slot="reference"> <div slot="reference">
...@@ -202,29 +389,67 @@ ...@@ -202,29 +389,67 @@
trigger="hover"> trigger="hover">
<div class="menu_1_container"> <div class="menu_1_container">
<div class="menu_1_item"> <div class="menu_1_item">
<p>专家人才库</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>专家人才库管理</p> <span style="margin-left: 5px;">专家人才库</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">专家人才库管理</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>技术政策库</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>技术政策结构化</p> <span style="margin-left: 5px;">技术政策库</span>
<p>技术政策库关联使用</p> </div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">技术政策结构化</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">技术政策库关联使用</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>报告模板库</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>报告模板结构化</p> <span style="margin-left: 5px;">报告模板库</span>
<p>报告模板关联使用</p> </div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">报告模板结构化</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">报告模板关联使用</span>
</div>
</div> </div>
<img class="menu_1_item_line" src="@/assets/分割线.png" alt="" />
<div class="menu_1_item"> <div class="menu_1_item">
<p>典型案例库</p> <div class="menu_1_item_title">
<img src="@/assets/二级切图.png" alt="">
<p>典型案例库管理</p> <span style="margin-left: 5px;">典型案例库</span>
<p>典型案例库关联使用</p> </div>
<p>总体架构资产文档库</p>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">典型案例库管理</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">典型案例库关联使用</span>
</div>
<div class="menu_1_item_subtitle">
<img src="@/assets/三级圆环.png" alt="">
<span style="margin-left: 5px;">总体架构资产文档库</span>
</div>
</div> </div>
</div> </div>
<div slot="reference"> <div slot="reference">
...@@ -403,4 +628,21 @@ ...@@ -403,4 +628,21 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.menu_1_item_line{
width: 1px;
height: 240px;
}
.menu_1_item_title{
color: #666;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.menu_1_item_subtitle{
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!