bri-components 1.5.22 → 1.6.1

package/src/components/small/DshTabs.vue

@@ -1,598 +1,598 @@
-<template>
-    <Tabs
-        :class="['DshTabs', `DshTabs-${mode}`, `DshTabs-${mode}-${size}`]"
-        v-model="curTabKey"
-        :type="['button', 'card'].includes(mode) ? 'card' : undefined"
-        :animated="false"
-    >
-        <TabPane
-            v-for="tabItem in list"
-            :key="tabItem[keyField]"
-            class="DshTabs-item"
-            :name="tabItem[keyField]"
-            :label="getLabel(tabItem)"
-            :size="size"
-        >
-            <slot
-                v-if="renderStatusMap[tabItem[keyField]]"
-                :tabItem="tabItem"
-            >
-                <span></span>
-            </slot>
-        </TabPane>
-
-        <div
-            v-if="rightTabList.length"
-            slot="extra"
-            class="extra"
-        >
-            <span
-                v-for="tabItem in rightTabList"
-                :key="tabItem[keyField]"
-                :class="{
-                    'extra-item': true,
-                    'extra-item-active': tabItem[keyField] === curTabKey
-                }"
-                @click="curTabKey = tabItem[keyField]"
-            >
-                {{ tabItem.name }}
-            </span>
-        </div>
-    </Tabs>
-</template>
-
-<script>
-    export default {
-        name: "DshTabs",
-        props: {
-            value: {
-                type: String
-            },
-            mode: {
-                type: String,
-                default: "creative",
-                validator (val) {
-                    return ["creative", "tradition", "page", "button", "card", "line", "menu"].includes(val);
-                }
-            },
-            keyField: {
-                type: String,
-                default: "_key"
-            },
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            size: {
-                type: String,
-                default: "default",
-                validator (val) {
-                    return ["default", "small", "large"].includes(val);
-                }
-            }
-        },
-        data () {
-            return {
-                renderStatusMap: {}
-            };
-        },
-        computed: {
-            curTabKey: {
-                get () {
-                    return this.value;
-                },
-                set (tabKey) {
-                    // iview的组件有问题，重复点击tab的某一项，set函数还是会触发！
-                    if (tabKey !== this.curTabKey) {
-                        this.init(tabKey);
-
-                        this.$emit("input", tabKey);
-                        this.$emit("change", tabKey, this.list.find(item => item[this.keyField] === tabKey));
-                    }
-                }
-            },
-
-            rightTabList () {
-                return this.list.filter(item => item.slot === "extra");
-            }
-        },
-        created () {
-            this.init(this.curTabKey != undefined ? this.curTabKey : (this.list[0] && this.list[0][this.keyField]));
-        },
-        mounted () {},
-        methods: {
-            init (tabKey) {
-                this.$set(this.renderStatusMap, tabKey, true);
-            },
-
-            getLabel (tabItem) {
-                return tabItem.slot !== "extra"
-                    ? (h) => {
-                        return h("div", {
-                            style: {
-                                padding: ["button", "menu"].includes(this.mode) ? undefined : "0px 16px"
-                            }
-                        }, tabItem.name);
-                    }
-                    : undefined;
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshTabs {
-        width: 100%;
-        // height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        &-item {
-
-        }
-
-        .extra {
-            height: 100%;
-
-            &-item {
-                display: inline-block;
-                padding: 8px 16px;
-                font-size: @textSize;
-                cursor: pointer;
-
-                &-active {
-                    color: @themeColor;
-                    position: relative;
-                }
-            }
-        }
-
-        &-creative,
-        &-tradition {
-            .ivu-tabs {
-                color: @titleColor;
-
-                &-bar {
-                    height: 100%;
-                    border-bottom: 0px!important;
-                    margin-bottom: 0px!important;
-
-                    .ivu-tabs-nav-right {
-                        margin-top: 8px;
-                        margin-left: 40px;
-                    }
-
-                    .ivu-tabs-nav-container {
-                        height: 100%;
-
-                        .ivu-tabs-nav-wrap {
-
-                            .ivu-tabs-nav {
-                                &-prev,
-                                &-next {
-                                    height: 100%;
-                                    display: flex;
-                                    flex-direction: row;
-                                    justify-content: center;
-                                    align-items: center;
-
-                                    i {
-                                        display: inline-block;
-                                        font-size: @largeTitleSize;
-                                    }
-                                }
-
-                                &-scroll {
-                                    &-disabled {
-                                        display: none;
-                                    }
-
-                                    .ivu-tabs-nav {
-
-                                        .ivu-tabs-ink-bar {
-                                            height: 0;
-                                            background-color: #FFF;
-                                        }
-
-                                        .ivu-tabs-tab {
-                                            // display: inline-block;
-                                            // height: 44px;
-                                            padding: 0px!important;
-                                            margin-right: 1px!important;
-                                            // background-color: #E5E5E5;
-                                            text-align: center;
-                                            line-height: 44px;
-                                            font-size: @textSize;
-                                            color: @titleColor;
-
-                                            &-active,
-                                            &-focused {
-                                                color: @themeColor;
-                                                background-color: #FFF;
-                                                font-weight: 500;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &-content {
-                    padding-top: 20px;
-                }
-            }
-        }
-
-        &-tradition {
-            .ivu-tabs {
-                color: #ffffff;
-
-                &-bar {
-
-                    .ivu-tabs-nav-right {
-
-                    }
-
-                    .ivu-tabs-nav-container {
-                        overflow: visible;
-
-                        .ivu-tabs-nav-wrap {
-
-                            .ivu-tabs-nav {
-                                &-prev,
-                                &-next {
-                                    color: #ffffff;
-                                }
-
-                                &-scroll {
-                                    .ivu-tabs-nav {
-
-                                        .ivu-tabs-ink-bar {
-
-                                        }
-
-                                        .ivu-tabs-tab {
-                                            color: #ffffff;
-
-                                            &:hover {
-                                                color: #ffffff;
-                                            }
-
-                                            &-active,
-                                            &-focused {
-                                                color: @theme-active;
-
-                                                &:hover {
-                                                    color: @theme-active;
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        // 页面编辑版
-        &-page {
-            .extra {
-                &-item {
-                    &-active {
-                        &::after {
-                            content: "";
-                            width: 100%;
-                            height: 2px;
-                            position: absolute;
-                            bottom: 0px;
-                            left: 0;
-                            z-index: 1;
-                            background-color: @themeColor;
-                        }
-                    }
-                }
-            }
-
-            .ivu-tabs {
-
-                &-bar {
-                    border-bottom: 0px!important;
-                    margin-bottom: 0px!important;
-
-                    .ivu-tabs-nav-right {
-                        margin-left: 40px;
-                    }
-
-                    .ivu-tabs-nav-container {
-
-                        .ivu-tabs-nav-wrap {
-
-                            .ivu-tabs-nav {
-                                &-prev,
-                                &-next {
-                                    padding-top: 4px;
-
-                                    i {
-                                        font-size: @titleSize;
-                                    }
-                                }
-
-                                &-scroll {
-                                    .ivu-tabs-nav {
-                                        display: flex;
-                                        align-items: center;
-
-                                        // tab切换下方下划线
-                                        .ivu-tabs-ink-bar {
-                                            display: none;
-
-                                            &-animated {
-                                                display: none;
-                                            }
-                                        }
-
-                                        // tab切换标签
-                                        .ivu-tabs-tab {
-                                            display: inline-block;
-                                            height: 40px;
-                                            padding: 0px!important;
-                                            margin-right: 1px!important;
-                                            background-color: #E5E5E5;
-                                            text-align: center;
-                                            line-height: 40px;
-                                            font-size: @smallTitleSize;
-                                            color: #666666;
-
-                                            &-active {
-                                                background: @white!important;
-                                                color: @themeColor!important;
-                                                font-weight: 700;
-                                            }
-
-                                            &:hover {
-                                                color: @themeColor!important;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                }
-
-                &-content {
-                    flex: 1;
-                    min-height: 0px;
-                    padding-top: 20px;
-                }
-
-                &-context-menu {
-
-                }
-            }
-        }
-
-        // 按钮式、卡片式
-        &-button {
-            height: 32px;
-            &.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar {
-                border: none;
-                margin-bottom: 0px;
-                height: 100%;
-
-                .ivu-tabs-tab {
-                    height: 28px;
-                    background-color: transparent;
-                    color: @contentColor;
-                    border-radius: 3px;
-                    border: none;
-                    margin: 2px;
-                    padding: 3px 16px;
-                    line-height: 22px;
-
-                    &-active {
-                        background-color: #fff;
-                        color: @textColor;
-                    }
-
-                    &:hover {
-                        color: @textColor;
-                    }
-                }
-
-                .ivu-tabs-ink-bar {
-                    background-color: transparent;
-                }
-            }
-
-            .ivu-tabs-nav {
-                background-color: @borderColor;
-                border-radius: @borderRadius;
-            }
-
-            &-large {
-                height: 40px;
-                &.ivu-tabs > .ivu-tabs-bar {
-                    .ivu-tabs-nav-container, .ivu-tabs-nav {
-                        height: 40px;
-                    }
-                    .ivu-tabs-tab {
-                        height: 36px;
-                        font-size: 16px;
-                        line-height: 24px;
-                        padding: 6px 24px;
-                    }
-                }
-                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
-                    line-height: 40px;
-                }
-            }
-        }
-
-        &-card {
-            height: 32px;
-            &.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar {
-                border: none;
-                margin: 0px;
-                height: 100%;
-
-                .ivu-tabs-tab {
-                    height: 28px;
-                    background-color: transparent;
-                    color: @contentColor;
-                    border-radius: 3px;
-                    border: none;
-                    margin: 2px;
-                    padding: 3px 16px;
-                    line-height: 22px;
-
-                    &-active {
-                        background-color: @themeColor;
-                        color: rgba(255,255,255,0.9);
-                        &.ivu-tabs-tab:hover {
-                            color: rgba(255,255,255,0.9);
-                        }
-                    }
-
-                    &:hover {
-                        color: @textColor;
-                    }
-                }
-
-                .ivu-tabs-ink-bar {
-                    background-color: transparent;
-                }
-            }
-
-            .ivu-tabs-nav {
-                background-color: @borderColor;
-                border-radius: @borderRadius;
-            }
-
-            &-large {
-                height: 40px;
-                &.ivu-tabs > .ivu-tabs-bar {
-                    .ivu-tabs-nav-container, .ivu-tabs-nav {
-                        height: 40px;
-                    }
-                    .ivu-tabs-tab {
-                        height: 36px;
-                        font-size: 16px;
-                        line-height: 24px;
-                        padding: 6px 24px;
-                    }
-                }
-                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
-                    line-height: 40px;
-                }
-            }
-        }
-
-        // 下划线
-        &-line {
-            .ivu-tabs {
-                // color: @titleColor;
-
-                &-bar {
-                    height: 100%;
-                    border-bottom: 0px!important;
-                    margin-bottom: 0px!important;
-
-                    .ivu-tabs-nav-container {
-
-                        .ivu-tabs-nav-wrap {
-
-                            .ivu-tabs-nav {
-                                &-prev,
-                                &-next {
-
-                                }
-
-                                &-scroll {
-                                    &-disabled {
-
-                                    }
-
-                                    .ivu-tabs-nav {
-
-                                        .ivu-tabs-ink-bar {
-
-                                        }
-
-                                        .ivu-tabs-tab {
-
-                                            &-active,
-                                            &-focused {
-
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        // menu
-        &-menu {
-            transform: translateY(4px);
-            &.ivu-tabs > .ivu-tabs-bar {
-                border: none;
-                margin: 0px;
-
-                .ivu-tabs-tab {
-                    position: relative;
-                    height: 32px;
-                    color: @contentColor;
-                    font-size: 16px;
-                    line-height: 24px;
-                    padding: 0 0px 8px 0px;
-                    margin-right: 24px;
-
-                    &:after {
-                        content: " ";
-                        display: flex;
-                        width: 32px;
-                        height: 2px;
-                        background: transparent;
-                        position: absolute;
-                        left: calc(50% - 16px);
-                        bottom: 2px;
-                    }
-
-                    &-active {
-                        color: @textColor;
-                        font-weight: 500;
-                        &:after {
-                            background: @themeColor;
-                        }
-                    }
-
-                    &:hover {
-                        color: @textColor;
-                    }
-
-                    &:last-of-type {
-                        margin-right: 0px;
-                    }
-                }
-
-                .ivu-tabs-ink-bar {
-                    display: none;
-                }
-                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
-                    line-height: 24px;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <Tabs
+        :class="['DshTabs', `DshTabs-${mode}`, `DshTabs-${mode}-${size}`]"
+        v-model="curTabKey"
+        :type="['button', 'card'].includes(mode) ? 'card' : undefined"
+        :animated="false"
+    >
+        <TabPane
+            v-for="tabItem in list"
+            :key="tabItem[keyField]"
+            class="DshTabs-item"
+            :name="tabItem[keyField]"
+            :label="getLabel(tabItem)"
+            :size="size"
+        >
+            <slot
+                v-if="renderStatusMap[tabItem[keyField]]"
+                :tabItem="tabItem"
+            >
+                <span></span>
+            </slot>
+        </TabPane>
+
+        <div
+            v-if="rightTabList.length"
+            slot="extra"
+            class="extra"
+        >
+            <span
+                v-for="tabItem in rightTabList"
+                :key="tabItem[keyField]"
+                :class="{
+                    'extra-item': true,
+                    'extra-item-active': tabItem[keyField] === curTabKey
+                }"
+                @click="curTabKey = tabItem[keyField]"
+            >
+                {{ tabItem.name }}
+            </span>
+        </div>
+    </Tabs>
+</template>
+
+<script>
+    export default {
+        name: "DshTabs",
+        props: {
+            value: {
+                type: String
+            },
+            mode: {
+                type: String,
+                default: "creative",
+                validator (val) {
+                    return ["creative", "tradition", "page", "button", "card", "line", "menu"].includes(val);
+                }
+            },
+            keyField: {
+                type: String,
+                default: "_key"
+            },
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            size: {
+                type: String,
+                default: "default",
+                validator (val) {
+                    return ["default", "small", "large"].includes(val);
+                }
+            }
+        },
+        data () {
+            return {
+                renderStatusMap: {}
+            };
+        },
+        computed: {
+            curTabKey: {
+                get () {
+                    return this.value;
+                },
+                set (tabKey) {
+                    // iview的组件有问题，重复点击tab的某一项，set函数还是会触发！
+                    if (tabKey !== this.curTabKey) {
+                        this.init(tabKey);
+
+                        this.$emit("input", tabKey);
+                        this.$emit("change", tabKey, this.list.find(item => item[this.keyField] === tabKey));
+                    }
+                }
+            },
+
+            rightTabList () {
+                return this.list.filter(item => item.slot === "extra");
+            }
+        },
+        created () {
+            this.init(this.curTabKey != undefined ? this.curTabKey : (this.list[0] && this.list[0][this.keyField]));
+        },
+        mounted () {},
+        methods: {
+            init (tabKey) {
+                this.$set(this.renderStatusMap, tabKey, true);
+            },
+
+            getLabel (tabItem) {
+                return tabItem.slot !== "extra"
+                    ? (h) => {
+                        return h("div", {
+                            style: {
+                                padding: ["button", "menu"].includes(this.mode) ? undefined : "0px 16px"
+                            }
+                        }, tabItem.name);
+                    }
+                    : undefined;
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshTabs {
+        width: 100%;
+        // height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-item {
+
+        }
+
+        .extra {
+            height: 100%;
+
+            &-item {
+                display: inline-block;
+                padding: 8px 16px;
+                font-size: @textSize;
+                cursor: pointer;
+
+                &-active {
+                    color: @themeColor;
+                    position: relative;
+                }
+            }
+        }
+
+        &-creative,
+        &-tradition {
+            .ivu-tabs {
+                color: @titleColor;
+
+                &-bar {
+                    height: 100%;
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
+
+                    .ivu-tabs-nav-right {
+                        margin-top: 8px;
+                        margin-left: 40px;
+                    }
+
+                    .ivu-tabs-nav-container {
+                        height: 100%;
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    height: 100%;
+                                    display: flex;
+                                    flex-direction: row;
+                                    justify-content: center;
+                                    align-items: center;
+
+                                    i {
+                                        display: inline-block;
+                                        font-size: @largeTitleSize;
+                                    }
+                                }
+
+                                &-scroll {
+                                    &-disabled {
+                                        display: none;
+                                    }
+
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+                                            height: 0;
+                                            background-color: #FFF;
+                                        }
+
+                                        .ivu-tabs-tab {
+                                            // display: inline-block;
+                                            // height: 44px;
+                                            padding: 0px!important;
+                                            margin-right: 1px!important;
+                                            // background-color: #E5E5E5;
+                                            text-align: center;
+                                            line-height: 44px;
+                                            font-size: @textSize;
+                                            color: @titleColor;
+
+                                            &-active,
+                                            &-focused {
+                                                color: @themeColor;
+                                                background-color: #FFF;
+                                                font-weight: 500;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &-content {
+                    padding-top: 20px;
+                }
+            }
+        }
+
+        &-tradition {
+            .ivu-tabs {
+                color: #ffffff;
+
+                &-bar {
+
+                    .ivu-tabs-nav-right {
+
+                    }
+
+                    .ivu-tabs-nav-container {
+                        overflow: visible;
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    color: #ffffff;
+                                }
+
+                                &-scroll {
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+
+                                        }
+
+                                        .ivu-tabs-tab {
+                                            color: #ffffff;
+
+                                            &:hover {
+                                                color: #ffffff;
+                                            }
+
+                                            &-active,
+                                            &-focused {
+                                                color: @theme-active;
+
+                                                &:hover {
+                                                    color: @theme-active;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // 页面编辑版
+        &-page {
+            .extra {
+                &-item {
+                    &-active {
+                        &::after {
+                            content: "";
+                            width: 100%;
+                            height: 2px;
+                            position: absolute;
+                            bottom: 0px;
+                            left: 0;
+                            z-index: 1;
+                            background-color: @themeColor;
+                        }
+                    }
+                }
+            }
+
+            .ivu-tabs {
+
+                &-bar {
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
+
+                    .ivu-tabs-nav-right {
+                        margin-left: 40px;
+                    }
+
+                    .ivu-tabs-nav-container {
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    padding-top: 4px;
+
+                                    i {
+                                        font-size: @titleSize;
+                                    }
+                                }
+
+                                &-scroll {
+                                    .ivu-tabs-nav {
+                                        display: flex;
+                                        align-items: center;
+
+                                        // tab切换下方下划线
+                                        .ivu-tabs-ink-bar {
+                                            display: none;
+
+                                            &-animated {
+                                                display: none;
+                                            }
+                                        }
+
+                                        // tab切换标签
+                                        .ivu-tabs-tab {
+                                            display: inline-block;
+                                            height: 40px;
+                                            padding: 0px!important;
+                                            margin-right: 1px!important;
+                                            background-color: #E5E5E5;
+                                            text-align: center;
+                                            line-height: 40px;
+                                            font-size: @smallTitleSize;
+                                            color: #666666;
+
+                                            &-active {
+                                                background: @white!important;
+                                                color: @themeColor!important;
+                                                font-weight: 700;
+                                            }
+
+                                            &:hover {
+                                                color: @themeColor!important;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                &-content {
+                    flex: 1;
+                    min-height: 0px;
+                    padding-top: 20px;
+                }
+
+                &-context-menu {
+
+                }
+            }
+        }
+
+        // 按钮式、卡片式
+        &-button {
+            height: 32px;
+            &.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar {
+                border: none;
+                margin-bottom: 0px;
+                height: 100%;
+
+                .ivu-tabs-tab {
+                    height: 28px;
+                    background-color: transparent;
+                    color: @contentColor;
+                    border-radius: 3px;
+                    border: none;
+                    margin: 2px;
+                    padding: 3px 16px;
+                    line-height: 22px;
+
+                    &-active {
+                        background-color: #fff;
+                        color: @textColor;
+                    }
+
+                    &:hover {
+                        color: @textColor;
+                    }
+                }
+
+                .ivu-tabs-ink-bar {
+                    background-color: transparent;
+                }
+            }
+
+            .ivu-tabs-nav {
+                background-color: @borderColor;
+                border-radius: @borderRadius;
+            }
+
+            &-large {
+                height: 40px;
+                &.ivu-tabs > .ivu-tabs-bar {
+                    .ivu-tabs-nav-container, .ivu-tabs-nav {
+                        height: 40px;
+                    }
+                    .ivu-tabs-tab {
+                        height: 36px;
+                        font-size: 16px;
+                        line-height: 24px;
+                        padding: 6px 24px;
+                    }
+                }
+                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
+                    line-height: 40px;
+                }
+            }
+        }
+
+        &-card {
+            height: 32px;
+            &.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar {
+                border: none;
+                margin: 0px;
+                height: 100%;
+
+                .ivu-tabs-tab {
+                    height: 28px;
+                    background-color: transparent;
+                    color: @contentColor;
+                    border-radius: 3px;
+                    border: none;
+                    margin: 2px;
+                    padding: 3px 16px;
+                    line-height: 22px;
+
+                    &-active {
+                        background-color: @themeColor;
+                        color: rgba(255,255,255,0.9);
+                        &.ivu-tabs-tab:hover {
+                            color: rgba(255,255,255,0.9);
+                        }
+                    }
+
+                    &:hover {
+                        color: @textColor;
+                    }
+                }
+
+                .ivu-tabs-ink-bar {
+                    background-color: transparent;
+                }
+            }
+
+            .ivu-tabs-nav {
+                background-color: @borderColor;
+                border-radius: @borderRadius;
+            }
+
+            &-large {
+                height: 40px;
+                &.ivu-tabs > .ivu-tabs-bar {
+                    .ivu-tabs-nav-container, .ivu-tabs-nav {
+                        height: 40px;
+                    }
+                    .ivu-tabs-tab {
+                        height: 36px;
+                        font-size: 16px;
+                        line-height: 24px;
+                        padding: 6px 24px;
+                    }
+                }
+                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
+                    line-height: 40px;
+                }
+            }
+        }
+
+        // 下划线
+        &-line {
+            .ivu-tabs {
+                // color: @titleColor;
+
+                &-bar {
+                    height: 100%;
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
+
+                    .ivu-tabs-nav-container {
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+
+                                }
+
+                                &-scroll {
+                                    &-disabled {
+
+                                    }
+
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+
+                                        }
+
+                                        .ivu-tabs-tab {
+
+                                            &-active,
+                                            &-focused {
+
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // menu
+        &-menu {
+            transform: translateY(4px);
+            &.ivu-tabs > .ivu-tabs-bar {
+                border: none;
+                margin: 0px;
+
+                .ivu-tabs-tab {
+                    position: relative;
+                    height: 32px;
+                    color: @contentColor;
+                    font-size: 16px;
+                    line-height: 24px;
+                    padding: 0 0px 8px 0px;
+                    margin-right: 24px;
+
+                    &:after {
+                        content: " ";
+                        display: flex;
+                        width: 32px;
+                        height: 2px;
+                        background: transparent;
+                        position: absolute;
+                        left: calc(50% - 16px);
+                        bottom: 2px;
+                    }
+
+                    &-active {
+                        color: @textColor;
+                        font-weight: 500;
+                        &:after {
+                            background: @themeColor;
+                        }
+                    }
+
+                    &:hover {
+                        color: @textColor;
+                    }
+
+                    &:last-of-type {
+                        margin-right: 0px;
+                    }
+                }
+
+                .ivu-tabs-ink-bar {
+                    display: none;
+                }
+                .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+</style>