| | |
| | | </script> |
| | | |
| | | <template> |
| | | <div> |
| | | 图形分析 |
| | | <div class="graphic"> |
| | | <div class="graphic-menu"> |
| | | <div class="menu-t">监测点列表</div> |
| | | <el-menu class="el-menu"> |
| | | <el-sub-menu index="1"> |
| | | <template #title> |
| | | <span>可移动监测点</span> |
| | | </template> |
| | | <el-menu-item index="1-1">水电站流量监测点</el-menu-item> |
| | | </el-sub-menu> |
| | | <el-sub-menu index="2"> |
| | | <template #title> |
| | | <span>固定位监测点</span> |
| | | </template> |
| | | <el-menu-item index="2-1">新扎口流量监测点</el-menu-item> |
| | | </el-sub-menu> |
| | | </el-menu> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped lang="scss"> |
| | | .graphic { |
| | | height: 100%; |
| | | display: flex; |
| | | &-menu { |
| | | flex-shrink: 0; |
| | | width: 20%; |
| | | height: 100%; |
| | | padding: 10px 0; |
| | | background: linear-gradient(135deg, #91BDDB 0%, #9EC2DB 99%); |
| | | overflow-y: scroll; |
| | | |
| | | &::-webkit-scrollbar { |
| | | display: none; |
| | | } |
| | | |
| | | .menu-t { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | padding-left: 20px; |
| | | font-size: 26px; |
| | | color: #fff; |
| | | background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | .el-menu { |
| | | background-color: transparent; |
| | | border-right: none; |
| | | |
| | | :deep(.el-menu) { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | :deep(.el-sub-menu__title:hover) { |
| | | background-color: rgba(0, 0, 0, 0.06); |
| | | } |
| | | |
| | | :deep(.el-menu-item.is-active) { |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |