bkui-vue 0.0.1-beta.23 → 0.0.1-beta.24

package/dist/style.css

@@ -1980,6 +1980,97 @@ optgroup {
 .bk-rate-stars .bk-rate-star:last-child {
   margin-right: 0;
 }
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+  list-style-type: none;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  cursor: pointer;
+  position: absolute;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: rgba(31, 45, 61, 0.4);
+  top: calc(50% - 15px);
+  display: none;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  left: 14px;
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-prev:hover {
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-next {
+  right: 14px;
+  transform: rotate(225deg);
+}
+.bk-swiper-nav.bk-nav-next:hover {
+  transform: rotate(225deg);
+}
+.bk-swiper-nav:hover {
+  background: rgba(31, 45, 61, 0.6);
+}
 .bk-select {
   display: inline-block;
 }
@@ -3167,6 +3258,8 @@ optgroup {
   padding-left: 0;
   line-height: var(--lineHeight);
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 .bk-tree .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
@@ -3194,8 +3287,14 @@ optgroup {
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
-.bk-tree .bk-tree-node .node-content {
-  display: inline-block;
+.bk-tree .bk-tree-node .bk-node-content {
+  display: inline-flex;
+  align-items: center;
+}
+.bk-tree .bk-tree-node .bk-node-content .bk-node-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .bk-slider {
   display: flex;

package/lib/components.d.ts

@@ -18,6 +18,7 @@ export { default as Popover } from './popover';
 export { default as Progress } from './progress';
 export { default as Radio, BkRadioButton as RadioButton, BkRadioGroup as RadioGroup } from './radio';
 export { default as Rate } from './rate';
+export { default as Swiper } from './swiper';
 export { default as Select, BkOption, BkOptionGroup } from './select';
 export { default as Sideslider } from './sideslider';
 export { default as Steps } from './steps';

package/lib/shared/index.d.ts

@@ -25,10 +25,10 @@
  */
 import { Plugin } from 'vue';
 export * from './z-index-manager';
-export * from './bk-popover';
-export * from './bk-pop-manager';
-export * from './bk-mask-manager';
-export * from './bk-helper-core';
+export * from './popover';
+export * from './pop-manager';
+export * from './mask-manager';
+export * from './helper';
 export * from './vue-types';
 export * from './scrollbar-width';
 export declare function classes(dynamicCls: object, constCls?: string): string;

package/lib/styles/index.d.ts

@@ -20,6 +20,7 @@ import '../progress/progress.less';
 import '../radio/radio.less';
 import '../rate/rate.less';
 import '../rate/star.less';
+import '../swiper/swiper.less';
 import '../select/select.less';
 import '../sideslider/sideslider.less';
 import '../switcher/switcher.less';

package/lib/styles/index.js

@@ -1 +1 @@
-!function(e){"function"==typeof define&&define.amd?define(["./reset.less","../alert/alert.less","../backtop/backtop.less","../badge/badge.less","../breadcrumb/breadcrumb.less","../button/button.less","../card/card.less","../checkbox/checkbox.less","../collapse/collapse.less","../dialog/dialog.less","../exception/exception.less","../fixed-navbar/fixed-navbar.less","../input/input.less","../link/link.less","../dropdown/dropdown.less","../loading/loading.less","../modal/modal.less","../popover/popover.less","../progress/progress.less","../radio/radio.less","../rate/rate.less","../rate/star.less","../select/select.less","../sideslider/sideslider.less","../switcher/switcher.less","../table/table.less","../tag/tag.less","../form/form.less","../steps/steps.less","../message/message.less","../notify/notify.less","../tree/tree.less","../slider/slider.less","../menu/menu.less","../navigation/navigation.less","../date-picker/date-picker.less","../divider/divider.less","../tab/tab.less","../process/process.less","../virtual-render/virtual-render.less","../transfer/transfer.less","../pagination/pagination.less","../timeline/timeline.less"],e):e()}((function(){}));
+!function(e){"function"==typeof define&&define.amd?define(["./reset.less","../alert/alert.less","../backtop/backtop.less","../badge/badge.less","../breadcrumb/breadcrumb.less","../button/button.less","../card/card.less","../checkbox/checkbox.less","../collapse/collapse.less","../dialog/dialog.less","../exception/exception.less","../fixed-navbar/fixed-navbar.less","../input/input.less","../link/link.less","../dropdown/dropdown.less","../loading/loading.less","../modal/modal.less","../popover/popover.less","../progress/progress.less","../radio/radio.less","../rate/rate.less","../rate/star.less","../swiper/swiper.less","../select/select.less","../sideslider/sideslider.less","../switcher/switcher.less","../table/table.less","../tag/tag.less","../form/form.less","../steps/steps.less","../message/message.less","../notify/notify.less","../tree/tree.less","../slider/slider.less","../menu/menu.less","../navigation/navigation.less","../date-picker/date-picker.less","../divider/divider.less","../tab/tab.less","../process/process.less","../virtual-render/virtual-render.less","../transfer/transfer.less","../pagination/pagination.less","../timeline/timeline.less"],e):e()}((function(){}));

package/lib/swiper/index.d.ts

@@ -0,0 +1,181 @@
+declare const BkSwiper: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            width: number;
+            height: number;
+            list: unknown[];
+            isLoop: boolean;
+            loopTime: number;
+            pics: unknown[];
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            loopTime: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            height: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+        }>> & {
+            "onIndex-change"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "list" | "isLoop" | "loopTime" | "pics">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "index-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            loopTime: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            height: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+        }>> & {
+            "onIndex-change"?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], string, {
+            width: number;
+            height: number;
+            list: unknown[];
+            isLoop: boolean;
+            loopTime: number;
+            pics: unknown[];
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        loopTime: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        height: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        };
+        width: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        };
+    }>> & {
+        "onIndex-change"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}>> & {
+    "onIndex-change"?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], "index-change", {
+    width: number;
+    height: number;
+    list: unknown[];
+    isLoop: boolean;
+    loopTime: number;
+    pics: unknown[];
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSwiper;

package/lib/swiper/index.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,n,t){"use strict";var o=n.defineComponent({name:"Swiper",props:{isLoop:t.PropTypes.bool.def(!0),loopTime:t.PropTypes.number.def(8e3),pics:t.PropTypes.array.def([]),list:t.PropTypes.array.def([]),height:t.PropTypes.number,width:t.PropTypes.number},emits:["index-change"],setup:function(e,t){var o,a=t.emit,i=t.slots,r=n.toRefs(e),l=r.isLoop,u=r.loopTime,c=r.pics,s=r.list,d=r.height,p=r.width,v=n.ref(),f=n.ref(0),h=n.ref(0),b=n.ref(0),w=n.ref(0),m=n.computed((function(){var e;return(null===(e=s.value)||void 0===e?void 0:e.length)>0?s.value:c.value})),g=n.computed((function(){return{width:"".concat(h.value*m.value.length,"px"),transform:"translateX(-".concat(h.value*f.value,"px)")}})),k=n.computed((function(){return{width:"".concat(h.value,"px"),height:"".concat(b.value,"px")}})),y=function(e){var n=e;e>=m.value.length&&(n=0),e<0&&(n=m.value.length-1),f.value=n,a("index-change",n)},T=function(e){return["bk-swiper-img",{"bk-swiper-link":e.link},e.class]},x=function(e){return{"background-image":"url(".concat(e.url,")"),"background-color":e.color}},V=function(e){return{"bk-current-index":f.value===e}},N=function e(){l.value&&(w.value=window.setTimeout((function(){y(f.value+1),e()}),u.value))},P=function(){var e,n=function(e){if(void 0===e)return{height:0,width:0};var n=getComputedStyle(e),t=e.clientWidth-parseFloat(n.paddingTop)-parseFloat(n.paddingBottom);return{height:e.clientHeight-parseFloat(n.paddingLeft)-parseFloat(n.paddingRight),width:t}}(null===(e=v.value)||void 0===e?void 0:e.parentElement);h.value=+p.value>0?p.value:n.width,b.value=+d.value>0?d.value:n.height};return n.watch([d,p],P),n.onMounted((function(){var e,n;P(),N(),(n=null===(e=v.value)||void 0===e?void 0:e.parentElement)&&window.ResizeObserver&&(o=new ResizeObserver((function(){P()}))).observe(n)})),n.onBeforeUnmount((function(){var e;window.clearTimeout(w.value),null===(e=o.disconnect)||void 0===e||e.call(o)})),function(){return n.createVNode("section",{class:"bk-swiper-home",ref:v,style:k.value},[n.createVNode("hgroup",{style:g.value,class:"bk-transition bk-swiper-main"},[m.value.map((function(e){var t,o;return n.createVNode("h3",{class:"bk-swiper-card",style:k.value},[null!==(o=null===(t=i.default)||void 0===t?void 0:t.call(i,e))&&void 0!==o?o:n.createVNode("span",{class:T(e),style:x(e),onClick:function(){var n;(n=e.link)&&window.open(n,"_blank")}},null)])}))]),n.createVNode("ul",{class:"bk-swiper-index"},[m.value.map((function(e,t){return n.createVNode("li",{class:V(t),onMouseover:function(){return y(t)}},null)}))]),n.createVNode("span",{class:"bk-swiper-nav bk-nav-prev",onClick:function(){return y(f.value-1)}},[n.createVNode("i",{class:"bk-swiper-nav-icon"},null)]),n.createVNode("span",{class:"bk-swiper-nav bk-nav-next",onClick:function(){return y(f.value+1)}},[n.createVNode("i",{class:"bk-swiper-nav-icon"},null)])])}}}),a=t.withInstall(o);e.default=a,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/swiper/swiper.css

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+  list-style-type: none;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  cursor: pointer;
+  position: absolute;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: rgba(31, 45, 61, 0.4);
+  top: calc(50% - 15px);
+  display: none;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  left: 14px;
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-prev:hover {
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-next {
+  right: 14px;
+  transform: rotate(225deg);
+}
+.bk-swiper-nav.bk-nav-next:hover {
+  transform: rotate(225deg);
+}
+.bk-swiper-nav:hover {
+  background: rgba(31, 45, 61, 0.6);
+}

package/lib/swiper/swiper.d.ts

@@ -0,0 +1,65 @@
+declare const _default: import("vue").DefineComponent<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], "index-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}>> & {
+    "onIndex-change"?: (...args: any[]) => any;
+}, {
+    width: number;
+    height: number;
+    list: unknown[];
+    isLoop: boolean;
+    loopTime: number;
+    pics: unknown[];
+}>;
+export default _default;

package/lib/swiper/swiper.less

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+    position: relative;
+    overflow: hidden;
+    &:hover .bk-swiper-nav {
+        display: block;
+    }
+}
+.bk-swiper-main {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    &.bk-transition {
+        transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+    }
+    .bk-swiper-card {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+    .bk-swiper-img {
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .bk-swiper-link {
+        cursor: pointer;
+    }
+}
+.bk-swiper-index {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    li {
+        width: 11px;
+        height: 4px;
+        margin: 0 3px;
+        background: #63656e;
+        border-radius: 2px;
+        transition: width 0.525s;
+        list-style-type: none;
+        &.bk-current-index {
+            width: 17px;
+            background: #c5c7d1;
+        }
+    }
+}
+.bk-swiper-nav {
+    cursor: pointer;
+    position: absolute;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    background: rgba(31,45,61,.4);
+    top: calc(50% - 15px);
+    display: none;
+    .bk-swiper-nav-icon {
+        position: absolute;
+        top: 9px;
+        left: 11px;
+        width: 10px;
+        height: 10px;
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+    }
+    &.bk-nav-prev {
+        left: 14px;
+        transform: rotate(45deg);
+        &:hover {
+            transform: rotate(45deg);
+        }
+    }
+    &.bk-nav-next {
+        right: 14px;
+        transform: rotate(225deg);
+        &:hover {
+            transform: rotate(225deg);
+        }
+    }
+    &:hover {
+        background: rgba(31,45,61,.6);
+    }
+}