feat: item

package.json

@@ -28,6 +28,7 @@
     "vue": "^2.6.11",
     "vue-fragment": "^1.6.0",
     "vue-router": "^3.1.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.1.2"
   },
   "devDependencies": {

src/assets/css/app.less

@@ -0,0 +1,93 @@
+.u-icon {
+    width: 36px;
+    height: auto;
+    border-radius: 5px;
+}
+
+.c-main {
+    padding-left: 10px;
+    padding-right: 10px;
+
+    .m-item-container {
+        .u-name.white {
+            color:@color !important;
+            // font-weight: lighter;
+            // text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000,0 -1px #000000;
+        }
+    }
+}
+
+// m-module
+//===============================
+.m-module {
+    .db;
+    .mb(15px);
+    background-color: #fafbfc;
+    border: 1px solid #eeeeee;
+    border-radius: 5px;
+    font-size: 14px;
+
+    &.pd {
+        padding: 10px 15px 12px;
+        box-sizing: border-box;
+    }
+
+    &.no-border {
+        background-color: transparent;
+        border: none;
+
+        .m-head {
+            background-color: transparent;
+        }
+    }
+
+    .m-head {
+        .pr;
+        background-color: #f5f7fa;
+        border-bottom: 1px solid #eeeeee;
+
+        & > .u-title {
+            padding: 10px 0 10px 15px;
+            color: #6c645c;
+            margin: 0;
+            font-weight: 500;
+        }
+
+        & > .u-other {
+            .pa;
+            top: 0;
+            right: 0;
+            margin-right: 15px;
+            font-size: 13px;
+            line-height: 1.1;
+
+            &:hover {
+                color: @pink;
+            }
+
+            .u-more {
+                .db;
+                .mt(12px);
+            }
+        }
+    }
+
+    .m-body {
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: @ipad) {
+    .m-module {
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+.el-tree {
+    background: none;
+}
+
+.el-tree-node__label {
+    width: 100%;
+}

src/assets/css/item/bread.less

@@ -0,0 +1,51 @@
+.m-breadcrumb {
+    .mr(120px);
+    float:none;
+    .u-stat {
+        // .fl;
+        white-space: nowrap;
+        overflow: auto;
+
+        // .x;
+        .fz(14px);
+
+        em {
+            .mr(10px);
+            // .bold;
+            font-style: normal;
+        }
+
+        b {
+            font-style: italic;
+            color: @primary;
+
+            &:after {
+                content: "|";
+                font-weight: 300;
+                color: #999;
+                .ml(10px);
+                font-family: Georgia, "Times New Roman", Times, serif;
+            }
+        }
+
+        span {
+            .mr(10px);
+
+            &:last-child b {
+                &:after {
+                    .none;
+                }
+            }
+        }
+    }
+    overflow-x: auto;
+}
+@media screen and (max-width: @ipad) {
+    .m-breadcrumb {
+        .mr(0);
+        .u-stat {
+            .fz(13px);
+            float: none;
+        }
+    }
+}