bri-components 1.5.22 → 1.6.0

package/src/components/controls/base/DshDivider.vue

@@ -1,201 +1,201 @@
-<template>
-    <div
-        class="DshDivider"
-        :style="showMode === 'flag' ? { marginRight:'36px' } : {}"
-    >
-        <!-- <div class="DshDivider-cli">
-            <p>{{ controlName }}</p>
-        </div> -->
-
-        <div
-            v-if="showMode === 'flag'"
-            class="DshDivider-flag"
-        >
-            <Icon
-                size="15"
-                style="margin-top: -1px"
-                :custom="'bico-font ' + iconType"
-            />
-            <p>{{ controlName }}</p>
-            <span class="triangle-topleft"></span>
-            <span class="triangle-topright"></span>
-        </div>
-
-        <div
-            v-else-if="showMode === 'line'"
-            class="DshDivider-line"
-        >
-            <p>{{ controlName }}</p>
-            <span></span>
-        </div>
-
-        <div
-            v-else-if="showMode === 'circle'"
-            class="DshDivider-circle"
-        >
-            <span class="DshDivider-circle-icon">
-                <Icon :custom="'bico-font ' + iconType" />
-            </span>
-            <p>{{ controlName }}</p>
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-
-    export default {
-        name: "DshDivider",
-        mixins: [
-            controlMixin
-        ],
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _tagKind: "flag", // "flag", "line", "circle"
-                    _tagIcon: "", // flag、circle下使用
-
-                    ...this.propsObj
-                };
-            },
-            showMode () {
-                return this.selfPropsObj._tagKind;
-            },
-            iconType () {
-                return this.selfPropsObj._tagIcon;
-            }
-        },
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less">
-    .DshDivider {
-        margin-right: 20px;
-        font-family: SourceHanSansCN-Medium,SourceHanSansCN;
-        font-weight: 500;
-        font-size: 14px;
-
-        p {
-            margin-left: 10px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        // &-cli {
-        //     margin-right: 20px;
-        //     line-height: 32px;
-        //     font-family:SourceHanSansCN-Medium,SourceHanSansCN;
-        //     font-weight:700;
-        //     font-size:16px;
-        //     color: #333333;
-
-        //     p {
-        //         overflow: hidden;
-        //         white-space: nowrap;
-        //         text-overflow: ellipsis;
-        //     }
-        // }
-
-        &-flag {
-            min-width: 130px;
-            max-width: 100%;
-            height: 38px;
-            margin-bottom: 4px;
-            background: linear-gradient(57deg, @themeColor 0%, #85CBED 100%);
-            line-height:38px;
-            display: inline-flex;
-            align-items: center;
-            padding: 0 10px;
-            color:rgba(255,255,255,1);
-            position: relative;
-
-            .triangle-topleft {
-                /* 左上三角 */
-                position: absolute;
-                top: 38px;
-                left: 0;
-                width: 0;
-                height: 0;
-                border-right: 14px solid transparent;
-                border-top: 4px solid #457FBB;
-            }
-
-            .triangle-topright {
-                /* 右上三角 */
-                position: absolute;
-                top: 0px;
-                right: -25px;
-                width: 0;
-                height: 0;
-                border-right: 25px solid transparent;
-                border-bottom: 38px solid #82c7ed;
-            }
-        }
-
-        &-circle {
-            min-width: 142px;
-            max-width: 100%;
-            height: 32px;
-            background-repeat: no-repeat;
-            background-position: center left;
-            display: inline-flex;
-            align-items: center;
-            line-height: 32px;
-            color:rgba(255,255,255,1);
-            background:linear-gradient(270deg,rgba(166,215,250,1) 0%,rgba(109,174,242,1) 47%,rgba(109,174,242,1) 100%);
-            border-radius:16px;
-            padding: 0 20px;
-
-            &-icon {
-                display: block;
-                font-size: 18px;
-                border: 4px solid #fff;
-                height: 40px;
-                min-width: 40px;
-                border-radius: 20px;
-                line-height: 28px;
-                text-align: center;
-            }
-        }
-
-        &-line {
-            color: @themeColor;
-            min-width:130px;
-            height: 32px;
-            max-width: 100%;
-            display: inline-block;
-            flex-direction:column;
-
-            p {
-                height: 32px;
-                line-height: 32px;
-                font-size:14px;
-            }
-
-            span {
-                display: block;
-                width: 100%;
-                background:linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
-                height: 1px;
-                position: relative;
-                &::before {
-                    content: "";
-                    width: 5px;
-                    height: 5px;
-                    position: absolute;
-                    border-radius: 5px;
-                    background: #6DAEF2;
-                    left: 0px;
-                    top: -2px;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div
+        class="DshDivider"
+        :style="showMode === 'flag' ? { marginRight:'36px' } : {}"
+    >
+        <!-- <div class="DshDivider-cli">
+            <p>{{ controlName }}</p>
+        </div> -->
+
+        <div
+            v-if="showMode === 'flag'"
+            class="DshDivider-flag"
+        >
+            <Icon
+                size="15"
+                style="margin-top: -1px"
+                :custom="'bico-font ' + iconType"
+            />
+            <p>{{ controlName }}</p>
+            <span class="triangle-topleft"></span>
+            <span class="triangle-topright"></span>
+        </div>
+
+        <div
+            v-else-if="showMode === 'line'"
+            class="DshDivider-line"
+        >
+            <p>{{ controlName }}</p>
+            <span></span>
+        </div>
+
+        <div
+            v-else-if="showMode === 'circle'"
+            class="DshDivider-circle"
+        >
+            <span class="DshDivider-circle-icon">
+                <Icon :custom="'bico-font ' + iconType" />
+            </span>
+            <p>{{ controlName }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+
+    export default {
+        name: "DshDivider",
+        mixins: [
+            controlMixin
+        ],
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _tagKind: "flag", // "flag", "line", "circle"
+                    _tagIcon: "", // flag、circle下使用
+
+                    ...this.propsObj
+                };
+            },
+            showMode () {
+                return this.selfPropsObj._tagKind;
+            },
+            iconType () {
+                return this.selfPropsObj._tagIcon;
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less">
+    .DshDivider {
+        margin-right: 20px;
+        font-family: SourceHanSansCN-Medium,SourceHanSansCN;
+        font-weight: 500;
+        font-size: 14px;
+
+        p {
+            margin-left: 10px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        // &-cli {
+        //     margin-right: 20px;
+        //     line-height: 32px;
+        //     font-family:SourceHanSansCN-Medium,SourceHanSansCN;
+        //     font-weight:700;
+        //     font-size:16px;
+        //     color: #333333;
+
+        //     p {
+        //         overflow: hidden;
+        //         white-space: nowrap;
+        //         text-overflow: ellipsis;
+        //     }
+        // }
+
+        &-flag {
+            min-width: 130px;
+            max-width: 100%;
+            height: 38px;
+            margin-bottom: 4px;
+            background: linear-gradient(57deg, @themeColor 0%, #85CBED 100%);
+            line-height:38px;
+            display: inline-flex;
+            align-items: center;
+            padding: 0 10px;
+            color:rgba(255,255,255,1);
+            position: relative;
+
+            .triangle-topleft {
+                /* 左上三角 */
+                position: absolute;
+                top: 38px;
+                left: 0;
+                width: 0;
+                height: 0;
+                border-right: 14px solid transparent;
+                border-top: 4px solid #457FBB;
+            }
+
+            .triangle-topright {
+                /* 右上三角 */
+                position: absolute;
+                top: 0px;
+                right: -25px;
+                width: 0;
+                height: 0;
+                border-right: 25px solid transparent;
+                border-bottom: 38px solid #82c7ed;
+            }
+        }
+
+        &-circle {
+            min-width: 142px;
+            max-width: 100%;
+            height: 32px;
+            background-repeat: no-repeat;
+            background-position: center left;
+            display: inline-flex;
+            align-items: center;
+            line-height: 32px;
+            color:rgba(255,255,255,1);
+            background:linear-gradient(270deg,rgba(166,215,250,1) 0%,rgba(109,174,242,1) 47%,rgba(109,174,242,1) 100%);
+            border-radius:16px;
+            padding: 0 20px;
+
+            &-icon {
+                display: block;
+                font-size: 18px;
+                border: 4px solid #fff;
+                height: 40px;
+                min-width: 40px;
+                border-radius: 20px;
+                line-height: 28px;
+                text-align: center;
+            }
+        }
+
+        &-line {
+            color: @themeColor;
+            min-width:130px;
+            height: 32px;
+            max-width: 100%;
+            display: inline-block;
+            flex-direction:column;
+
+            p {
+                height: 32px;
+                line-height: 32px;
+                font-size:14px;
+            }
+
+            span {
+                display: block;
+                width: 100%;
+                background:linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
+                height: 1px;
+                position: relative;
+                &::before {
+                    content: "";
+                    width: 5px;
+                    height: 5px;
+                    position: absolute;
+                    border-radius: 5px;
+                    background: #6DAEF2;
+                    left: 0px;
+                    top: -2px;
+                }
+            }
+        }
+    }
+</style>