@jx3box/jx3box-vue3-ui 0.0.3

package/assets/css/like.less

@@ -0,0 +1,80 @@
+.w-like {
+    .u-heart {
+        // .pr;top:2px;
+        .dbi;
+        .y(top);
+        .h(12px);
+        svg {
+            .size(12px);
+            fill: #fff;
+        }
+        .mr(5px);
+    }
+}
+
+.w-like-heart {
+    user-select: none;
+
+    .w-heart {
+        .dbi;
+        .y(top);
+    }
+    .u-text {
+        .lh(50px);
+        padding-right: 15px;
+    }
+    // border:1px solid #eee;
+    .r(4px);
+    .dbi;
+    .pointer;
+
+    .w-heart {
+        background-position: right; //显示最后一个红心帧
+    }
+    .u-text {
+        color: #e2264d;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    .u-count {
+        color: #aaa;
+        padding-right: 15px;
+    }
+}
+
+.w-heart {
+    background: url("../img/widget/web_heart_animation.png");
+    background-position: left;
+    background-repeat: no-repeat;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    background-size: 1450px; //实际背景图片尺寸2900px
+}
+@-webkit-keyframes heartBlast {
+    0% {
+        background-position: left;
+    }
+    100% {
+        background-position: right;
+    }
+}
+@keyframes heartBlast {
+    0% {
+        background-position: left;
+    }
+    100% {
+        background-position: right;
+    }
+}
+.w-heart-animation {
+    -webkit-animation-name: heartBlast; //webkit内核浏览器
+    animation-name: heartBlast;
+    -webkit-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+    -webkit-animation-iteration-count: 1;
+    animation-iteration-count: 1;
+    -webkit-animation-timing-function: steps(28); //共28个背景图片帧
+    animation-timing-function: steps(28);
+    background-position: right;
+}

package/assets/css/like2.less

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

package/assets/css/main.less

@@ -0,0 +1,67 @@
+// 主体
+a {
+    color: @primary;
+}
+.c-main {
+    .ml(@aside-left - 40px);
+    .mr(@aside-right);
+    .pr;
+    min-height: calc(100vh - @header-height - @bread-height);
+    margin-top: @header-height + @bread-height;
+    transition: 0.2s ease-in;
+}
+.c-main.without-bread {
+    margin-top: @header-height;
+}
+.c-main.without-right {
+    .mr(0) !important;
+
+    .c-sidebar-right {
+        .none;
+    }
+}
+.c-main.without-left {
+    .ml(0) !important;
+}
+
+@media screen and (max-width: @smallpc) {
+    .c-main {
+        .mr(0);
+    }
+}
+
+// 笔记本<1440 缩小双边栏
+@media screen and (max-width: @smallpc) {
+    .c-main {
+        .ml(@aside-left - 40px);
+    }
+}
+
+// 平板横屏
+@media screen and (max-width: @notebook) {
+    .c-main {
+        .ml(@aside-left - 60px);
+    }
+}
+
+//平板横屏与手机
+@media screen and (max-width: @ipad) {
+    .c-main {
+        .ml(0);
+    }
+}
+
+@media print {
+    .c-main {
+        margin: 0;
+        .w(100%);
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .env-app {
+        .c-main {
+            .mt(0);
+        }
+    }
+}

package/assets/css/mark-by.less

@@ -0,0 +1,97 @@
+.w-filter-menu {
+    .pointer;
+    .u-menu-label {
+        i {
+            .mr(5px);
+        }
+        .fz(12px);
+    }
+}
+.w-filter-mark {
+    .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-mark {
+        .pr;
+        background-color: @bg-light;
+        border: 1px solid #ddd;
+        .r(4px);
+        user-select: none;
+        padding: 6px 0;
+        padding-right: 20px;
+        .w(124px);
+        box-sizing: border-box;
+
+        &.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-mark {
+        .none;
+    }
+}

package/assets/css/mark.less

@@ -0,0 +1,34 @@
+.w-mark {
+    display: inline-block;
+    .clearfix;
+    .r(3px);
+    .clip;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+
+    .w-mark-key,
+    .w-mark-value {
+        padding: 2px 5px;
+        .fz(12px, 20px);
+        .h(20px);
+        .fl;
+        .db;
+        color: #fff;
+    }
+
+    .w-mark-key {
+        svg {
+            .size(20px);
+            .fl;
+            .mr(5px);
+            fill: #fff;
+        }
+        font-style: normal;
+        font-weight: normal;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        background-color: @bg-black;
+    }
+
+    .w-mark-value {
+        background-color: @primary;
+    }
+}

package/assets/css/menu-by.less

@@ -0,0 +1,9 @@
+.w-filter-menu {
+    .pointer;
+    .u-menu-label {
+        i {
+            .mr(5px);
+        }
+        .fz(12px);
+    }
+}

package/assets/css/mixin.less

@@ -0,0 +1,62 @@
+.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/order-by.less

@@ -0,0 +1,86 @@
+.w-filter-order {
+    .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-order {
+        .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-order {
+        .none;
+    }
+}

package/assets/css/print.less

@@ -0,0 +1,26 @@
+.w-print {
+    .dbi;
+    .u-icon {
+        .mr(5px);
+    }
+    .u-text {
+        .fz(13px);
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: @pink;
+    }
+}
+@media print {
+    // 边距
+    @page {
+        margin: 1cm 5mm;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .w-print {
+        .none;
+    }
+}

package/assets/css/qrcode.less

@@ -0,0 +1,70 @@
+.w-qrcode {
+    .dbi;
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-text {
+        .fz(13px);
+        user-select: none;
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: @pink;
+        .u-icon {
+            fill: @pink;
+        }
+    }
+
+    .u-qrcode {
+        .none;
+        .pa;
+        .mt(5px);
+        padding: 10px;
+        border: 1px solid #e8e8e8;
+        z-index: 1;
+        background: #fff;
+        border-radius: 3px;
+        font-size: 12px;
+        text-align: center;
+        color: #888;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    }
+    .u-pic {
+        .size(100px);
+        .mb(5px);
+    }
+    &.on {
+        .u-qrcode {
+            .db;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-qrcode {
+        .none;
+    }
+}
+.w-qrcode-static {
+    .u-qrcode {
+        .ps;
+    }
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-pic {
+        background-color: #fff;
+        padding: 7px 7px 7px 8px;
+    }
+    .u-txt {
+        padding: 0 5px;
+        .db;
+        .fz(12px,2);
+    }
+}

package/assets/css/right-msg.less

@@ -0,0 +1,26 @@
+.c-sidebar-right-msg {
+    @aiconh: 22px;
+
+    border: 1px solid @primary;
+    margin: 15px 15px 5px 15px;
+    padding: 10px 10px 10px 30px;
+    .r(6px);
+    .pr;
+
+    .u-icon {
+        .db;
+        .fl;
+        .size(16px, @aiconh);
+        svg {
+            .size(16px);
+            fill: @primary;
+        }
+        .pa;
+        .lt(10px, 50%);
+        margin-top: -@aiconh / 2 + 2px;
+    }
+
+    .u-msg {
+        .fz(12px, @aiconh);
+    }
+}

package/assets/css/right-sidebar.less

@@ -0,0 +1,106 @@
+.c-sidebar-right {
+    // .pa;.lt(100%,0);
+    .pf;
+    .rt(0,@header-height + @bread-height);
+    .z(400);
+    bottom: 0;
+    .w(@aside-right);
+    background-color: #fff;
+    border-left: 1px solid #eee;
+    // height:100%;
+    box-sizing: border-box;
+
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece {
+        background-color: #fafafa;
+        border-radius: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #eee;
+        border-radius: 6px;
+    }
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        display: none;
+    }
+}
+
+.c-sidebar-right-title {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 300;
+    margin: 0 0 10px 0;
+    padding: 0 0 5px 0;
+    border-bottom: 1px solid #ebeef5;
+
+    .u-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+}
+
+.c-sidebar-right-list {
+    .u-item {
+        .db;
+        height: 48px;
+        line-height: 48px;
+        background-color: #fff;
+        color: #303133;
+        cursor: pointer;
+        border-bottom: 1px solid #ebeef5;
+        font-size: 13px;
+        font-weight: 500;
+        transition: border-bottom-color 0.3s;
+        outline: none;
+        .pr;
+
+        &:hover {
+            color: @primary;
+        }
+
+        &:after {
+            content: "\e6e0";
+            .pa;
+            .rt(0,50%);
+            transform: translateY(-50%);
+            font-family: element-icons !important;
+            speak: none;
+            font-style: normal;
+            font-weight: 400;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            vertical-align: baseline;
+            display: inline-block;
+            -webkit-font-smoothing: antialiased;
+        }
+    }
+}
+
+// 笔记本<1440 缩小双边栏
+// @media screen and (max-width:@notebook){
+//     .c-sidebar-right{
+//         .w(@aside-right - 20px);
+//     }
+// }
+
+// // 平板横屏
+@media screen and (max-width: @smallpc) {
+    .c-sidebar-right {
+        .ps;
+        .w(auto);
+        border-left: none;
+    }
+}
+
+@media print {
+    .c-sidebar-right {
+        .none;
+    }
+}