@jx3box/jx3box-vue3-ui 0.0.3

package/assets/css/share2.less

@@ -0,0 +1,99 @@
+.w-share2 {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(32px);
+        .y;
+        padding: 4px;
+        box-sizing: border-box;
+        .pr;
+        top: -3px;
+    }
+    .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;
+
+            .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/sharing.less

@@ -0,0 +1,26 @@
+.w-sharing {
+    .dbi;
+    color: @color;
+    .u-icon {
+        .size(13px);
+        .mr(5px);
+        fill: @color;
+        .y(-1px);
+    }
+    .u-text {
+        .fz(13px);
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: @pink;
+        .u-icon {
+            fill: @pink;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-sharing {
+        .none;
+    }
+}

package/assets/css/tag-by.less

@@ -0,0 +1,86 @@
+.w-filter-tag {
+    .fz(12px);
+
+    .u-label {
+        .none;
+    }
+    .u-toggle {
+        .pa;
+        .rt(0);
+        padding: 6px 10px;
+        .pointer;
+
+        .el-icon-arrow-up {
+            .none;
+        }
+
+        &.on {
+            .el-icon-arrow-down {
+                .none;
+            }
+            .el-icon-arrow-up {
+                .db;
+            }
+        }
+    }
+    .u-mode {
+        .mr(15px);
+        .pointer;
+        i {
+            .mr(2px);
+        }
+        &.on {
+            color: @primary;
+        }
+        &:hover {
+            color: @pink;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .w-filter-tag {
+        .pr;
+        background-color: @bg-light;
+        border: 1px solid #ddd;
+        .r(4px);
+        user-select: none;
+        padding: 6px 0;
+        padding-right: 20px;
+
+        &.on {
+            .u-options {
+                .db;
+            }
+
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .u-label {
+            padding: 0 10px;
+            .pointer;
+            .db;
+        }
+        .u-options {
+            .pa;
+            .lt(-1px, 29px);
+            padding: 5px 0;
+            .w(100%);
+            background-color: #fff;
+            border: 1px solid #ddd;
+            .z(2);
+            .u-mode {
+                .db;
+                padding: 7px 10px;
+                .pr;
+                .ml(0);
+            }
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-filter-tag {
+        .none;
+    }
+}

package/assets/css/thx.less

@@ -0,0 +1,213 @@
+.w-thx {
+    .w-like2,
+    .w-fav2,
+    .w-boxcoin-user,
+    .w-boxcoin-admin {
+        .mr(20px);
+    }
+    .x;
+}
+.w-thx-panel {
+    .mb(20px);
+}
+.w-thx-copyright {
+    .fz(12px,2);
+    color: #888;
+    border: 1px dashed #eee;
+    max-width: 800px;
+    .auto(x);
+    padding: 10px;
+    .mt(20px);
+    background-color: @bg-light;
+}
+
+.w-boxcoin-block {
+    .pointer;
+}
+.w-boxcoin-admin {
+    .x(left);
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+        top: -1px;
+    }
+}
+.w-boxcoin-pop {
+    width: 800px;
+    max-width: 100%;
+
+    .el-dialog__body {
+        padding: 10px 20px;
+
+        .fz(14px,2);
+
+        .u-left {
+            .fz(14px,24px);
+            .u-label {
+                .mr(10px);
+            }
+            b {
+                // color:#49c10f;
+                // color:@color-link;
+                color: #fba524;
+                .fz(20px,1);
+                .dbi;
+                .y;
+                vertical-align: text-bottom;
+                .mr(10px);
+            }
+            .el-progress {
+                margin: 10px;
+            }
+        }
+        .u-list {
+            .mt(10px);
+        }
+        .u-points {
+            padding: 10px;
+            .el-radio {
+                .ml(0) !important;
+                .mb(10px);
+                .w(140px);
+                b {
+                    color: #e81224;
+                    .mr(5px);
+                }
+            }
+            .el-input-number {
+                .ml(0) !important;
+                .mb(10px);
+                .w(140px);
+            }
+        }
+
+        .u-label {
+            font-style: normal;
+            background-color: @bg-gray;
+            padding: 5px 10px;
+        }
+        .u-input {
+            padding: 10px 0 10px 10px;
+        }
+
+        .el-button {
+            padding: 10px;
+            margin: 10px 0 0 0;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-boxcoin-pop {
+        margin-top: 0 !important;
+        .w(100%) !important;
+    }
+}
+
+.w-boxcoin-records-list {
+    max-width: 960px;
+    border: 1px solid #eee;
+    margin: 0 auto;
+
+    .u-list {
+        list-style: none;
+        .x(left);
+        margin: 0 auto;
+        padding: 0;
+    }
+    .u-item {
+        border-bottom: 1px dashed #eee;
+        .fz(13px,2.5);
+        .clearfix;
+        padding: 4px 10px;
+        &:last-child {
+            border: none;
+        }
+        display: flex;
+        white-space: nowrap;
+    }
+    .u-meta {
+        .db;
+        .fl;
+    }
+    .u-action {
+        .w(40px);
+        .db;
+        padding-right: 10px;
+        svg {
+            .size(24px);
+            .mt(4px);
+            .db;
+            .auto(x);
+        }
+        .x;
+    }
+    .u-user {
+        .w(120px);
+        .nobreak;
+        &:hover {
+            text-decoration: underline;
+        }
+        .mr(20px);
+    }
+    .u-user-avatar {
+        .y;
+        .size(24px);
+        .mr(5px);
+        .r(2px);
+    }
+    .u-count {
+        .w(120px);
+    }
+    .u-head {
+        background-color: @bg-light;
+    }
+    .u-body {
+        .u-count {
+            color: #fe7e91;
+            font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+        }
+    }
+    .u-remark {
+        .nobreak;
+        .w(280px);
+    }
+    .u-time {
+        color: #999;
+    }
+    .u-delete {
+        .ml(20px);
+        color: #c00;
+        i {
+            .mr(3px);
+        }
+        .pointer;
+        &:hover {
+            color: #f00;
+        }
+    }
+    .u-client {
+        margin-left: 5px;
+        color: #09f;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .w-boxcoin-records-list {
+        overflow-x: auto;
+        .u-list {
+            .w(100%);
+        }
+        .u-user {
+            .w(100px);
+        }
+        .u-count {
+            .w(80px);
+        }
+        .u-time,
+        .u-remark {
+            .none;
+        }
+    }
+}

package/assets/css/var.less

@@ -0,0 +1,4 @@
+:root {
+    --el-color-primary: #0366d6;
+    --el-color-primary-light-3: #3585de;
+}

package/assets/css/wiki-comments.less

@@ -0,0 +1,150 @@
+.c-wiki-comments {
+    .u-empty {
+        padding: 5px 0;
+        text-align: center;
+    }
+
+    .el-button {
+        user-select: none;
+
+        &.el-button--default:focus,
+        &.el-button--default:active {
+            background: white;
+            border: 1px solid #dcdfe6;
+        }
+
+        &.el-button--primary:focus,
+        &.el-button--primary:active {
+            background-color: #0366d6;
+            border-color: #0366d6;
+        }
+    }
+
+    .u-pagination-box {
+        margin-top: 12px;
+    }
+
+    .m-comments-panel {
+        font-size: 14px;
+
+        .u-comments {
+            padding-left: 0;
+            list-style: none;
+        }
+
+        .u-nickname-panel {
+            .u-nickname {
+                font-weight: 600;
+                color: #666666;
+            }
+
+            .u-nickname[href] {
+                color: blueviolet;
+            }
+
+            span + .u-nickname {
+                opacity: 0.7;
+            }
+        }
+
+        .u-comment {
+            padding: 5px 0;
+            border-bottom: 1px solid #eeeeee;
+            overflow: hidden;
+        }
+
+        .u-content {
+            margin: 10px 0;
+            opacity: 0.8;
+        }
+
+        .m-reply {
+            padding-bottom: 10px;
+
+            .u-reply {
+                font-size: 13px;
+                padding: 6px 10px;
+            }
+
+            .u-time {
+                float: right;
+                margin-top: 5px;
+                font-size: 12px;
+                opacity: 0.5;
+            }
+        }
+
+        & > .u-comments {
+            margin: 0;
+            padding: 0;
+        }
+
+        & > .u-comments > .u-comment-panel > .u-comments {
+            padding-left: 15px;
+        }
+    }
+
+    // 回复表单样式
+    .m-reply-form {
+        overflow: hidden;
+
+        @border-style: 1px solid #cccccc;
+
+        .u-title {
+            .mt(15px);
+            .mb(10px);
+            .pb(10px);
+            color: #666666;
+            border-bottom: @border-style;
+
+            i,
+            span {
+                .dbi;
+                .mr(5px);
+                vertical-align: middle;
+                font-size: 16px;
+            }
+        }
+
+        .u-reply-content {
+            width: 100%;
+            height: 4em;
+            padding: 5px;
+            line-height: 1.5em;
+            box-sizing: border-box;
+            border: @border-style;
+            resize: vertical;
+            .r(3px);
+        }
+
+        .u-author {
+            .fl;
+
+            input {
+                .fz(14px, 28px);
+                .h(28px);
+                border: @border-style;
+                .r(3px);
+                padding: 0 5px;
+            }
+        }
+
+        .u-submit {
+            .fr;
+            padding: 7px 16px;
+        }
+    }
+
+    @media screen and (max-width: 360px) {
+        .m-reply-form {
+            .u-author,
+            .u-submit {
+                float: none;
+            }
+
+            .u-submit {
+                .mt(5px);
+            }
+        }
+    }
+}