增加首页和菜单页

2021/ng-srb/biz/css/base-common.css

@@ -4,6 +4,10 @@ body {
  background-color: #F5F5F5;
}
a {
  color: inherit;
}
/* 覆盖ipuUI样式 */
.ipu-toolbar {
  background-color: #fff;
@@ -27,9 +31,34 @@ body {
  border-radius: .05rem;
}
.ipu-carousel-indicator {
  padding-bottom: .075rem;
}
.ipu-carousel-indicator li {
  width: .065rem;
  height: .065rem;
  background-color: rgba(0, 0, 0, .5);
}
.ipu-carousel-indicator li.ipu-current {
  background-color: rgba(255, 255, 255, .8);
}
.ipu-navbar {
  min-height: .51rem;
  color: #666;
}
.ipu-navbar-item-label {
  font-size: .12rem;
  font-weight: 400;
  line-height: 1;
  margin-top: .04rem;
}
/* 公共样式 */
.common-page-back .common-back-icon{
.common-page-back .common-back-icon {
  display: block;
  width: .21rem;
  background: url("../img/icon/arrow-left.svg") center no-repeat;
@@ -39,6 +68,7 @@ body {
.common-page-content {
  padding-bottom: .1rem;
  position: relative;
}
.common-btn-wrap {
@@ -51,4 +81,105 @@ body {
  background: linear-gradient(90deg, #45BFFF, #1D9AE4);
  font-size: .16rem;
  line-height: .4rem;
}
}
.common-toolbar-color {
  background: linear-gradient(90deg, #45BFFF, #1D9AE4);
}
.common-toolbar-color .ipu-toolbar-title {
  color: #fff;
}
.common-dialog-right {
  width: auto;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.common-dialog-right,
.common-dialog-right.ipu-modal-out {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.common-dialog-left {
  width: auto;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.common-dialog-left,
.common-dialog-left.ipu-modal-out {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.common-dialog-top {
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  overflow: auto;
}
.common-dialog-top,
.common-dialog-top.ipu-modal-out {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.common-dialog-bottom {
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  overflow: auto;
}
.common-dialog-bottom,
.common-dialog-bottom.ipu-modal-out {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.iconfont-blue:not(.iconfont-bg) {
  color: #4CBCEA !important;
}
.iconfont-orange:not(.iconfont-bg) {
  color: #FFCE5A !important;
}
.iconfont-red:not(.iconfont-bg) {
  color: #FD926C !important;
}
.iconfont-green:not(.iconfont-bg) {
  color: #3AC87D !important;
}
.iconfont-blue.iconfont-bg {
  background: linear-gradient(135deg, #4CBCEA, #4C83EA) !important;
}
.iconfont-orange.iconfont-bg {
  background: linear-gradient(135deg, #FFCE5A, #EDBD4B) !important;
}
.iconfont-red.iconfont-bg {
  background: linear-gradient(135deg, #FD926C, #FD6D6C) !important;
}
.iconfont-green.iconfont-bg {
  background: linear-gradient(135deg, #3AC87D, #57CE73) !important;
}

2021/ng-srb/biz/css/base-ghh.css

@@ -0,0 +1,374 @@
/* 首页 */
.index-carousel img {
  display: block;
  width: 100%;
  height: 2rem;
}
.index-head-block {
  width: 100%;
  position: absolute;
  z-index: 11;
  color: #fff;
  line-height: 1;
  padding: .065rem .1rem;
}
.index-user-avater {
  display: block;
  width: .3rem;
  height: .3rem;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  margin-right: .065rem;
}
.index-user-role {
  padding-top: .015rem;
  font-size: .1rem;
  font-weight: bold;
  line-height: 1;
}
.index-user-name {
  margin-top: .04rem;
  font-size: .12rem;
  font-weight: 400;
  line-height: 1;
}
.to-edit-menu {
  padding-right: .025rem;
}
.to-edit-menu .icon {
  width: .16rem;
  height: .16rem;
  background: url("../img/icon/menu-eidt.png") center no-repeat;
  background-size: .16rem auto;
}
.to-edit-menu .txt {
  font-size: .1rem;
  margin-top: .02rem;
}
.index-menu-block {
  background-color: #fff;
}
.index-menu-l {
  overflow: auto;
  padding: .16rem 0;
  margin: 0 1.3333%;
}
.index-menu-l.ipu-fn-bd-b:after {
  background-color: #ebebeb;
}
.index-menu-l .menu-item {
  float: left;
  margin: 0 2.91%;
  width: 19.178%;
}
.index-menu-l .menu-item-name {
  text-align: center;
  font-size: .13rem;
  font-weight: bold;
  color: #333333;
  line-height: 1;
}
.index-menu-l .menu-item-icon {
  display: block;
  border-radius: .075rem;
  height: .45rem;
  width: .45rem;
  margin: 0 auto .08rem;
  color: #fff;
  text-align: center;
  line-height: .45rem;
  font-size: .3rem;
}
.index-menu-s {
  margin: 0 .06rem;
  overflow: auto;
}
.index-menu-s .menu-item {
  padding: .1rem 0 .175rem;
  width: 20%;
  float: left;
  text-align: center;
}
.index-menu-s .menu-item-icon {
  font-size: .35rem;
  line-height: 1;
}
.index-menu-s .menu-item-name {
  margin-top: .02rem;
  font-size: .12rem;
  font-weight: 500;
  color: #585858;
}
.index-notice-block {
  padding: 0 .18rem 0 .18rem;
  margin-top: .1rem;
  background-color: #fff;
}
.index-notice-search {
  background: #F5F5F5;
  border: 1px solid #EBEBEB;
  border-radius: .16rem;
  margin-bottom: .175rem;
}
.index-notice-search .search-icon {
  width: .16rem;
  height: .16rem;
  background-color: #eee;
  margin-left: .095rem;
  margin-right: -.03rem;
}
.index-notice-search .search-input {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  font-size: .12rem;
  font-weight: 500;
  color: #666;
  line-height: .2rem;
  padding: .05rem .1rem;
  border-right: .21rem;
}
.index-notice-search .search-input::placeholder {
  color: #999;
}
.index-notice-list {
  overflow: hidden;
}
.index-notice-list li {
  position: relative;
  padding-left: .12rem;
  overflow: hidden;
  margin-bottom: .2rem;
}
.index-notice-list li:before {
  content: "";
  left: 0;
  position: absolute;
  width: .05rem;
  top: 0;
  bottom: 0;
  background-color: #1D9AE4;
  border-radius: .025rem;
}
.index-notice-list .notice-title {
  font-size: .13rem;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}
.index-notice-list .notice-tag-item {
  font-size: .12rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: .135rem;
  border-radius: .025rem;
  background-color: #919191;
  padding: 0 .025rem;
}
.index-notice-list .notice-date {
  font-size: .12rem;
  font-weight: 500;
  color: #aaa;
}
.index-notice-list .notice-info {
  margin-top: .065rem;
}
.index-notice-title {
  font-size: .15rem;
  font-weight: bold;
  color: #333333;
  padding: .15rem 0;
}
.to-notice-list {
  width: .14rem;
  height: .14rem;
  background-color: #eee;
}
.ipu-navbar-item .nav-icon {
  display: block;
  margin: 0 auto;
  width: .2rem;
  height: .2rem;
  background: url("../img/icon/nav-index.png") center no-repeat;
  background-size: .2rem auto;
}
.ipu-navbar-item.ipu-current .nav-icon {
  background-image: url("../img/icon/nav-index-active.png");
}
.navbar-item-menu .nav-icon {
  background-image: url("../img/icon/nav-menu.png");
}
.navbar-item-menu.ipu-current .nav-icon {
  background-image: url("../img/icon/nav-menu-active.png");
}
.navbar-item-my .nav-icon {
  background-image: url("../img/icon/nav-my.png");
}
.navbar-item-my.ipu-current .nav-icon {
  background-image: url("../img/icon/nav-my-active.png");
}
.category-menu-head {
  font-size: .15rem;
  font-weight: bold;
  color: #222222;
  line-height: 1;
  padding: 0 .15rem .08rem;
}
.category-menu-list {
  overflow: auto;
}
.category-menu-list .menu-item {
  position: relative;
  padding: .1rem;
  float: left;
  width: 25%;
}
.category-menu-list .menu-item-name {
  margin-top: .08rem;
  text-align: center;
  font-size: .12rem;
  font-weight: 400;
  color: #222222;
  line-height: 1;
}
.category-menu-list .menu-item-icon {
  display: block;
  font-size: .28rem;
  height: .32rem;
  overflow: hidden;
  width: .32rem;
  margin: 0 auto;
  line-height: .33rem;
}
.category-menu-block {
  margin-top: .24rem;
}
.menu-edit-dialog {
  height: 66%;
  background-color: #fff;
  border-radius: .15rem .15rem 0 0;
  border: 1px solid #ccc;
}
.menu-edit-dialog .dialog-head {
  text-align: center;
  position: relative;
  font-size: .15rem;
  font-weight: 500;
  color: #000000;
  line-height: .42rem;
}
.menu-edit-dialog .dialog-head .dialog-close {
  position: absolute;
  right: 0;
  top: 0;
  width: .4rem;
  height: .4rem;
  background-color: #aaa;
}
.category-menu-list .menu-item.slt::before {
  content: "";
  position: absolute;
  width: .24rem;
  height: .24rem;
  background: url("../img/icon/menu-slt.png") center center no-repeat;
  background-size: .24rem auto;
  left: 50%;
  top: 38%;
}
.state-menu-edit .index-menu-s .menu-item-icon {
  position: relative;
}
.state-menu-edit .index-menu-s .menu-item-icon:after {
  content: "编辑";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: .12rem;
  font-weight: 500;
  line-height: .35rem;
  text-align: center;
}
.state-menu-edit .to-edit-menu-edit,
.to-edit-menu-save {
  display: none;
}
.state-menu-edit .to-edit-menu-save {
  display: block;
}
.index-menu-l-img .menu-item-icon {
  background: url("../img/icon/menu-crm.png") center center no-repeat;
  background-size: 100% auto;
}
.index-menu-l-img .menu-item-xg .menu-item-icon {
  background-image: url("../img/icon/menu-xg.png");
}
.index-menu-l-img .menu-item-esop .menu-item-icon {
  background-image: url("../img/icon/menu-esop.png");
}
.index-menu-l-img .menu-item-zsyyt .menu-item-icon {
  background-image: url("../img/icon/menu-zsyyt.png");
}

2021/ng-srb/biz/js/pages/index.js

@@ -7,13 +7,78 @@ require(["ipuUI", "jquery"], function (ipuUI, $) {
      }
    });
   /* tool.confirm({
      title: "是否确认操作？", okClick: function () {
        console.log('ok');
      }, cancelClick: function () {
        console.log('cancel');
    var carousel = ipuUI.hammerCarousel(".index-carousel", { // 第一页设置幻灯片
      indicator: true,  //是否生成指示器(右下角的小圆点)
      indicatorPosition: 'center',
      loop: true, /* 循环时，会复制第一张图片 */
      callBack: function (nowIndex)  //每次执行动作的回调。返回的是当前运行到第几张
      {
        console.log("nowIndxe:【carousel " + nowIndex + "】");
      },
      clickBack: function (i) {
        console.log('click' + i);
      }
    });*/
    });
    // 弹出菜单编辑框
    function openMenuEditDialog() {
      var dialogSlt = $(".menu-edit-dialog");
      var dialog = $(dialogSlt).show();
      ipuUI.openModal(dialog);
      function closeDialog() {
        $(".common-dialog-close", dialog).unbind("click", closeDialog);  // 移除事件绑定
        $(".ipu-popup-overlay").unbind("click", closeDialog);  // 移除事件绑定
        ipuUI.closeModal(dialog);
      }
      // 遮掩层点击事件
      $(".ipu-popup-overlay").bind("click", closeDialog);   // 增加关闭绑定
      // 关闭按钮绑定点击事件
      $(".dialog-close", dialog).bind("click", closeDialog);   // 增加关闭绑定
    }
    // 弹出首页菜单编辑
    $(".to-edit-menu-edit").click(function () {
      $("body").addClass("state-menu-edit");
    });
    // 保存菜单修改
    $(".to-edit-menu-save").click(function () {
      $("body").removeClass("state-menu-edit");
    });
    // 点击确认按钮 ，确认更换的菜单业务
    $(".menu-slt-confirm").click(function () {
      $(".menu-edit-dialog .dialog-close").click();  // 触发关闭图标点击事件
      ipuUI.toast('选中了菜单:' + $(".menu-edit-dialog .menu-item.slt .menu-item-name").text());
    });
    // 切换选择业务菜单选中效果
    $(".menu-edit-dialog").on("click", ".menu-item", function () {
      $(".menu-edit-dialog .menu-item.slt").removeClass("slt");
      $(this).addClass("slt");
    });
    // 点菜单，修改或者进入菜单页
    $(".index-menu-s").on("click", ".menu-item", function () {
      if ($("body").hasClass("state-menu-edit")) {
        openMenuEditDialog();
      } else {
        ipuUI.toast("进入菜单");
      }
    });
    /* tool.confirm({
       title: "是否确认操作？", okClick: function () {
         console.log('ok');
       }, cancelClick: function () {
         console.log('cancel');
       }
     });*/
  });
});

2021/ng-srb/index.html

@@ -6,17 +6,12 @@
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/lib/iconfont/iconfont.css.css"><!-- 菜单使用字体图标 -->
  <link rel="stylesheet" type="text/css" href="biz/lib/iconfont/iconfont.css"><!-- 菜单使用字体图标 -->
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/index.js"></script>
  <script src="biz/js/page/index-todo.js"></script>
  <script src="biz/js/page/index-schedule.js"></script>
  <script src="biz/js/page/index-group.js"></script>
  <script src="biz/js/page/work.js"></script>
  <script src="biz/js/page/index-my.js"></script>
  <script src="biz/js/pages/index.js"></script>
</head>
<body class="pages-index">
@@ -28,144 +23,344 @@
          <!-- 首页 -->
          <li class="pages-main">
            <div class="ipu-flex-content">
            <div class="common-page-content">
            </div>
          </li>
              <div class="index-head-block">
                <div class="index-user ipu-flex-middle ipu-flex-justify-space">
                  <div class="index-user-warp ipu-flex">
                    <img src="temp/01.jpg" alt="" class="index-user-avater">
                    <div class="index-user-content">
                      <div class="index-user-role">营业员</div>
                      <div class="index-user-name">刘鑫鑫(122345)</div>
                    </div>
                  </div>
          <!-- 菜单    -->
          <li class="pages-menu">
            <div class="ipu-flex-row ipu-flex-vertical">
              <div class="ipu-flex-col">
                <div class="pages-contact-title">
                  工作台
                  <div class="to-edit-menu to-edit-menu-save">
                    <div class="icon"></div>
                    <div class="txt">保存</div>
                  </div>
                  <div class="to-edit-menu to-edit-menu-edit">
                    <div class="icon"></div>
                    <div class="txt">编辑</div>
                  </div>
                </div>
              </div>
              <div class="ipu-flex-col ipu-flex-col-auto">
                <div class="page-content">
                  <div class="common-search">
                    <div class="ipu-flex common-search-content">
                      <div class="ipu-flex-center-middle  common-search-tip">
                        <i class="common-search-icon ri-search-2-line"></i>
                        <span class="common-search-tip-msg">搜索</span>
                      </div>
                      <div class="ipu-flex-grow-1 common-search-wrap">
                        <input class="common-search-input" placeholder="">
                      </div>
                      <i class="ipu-flex-grow-0 common-search-input-clear ri-close-circle-fill"></i>
                    </div>
                  </div>
              <div class="ipu-carousel index-carousel">
                <ul class="ipu-carousel-wrapper">
                  <li class=""><img src="temp/01.jpg" alt=""></li>
                  <li class=""><img src="temp/02.jpg" alt=""></li>
                  <li class=""><img src="temp/03.jpg" alt=""></li>
                </ul>
              </div>
                  <div class="menu-catalogs group-menus-list">
              <div class="index-menu-block">
                    <div class="menu-catalog menu-catalog-common">
                      <div class="menu-catalog-head">
                        常用应用
                      </div>
                      <div class="menu-catalog-body">
                <!-- 大菜单 字体图标方式
                <ul class="index-menu-l ipu-fn-bd-b">
                  <li class="menu-item menu-item-crm">
                    <icon class="menu-item-icon iconfont-bg iconfont-material icon-googlepages iconfont-blue"></icon>
                    <div class="ipu-fn-row menu-item-name">CRM</div>
                  </li>
                  <li class="menu-item menu-item-xg">
                    <icon class="menu-item-icon iconfont-bg iconfont-material icon-googlepages iconfont-green"></icon>
                    <div class="ipu-fn-row menu-item-name">晓格</div>
                  </li>
                  <li class="menu-item menu-item-esop">
                    <icon class="menu-item-icon iconfont-bg iconfont-material icon-googlepages iconfont-red"></icon>
                    <div class="ipu-fn-row menu-item-name">ESOP</div>
                  </li>
                  <li class="menu-item menu-item-zsyyt">
                    <icon class="menu-item-icon iconfont-bg iconfont-material icon-googlepages iconfont-orange"></icon>
                    <div class="ipu-fn-row menu-item-name">掌上营业厅</div>
                  </li>
                </ul> -->
                <!-- 大菜单图片方式 -->
                <ul class="index-menu-l index-menu-l-img ipu-fn-bd-b">
                  <li class="menu-item menu-item-crm">
                    <icon class="menu-item-icon"></icon>
                    <div class="ipu-fn-row menu-item-name">CRM</div>
                  </li>
                  <li class="menu-item menu-item-xg">
                    <icon class="menu-item-icon"></icon>
                    <div class="ipu-fn-row menu-item-name">晓格</div>
                  </li>
                  <li class="menu-item menu-item-esop">
                    <icon class="menu-item-icon"></icon>
                    <div class="ipu-fn-row menu-item-name">ESOP</div>
                  </li>
                  <li class="menu-item menu-item-zsyyt">
                    <icon class="menu-item-icon"></icon>
                    <div class="ipu-fn-row menu-item-name">掌上营业厅</div>
                  </li>
                </ul>
                        <a href="contact.html" class="catalog-menu">
                          <i class="catalog-menu-icon iconfont-red ri-booklet-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">
                          通讯录
                        </span>
                        </a>
                      </div>
                <ul class="index-menu-s"><!-- 小菜单 -->
                  <li class="menu-item">
                    <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                    <div class="ipu-fn-row menu-item-name">
                      业务菜单
                    </div>
                    <div class="menu-catalog menu-catalog-biz">
                      <div class="menu-catalog-head">
                        业务应用
                      </div>
                      <div class="menu-catalog-body">
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon ri-restaurant-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">餐饮管理</span>
                        </a>
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon iconfont-yellow ri-hotel-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">住宿管理</span>
                        </a>
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon iconfont-red ri-bus-2-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">通勤管理</span>
                        </a>
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon iconfont-green  ri-hospital-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">医疗健康</span>
                        </a>
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon ri-hand-heart-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">惠民服务</span>
                        </a>
                        <a href="javascript:;" class="catalog-menu">
                          <i class="catalog-menu-icon iconfont-red ri-brush-2-fill"></i>
                          <span class="catalog-menu-name ipu-fn-row">美化管理</span>
                        </a>
                      </div>
                  </li>
                  <li class="menu-item">
                    <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                    <div class="ipu-fn-row menu-item-name">
                      业务菜单
                    </div>
                  </li>
                  <li class="menu-item">
                    <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                    <div class="ipu-fn-row menu-item-name">
                      业务菜单
                    </div>
                  </li>
                  <li class="menu-item">
                    <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
                    <div class="ipu-fn-row menu-item-name">
                      业务菜单
                    </div>
                  </li>
                  <li class="menu-item">
                    <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
                    <div class="ipu-fn-row menu-item-name">
                      业务菜单
                    </div>
                  </li>
                </ul>
              </div>
              <div class="index-notice-block">
                <div class="index-notice-head">
                  <div class="index-notice-title ipu-flex ipu-flex-justify-space">
                    <a href="javascript;">公告消息</a>
                    <div class="to-notice-list"></div>
                  </div>
                  <div class="index-notice-search ipu-flex-middle">
                    <div class="ipu-flex-grow-0 search-icon"></div>
                    <div class="ipu-flex-grow-1 search-input-wrap">
                      <input type="text" class="search-input" placeholder="请输入搜索消息内容">
                    </div>
                  </div>
                </div>
                <div class="index-notice-body">
                  <ul class="index-notice-list">
                    <li>
                      <a href="javascript:;">
                        <div class="ipu-fn-row notice-title">
                          2021年春节期间系统调整升级公告！
                        </div>
                        <div class="ipu-flex ipu-flex-justify-space">
                          <div class="notice-tags">
                            <span class="notice-tag-item">图片</span>
                            <span class="notice-tag-item">PDF</span>
                            <span class="notice-tag-item">Word</span>
                          </div>
                          <div class="notice-date">
                            时间：2020.02.01
                          </div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                        <div class="ipu-fn-row notice-title">
                          2021年春节期间系统调整升级公告！
                        </div>
                        <div class="ipu-flex ipu-flex-justify-space">
                          <div class="notice-tags">
                            <span class="notice-tag-item">图片</span>
                            <span class="notice-tag-item">PDF</span>
                            <span class="notice-tag-item">Word</span>
                          </div>
                          <div class="notice-date">
                            时间：2020.02.01
                          </div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                        <div class="ipu-fn-row notice-title">
                          2021年春节期间系统调整升级公告！
                        </div>
                        <div class="ipu-flex ipu-flex-justify-space ipu-flex-align-end notice-info">
                          <div class="notice-tags">
                            <span class="notice-tag-item">图片</span>
                            <span class="notice-tag-item">PDF</span>
                            <span class="notice-tag-item">Word</span>
                          </div>
                          <div class="notice-date">
                            时间：2020.02.01
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <!-- 我的-->
          <li class="pages-my">
          <!-- 菜单    -->
          <li class="pages-menu">
            <div class="ipu-flex-row ipu-flex-vertical">
              <div class="ipu-flex-col my-user-detail">
                <div class="to-user-detail">
                  <i class="ri-settings-4-fill"></i>
              <div class="ipu-flex-col">
                <header class="ipu-toolbar common-toolbar-color">
                  <h1 class="ipu-toolbar-title">菜单</h1>
                </header>
              </div>
              <div class="ipu-flex-col-auto common-page-content">
                <div class="category-menu-block category-menu-common">
                  <div class="category-menu-head">
                    常用
                  </div>
                  <div class="category-menu-body">
                    <ul class="category-menu-list">
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <img class="my-user-avater" src="temp/1.png" alt="">
                <div class="my-user-name">张笑笑</div>
                <div class="my-user-mail">luxf@asiainfo.com</div>
                <div class="my-user-dept">UED研发部</div>
              </div>
              <div class="ipu-flex-col ipu-flex-col-auto my-user-list">
                <div class="ipu-flex-content">
                  <div class="ipu-list common-list common-list-noborder">
                    <ul>
                      <li>
                        <a class="ipu-list-item ipu-list-item-link my-link-app-set" href="javascript:;">
                          <div class="ipu-list-item-inner ipu-flex-align-center">
                            <i class="icon-flag ri-settings-4-line"></i>
                            <div class="ipu-list-item-title">应用设置</div>
                          </div>
                        </a>
                <div class="category-menu-block">
                  <div class="category-menu-head">
                    业务类
                  </div>
                  <div class="category-menu-body">
                    <ul class="category-menu-list">
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li>
                        <a class="ipu-list-item ipu-list-item-link my-link-app-about" href="javascript:;">
                          <div class="ipu-list-item-inner ipu-flex-align-center">
                            <i class="icon-flag ri-star-line"></i>
                            <div class="ipu-list-item-title">关于应用</div>
                          </div>
                        </a>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li>
                        <a class="ipu-list-item ipu-list-item-link my-link-feedback" href="javascript:;">
                          <div class="ipu-list-item-inner ipu-flex-align-center">
                            <i class="icon-flag ri-message-2-line"></i>
                            <div class="ipu-list-item-title">应用反馈</div>
                          </div>
                        </a>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="category-menu-block">
                  <div class="category-menu-head">
                    查询类
                  </div>
                  <div class="category-menu-body">
                    <ul class="category-menu-list">
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                      <li class="menu-item">
                        <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
                        <div class="ipu-fn-row menu-item-name">
                          业务菜单
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 我的-->
          <li class="pages-my">
          </li>
        </ul>
      </div>
    </div>
@@ -174,18 +369,18 @@
  <div class="ipu-flex-col">
    <nav class="ipu-navbar">
      <a class="ipu-navbar-item ipu-current" href="javascript:;">
        <i class="ipu-icon ri-home-4-fill"></i>
      <a class="ipu-navbar-item navbar-item-index ipu-current" href="javascript:;">
        <i class="nav-icon"></i>
        <div class="ipu-navbar-item-label">首页</div>
      </a>
      <a class="ipu-navbar-item" href="javascript:;">
        <i class="ipu-icon ri-calendar-fill"></i>
      <a class="ipu-navbar-item navbar-item-menu" href="javascript:;">
        <i class="nav-icon"></i>
        <div class="ipu-navbar-item-label">菜单</div>
      </a>
      <a class="ipu-navbar-item " href="javascript:;">
        <i class="ipu-icon ri-user-fill"></i>
      <a class="ipu-navbar-item navbar-item-my" href="javascript:;">
        <i class="nav-icon"></i>
        <div class="ipu-navbar-item-label">我的</div>
      </a>
@@ -193,55 +388,208 @@
  </div>
</div>
<!-- 首页编辑菜单弹框  -->
<div class="ipu-popup common-dialog-bottom menu-edit-dialog">
  <div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col">
      <div class="dialog-head">
        <i class="dialog-close"></i>
        请选择要替换的业务
      </div>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto dialog-body">
<!-- 日程相关模板开始 -->
<!-- 日界面，周列表 -->
<script type="text/html" id="schedule-week-tpl">
  {{ each data list dataindex }}
  <li>
    <div class="common-flex-tiled table-tr">
      {{ each list item}}
      <div class="table-td {{item.className}}" data-day="{{item.dateStr}}">
        <div class="pu-flex-col ipu-flex-col-auto dialog-boday">
          <div class="num">{{item.num}}</div>
      <div class="category-menu-block">
        <div class="category-menu-head">
          业务类
        </div>
        <div class="category-menu-body">
          <ul class="category-menu-list">
            <li class="menu-item slt">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单业务菜单业务菜单
              </div>
            </li>
          </ul>
        </div>
      </div>
      {{ /each}}
    </div>
  </li>
  {{/each}}
  <!-- 第一个li的数据要复制 -->
  {{ each data list listIndex }}
  {{if listIndex==0}}
  <li>
    <div class="common-flex-tiled table-tr">
      {{ each list item}}
      <div class="table-td {{item.className}}" data-day="{{item.dateStr}}">
        <div class="day">
          <div class="num">{{item.num}}</div>
      <div class="category-menu-block">
        <div class="category-menu-head">
          查询类
        </div>
        <div class="category-menu-body">
          <ul class="category-menu-list">
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="category-menu-block">
        <div class="category-menu-head">
          查询类
        </div>
        <div class="category-menu-body">
          <ul class="category-menu-list">
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="category-menu-block">
        <div class="category-menu-head">
          查询类
        </div>
        <div class="category-menu-body">
          <ul class="category-menu-list">
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-green"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-red"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-blue"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
            <li class="menu-item">
              <icon class="menu-item-icon iconfont-material icon-googlepages iconfont-orange"></icon>
              <div class="ipu-fn-row menu-item-name">
                业务菜单
              </div>
            </li>
          </ul>
        </div>
      </div>
      {{ /each}}
    </div>
  </li>
  {{/if}}
  {{/each}}
</script>
<!-- 日界面，日历列表 -->
<script type="text/html" id="schedule-day-tpl">
  {{ each data list dataindex }}
  <div class="common-flex-tiled table-tr">
    {{ each list item}}
    <div class="table-td {{item.className}} date-{{item.dateStr}}" data-day="{{item.dateStr}}">
      <div class="day ">
        <div class="num">{{item.num}}</div>
    <div class="ipu-flex-col">
      <div class="common-btn-wrap">
        <button class="ipu-btn common-btn menu-slt-confirm">确实</button>
      </div>
    </div>
    {{ /each}}
  </div>
  {{/each}}
</script>
</div>
</body>
</html>