md-iview 1.0.12

package/src/components/md-shrinkable-menu/demo/data/pageTagsList.js

@@ -0,0 +1,153 @@
+export default [{
+  "path": "home",
+  "title": {
+    "i18n": "home"
+  },
+  "name": "home_index",
+  "argu": {},
+  "query": {}
+}, {
+  "path": "index",
+  "title": "错误页面",
+  "name": "errorpage_index",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "mutative-router",
+  "title": "动态路由",
+  "name": "mutative-router",
+  "icon": "link",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "order/:order_id",
+  "title": "订单详情",
+  "name": "order-info",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {
+    "order_id": "1000002"
+  },
+  "query": {}
+}, {
+  "path": "argument-page",
+  "title": "带参页面",
+  "name": "argument-page",
+  "icon": "android-send",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "shopping",
+  "title": "购物详情",
+  "name": "shopping",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {
+    "shopping_id": 100001
+  }
+}, {
+  "path": "index",
+  "title": "权限测试页",
+  "name": "accesstest_index",
+  "access": 0,
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "index",
+  "title": "权限管理",
+  "name": "access_index",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "exportableTable",
+  "title": "表格导出数据",
+  "name": "exportable-table",
+  "icon": "code-download",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "draggable-list",
+  "icon": "arrow-move",
+  "name": "draggable-list",
+  "title": "可拖拽列表",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "searchableTable",
+  "title": "可搜索表格",
+  "name": "searchable-table",
+  "icon": "search",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}, {
+  "path": "index",
+  "title": {
+    "i18n": "international"
+  },
+  "name": "international_index",
+  "component": {
+    "_custom": {
+      "type": "function",
+      "display": "<span>ƒ</span> component()"
+    }
+  },
+  "argu": {},
+  "query": {}
+}]

package/src/components/md-shrinkable-menu/demo/index.less

@@ -0,0 +1,297 @@
+.lock-screen-back{
+    border-radius: 50%;
+    z-index: -1;
+    box-shadow: 0 0 0 0 #667aa6 inset;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    transition: all 3s;
+}
+.main{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .unlock-con{
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 11000;
+    }
+    .sidebar-menu-con{
+        //height: 100%;
+        height: calc(~"100% - 47px");;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 21;
+        transition: width .3s;
+        border-right: 1px solid #d3d3d3;
+        //background-color: #fafafa;
+        .sidebar-menu-shrink {
+          .shrink-btn-item:hover {
+            color: #595959 !important;
+            background-color: #f0f0f0 !important;
+            border-color: transparent !important;
+          }
+        }
+        .menus{
+          padding-bottom: 120px;
+          &:after {
+            content: none;
+          }
+          //background-color: #fafafa;
+          .menus-item {
+            &__submenus {
+              &:first-child {
+                //margin-top: 8px;
+                border-top: 1px solid #e8e8e8;
+              }
+              &:last-child {
+                border-bottom: none !important;
+              }
+              &:hover{
+                background: #f0f0f0;
+              }
+              text-decoration: none;
+              margin: 0 !important;
+              padding: 0 16px!important;
+              height: 40px;
+              line-height: 40px;
+              display: flex;
+              align-items: center;
+              //border-bottom: 1px solid #e8e8e8;
+            }
+            &__icon {
+              margin-right: 17px;
+              color: rgb(89, 89, 89) !important;
+            }
+            text-align: left;
+            align-items: center;
+            //height: 57px;
+            height: auto;
+            line-height: 28px;
+            //border-bottom: 1px solid #e8e8e8;
+            .ivu-menu-submenu-title {
+              line-height: 57px;
+              padding: 0 16px !important;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            }
+            .ivu-menu-submenu-title-icon {
+              //line-height: 28px;
+              line-height: 57px;
+              top: 0 !important;
+            }
+          }
+          background: inherit;
+        }
+        //background: rgb(73, 80, 96);
+        .vue-scroller-bars-content {
+          height: 100% !important;
+          overflow-y: auto;
+
+        }
+    }
+    .menu-right-footer {
+      border-top: 1px solid #d3d3d3;
+      height: 50px;
+      line-height: 49px;
+      cursor: pointer;
+      background-color: #fafafa;
+      text-align: left;
+      position: fixed;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      border-right: 1px solid #d3d3d3;
+    }
+    .layout-text{
+        display: inline-block;
+        white-space:nowrap;
+        position: absolute;
+    }
+    .main-hide-text .layout-text{
+        display: none;
+    }
+    &-content-container{
+        position: relative;
+    }
+    &-header-con{
+        box-sizing: border-box;
+        position: fixed;
+        display: block;
+        padding-left: 200px;
+        width: 100%;
+        height: 100px;
+        z-index: 20;
+        box-shadow: 0 2px 1px 1px rgba(100,100,100,.1);
+        transition: padding .3s;
+    }
+    &-breadcrumb{
+        padding: 8px 15px 0;
+    }
+    &-menu-left{
+        background: #464c5b;
+        height: 100%;
+    }
+    .tags-con{
+        height: 40px;
+        z-index: -1;
+        overflow: hidden;
+        background: #f0f0f0;
+        .tags-outer-scroll-con{
+            position: relative;
+            box-sizing: border-box;
+            padding-right: 120px;
+            width: 100%;
+            height: 100%;
+            .tags-inner-scroll-body{
+                position: absolute;
+                padding: 2px 10px;
+                overflow: visible;
+                white-space: nowrap;
+                transition: left .3s ease;
+            }
+            .close-all-tag-con{
+                position: absolute;
+                right: 0;
+                top: 0;
+                box-sizing: border-box;
+                padding-top: 8px;
+                text-align: center;
+                width: 110px;
+                height: 100%;
+                background: white;
+                box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
+                z-index: 10;
+            }
+        }
+    }
+    &-header{
+        height: 60px;
+        background: #fff;
+        box-shadow: 0 2px 1px 1px rgba(100,100,100,.1);
+        position: relative;
+        z-index: 11;
+        .navicon-con{
+            margin: 6px;
+            display: inline-block;
+        }
+        .header-middle-con{
+            position: absolute;
+            left: 60px;
+            top: 0;
+            right: 340px;
+            bottom: 0;
+            padding: 10px;
+            overflow: hidden;
+        }
+        .header-avator-con{
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 300px;
+            .switch-theme-con{
+                display: inline-block;
+                width: 40px;
+                height: 100%;
+            }
+            .message-con{
+                display: inline-block;
+                width: 30px;
+                padding: 18px 0;
+                text-align: center;
+                cursor: pointer;
+                i{
+                    vertical-align: middle;
+                }
+            }
+            .change-skin{
+                font-size: 14px;
+                font-weight: 500;
+                padding-right: 5px;
+            }
+            .switch-theme{
+                height: 100%;
+            }
+            .user-dropdown{
+                &-menu-con{
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 150px;
+                    height: 100%;
+                    .main-user-name{
+                        display: inline-block;
+                        width: 80px;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        vertical-align: middle;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        text-align: right;
+                    }
+                }
+                &-innercon{
+                    height: 100%;
+                    padding-right: 14px;
+                }
+            }
+            .full-screen-btn-con{
+                display: inline-block;
+                width: 30px;
+                padding: 18px 0;
+                text-align: center;
+                cursor: pointer;
+                i{
+                    vertical-align: middle;
+                }
+            }
+            .lock-screen-btn-con{
+                display: inline-block;
+                width: 30px;
+                padding: 18px 0;
+                text-align: center;
+                cursor: pointer;
+                i{
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+    .single-page-con{
+        position: absolute;
+        top: 100px;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+        background-color: #F0F0F0;
+        z-index: 1;
+        transition: left .3s;
+        .single-page{
+            margin: 10px;
+        }
+    }
+    &-copy{
+        text-align: center;
+        padding: 10px 0 20px;
+        color: #9ea7b4;
+    }
+}
+.taglist-moving-animation-move{
+    transition: transform .3s;
+}
+.logo-con{
+    padding: 8px;
+    text-align: center;
+    background-color: #fafafa;
+    img{
+        height: 44px;
+        width: auto;
+    }
+}