pbf-wxapp/components/diy-my/my.wxss

page {
    background: #f6f6f6;
}

.my_index .user_info {
    height: 400rpx;
    background-image: url(https://file-cloud.fmode.cn/lb486SzXLP/20211117/s518ie022049.jpg);
    border-radius: 0 0 30rpx 30rpx;
}

.my_index .user_info .user {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70rpx 0 60rpx;
    margin: auto;
}

.my_index .user_info .user .user_left {
    display: flex;
    align-items: center;
}

.my_index .user_info .user .user_left .user_image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.my_index .user_info .user .user_left .name {
    font-size: 30rpx;
    font-weight: bold;
    padding-left: 30rpx;
}

.my_index .user_info .user .user-right {
    display: flex;
    flex-direction: column;
}

.my_index .user_info .user .user-right .user_button {
    width: 150rpx;
    background: #ffffff;
    font-size: 24rpx;
    border-radius: 40rpx;
    padding: 0;
    margin: 0;
    margin-bottom: 10rpx;
}

.my_index .user_info .user .user-right .user_button ::after {
    padding: 0;
}

.my_index .user_info .members {
    display: flex;
    align-items: center;
    width: 670rpx;
    height: 120rpx;
    border-radius: 18rpx;
    padding-left: 20rpx;
    margin: 0 auto;
    background: linear-gradient(90deg, #a68d65 0%, #9c6800 100%);
}

.my_index .user_info .members .title {
    font-size: 30rpx;
    padding-left: 30rpx;
}

.my_index .user_info .members .members_button {
    width: 140rpx;
    background: #222222;
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #ffffff;
    padding: 0;
    margin-left: 295rpx;
}

.my_index .change_info {
    width: 690rpx;
    height: 140rpx;
    background: #ffffff;
    display: flex;
    border-radius: 12rpx;
    margin: 20rpx auto;
    align-items: center;
    text-align: center;
}

.my_index .change_info .change {
    width: 50%;
    font-size: 30rpx;
}

.my_index .change_info .change .change_num {
    color: #363940;
    font-weight: bold;
    padding-bottom: 10rpx;
}

.my_index .change_info .line {
    border-right: 1rpx solid #e7e7e7;
}

.my_index .order_info {
    width: 690rpx;
    height: 210rpx;
    border-radius: 12rpx;
    background: #ffffff;
    margin: 30rpx auto;
}

.my_index .order_info .title {
    width: 100%;
    height: 60rpx;
    font-size: 30rpx;
    font-weight: 600;
    padding: 15rpx 20rpx;
}

.my_index .order_info .order_box {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.my_index .order_info .order_box .order .icon {
    width: 60rpx;
    height: 54rpx;
    background-size: 100%;
    border-radius: 4rpx;
}

.my_index .order_info .order_box .order .name {
    font-size: 24rpx;
    padding: 10rpx 0;
}

.my_index .cell_info {
    width: 690rpx;
    margin: 20rpx auto;
    border-radius: 12rpx;
}

.my_index .cell_info button {
    height: 88rpx;
    width: 690rpx;
    margin: 0rpx;
    padding: 0 34rpx;
    display: flex;
    font-size: 28rpx;
    align-items: center;
    background: white;
    justify-content: space-between;
    color: var(--cell-text-color, #323233);
}

.my_index .cell_info button .btn-left {
    display: flex;
    align-items: center;
}

.top {
    width: 750rpx;
    height: 380rpx;
    background-image: url("https://file-cloud.fmode.cn/lb486SzXLP/20211207/7bp15f091423.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    position: relative;
}

.top .name {
    display: flex;
}

.top .name .portrait {
    width: 118rpx;
    height: 118rpx;
    background: #a2a2a2;
    border: 3rpx solid #ffffff;
    border-radius: 50%;
    margin: 110rpx 25rpx 0rpx 25rpx;
}

.top .name .txt {
    font-size: 36rpx;
    font-family: PingFang;
    margin-top: 150rpx;
    color: #ffffff;
}

.top .name .information {
    width: 160rpx;
    height: 42rpx;
    background: #ffffff;
    font-size: 30rpx;
    font-family: PingFang;
    border-radius: 20rpx;
    margin: 150rpx 0rpx 0rpx 250rpx;
    text-align: center;
}

.top .members {
    width: 702rpx;
    height: 88rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    position: absolute;
    bottom: 0rpx;
    left: 24rpx;
    background-image: url("https://file-cloud.fmode.cn/lb486SzXLP/20211207/7p0u13091423.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

.box {
    background: #f1f2f6;
    padding-top: 1rpx;
    padding-bottom: 24rpx;
}

.box .change {
    width: 702rpx;
    margin: 20rpx 0rpx 0rpx 24rpx;
    background-image: url("https://file-cloud.fmode.cn/nCCirOU5zn/20211215/m10051052338.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    border-radius: 12rpx;
    display: flex;
    position: relative;
}

.box .change .change-txt {
    margin: 54rpx 80rpx 43rpx 85rpx;
    width: 200rpx;
}

.box .change .change-txt .change-title {
    font-size: 48rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
}

.box .change .change-txt .change-ts {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.box .change .image {
    font-size: 48rpx;
    color: #c5c5c5;
    position: absolute;
    top: 48rpx;
    right: 24rpx;
}

.box .order {
    width: 701rpx;
    height: 292rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(21, 45, 151, 0.08);
    border-radius: 20rpx;
    margin: 24rpx 0rpx 0rpx 24rpx;
}

.box .order .my {
    width: 650rpx;
    padding: 36rpx 0rpx 28rpx 0rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #e2e2e2;
    margin-left: 24rpx;
}

.box .order .my .my-order {
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: 400;
    color: #333333;
}

.box .order .my .image {
    margin: -5rpx 0rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.box .order .stay {
    display: flex;
    padding: 50rpx 0rpx 0rpx 30rpx;
}

.box .order .stay .stay-box {
    width: 120rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
}

.box .order .stay .stay-box .stay-image {
    width: 60rpx;
    height: 60rpx;
    margin-left: 30rpx;
}

.box .order .stay .stay-box .stay-txt {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.box .address {
    width: 702rpx;
    height: 112rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 24rpx 0rpx 0rpx 24rpx !important;
    padding: 0rpx 0rpx 0rpx 0rpx !important;
    display: flex;
    justify-content: space-between;
}

.box .address .address-txt {
    display: flex;
}

.box .address .address-txt .address-image {
    width: 40rpx;
    height: 40rpx;
    margin: 37rpx 0rpx 0rpx 26rpx;
}

.box .address .address-txt .address-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 37rpx 0rpx 0rpx 18rpx;
}

.box .address .address-txt .addresss-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 17rpx 0rpx 0rpx 18rpx;
}

.box .address .image {
    margin: 35rpx 24rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.box .address .images {
    margin: 15rpx 24rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.box .address .exit {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    margin: 43rpx 0rpx 0rpx 297rpx;
}

.tops {
    width: 750rpx;
    height: 380rpx;
    background-image: url("https://file-cloud.fmode.cn/nCCirOU5zn/20211215/41bign042745.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    position: relative;
}

.tops .name {
    display: flex;
    align-items: center;
    height: 270rpx;
}

.tops .name .portrait {
    width: 118rpx;
    height: 118rpx;
    background: #a2a2a2;
    border: 3rpx solid #ffffff;
    border-radius: 50%;
    margin-left: 24rpx;
}

.tops .name .txt {
    font-size: 36rpx;
    font-family: PingFang;
    color: #ffffff;
    margin-left: 24rpx;
}

.tops .name .information {
    font-size: 30rpx;
    font-family: PingFang;
    border-radius: 20rpx;
    text-align: center;
    margin-left: 24rpx;
}

.tops .members {
    width: 702rpx;
    height: 110rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    position: absolute;
    bottom: 0rpx;
    left: 24rpx;
    background-image: url("https://file-cloud.fmode.cn/nCCirOU5zn/20211215/iv01l5042744.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

.boxs {
    background: #F6F6F6;
    padding-top: 1rpx;
    padding-bottom: 24rpx;
}

.boxs .changes {
    width: 702rpx;
    margin: 20rpx 0rpx 0rpx 24rpx;
    background-image: url("https://file-cloud.fmode.cn/nCCirOU5zn/20211215/rnticu042745.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    border-radius: 12rpx;
    display: flex;
    position: relative;
}

.boxs .changes .change-txt {
    margin: 54rpx 80rpx 43rpx 85rpx;
    width: 200rpx;
}

.boxs .changes .change-txt .change-title {
    font-size: 48rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}

.boxs .changes .change-txt .change-ts {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}

.boxs .changes .image {
    font-size: 48rpx;
    color: #c5c5c5;
    position: absolute;
    top: 48rpx;
    right: 24rpx;
}

.boxs .order {
    width: 701rpx;
    height: 292rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(21, 45, 151, 0.08);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin: 24rpx 0rpx 0rpx 24rpx;
}

.boxs .order .my {
    width: 650rpx;
    padding: 36rpx 0rpx 28rpx 0rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #e2e2e2;
    margin-left: 24rpx;
}

.boxs .order .my .my-order {
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: 400;
    color: #333333;
}

.boxs .order .my .image {
    margin: -5rpx 0rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.boxs .order .stay {
    display: flex;
    padding: 50rpx 0rpx 0rpx 30rpx;
}

.boxs .order .stay .stay-box {
    width: 120rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
}

.boxs .order .stay .stay-box .stay-image {
    width: 60rpx;
    height: 60rpx;
    margin-left: 30rpx;
}

.boxs .order .stay .stay-box .stay-txt {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.boxs .addres {
    width: 702rpx;
    height: 112rpx;
    background: #ffffff;
    margin: 20rpx 0rpx 20rpx 24rpx !important;
    padding: 0rpx 0rpx 0rpx 0rpx !important;
    display: flex;
    justify-content: space-between;
}

.boxs .addres .exit {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    margin: 43rpx 0rpx 0rpx 297rpx;
}

.boxs .addresss {
    width: 702rpx;
    height: 112rpx;
    background: #ffffff;
    border-top: 2rpx solid #e2e2e2 !important;
    margin: 0rpx 0rpx 0rpx 24rpx !important;
    padding: 0rpx 0rpx 0rpx 0rpx !important;
    display: flex;
    justify-content: space-between;
    border-radius: 0rpx !important;
}

.boxs .addresss .address-txt {
    display: flex;
}

.boxs .addresss .address-txt .address-image {
    width: 40rpx;
    height: 40rpx;
    margin: 37rpx 0rpx 0rpx 26rpx;
}

.boxs .addresss .address-txt .address-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 37rpx 0rpx 0rpx 18rpx;
}

.boxs .addresss .address-txt .addresss-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 17rpx 0rpx 0rpx 18rpx;
}

.boxs .addresss .image {
    margin: 35rpx 24rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.boxs .addresss .images {
    margin: 10rpx 24rpx 0rpx 0rpx;
    color: #c5c5c5;
    font-size: 36rpx;
}

.boxs .addresss .exit {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    margin: 43rpx 0rpx 0rpx 297rpx;
}

.department {
    padding-top: 48rpx;
    background: linear-gradient(0deg, #FFFFFF, #FF7B31);
}

.department .user_info2 {
    width: 710rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx auto;
}

.department .user_info2 .user2 {
    position: relative;
    width: 710rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0rpx auto 34rpx;
}

.department .user_info2 .user2 .user_image2 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-bottom: 7rpx;
    margin-top: -50rpx;
}

.department .user_info2 .user2 .username {
    font-size: 36rpx;
    font-family: PingFang SC;
    color: #4a4a4a;
    font-weight: blod;
}

.department .user_info2 .user2 .user-right {
    position: absolute;
    left: 420rpx;
    top: 75rpx;
    display: flex;
    flex-direction: column;
    margin: -5rpx 0rpx 0rpx 5rpx;
}

.department .user_info2 .user2 .user-right .user_button {
    width: 150rpx;
    background: #ffffff02;
    font-size: 24rpx;
    border-radius: 40rpx;
    padding: 0;
    margin: 0;
    margin-bottom: 10rpx;
}

.department .user_info2 .user2 .user-right .user_button ::after {
    padding: 0;
}

.department .user_info2 .change_info2 {
    display: flex;
    text-align: center;
    margin-bottom: 47rpx;
    justify-content: space-around;
}

.department .user_info2 .change_info2 .change2 {
    font-size: 48rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff7b31;
}

.department .user_info2 .change_info2 .change2 .change_num2 {
    margin-bottom: 7rpx;
}

.department .user_info2 .change_info2 .change2 .nmae2 {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
}

.department .user_info2 .members2 {
    height: 80rpx;
}

.department .user_info2 .members2 .members2_img {
    width: 100%;
    height: 80rpx;
}

.department .order_info2 {
    width: 702rpx;
    height: auto;
    border-radius: 20rpx;
    background: #ffffff;
    margin: 20rpx auto;
}

.department .order_info2 .title2 {
    font-size: 30rpx;
    font-weight: 600;
    padding: 25rpx 35rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
}

.department .order_info2 .title2 .all_order {
    display: flex;
    color: #858585;
    font-size: 25rpx;
}

.department .order_info2 .order_box2 {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-bottom: 40rpx;
}

.department .order_info2 .order_box2 .order2 .icon2 {
    width: 60rpx;
    height: 60rpx;
    background-size: 100%;
    border-radius: 4rpx;
}

.department .order_info2 .order_box2 .order2 .name2 {
    font-size: 24rpx;
    padding: 10rpx 0;
}

.department .order_info2 .information {
    width: 635rpx;
    height: 135rpx;
    border-radius: 20rpx;
    margin: 0rpx auto;
    display: flex;
    background-color: #f7f6fb;
}

.department .order_info2 .information .information_img {
    width: 105rpx;
    height: 105rpx;
    margin: auto 40rpx;
    background-color: #A2A2A2;
}

.department .order_info2 .information .order_information {
    width: 300rpx;
    margin: auto 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 浏览器内核 **/
    -webkit-box-orient: vertical;
    /** 设置纵向对齐模式 **/
    -webkit-line-clamp: 2;
    /** 设置盒子行数 **/
}

.department .order_info2 .information .order_information .have_order {
    color: #3067f5;
    margin-bottom: 10rpx;
}

.department .cell_info2 {
    margin: 20rpx auto;
    border-radius: 12rpx;
}

.department .cell_info2 .van-cell {
    display: flex;
    align-items: center;
    width: 710rpx;
    height: 112rpx;
    border-radius: 20rpx;
    margin: 20rpx auto;
}

.department .cell_info2 button {
    height: 112rpx;
    width: 710rpx;
    display: flex;
    margin: 10rpx auto;
    font-size: 28rpx;
    align-items: center;
    background: white;
    justify-content: space-between;
    padding: 0 35rpx;
}

.my_index_5 .user_info_5 .user_5 {
    display: flex;
    background: #ffffff;
    padding: 30rpx 29rpx;
    align-items: center;
}

.my_index_5 .user_info_5 .user_5 .user_image_5 {
    display: flex;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.my_index_5 .user_info_5 .user_5 .user_right_5 {
    display: flex;
}

.my_index_5 .user_info_5 .user_5 .user_right_5 .right_name {
    padding-left: 24rpx;
    font-size: 32rpx;
    color: #242424;
    font-weight: bold;
}

.my_index_5 .user_info_5 .user_5 .user_right_5 .user-right {
    display: flex;
    flex-direction: column;
    margin: -5rpx 0rpx 0rpx 5rpx;
}

.my_index_5 .user_info_5 .user_5 .user_right_5 .user-right .user_button {
    width: 150rpx;
    background: #ffffff02;
    font-size: 24rpx;
    border-radius: 40rpx;
    padding: 0;
    margin: 0;
    margin-bottom: 10rpx;
}

.my_index_5 .user_info_5 .user_5 .user_right_5 .user-right .user_button ::after {
    padding: 0;
}

.my_index_5 .user_info_5 .members_5 .members_image {
    width: 100%;
    height: 122rpx;
}

.my_index_5 .wallet_info {
    margin: 24rpx;
    display: flex;
    justify-content: space-between;
}

.my_index_5 .wallet_info .wallet {
    width: 339rpx;
    height: 193rpx;
    border-radius: 20rpx;
    background: #ffffff;
    text-align: center;
}

.my_index_5 .wallet_info .wallet .wallet_num {
    padding-top: 50rpx;
    font-size: 48rpx;
    color: #2892ff;
    font-weight: bold;
}

.my_index_5 .wallet_info .wallet .wallet_name {
    font-size: 30rpx;
    color: #666666;
}

.my_index_5 .my_order_info {
    width: 710rpx;
    height: 255rpx;
    margin: 20rpx auto;
    background: #ffffff;
    border-radius: 20rpx;
}

.my_index_5 .my_order_info .order_top {
    padding: 30rpx 20rpx 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my_index_5 .my_order_info .order_top .order_title {
    font-size: 30rpx;
    font-weight: bold;
}

.my_index_5 .my_order_info .order_top .all_order {
    display: flex;
}

.my_index_5 .my_order_info .order_top .all_order .all_order_title {
    font-size: 24rpx;
    color: #c9c9c9;
}

.my_index_5 .my_order_info .my_order_box {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.my_index_5 .my_order_info .my_order_box .order_5 .order_image {
    width: 60rpx;
    height: 60rpx;
}

.my_index_5 .cell_info_5 {
    margin: 20rpx auto;
    border-radius: 12rpx;
}

.my_index_5 .cell_info_5 .van-cell {
    display: flex;
    align-items: center;
    width: 710rpx;
    height: 112rpx;
    border-radius: 20rpx;
    margin: 10rpx auto;
    border-bottom: none;
}

.my_index_5 .cell_info_5 button {
    height: 112rpx;
    width: 710rpx;
    display: flex;
    margin: 10rpx auto;
    font-size: 28rpx;
    align-items: center;
    background: white;
    justify-content: space-between;
    padding: 0 35rpx;
}