@jx3box/jx3box-common-ui 6.6.5 → 6.6.8

package/assets/css/header.less

@@ -54,16 +54,16 @@ body {
         transition: 0.3s ease-in-out;
     }
     // &:hover {
-        // background-color:@primary;
-        // .u-pic {
-        //     // transform: rotateZ(180deg);
-        //     svg {
-        //         fill: #0cf;
-        //     }
-        // }
-        // .u-txt {
-        //     color: #0cf;
-        // }
+    // background-color:@primary;
+    // .u-pic {
+    //     // transform: rotateZ(180deg);
+    //     svg {
+    //         fill: #0cf;
+    //     }
+    // }
+    // .u-txt {
+    //     color: #0cf;
+    // }
     // }
     .u-txt {
         color: #fff;
@@ -89,43 +89,46 @@ body {
 }
 
 //怀旧服
-.c-header-origin{
+.c-header-origin {
     .fl;
-    margin:15px 0;
+    margin: 15px 0;
     .mr(10px);
     .pr;
-    background-color:#7d7d7d;
+    background-color: #7d7d7d;
     border: 2px solid #303133;
     border-radius: 4px;
     overflow: hidden;
-    .u-active{
+    .u-active {
         .db;
-        .size(50%,100%);
+        .size(50%, 100%);
         background: @color-link;
-        &:hover{
-            background-color:#3590f7;
+        &:hover {
+            background-color: #3590f7;
         }
-        .pa;.lt(0);
+        .pa;
+        .lt(0);
 
         transition: all 0.2s ease-in-out;
-        &.isOffset{
+        &.isOffset {
             transform: translateX(100%);
         }
     }
-    .u-item{
-        .dbi;.y(top);
+    .u-item {
+        .dbi;
+        .y(top);
         font-size: 14px;
         color: #fff;
         .pointer;
         padding: 5px 10px;
-        .pr;.z(1);
+        .pr;
+        .z(1);
     }
-    .on{
+    .on {
         cursor: default;
     }
 }
-@media screen and (max-width:@phone){
-    .c-header-origin{
+@media screen and (max-width: @phone) {
+    .c-header-origin {
         .ml(10px);
         .mt(16px);
     }
@@ -192,7 +195,7 @@ body {
     .fl;
     font-family: Montserrat, "Helvetica Neue", sans-serif;
     .clearfix;
-    .u-item-box{
+    .u-item-box {
         .fl;
     }
     .u-item {
@@ -222,7 +225,7 @@ body {
         }
         padding: 16px 15px;
         transition: 0.1s ease-in;
-        i{
+        i {
             .none;
         }
     }
@@ -243,9 +246,9 @@ body {
             line-height: 16px;
             padding: 10px 30px;
             .db;
-            span{
+            span {
                 .fz(12px);
-                color:#999;
+                color: #999;
             }
         }
     }
@@ -284,8 +287,6 @@ body {
     }
 
     .u-menu {
-        // .none;
-
         background-clip: padding-box;
         background-color: #fff;
         color: @color;
@@ -348,25 +349,27 @@ body {
         }
     }
 
-    .i-icon-vip{
-        .dbi;vertical-align: baseline;
-        padding:2px 5px;
-        .fz(12px,14px);
+    .i-icon-vip {
+        .dbi;
+        vertical-align: baseline;
+        padding: 2px 5px;
+        .fz(12px, 14px);
         font-style: normal;
         border-radius: 2px;
-        background-color:#ddd;
-        color:#fff;
-        &.on{
+        background-color: #ddd;
+        color: #fff;
+        &.on {
             background-color: #6f42c1;
         }
     }
-    .u-expire,.u-vip-type{
+    .u-expire,
+    .u-vip-type {
         .fz(12px);
         // color:#999;
         .ml(5px);
     }
-    .u-vip-left{
-        color:#999;
+    .u-vip-left {
+        color: #999;
         .ml(5px);
     }
 
@@ -376,6 +379,10 @@ body {
         display: inline-block;
         margin-right: 3px;
     }
+
+    .off {
+        filter: grayscale(100%);
+    }
 }
 
 //消息面板
@@ -386,18 +393,20 @@ body {
 
     .u-msg {
         display: block;
-        height: 32px;
-        padding: 13px 10px;
+        // height: 32px;
+        padding: 27px 14px 20px 14px;
         &:hover {
             opacity: 0.7;
         }
         cursor: pointer;
     }
     .u-icon-msg {
-        .mt(10px);
-        width: 15px;
-        height: 16px;
+        // .mt(10px);
+        width: 17px;
+        height: 17px;
         display: block;
+        .pr;
+        top: -1px;
         // margin-top: 9px;
         svg {
             width: 100%;
@@ -415,7 +424,7 @@ body {
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -10px;
+        top: -6px;
     }
     .u-list {
         // .none;
@@ -435,14 +444,13 @@ body {
         border: 1px solid #ccc;
         padding: 10px;
 
-
         ul {
             padding: 0;
             margin: 0;
             list-style: none;
             *zoom: 1;
             &::after {
-                content: '';
+                content: "";
                 flex: 1;
             }
             // &:after {
@@ -593,11 +601,11 @@ body {
     height: 100%;
     user-select: none;
     cursor: pointer;
+    box-sizing: border-box;
 
     .u-post {
         .db;
-        height: 32px;
-        padding: 20px 10px 10px 10px;
+        padding: 24px 8px 24px 10px;
     }
 
     .u-add {
@@ -620,6 +628,106 @@ body {
     }
 }
 
+// 用户资产
+.c-header-assets {
+    float: left;
+    position: relative;
+    height: 100%;
+
+    .u-coin {
+        .db;
+        .size(18px);
+        * {
+            fill: #fff !important;
+        }
+    }
+    .u-asset {
+        .db;
+        padding: (@header-height - 16px)/2 10px;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+
+    .u-icon {
+        .size(16px);
+        // font-size: 15px;
+        display: block;
+        // height: 32px;
+        padding: 24px 10px 10px 10px;
+        .pointer;
+    }
+
+    .u-assets {
+        .pa;
+        background-clip: padding-box;
+        background-color: #fff;
+        color: #3d454d;
+        border: 1px solid rgba(27, 31, 35, 0.15);
+        border-radius: 4px;
+        box-shadow: 0 3px 12px rgb(27 31 35 / 15%);
+        right: 0;
+        list-style: none;
+        margin: -6px 0 0 0;
+        padding: 15px;
+        position: absolute;
+        z-index: 820;
+        top: 100%;
+        width: 200px;
+
+        &:before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            left: auto;
+            right: 9px;
+            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: 10px;
+            top: -14px;
+            border: 7px solid transparent;
+            border-bottom-color: #fff;
+        }
+    }
+
+    .u-detail {
+        .u-item {
+            font-size: 12px;
+            color: #454545;
+            .flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 5px 0;
+
+            .u-value {
+                font-weight: bold;
+                .ml(5px);
+                color: #da076a;
+            }
+            .u-item-extend {
+                a {
+                    .ml(5px);
+                    &:hover {
+                        color: @pink;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 管理菜单
+.c-header-manage {
+}
+
 //登录、注册
 .c-header-login {
     margin: 16px 5px 16px 0;
@@ -692,12 +800,11 @@ body {
     }
 
     // .u-register {
-        // background-color: @primary;
-        // .mr(10px);
+    // background-color: @primary;
+    // .mr(10px);
     // }
 }
 
-
 // 用户信息
 .c-header-info {
     float: left;
@@ -779,6 +886,85 @@ body {
             opacity: 0.7;
         }
     }
+
+    .m-info {
+        background-clip: padding-box;
+        background-color: #fff;
+        color: #3d454d;
+        border: 1px solid rgba(27, 31, 35, 0.15);
+        border-radius: 4px;
+        box-shadow: 0 3px 12px rgb(27 31 35 / 35%);
+        right: 0;
+        list-style: none;
+        position: absolute;
+        z-index: 820;
+        top: 100%;
+        width: 400px;
+        margin-top: 18px;
+        margin-right: -10px;
+
+        .u-profile {
+            background-color: #f4f6f7;
+            padding: 10px;
+        }
+
+        .u-id {
+            font-size: 12px;
+            color: #999;
+            margin-top: 5px;
+        }
+        .u-copy {
+            margin-left: 5px;
+            .pointer;
+
+            &:hover {
+                color: @primary;
+            }
+        }
+        .m-vip {
+            margin-top: 5px;
+        }
+        .u-vip {
+            margin-left: 10px;
+        }
+
+        .u-actions {
+            width: 100%;
+            .flex;
+
+            .el-button {
+                border-radius: 0;
+                flex: 1;
+
+                &:first-of-type {
+                    border-left-width: 0;
+                }
+                &:last-of-type {
+                    border-right-width: 0;
+                }
+            }
+        }
+
+        .m-other {
+            .u-item {
+                display: block;
+                padding: 5px 10px;
+                color: #454545;
+
+                &:hover {
+                    background: @primary;
+                    color: #fff;
+                }
+            }
+            .u-logout {
+                padding: 0 10px 10px 10px;
+
+                .el-button {
+                    width: 100%;
+                }
+            }
+        }
+    }
 }
 
 @media print {
@@ -787,16 +973,18 @@ body {
     }
 }
 
-@media screen and (max-width:@phone){
-    .env-app{
-        .c-header{.none;}
-        body{
+@media screen and (max-width: @phone) {
+    .env-app {
+        .c-header {
+            .none;
+        }
+        body {
             padding-top: 0;
         }
     }
 }
 
-.c-header-jx3box{
+.c-header-jx3box {
     top: @header-height;
     left: 0;
 }

package/assets/css/left-sidebar.less

@@ -1,141 +1,137 @@
 .c-sidebar-left {
-  .w(@aside-left - 40px);
-  box-sizing: border-box;
-  padding: 10px;
-  .pf;
-  .z(600);
-  left: 0;
-  top: @header-height + @bread-height;
-  bottom: 0;
-  background-color: @bg-light;
-  border-right: 1px solid #eee;
+    .w(@aside-left - 40px);
+    box-sizing: border-box;
+    padding: 10px;
+    .pf;
+    .z(600);
+    left: 0;
+    top: @header-height + @bread-height;
+    bottom: 0;
+    background-color: @bg-light;
+    border-right: 1px solid #eee;
 }
 
 .c-sidebar-left.without-bread {
-  top: @header-height;
+    top: @header-height;
 }
 
 .c-sidebar-left-inner {
-  .size(100%);
-  overflow-y: hidden;
-
-  &:hover {
+    .size(100%);
     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;
-  }
+
+    &::-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;
+    }
 }
 
 // 笔记本<1440 缩小双边栏
 @media screen and (max-width: @smallpc) {
-  .c-sidebar-left {
-    .w(@aside-left - 40px);
-  }
+    .c-sidebar-left {
+        .w(@aside-left - 40px);
+    }
 }
 
 // 平板横屏
 @media screen and (max-width: @notebook) {
-  .c-sidebar-left {
-    .w(@aside-left - 60px);
-  }
+    .c-sidebar-left {
+        .w(@aside-left - 60px);
+    }
 }
 
 @media screen and (max-width: @phone) {
     .c-sidebar-left-inner {
-      overflow-y: auto;
+        overflow-y: auto;
     }
 }
 
 // 折叠相关逻辑
 .c-sidebar-left-toggle {
-  display: block;
-  .pa;
-  .rb(-21px, calc(50% - 20px));
-  width: 20px;
-  height: 40px;
-  line-height: 40px;
-  .pointer;
-  text-align: center;
-  background-color: @bg-light;
-  border-right: 1px solid #eee;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
-  border-radius: 0px 2px 2px 0px;
-  font-size: 16px;
-  color: #999;
-
-  &:hover {
-    color: #222;
-  }
-
-  &.close-sidebar-left {
-    right: 0;
-  }
-
-  svg {
-    fill: @color;
-  }
+    display: block;
+    .pa;
+    .rb(-21px, calc(50% - 20px));
+    width: 20px;
+    height: 40px;
+    line-height: 40px;
+    .pointer;
+    text-align: center;
+    background-color: @bg-light;
+    border-right: 1px solid #eee;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-radius: 0px 2px 2px 0px;
+    font-size: 16px;
+    color: #999;
+
+    &:hover {
+        color: #222;
+    }
+
+    &.close-sidebar-left {
+        right: 0;
+    }
+
+    svg {
+        fill: @color;
+    }
 }
 
 .closeLeftSidebar() {
-  transition: 0.2s ease-in-out;
-  transform: translateX(-100%);
+    transition: 0.2s ease-in-out;
+    transform: translateX(-100%);
 }
 
 .openLeftSidebar() {
-  transition: 0.2s ease-in-out;
-  transform: translateX(0);
+    transition: 0.2s ease-in-out;
+    transform: translateX(0);
 }
 
 .c-sidebar-left.isclose {
-  .closeLeftSidebar();
+    .closeLeftSidebar();
 
-  .c-sidebar-left-toggle {
-    transition: 0.2s ease-in-out;
-    transform: translateX(100%);
-  }
+    .c-sidebar-left-toggle {
+        transition: 0.2s ease-in-out;
+        transform: translateX(100%);
+    }
 }
 
 .c-sidebar-left.isopen {
-  .openLeftSidebar();
+    .openLeftSidebar();
 
-  .c-sidebar-left-toggle {
-    transition: 0.2s ease-in-out;
-    transform: translateX(0);
-  }
+    .c-sidebar-left-toggle {
+        transition: 0.2s ease-in-out;
+        transform: translateX(0);
+    }
 }
 
 @media screen and (max-width: @ipad) {
-  .c-sidebar-left-toggle {
-    .none;
-  }
+    .c-sidebar-left-toggle {
+        .none;
+    }
 
-  .c-sidebar-left.isopen {
-    box-shadow: 2px 0 3px rgba(0, 0, 0, .1);
-  }
+    .c-sidebar-left.isopen {
+        box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
+    }
 }
 
 @media print {
-  .c-sidebar-left {
-    .none;
-  }
+    .c-sidebar-left {
+        .none;
+    }
 }