tplus-member 3.36.1 → 3.36.4

package/dist/member/ShopMember.less

@@ -1,531 +1,636 @@
-@import './color.less';
-
-@expiration-img : url("https://newretail.static.chanjet.com/expiration-stamp.png");
-@empty-data-img : url("https://newretail.static.chanjet.com/empty.png");
-
-.memberShopContainer{
-    .empty-data{
-      text-align: center;
-      line-height: 28px;
-      color: #999;
-      position: absolute;
-      top: 50%;
-      width: 100%;
-      transform: translateY(-50%);
-      &.empty-data-img{
-        background: @empty-data-img;
-        width: 50%;
-        height: 200px;
-        left: 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        transform: translate(-50%, -50%);
-      }
-    }
-    .empty-data-img{
-        background: @empty-data-img;
-        width: 50%;
-        height: 200px;
-        left: 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        transform: translate(-50%, -50%);
-        position: absolute;
-        top: 50%;
-    }
-    ._tplus-animation-ease_{
-        -webkit-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
-    };
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-right: 0px !important;
-    padding-left: 24px !important;
-    .empty-data-tip{
-      text-align: center;
-      color: #999;
-      width: 100%;
-      &.empty-data-tip-member-card{
-        margin-top: -12px;
-      }
-      td{
-        color: #999 !important;
-        text-align: center !important;
-      }
-    }
-    .search-container{
-        flex: 0 0 65px;
-        line-height: 65px;
-        display: flex;
-        align-items: center;
-        .search-input{
-            margin-right: 20px;
-            width: 270px;
-            input{
-                padding-left: 0;
-            }
-        }
-    }
-    .member-shop-content{
-        display: flex;
-        height:calc(~'100% - 128px');
-        width: 100%;
-        .member-card-list-side{
-            flex: 0 0 320px;
-            padding: 10px 20px;
-            height: 100%;
-            overflow: hidden;
-            box-sizing: border-box;
-            position: relative;
-            .swiper-member-container{
-                overflow: visible;
-                height: 100%;
-                width: 100%;
-                .swiper-scrollbar{
-                    left: 3px;
-                    right: auto;
-                }
-                .member-item-slide{
-                    height: 106px;
-                    background-color: #fff;
-                    border-radius: 6px;
-                    display: flex;
-                    padding: 12px 12px 12px 0px;
-                    cursor: pointer;
-                    box-sizing: border-box;
-                    margin-bottom: 20px;
-                    position: relative;
-
-                    &.userLogout-stamp{
-                        font-family: "iconfont" !important;
-                        &:after{
-                            content: '\E69b';
-                            width: 40px;
-                            height: 40px;
-                            position: absolute;
-                            right: 20%;
-                            top: 8%;
-                            font-size: 40px;
-                            color: #f37d7c;
-                        }
-                    }
-                    &.expiration-stamp{
-                        &:after{
-                            content: '';
-                            background: @expiration-img;
-                            background-size: contain;
-                            background-repeat: no-repeat;
-                            width: 40px;
-                            height: 40px;
-                            position: absolute;
-                            right: 20%;
-                            top: 20%;
-                        }
-                    }
-                    ._tplus-animation-ease_;
-                    &.slide-selected{
-                        position: relative;
-                        &:before{
-                            content: '';
-                            width: 0;
-                            height: 0;
-                            position: absolute;
-                            right: -10px;
-                            top: 50%;
-                            margin-top: -5px;
-                        }
-                    }
-                    .memberstate-stamp{
-                        position: absolute;
-                        right: 40px;
-                        top: 12px;
-                        i{
-                            color: #FF595E;
-                            font-size: 45px;
-                            padding-right: 10px;
-                        }
-                    }
-                    .card-avatar{
-                        flex: 0 0 88px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        .avatar-box{
-                            width: 56px;
-                            height: 56px;
-                            position: relative;
-                            img{
-                                width: 100%;
-                                height: 100%;
-                                display: block;
-                                border-radius: 50%;
-                            }
-                            .avatar-bage{
-                                background: #FF595E;
-                                border-radius: 6px;
-                                color: #fff;
-                                font-size: 12px;
-                                position: absolute;
-                                bottom: 0px;
-                                left: 50%;
-                                margin-left: -19px;
-                                text-align: center;
-                                height: 12px;
-                                width: 36px;
-                                &.bage-follow{
-                                    background: #C8C8CD;
-                                }
-                                .avatar-bage-scale{
-                                    transform: scale(0.7, 0.7) translate(0, -4px);
-                                }
-                            }
-                        }
-                    }
-                    .member-level{
-                        position: absolute;
-                        right: 0px;
-                        top: 0px;
-                        height: 20px;
-                        width: 52px;
-                        border-radius: 6px;
-                        &:before{
-                            content: '';
-                            display: block;
-                            width: 62px;
-                            position: absolute;
-                            top: 0px;
-                            right: 0;
-                            border-radius: 0 6px 0px 0px;
-                        }
-                        &:after{
-                            content: '';
-                            display: block;
-                            width: 62px;
-                            position: absolute;
-                            top: 0px;
-                            right: 0;
-                            border-radius: 0 6px 0px 0px;
-                        }
-                        span {
-                            color: #fff;
-                            position: absolute;
-                            top: 0px;
-                            line-height: 20px;
-                            font-size: 12px;
-                            z-index: 9;
-                            width: 100%;
-                            padding-right: 4px;
-                            overflow: hidden;
-                            height: 100%;
-                        }
-                    }
-                    .member-info-container{
-                        flex: 1;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-evenly;
-                        padding: 6px 0 4px 0;
-                        .member-info-name{
-                            font-size: 16px;
-                            color: #333;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            width: 180px;
-                        }
-                        .member-phone{
-                            font-size: 12px;
-                            color: #000;
-                            margin-top: -4px;
-                        }
-                        .member-money{
-                            color: #000;
-                            display: flex;
-                            justify-content: space-between;
-                        }
-                        .member-tag{
-                            display: flex;
-                            flex-wrap: nowrap;
-                            overflow: hidden;
-                            span{
-                                flex: none;
-                                background: rgba(255,140,37,0.20);
-                                border-radius: 2px;
-                                font-size: 12px;
-                                color: #FF8C25;
-                                text-align: center;
-                                padding: 0px 5px;
-                                margin-right: 5px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .member-content-tab{
-            flex: 1;
-            flex-direction: column;
-            min-width: 200px;
-            position: relative;
-            .menu{
-                display: flex;
-                align-items: center;
-                height: 60px;
-            }
-            .line{
-                height: 4px;
-                width: 100%;
-                background-color: #F4F4F4;
-            }
-        }
-    }
-    .member-footer{
-        padding: 15px;
-        text-align: right;
-        button:first-child{
-            margin-right: 20px;
-        }
-    }
-    .member-selected-icon{
-        width: 50px;
-        height: 50px;
-        overflow: hidden;
-        position: absolute;
-        right: 0px;
-        border-radius: 6px;
-        bottom: 0px;
-        .member-selected-icon-arrow{
-            right: 27px;
-            position: relative;
-            bottom: 0px;
-            width: 0;
-            height: 0;
-            .iconfont{
-                position: absolute;
-                right: -50px;
-                top: -31px;
-                font-size: 12px;
-                color: #fff;
-                zoom: 0.5;
-            }
-        }
-    }
-}
-
-.member-table-container {
-    flex-grow     : 1;
-    display       : flex;
-    flex-direction: column;
-    .ant-tabs-nav {
-        flex-grow    : 0;
-        margin-bottom: 0 !important;
-        height: 43px;
-
-        .ant-tabs-nav-container {
-            overflow: initial !important;
-        }
-    }
-
-    .ant-tabs-content {
-        flex-grow: 1;
-        overflow : hidden;
-        height: 100%;
-        .ant-tabs-tabpane {
-            height: 100%;
-        }
-    }
-
-    .member-info-table {
-        width    : 100%;
-        display  : flex;
-        flex-wrap: wrap;
-
-        div {
-            width        : 50%;
-            height       : 50px;
-            line-height  : 50px;
-            text-align   : center;
-            border-top   : none;
-            border-bottom: 1px solid #E6E6EB;
-            box-sizing   : border-box;
-
-            span {
-                width        : 50%;
-                float        : left;
-                color        : #333;
-                text-align   : left;
-                word-break   : keep-all;
-                white-space  : nowrap;
-                overflow     : hidden;
-                text-overflow: ellipsis;
-
-                &:first-child {
-                    text-align: right;
-                    color     : #666;
-                }
-            }
-
-            &:nth-child(2n-1) {
-                border-right: 1px solid #E6E6EB;
-            }
-        }
-    }
-
-    .recommend-tab {
-        padding       : 0px 20px;
-        display       : flex;
-        flex-direction: column;
-        position      : relative;
-
-        .recommend-info {
-            border-radius  : 4px;
-            display        : flex;
-            flex-wrap      : wrap;
-            justify-content: space-between;
-            padding        : 5px 30px;
-            margin         : 15px 0px;
-
-            span {
-                line-height: 32px;
-                margin     : 0 10px;
-            }
-        }
-
-        .recommend-connent {
-            overflow: auto;
-            position: relative;
-        }
-
-        .detail-content {
-            margin-bottom: 10px;
-
-            h1 {
-                padding-left : 10px;
-                font-size    : 12px;
-                margin-bottom: 10px;
-            }
-        }
-    }
-
-    .recently-tab {
-        table {
-            width: 100%;
-
-            thead {
-                background   : #F4F4F4;
-                border-bottom: 1px solid #E6E6EB;
-                height       : 50px;
-                line-height  : 50px;
-                display      : table;
-                table-layout : fixed;
-                width        : 100%;
-
-                th {
-                    text-align  : left;
-                    padding-left: 20px;
-
-                    &.amount-item {
-                        text-align   : right;
-                        padding-right: 20px;
-                    }
-                }
-            }
-
-            tbody {
-                display   : block;
-                overflow-y: auto;
-                overflow-x: hidden;
-
-                .only-one-data,
-                .data-border {
-                    border-bottom: 1px solid #E6E6EB !important;
-                }
-
-                tr {
-                    display     : table;
-                    table-layout: fixed;
-                    width       : 100%;
-
-                    td {
-                        font-size    : 14px;
-                        color        : #333333;
-                        height       : 50px;
-                        line-height  : 50px;
-                        border-bottom: 1px solid #E6E6EB;
-                        padding-left : 20px;
-                        overflow     : hidden;
-                        text-overflow: ellipsis;
-                        white-space  : nowrap;
-
-                        &:first-child {
-                            border-bottom: none;
-                        }
-
-                        &:last-child {
-                            border-right : 1px solid #E6E6EB;
-                            padding-right: 20px;
-                            text-align   : right;
-                        }
-
-                        &:nth-child(2) {
-                            border-left: 1px solid #E6E6EB;
-                        }
-                    }
-
-                    &:last-child {
-                        td {
-                            border-bottom: 1px solid #E6E6EB;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .expiration-stamp {
-        position: relative;
-        overflow: hidden;
-
-        &:after {
-            width            : 88px;
-            height           : 88px;
-            content          : '';
-            background       : @expiration-img;
-            background-size  : contain;
-            background-repeat: no-repeat;
-            opacity          : 0;
-            position         : absolute;
-            padding          : .1em .5em;
-            margin           : 0 auto;
-            top              : 60%;
-            left             : 20%;
-            text-transform   : uppercase;
-            opacity          : 0;
-            transform-origin : 50% 50%;
-            transform        : rotate(-12deg) scale(5);
-            z-index          : -1;
-        }
-    }
-
-    .expiration-animate {
-        .expiration-stamp:after {
-            opacity   : .45;
-            transform : rotate(0deg) scale(1);
-            z-index   : 5;
-            transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
-        }
-    }
-    .memberstate-detail-stamp{
-        position: absolute;
-        top     : 20px;
-        left    : 200px;
-
-        i {
-            font-size: 90px;
-            color    : fade(#FF595E, 50%);
-            padding-right: 10px;
-        }
-    }
-}
+@import './color.less';
+
+@expiration-img : url("https://newretail.static.chanjet.com/expiration-stamp.png");
+@empty-data-img : url("https://newretail.static.chanjet.com/empty.png");
+
+.memberShopContainer{
+    .empty-data{
+      text-align: center;
+      line-height: 28px;
+      color: #999;
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      transform: translateY(-50%);
+      &.empty-data-img{
+        background-image: @empty-data-img;
+        width: 162px;
+        height: 162px;
+        left: 50%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        transform: translate(-50%, -50%);
+      }
+      
+    }
+    .empty-data-img{
+        width: 162px;
+        height: 162px;
+        background-image: @empty-data-img;
+        left: 50%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        top: 50%;
+        .tip-text {
+            position: absolute;
+            color: #666;
+            text-align: center;
+            font-size: 14px;
+            line-height: 20px;
+            top: 162px;
+            width: 162px;
+        }
+    }
+    .storage-empty-data-img {
+        width: 162px;
+        height: 162px;
+        background-size: 100%;
+    }
+    ._tplus-animation-ease_{
+        -webkit-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
+    };
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-right: 0px !important;
+    padding-left: 24px !important;
+    .empty-data-tip{
+      text-align: center;
+      color: #999;
+      width: 100%;
+      &.empty-data-tip-member-card{
+        margin-top: -12px;
+      }
+      td{
+        color: #999 !important;
+        text-align: center !important;
+      }
+    }
+    .search-container{
+        flex: 0 0 65px;
+        line-height: 65px;
+        display: flex;
+        align-items: center;
+        .search-input{
+            margin-right: 20px;
+            width: 270px;
+            input{
+                padding-left: 0;
+            }
+        }
+    }
+    .member-shop-content{
+        display: flex;
+        height:calc(~'100% - 128px');
+        width: 100%;
+        .member-card-list-side{
+            flex: 0 0 320px;
+            padding: 10px 20px;
+            height: 100%;
+            overflow: hidden;
+            box-sizing: border-box;
+            position: relative;
+            .swiper-member-container{
+                overflow: visible;
+                height: 100%;
+                width: 100%;
+                .swiper-scrollbar{
+                    left: 3px;
+                    right: auto;
+                }
+                .member-item-slide{
+                    height: 106px;
+                    background-color: #fff;
+                    border-radius: 6px;
+                    display: flex;
+                    padding: 12px 12px 12px 0px;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    margin-bottom: 20px;
+                    position: relative;
+
+                    &.userLogout-stamp{
+                        font-family: "iconfont" !important;
+                        &:after{
+                            content: '\E69b';
+                            width: 40px;
+                            height: 40px;
+                            position: absolute;
+                            right: 20%;
+                            top: 8%;
+                            font-size: 40px;
+                            color: #f37d7c;
+                        }
+                    }
+                    &.expiration-stamp{
+                        &:after{
+                            content: '';
+                            background: @expiration-img;
+                            background-size: contain;
+                            background-repeat: no-repeat;
+                            width: 40px;
+                            height: 40px;
+                            position: absolute;
+                            right: 20%;
+                            top: 20%;
+                        }
+                    }
+                    ._tplus-animation-ease_;
+                    &.slide-selected{
+                        position: relative;
+                        &:before{
+                            content: '';
+                            width: 0;
+                            height: 0;
+                            position: absolute;
+                            right: -10px;
+                            top: 50%;
+                            margin-top: -5px;
+                        }
+                    }
+                    .memberstate-stamp{
+                        position: absolute;
+                        right: 40px;
+                        top: 12px;
+                        i{
+                            color: #FF595E;
+                            font-size: 45px;
+                            padding-right: 10px;
+                        }
+                    }
+                    .card-avatar{
+                        flex: 0 0 88px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .avatar-box{
+                            width: 56px;
+                            height: 56px;
+                            position: relative;
+                            img{
+                                width: 100%;
+                                height: 100%;
+                                display: block;
+                                border-radius: 50%;
+                            }
+                            .avatar-bage{
+                                background: #FF595E;
+                                border-radius: 6px;
+                                color: #fff;
+                                font-size: 12px;
+                                position: absolute;
+                                bottom: 0px;
+                                left: 50%;
+                                margin-left: -19px;
+                                text-align: center;
+                                height: 12px;
+                                width: 36px;
+                                &.bage-follow{
+                                    background: #C8C8CD;
+                                }
+                                .avatar-bage-scale{
+                                    transform: scale(0.7, 0.7) translate(0, -4px);
+                                }
+                            }
+                        }
+                    }
+                    .member-level{
+                        position: absolute;
+                        right: 0px;
+                        top: 0px;
+                        height: 20px;
+                        width: 52px;
+                        border-radius: 6px;
+                        &:before{
+                            content: '';
+                            display: block;
+                            width: 62px;
+                            position: absolute;
+                            top: 0px;
+                            right: 0;
+                            border-radius: 0 6px 0px 0px;
+                        }
+                        &:after{
+                            content: '';
+                            display: block;
+                            width: 62px;
+                            position: absolute;
+                            top: 0px;
+                            right: 0;
+                            border-radius: 0 6px 0px 0px;
+                        }
+                        span {
+                            color: #fff;
+                            position: absolute;
+                            top: 0px;
+                            line-height: 20px;
+                            font-size: 12px;
+                            z-index: 9;
+                            width: 100%;
+                            padding-right: 4px;
+                            overflow: hidden;
+                            height: 100%;
+                        }
+                    }
+                    .member-info-container{
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-evenly;
+                        padding: 6px 0 4px 0;
+                        .member-info-name{
+                            font-size: 16px;
+                            color: #333;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            width: 180px;
+                        }
+                        .member-phone{
+                            font-size: 12px;
+                            color: #000;
+                            margin-top: -4px;
+                        }
+                        .member-money{
+                            color: #000;
+                            display: flex;
+                            justify-content: space-between;
+                        }
+                        .member-tag{
+                            display: flex;
+                            flex-wrap: nowrap;
+                            overflow: hidden;
+                            span{
+                                flex: none;
+                                background: rgba(255,140,37,0.20);
+                                border-radius: 2px;
+                                font-size: 12px;
+                                color: #FF8C25;
+                                text-align: center;
+                                padding: 0px 5px;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                }
+                .member-card-slide {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-image: linear-gradient(236deg, #E7C88F 7%, rgba(255,229,180,0.50) 100%);
+box-shadow: 0px 2px 11px 0px rgba(206,205,204,1);
+                    &:before {
+                        border-left-color: #E7C88F;
+                    }
+                    .member-card-num {
+                        position: absolute;
+                        top: 13px;
+                        left: 7px;
+                        max-width: 45%;
+                        font-size: 12px;
+                        color: #865002;
+                        letter-spacing: 0;
+                        line-height: 12px;
+                        font-weight: 500;
+                        overflow: hidden;
+                        text-overflow:ellipsis;
+                        white-space: nowrap;
+                    }
+                    .member-card-name {
+                        position: absolute;
+                        top: 13px;
+                        right: 12px;
+                        max-width: 50%;
+                        font-size: 12px;
+                        color: #865002;
+                        letter-spacing: 0;
+                        text-align: right;
+                        line-height: 12px;
+                        font-weight: 500;
+                        overflow: hidden;
+                        text-overflow:ellipsis;
+                        white-space: nowrap;
+                    }
+                    .member-card-balance {
+                        font-size: 24px;
+                        color: #5B210E;
+                        letter-spacing: 0;
+                        line-height: 12px;
+                        font-weight: 500;
+                        margin-top: 20px;
+                        span {
+                            font-size: 12px;
+                            color: #5B210E;
+                            letter-spacing: 0;
+                            text-align: right;
+                            line-height: 12px;
+                            font-weight: 500;
+                            padding-left: 3px;
+                        }
+                    }
+                }
+            }
+        }
+        .member-content-tab{
+            flex: 1;
+            flex-direction: column;
+            min-width: 200px;
+            position: relative;
+            .menu{
+                display: flex;
+                align-items: center;
+                height: 60px;
+            }
+            .line{
+                height: 4px;
+                width: 100%;
+                background-color: #F4F4F4;
+            }
+        }
+    }
+    .member-footer{
+        padding: 15px;
+        text-align: right;
+        button:first-child{
+            margin-right: 20px;
+        }
+    }
+    .member-selected-icon{
+        width: 50px;
+        height: 50px;
+        overflow: hidden;
+        position: absolute;
+        right: 0px;
+        border-radius: 6px;
+        bottom: 0px;
+        .member-selected-icon-arrow{
+            right: 27px;
+            position: relative;
+            bottom: 0px;
+            width: 0;
+            height: 0;
+            .iconfont{
+                position: absolute;
+                right: -48px;
+                top: -29px;
+                font-size: 18px;
+                color: #fff;
+                zoom: 0.5;
+            }
+        }
+    }
+}
+
+.member-table-container {
+    flex-grow     : 1;
+    display       : flex;
+    flex-direction: column;
+    .ant-tabs-nav {
+        flex-grow    : 0;
+        margin-bottom: 0 !important;
+        height: 43px;
+
+        .ant-tabs-nav-container {
+            overflow: initial !important;
+        }
+    }
+
+    .ant-tabs-content {
+        flex-grow: 1;
+        overflow : hidden;
+        height: 100%;
+        .ant-tabs-tabpane {
+            height: 100%;
+        }
+    }
+
+    .member-info-table {
+        width    : 100%;
+        display  : flex;
+        flex-wrap: wrap;
+
+        div {
+            width        : 50%;
+            height       : 50px;
+            line-height  : 50px;
+            text-align   : center;
+            border-top   : none;
+            border-bottom: 1px solid #E6E6EB;
+            box-sizing   : border-box;
+
+            span {
+                width        : 40%;
+                float        : left;
+                color        : #333;
+                text-align   : left;
+                word-break   : keep-all;
+                white-space  : nowrap;
+                overflow     : hidden;
+                text-overflow: ellipsis;
+
+                &:first-child {
+                    text-align: right;
+                    color     : #666;
+                }
+            }
+            span:last-child {
+                width: 60%;
+            }
+
+            &:nth-child(2n-1) {
+                border-right: 1px solid #E6E6EB;
+            }
+        }
+    }
+
+    .recommend-tab {
+        padding       : 0px 20px;
+        display       : flex;
+        flex-direction: column;
+        position      : relative;
+
+        .recommend-info {
+            border-radius  : 4px;
+            display        : flex;
+            flex-wrap      : wrap;
+            justify-content: space-between;
+            padding        : 5px 30px;
+            margin         : 15px 0px;
+
+            span {
+                line-height: 32px;
+                margin     : 0 10px;
+            }
+        }
+
+        .recommend-connent {
+            overflow: auto;
+            position: relative;
+        }
+
+        .detail-content {
+            margin-bottom: 10px;
+
+            h1 {
+                padding-left : 10px;
+                font-size    : 12px;
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    .recently-tab {
+        table {
+            width: 100%;
+
+            thead {
+                background   : #F4F4F4;
+                border-bottom: 1px solid #E6E6EB;
+                height       : 50px;
+                line-height  : 50px;
+                display      : table;
+                table-layout : fixed;
+                width        : 100%;
+
+                th {
+                    text-align  : left;
+                    padding-left: 20px;
+
+                    &.amount-item {
+                        text-align   : right;
+                        padding-right: 20px;
+                    }
+                }
+            }
+
+            tbody {
+                display   : block;
+                overflow-y: auto;
+                overflow-x: hidden;
+
+                .only-one-data,
+                .data-border {
+                    border-bottom: 1px solid #E6E6EB !important;
+                }
+
+                tr {
+                    display     : table;
+                    table-layout: fixed;
+                    width       : 100%;
+
+                    td {
+                        position     : relative;
+                        font-size    : 14px;
+                        color        : #333333;
+                        height       : 50px;
+                        line-height  : 50px;
+                        border-bottom: 1px solid #E6E6EB;
+                        padding-left : 20px;
+                        overflow     : hidden;
+                        text-overflow: ellipsis;
+                        white-space  : nowrap;
+
+                        &:first-child {
+                            border-bottom: none;
+                        }
+
+                        &:last-child {
+                            border-right : 1px solid #E6E6EB;
+                            padding-right: 20px;
+                            text-align   : right;
+                        }
+
+                        &:nth-child(2) {
+                            border-left: 1px solid #E6E6EB;
+                        }
+                        .tag {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            font-size: 12px;
+                            color: #FFFFFF;
+                            letter-spacing: -0.22px;
+                            text-align: center;
+                            background: #FF595E;
+                            height: 18.6px;
+                            line-height: 18.6px;
+                            padding: 0 14.5px 0 4px;
+                            border-bottom-right-radius: 18.6px;
+                        }
+                    }
+
+                    &:last-child {
+                        td {
+                            border-bottom: 1px solid #E6E6EB;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .more-button {
+        .ant-btn {
+            border: none;
+        }
+    }
+
+    .expiration-stamp {
+        position: relative;
+        overflow: hidden;
+
+        &:after {
+            width            : 88px;
+            height           : 88px;
+            content          : '';
+            background       : @expiration-img;
+            background-size  : contain;
+            background-repeat: no-repeat;
+            opacity          : 0;
+            position         : absolute;
+            padding          : .1em .5em;
+            margin           : 0 auto;
+            top              : 60%;
+            left             : 20%;
+            text-transform   : uppercase;
+            opacity          : 0;
+            transform-origin : 50% 50%;
+            transform        : rotate(-12deg) scale(5);
+            z-index          : -1;
+        }
+    }
+
+    .expiration-animate {
+        .expiration-stamp:after {
+            opacity   : .45;
+            transform : rotate(0deg) scale(1);
+            z-index   : 5;
+            transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
+        }
+    }
+    .memberstate-detail-stamp{
+        position: absolute;
+        top     : 20px;
+        left    : 200px;
+
+        i {
+            font-size: 90px;
+            color    : fade(#FF595E, 50%);
+            padding-right: 10px;
+        }
+    }
+
+    .more-button {
+        text-align: center;
+    }
+}
+.card-member-card {
+    .ant-card-head-title {
+        padding: 12px 0 !important;
+    }
+}