@jx3box/jx3box-common-ui 6.6.6 → 6.6.9

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 {
@@ -586,6 +594,12 @@ body {
     }
 }
 
+@media screen and (max-width: @ipad) {
+    .c-header-msg {
+        display: none;
+    }
+}
+
 //操作面板
 .c-header-panel {
     float: left;
@@ -593,11 +607,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 +634,112 @@ body {
     }
 }
 
+@media screen and (max-width: @ipad) {
+    .c-header-panel {
+        display: none;
+    }
+}
+
+// 用户资产
+.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 +812,11 @@ body {
     }
 
     // .u-register {
-        // background-color: @primary;
-        // .mr(10px);
+    // background-color: @primary;
+    // .mr(10px);
     // }
 }
 
-
 // 用户信息
 .c-header-info {
     float: left;
@@ -779,6 +898,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 +985,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/data/box2.json

@@ -602,122 +602,5 @@
                 ]
             }
         ]
-    },
-    {
-        "name": "用户",
-        "icon": "",
-        "children": [
-            {
-                "name": "账号",
-                "children": [
-                    {
-                        "name": "注册/登录账号",
-                        "href": "/account/",
-                        "client": "std",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "资料设置",
-                        "href": "/dashboard/profile",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "亲友/黑名单",
-                        "href": "/dashboard/privacy",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": true,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "反馈中心",
-                        "href": "/dashboard/feedback",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "申请签约",
-                        "href": "/dashboard/cooperation",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "注销账号",
-                        "href": "/dashboard/feedback/erase",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    }
-                ]
-            },
-            {
-                "name": "资产",
-                "children": [
-                    {
-                        "name": "盒币兑换",
-                        "href": "/dashboard/boxcoin",
-                        "client": "std",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "金箔提现",
-                        "href": "/dashboard/cny",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "银铛兑换",
-                        "href": "/dashboard/points",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "卡密/激活码",
-                        "href": "/dashboard/card",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    }
-                ]
-            },
-            {
-                "name": "增值服务",
-                "children": [
-                    {
-                        "name": "付费版账号",
-                        "href": "/vip/premium/?from=header_box",
-                        "client": "std",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    },
-                    {
-                        "name": "积分商城",
-                        "href": "/vip/mall/",
-                        "client": "all",
-                        "status": true,
-                        "hasMark": false,
-                        "markcls": "ishot"
-                    }
-                ]
-            }
-        ]
     }
 ]

package/assets/img/header/bell.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" enable-background="new 0 0 32 32" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2"><path d="m27.943 22.07-.601-1c-.779-1.298-1.191-2.784-1.191-4.298v-5.52c0-5.598-4.553-10.152-10.151-10.152s-10.151 4.554-10.151 10.151v5.52c0 1.514-.412 3-1.191 4.298l-.601 1.001c-.485.809-.498 1.781-.033 2.603.465.821 1.305 1.311 2.249 1.311h19.455c.943 0 1.784-.49 2.249-1.311.464-.821.451-1.794-.034-2.603zm-1.533 1.716c-.068.12-.27.398-.682.398h-19.456c-.413 0-.614-.278-.682-.398-.068-.119-.202-.436.01-.789l.601-1c.947-1.578 1.448-3.384 1.448-5.225v-5.52c-.001-4.606 3.746-8.352 8.351-8.352s8.352 3.747 8.352 8.352v5.52c0 1.84.5 3.647 1.448 5.225l.601 1c.211.353.077.67.009.789z"/><path d="m19.087 27.758c-.657.84-1.811 1.342-3.087 1.342s-2.43-.502-3.087-1.342c-.307-.391-.873-.46-1.264-.154s-.46.872-.154 1.264c.995 1.272 2.68 2.032 4.505 2.032s3.51-.76 4.505-2.033c.306-.392.237-.958-.154-1.264-.391-.305-.957-.235-1.264.155z"/></g></svg>

package/assets/img/header/coin.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm0-2c2.1217 0 4.1566-.8429 5.6569-2.3431 1.5002-1.5003 2.3431-3.5352 2.3431-5.6569 0-2.12173-.8429-4.15656-2.3431-5.65685-1.5003-1.5003-3.5352-2.34315-5.6569-2.34315-2.12173 0-4.15656.84285-5.65685 2.34315-1.5003 1.50029-2.34315 3.53512-2.34315 5.65685 0 2.1217.84285 4.1566 2.34315 5.6569 1.50029 1.5002 3.53512 2.3431 5.65685 2.3431zm0-12.95 4.95 4.95-4.95 4.95-4.95-4.95zm0 2.829-2.121 2.121 2.121 2.121 2.121-2.121z" fill="rgb(0,0,0)"/></svg>

package/assets/img/header/edit.svg

@@ -0,0 +1 @@
+<svg height="15px" viewBox="0 -1 401.52289 401" width="15px" xmlns="http://www.w3.org/2000/svg"><path d="m370.589844 250.972656c-5.523438 0-10 4.476563-10 10v88.789063c-.019532 16.5625-13.4375 29.984375-30 30h-280.589844c-16.5625-.015625-29.980469-13.4375-30-30v-260.589844c.019531-16.558594 13.4375-29.980469 30-30h88.789062c5.523438 0 10-4.476563 10-10 0-5.519531-4.476562-10-10-10h-88.789062c-27.601562.03125-49.96875 22.398437-50 50v260.59375c.03125 27.601563 22.398438 49.96875 50 50h280.589844c27.601562-.03125 49.96875-22.398437 50-50v-88.792969c0-5.523437-4.476563-10-10-10zm0 0"/><path d="m376.628906 13.441406c-17.574218-17.574218-46.066406-17.574218-63.640625 0l-178.40625 178.40625c-1.222656 1.222656-2.105469 2.738282-2.566406 4.402344l-23.460937 84.699219c-.964844 3.472656.015624 7.191406 2.5625 9.742187 2.550781 2.546875 6.269531 3.527344 9.742187 2.566406l84.699219-23.464843c1.664062-.460938 3.179687-1.34375 4.402344-2.566407l178.402343-178.410156c17.546875-17.585937 17.546875-46.054687 0-63.640625zm-220.257812 184.90625 146.011718-146.015625 47.089844 47.089844-146.015625 146.015625zm-9.40625 18.875 37.621094 37.625-52.039063 14.417969zm227.257812-142.546875-10.605468 10.605469-47.09375-47.09375 10.609374-10.605469c9.761719-9.761719 25.589844-9.761719 35.351563 0l11.738281 11.734375c9.746094 9.773438 9.746094 25.589844 0 35.359375zm0 0"/></svg>

package/assets/img/header/manage.svg

@@ -0,0 +1 @@
+<svg t="1674922277276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8703" width="18" height="18"><path d="M224 423.84V231.744l192-0.096 0.096 192.096L224 423.84z m192.096-256.096H223.904A64 64 0 0 0 160 231.68v192.192a64 64 0 0 0 63.904 63.904h192.192A64 64 0 0 0 480 423.84V231.68a64 64 0 0 0-63.904-63.904zM224 807.84v-192.096l192-0.096 0.096 192.096L224 807.84z m192.096-256.096H223.904A64 64 0 0 0 160 615.68v192.192a64 64 0 0 0 63.904 63.904h192.192A64 64 0 0 0 480 807.84V615.68a64 64 0 0 0-63.904-63.904zM704.064 463.616l-135.84-135.84 135.712-135.84 135.904 135.744-135.776 135.936z m181.024-181.024l-135.904-135.904a64 64 0 0 0-90.368 0L522.912 282.56a63.456 63.456 0 0 0-18.656 45.056 63.456 63.456 0 0 0 18.656 45.312l135.904 135.936a63.904 63.904 0 0 0 90.368-0.032l135.904-135.904a63.936 63.936 0 0 0 0-90.368zM608 807.84v-192.096l192-0.096 0.096 192.096-192.096 0.096z m192.096-256.096h-192.192A64 64 0 0 0 544 615.68v192.192a64 64 0 0 0 63.904 63.904h192.192A64 64 0 0 0 864 807.84V615.68a64 64 0 0 0-63.904-63.904z" fill="#fff" p-id="8704"></path></svg>

package/assets/img/header/send.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 367.92 367.92" style="enable-background:new 0 0 367.92 367.92;" xml:space="preserve" fill="#ffffff" width="16px" height="16px">
+<g>
+	<g>
+		<g>
+			<path d="M367.851,6.944c-0.056-0.424-0.12-0.832-0.248-1.248c-0.136-0.456-0.32-0.872-0.528-1.296
+				c-0.112-0.232-0.152-0.48-0.288-0.704c-0.088-0.144-0.232-0.24-0.336-0.376c-0.264-0.368-0.576-0.688-0.904-1.016
+				c-0.328-0.328-0.656-0.632-1.032-0.896c-0.136-0.096-0.224-0.232-0.36-0.312c-0.224-0.136-0.472-0.168-0.704-0.28
+				c-0.44-0.216-0.872-0.4-1.336-0.536c-0.392-0.104-0.776-0.16-1.176-0.208c-0.472-0.056-0.928-0.088-1.4-0.064
+				c-0.44,0.024-0.864,0.112-1.296,0.216c-0.272,0.064-0.552,0.04-0.824,0.136l-352,120c-3.184,1.072-5.352,4.04-5.416,7.408
+				c-0.064,3.368,1.984,6.416,5.136,7.624l164.456,63.192l71.064,164.512c1.272,2.936,4.168,4.824,7.344,4.824
+				c0.136,0,0.264,0,0.4-0.008c3.336-0.168,6.208-2.384,7.224-5.56l112-352c0.08-0.248,0.056-0.504,0.104-0.76
+				c0.096-0.448,0.168-0.88,0.184-1.336C367.931,7.808,367.907,7.384,367.851,6.944z M31.475,128.368L330.011,26.592
+				L173.619,182.984L31.475,128.368z M246.859,337.112l-61.76-142.976L342.403,36.824L246.859,337.112z"/>
+			<path d="M125.659,242.264c-3.128-3.128-8.184-3.128-11.312,0l-112,112c-3.128,3.128-3.128,8.184,0,11.312
+				c1.56,1.56,3.608,2.344,5.656,2.344s4.096-0.784,5.656-2.344l112-112C128.787,250.448,128.787,245.392,125.659,242.264z"/>
+			<path d="M146.347,298.264l-56,56c-3.128,3.128-3.128,8.184,0,11.312c1.56,1.56,3.608,2.344,5.656,2.344
+				c2.048,0,4.096-0.784,5.656-2.344l56-56c3.128-3.128,3.128-8.184,0-11.312C154.531,295.136,149.475,295.136,146.347,298.264z"/>
+			<path d="M8.003,279.92c2.048,0,4.096-0.784,5.656-2.344l56-56c3.128-3.128,3.128-8.184,0-11.312
+				c-3.128-3.128-8.184-3.128-11.312,0l-56,56c-3.128,3.128-3.128,8.184,0,11.312C3.907,279.136,5.955,279.92,8.003,279.92z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/assets/img/header/vip.svg

@@ -0,0 +1 @@
+<svg t="1674921978278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4292" width="16" height="16"><path d="M844.89 85.33H179.11L0 436.6l512 502.07 512-502.07L844.89 85.33zM106.34 419.67l126.77-248.64h557.77l126.77 248.64L512 817.46 106.34 419.67z" fill="#fff" p-id="4293"></path><path d="M512 603.21L324.41 419.26l-61.8 60.6L512 724.42l249.39-244.56-61.8-60.6z" fill="#fff" p-id="4294"></path></svg>