bri-components 1.4.42 → 1.4.44

package/src/components/other/BriIframe.vue

@@ -94,3 +94,23 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .BriIframe {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        &-iframe {
+            flex: 1;
+            overflow: auto;
+        }
+
+        &-nodata {
+            .dsh-flex-row-center-center();
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>

package/src/components/other/BriLoading.vue

@@ -106,7 +106,66 @@
             }
         },
         created () {},
-        methods: {
-        }
+        methods: {}
     };
 </script>
+
+<style lang="less" scoped>
+    .BriLoading {
+        &-fix {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 8;
+            width: 100%;
+            height: 100%;
+
+            .BriLoading-main {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        &-center {
+            width: 100%;
+            height: 100%;
+
+            @keyframes spin {
+                from {
+                    transform: rotate(0deg);
+                }
+
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .BriLoading-main {
+                width: 100%;
+                height: 100%;
+                .dsh-flex-col();
+
+                &-loading {
+                    border-radius: 50%;
+                    background: conic-gradient(@themeColor 50%, white);
+                    --mask: radial-gradient(closest-side, transparent 70%, black 71%);
+                    -webkit-mask-image: var(--mask);
+                    mask-image: var(--mask);
+                    animation: spin 1s linear infinite;
+                }
+
+                &-loadingText {
+                    margin-top: 8px;
+                    color: @themeColor;
+                }
+
+                &-noText {
+                    color: @textColor;
+                    margin-top: 16px;
+                }
+            }
+        }
+    }
+</style>

package/src/components/other/DshColorPanel.vue

@@ -83,3 +83,46 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshColorPanel {
+        &-rel {
+            cursor: pointer;
+        }
+
+        &-list {
+            font-size: 15px;
+            display: flex;
+            width: 293px;
+            height: 72px;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+
+            &-item {
+                padding: 6px;
+
+                &-big {
+                    width: 15px;
+                    height: 15px;
+                    display: inline-block;
+                    border-radius: 50%;
+                }
+
+                &-small {
+                    width: 12px;
+                    height: 12px;
+                    position: absolute;
+                    display: inline-block;
+                    transform: translate(1.5px,1.5px);
+                    border-radius: 50%;
+
+                    &:hover + span {
+                        border-width: 1px;
+                        border-style: solid;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/src/components/other/DshMenuNav.vue

@@ -102,3 +102,87 @@
         methods: {}
     };
 </script>
+
+<style lang="less">
+    .DshMenuNav {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+
+        &-nav {
+            width: 121px;
+            height: 100%;
+            background-color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: 5px 0px 9px rgba(0, 0, 0, 0.1);
+
+            &-left {
+            }
+            &-right {
+                border-left: 1px solid @borderColor;
+            }
+
+            &-title {
+                padding: 10px 20px;
+                height: 80px;
+                line-height: 60px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .list {
+                flex: 1;
+                min-height: 0px;
+                overflow: auto;
+
+                &-item {
+                    padding: 10px 30px;
+                    background-color: #ffffff;
+                    line-height: 20px;
+                    font-size: @smallTitleSize;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: @themeColor;
+                    }
+                    &-active {
+                        color: @themeColor;
+                        background-color: #F7FCFC;
+                    }
+
+                    &-bottom {
+                        width: 100%;
+                        border-top: 1px solid @borderColor;
+                        position: absolute;
+                        left: 0px;
+                        bottom: 0px;
+                    }
+                    &-beforeText {
+                        display: block;
+                        color: @textColor;
+                        padding: 15px 5px 5px 15px;
+                        margin: -10px -30px 10px -30px;
+                        font-size: 14px;
+                        background: #fff;
+                    }
+                    &-iconClass {
+                        color: @themeColor;
+                        padding-right: 5px;
+                        font-size: 18px;
+                    }
+                }
+            }
+        }
+
+        &-view {
+            flex: 1;
+            min-width: 0px;
+            height: 100%;
+        }
+    }
+</style>

package/src/components/small/BriDrawer.vue

@@ -84,10 +84,6 @@
                 }
             }
         },
-        model: {
-            prop: "value",
-            event: "input"
-        },
         data () {
             return {};
         },
@@ -97,7 +93,7 @@
                     return this.value;
                 },
                 set (bool) {
-                    this.input(bool);
+                    this.$emit("input", bool);
                 }
             },
             selfPropsObj () {
@@ -114,9 +110,6 @@
         },
         created () {},
         methods: {
-            input (bool) {
-                this.$emit("input", bool);
-            },
             clickClose () {
                 this.showModal = false;
             },
@@ -132,3 +125,45 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriDrawer {
+        &-header {
+            color: @textColor;
+            font-weight: 500;
+            font-size: @smallTitleSize;
+            line-height: @smallTitleHeight;
+        }
+
+        &-close {
+            color: @contentColor;
+        }
+
+        &-main {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-body {
+            flex: 1;
+            overflow: auto;
+        }
+
+        &-footer {
+            border-top: 1px solid @borderColor;
+            padding: 11px 16px 12px;
+        }
+
+        .ivu-drawer-header {
+            padding: 16px 16px 15px;
+        }
+        .ivu-drawer-body {
+            padding: 0px;
+        }
+        .ivu-drawer-close {
+            top: 18px;
+            right: 18px
+        }
+    }
+</style>

package/src/components/small/BriTooltip.vue

@@ -20,7 +20,7 @@
     export default {
         name: "BriTooltip",
         props: {
-            content: String,
+            content: [String, Number],
             placement: {
                 type: String,
                 default: "bottom"

package/src/components/small/DshBtnModal.vue

@@ -60,3 +60,9 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .DshBtnModal {
+
+    }
+</style>

package/src/components/small/DshButtons.vue

@@ -174,3 +174,37 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .DshButtons {
+        &-flex {
+            width: 100%;
+            height: 100%;
+            .dsh-flex-row-between-center();
+
+            // 更多
+            .DshButtons-dropdown {
+                margin: 0 15px 0 0;
+                font-size: 16px;
+                font-weight: 400;
+                color: @themeColor;
+
+                &-more {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+
+                    &-name {}
+                }
+            }
+        }
+
+        &-item {
+            > span {
+                width: 100%;
+                .dsh-ellipsis();
+            }
+        }
+    }
+</style>

package/src/components/small/DshIcons.vue

@@ -47,3 +47,13 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .DshIcons {
+        display: inline-block;
+
+        &-item {
+            cursor: pointer;
+        }
+    }
+</style>

package/src/components/small/DshSteps.vue

@@ -66,3 +66,64 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .DshSteps {
+        &-item {
+            cursor: pointer;
+        }
+    }
+</style>
+<style lang="less">
+    .DshSteps {
+        .ivu-steps-vertical {
+            .ivu-steps-item {
+                padding-bottom: 30px;
+                &:last-child {
+                    margin-bottom: 0px;
+                }
+
+                .ivu-steps-tail {
+                    position: absolute;
+                    left: 13px;
+                    top: 0;
+                    height: 100%;
+                    width: 1px;
+                    padding: 35px 0 5px 0;
+                    & > i {
+                        background-color: #e8eaec;
+                    }
+                }
+
+                &.ivu-steps-status-process,
+                &.ivu-steps-status-finish {
+                    .ivu-steps-head-inner {
+                        background-color: @themeColor;
+                        border-color: @themeColor;
+                        span,
+                        & > .ivu-steps-icon {
+                            color: #ffffff;
+                        }
+                    }
+                }
+
+                &.ivu-steps-status-finish {
+                    .ivu-steps-head-inner {
+                        background-color: #ffffff;
+                        border-color: @themeColor;
+                        span,
+                        & > .ivu-steps-icon {
+                            color: @themeColor;
+                        }
+                    }
+
+                    .ivu-steps-tail {
+                        & > i:after {
+                            background: @themeColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

package/src/components/small/DshTitle.vue

@@ -34,3 +34,17 @@
         methods: {}
     };
 </script>
+
+<style lang="less" scoped>
+    .DshTitle {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        &-name {
+            margin-left: 8px;
+            font-size: @smallTitleSize;
+        }
+    }
+</style>

package/src/styles/components/index.less

@@ -1,29 +1,3 @@
-// list
-@import "./list/BriTable.less"; 
-@import "./list/DshPage.less";
-
-@import "./list/BriCard.less";
-@import "./list/BriTree.less";
-@import "./list/BriTreeItem.less";
-
-// other
-@import "./other/BriAvatar.less";
-@import "./other/BriIframe.less";
-@import "./other/BriLoading.less";
-
-@import "./other/DshColorPanel.less";
-@import "./other/DshMenuNav.less";
-@import "./other/BriCode.less";
-@import "./other/BriCollapseTree.less";
-@import "./other/BriGantt.less";
-
-// small
-@import "./small/BriButton.less";
-@import "./small/BriDrawer.less";
-@import "./small/DshButtons.less";
-@import "./small/DshIcons.less";
-@import "./small/DshModal.less";
-@import "./small/DshSteps.less";
-@import "./small/DshTitle.less";
-
-@import "./small/DshBtnModal.less";
+@import "./BriTable.less"; 
+@import "./BriButton.less";
+@import "./DshModal.less";

package/src/styles/components/list/BriCard.less

@@ -1,40 +0,0 @@
-.BriCard {
-    .item {
-        height: 50px;
-        margin-bottom: 10px;
-        float: left;
-        width: 33.3%;
-        padding: 0 10px;
-        min-width: 160px;
-
-        &-normal {
-            width: 100%;
-            height: 100%;
-            border: 1px solid #eaeaea;
-            position: relative;
-            border-radius: 5px;
-            cursor: pointer;
-
-            .label {
-                .dsh-ellipsis();
-                display: block;
-                width: 160px;
-                height: 100%;
-                position: absolute;
-                left: 50%;
-                margin-left: -80px;
-                line-height: 50px;
-                text-align: center;
-            }
-        }
-
-        &-active {
-            background-color: @themeColor;
-            color: #fff;
-        }
-    }
-
-    &-nodata {
-        #dsh-nodata();
-    }
-}

package/src/styles/components/list/BriTree.less

@@ -1,56 +0,0 @@
-.BriTree {
-    max-width: 1200px;
-    min-width: 720px;
-    height: 100%;
-    margin: 0px auto;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-
-    &-action {
-        padding: 10px;
-        display: flex;
-        justify-content: flex-end;
-
-        &-create {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .ivu-icon {
-                font-size: 20px;
-                font-weight: bold;
-                margin-right: -10px;
-                vertical-align: middle;
-                transform: translate(0, -1px);
-            }
-        }
-    }
-
-    &-tree {
-        width: 100%;
-        flex: 1;
-        min-height: 0px;
-        overflow: auto;
-
-        .ivu-tree-title {
-            width: calc(100% - 18px);
-        }
-        .ivu-tree-arrow {
-            margin-top: 5px;
-        }
-    }
-
-    &-modal {
-        &-content {
-            &-btns {
-                .dsh-padding20();
-                text-align: right;
-            }
-        }
-    }
-
-    &-dropdown-menu.DshColorPanel-list {
-        width: 242px!important;
-    }
-}

package/src/styles/components/list/BriTreeItem.less

@@ -1,50 +0,0 @@
-.BriTreeItem {
-    padding-left: 16px;
-
-    &-content {
-        line-height: 36px;
-        cursor: pointer;
-        display: flex;
-        
-        &:hover {
-            background-color: @btn-hover;
-        }
-
-        &-expand {
-            width: 28px;
-            text-align: center;
-        }
-
-        &-select {
-            width: 100%;
-            color: rgba(36, 36, 63, 0.9);
-            
-            .ivu-checkbox-inner {
-                border-color: rgba(36, 36, 63, 0.3)
-            }
-            .ivu-checkbox {
-                margin-right: 2px;
-            }
-
-            &-radio {
-                .ivu-checkbox-inner {
-                    border-radius: 50%;
-                }
-            }
-        }
-        
-        &-text {
-
-        }
-    }
-
-    .default-enter, 
-    .default-leave-to {
-        opacity: 0;
-        max-height: 0;
-    }
-    
-    &-children {
-        
-    }
-}