@jx3box/jx3box-ui 0.0.1

package/assets/css/editor/upload.less

@@ -0,0 +1,111 @@
+.c-upload {
+    .u-icon {
+        margin-right: 5px;
+    }
+
+    .u-upload-clear {
+        .pa;
+        .lt(70px, 20px);
+    }
+    .u-upload-tip {
+        padding-right: 10px;
+        padding-top: 6px;
+        padding-bottom: 6px;
+        .el-alert__title {
+            .fz(12px, 16px);
+            padding-right: 20px;
+            .db;
+            .nobreak;
+        }
+        .mb(20px);
+    }
+
+    .el-dialog__body {
+        padding-top: 0;
+    }
+
+    .el-upload-list li {
+        outline: none;
+    }
+
+    .el-upload-list__item {
+        &:hover {
+            border: 1px solid #13ce66;
+        }
+    }
+
+    // 列表
+    .u-file-wrapper {
+        .size(100%);
+        &.isSelected {
+        }
+        &.disabled {
+            cursor: default;
+            opacity: 0.38;
+            border-color: #eee;
+            .u-fileplaceholder {
+                fill: #aaa;
+            }
+        }
+        .pointer;
+    }
+    .u-filebox {
+        .x;
+        padding: 37px;
+    }
+    .u-fileplaceholder {
+        width: 40px;
+        height: 40px;
+        fill: @primary;
+    }
+    .u-filename {
+        .db;
+        .nobreak;
+    }
+
+    // 勾选
+    .u-file-select-label {
+        position: absolute;
+        right: -15px;
+        top: -6px;
+        width: 40px;
+        height: 24px;
+        background: #13ce66;
+        text-align: center;
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+
+        i {
+            font-size: 12px;
+            margin-top: 12px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    .c-large-dialog {
+        &.el-dialog {
+            .w(60%);
+            height: 70%;
+            .el-dialog__body {
+                height: calc(100% - 70px * 2);
+                overflow-y: auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+    @media screen and (max-width: @notebook) {
+        .c-large-dialog .el-dialog {
+            .w(90%);
+        }
+    }
+    @media screen and (max-width: @ipad-y) {
+        .c-large-dialog .el-dialog {
+            margin: 0 !important;
+            .size(100%);
+            max-height: none;
+            .h(100%);
+        }
+    }
+}

package/assets/css/filters/client-by.less

@@ -0,0 +1,33 @@
+.w-filter-client {
+    font-size: 0;
+    ul,
+    li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    ul {
+        .clearfix;
+        .dbi;
+        background-color: @bg-gray;
+        border: 1px solid #eee;
+        .r(3px);
+        overflow: hidden;
+    }
+    li {
+        padding: 5px 10px;
+        .fl;
+        .fz(12px);
+        border-right: 1px solid #eee;
+        &:last-child {
+            border-right: none;
+        }
+        .pointer;
+
+        &.on {
+            background-color: @color-link;
+            color: #fff;
+            border-color: darken(@color-link, 5%);
+        }
+    }
+}

package/assets/css/header/box.less

@@ -0,0 +1,181 @@
+.c-header-jx3box {
+    background-color: @bg-black;
+    .z(800);
+    overflow-y: auto;
+    overflow-x: hidden;
+    .w(100%);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+    transition: 0.5s ease-in-out;
+    .clearfix;
+    // .pa;
+    padding-top:20px;
+
+    .none;
+    &.on {
+        .db;
+    }
+
+    // transition:0.5s ease-in-out;
+    // transform: translateY(-100%);
+    // .pr;top:-@header-height;
+    // &.on{
+    //     transform: translateY(0);
+    //     top:0;
+    // }
+
+    ul {
+        margin: 0 -20px 0 0;
+        padding: 10px 0 10px 20px;
+        list-style: none;
+        .clearfix;
+    }
+
+    li {
+        .fl;
+        .db;
+        .mr(20px);
+        .mb(20px);
+    }
+    .u-item {
+        .db;
+        .size(74px);
+        box-sizing: border-box;
+        .x;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #eee;
+        background-color: #fff;
+        transition: all 0.1s ease-in;
+        background-color: @bg-light;
+        .pr;
+        overflow: hidden;
+        .u-pic-hover {
+            .none;
+        }
+    }
+    .u-item:not(.u-doing) {
+        &:hover {
+            border-color: #111;
+            // .u-pic {
+            //     .none;
+            // }
+            // .u-pic-hover{
+            //     .db;
+            // }
+        }
+    }
+    .u-pic,
+    .u-pic-hover {
+        .size(32px);
+        .db;
+        .auto(x);
+        fill: @color;
+        .tm(0.7);
+    }
+    .u-txt {
+        .fz(12px, 2);
+        color: #666;
+        .db;
+        white-space: nowrap;
+    }
+    .u-mark {
+        color: #fff;
+        font-size: 12px;
+        line-height: 16px;
+        transform: rotate(45deg) scale(0.8);
+        position: absolute;
+        right: -20px;
+        top: 0;
+        padding: 0 15px 0 25px;
+        font-style: normal;
+
+        &.ishot {
+            background-color: #c00;
+        }
+        &.isnew {
+            background-color: #2fcb53;
+        }
+    }
+    .u-app-start {
+        .clear(left);
+    }
+    .u-doing {
+        .tm(0.5);
+        cursor: default;
+    }
+
+    // .pr;
+    .u-close {
+        // .pa;.rb(0);
+        .fr;
+        background-color: @color;
+        .fz(13px);
+        padding: 5px 10px;
+        i {
+            .mr(3px);
+        }
+        .pointer;
+    }
+}
+.c-header-jx3box.isOverlay {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+@media screen and (max-width: @ipad-y) {
+    .c-jx3box {
+        .u-list {
+            .flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 20px;
+            border-top: 1px solid @color;
+        }
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .c-jx3box {
+        height: calc(100vh - @header-height);
+        .u-list {
+            border-top: none;
+            padding: 0 20px;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            justify-content: center;
+            .w(100%);
+            box-sizing: border-box;
+            gap: 10px;
+            margin: 0 !important;
+            &::after {
+                flex: 1;
+            }
+            li {
+                padding: 5px;
+                .mr(0);
+                .mb(0);
+            }
+        }
+        .u-item {
+            .size(68px);
+            .auto(x);
+            .u-pic {
+                .size(28px);
+            }
+        }
+        .u-app-start {
+            clear: none;
+        }
+    }
+}
+@media screen and (max-width: @ip5) {
+    .c-jx3box {
+        .u-list {
+            gap: 5px;
+        }
+        .u-item {
+            .size(60px);
+            .u-pic {
+                .size(22px);
+            }
+        }
+    }
+}

package/assets/css/interact/like2.less

@@ -0,0 +1,20 @@
+.w-like2 {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+        .pr;
+        top: 4px;
+    }
+
+    &.disabled {
+        .tm(0.5);
+        cursor: default;
+    }
+}

package/assets/css/interact/share2.less

@@ -0,0 +1,101 @@
+.w-share2 {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        box-sizing: border-box;
+        .pr;
+    }
+    .u-simple-icon {
+        .size(20px);
+        position: relative;
+        top: -1px;
+        fill: @color;
+    }
+}
+.u-share2-pop {
+    .u-share2-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .w(400px);
+        .u-share2-content-main {
+            // display: flex;
+            &::after {
+                content: "";
+                height: 100%;
+                width: 1px;
+                color: #ececec;
+                .pa;
+                top: 0;
+                right: 0;
+            }
+
+            .u-share2-item {
+                .dbi;
+                cursor: pointer;
+                text-align: center;
+                width: 55px;
+                white-space: nowrap;
+                text-align: center;
+                .mr(10px);
+                overflow: hidden;
+
+                &:hover {
+                    color: #00a1d6;
+                    // .u-share-icon {
+                    //     // 利用shadow来改变 icon 颜色，注意overflow应为hidden
+                    //     position: relative;
+                    //     left: -80px;
+                    //     filter: drop-shadow(80px 0 #00a1d6);
+                    // }
+                }
+            }
+        }
+        .u-share2-wechat {
+            text-align: center;
+            padding: 0 0 0 20px;
+            border-left: 1px solid #e5e9ef;
+            margin-left: 10px;
+            .flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            .u-pic {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .u-share-icon {
+        .size(28px);
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .u-share2-pop {
+        .u-share2-content {
+            .w(150px);
+            flex-wrap: wrap;
+            text-align: center;
+
+            .u-share2-wechat {
+                text-align: center;
+                .w(150px);
+                padding: 0;
+                padding-top: 20px;
+                border-left: none;
+                margin-left: 0;
+                border-top: 1px solid #e5e9ef;
+                margin-top: 10px;
+
+                .u-pic {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}

package/assets/css/mixin.less

@@ -0,0 +1,64 @@
+// ⚠️请勿删除
+
+// .scrollbar(@size:4px,@color:#fafbfc) {
+//     &::-webkit-scrollbar {
+//         width: @size;
+//         height: @size;
+//     }
+
+//     &::-webkit-scrollbar-track,
+//     &::-webkit-scrollbar-track-piece {
+//         background-color: @color;
+//         border-radius: 6px;
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//         background-color: @color;
+//         border-radius: 6px;
+//     }
+
+//     &::-webkit-scrollbar-button,
+//     &::-webkit-scrollbar-corner,
+//     &::-webkit-resizer {
+//         display: none;
+//     }
+// }
+
+// 三角
+.u-delta() {
+    .pa;
+    background-clip: padding-box;
+    background-color: #fff;
+    color: @color;
+    border: 1px solid rgba(27, 31, 35, 0.15);
+    border-radius: 4px;
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
+    right: -5px;
+    list-style: none;
+    margin: -6px 0 0 0;
+    position: absolute;
+    z-index: 820;
+    top: 100%;
+
+    &:before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: auto;
+        right: 14px;
+        top: -16px;
+        border: 8px solid transparent;
+        border-bottom-color: rgba(27, 31, 35, 0.15);
+    }
+
+    &:after {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: auto;
+        right: 15px;
+        top: -14px;
+        border: 7px solid transparent;
+        border-bottom-color: #fff;
+    }
+}

package/assets/css/module/author.less

@@ -0,0 +1,190 @@
+.w-author {
+    .w-author-wrapper {
+        @max-width: 280px;
+        @min-width: 280px;
+        max-width: @max-width;
+        min-width: @min-width;
+        width: 280px;
+        padding: 10px;
+        background-color: #fff;
+        box-sizing: border-box;
+
+        .u-author {
+            .clearfix;
+            .db;
+            .pr;
+        }
+        .u-avatar {
+            .fl;
+            .mr(15px);
+            .size(68px);
+        }
+        .u-name {
+            .lh(2.2);
+            .bold;
+            color: @darkblue;
+            &:hover {
+                color: #f39;
+            }
+            .nobreak;
+        }
+        .u-info {
+            .pr;
+            top: -4px;
+            .h(68px);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .u-bio {
+            .mb(10px);
+            .fz(12px, 2);
+            .break(3);
+            color: #888;
+            padding: 0 5px;
+        }
+        .u-extend {
+            display: flex;
+        }
+        .u-level {
+            padding: 2px 8px;
+            .fz(12px, 14px);
+            color: #fff;
+            background-color: #aaa;
+            border-radius: 2px;
+
+            &.lv-1 {
+                background-color: #32d3c4;
+            }
+            &.lv-2 {
+                background-color: #86c0fb;
+            }
+            &.lv-3 {
+                background-color: #33d9ff;
+            }
+            &.lv-4 {
+                background-color: #ffdb2a;
+            }
+            &.lv-5 {
+                background-color: #ffa739;
+            }
+            &.lv-6 {
+                background-color: #ff70b2;
+            }
+            &.lv-7 {
+                background-color: #ff3399;
+            }
+            &.lv-8 {
+                background-color: #f93c3c;
+            }
+        }
+        .u-vip {
+            .ml(5px);
+            .db;
+            .i-icon-vip {
+                .db;
+                vertical-align: baseline;
+                padding: 2px 6px;
+                .fz(12px, 14px);
+                font-style: normal;
+                border-radius: 2px;
+                background-color: #ddd;
+                color: #fff;
+                &.on {
+                    background-color: #6f42c1;
+                }
+            }
+        }
+        .u-superauthor {
+            margin-left: 4px;
+            display: inline-block;
+            vertical-align: -2px;
+            img {
+                padding: 0;
+                margin: 0;
+                width: 16px;
+            }
+        }
+        .u-tips {
+            .db;
+            color: #555;
+            font-size: 12px;
+        }
+        .u-link {
+            border-top: 1px dashed #eee;
+            border-bottom: 1px dashed #eee;
+            a,
+            div {
+                .db;
+                margin: 10px 5px;
+                .fz(12px, 20px);
+                color: #555;
+            }
+            a {
+                &:hover {
+                    color: #f39;
+                }
+            }
+            svg,
+            img {
+                .size(16px);
+                .mr(6px);
+                .y(-3px);
+            }
+        }
+        .u-medals {
+            padding: 0 2px;
+            line-height: unset;
+
+            .m-medal {
+                line-height: normal;
+                flex-wrap: wrap;
+            }
+        }
+
+        .u-medal {
+            img {
+                padding: 0;
+                margin: 0;
+                .size(20px);
+            }
+        }
+        .u-label {
+            margin: 15px 0 10px 0;
+            padding: 0 5px 10px 5px;
+            i {
+                .mr(5px);
+            }
+            span {
+                .fz(13px);
+            }
+            border-bottom: 1px solid @border;
+        }
+
+        .u-teams {
+            .mt(5px);
+            .u-team {
+                .db;
+                background-color: #f2f6fc;
+                .mb(6px);
+                &:hover {
+                    background-color: #e6f0fb;
+                    // color:@color-link;
+                }
+                .r(3px);
+                padding: 0 5px;
+                display: flex;
+                align-items: center;
+            }
+            .u-team-logo {
+                .size(22px);
+                .mr(4px);
+                .r(4px);
+            }
+            .u-team-name {
+                .fz(12px);
+                color: #555;
+            }
+        }
+    }
+}