angular1.x 类tab切换

设施管理系统界面设计

最新推荐文章于 2021-04-28 11:19:16 发布

weixin_33841503

最新推荐文章于 2021-04-28 11:19:16 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sheen573156440/p/6548078.html

本文介绍了一个设施管理系统的界面设计，包括导航菜单和子页面布局。菜单包含UPS、供配电、空调及微环境等设施管理选项，子页面展示了根据不同设施类型进行的详细布局设计。

-------------------------------此页供自己备份查看---------------------------------

@facility=
　　faci:[
  　　{name:'UPS',value:'ups'}
  　　{name:'供配电',value:'distribution'}
  　　{name:'空调',value:'condition'}
  　　{name: '微环境',value:'environment'}
　　]

1,nav菜单页（部分）
include ./alarm_info.html.jade
.row(style="")
    .col.s12.m4.l3(style="")
        .card
            .card-content
                .row
                    .col.s12
                        h5.card-title
                            span 设施管理
                            i.material-icons.left account_box
                        .collection.with-header
                            .items-list
                                a.collection-item(ng-repeat="item in vm.facility.faci" ng-click="vm.select(item);" ng-class="{active:item==vm.current}") {{item.name}}

    .col.s12.m8.l9(style="")
        include ./facility/facility-ups.html.jade
        include ./facility/facility-distribution.html.jade
        include ./facility/facility-condition.html.jade
        include ./facility/facility-environment.html.jade
2,子页

.row(ng-if='vm.current.value=="environment"')
      .col.s12.l6
         .card
            .card-content
               .row
                  .col.s12
　　　　　　　　　　　　　--------------------。。。

转载于:https://www.cnblogs.com/sheen573156440/p/6548078.html