bkui-vue 0.0.1-beta.1 → 0.0.1-beta.13

package/dist/style.css

@@ -1,469 +1,4051 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+* {
+  box-sizing: border-box;
+}
+/**
+ * HTML5 display definitions
+ * ==========================================================================
+ *
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  vertical-align: baseline;
+}
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden],
+template {
+  display: none;
+}
+/**
+ * Links
+ * ==========================================================================
+ *
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+  outline: 0;
+}
+/**
+ * Text-level semantics
+ * ==========================================================================
+ *
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/**
+ * Embedded content
+ * ==========================================================================
+ *
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+  border: 0;
+}
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/**
+ * Grouping content
+ * ==========================================================================
+ *
+ * Address margin not present in IE 8/9 and Safari.
+ */
+figure {
+  margin: 1em 40px;
+}
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  height: 0;
+  box-sizing: content-box;
+}
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ *
+ * Forms
+ * ==========================================================================
+ *
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ *
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  /* 3 */
+  margin: 0;
+  /* 2 */
+  font: inherit;
+  /* 1 */
+  color: inherit;
+}
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+  overflow: visible;
+}
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+  text-transform: none;
+}
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type `input` and others.
+ */
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  /* 3 */
+  cursor: pointer;
+  /* 2 */
+  appearance: button;
+}
+/* Re-set default cursor for disabled elements. */
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+/* Remove inner padding and border in Firefox 4+. */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+ */
+input {
+  line-height: normal;
+}
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type='checkbox'],
+input[type='radio'] {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  box-sizing: border-box;
+}
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+::-ms-clear,
+::-ms-reveal {
+  display: none;
+}
+input[type='text']::-ms-clear {
+  display: none;
+}
+input[type='text']::-ms-reveal {
+  display: none;
+}
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+input[type='search'] {
+  /* 2 */
+  box-sizing: content-box;
+  /* 1 */
+  appearance: textfield;
+}
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  padding: 0.35em 0.625em 0.75em;
+  margin: 0 2px;
+  border: 1px solid #c0c0c0;
+}
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  border: 0;
+}
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+optgroup {
+  font-weight: bold;
+}
+.bk-alert {
+  position: relative;
+  font-size: 12px;
+  color: #63656e;
+  text-align: left;
+  word-wrap: break-word;
+  border: 1px solid;
+  border-radius: 2px;
+}
+.bk-alert .bk-alert-icon-info {
+  margin-right: 8px;
+  font-size: 16px;
+}
+.bk-alert .icon-close {
+  font-size: 17px;
+}
+.bk-alert-wraper {
+  display: flex;
+  padding: 8px 10px;
+}
+.bk-alert-info {
+  background-color: #f0f8ff;
+  border-color: #c5daff;
+}
+.bk-alert-info .bk-alert-icon-info {
+  color: #3a84ff;
+}
+.bk-alert-success {
+  background-color: #f2fff4;
+  border-color: #94f5a4;
+}
+.bk-alert-success .bk-alert-icon-info {
+  color: #2dcb56;
+}
+.bk-alert-warning {
+  background-color: #fff4e2;
+  border-color: #ffdfac;
+}
+.bk-alert-warning .bk-alert-icon-info {
+  color: #ff9c01;
+}
+.bk-alert-error {
+  background-color: #ffeded;
+  border-color: #ffd2d2;
+}
+.bk-alert-error .bk-alert-icon-info {
+  color: #ea3636;
+}
+.bk-alert-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.bk-alert-title {
+  line-height: 16px;
+}
+.bk-alert-close {
+  padding: 8px 12px 0 6px;
+  margin-top: -8px;
+  margin-right: -10px;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.bk-alert-leave-leave {
+  opacity: 1;
+}
+.bk-alert-leave-leave-active {
+  overflow: hidden;
+  transition: opacity 0.15s, height 0.2s;
+}
+.bk-alert-leave-leave-to {
+  opacity: 0;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-backtop {
+  position: fixed;
+  display: flex;
+  width: 52px;
+  height: 52px;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 50%;
+  opacity: 1;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  justify-content: center;
+}
+.bk-fade-enter-active,
+.bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-enter,
+.bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-badge-main {
+  position: relative;
+  display: inline-block;
+}
+.bk-badge-main .bk-badge {
+  position: relative;
+  display: inline-block;
+  height: 16px;
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  background-color: white;
+  border-radius: 18px;
+}
+.bk-badge-main .bk-badge.pinned {
+  position: absolute;
+}
+.bk-badge-main .bk-badge.pinned.top-right {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%) scale(1, 1);
+}
+.bk-badge-main .bk-badge.pinned.top-right.fade-center-enter,
+.bk-badge-main .bk-badge.pinned.top-right.fade-center-leave-active {
+  opacity: 0;
+  transform: translate(50%, -50%) scale(0, 0);
+}
+.bk-badge-main .bk-badge.pinned.right {
+  top: 50%;
+  right: 0%;
+  transform: translate(100%, -50%) scale(1, 1);
+}
+.bk-badge-main .bk-badge.pinned.right.fade-center-enter,
+.bk-badge-main .bk-badge.pinned.right.fade-center-leave-active {
+  opacity: 0;
+  transform: translate(50%, -50%) scale(0, 0);
+}
+.bk-badge-main .bk-badge.pinned.bottom-right {
+  right: 0;
+  bottom: 0;
+  transform: translate(50%, 50%) scale(1, 1);
+}
+.bk-badge-main .bk-badge.pinned.bottom-right.fade-center-enter,
+.bk-badge-main .bk-badge.pinned.bottom-right.fade-center-leave-active {
+  opacity: 0;
+  transform: translate(50%, 50%) scale(0, 0);
+}
+.bk-badge-main .bk-badge.pinned.top-left {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%) scale(1, 1);
+}
+.bk-badge-main .bk-badge.pinned.top-left.fade-center-enter,
+.bk-badge-main .bk-badge.pinned.top-left.fade-center-leave-active {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0, 0);
+}
+.bk-badge-main .bk-badge.pinned.bottom-left {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%) scale(1, 1);
+}
+.bk-badge-main .bk-badge.pinned.bottom-left.fade-center-enter,
+.bk-badge-main .bk-badge.pinned.bottom-left.fade-center-leave-active {
+  opacity: 0;
+  transform: translate(-50%, 50%) scale(0, 0);
+}
+.bk-badge-main .bk-badge.bk-danger {
+  color: white;
+  background-color: #ea3636;
+  border: 2px solid white;
+}
+.bk-badge-main .bk-badge.bk-danger.is-icon {
+  color: #ea3636;
+  background-color: white;
+  border-color: white;
+}
+.bk-badge-main .bk-badge.bk-warning {
+  color: white;
+  background-color: #ff9c01;
+  border: 2px solid white;
+}
+.bk-badge-main .bk-badge.bk-warning.is-icon {
+  color: #ff9c01;
+  background-color: white;
+  border-color: white;
+}
+.bk-badge-main .bk-badge.bk-success {
+  color: white;
+  background-color: #2dcb56;
+  border: 2px solid white;
+}
+.bk-badge-main .bk-badge.bk-success.is-icon {
+  color: #2dcb56;
+  background-color: white;
+  border-color: white;
+}
+.bk-badge-main .bk-badge.bk-primary {
+  color: white;
+  background-color: #3a84ff;
+  border: 2px solid white;
+}
+.bk-badge-main .bk-badge.bk-primary.is-icon {
+  color: #3a84ff;
+  background-color: white;
+  border-color: white;
+}
+.bk-badge-main .bk-badge.dot {
+  width: 6px;
+  height: 6px;
+  min-width: 6px;
+  padding: 0;
+  border: 1px solid white;
+}
+.bk-badge-main .bk-badge.bk-badge-icon {
+  display: inline-block;
+  padding: 0;
+  padding-bottom: 1px;
+  font-size: 16px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-breadcrumb {
+  display: flex;
+  font-size: 14px;
+  color: #979ba5;
+  align-items: center;
+}
+.bk-breadcrumb::after {
+  clear: both;
+}
+.bk-breadcrumb-separator {
+  margin: 0 9px;
+  font-weight: bold;
+}
+.bk-breadcrumb-separator[class*=icon] {
+  margin: 0 6px;
+  font-weight: normal;
+}
+.bk-breadcrumb-item-inner.is-link,
+.bk-breadcrumb-item-inner a {
+  text-decoration: none;
+}
+.bk-breadcrumb-item-inner.is-link:hover,
+.bk-breadcrumb-item-inner a:hover {
+  color: #0082ff;
+  cursor: pointer;
+}
+.bk-breadcrumb-item:last-child {
+  color: #63656e;
+}
+.bk-breadcrumb-item:last-child .el-breadcrumb__inner,
+.bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
+.bk-breadcrumb-item:last-child .el-breadcrumb__inner:hover,
+.bk-breadcrumb-item:last-child .el-breadcrumb__inner a:hover {
+  cursor: text;
+}
+.bk-breadcrumb-item:last-child .bk-breadcrumb-separator {
+  display: none;
+}
 .bk-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  display: inline-block;
+  height: 32px;
+  min-width: 64px;
+  padding: 0 15px;
+  font-size: 14px;
+  color: #63656e;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: background-color ease 0.3s;
+  appearance: none;
+}
+.bk-button.bk-button-primary {
+  background-color: #3a84ff;
+  color: white;
+  border-color: #3a84ff;
+}
+.bk-button.bk-button-primary:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+}
+.bk-button.bk-button-primary:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+}
+.bk-button.bk-button-primary.is-disabled {
+  background-color: #dcdee5;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-primary.is-outline {
+  color: #3a84ff;
+  border-color: #3a84ff;
+  background-color: white;
+}
+.bk-button.bk-button-primary.is-outline:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+  color: white;
+}
+.bk-button.bk-button-primary.is-text {
+  color: #3a84ff;
+  background: none;
+  border: none;
+}
+.bk-button.bk-button-primary.is-text:hover {
+  color: #5594fa;
+}
+.bk-button.bk-button-hover-primary:hover {
+  background-color: #5594fa;
+  border-color: #5594fa;
+  color: white;
+}
+.bk-button.bk-button-warning {
+  background-color: #ff9c01;
+  color: white;
+  border-color: #ff9c01;
+}
+.bk-button.bk-button-warning:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+}
+.bk-button.bk-button-warning:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+}
+.bk-button.bk-button-warning.is-disabled {
+  background-color: #dcdee5;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-warning.is-outline {
+  color: #ff9c01;
+  border-color: #ff9c01;
+  background-color: white;
+}
+.bk-button.bk-button-warning.is-outline:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+  color: white;
+}
+.bk-button.bk-button-warning.is-text {
+  color: #ff9c01;
+  background: none;
+  border: none;
+}
+.bk-button.bk-button-warning.is-text:hover {
+  color: #ffb848;
+}
+.bk-button.bk-button-hover-warning:hover {
+  background-color: #ffb848;
+  border-color: #ffb848;
+  color: white;
+}
+.bk-button.bk-button-success {
+  background-color: #2dcb56;
+  color: white;
+  border-color: #2dcb56;
+}
+.bk-button.bk-button-success:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+}
+.bk-button.bk-button-success:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+}
+.bk-button.bk-button-success.is-disabled {
+  background-color: #dcdee5;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-success.is-outline {
+  color: #2dcb56;
+  border-color: #2dcb56;
+  background-color: white;
+}
+.bk-button.bk-button-success.is-outline:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+  color: white;
+}
+.bk-button.bk-button-success.is-text {
+  color: #2dcb56;
+  background: none;
+  border: none;
+}
+.bk-button.bk-button-success.is-text:hover {
+  color: #45e35f;
+}
+.bk-button.bk-button-hover-success:hover {
+  background-color: #45e35f;
+  border-color: #45e35f;
+  color: white;
+}
+.bk-button.bk-button-danger {
+  background-color: #ea3636;
+  color: white;
+  border-color: #ea3636;
+}
+.bk-button.bk-button-danger:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+}
+.bk-button.bk-button-danger:active {
+  background-color: #db2626;
+  border-color: #db2626;
+}
+.bk-button.bk-button-danger.is-disabled {
+  background-color: #dcdee5;
+  border-color: #dcdee5;
+}
+.bk-button.bk-button-danger.is-outline {
+  color: #ea3636;
+  border-color: #ea3636;
+  background-color: white;
+}
+.bk-button.bk-button-danger.is-outline:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+  color: white;
+}
+.bk-button.bk-button-danger.is-text {
+  color: #ea3636;
+  background: none;
+  border: none;
+}
+.bk-button.bk-button-danger.is-text:hover {
+  color: #ff5656;
+}
+.bk-button.bk-button-hover-danger:hover {
+  background-color: #ff5656;
+  border-color: #ff5656;
+  color: white;
+}
+.bk-button.bk-button-small {
+  min-width: 48px;
+  height: 26px;
+  padding: 0 12px;
+}
+.bk-button.bk-button-large {
+  min-width: 74px;
+  height: 38px;
+  padding: 0 20px;
+}
+.bk-button:hover {
+  border-color: #979ba5;
+}
+.bk-button:active {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-button.is-disabled {
+  color: #dcdee5;
+  cursor: auto;
+  border-color: #dcdee5;
+}
+.bk-button.is-text {
+  font-size: 14px;
+  color: #63656e;
+  text-decoration: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+}
+.bk-button-group {
+  display: inline-block;
+  font-size: 0;
+}
+.bk-button-group.bk-button-group-small .bk-button {
+  min-width: 48px;
+  height: 26px;
+  padding: 0 12px;
+}
+.bk-button-group.bk-button-group-large .bk-button {
+  min-width: 74px;
+  height: 38px;
+  padding: 0 20px;
+}
+.bk-button-group .bk-button {
+  height: 32px;
+  min-width: 64px;
+  margin: 0 0 0 -1px;
+  border-radius: 0;
+}
+.bk-button-group .bk-button:not(.is-disabled) {
+  color: #63656e;
+  background-color: white;
+  border-color: #c4c6cc;
+}
+.bk-button-group .bk-button:first-child {
+  border-radius: 2px 0 0 2px;
+}
+.bk-button-group .bk-button:last-child {
+  border-radius: 0 2px 2px 0;
+}
+.bk-button-group .bk-button:only-child {
+  border-radius: 2px;
+}
+.bk-button-group .bk-button:hover:not(.is-disabled),
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+  position: relative;
+  z-index: 1;
+  color: #3a84ff;
+  background-color: white;
+  border-color: #3a84ff;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-card {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+}
+.bk-card .bk-card-head {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  padding: 0 20px;
+  line-height: 50px;
+  border-bottom: 1px solid #f0f2f5;
+}
+.bk-card .bk-card-head .title {
+  font-weight: 600;
+  color: #63656e;
+  display: inline-block;
+  max-width: 85%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-card .bk-card-body {
+  width: 100%;
+  padding: 0 20px;
+  text-align: left;
+}
+.bk-card .bk-card-footer {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  border-top: 1px solid #f0f2f5;
+}
+.bk-card-border-none {
+  border: none;
+}
+.bk-checkbox {
+  display: inline-block;
+  margin-right: 30px;
+  font-size: 14px;
+  letter-spacing: normal;
+  color: #63656e;
+  cursor: pointer;
+  user-select: none;
+}
+.bk-checkbox.is-checked .bk-checkbox-input {
+  background: #3a84ff;
+  border-color: #3a84ff;
+  transition: all 0.1s;
+}
+.bk-checkbox.is-checked .bk-checkbox-input::after {
+  position: absolute;
+  top: 1px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: '';
+  transform: scaleY(1) rotate(45deg);
+  transform-origin: center;
+}
+.bk-checkbox.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-checkbox.is-disabled .bk-checkbox-input {
+  background: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
+  background: #dcdee5;
+}
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
+  background: #dcdee5;
+}
+.bk-checkbox .bk-checkbox-input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  vertical-align: middle;
+  border: 1px solid #979ba5;
+  border-radius: 2px;
+}
+.bk-checkbox .bk-checkbox-original {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}
+.bk-checkbox .bk-checkbox-label {
+  display: inline-block;
+  line-height: 18px;
+  vertical-align: middle;
+}
+.bk-collapse-wrapper .bk-collapse-item {
+  text-align: left;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header {
+  position: relative;
+  height: 42px;
+  padding: 0 10px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 42px;
+  color: #63656e;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon {
+  position: absolute;
+  right: 10px;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon svg {
+  font-size: 20px;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-content {
+  display: none;
+  padding: 0 10px;
+  font-size: 13px;
+  color: #979ba5;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-content.active {
+  display: block;
+}
+.bk-modal-wrapper.bk-dialog-wrapper {
+  position: relative;
+}
+.bk-modal-wrapper.bk-dialog-wrapper * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.bk-modal-wrapper.bk-dialog-wrapper.scroll-able .bk-modal-content {
+  overflow: auto;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 30px;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool .bk-dialog-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 26px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 50%;
+  transform: rotate(45deg);
+  justify-content: center;
+  align-items: center;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header {
+  padding: 24px;
+  font-size: 20px;
+  line-height: 1;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-dialog-title {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  font-size: 24px;
+  color: #313238;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-content {
+  height: calc(100% - 132px);
+  padding: 3px 24px 26px;
+  margin-bottom: 58px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #63656e;
+}
+.bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 58px;
+  padding: 12px 24px;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+  border-radius: 2px;
+}
+.bk-exception-wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-direction: column;
+}
+.bk-exception-wrapper .bk-exception-img {
+  display: flex;
+  width: 480px;
+  height: 240px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-exception-wrapper .bk-exception-img.part-img {
+  width: 120px;
+  height: 100px;
+}
+.bk-exception-wrapper .bk-exception-img .exception-image {
+  display: block;
+  height: 100%;
+  vertical-align: middle;
+  object-fit: contain;
+}
+.bk-exception-wrapper .bk-exception-text {
+  font-size: 24px;
+  color: #63656e;
+  text-align: center;
+}
+.bk-exception-wrapper .bk-exception-text.part-text {
+  font-size: 14px;
+}
+.bk-fixed-navbar {
+  position: fixed;
+  right: 10px;
+  width: 52px;
+  padding: 22px 14px;
+  background: #fff;
+  border-radius: 26px;
+  opacity: 1;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.bk-fixed-navbar.middle {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bk-fixed-navbar.bottom {
+  bottom: 10%;
+}
+.bk-fixed-navbar.top {
+  top: 10%;
+}
+.bk-fixed-navbar .fixed-navbar-item {
+  display: flex;
+  color: #63656e;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.bk-fixed-navbar .fixed-navbar-item:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}
+.bk-fixed-navbar .fixed-navbar-item:not(:last-of-type) {
+  margin-bottom: 25px;
+}
+.bk-fixed-navbar .fixed-navbar-item .icon {
+  margin-bottom: 5px;
+  font-size: 17px;
+}
+.bk-fixed-navbar .fixed-navbar-item .text {
+  font-size: 12px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-input {
+  display: flex;
+  align-items: stretch;
+  height: 32px;
+  font-size: 12px;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+.bk-input--suffix-icon {
+  padding-right: 10px;
+  font-size: 16px;
+  color: #c4c6cc;
+  align-self: center;
+}
+.bk-input--large {
+  height: 38px;
+  font-size: 16px;
+}
+.bk-input--small {
+  height: 26px;
+  font-size: 12px;
+}
+.bk-input.is-focused:not(.is-readonly) {
+  border-color: #3a84ff;
+  outline: 0;
+  box-shadow: 0px 0px 3px 0px #a3c5fd;
+}
+.bk-input.is-disabled {
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  opacity: 1;
+}
+.bk-input--prefix-area,
+.bk-input--suffix-area {
+  display: flex;
+  padding: 0 10px;
+  color: #63656e;
+  background-color: #f4f6fa;
+  border-right: 1px solid #c4c6cc;
+  align-items: center;
+}
+.bk-input--suffix-area {
+  border: 0;
+  border-left: 1px solid #c4c6cc;
+}
+.bk-input--max-length {
+  align-self: center;
+  padding-right: 10px;
+}
+.bk-input--max-length span {
+  color: #979ba5;
+}
+.bk-input--text {
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 1;
+  color: #63656e;
+  background-color: white;
+  background-image: none;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  flex: 1;
+}
+.bk-input--text[type='search']::-webkit-search-decoration,
+.bk-input--text[type='search']::-webkit-search-cancel-button,
+.bk-input--text[type='search']::-webkit-search-results-button,
+.bk-input--text[type='search']::-webkit-search-results-decoration {
+  appearance: none;
+}
+.bk-input--text [type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-input--text [type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-input--text[type='number']::-webkit-inner-spin-button,
+.bk-input--text[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.bk-input--text::placeholder {
+  color: #c4c6cc;
+}
+.bk-input--number-control {
+  width: 26px;
+  height: 100%;
+  font-size: 0;
+  flex-direction: column;
+}
+.bk-input--number-control span {
+  display: block;
+  height: 50%;
+  overflow: hidden;
+  color: #c4c6cc;
+}
+.bk-input--number-control svg {
+  font-size: 16px;
+}
+.bk-input--number-control span:first-child {
+  transform: rotate(180deg);
+}
+.bk-input--number-control span:hover {
+  background-color: #f4f6fa;
+}
+.bk-link {
+  font-size: 14px;
+  text-decoration: none;
+}
+.bk-link.is-disabled {
+  cursor: not-allowed;
+}
+.bk-link.has-underline {
+  text-decoration: underline;
+}
+.bk-link.default {
+  color: #63656e;
+}
+.bk-link.default.is-disabled {
+  color: #dcdee5;
+}
+.bk-link.default:hover {
+  color: #979ba5;
+}
+.bk-link.primary {
+  color: #3a84ff;
+}
+.bk-link.primary.is-disabled {
+  color: #a3c5fd;
+}
+.bk-link.primary:hover {
+  color: #699df4;
+}
+.bk-link.success {
+  color: #2dcb56;
+}
+.bk-link.success.is-disabled {
+  color: #94f5a4;
+}
+.bk-link.success:hover {
+  color: #45e35f;
+}
+.bk-link.warning {
+  color: #ff9c01;
+}
+.bk-link.warning.is-disabled {
+  color: #ffd695;
+}
+.bk-link.warning:hover {
+  color: #ffb848;
+}
+.bk-link.danger {
+  color: #ea3636;
+}
+.bk-link.danger:hover {
+  color: #ff5656;
+}
+.bk-link.danger.is-disabled {
+  color: #fd9c9c;
+}
+.bk-dropdown {
+  display: inline-block;
+}
+.bk-dropdown .bk-dropdown-content {
+  display: none;
+  box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
+}
+.bk-dropdown .bk-dropdown-content[data-show] {
+  display: block;
+}
+.bk-dropdown-menu {
+  min-width: 100%;
+  padding: 5px 0;
+  margin: 0;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.bk-dropdown-menu::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.bk-dropdown-menu::-webkit-scrollbar-thumb {
+  background: #dde4eb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
+}
+.bk-dropdown-item {
+  display: block;
+  height: 32px;
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 33px;
+  color: #63656e;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+}
+.bk-dropdown-item:hover {
+  color: #3a84ff;
+  background-color: #eaf3ff;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-loading-wrapper {
+  position: static;
+  display: inline-block;
+  font-size: 0;
+}
+.bk-loading-wrapper.bk-nested-loading {
+  position: relative;
+}
+.bk-loading-wrapper.bk-nested-loading .bk-loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 4;
+  transform: translate(-50%, -50%);
+}
+.bk-loading-wrapper .bk-loading-mask {
+  opacity: 0.5;
+}
+.bk-loading-wrapper .bk-loading-mask::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.9);
+  content: '';
+}
+.bk-loading-wrapper .bk-loading-indicator {
+  font-size: 14px;
+}
+.bk-loading-wrapper .bk-loading-indicator .dot-1 {
+  background-color: #ea3636;
+  animation-delay: 0.1s;
+}
+.bk-loading-wrapper .bk-loading-indicator .dot-2 {
+  background-color: #ff9c01;
+  animation-delay: 0.25s;
+}
+.bk-loading-wrapper .bk-loading-indicator .dot-3 {
+  background-color: #2dcb56;
+  animation-delay: 0.4s;
+}
+.bk-loading-wrapper .bk-loading-indicator .dot-4 {
+  background-color: #3a84ff;
+  animation-delay: 0.55s;
+  margin-right: 0;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-1 {
+  transform: rotate(-135deg);
+  animation-delay: 0.6s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-2 {
+  transform: rotate(-90deg);
+  animation-delay: 0.75s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-3 {
+  transform: rotate(-45deg);
+  animation-delay: 0.9s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-4 {
+  transform: rotate(0deg);
+  animation-delay: 1.05s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-5 {
+  transform: rotate(45deg);
+  animation-delay: 1.2s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-6 {
+  transform: rotate(90deg);
+  animation-delay: 1.35s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-7 {
+  transform: rotate(135deg);
+  animation-delay: 1.5s;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval-8 {
+  transform: rotate(180deg);
+  animation-delay: 1.65s;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
+  background-color: #2dcb56;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
+  background-color: #ea3636;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
+  background-color: #ff9c01;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
+  background-color: #3a84ff;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
+  background-color: white;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
+  background-color: #c4c6cc;
+}
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  height: 40px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
+  height: 22px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot.dot-4 {
+  margin-right: 0;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .oval {
+  width: 4px;
+  height: 5px;
+  border-radius: 5px;
+  transform-origin: center 11px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-loading-title {
+  font-size: 12px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
+  height: 52px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot.dot-4 {
+  margin-right: 0;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .oval {
+  width: 8px;
+  height: 12px;
+  border-radius: 12px;
+  transform-origin: center 26px;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-loading-title {
+  font-size: 14px;
+}
+.bk-loading-wrapper .bk-loading-indicator .bk-loading-title {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: normal;
+  color: #63656e;
+  text-align: center;
+}
+.bk-loading-wrapper .bk-loading-indicator .dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+  border-radius: 50%;
+  transform: scale(0.6);
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-name: loading-scale-animate;
+  animation-direction: normal;
+}
+.bk-loading-wrapper .bk-loading-indicator .oval {
+  position: absolute;
+  width: 6px;
+  height: 8px;
+  background-color: #63656e;
+  border-radius: 8px;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-name: fade;
+  transform-origin: center 20px;
+  animation-direction: normal;
+}
+.bk-modal-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%);
+}
+.bk-modal-wrapper .bk-modal-body {
+  height: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.bk-popover .bk-popover-reference {
+  display: inline-block;
+}
+.bk-popover .bk-popover-content {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #26323d;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.bk-popover .bk-popover-content[data-theme='dark'] {
+  color: #fff;
+  background: #26323d;
+}
+.bk-popover .bk-popover-content[data-theme='light'] {
+  color: #26323d;
+  background-color: #fff;
+  box-shadow: 0 0 6px 0 #dcdee5;
+}
+.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+  box-shadow: 0 0 6px 0 #dcdee5;
+}
+.bk-popover .bk-popover-content[data-show] {
+  display: block;
+}
+.bk-popover .bk-popover-content .arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  visibility: hidden;
+}
+.bk-popover .bk-popover-content .arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+  bottom: -4px;
+}
+.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+  top: -4px;
+}
+.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: 0;
+}
+.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -8px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-progress {
+  display: inline-block;
+}
+.bk-progress .progress-outer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.bk-progress .progress-bar {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  text-align: center;
+  vertical-align: middle;
+  background: #f0f1f5;
+  border-radius: 50px;
+}
+.bk-progress .progress-bar.bk-progress-small {
+  height: 2px;
+}
+.bk-progress .progress-bar.bk-progress-normal {
+  height: 4px;
+}
+.bk-progress .progress-bar.bk-progress-large {
+  height: 12px;
+}
+.bk-progress .progress-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
+  border-radius: 50px;
+  transition: width 0.5s ease;
+}
+.bk-progress .progress-inner.bk-primary {
+  background: #3a84ff;
+}
+.bk-progress .progress-inner.bk-success {
+  background: #2dcb56;
+}
+.bk-progress .progress-inner.bk-warning {
+  background: #ff9c01;
+}
+.bk-progress .progress-inner.bk-danger {
+  background: #ea3636;
+}
+.bk-progress .inner-text {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  text-align: center;
+}
+.bk-progress .progress-text {
+  width: 7%;
+  text-align: center;
+}
+.bk-progress .process-circle-trail {
+  stroke: #f5f5f5;
+}
+.bk-progress .progress-circle-text {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  transform: translateY(-50%);
+}
+.bk-progress-line {
+  width: 100%;
+}
+.bk-progress-circle,
+.bk-progress-dashboard {
+  position: relative;
+}
+.bk-radio {
+  display: inline-block;
+  margin-right: 30px;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: #63656e;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+.bk-radio:last-child {
+  margin-right: 0;
+}
+.bk-radio.is-checked .bk-radio-input {
+  padding: 3px;
+  color: #3a84ff;
+  background-color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-radio.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-radio.is-disabled.is-checked .bk-radio-input {
+  background-color: #dcdee5;
+}
+.bk-radio.is-disabled .bk-radio-input {
+  cursor: not-allowed;
+  border-color: #dcdee5;
+}
+.bk-radio.is-disabled .bk-radio-text {
+  cursor: not-allowed;
+}
+.bk-radio.is-focus .bk-radio-input {
+  border-color: #3a84ff;
+}
+.bk-radio .bk-radio-text {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  color: #63656e;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.bk-radio .bk-radio-input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 5px 0 0;
+  color: #fff;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #63656e;
+  border-radius: 50%;
+  outline: none;
+  visibility: visible;
+  transition: all 0.3s;
+  background-clip: content-box;
+  appearance: none;
+}
+.bk-radio-button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  font-size: 0;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: #63656e;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  opacity: 1;
+  user-select: none;
+}
+.bk-radio-button:nth-child(n+2) {
+  margin-left: -1px;
+}
+.bk-radio-button:first-child .bk-radio-button-text {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.bk-radio-button:last-child .bk-radio-button-text {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.bk-radio-button.is-checked {
+  z-index: 2;
+}
+.bk-radio-button.is-checked .bk-radio-button-text {
+  color: #fff;
+  background: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-radio-button.is-disabled {
+  z-index: 0;
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-radio-button.is-disabled .bk-radio-button-text {
+  cursor: not-allowed;
+  background: #dcdee5;
+  border-color: #dcdee5;
+}
+.bk-radio-button.is-focus .bk-radio-button-text {
+  border-color: #3a84ff;
+}
+.bk-radio-button .bk-radio-button-input {
+  position: absolute;
+  z-index: -1;
+  outline: none;
+  opacity: 0;
+}
+.bk-radio-button .bk-radio-button-text {
+  height: 32px;
+  padding: 0 18px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid #63656e;
+  transition: all 0.3s;
+}
+.bk-radio-group {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  letter-spacing: normal;
+}
+.bk-rate {
+  position: relative;
+}
+.bk-rate .bk-score-real {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+}
+.bk-rate-stars {
+  padding: 0;
+  margin: 0;
+}
+.bk-rate-stars .bk-is-edit {
+  cursor: pointer;
+}
+.bk-rate-stars:after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.bk-rate-stars .bk-rate-star {
+  float: left;
+  margin-right: 3px;
+  enable-background: new 0 0 64 64;
+  fill: #c5c7d1;
+}
+.bk-rate-stars .bk-rate-star.bk-is-select {
+  fill: #ffb848;
+}
+.bk-rate-stars .bk-rate-star:last-child {
+  margin-right: 0;
+}
+.bk-select {
+  display: inline-block;
+}
+.bk-select ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  list-style: none;
+}
+.bk-select .bk-popover-content {
+  padding: 0;
+}
+.bk-select.is-focus .bk-select-trigger .bk-select-input {
+  border-color: #3a84ff;
+  box-shadow: 0px 0px 3px 0px #a3c5fd;
+}
+.bk-select.is-disabled .bk-select-trigger .bk-select-input {
+  cursor: not-allowed;
+  background: #fafbfd;
+  border-color: #dcdee5;
+  box-shadow: unset;
+}
+.bk-select.popover-show .bk-select-trigger .angle-up {
+  transform: rotate(0);
+}
+.bk-select .bk-select-trigger {
+  position: relative;
+  cursor: pointer;
+}
+.bk-select .bk-select-trigger .bk-select-input {
+  height: 32px;
+  padding: 0 28px 0 10px;
+  font-size: 12px;
+  line-height: normal;
+  color: #63656e;
+  text-align: left;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.1s;
+  resize: none;
+}
+.bk-select .bk-select-trigger .bk-select-input::placeholder {
+  color: #c4c6cc;
+}
+.bk-select .bk-select-trigger .bk-select-prefix {
+  position: absolute;
+  top: 6px;
+  left: 4px;
+}
+.bk-select .bk-select-trigger .angle-up {
+  transform: rotate(180deg);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  color: #979ba5;
+  position: absolute;
+  top: 6px;
+  right: 4px;
+}
+.bk-select .bk-select-trigger .clear-icon {
+  transition: all 0.1s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  color: #c4c6cc;
+  position: absolute;
+  top: 6px;
+  right: 4px;
+}
+.bk-select .bk-select-trigger .clear-icon:hover {
+  color: #979ba5;
+}
+.bk-select .bk-select-dropdown .bk-select-search {
+  position: relative;
+  padding: 0 5px;
+}
+.bk-select .bk-select-dropdown .bk-select-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  font-size: 16px;
+  color: #979ba5;
+  transform: translateY(-50%);
+}
+.bk-select .bk-select-dropdown .bk-select-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 26px;
+  font-size: 12px;
+  cursor: text;
+  border: none;
+  border-bottom: 1px solid #dcdee5;
+  outline: 0;
+}
+.bk-select .bk-select-empty {
+  height: 32px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: center;
+  user-select: none;
+}
+.bk-select .bk-select-options {
+  padding: 6px 0;
+}
+.bk-select .bk-select-option {
+  height: 32px;
+  padding: 0 10px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-select .bk-select-option:hover {
+  color: #3a84ff;
+  background-color: #eaf3ff;
+}
+.bk-select .bk-select-option.is-selected {
+  color: #3a84ff;
+  background-color: #f4f6fa;
+}
+.bk-select .bk-select-option.is-selected.is-multiple::after {
+  position: absolute;
+  right: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  content: '\2713';
+}
+.bk-select .bk-select-option.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: transparent;
+}
+.bk-select .bk-option-group-label {
+  height: 32px;
+  margin: 0 10px;
+  line-height: 32px;
+  color: #979ba5;
+  text-align: left;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: auto;
+  background: #fff;
+  transform: initial;
+  box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.2);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper.scroll-able .bk-modal-content {
+  overflow: auto;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header {
+  width: 100%;
+  height: 60px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close {
+  position: absolute;
+  top: 0;
+  width: 30px;
+  height: 60px;
+  font-size: 24px;
+  line-height: 60px;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  background-color: #3a84ff;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+  left: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-right: solid 2px #fff;
+  content: '';
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+  right: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-left: solid 2px #fff;
+  content: '';
+  transform: translate(50%, -50%) rotate(-45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title {
+  height: 60px;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 60px;
+  color: #666;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+  padding: 0px 0px 0px 50px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-switcher {
+  position: relative;
+  display: inline-block;
+  /* 默认尺寸 */
+  width: 36px;
+  height: 20px;
+  line-height: 20px;
+  text-align: left;
+  vertical-align: middle;
+  background-color: #c4c6cc;
+  border-radius: 50px;
+  transition: all 0.4s ease;
+  /* 显示文本时固定尺寸 */
+}
+.bk-switcher:focus {
+  box-shadow: 0px 0px 6px #c4c6cc;
+}
+.bk-switcher:after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 100px;
+  content: '';
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.bk-switcher:not(.show-label):after {
+  width: 16px;
+  height: 16px;
+}
+.bk-switcher:not(.show-label).is-checked:after {
+  margin-left: -18px;
+}
+.bk-switcher.is-loading {
+  cursor: defalt;
+}
+.bk-switcher.is-loading input[type=checkbox] {
+  cursor: default;
+}
+.bk-switcher .bk-switcher-loading {
+  position: absolute;
+  top: 50%;
+  left: 1px;
+  z-index: 10;
+  display: flex;
+  width: 18px;
+  height: 18px;
+  transform: translateY(-50%);
+}
+.bk-switcher .bk-switcher-loading svg {
+  color: #3a84ff;
+}
+.bk-switcher .switcher-label {
+  display: none;
+  width: 30px;
+  height: 28px;
+  margin: 0 0 0 26px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #fff;
+  text-align: center;
+  vertical-align: top;
+  transition: all ease 0.3s;
+}
+.bk-switcher .switcher-label .on-text {
+  display: none;
+}
+.bk-switcher .switcher-label .off-text {
+  display: inline-block;
+}
+.bk-switcher.show-label {
+  width: 60px;
+  height: 28px;
+  line-height: 28px;
+}
+.bk-switcher.show-label .switcher-label {
+  display: inline-block;
+}
+.bk-switcher.show-label .bk-switcher-loading {
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-switcher.show-label .bk-switcher-loading svg {
+  font-size: 24px;
+}
+.bk-switcher.is-disabled {
+  cursor: default;
+  /* background-color: #eee !important; */
+  opacity: 0.3;
+}
+.bk-switcher.is-disabled input[type=checkbox] {
+  cursor: not-allowed;
+}
+.bk-switcher.is-checked {
+  background: #2dcb56;
+}
+.bk-switcher.is-checked:focus {
+  box-shadow: 0px 0px 6px #2dcb56;
+}
+.bk-switcher.is-checked.primary {
+  background: #3a84ff;
+}
+.bk-switcher.is-checked.primary:focus {
+  box-shadow: 0px 0px 6px #3a84ff;
+}
+.bk-switcher.is-checked:after {
+  top: 2px;
+  left: 100%;
+  margin-left: -26px;
+}
+.bk-switcher.is-checked .switcher-label {
+  margin-left: 4px;
+}
+.bk-switcher.is-checked .switcher-label .on-text {
+  display: inline-block;
+}
+.bk-switcher.is-checked .switcher-label .off-text {
+  display: none;
+}
+.bk-switcher.is-checked .bk-switcher-loading {
+  right: 1px;
+  left: auto;
+}
+.bk-switcher.bk-switcher-outline {
+  background: #fff;
+  border: 1px solid #c4c6cc;
+}
+.bk-switcher.bk-switcher-outline:after {
+  width: 22px;
+  height: 22px;
+  background-color: #c4c6cc;
+  box-shadow: none;
+}
+.bk-switcher.bk-switcher-outline .switcher-label {
+  height: 26px;
+  margin-left: 24px;
+  color: #c4c6cc;
+}
+.bk-switcher.bk-switcher-outline .bk-switcher-loading {
+  width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-switcher.bk-switcher-outline.is-checked {
+  border: 1px solid #2dcb56;
+}
+.bk-switcher.bk-switcher-outline.is-checked:after {
+  margin-left: -24px;
+  background-color: #2dcb56;
+}
+.bk-switcher.bk-switcher-outline.is-checked .switcher-label {
+  margin-left: 4px;
+  color: #2dcb56;
+}
+.bk-switcher.bk-switcher-outline.is-disabled {
+  background-color: #fff;
+  border-color: #eee;
+}
+.bk-switcher.bk-switcher-outline.is-disabled .switcher-label {
+  color: #eee;
+}
+.bk-switcher.bk-switcher-outline.is-disabled:after {
+  background-color: #eee;
+}
+.bk-switcher.bk-switcher-outline.bk-switcher-large:after {
+  width: 18px;
+  height: 18px;
+}
+.bk-switcher.bk-switcher-outline.bk-switcher-large.is-checked:after {
+  margin-left: -20px;
+}
+.bk-switcher.bk-switcher-square {
+  border-radius: 2px;
+}
+.bk-switcher.bk-switcher-square:after {
+  border-radius: 2px;
+}
+.bk-switcher.bk-switcher-square .switcher-label {
+  width: 35px;
+}
+.bk-switcher.bk-switcher-large {
+  width: 42px;
+  height: 24px;
+  line-height: 22px;
+  border-radius: 12px;
+}
+.bk-switcher.bk-switcher-large:after {
+  width: 20px;
+  height: 20px;
+}
+.bk-switcher.bk-switcher-large.is-checked:after {
+  top: 2px;
+  left: 100%;
+  margin-left: -22px;
+}
+.bk-switcher.bk-switcher-large .bk-switcher-loading {
+  width: 22px;
+  height: 22px;
+}
+.bk-switcher.bk-switcher-small {
+  width: 26px;
+  height: 16px;
+  line-height: 22px;
+}
+.bk-switcher.bk-switcher-small:after {
+  width: 12px;
+  height: 12px;
+}
+.bk-switcher.bk-switcher-small.is-checked:after {
+  top: 2px;
+  left: 100%;
+  margin-left: -14px;
+}
+.bk-switcher.bk-switcher-small .bk-switcher-loading {
+  width: 14px;
+  height: 14px;
+}
+.bk-switcher input[type=checkbox],
+.bk-switcher input[type=radio] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+.bk-table .bk-table-body {
+  height: 500px;
+  overflow: auto;
+  background: white;
+}
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.bk-table .bk-table-body table .cell {
+  height: 40px;
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+  border-bottom: 1px solid #dfe0e5;
+}
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #fff;
+}
+.bk-table .bk-table-body table thead th.active {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: #f5f7fa;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: #fff;
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
+}
+.bk-form {
+  text-align: left;
+}
+.bk-form .bk-form-item {
+  display: flex;
+  margin-bottom: 24px;
+}
+.bk-form .bk-form-label {
+  width: 150px;
+  padding-right: 24px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: right;
+}
+.bk-form .bk-form-content {
+  position: relative;
+  line-height: 32px;
+}
+.bk-form .bk-form-error {
+  position: absolute;
+  left: 0;
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: #ea3636;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-item {
+  flex-direction: column;
+}
+.bk-form--vertical .bk-form-label {
+  width: auto;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-content {
+  text-align: left;
+}
+* {
+  box-sizing: border-box;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.bk-steps {
+  display: flex;
+  width: 100%;
+  font-size: 0;
+}
+.bk-steps .icon-circle-4-1 {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 7px;
+}
+.bk-steps .bk-icon {
+  font-size: 24px;
+  line-height: 24px;
+}
+.bk-steps .bk-icon.icon-loading {
+  display: inline-block;
+  font-size: 14px;
+  animation: loadingCircle 1s infinite linear;
+}
+.bk-steps .bk-step {
+  position: relative;
+  margin-right: 8px;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-steps .bk-step .bk-step-indicator {
+  z-index: 1;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-right: 8px;
+  line-height: 24px;
+  color: #979ba5;
+  text-align: center;
+  vertical-align: top;
+  background-color: #fff;
+  border: 1px solid #979ba5;
+  border-radius: 50%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.bk-steps .bk-step .bk-step-number {
+  font-family: arial;
+  font-size: 14px;
+}
+.bk-steps .bk-step .bk-step-content {
+  display: inline-block;
+  vertical-align: top;
+}
+.bk-steps .bk-step .bk-step-title {
+  position: relative;
+  display: inline-block;
+  padding-right: 8px;
+  font-size: 14px;
+  line-height: 24px;
+  color: #63656e;
+  word-break: break-all;
+}
+.bk-steps .bk-step .bk-step-title::after {
+  position: absolute;
+  top: 12px;
+  left: 100%;
+  width: 99999px;
+  height: 1px;
+  background-color: transparent;
+  content: '';
+}
+.bk-steps .bk-step .bk-step-description {
+  max-width: 140px;
+  font-size: 12px;
+  color: #979ba5;
+  white-space: normal;
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator {
+  margin-right: 0;
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
+  position: absolute;
+  top: 12px;
+  left: 100%;
+  width: 99999px;
+  height: 1px;
+  background-color: transparent;
+  content: '';
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
+  top: 10px;
+  left: 32px;
+}
+.bk-steps .bk-step:last-child {
+  margin-right: 0;
+  flex: none;
+}
+.bk-steps .bk-step:last-child .bk-step-title {
+  padding-right: 0;
+}
+.bk-steps .bk-step:last-child .bk-step-title::after {
+  display: none;
+}
+.bk-steps .bk-step.done .bk-step-title,
+.bk-steps .bk-step.done .bk-step-description {
+  color: #63656e;
+}
+.bk-steps .bk-step.current .bk-step-number,
+.bk-steps .bk-step.current .bk-step-icon,
+.bk-steps .bk-step.current .bk-step-text {
+  border-width: 2px;
+}
+.bk-steps .bk-step.current .bk-step-title,
+.bk-steps .bk-step.current .bk-step-description {
+  color: #63656e;
+}
+.bk-steps .bk-step.current.bk-step-error .bk-step-indicator {
+  background-color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps .bk-step.current.bk-step-error .bk-step-title,
+.bk-steps .bk-step.current.bk-step-error .bk-step-description {
+  color: #ea3636;
+}
+.bk-steps-primary .bk-step.done .bk-step-number,
+.bk-steps-primary .bk-step.done .bk-step-icon,
+.bk-steps-primary .bk-step.done .bk-step-text {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-steps-primary .bk-step.done .bk-step-title::after,
+.bk-steps-primary .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #3a84ff 50%, transparent 0%);
+}
+.bk-steps-primary .bk-step.done::after {
+  background-image: linear-gradient(#3a84ff 50%, transparent 0%);
+}
+.bk-steps-primary .bk-step.current .bk-step-number,
+.bk-steps-primary .bk-step.current .bk-step-icon,
+.bk-steps-primary .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-steps-warning .bk-step.done .bk-step-number,
+.bk-steps-warning .bk-step.done .bk-step-icon,
+.bk-steps-warning .bk-step.done .bk-step-text {
+  color: #ff9c01;
+  border-color: #ff9c01;
+}
+.bk-steps-warning .bk-step.done .bk-step-title::after,
+.bk-steps-warning .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #ff9c01 50%, transparent 0%);
+}
+.bk-steps-warning .bk-step.done::after {
+  background-image: linear-gradient(#ff9c01 50%, transparent 0%);
+}
+.bk-steps-warning .bk-step.current .bk-step-number,
+.bk-steps-warning .bk-step.current .bk-step-icon,
+.bk-steps-warning .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #ff9c01;
+  border-color: #ff9c01;
+}
+.bk-steps-success .bk-step.done .bk-step-number,
+.bk-steps-success .bk-step.done .bk-step-icon,
+.bk-steps-success .bk-step.done .bk-step-text {
+  color: #2dcb56;
+  border-color: #2dcb56;
+}
+.bk-steps-success .bk-step.done .bk-step-title::after,
+.bk-steps-success .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #2dcb56 50%, transparent 0%);
+}
+.bk-steps-success .bk-step.done::after {
+  background-image: linear-gradient(#2dcb56 50%, transparent 0%);
+}
+.bk-steps-success .bk-step.current .bk-step-number,
+.bk-steps-success .bk-step.current .bk-step-icon,
+.bk-steps-success .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #2dcb56;
+  border-color: #2dcb56;
+}
+.bk-steps-danger .bk-step.done .bk-step-number,
+.bk-steps-danger .bk-step.done .bk-step-icon,
+.bk-steps-danger .bk-step.done .bk-step-text {
+  color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps-danger .bk-step.done .bk-step-title::after,
+.bk-steps-danger .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
+}
+.bk-steps-danger .bk-step.done::after {
+  background-image: linear-gradient(#ea3636 50%, transparent 0%);
+}
+.bk-steps-danger .bk-step.current .bk-step-number,
+.bk-steps-danger .bk-step.current .bk-step-icon,
+.bk-steps-danger .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps-dashed .bk-step .bk-step-title::after,
+.bk-steps-dashed .bk-step .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 6px 1px;
+}
+.bk-steps-solid .bk-step .bk-step-title::after,
+.bk-steps-solid .bk-step .bk-step-indicator::after {
+  background-color: #c4c6cc;
+}
+.bk-steps-vertical {
+  flex-direction: column;
+  height: 100%;
+}
+.bk-steps-vertical .bk-step {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+.bk-steps-vertical .bk-step .bk-step-title::after,
+.bk-steps-vertical .bk-step .bk-step-indicator::after {
+  display: none;
+}
+.bk-steps-vertical .bk-step::after {
+  position: absolute;
+  top: 32px;
+  left: 12px;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(#c4c6cc 50%, transparent 0%);
+  background-position: right;
+  background-repeat: repeat-y;
+  background-size: 1px 6px;
+  content: '';
+}
+.bk-steps-vertical .bk-step .bk-step-title {
+  display: flex;
+  height: 100%;
+  margin-top: 0;
+  text-align: left;
+  align-items: center;
+}
+.bk-steps-small .bk-step .bk-step-indicator {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+}
+.bk-steps-small .bk-step .bk-step-title {
+  font-size: 12px;
+  line-height: 20px;
+}
+.bk-steps-small .bk-step .bk-step-number {
+  font-size: 12px;
+}
+.bk-steps-small .bk-step .bk-icon {
+  font-size: 20px;
+  line-height: 24px;
+}
+.bk-steps-small .bk-step::after {
+  top: 28px;
+  left: 10px;
+}
+.bk-steps-small .bk-step .bk-step-title::after {
+  top: 10px;
+}
+.bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after {
+  top: 8px;
+  left: 28px;
+}
+.bk-message {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  display: flex;
+  min-width: 300px;
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #63656e;
+  background: #f0f8ff;
+  border: 1px solid #e1ecff;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, 0.1);
+  justify-content: space-between;
+}
+.bk-message .bk-message-close {
+  padding-left: 20px;
+  margin-right: 0;
+  font-size: 18px;
+  cursor: pointer;
+}
+.bk-message-icon {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 18px;
+  color: #3a84ff;
+}
+.bk-message-primary {
+  background: #f0f8ff;
+  border: 1px solid #e1ecff;
+}
+.bk-message-warning {
+  background: #fff4e2;
+  border: 1px solid #ffe8c3;
+}
+.bk-message-warning .bk-message-icon {
+  color: #ff9c01;
+}
+.bk-message-success {
+  background: #f2fff4;
+  border: 1px solid #dcffe2;
+}
+.bk-message-success .bk-message-icon {
+  color: #2dcb56;
+}
+.bk-message-danger {
+  background: #ffeded;
+  border: 1px solid #ffdddd;
+}
+.bk-message-danger .bk-message-icon {
+  color: #ea3636;
+}
+.bk-notify {
+  position: fixed;
+  display: flex;
+  width: 360px;
+  padding: 24px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #63656e;
+  background: #fff;
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
+}
+.bk-notify .bk-notify-icon {
+  position: absolute;
+  top: 22px;
+  margin-right: 5px;
+  font-size: 18px;
+  color: #3a84ff;
+}
+.bk-notify.bk-notify-warning .bk-notify-icon {
+  color: #ff9c01;
+}
+.bk-notify.bk-notify-success .bk-notify-icon {
+  color: #2dcb56;
+}
+.bk-notify.bk-notify-danger .bk-notify-icon {
+  color: #ea3636;
+}
+.bk-notify .bk-notify-icon.bk-notify-close {
+  top: 8px;
+  right: 12px;
+  margin-right: 0;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+}
+.bk-notify .bk-notify-content-header {
+  display: inline-block;
+  padding-left: 23px;
+  margin-top: 0;
+  margin-bottom: 4px;
+  font-size: 14px;
   font-weight: 700;
-  border: 0;
-  border-radius: 3em;
+}
+.bk-notify .bk-notify-content-text {
+  display: inline-block;
+  padding-left: 23px;
+}
+.bk-tree .bk-tree-node {
+  position: relative;
+  height: var(--lineHeight);
+  padding-left: 0;
+  line-height: var(--lineHeight);
+  cursor: pointer;
+}
+.bk-tree .bk-tree-node.is-open::after {
+  position: absolute;
+  top: calc(var(--lineHeight) / 2);
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: calc(var(--lines) * var(--lineHeight));
+  pointer-events: none;
+  border-left: var(--level-line);
+  content: '';
+}
+.bk-tree .bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth)*var(--indent));
+}
+.bk-tree .bk-tree-node:not(.is-root)::before {
+  position: absolute;
+  top: 50%;
+  left: calc(0px - var(--indent));
+  z-index: 1;
+  width: var(--indent);
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
+.bk-tree .bk-tree-node .bk-tree-icon {
+  margin: 0 6px 0 4px;
+}
+.bk-slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider .bk-slider-runway {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  vertical-align: middle;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 2px;
+  opacity: 1;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar {
+  position: absolute;
+  height: 4px;
+  background: #3a84ff;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.vertical {
+  width: 4px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
+  height: 4px;
+}
+.bk-slider .bk-slider-runway .disable {
+  background: #979ba5;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels {
+  position: relative;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.vertical {
+  left: 18px;
+  display: flex;
+  width: 10px;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
+  top: 10px;
+  display: flex;
+  width: 100%;
+  height: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
+  position: absolute;
+  display: flex;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
+  left: 10px;
+  transform: translateY(50%);
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
+  top: 10px;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval.vertical {
+  left: 2px;
+}
+.bk-slider-input {
+  display: flex;
+  margin: 0 0 0 28px;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider-input .input-item {
+  width: 92px;
+}
+.bk-slider-input .input-center {
+  margin: 0 7px;
+}
+.bk-slider-button {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  line-height: normal;
+  text-align: center;
+  background-color: transparent;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+}
+.bk-slider-button:hover {
+  cursor: grab;
+}
+.bk-slider-button.grabbing {
+  cursor: grabbing;
+}
+.bk-slider-button.vertical {
+  left: -10px;
+  transform: translateY(50%);
+}
+.bk-slider-button.horizontal {
+  top: -10px;
+  transform: translateX(-50%);
+}
+.bk-slider-button .slider-button {
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 2px solid #3a84ff;
+  border-radius: 50%;
+  transition: 0.2s;
+  user-select: none;
+}
+.bk-slider-button .slider-button-disable {
+  border: 2px solid #979ba5;
+}
+.bk-slider-button .slider-button:hover {
+  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
+}
+.bk-slider-button .slider-button:focus {
+  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
+}
+.bk-slider-button .slider-button-label {
+  position: absolute;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider-button .slider-button-label.vertical {
+  left: 28px;
+}
+.bk-slider-button .slider-button-label.horizontal {
+  top: 20px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.collapse {
+  width: 60px;
+}
+.open {
+  background: #151d2c;
+}
+.bk-menu {
+  display: flex;
+  width: 260px;
+  background-color: #182132;
+  flex-direction: column;
+  transition: width 0.3s ease-out;
+}
+.bk-menu.is-collapse {
+  width: 60px;
+}
+.bk-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-out;
+}
+.bk-menu-submenu.is-opened {
+  background: #151d2c;
+}
+.bk-menu-submenu:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-submenu .submenu-header {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+}
+.bk-menu-submenu .submenu-header.is-collapse {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-submenu .submenu-header-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-submenu .submenu-header-icon .menu-icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  color: #b0bdd5;
+}
+.bk-menu-submenu .submenu-header-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+  color: #acb9d1;
+}
+.bk-menu-submenu .submenu-header-collapse {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  color: #acb9d1;
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease-out;
+}
+.bk-menu-submenu .submenu-header-collapse.is-collapse {
+  transform: rotate(0deg);
+}
+.bk-menu-submenu .submenu-list {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  flex-direction: column;
+  flex: 1;
+  /* stylelint-disable-next-line declaration-no-important */
+  transition-property: all !important;
+}
+.bk-menu-item {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  min-height: 40px;
+  margin: 2px 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: #96a2b9;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-in-out;
+}
+.bk-menu-item:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-item.is-active {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-item .item-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-item .item-icon .default-icon {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: #63656e;
+  background-color: white;
+  border-radius: 50%;
+}
+.bk-menu-item .item-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+}
+.bk-menu-group {
+  display: flex;
+  flex-direction: column;
+}
+.bk-menu-group .group-name {
+  display: flex;
+  height: 40px;
+  margin: 0 18px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  color: #63656e;
+  text-overflow: clip;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bk-menu-group .group-wrap {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+.bk-menu .collapse-transition {
+  transition: all 0.3s ease-in-out;
+}
+.bk-navigation {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.bk-navigation-title {
+  display: flex;
+  height: 100%;
+  padding: 0 16px;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 260px;
+}
+.bk-navigation-title .title-icon {
+  display: flex;
+  font-size: 28px;
+  color: #768197;
+  flex: 0 0 28px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-navigation-title .title-desc {
+  display: inline-block;
+  margin-left: 16px;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 24px;
+  color: #96a2b9;
+  white-space: nowrap;
+}
+.bk-navigation-header {
+  flex: 0 0 52px;
+  display: flex;
+  align-items: center;
+  padding-right: 24px;
+  overflow: hidden;
+  background: #182132;
+}
+.bk-navigation-header .header-right {
+  display: flex;
+  height: 100%;
+  flex: 1;
+  align-items: center;
+}
+.bk-navigation-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+.bk-navigation-wrapper .navigation-nav {
+  position: relative;
+  z-index: 101;
+  display: flex;
+  width: 60px;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  flex: 0 1 auto;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-nav:hover {
   cursor: pointer;
-  display: inline-block;
-  line-height: 1;
 }
-.bk-button .test {
-  color: red;
+.bk-navigation-wrapper .navigation-nav .nav-slider {
+  display: flex;
+  width: 60px;
+  height: 100%;
+  background-color: #182132;
+  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  flex: 1;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-list {
+  max-height: calc(100vh - 100px);
+  padding: 12px 0 4px 0;
+  margin: 0;
+  overflow: auto;
+  flex: 1 1 auto;
 }
-.bk-button-primary {
-  color: white;
-  background-color: #1ea7fd;
+.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  height: 5px;
 }
-.bk-button-secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
+  transform: none;
+  transition: opacity 340ms ease-out;
 }
-.bk-button-small {
-  font-size: 12px;
-  padding: 10px 16px;
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer {
+  display: flex;
+  padding-left: 14px;
+  flex: 0 0 56px;
+  align-items: center;
+  justify-content: flex-start;
 }
-.bk-button-normal {
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
   font-size: 14px;
-  padding: 11px 20px;
+  color: #63656e;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
 }
-.bk-button-large {
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
+  display: flex;
+  width: 16px;
+  height: 16px;
   font-size: 16px;
-  padding: 12px 24px;
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
 }
-:root {
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 38px;
-  --border-color-base: #dcdee5;
-  --border-color-disable: #dcdee5;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: #dcdee5;
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--border-color-base);
-}
-/* 存放常用变量 */
-/********************** 字体 **********************/
-/********************** 主题色 **********************/
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 辅助色 **********************/
-/* 退出、删除、错误、严重警告等否定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 警示灯引起注意类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 成功、完成、进行等肯定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 中性色 **********************/
-/* 重要级文字信息、内容标题信息 */
-/* 次级标题、内容文字 主要文字使用颜色 */
-/* 三级文字标题、内容文字 */
-/* 边框内说明文字 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/********************** 基础颜色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-鼠标移上 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-激活 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-相应谈色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 图标大小 **********************/
-/* 最小尺寸图标 */
-/* 更小尺寸图标 */
-/* 小尺寸图标 */
-/* 正常尺寸图标 */
-/* 大尺寸图标 */
-/* 最大尺寸图标 */
-/********************** 文案 **********************/
-/* 字体 */
-/* 正常尺寸 */
-/* 小尺寸 */
-/* 大尺寸 */
-/* 主要颜色 */
-/* 次要颜色 用于 plaeholder 等 */
-/********************** 边框 **********************/
-/* 边框色 */
-/* 表单输入框色 */
-/* 表单输入框激活色 */
-/********************** 其它 **********************/
-/* 滚动条背景色 */
-/********************** 层级管理 **********************/
-/* 下拉菜单层 */
-/* @dropdownMenuZIndex: 50; */
-/* 下拉选框层 */
-/* @selectorZIndex: 100; */
-/* 日期选框层 */
-/* @dateZIndex: 200; */
-/* 文字提示层 */
-/* @tooltipZIndex: 500; */
-/* 确认提示层 */
-/* @toolboxZIndex: 700; */
-/* 加载层 */
-/* @loadingZIndex: 1000; */
-/* 消息提示层 */
-/* @messageZIndex: 2000; */
-/* 侧弹层 */
-/* @sideSliderZIndex: 1500; */
-/* 对话框层 */
-/* @dialogZIndex: 2000; */
-.bk-input {
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
+  color: #96a2b9;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
+  color: #d3d9e4;
+  cursor: pointer;
+  background: linear-gradient(270deg, #253047 0%, #263247 100%);
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
+  color: #3a3c42;
+  cursor: pointer;
+  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
+}
+.bk-navigation-wrapper .navigation-container {
+  position: relative;
+  display: flex;
+  max-width: calc(100vw - 60px);
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 1px;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-container .container-header {
+  z-index: 100;
   display: flex;
+  width: 100%;
+  height: 60px;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+  box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);
+  flex-basis: 60px;
+  flex-direction: row;
   align-items: center;
-  font-size: 12px;
+  justify-content: flex-end;
 }
-.bk-input-text {
-  line-height: normal;
-  outline: none;
-  resize: none;
-  box-sizing: border-box;
-  position: relative;
+.bk-navigation-wrapper .navigation-container .container-header-title {
+  height: 21px;
+  font-size: 16px;
+  line-height: 21px;
+  color: #313238;
+}
+.bk-navigation-wrapper .navigation-container .container-header-sets {
   display: flex;
+  flex: 1 1 auto;
   align-items: center;
+  justify-content: flex-end;
+}
+.bk-navigation-wrapper .navigation-container .container-content {
+  max-height: calc(100vh - 60px);
+  padding: 20px 24px 0;
+  overflow: auto;
+  background: #f5f7fa;
   flex: 1;
+}
+.bk-navigation-wrapper .navigation-container .container-footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.bk-date-picker {
+  display: inline-block;
+  width: 261px;
+  line-height: normal;
+}
+.bk-date-picker.long {
+  width: 342px;
+}
+.bk-date-picker.medium-width {
+  width: 362px;
+}
+.bk-date-picker.large-width {
+  width: 402px;
+}
+.bk-date-picker-rel {
+  position: relative;
+}
+.bk-date-picker-rel .bk-date-picker-editor {
+  display: block;
+  width: 100%;
   height: 32px;
-  padding: 0 10px;
-  color: #63656e;
+  padding: 0 10px 0 30px;
   font-size: 12px;
-  line-height: 16px;
-  background-color: white;
-  background-image: none;
-  border: 1px solid #dcdee5;
+  line-height: 32px;
+  color: #63656e;
+  cursor: pointer;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
-  transition: all 0.3s;
+  outline: none;
 }
-.bk-input-text:focus {
-  border-color: var(--primary-color);
-  outline: 0;
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
+  border-color: transparent transparent #c4c6cc transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {
+  border-color: transparent transparent #3a84ff transparent;
+  box-shadow: none;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {
+  border-color: transparent transparent #dcdee5 transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor:focus {
+  border: 1px solid #3a84ff;
+}
+.bk-date-picker-rel .bk-date-picker-editor::placeholder {
+  color: #c4c6cc;
 }
-.bk-input-text-disabled {
+.bk-date-picker-rel .bk-date-picker-editor[disabled] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.readonly {
   background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.medium-font {
+  font-size: 14px;
+}
+.bk-date-picker-rel .bk-date-picker-editor.large-font {
+  font-size: 16px;
+}
+.bk-date-picker-rel .clear-action {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  font-size: 14px;
+  color: #c4c6cc;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.bk-date-picker-rel .clear-action:hover {
+  color: #979ba5;
+}
+.bk-date-picker-rel .icon-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  color: #c4c6cc;
+  cursor: pointer;
+  background-color: transparent;
+}
+.bk-date-picker-rel .icon-wrapper.disabled {
   cursor: not-allowed;
-  opacity: 1;
 }
-.bk-input-text[disabled] {
+.bk-date-picker-rel .icon-wrapper i.icon-clock {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-rel .icon-wrapper .picker-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-dropdown {
+  position: absolute;
+  z-index: 900;
+  padding: 5px 0 0 0;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.bk-date-picker .bk-select-dropdown {
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+}
+.bk-date-picker-footer-wrapper {
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-date-picker-top-wrapper {
+  margin-top: -5px;
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {
+  padding-right: 140px;
+}
+.bk-picker-panel-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 140px;
+  padding: 12px 0;
+  overflow: auto;
+  font-size: 14px;
+  color: #3a84ff;
+  background-color: #fafbfd;
+  border-left: 1px solid #dcdee5;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut {
+  /* &:nth-of-type(1) {
+          padding-top: 18px;
+      }
+      &:last-child {
+          padding-bottom: 18px;
+      } */
+  padding: 6px 21px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {
+  background-color: #e1ecff;
+}
+.bk-picker-panel-body {
+  float: left;
+}
+.bk-picker-confirm {
+  height: 42px;
+  padding: 0 20px;
+  clear: both;
+  font-size: 14px;
+  line-height: 41px;
+  text-align: right;
   background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-picker-confirm a {
+  color: #979ba5;
+}
+.bk-picker-confirm a.confirm {
+  margin-left: 10px;
+  color: #3a84ff;
+}
+.bk-picker-confirm a[disabled] {
+  color: #c4c6cc;
   cursor: not-allowed;
-  opacity: 1;
 }
-.bk-input-text-lg {
-  font-size: 16px;
-  height: 38px;
+.bk-picker-confirm .bk-picker-confirm-time {
+  float: left;
+}
+.bk-date-picker-header {
+  height: 46px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 46px;
+  color: #63656e;
+  text-align: center;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-date-picker-header .bk-date-picker-header-label {
+  cursor: pointer;
+}
+.bk-date-picker-header .bk-date-picker-header-label:hover {
+  color: #3a84ff;
+}
+.bk-date-picker-header .up-to-now {
+  margin-left: 3px;
+  font-weight: 400;
+  cursor: pointer;
+}
+.bk-date-picker-header .up-to-now.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
 }
-.bk-input-text-sm {
+.bk-date-picker-cells {
+  margin: 9px;
   font-size: 12px;
+  color: #63656e;
+  white-space: normal;
+}
+.bk-date-picker-cells span {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-date-picker-cells span em {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  font-style: normal;
+  line-height: 32px;
+  cursor: pointer;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header {
+  text-align: center;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header span {
+  width: 28px;
   height: 26px;
+  margin: 3px;
+  line-height: 26px;
+  color: #63656e;
+  text-align: center;
+  cursor: default;
 }
-:root {
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 38px;
-  --border-color-base: #dcdee5;
-  --border-color-disable: #dcdee5;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: #dcdee5;
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--border-color-base);
-}
-/* 存放常用变量 */
-/********************** 字体 **********************/
-/********************** 主题色 **********************/
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 辅助色 **********************/
-/* 退出、删除、错误、严重警告等否定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 警示灯引起注意类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 成功、完成、进行等肯定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 中性色 **********************/
-/* 重要级文字信息、内容标题信息 */
-/* 次级标题、内容文字 主要文字使用颜色 */
-/* 三级文字标题、内容文字 */
-/* 边框内说明文字 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/********************** 基础颜色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-鼠标移上 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-激活 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-相应谈色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 图标大小 **********************/
-/* 最小尺寸图标 */
-/* 更小尺寸图标 */
-/* 小尺寸图标 */
-/* 正常尺寸图标 */
-/* 大尺寸图标 */
-/* 最大尺寸图标 */
-/********************** 文案 **********************/
-/* 字体 */
-/* 正常尺寸 */
-/* 小尺寸 */
-/* 大尺寸 */
-/* 主要颜色 */
-/* 次要颜色 用于 plaeholder 等 */
-/********************** 边框 **********************/
-/* 边框色 */
-/* 表单输入框色 */
-/* 表单输入框激活色 */
-/********************** 其它 **********************/
-/* 滚动条背景色 */
-/********************** 层级管理 **********************/
-/* 下拉菜单层 */
-/* @dropdownMenuZIndex: 50; */
-/* 下拉选框层 */
-/* @selectorZIndex: 100; */
-/* 日期选框层 */
-/* @dateZIndex: 200; */
-/* 文字提示层 */
-/* @tooltipZIndex: 500; */
-/* 确认提示层 */
-/* @toolboxZIndex: 700; */
-/* 加载层 */
-/* @loadingZIndex: 1000; */
-/* 消息提示层 */
-/* @messageZIndex: 2000; */
-/* 侧弹层 */
-/* @sideSliderZIndex: 1500; */
-/* 对话框层 */
-/* @dialogZIndex: 2000; */
-.bk-radio {
-  margin-right: 30px;
+.bk-date-picker-cells-cell:hover em {
+  /* background-color: #e1ecff; */
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-focused em {
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
+}
+.bk-date-picker-cells-cell-prev-month em,
+.bk-date-picker-cells-cell-next-month em {
+  color: #c4c6cc;
+}
+.bk-date-picker-cells-cell-prev-month:hover em,
+.bk-date-picker-cells-cell-next-month:hover em {
+  background: transparent;
+}
+span.bk-date-picker-cells-cell-week-label,
+span.bk-date-picker-cells-cell-week-label:hover,
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+span.bk-date-picker-cells-cell-week-label em,
+span.bk-date-picker-cells-cell-week-label:hover em,
+span.bk-date-picker-cells-cell-disabled em,
+span.bk-date-picker-cells-cell-disabled:hover em {
+  color: inherit;
+  cursor: not-allowed;
+  background: inherit;
+}
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-cell-today em {
+  position: relative;
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
 }
-.bk-radio-input {
+.bk-date-picker-cells-cell-range {
   position: relative;
+}
+.bk-date-picker-cells-cell-range:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: #e1ecff;
+  border: 0;
+  border-radius: 0;
+  content: '';
+}
+.bk-date-picker-cells-cell-range em {
+  position: relative;
+  z-index: 1;
+}
+.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-selected:hover em {
+  color: #fff;
+  background-color: #3a84ff;
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
+  color: #f7f7f7;
+  background: #c4c6cc;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {
+  background: #fff;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+.bk-date-picker-cells-year,
+.bk-date-picker-cells-month {
+  margin-top: 7px;
+}
+.bk-date-picker-cells-year span,
+.bk-date-picker-cells-month span {
+  width: 36px;
+  height: 32px;
+  margin: 10px 12px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 3px;
+}
+.bk-date-picker-cells-year span em,
+.bk-date-picker-cells-month span em {
+  width: 36px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-picker-panel-icon-btn {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 1px solid #979ba5;
-  background-color: #fff;
-  bottom: -2px;
-}
-.bk-radio-text {
-  padding-left: 5px;
-}
-:root {
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 38px;
-  --border-color-base: #dcdee5;
-  --border-color-disable: #dcdee5;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: #dcdee5;
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--border-color-base);
-}
-/* 存放常用变量 */
-/********************** 字体 **********************/
-/********************** 主题色 **********************/
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 辅助色 **********************/
-/* 退出、删除、错误、严重警告等否定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 警示灯引起注意类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 成功、完成、进行等肯定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 中性色 **********************/
-/* 重要级文字信息、内容标题信息 */
-/* 次级标题、内容文字 主要文字使用颜色 */
-/* 三级文字标题、内容文字 */
-/* 边框内说明文字 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/********************** 基础颜色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-鼠标移上 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-激活 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-相应谈色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 图标大小 **********************/
-/* 最小尺寸图标 */
-/* 更小尺寸图标 */
-/* 小尺寸图标 */
-/* 正常尺寸图标 */
-/* 大尺寸图标 */
-/* 最大尺寸图标 */
-/********************** 文案 **********************/
-/* 字体 */
-/* 正常尺寸 */
-/* 小尺寸 */
-/* 大尺寸 */
-/* 主要颜色 */
-/* 次要颜色 用于 plaeholder 等 */
-/********************** 边框 **********************/
-/* 边框色 */
-/* 表单输入框色 */
-/* 表单输入框激活色 */
-/********************** 其它 **********************/
-/* 滚动条背景色 */
-/********************** 层级管理 **********************/
-/* 下拉菜单层 */
-/* @dropdownMenuZIndex: 50; */
-/* 下拉选框层 */
-/* @selectorZIndex: 100; */
-/* 日期选框层 */
-/* @dateZIndex: 200; */
-/* 文字提示层 */
-/* @tooltipZIndex: 500; */
-/* 确认提示层 */
-/* @toolboxZIndex: 700; */
-/* 加载层 */
-/* @loadingZIndex: 1000; */
-/* 消息提示层 */
-/* @messageZIndex: 2000; */
-/* 侧弹层 */
-/* @sideSliderZIndex: 1500; */
-/* 对话框层 */
-/* @dialogZIndex: 2000; */
-.bk-checkbox {
-  margin-right: 30px;
+  width: 20px;
+  height: 46px;
+  line-height: 44px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+.bk-picker-panel-icon-btn:hover {
+  color: #2d8cf0;
+}
+.bk-picker-panel-icon-btn i {
+  font-size: 20px;
+}
+.bk-date-picker-prev-btn {
+  float: left;
+}
+.bk-date-picker-prev-btn-arrow-double {
+  margin-left: 10px;
+}
+.bk-date-picker-prev-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-next-btn {
+  float: right;
+}
+.bk-date-picker-next-btn-arrow-double {
+  margin-right: 10px;
+}
+.bk-date-picker-next-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-with-range .bk-picker-panel-body {
+  min-width: 532px;
+}
+.bk-date-picker-with-range .bk-picker-panel-content {
+  float: left;
 }
-.bk-checkbox-input {
+.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {
+  min-width: 492px;
+}
+.bk-date-picker-transfer {
+  z-index: 1060;
+  max-height: none;
+}
+.bk-fade-down-transition-enter-from,
+.bk-fade-down-transition-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+.bk-fade-down-transition-enter-to,
+.bk-fade-down-transition-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.bk-fade-down-transition-enter-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-fade-down-transition-leave-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-divider {
   position: relative;
+  background: #c4c6cc;
+}
+.bk-divider-horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 1em 0;
+}
+.bk-divider-info {
+  position: absolute;
+  top: 50%;
+  padding: 0 1.4em;
+  color: #63656e;
+  background-color: white;
+  transform: translateY(-50%);
+}
+.bk-divider-info-center {
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.bk-divider-info .bk-divider-horizontal-left {
+  left: 2em;
+}
+.bk-divider-info .bk-divider-horizontal-right {
+  right: 2em;
+}
+.bk-divider-vertical .bk-divider-info {
+  padding: 20px 0;
+}
+.bk-divider-vertical {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 1px solid #979ba5;
-  background-color: #fff;
-  bottom: -2px;
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  display: flex;
+  color: #63656e;
+}
+.bk-tab-header > div {
+  display: flex;
+  margin-bottom: -1px;
+  flex-wrap: nowrap;
+}
+.bk-tab--card .bk-tab-header > div,
+.bk-tab--border-card .bk-tab-header > div {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--top .bk-tab-header-nav {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.bk-tab--left .bk-tab-header-nav,
+.bk-tab--right .bk-tab-header-nav {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.bk-tab--card .bk-tab-header-nav,
+.bk-tab--border-card .bk-tab-header-nav {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab-header-nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab--left .bk-tab-header,
+.bk-tab--right .bk-tab-header {
+  flex-direction: column;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.bk-tab--card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+  border: solid #dcdee5;
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--unborder-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab-header-item {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+.bk-tab-header-item:hover {
+  color: #3a84ff;
+}
+.bk-tab-header-item:hover .bk-tab-header-item-close {
+  display: block;
+  margin-left: 10px;
+  color: #ea3636;
+}
+.bk-tab--top .bk-tab-header-item {
+  padding: 0 20px;
+}
+.bk-tab--left .bk-tab-header-item,
+.bk-tab--right .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header-item {
+  text-align: right;
+}
+.bk-tab--card .bk-tab-header-item {
+  border-top: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--border-card .bk-tab-header-item {
+  border-right: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item:last-of-type,
+.bk-tab--border-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  color: #c4c6cc;
+}
+.bk-tab-header--active {
+  color: #3a84ff;
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active {
+  border-bottom-color: white;
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid #3a84ff;
+}
+.bk-tab--left .bk-tab-header--active {
+  border-right: 2px solid #3a84ff;
+}
+.bk-tab--right .bk-tab-header--active {
+  border-left: 2px solid #3a84ff;
+}
+.bk-tab-header--disabled {
+  color: #aaa;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bk-tab-content {
+  flex: 1;
+  padding: 10px;
+}
+.bk-tab--border-card .bk-tab-content {
+  border: solid #dcdee5;
+  border-width: 0 1px 1px;
+}
+.bk-tab-panel {
+  height: 100%;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
 }
-.bk-checkbox-text {
-  padding-left: 5px;
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
 }