cardtest/pages/myProfit/myProfit.wxss

page {
    background-color: #ececec;
}

/* 头部 */
.profigHead {
    background: linear-gradient(to bottom, #d0a76c 50%, #ffffff);
    padding: 30rpx;
    height: 300rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.profigHead-user {
    line-height: 90rpx;
    display: flex;
}

.profigHead-user image {
    width: 90rpx;
    height: 90rpx;
    margin-right: 20rpx;
    border-radius: 50%;
    border: 2rpx solid #ffffff;
}

.profigHead-img {
    opacity: .1;
    width: 300rpx;
    height: 300rpx;
    position: absolute;
    top: -50rpx;
    right: 0;
}

/* 内容 */
.profigCont {
    position: absolute;
    top: 140rpx;
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
}

.profigLabel {
    background-color: #2f2e2c;
    border-radius: 20rpx;
    overflow: hidden;
}

.profigLabel-top {
    background: linear-gradient(-250deg, #feecd4, #d5b687 90%);
    padding: 0 30rpx;
    height: 90rpx;
    line-height: 90rpx;
}

.profigLabel-balance {
    color: #efd8b8;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    display: flex;
}

.profigLabel-balance-left {
    flex: 1;
}

.profigLabel-balance-name {
    font-size: 28rpx;
}

.profigLabel-balance-left text {
    font-size: 56rpx;
    font-weight: 600;
}

.profigLabel-balance-withdrawal {
    background-color: #fdebd3;
    color: #000000;
    display: inline-block;
    height: 64rpx;
    line-height: 64rpx;
    padding: 0 40rpx;
    border-radius: 60rpx;
    margin-top: 40rpx;
}


.profigLabel-list-name {
    margin-bottom: 10rpx;
    display: flex;
}

.profigLabel-list-name image {
    width: 20rpx;
    height: 20rpx;
    margin: 10rpx;
}

.profigLabel-list {
    padding: 30rpx 40rpx 0;
    box-sizing: border-box;
}

.profigLabel-list,
.profigLabel-cash {
    color: #ffffff;
    position: relative;
    overflow: hidden;
    font-size: 28rpx;
}

.profigLabel-list::after,
.profigLabel-list::before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2rpx dotted #665f54;
}

.profigLabel-list::after {
    top: 0;
}

.profigLabel-list::before {
    bottom: 0;
}

.profigLabel-list-label {
    width: 50%;
    float: left;
    margin-bottom: 40rpx;
}

.profigLabel-cash {
    text-align: center;
    padding: 30rpx 0;
}

.profigLabel-cash-label {
    width: 33.33%;
    float: left;
}


.profigLabel-cash-name {
    margin-bottom: 10rpx;
    display: inline-block;
    position: relative;
}

.profigLabel-cash-active::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 4rpx;
    width: 100%;
    height: 2rpx;
    background-color: #ffffff;
}

/* tab选项卡 */
.profigTab-nav {
    display: flex;
    line-height: 120rpx;
}

.profigTab-nav-name {
    width: 33.33%;
    flex: 3;
    text-align: center;
    position: relative;
}

.profigTab-nav-name.active {
    color: #ffa30a;
}

.profigTab-nav-name.active::after {
    position: absolute;
    content: '';
    left: calc(50% - 30rpx);
    bottom: 15rpx;
    width: 60rpx;
    height: 8rpx;
    background-color: #ffa30a;
}


/* tab收益报表内容 */
.profigReport,
.profigOrder,
.profigTeam {
    border-radius: 20rpx;
    margin-top: 20rpx;
    display: none;
}

.profigReport.show,
.profigOrder.show,
.profigTeam.show {
    display: block;
}

.profigReport {
    background-color: #ffffff;
}

.profigReport-module {
    padding: 30rpx 30rpx 40rpx;
    box-sizing: border-box;
}

.profigReport-module-title {
    display: flex;
}

.profigReport-module-name {
    flex: 1;
    font-weight: 700;
}

.profigReport-module-picker {
    display: flex;
    color: #797979;
    font-size: 28rpx;
    padding-top: 4rpx;
}

.profigReport-module-icon {
    width: 28rpx;
    height: 28rpx;
    margin: 6rpx 0 0 10rpx;
}

.profigLabel-label-billie {
    background-color: #fcf6ea;
    border: 2rpx solid #f7e5db;
    color: #f2863b;
    padding-right: 20rpx;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 22rpx;
    display: inline-flex;
    border-radius: 10rpx;
}

.profigLabel-label-billie image {
    width: 22rpx;
    height: 22rpx;
    margin: 12rpx 10rpx;
}

.profigLabel-label-billie.active {
    color: #00a915;
    background-color: #efffec;
    border: 2rpx solid #c9fbbf;
}

.profigReport-list {
    padding: 0 -20rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.profigReport-list-label {
    width: calc(50% - 40rpx);
    float: left;
    margin: 40rpx 20rpx 0;
    font-size: 28rpx;
}

.profigReport-label-name {
    color: #999999;
}

.profigLabel-label-price {
    margin: 10rpx 0;
    font-size: 34rpx;
}

.profigReport-module-subset {
    position: relative;
    text-align: center;
}

.profigReport-module-subset::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    border-top: 2rpx solid #e4e4e4;
}

.profigReport-subset-name {
    text-align: center;
    margin: 0 auto 40rpx;
    font-size: 28rpx;
    background-color: #f1f1f1;
    padding: 0 30rpx;
    line-height: 64rpx;
    display: inline-block;
    border-radius: 10rpx;
}

.profigReport-subset-label {
    text-align: center;
    width: 50%;
    float: left;
    font-size: 28rpx;
}

/* tab收益订单内容 */
.profigOrder-list {
    background-color: white;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    font-size: 28rpx;
    margin-bottom: 30rpx;
}

.profigOrder-no {
    position: relative;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
}

.profigOrder-no::after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2rpx dotted #e7e7e7;
    bottom: 0;
}

.profigOrder-no-name {
    display: flex;
    line-height: 44rpx;
}

.profigOrder-no-name image {
    width: 32rpx;
    height: 32rpx;
    margin-left: 20rpx;
    margin-top: 6rpx;
}

.profigOrder-no-text {
    color: #515151;
    margin: 20rpx 0;
}

.profigOrder-label {
    line-height: 60rpx;
}

.profigOrder-label-color {
    color: #ffa30a;
}

.profigOrder-no-tips {
    background-color: green;
    font-size: 22rpx;
    color: #ffffff;
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 10rpx;
    border-radius: 30rpx;
    margin: 5rpx 10rpx 0 0;
}

.profigOrder-no-tips.active {
    background-color: #ffa30a;
}

.profigOrder-module-title {
    background-color: #ffffff;
    border-radius: 10rpx;
    display: flex;
    box-sizing: border-box;
    line-height: 80rpx;
    margin-bottom: 30rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
}

.profigOrder-module-name {
    flex: 1;
}

.profigOrder-module-name text {
    color: #ffa30a;
    padding: 0 5rpx;
}

.profigOrder-module-title .profigReport-module-picker {
    padding: 0;
}

.profigOrder-module-title .profigReport-module-icon {
    margin-top: 30rpx;
}

/* tab我的团队内容 */
.profigTeam-module-title {
    display: flex;
    margin-bottom: 30rpx;
}

.profigTeam .profigOrder-module-title {
    flex: 1;
    margin: 0 30rpx 0 0;
}

.profigTeam-ranking {
    width: 180rpx;
    height: 80rpx;
    line-height: 80rpx;
    position: relative;
    background-color: #ffffff;
    padding: 0 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    color: green;
    font-size: 28rpx;
}

.profigTeam-ranking::after,
.profigTeam-ranking::before {
    position: absolute;
    right: 20rpx;
    content: '';
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
}

.profigTeam-ranking::after {
    bottom: 28rpx;
    border-top: 8rpx solid grey;
}

.profigTeam-ranking::before {
    top: 28rpx;
    border-bottom: 8rpx solid grey;
}

.profigTeam-ranking.ascactive::after {
    border-top: 8rpx solid green;
}

.profigTeam-ranking.descactive::before {
    border-bottom: 8rpx solid green;
}

.profigTeam-list {
    margin-top: 30rpx;
}

.profigTeam-nav {
    background-color: #ffffff;
    border-radius: 10rpx;
    display: flex;
    line-height: 80rpx;
    margin-bottom: 20rpx;
}

.profigTeam-name {
    flex: 4;
    text-align: center;
    width: 25%;
    font-size: 28rpx;
}

.profigTeam-label {
    background-color: #ffffff;
    border-radius: 10rpx;
    font-size: 26rpx;
}

.profigTeam-label-list {
    display: flex;
    border-bottom: 2rpx solid #e8e8e8;
}

.profigTeam-label-list:last-child {
    border: none;
}

.profigTeam-label-cont {
    line-height: 110rpx;
    flex: 4;
    width: 25%;
    text-align: center;
}

.profigTeam-label-head {
    display: flex;
}

.profigTeam-label-head image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin: 30rpx 20rpx;
}

.profigTeam-label-name {
    width: calc(100% - 90rpx);
}

.profigTeam-label-color {
    color: #ffa30a;
}

.public-hint {
    background-color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    padding: 60rpx 0;
    color: #999;
    font-size: 28rpx;
}

.public-hint image {
    width: 160rpx;
    height: 160rpx;
    margin: 0 auto 20rpx;
}