tplus-member 3.51.1 → 3.53.1

package/dist/member/index.less

@@ -1,578 +1,578 @@
-@import "~tplus-components/dist/index.less";
-@import './color.less';
-
-.MemberContainer {
-    display         : flex;
-    justify-content : center;
-    align-items     : Center;
-    width           : 400px;
-    height          : 56px;
-    padding: 0px 10px;
-    .left {
-        width       : 320px;
-        flex: 1;
-        .search {
-            width          : 100%;
-            border-radius  : 3px;
-            height: 32px;
-            line-height: 32px;
-            display: flex;
-
-            .b1 {
-                float      : left;
-                height     : 30px;
-                line-height: 30px;
-                flex: 1;
-                position: relative;
-                .tplus-spin{
-                    position: absolute;
-                    right: 0;
-                    top: 2px;
-                }
-                .input {
-                    width       : 100%;
-                    height      : 30px;
-                    border-width: 0 !important;
-                    padding     : 0 5px;
-                    background  : transparent;
-                    padding-left: 12px;
-                }
-            }
-
-            .b2 {
-                float      : right;
-                display    : flex;
-                align-items: center;
-                height     : 30px;
-                position: relative;
-
-                .icon {
-                    font-size: 20px;
-                    color    : @color-g2;
-                    cursor   : pointer;
-                    margin-left: 8px;
-                    margin-right: 8px;
-                }
-                .openFaceRecognition-box{
-                    position: relative;
-                    width: 38px;
-                    height: 100%;
-                    .face-spin{
-                        position: absolute;
-                        top: 4px;
-                        left: 5px;
-                    }
-                }
-            }
-        }
-        .face-spin{
-            margin-top: -2px;
-            position: absolute;
-            right: 6px;
-            .circle{
-                border: 2px solid #ef8f39;
-                border-top-color: transparent;
-            }
-        }
-
-        .info {
-            width          : 100%;
-            height         : 56px;
-            display        : flex;
-            justify-content: left;
-            align-items    : Center;
-            &.member-btn-hidden-flex{
-                .first{
-                    flex: 0;
-                }
-                .second{
-                    flex: 1;
-                    justify-content: space-around;
-                    align-items: center;
-                    line-height: normal !important;
-                }
-                .close{
-                    flex: 0 0 50px;
-                }
-            }
-            .first {
-                position: relative;
-                img {
-                    width        : 36px;
-                    height       : 36px;
-                    border-radius: 50%;
-                    border       : 1px solid @color-g8;
-                    overflow     : hidden;
-                    cursor       : pointer;
-                }
-                .shengriIcon {
-                    position: absolute;
-                    left: 27px;
-                    top: -6px;
-                    color: #FA4052;
-                }
-                .birthdayContent {
-                    overflow: hidden;
-                    width: 145px;
-                    height: 185px;
-                    position: absolute;
-                    left: 100px;
-                    line-height: normal;
-                    top: -6px;
-                    color: white;
-                    background-image: url('@{url-prefix}/pictures/member_care.png');
-                    background-repeat:no-repeat;
-                    background-size:185px 145px;
-                    z-index: 332;
-                    .birthdayWarn {
-                        font-size: 9.6px;
-                        margin: 12px 0 0px 20px;
-                        color: white;
-                    }
-                    .check {
-                        margin-top: 5px;
-                        font-size: 10px;
-                        width: 30px !important;
-                        padding: 0 !important;
-                        min-width: 0;
-                        color: white;
-                        margin-left: 25px;
-                        height: 12px;
-                        line-height: 12px;
-                        font-family: 'PingFangSC-Regular';
-                        border: none !important;
-                    }
-                }
-                .cuowudaIcon {
-                    position: absolute;
-                    left: 100px;
-                    top: 100px;
-                    z-index: 333;
-                    top: 0;
-                    left: 230px;
-                    font-size: 20px;
-                    color: rgba(68,68,68,0.70);
-                    transform: rotate(29deg);
-                }
-            }
-
-            .second {
-                width          : 240px;
-                font-size      : 12px;
-                color          : @color-g1;
-                cursor         : default;
-                display        : flex;
-                justify-content: left;
-                align-items    : Center;
-                cursor: pointer;
-                .one {
-                    width   : 120px;
-                    overflow: hidden;
-                    padding-left : 5px;
-                    .a {
-                        overflow     : hidden;
-                        white-space  : nowrap;
-                        text-overflow: ellipsis;
-                    }
-
-                    .b {
-                        text-align      : left;
-                        font-size       : 12px;
-                        margin-top      : 5px;
-                        //color           : @color-d7;
-                        //background:url('https://newretail.static.chanjet.com/member_class.png') no-repeat left top;
-                        //min-width       : 40px;
-                        //background: linear-gradient(to bottom right, #e5c583 , #fadcb0);
-                        //border-radius: 14px 20px 20px 0;
-                        //display: inline-block;
-                        //padding: 0 4px;
-                        //max-width: 100%;
-                        //overflow: hidden;
-                        //height          : 18px;
-                        //line-height     : 18px;
-                    }
-                }
-                .oneDtMember {
-                    .b {
-                        width: 120px;
-                        word-wrap: break-word;
-                        word-break: break-all;
-                        overflow: hidden;
-                    }
-                }
-
-                .two {
-                    text-align: center;
-                    width     : 54px;
-                    //overflow  : hidden;
-                    word-break: keep-all;
-
-                    .a {
-                        font-size  : 12px;
-                        font-weight: bold;
-                        overflow: hidden;
-                        text-overflow:ellipsis;
-                        white-space: nowrap;
-                    }
-
-                    .b {
-                        font-size : 12px;
-                        margin-top: 5px;
-                    }
-                }
-            }
-
-            .close {
-                display: flex;
-                justify-content: center;
-                overflow   : hidden;
-                width      : 30px;
-                height     : 56px;
-                line-height: 56px;
-                padding    : 0px 5px;
-                cursor: pointer;
-
-                i {
-                    font-size: 16px;
-                    color    : @color-g5;
-                }
-            }
-        }
-    }
-
-    .right {
-        width       : 90px;
-        font-size   : 12px;
-        padding-left: 10px;
-        border-left : 1px solid @color-g6;
-        position    : relative;
-
-        .btn {
-            width           : 64px;
-            min-width       : 0px;
-            height          : 32px;
-            line-height     : 32px;
-            padding         : 0;
-            font-size       : 12px;
-            overflow: visible;
-        }
-        .inshop-member-spin{
-            margin: 0 auto;
-            display: inline-block;
-            margin-top: 3px;
-        }
-
-        .badge {
-            padding: 0px 4px;
-            position        : absolute;
-            top             : -11px;
-            right           : -8px;
-            min-width           : 20px;
-            height          : 20px;
-            line-height     : 20px;
-            text-align      : center;
-            font-size       : 12px;
-            color           : @color-z3;
-            border-radius   : 20px;
-            background-color: @color-d1;
-        }
-    }
-
-    .float{
-        display: flex;
-        align-items: center;
-        position: fixed;
-        top: 47px;
-        left: 102px;
-        z-index: 333;
-        width: 122px;
-        height: 26px;
-        background: #FFF;
-        border-radius: 3px;
-        box-shadow: 0px 1px 5px #999;
-        font-size: 10px;
-
-        .txt{
-            margin-left: 5px;
-            color: #000;
-            font-weight: 600;
-        }
-        .btn{
-            background: #FF8C25;
-            width: 32px;
-            height: 15px;
-            line-height: 15px;
-            border-radius: 5px;
-            color: #FFF;
-            text-align: center;
-            margin-left: 5px;
-            cursor: pointer;
-        }
-        .cancel{
-            position: absolute;
-            top: 0;
-            right: 0;
-            background: fade(#000,30%);
-            border-bottom-left-radius: 60%;
-            cursor: pointer;
-            i{font-size: 10px;color: #FFF;}
-        }
-
-    }
-}
-
-.member-care-modal{
-    .ant-modal-footer{display: none;}
-    .ant-modal-body{height: 400px !important;width: 688px;margin: auto;}
-    color: #000;
-    .first{
-        height: 30px;
-        font-size: 25px;
-        text-align: center;
-        margin-top: 28px;
-    }
-    .second {
-        width: 588px;
-        height      : 40px;
-        background  : #F1FBF6;
-        margin      : 17px 0;
-        display: flex;
-        border: 1px dashed #BCEDD3;
-        align-items: center;
-        margin-left: 50px;
-        i{margin-left: 20px;color: #333;}
-        span{margin-left: 10px;}
-        .secondContent {
-            margin-top: -3px;
-        }
-    }
-    .third{
-        height: 50px;
-        // width: 450px;
-        justify-content: center;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        .one{
-            position: relative;
-            img{height: 50px;width: 50px;}
-            i{position: absolute;top: -10px;right: -5px; color:#FA4052}
-
-        }
-        .two{
-            margin-left: 20px;
-        }
-    }
-    .fourth{
-        height: 150px;
-        width: 450px;
-        font-size: 14px;
-        margin: 10px auto;
-        overflow-y: scroll;
-
-        .item {
-            height: 30px;
-            line-height: 30px;
-            margin-left: 50px;
-        }
-    }
-}
-
-.member-birthday {
-    .u-modal-content {
-        background-color: rgba(255, 255, 255, 0) !important;
-        box-shadow      : 0 0 0 !important;
-        border          : 0 !important;
-        text-align      : center;
-
-        .u-modal-body {
-            width : 600px !important;
-            height: 370px !important;
-        }
-
-        .u-modal-header,
-        .u-modal-footer {
-
-            display: none;
-        }
-
-        .picture {
-            img {
-                width : 350px;
-                height: 308px;
-            }
-
-            i {
-                position : absolute;
-                top      : 0;
-                right    : 100px;
-                font-size: 24px;
-                color    : #FFFFFF;
-            }
-        }
-
-        .remark {
-            margin-top: 24px;
-            font-size : 22px;
-            color     : #FFFFFF;
-
-            span {
-                padding: 0 5px;
-                color  : #EF8F39;
-            }
-        }
-    }
-}
-
-.member-modal-animation{
-    &.u-modal.fade{
-        .u-modal-dialog{
-            opacity: 0;
-            top: 40%;
-            transform: translateY(-50%);
-            margin: 0px auto;
-            transition: all .2s ease-in-out !important;
-        }
-
-        &.in{
-            .u-modal-dialog{
-                opacity: 1;
-                top: 50%;
-            }
-        }
-    }
-}
-.MemberShowContainer {
-    .ant-modal-body{
-        padding: 0px;
-    }
-    .member-show-body {
-        .memberShopContainer {
-            padding-left: 0px !important;
-        }
-
-        .member-shop-content {
-            width: 100%;
-            height:calc(~'100% - 56px');
-
-            .member-content-tab {
-                flex: 1;
-            }
-        }
-    }
-
-    .footer {
-        border-top: 1px solid @color-g6  !important;
-        .ant-btn{
-            margin-right: 20px !important;
-        }
-    }
-}
-
-.MemberPhotoContainer {
-    .header {
-        border-bottom: 1px solid @color-g6  !important;
-        .u-modal-title {
-            font-size  : 18px;
-        }
-    }
-
-    .body {
-        height    : 376px;
-        overflow  : hidden;
-        overflow-y: auto;
-        padding   : 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        .memberPhoto {
-            float       : left;
-            text-align  : center;
-            padding: 10px 20px;
-            position    : relative;
-            width: 120px;
-            height: 135px;
-
-            .img {
-                width        : 80px;
-                height       : 80px;
-                border-radius: 50%;
-                border       : 1px solid @color-z3;
-                overflow     : hidden;
-            }
-
-            .select {
-                position        : absolute;
-                bottom          : 45px;
-                right           : 25px;
-                height          : 22px;
-                width           : 22px;
-                font-size       : 12px;
-                color           : @color-z3;
-                border-radius   : 20px;
-                background-color: @color-z1;
-            }
-
-            .tag {
-                font-size  : 16px;
-                line-height: 14px;
-                color      : @color-g1;
-                font-weight: 600;
-                padding-top: 16px;
-            }
-
-            img {
-                width : 80px;
-                height: 80px;
-            }
-        }
-    }
-
-    .footer {
-        border-top: 1px solid @color-g6  !important;
-        padding: 12px;
-    }
-}
-
-.MemberCloseContainer {
-    .header {
-        .u-modal-title {
-            font-size  : 18px;
-        }
-        .u-close {
-            opacity: 1 !important;
-        }
-    }
-
-    .body {
-        height : 120px;
-        padding: 0;
-        display: flex;
-
-        .content {
-            margin-top : 23px;
-            margin-left: 32px;
-
-            .icon {
-                font-size: 20px;
-                color    : @color-z1;
-            }
-
-            .span {
-                margin-left: 20px;
-                font-size  : 20px;
-                font-weight: 400;
-            }
-        }
-    }
-}
-
-.member-modal-wrapper{
-    .u-modal-backdrop{
-        z-index: 900 !important;
-    }
-    .u-modal{
-        z-index: 901 !important;
-    }
-}
+@import "~tplus-components/dist/index.less";
+@import './color.less';
+
+.MemberContainer {
+    display         : flex;
+    justify-content : center;
+    align-items     : Center;
+    width           : 400px;
+    height          : 56px;
+    padding: 0px 10px;
+    .left {
+        width       : 320px;
+        flex: 1;
+        .search {
+            width          : 100%;
+            border-radius  : 3px;
+            height: 32px;
+            line-height: 32px;
+            display: flex;
+
+            .b1 {
+                float      : left;
+                height     : 30px;
+                line-height: 30px;
+                flex: 1;
+                position: relative;
+                .tplus-spin{
+                    position: absolute;
+                    right: 0;
+                    top: 2px;
+                }
+                .input {
+                    width       : 100%;
+                    height      : 30px;
+                    border-width: 0 !important;
+                    padding     : 0 5px;
+                    background  : transparent;
+                    padding-left: 12px;
+                }
+            }
+
+            .b2 {
+                float      : right;
+                display    : flex;
+                align-items: center;
+                height     : 30px;
+                position: relative;
+
+                .icon {
+                    font-size: 20px;
+                    color    : @color-g2;
+                    cursor   : pointer;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                }
+                .openFaceRecognition-box{
+                    position: relative;
+                    width: 38px;
+                    height: 100%;
+                    .face-spin{
+                        position: absolute;
+                        top: 4px;
+                        left: 5px;
+                    }
+                }
+            }
+        }
+        .face-spin{
+            margin-top: -2px;
+            position: absolute;
+            right: 6px;
+            .circle{
+                border: 2px solid #ef8f39;
+                border-top-color: transparent;
+            }
+        }
+
+        .info {
+            width          : 100%;
+            height         : 56px;
+            display        : flex;
+            justify-content: left;
+            align-items    : Center;
+            &.member-btn-hidden-flex{
+                .first{
+                    flex: 0;
+                }
+                .second{
+                    flex: 1;
+                    justify-content: space-around;
+                    align-items: center;
+                    line-height: normal !important;
+                }
+                .close{
+                    flex: 0 0 50px;
+                }
+            }
+            .first {
+                position: relative;
+                img {
+                    width        : 36px;
+                    height       : 36px;
+                    border-radius: 50%;
+                    border       : 1px solid @color-g8;
+                    overflow     : hidden;
+                    cursor       : pointer;
+                }
+                .shengriIcon {
+                    position: absolute;
+                    left: 27px;
+                    top: -6px;
+                    color: #FA4052;
+                }
+                .birthdayContent {
+                    overflow: hidden;
+                    width: 145px;
+                    height: 185px;
+                    position: absolute;
+                    left: 100px;
+                    line-height: normal;
+                    top: -6px;
+                    color: white;
+                    background-image: url('@{url-prefix}/pictures/member_care.png');
+                    background-repeat:no-repeat;
+                    background-size:185px 145px;
+                    z-index: 332;
+                    .birthdayWarn {
+                        font-size: 9.6px;
+                        margin: 12px 0 0px 20px;
+                        color: white;
+                    }
+                    .check {
+                        margin-top: 5px;
+                        font-size: 10px;
+                        width: 30px !important;
+                        padding: 0 !important;
+                        min-width: 0;
+                        color: white;
+                        margin-left: 25px;
+                        height: 12px;
+                        line-height: 12px;
+                        font-family: 'PingFangSC-Regular';
+                        border: none !important;
+                    }
+                }
+                .cuowudaIcon {
+                    position: absolute;
+                    left: 100px;
+                    top: 100px;
+                    z-index: 333;
+                    top: 0;
+                    left: 230px;
+                    font-size: 20px;
+                    color: rgba(68,68,68,0.70);
+                    transform: rotate(29deg);
+                }
+            }
+
+            .second {
+                width          : 240px;
+                font-size      : 12px;
+                color          : @color-g1;
+                cursor         : default;
+                display        : flex;
+                justify-content: left;
+                align-items    : Center;
+                cursor: pointer;
+                .one {
+                    width   : 120px;
+                    overflow: hidden;
+                    padding-left : 5px;
+                    .a {
+                        overflow     : hidden;
+                        white-space  : nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .b {
+                        text-align      : left;
+                        font-size       : 12px;
+                        margin-top      : 5px;
+                        //color           : @color-d7;
+                        //background:url('https://newretail.static.chanjet.com/member_class.png') no-repeat left top;
+                        //min-width       : 40px;
+                        //background: linear-gradient(to bottom right, #e5c583 , #fadcb0);
+                        //border-radius: 14px 20px 20px 0;
+                        //display: inline-block;
+                        //padding: 0 4px;
+                        //max-width: 100%;
+                        //overflow: hidden;
+                        //height          : 18px;
+                        //line-height     : 18px;
+                    }
+                }
+                .oneDtMember {
+                    .b {
+                        width: 120px;
+                        word-wrap: break-word;
+                        word-break: break-all;
+                        overflow: hidden;
+                    }
+                }
+
+                .two {
+                    text-align: center;
+                    width     : 54px;
+                    //overflow  : hidden;
+                    word-break: keep-all;
+
+                    .a {
+                        font-size  : 12px;
+                        font-weight: bold;
+                        overflow: hidden;
+                        text-overflow:ellipsis;
+                        white-space: nowrap;
+                    }
+
+                    .b {
+                        font-size : 12px;
+                        margin-top: 5px;
+                    }
+                }
+            }
+
+            .close {
+                display: flex;
+                justify-content: center;
+                overflow   : hidden;
+                width      : 30px;
+                height     : 56px;
+                line-height: 56px;
+                padding    : 0px 5px;
+                cursor: pointer;
+
+                i {
+                    font-size: 16px;
+                    color    : @color-g5;
+                }
+            }
+        }
+    }
+
+    .right {
+        width       : 90px;
+        font-size   : 12px;
+        padding-left: 10px;
+        border-left : 1px solid @color-g6;
+        position    : relative;
+
+        .btn {
+            width           : 64px;
+            min-width       : 0px;
+            height          : 32px;
+            line-height     : 32px;
+            padding         : 0;
+            font-size       : 12px;
+            overflow: visible;
+        }
+        .inshop-member-spin{
+            margin: 0 auto;
+            display: inline-block;
+            margin-top: 3px;
+        }
+
+        .badge {
+            padding: 0px 4px;
+            position        : absolute;
+            top             : -11px;
+            right           : -8px;
+            min-width           : 20px;
+            height          : 20px;
+            line-height     : 20px;
+            text-align      : center;
+            font-size       : 12px;
+            color           : @color-z3;
+            border-radius   : 20px;
+            background-color: @color-d1;
+        }
+    }
+
+    .float{
+        display: flex;
+        align-items: center;
+        position: fixed;
+        top: 47px;
+        left: 102px;
+        z-index: 333;
+        width: 122px;
+        height: 26px;
+        background: #FFF;
+        border-radius: 3px;
+        box-shadow: 0px 1px 5px #999;
+        font-size: 10px;
+
+        .txt{
+            margin-left: 5px;
+            color: #000;
+            font-weight: 600;
+        }
+        .btn{
+            background: #FF8C25;
+            width: 32px;
+            height: 15px;
+            line-height: 15px;
+            border-radius: 5px;
+            color: #FFF;
+            text-align: center;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+        .cancel{
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: fade(#000,30%);
+            border-bottom-left-radius: 60%;
+            cursor: pointer;
+            i{font-size: 10px;color: #FFF;}
+        }
+
+    }
+}
+
+.member-care-modal{
+    .ant-modal-footer{display: none;}
+    .ant-modal-body{height: 400px !important;width: 688px;margin: auto;}
+    color: #000;
+    .first{
+        height: 30px;
+        font-size: 25px;
+        text-align: center;
+        margin-top: 28px;
+    }
+    .second {
+        width: 588px;
+        height      : 40px;
+        background  : #F1FBF6;
+        margin      : 17px 0;
+        display: flex;
+        border: 1px dashed #BCEDD3;
+        align-items: center;
+        margin-left: 50px;
+        i{margin-left: 20px;color: #333;}
+        span{margin-left: 10px;}
+        .secondContent {
+            margin-top: -3px;
+        }
+    }
+    .third{
+        height: 50px;
+        // width: 450px;
+        justify-content: center;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        .one{
+            position: relative;
+            img{height: 50px;width: 50px;}
+            i{position: absolute;top: -10px;right: -5px; color:#FA4052}
+
+        }
+        .two{
+            margin-left: 20px;
+        }
+    }
+    .fourth{
+        height: 150px;
+        width: 450px;
+        font-size: 14px;
+        margin: 10px auto;
+        overflow-y: scroll;
+
+        .item {
+            height: 30px;
+            line-height: 30px;
+            margin-left: 50px;
+        }
+    }
+}
+
+.member-birthday {
+    .u-modal-content {
+        background-color: rgba(255, 255, 255, 0) !important;
+        box-shadow      : 0 0 0 !important;
+        border          : 0 !important;
+        text-align      : center;
+
+        .u-modal-body {
+            width : 600px !important;
+            height: 370px !important;
+        }
+
+        .u-modal-header,
+        .u-modal-footer {
+
+            display: none;
+        }
+
+        .picture {
+            img {
+                width : 350px;
+                height: 308px;
+            }
+
+            i {
+                position : absolute;
+                top      : 0;
+                right    : 100px;
+                font-size: 24px;
+                color    : #FFFFFF;
+            }
+        }
+
+        .remark {
+            margin-top: 24px;
+            font-size : 22px;
+            color     : #FFFFFF;
+
+            span {
+                padding: 0 5px;
+                color  : #EF8F39;
+            }
+        }
+    }
+}
+
+.member-modal-animation{
+    &.u-modal.fade{
+        .u-modal-dialog{
+            opacity: 0;
+            top: 40%;
+            transform: translateY(-50%);
+            margin: 0px auto;
+            transition: all .2s ease-in-out !important;
+        }
+
+        &.in{
+            .u-modal-dialog{
+                opacity: 1;
+                top: 50%;
+            }
+        }
+    }
+}
+.MemberShowContainer {
+    .ant-modal-body{
+        padding: 0px;
+    }
+    .member-show-body {
+        .memberShopContainer {
+            padding-left: 0px !important;
+        }
+
+        .member-shop-content {
+            width: 100%;
+            height:calc(~'100% - 56px');
+
+            .member-content-tab {
+                flex: 1;
+            }
+        }
+    }
+
+    .footer {
+        border-top: 1px solid @color-g6  !important;
+        .ant-btn{
+            margin-right: 20px !important;
+        }
+    }
+}
+
+.MemberPhotoContainer {
+    .header {
+        border-bottom: 1px solid @color-g6  !important;
+        .u-modal-title {
+            font-size  : 18px;
+        }
+    }
+
+    .body {
+        height    : 376px;
+        overflow  : hidden;
+        overflow-y: auto;
+        padding   : 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .memberPhoto {
+            float       : left;
+            text-align  : center;
+            padding: 10px 20px;
+            position    : relative;
+            width: 120px;
+            height: 135px;
+
+            .img {
+                width        : 80px;
+                height       : 80px;
+                border-radius: 50%;
+                border       : 1px solid @color-z3;
+                overflow     : hidden;
+            }
+
+            .select {
+                position        : absolute;
+                bottom          : 45px;
+                right           : 25px;
+                height          : 22px;
+                width           : 22px;
+                font-size       : 12px;
+                color           : @color-z3;
+                border-radius   : 20px;
+                background-color: @color-z1;
+            }
+
+            .tag {
+                font-size  : 16px;
+                line-height: 14px;
+                color      : @color-g1;
+                font-weight: 600;
+                padding-top: 16px;
+            }
+
+            img {
+                width : 80px;
+                height: 80px;
+            }
+        }
+    }
+
+    .footer {
+        border-top: 1px solid @color-g6  !important;
+        padding: 12px;
+    }
+}
+
+.MemberCloseContainer {
+    .header {
+        .u-modal-title {
+            font-size  : 18px;
+        }
+        .u-close {
+            opacity: 1 !important;
+        }
+    }
+
+    .body {
+        height : 120px;
+        padding: 0;
+        display: flex;
+
+        .content {
+            margin-top : 23px;
+            margin-left: 32px;
+
+            .icon {
+                font-size: 20px;
+                color    : @color-z1;
+            }
+
+            .span {
+                margin-left: 20px;
+                font-size  : 20px;
+                font-weight: 400;
+            }
+        }
+    }
+}
+
+.member-modal-wrapper{
+    .u-modal-backdrop{
+        z-index: 900 !important;
+    }
+    .u-modal{
+        z-index: 901 !important;
+    }
+}