@dt-frames/ui 2.0.24 → 3.0.1

package/es/theme/src/index.scss

@@ -0,0 +1,1134 @@
+@import '../../components/container/src/index.scss';
+@import './transition.scss';
+
+::selection {
+    background-color: $colorPrimary;
+    color: #fff;
+}
+
+.dt-theme {
+    @apply w-full h-full;
+
+    .dt-logo {
+        @apply px-2.5 flex items-center pl-2.5 cursor-pointer text-center transition-all duration-200 ease-in-out;
+
+        &.light {
+            border-bottom: 1px solid $border-color-base;
+        }
+
+        .dt-logo__title {
+            @apply text-base font-bold transition-all duration-500 pl-3;
+        }
+
+        &.light .dt-logo__title {
+            color: $colorPrimary;
+        }
+
+        &.dark .dt-logo__title {
+            color: #fff;
+        }
+    }
+
+    .dt-sideBar {
+        &--fixed {
+            position: fixed;
+        }
+
+        .ant-layout-sider-children {
+            @apply flex flex-col;
+        }
+
+        .ant-menu-item {
+            @apply w-full rounded-none;
+        }
+
+        .ant-menu {
+            background: $menu-bg-color;
+
+            .ant-menu-sub {
+                background: $menu-sub-bg-color;
+            }
+
+            .ant-menu-item,
+            .ant-menu-submenu-title {
+                margin: 0;
+                height: $menu-item-height !important;
+
+                &:active {
+                    background-color: inherit;
+                }
+            }
+        }
+
+        &--mix {
+            height: calc(100% - 48px);
+            top: 48px;
+            background: $menu-mix-bg-color;
+            border-right: 1px solid #f0f0f0;
+
+            .ant-menu {
+                background: $menu-mix-bg-color !important;
+                border-right: none;
+            }
+
+            .ant-menu-sub {
+                background: #fff;
+            }
+
+            .dt-menu-item .i {
+                color: rgba(0, 0, 0, 0.5);
+                font-size: 16px;
+            }
+
+            .ant-menu-item-selected {
+                background: $menu-mix-select-bg-color;
+
+                .i {
+                    color: $colorPrimary;
+                }
+            }
+
+            .ant-menu-item:hover .i {
+                color: $colorPrimary;
+            }
+        }
+
+        .ant-layout-sider-trigger {
+            background: $menu-mix-bg-color;
+            border-right: 1px solid #f0f0f0;
+            border-top: 1px solid #f0f0f0;
+        }
+
+        .dt-menu-item {
+            display: flex;
+            align-items: center;
+            height: $menu-item-height;
+            font-size: 13px;
+        }
+
+        &.ant-layout-sider-collapsed {
+            .dt-menu-item>span {
+                opacity: 0;
+            }
+
+            .menu-icon {
+                font-size: 18px;
+                height: 18px;
+                line-height: 18px;
+            }
+        }
+
+        .dt-darg-bar {
+            @apply fixed top-0 z-20 w-2px h-full border-t-0 border-b-0;
+            cursor: col-resize;
+
+            &--hide {
+                @apply hidden;
+            }
+
+            &:hover {
+                background-color: $colorPrimary;
+                box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+            }
+        }
+    }
+
+    .dt-mix-sider {
+        transition: all 0.2s ease 0s;
+
+        &>div:first-of-type,
+        &>div:nth-of-type(2) {
+            background-color: $menu-bg-color;
+        }
+
+        &.dark .dt-mix-sider__shallow-menu {
+            li {
+                color: #ffffffa1;
+                transition: all .3s ease;
+
+                i {
+                    font-size: 20px;
+                }
+
+                p {
+                    font-size: 12px;
+                }
+
+                &.active-menu {
+                    background-color: $menu-sub-bg-color;
+                    color: #fff;
+
+                    &::before {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 4px;
+                        height: 100%;
+                        background-color: $colorPrimary;
+                        content: "";
+                    }
+                }
+
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
+
+        &.dark .sub-menu {
+            border-right: 1px solid #eaf0fb;
+        }
+
+        &__sub-shallow-menu {
+            padding: 6px 20px 12px 20px;
+
+            &>li {
+
+                li,
+                .sub-menu {
+                    line-height: 40px;
+                    font-size: 13px;
+                    align-items: center;
+                    margin: 4px 0 8px -20px;
+                    width: calc(100% + 40px);
+                    padding-left: 24px;
+
+                    i {
+                        font-size: 18px;
+                    }
+
+                    &.active-menu,
+                    &:hover {
+                        color: $colorPrimary;
+                        background-color: $menu-mix-select-bg-color;
+
+                        i {
+                            opacity: 1;
+                        }
+                    }
+                }
+
+                &>div:not(.sub-menu) {
+                    border-bottom: 1px solid #eaf0fb;
+                }
+
+                &:last-of-type>div {
+                    border-bottom: none;
+                }
+            }
+        }
+
+        &__animate-enter-active {
+            z-index: -1;
+            animation: slideLeft 0.2s;
+        }
+
+        &__animate-leave-active {
+            z-index: -1;
+            animation: slideLeft 0.2s reverse;
+        }
+    }
+
+    &-main {
+        @apply flex w-full h-full duration-200;
+
+        transition-property: width;
+        background-color: $content-bg;
+
+        .ant-layout-content {
+            width: 100%;
+
+            &.fixed {
+                width: 1300px;
+            }
+        }
+    }
+
+    .dt-header {
+        @apply flex items-center h-12 p-0 leading-48px justify-between;
+
+        &--light {
+            background-color: #fff !important;
+            border-bottom: 1px solid #eee;
+            color: $text-color-base;
+
+            .dt_header_icon:hover {
+                background-color: rgba(175, 178, 184, 0.25)
+            }
+        }
+
+        &--dark {
+            background-color: $header-bg-dark-color !important;
+
+            .ant-menu-dark {
+                background-color: $header-bg-dark-color;
+            }
+
+            i.i,
+            span {
+                color: #fff;
+            }
+        }
+
+        .i {
+            font-size: 1.125rem;
+        }
+    }
+
+    .dt_header {
+        &_icon {
+            @apply h-12 px-3 text-gray-800 cursor-pointer hover: bg-gray-500 hover:bg-opacity-50 transition-all duration-300 relative;
+        }
+    }
+}
+
+.dt-menu-filter {
+    input {
+        border-top-left-radius: 16px;
+        border-bottom-left-radius: 16px;
+        padding-left: 14px;
+        font-size: 13px;
+        width: 150px !important;
+        border-right: none;
+        height: 28px
+    }
+
+    .ant-btn {
+        border-left: none;
+        border-top-right-radius: 16px !important;
+        border-bottom-right-radius: 16px !important;
+        padding-right: 10px;
+        padding-left: 5px;
+        width: 30px;
+        height: 28px;
+    }
+
+    .ant-input:focus,
+    .ant-input:hover,
+    .ant-btn:focus,
+    .ant-btn:hover {
+        border-color: #d9d9d9;
+        box-shadow: none;
+    }
+
+    .ant-empty-image {
+        height: 40px;
+
+        svg {
+            width: 100%;
+        }
+    }
+
+    .ant-input-group-addon {
+        background-color: inherit;
+    }
+
+    &__popover .ant-popover-inner {
+        padding: 0;
+    }
+
+    &__popover .ant-popover-inner-content {
+        width: 180px;
+        max-height: 400px;
+        height: 220px;
+        padding: 0;
+        overflow-y: auto;
+    }
+
+    &__popover .ant-empty-description {
+        font-size: 13px;
+    }
+}
+
+.dt-footer {
+    @apply text-center w-full block border-t border-gray-200 min-h-12 flex items-center justify-center;
+}
+
+.dt-notify {
+    &__popover .ant-popover-inner {
+        @apply p-0;
+    }
+
+    &__popover .ant-popover-inner-content {
+        width: 350px;
+        padding: 10px 0 0 0;
+    }
+}
+
+.dt-size {
+    &__popover .ant-popover-inner {
+        padding: 0;
+    }
+
+    &__popover .ant-popover-inner-content {
+        width: 120px;
+        padding: 4px 0;
+
+        .active {
+            color: $colorPrimary;
+        }
+    }
+}
+
+.dt-lang-picker {
+    &__popover .ant-popover-inner {
+        padding: 0;
+    }
+
+    &__popover .ant-popover-inner-content {
+        width: 120px;
+        padding: 4px 0;
+
+        .active {
+            color: $colorPrimary;
+        }
+
+        li {
+            @apply px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover: bg-gray-100 transition-all duration-300 text-13px;
+        }
+    }
+}
+
+.dt-user-info {
+    &__popover .ant-popover-inner {
+        padding: 0;
+    }
+
+    &__popover .ant-popover-inner-content {
+        width: 120px;
+        padding: 4px 0;
+
+        .active {
+            color: $colorPrimary;
+        }
+    }
+}
+
+.lockscreen {
+    @apply text-34px;
+
+    .lock-box {
+        @apply text-14px text-center;
+    }
+
+    .i {
+        @apply text-34px;
+    }
+
+    img {
+        @apply w-24 h-24 rounded-1/2 mx-auto my-10px border-width-3px border-light-800;
+    }
+
+    .ant-modal-content {
+        @apply p-0;
+    }
+
+    .ant-modal-header {
+        @apply px-6 py-4 border-1 mb-0;
+        border-color: #f0f0f0;
+    }
+
+    .ant-modal-body {
+        @apply p-6;
+    }
+
+    .local-time {
+        bottom: 60px;
+        left: 60px;
+        font-family: helvetica;
+
+        .time {
+            font-size: 70px;
+        }
+
+        .date {
+            font-size: 40px;
+        }
+    }
+
+    .computer-status {
+        bottom: 60px;
+        right: 60px;
+        font-size: 24px;
+
+        .network {
+            position: relative;
+
+            &.offline::before {
+                content: '';
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 2px;
+                height: 28px;
+                transform: translate(-50%, -50%) rotate(45deg);
+                background-color: red;
+                z-index: 10;
+            }
+        }
+    }
+}
+
+.dt-lock-page {
+    @apply absolute bottom-1/5 left-1/2 h-500px w-72;
+    transform: translateX(-50%);
+
+    &>div:first-of-type {
+        @apply absolute z-10 text-white text-center top-1/5 w-72;
+    }
+
+    &>div:nth-of-type(2) {
+        @apply w-72 h-400px;
+
+        filter: contrast(15) hue-rotate(0);
+        animation: hueRotate 10s infinite linear;
+    }
+
+    .circle {
+        width: 300px;
+        height: 300px;
+        filter: blur(8px);
+
+        &::after {
+            position: absolute;
+            top: 40%;
+            left: 50%;
+            width: 200px;
+            height: 200px;
+            background-color: #00ff6f;
+            border-radius: 42% 38% 62% 49% / 45%;
+            content: '';
+            transform: translate(-50%, -50%) rotate(0);
+            animation: circleRotate 10s infinite linear;
+        }
+
+        &::before {
+            position: absolute;
+            top: 40%;
+            left: 50%;
+            z-index: 10;
+            width: 176px;
+            height: 176px;
+            background-color: #000;
+            border-radius: 50%;
+            content: '';
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .bubbles {
+        width: 100px;
+        height: 40px;
+        background-color: #00ff6f;
+        border-radius: 100px 100px 0 0;
+        filter: blur(5px);
+        transform: translate(-50%, 0);
+
+        li {
+            position: absolute;
+            background: #00ff6f;
+            border-radius: 50%;
+        }
+    }
+
+    .charging {
+        font-size: 20px;
+        text-align: center;
+    }
+}
+
+.dt-reuse-tabs {
+    @apply leading-8 border-b border-solid border-gray-200;
+
+    .ant-tabs-small {
+        height: 32px;
+    }
+
+    .ant-tabs-nav {
+        @apply pt-2px m-0 bg-white border-none shadow-none;
+        height: 32px
+    }
+
+    .ant-tabs-nav-container {
+        @apply pt-2px;
+        height: 30px
+    }
+
+    .ant-tabs-card {
+        &::before {
+            border: none;
+        }
+    }
+
+    .ant-tabs-tab {
+        @apply pr-3 bg-white h-7 leading-7;
+
+        transition: none !important;
+        border-radius: 2px !important;
+        color: $text-color-base;
+
+        span {
+            @apply text-13px;
+        }
+
+        &:hover {
+            .ant-tabs-tab-remove {
+                opacity: 1;
+            }
+        }
+    }
+
+    .ant-tabs-tab-remove {
+        @apply w-2 h-10px text-12px opacity-100 transition-none ml-0 -mr-9px items-center;
+
+        span {
+            @apply flex items-center w-3;
+        }
+
+        &:hover svg {
+            width: 0.8em !important;
+        }
+
+        svg {
+            fill: $text-color-base;
+        }
+    }
+
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        &:hover {
+            color: $colorPrimary;
+        }
+    }
+
+    .ant-tabs-card .ant-tabs-tab-active {
+        @apply relative pl-18px border-none transition-none;
+
+        background: $colorPrimary;
+
+        span {
+            @apply text-white;
+        }
+
+        .ant-tabs-tab-remove {
+            @apply opacity-100;
+        }
+
+        svg {
+            width: 0.7em;
+            fill: #fff !important;
+        }
+
+        &::before {
+            @apply rounded-1/2 bg-white absolute left-1 top-12px;
+
+            content: ' ';
+            width: 6px;
+            height: 6px;
+        }
+    }
+
+    .ant-tabs-nav>div:nth-child(1) {
+        padding: 0 6px;
+
+        .ant-tabs-tab {
+            margin-right: 3px !important;
+        }
+    }
+
+    .ant-tabs-nav {
+        &::before {
+            border-bottom: none !important;
+        }
+
+        &-more {
+            display: flex;
+        }
+    }
+
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        border: 1px solid #d9d9d9 !important;
+
+        .anticon-close {
+            @apply flex w-3 items-center;
+
+            font-size: 12px;
+
+            svg {
+                width: 0.6em;
+            }
+        }
+    }
+
+    &__dropdown .ant-dropdown-menu {
+        @apply px-0 py-1 rounded-3px;
+
+        .ant-dropdown-menu-title-content {
+            @apply flex w-24;
+        }
+    }
+
+    .ant-tabs-extra-content {
+        margin-top: -1px;
+    }
+
+    &--hide-close {
+        .ant-tabs-tab-remove {
+            opacity: 0 !important;
+        }
+    }
+
+    &__dropdown .ant-dropdown-content li>span {
+        display: flex;
+        padding-right: 3px;
+    }
+}
+
+.dt-mix-sider {
+    transition: all 0.2s ease 0s;
+
+    &>div:first-of-type,
+    &>div:nth-of-type(2) {
+        background-color: $menu-bg-color;
+    }
+
+    &.dark .dt-mix-sider__shallow-menu {
+        li {
+            color: #ffffffa1;
+            transition: all .3s ease;
+
+            i {
+                font-size: 20px;
+            }
+
+            p {
+                font-size: 12px;
+            }
+
+            &.active-menu {
+                background-color: $menu-sub-bg-color;
+                color: #fff;
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 4px;
+                    height: 100%;
+                    background-color: $colorPrimary;
+                    content: "";
+                }
+            }
+
+            &:hover {
+                color: #fff;
+            }
+        }
+    }
+
+    &.dark .sub-menu {
+        border-right: 1px solid #eaf0fb;
+    }
+
+    &__sub-shallow-menu {
+        padding: 6px 20px 12px 20px;
+
+        &>li {
+
+            li,
+            .sub-menu {
+                line-height: 40px;
+                font-size: 13px;
+                align-items: center;
+                margin: 4px 0 8px -20px;
+                width: calc(100% + 40px);
+                padding-left: 24px;
+
+                i {
+                    font-size: 18px;
+                }
+
+                &.active-menu,
+                &:hover {
+                    color: $colorPrimary;
+                    background-color: $menu-mix-select-bg-color;
+
+                    i {
+                        opacity: 1;
+                    }
+                }
+            }
+
+            &>div:not(.sub-menu) {
+                border-bottom: 1px solid #eaf0fb;
+            }
+
+            &:last-of-type>div {
+                border-bottom: none;
+            }
+        }
+    }
+
+    &__animate-enter-active {
+        z-index: -1;
+        animation: slideLeft 0.2s;
+    }
+
+    &__animate-leave-active {
+        z-index: -1;
+        animation: slideLeft 0.2s reverse;
+    }
+}
+
+.dt-menu-type {
+    @apply flex flex-row justify-center;
+
+    &__list {
+        @apply p-3 relative w-14 h-12 mr-4 overflow-hidden cursor-pointer rounded shadow-sm shadow-gray-200 bg-gray-100;
+    }
+
+    &__list:hover {
+        border: 2px solid $colorPrimary;
+    }
+
+    &__item {
+        &::before {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            z-index: 1;
+            width: 33%;
+            height: 100%;
+            background-color: #273352;
+        }
+
+        &::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 25%;
+            background-color: #fff;
+        }
+    }
+
+    &__item--top-menu &__item {
+        &::before {
+            width: 0;
+        }
+
+        &::after {
+            background-color: #273352;
+        }
+    }
+
+    &__item--mix &__item {
+        &::before {
+            top: 25%;
+            height: 75%;
+            background-color: #fff;
+        }
+
+        &::after {
+            background-color: #273352;
+        }
+    }
+
+    &__item--mix-sidebar {
+        &::before {
+            content: '';
+            position: absolute;
+            left: 15%;
+            top: calc(25% + 1px);
+            width: 20%;
+            height: 75%;
+            background-color: #fff;
+        }
+
+        .dt-menu-type__item::before {
+            width: 15%;
+        }
+    }
+
+    &__item--active {
+        border: 2px solid $colorPrimary;
+    }
+}
+
+.ant-tabs-dropdown-menu-title-content{
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+}
+
+.dt-setting-theme {
+    &__tips {
+        @apply p-3 text-12px leading-5 bg-gray-100 rounded;
+
+        border: 1px solid $colorPrimary;
+        color: $colorPrimary;
+    }
+}
+
+.theme-drawer .ant-drawer-body {
+    padding-top: 6px;
+}
+
+.ant-layout-sider-dark,
+.ant-menu-dark {
+
+    .ant-menu-item-active>span>span,
+    .ant-menu-item-selected>span>span,
+    .ant-menu-submenu-active>div>span>span,
+    .ant-menu-submenu-selected>div>span>span,
+    .ant-menu-submenu-selected>span>span {
+        &>.menu-icon {
+            color: #fff !important;
+        }
+    }
+
+    .ant-menu-submenu-selected.ant-menu-submenu-horizontal {
+        background: none;
+
+        &::after {
+            bottom: 4px;
+            border-bottom: 4px solid $colorPrimary;
+            border-radius: 1px;
+        }
+    }
+
+    .dt-menu-item {
+        display: flex;
+
+        span {
+            font-size: 13px;
+        }
+    }
+
+    .menu-icon {
+        @apply text-light-600 p-0 mr-6px h-10 w-7 text-center;
+        font-size: 16px;
+        height: 16px;
+        line-height: 18px;
+    }
+}
+
+@keyframes slideLeft {
+    from {
+        transform: translateX(-100%);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes circleRotate {
+    50% {
+        border-radius: 45% / 42% 38% 58% 49%;
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(720deg);
+    }
+}
+
+@keyframes hueRotate {
+    100% {
+        filter: contrast(15) hue-rotate(360deg);
+    }
+}
+
+.dt-color {
+    @apply w-56 p-3 rounded-sm;
+
+    .color-set {
+        @apply rounded-lg;
+
+        &>div:first-of-type canvas {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px
+        }
+
+        &>div:last-of-type canvas {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px
+        }
+
+        .slide {
+            @apply absolute w-7 h-7 rounded-full border-width-2px border-white pointer-events-none;
+            box-shadow: 0 2px 4px #0003;
+        }
+    }
+
+    .color-footer {
+        @apply flex gap-3 justify-end mt-3 pt-3;
+        border-top: 1px solid #e7e7e7;
+    }
+}
+
+
+// .hu-color-picker {
+//     background: #242c3e;
+//     border-radius: 4px;
+//     box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
+//     z-index: 1;
+
+//     canvas {
+//         vertical-align: top;
+//     }
+
+//     .color-set {
+//         display: flex;
+//         margin-left: 5px;
+//         padding: 8px 0 8px 8px;
+//         border-left: 1px solid #323e53;
+//     }
+
+//     .color-show {
+//         height: 56px;
+//         width: 100px;
+//         margin: 8px auto;
+//         display: flex;
+//     }
+// }
+
+// .color-panel {
+//     display: flex;
+//     padding: 8px 8px 0 8px;
+
+//     .color-box {
+//         width: 100px;
+//     }
+// }
+
+// .color-view {
+//     display: flex;
+//     padding: 0 8px;
+// }
+
+// .input {
+//     flex: 1;
+//     margin-left: 8px;
+// }
+
+// // 颜色面板
+// .saturation {
+//     position: relative;
+//     height: 124px;
+//     cursor: pointer;
+
+//     .slide {
+//         //   position: absolute;
+//         //   left: 100px;
+//         //   top: 0;
+//         //   width: 8px;
+//         //   height: 8px;
+//         //   border-radius: 50%;
+//         //   border: 1px solid #fff;
+//         //   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
+//         //   pointer-events: none;
+//     }
+// }
+
+// // 颜色调节条
+// .hue {
+//     position: relative;
+//     cursor: pointer;
+
+//     .slide {
+//         //   box-sizing: border-box;
+//         //   position: absolute;
+//         //   left: 0;
+//         //   width: 100%;
+//         //   height: 4px;
+//         //   background: #fff;
+//         //   border: 1px solid #f0f0f0;
+//         //   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+//         //   pointer-events: none;
+//         //   border-radius: 1px;
+//     }
+// }
+
+// .color-type {
+//     display: flex;
+//     margin: 8px auto;
+//     font-size: 12px;
+
+//     .name {
+//         width: 32px;
+//         height: 24px;
+//         float: left;
+//         display: flex;
+//         justify-content: center;
+//         align-items: center;
+//         color: #a0acc0;
+//     }
+
+//     .value {
+//         display: block;
+//         box-sizing: border-box;
+//         flex: 1;
+//         height: 24px;
+//         padding: 0 8px;
+//         border: 1px solid #42516c;
+//         color: #eff0f4;
+//         background: #2e3850;
+//         box-sizing: border-box;
+//         width: 100px;
+//         caret-color: #49a4ff;
+
+//         &:focus-visible {
+//             outline: 1px solid rgba(18, 107, 190, 0.5);
+//         }
+//     }
+// }
+
+// // 默认颜色
+// .colors {
+//     display: flex;
+//     flex-wrap: wrap;
+//     padding: 0;
+//     margin: 0;
+
+//     .item {
+//         flex-basis: calc(20% - 4px);
+//         margin: 2px;
+//         width: 16px;
+//         height: 16px;
+//         border-radius: 1px;
+//         box-sizing: border-box;
+//         vertical-align: top;
+//         display: inline-block;
+//         transition: all 0.1s;
+//         cursor: pointer;
+
+//         &:hover {
+//             transform: scale(1.2);
+//         }
+//     }
+// }
+
+// .btn {
+//     margin-top: 0 8px 8px;
+//     border-top: 1px solid #323e53;
+//     text-align: right;
+//     padding: 8px;
+
+//     button {
+//         margin-left: 8px;
+//         width: 52px;
+//         height: 20px;
+//         font-size: 12px;
+//         font-weight: 400;
+//         color: #fff;
+//         background-color: #49a4ff;
+//         border-radius: 2px;
+//         border: none;
+
+//         &:active {
+//             background-color: #1890ff;
+//         }
+//     }
+// }