tplus-member 3.26.2 → 3.26.6

package/dist/member/ShopMember.less

@@ -0,0 +1,595 @@
+@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-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: -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        : 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 {
+                        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;
+        }
+    }
+}
+.card-member-card {
+    .ant-card-head-title {
+        padding: 12px 0 !important;
+    }
+}