自适应顶部菜单

css/bootstrap/bootstrap-submenu.css

@@ -0,0 +1,29 @@
+.dropdown-submenu.dropright .dropdown-menu {
+  margin-left: 1px;
+}
+
+.dropdown-submenu.dropleft .dropdown-menu {
+  margin-right: 1px;
+}
+
+[x-placement^="bottom-"] .dropdown-submenu .dropdown-menu,
+.navbar .dropdown-submenu .dropdown-menu {
+  bottom: auto;
+  margin-top: calc(-0.5rem - 1px);
+}
+
+[x-placement^="top-"] .dropdown-submenu .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-bottom: calc(-0.5rem - 1px);
+}
+
+.dropdown-submenu.dropright > .dropdown-toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dropdown-submenu.dropright > .dropdown-toggle::after {
+  margin-right: -12px;
+}

css/main.css

@@ -554,4 +554,21 @@ background-color: #f7f7f9;
 }
 .annotate-color-7{
   background: #ECE0F5
+}
+/*宽屏菜单*/
+@media screen and (min-width: 1020px) {
+#fluid-menu{
+}
+#min-menu{
+  display: none
+}
+}
+/*窄屏菜单*/
+@media screen and (max-width: 1020px) {
+#fluid-menu{
+  display: none
+}
+#min-menu{
+
+}
 }

js/bootstrap/bootstrap-submenu.js

@@ -0,0 +1,132 @@
+(function(factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+})(function($) {
+  class DropdownSubmenu {
+    constructor(element) {
+      this.element = element.parentElement;
+      this.menuElement = this.element.querySelector('.dropdown-menu');
+
+      this.init();
+    }
+
+    init() {
+      $(this.element).off('keydown.bs.dropdown.data-api');
+
+      this.menuElement.addEventListener('keydown', this.itemKeydown.bind(this));
+
+      const dropdownItemNodeList = this.menuElement.querySelectorAll('.dropdown-item');
+
+      for (const element of dropdownItemNodeList) {
+        element.addEventListener('keydown', this.handleKeydownDropdownItem.bind(this));
+      }
+
+      $(this.menuElement).on('keydown', '.dropdown-submenu > .dropdown-item', this.handleKeydownSubmenuDropdownItem.bind(this));
+      $(this.menuElement).on('click', '.dropdown-submenu > .dropdown-item', this.handleClickSubmenuDropdownItem.bind(this));
+      $(this.element).on('hidden.bs.dropdown', () => {
+        this.close(this.menuElement);
+      });
+    }
+
+    handleKeydownDropdownItem(event) {
+      // 27: Esc
+      if (event.keyCode !== 27) {
+        return;
+      }
+
+      event.target.closest('.dropdown-menu').previousElementSibling.focus();
+      event.target.closest('.dropdown-menu').classList.remove('show');
+    }
+
+    handleKeydownSubmenuDropdownItem(event) {
+      // 32: Spacebar
+      if (event.keyCode !== 32) {
+        return;
+      }
+
+      // NOTE: Off vertical scrolling
+      event.preventDefault();
+
+      this.toggle(event.target);
+    }
+
+    handleClickSubmenuDropdownItem(event) {
+      event.stopPropagation();
+
+      this.toggle(event.target);
+    }
+
+    itemKeydown(event) {
+      // 38: Arrow up, 40: Arrow down
+      if (![38, 40].includes(event.keyCode)) {
+        return;
+      }
+
+      // NOTE: Off vertical scrolling
+      event.preventDefault();
+
+      event.stopPropagation();
+
+      const itemNodeList = this.element.querySelectorAll('.show > .dropdown-item:not(:disabled):not(.disabled), .show > .dropdown > .dropdown-item');
+
+      let index = Array.from(itemNodeList).findIndex((element) => {
+        return element === event.target;
+      });
+
+      if (event.keyCode === 38 && index !== 0) {
+        index--;
+      } else if (event.keyCode === 40 && index !== itemNodeList.length - 1) {
+        index++;
+      } else {
+        return;
+      }
+
+      itemNodeList[index].focus();
+    }
+
+    toggle(element) {
+      const dropdownElement = element.closest('.dropdown');
+      const parentMenuElement = dropdownElement.closest('.dropdown-menu');
+      const menuElement = dropdownElement.querySelector('.dropdown-menu');
+      const isOpen = menuElement.classList.contains('show');
+
+      this.close(parentMenuElement);
+
+      menuElement.classList.toggle('show', !isOpen);
+    }
+
+    close(menuElement) {
+      const menuNodeList = menuElement.querySelectorAll('.dropdown-menu.show');
+
+      for (const element of menuNodeList) {
+        element.classList.remove('show');
+      }
+    }
+  }
+
+  // For AMD/Node/CommonJS used elements (optional)
+  // http://learn.jquery.com/jquery-ui/environments/amd/
+  $.fn.submenupicker = function(elements) {
+    const $elements = this instanceof $ ? this : $(elements);
+
+    return $elements.each(function() {
+      let data = $.data(this, 'bs.submenu');
+
+      if (!data) {
+        data = new DropdownSubmenu(this);
+
+        $.data(this, 'bs.submenu', data);
+      }
+    });
+  };
+
+  return DropdownSubmenu;
+});

js/global.js

@@ -49,6 +49,7 @@ $("body").click(function(event){
 /*工具提示*/
 $(function () {
   $('[data-toggle="tooltip"]').tooltip();
-  $('[data-toggle="popover"]').popover()
+  $('[data-toggle="popover"]').popover();
+  $('[data-submenu]').submenupicker();
 });
 });

login.html

@@ -16,6 +16,7 @@
             <h1 class="d-flex justify-content-center mb-5">纵横建筑云计价</h1>
             <div class="form-group">
                 <input id="inputEmail" class="form-control " placeholder="通行账号 邮箱/手机" required="" autofocus="">
+                <small id="emailHelp" class="form-text text-danger">您输入的 邮箱/手机 格式不对</small>
             </div>
             <div class="form-group">
                 <input id="inputPassword" class="form-control " placeholder="输入密码" required="" type="password">
@@ -43,6 +44,11 @@
                 </div>
             </div>
             <div class="form-group">
+                <div class="alert alert-danger" role="alert">
+                    <strong>登录失败</strong> 因邮箱未完成认证，账号未激活；去<a href="http://sso.smartcost.com.cn" target="_blank">激活</a>。
+                </div>
+            </div>
+            <div class="form-group">
                 <a href="#phone" class="btn btn-primary btn-block" data-toggle="modal" data-target="#phone">登录</a>
             </div>
             <div class="pt-1 d-flex justify-content-center">

zaojiashu.html

@@ -7,6 +7,7 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>造价书-纵横建筑云计价</title>
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap/bootstrap-submenu.css">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
     <link rel="shortcut icon" href="img/favicon.ico">
@@ -23,37 +24,38 @@
                 <strong>注意！</strong> 这是一条消息通知 <a href="#">链接</a>
             </div>
         </div> -->
-        <nav class="navbar navbar-expand-lg p-0 d-flex">
-            <div class="mx-2"><a href="project-management.html" class="btn btn-sm" data-toggle="tooltip" title="返回"><i class="fa fa-angle-left" style="font-size:24px"></i></a></div>
-            <div class="header-logo">
-                <div class="v-title">重庆2018定额</div>
-                <div class="p-title">纵横建筑云计价(免费版)</div>
-            </div>
-            <div class="navbar-text navbar-crumb px-1">
-                <span data-toggle="tooltip" data-placement="bottom" title="文件夹名称"><i class="fa fa-folder-open-o"></i>...</span>
-                <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="建设项目名称"><i class="fa fa-cubes"></i>...</span>
-                <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="单项工程名称"><i class="fa fa-cube"></i>...</span>
-                <span><i class="fa fa-sticky-note-o"></i></span>
-                <span class="text-truncate"  data-toggle="tooltip" data-placement="bottom" title="乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程">&nbsp;乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程</span>
-                <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 张三 分享（只读，协作）</span>
-                <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 已分享给其他用户</span>
-                <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 已与其他用户协作</span>
-                <!-- <ul class="f-nav list-unstyled">
-                    <li class="d-flex justify-content-between focus"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程1</span><i class="fa fa-caret-right text-muted mt-1"></i>
-                        <ul class="s-nav list-unstyled">
-                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建1</span></a></li>
-                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建2</span></a></li>
-                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建3</span></a></li>
-                        </ul>
-                    </li>
-                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程2</span></li>
-                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程3</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
-                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程4</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
-                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程5</span></li>
-                </ul> -->
-            </div>
-            <div class="ml-auto navbar-text p-0">
-                <ul class="nav navbar-nav">
+        <nav class="navbar p-0">
+                <div class="mx-2"><a href="project-management.html" class="btn btn-sm" data-toggle="tooltip" title="返回"><i class="fa fa-angle-left" style="font-size:24px"></i></a></div>
+                <div class="header-logo">
+                    <div class="v-title">重庆2018定额</div>
+                    <div class="p-title">纵横建筑云计价(免费版)</div>
+                </div>
+                <div class="navbar-text navbar-crumb px-1 mr-auto">
+                    <span data-toggle="tooltip" data-placement="bottom" title="文件夹名称"><i class="fa fa-folder-open-o"></i>...</span>
+                    <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="建设项目名称"><i class="fa fa-cubes"></i>...</span>
+                    <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="单项工程名称"><i class="fa fa-cube"></i>...</span>
+                    <span><i class="fa fa-sticky-note-o"></i></span>
+                    <span class="text-truncate"  data-toggle="tooltip" data-placement="bottom" title="乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程">&nbsp;乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程</span>
+                    <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 张三 分享（只读，协作）</span>
+                    <!-- <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 已分享给其他用户</span> -->
+                    <!-- <span class="alert alert-success py-0 px-2 m-0"><i class="fa fa-share-alt"></i> 已与其他用户协作</span> -->
+                    <!-- <ul class="f-nav list-unstyled">
+                        <li class="d-flex justify-content-between focus"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程1</span><i class="fa fa-caret-right text-muted mt-1"></i>
+                            <ul class="s-nav list-unstyled">
+                                <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建1</span></a></li>
+                                <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建2</span></a></li>
+                                <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建3</span></a></li>
+                            </ul>
+                        </li>
+                        <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程2</span></li>
+                        <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程3</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
+                        <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程4</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
+                        <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程5</span></li>
+                    </ul> -->
+                </div>
+            <div class="navbar-text p-0 navbar-expand-sm">
+                <!--大屏菜单-->
+                <ul class="nav navbar-nav" id="fluid-menu">
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">陈特</a>
                         <div class="dropdown-menu dropdown-menu-right">
@@ -89,6 +91,45 @@
                       </a>
                     </li>
                 </ul>
+                <!--小屏菜单-->
+                <ul class="nav navbar-nav" id="min-menu">
+                    <li class="nav-item dropdown">
+                      <a href="#" class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
+                        <i class="fa fa-bars"></i>
+                      </a>
+                      <div class="dropdown-menu dropdown-menu-right">
+                        <div class="dropdown dropleft dropdown-submenu">
+                          <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">张三</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="user-info.html" target="_blank">账号资料</a>
+                            <a class="dropdown-item" href="user-buy.html" target="_blank">产品升级</a>
+                            <a class="dropdown-item" href="user-set.html" target="_blank">偏好设置</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#" target="_blank">退出登录</a>
+                          </div>
+                        </div>
+                        <div class="dropdown dropleft dropdown-submenu">
+                          <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">工具</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">定额库编辑器</a>
+                            <a class="dropdown-item" href="tools-gongliaoji.html">工料机库编辑器</a>
+                          </div>
+                        </div>
+                        <div class="dropdown dropleft dropdown-submenu">
+                          <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">帮助</button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">帮助</a>
+                            <a class="dropdown-item" href="#">升级说明</a>
+                            <a class="dropdown-item" href="#">重庆市2008定额说明</a>
+                            <a class="dropdown-item" href="#">纵横官网</a>
+                            <a class="dropdown-item" href="#">动画教程</a>
+                            <a class="dropdown-item" href="#">联系客服</a>
+                            <a class="dropdown-item" href="#">关于</a>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                </ul>
             </div>
         </nav>
     </div>
@@ -254,8 +295,8 @@
                     <div class="btn-group ml-2">
                         <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">更多</a>
                             <div class="dropdown-menu dropright">
-                                    <a href="" data-toggle="dropdown" class="dropdown-item dropdown-toggle" ><i class="fa fa-list-ol"></i> 显示至...</a>
-                                  <span class="dropdown-menu">
+                                <a href="" data-toggle="dropdown" class="dropdown-item dropdown-toggle" ><i class="fa fa-list-ol"></i> 显示至...</a>
+                                <span class="dropdown-menu">
                                     <a class="dropdown-item" href="#">大项费用</a>
                                     <a class="dropdown-item" href="#">一级分部</a>
                                     <a class="dropdown-item" href="#">二级分部</a>
@@ -2505,6 +2546,7 @@
     <script src="js/jquery/jquery-3.2.1.min.js"></script>
     <script src="js/popper/popper.min.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
+    <script src="js/bootstrap/bootstrap-submenu.js"></script>
     <script src="js/global.js"></script>
 </body>
 <script type="text/javascript">