.logo {display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 700;padding: 10px 0;
  img {width: 35px;}
}
.sidebar {position: fixed;height: 100vh;width: 220px;overflow: hidden;overflow-y: auto;border-right: 1px solid #ddd;
  li {margin: 5px 0;list-style: none;padding: 0;font-size: 14px;overflow: hidden;
    text-overflow: ellipsis;cursor: pointer;
  }
  a {font-size: 16px;color: #333;margin: 0;padding: 10px;text-decoration: none;display: block;position: relative;-webkit-transition: .15s ease-out;transition: .15s ease-out;border-left: 3px solid transparent;
    &:hover {color: #07c160;
      span {color: #07c160;}
    }
    span {color: #666;font-size: 13px;margin-left: 3px;}
  }
  h3 {color: #666;font-size: 13px;text-align: center;font-weight: 400;position: relative;padding: 5px 0;
    span {background: #fff;position: relative;z-index: 2;padding: 0 5px}
    &:after{content: '';width: 100%;border-bottom: 1px solid #eee;display: block;position: absolute;left: 0;bottom: 12px}
  }
  .router-link-active {color: #07c160;background: rgba(7, 229, 108, 0.19);border-left-color: #07c160}
  .version {
    .ak-select {min-width: inherit;margin: 0 auto;display: block}
  }
  &::-webkit-scrollbar {width: 8px;height: 8px;position: relative;z-index: 100;background: #f2f3f5}
  &::-webkit-scrollbar-thumb {background-color: #dcdee0;background-clip: padding-box;min-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
  &::-webkit-scrollbar-corner {background: #dcdee0}
  /*&::-webkit-scrollbar:$colorGray2; //滚动条整体部分
  ::-webkit-scrollbar-button:''; //滚动条两端的按钮
  ::-webkit-scrollbar-track:'';  //外层轨道
  ::-webkit-scrollbar-track-piece:'';  //内层滚动槽
  ::-webkit-scrollbar-thumb:$colorGray3; //滚动的滑块
  ::-webkit-scrollbar-corner:''; //边角
  ::-webkit-resizer //定义右下角拖动块的样式*/
}
.main- {padding: 20px 20px 20px 240px;
  > div {background: #fff;z-index: 2;position: relative;}
  .doc-preview .control-tools{overflow: hidden;}
}

/*left-fade-enter-active left-fade-enter-to*/
.left-fade-enter-active {
  transition: all 1.2s ease;
}
.left-fade-leave-active {
  transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
}
.left-fade-leave-to, .left-fade-enter-from {
  transform: translateX(10px);
  opacity: 0;
}
/**/
.ak-badge {margin-right: 35px}
.tooltip-demo {margin-bottom: 30px}
.tooltip-demo span {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #f7f7f7;
  border-radius: 3px;
  cursor: pointer;
  transition: all .5s;
  margin-right: 30px}
.tooltip-demo span:hover {}
.tooltip-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  background: #ddd;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 30px}
.green {color: #07c160;cursor: pointer}
.lazy-demo {
  img {max-width: 100%}
}
.popover-demo {
  span {margin-right: 10px;}
}
.image-demo {display: flex;padding: 10px;
  >div{margin: 0 10px;}
  .list{
    span{display: block;text-align: center}
  }
}
.ak-dropdown {margin-right: 10px;}

