cardtest/pages/user/user.wxss

/* 个人中心 */
.userHead {
    display: flex;
    padding: 30rpx;
    box-sizing: border-box;
    background: white;
}

.userHead-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    position: relative;
}

.userHead-img>image {
    position: absolute;
    left: 10rpx;
    top: 0;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.no-userHead {
    width: 120rpx;
    height: 120rpx;
}

.userHead-img .userHead-tips {
    position: absolute;
    width: 140rpx;
    text-align: center;
    bottom: 0;
    left: 0;
    background: #c6c6c6;
    color: #fff;
    border-radius: 30rpx;
    height: 42rpx;
    line-height: 40rpx;
    display: inline-block;
    z-index: 99;
}


.userHead-img .userHead-tips.super,
.userHead-img .userHead-tips.sage {
    background: #000;
}

.userHead-img .userHead-tips.default {
    font-size: 24rpx;
    text-align: center;
}

.userHead-img text {
    font-size: 22rpx;
    color: transparent;
    font-weight: 700;
}

.userHead-img view.super text {
    background-image: linear-gradient(135deg,#bcbcbc,#f1f1f1, #bcbcbc);
    -webkit-background-clip:text;
}

.userHead-img view.sage text {
    background-image: linear-gradient(135deg,#d4ac02,#fffa9a, #e0b500);
    -webkit-background-clip:text;
}

.userHead-tips image {
    width: 24rpx;
    height: 24rpx;
    margin-right: 5rpx;
    vertical-align: -2rpx;
}

.userHead-text {
    margin-left: 30rpx;
    width: calc(100% - 340rpx);
}

.userHead-switch {
    border: 2rpx solid #000;
    border-radius: 50rpx;
    font-size: 24rpx;
    height: 58rpx;
    line-height: 58rpx;
    width: 160rpx;
    margin-top: 30rpx;
    display: flex;
}

.userHead-switch image {
    width: 30rpx;
    height: 30rpx;
    margin: 15rpx 6rpx 0 12rpx;
}

.userHead-name {
    margin: 10rpx 0 20rpx;
    font-size: 36rpx;
    font-weight: 600;
}


.userHead-login {
    border: 2rpx solid #313131;
    border-radius: 6rpx;
    font-size: 28rpx;
    padding: 8rpx 30rpx;
    margin-top: 30rpx;
    display: inline-block;
}

.userHead-tel {
    font-size: 32rpx;
}

/* 轮播图 */
.userCard {
    background: white;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;
}

.userCard-title {
    font-size: 32rpx;
    font-weight: 600;
    padding: 30rpx 30rpx 0;
    margin: 20rpx 0;
}

.userCard-cont {
    padding:  30rpx 80rpx;
    box-sizing: border-box;
    position: relative;
}

.userCard-clip {
    position: relative;
    padding-top: 55%;
    width: 100%;
}

/* .userCard-clip::after {
    content: '';
    left: 10%;
    top: 0;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    z-index: 1;
    width: 80%;
    height: 90%;
    border-radius: 20px;
} */

.userCard-swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.userCard-item {
    padding: 0 10rpx;
    box-sizing: border-box;
}

.userCard-img {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.userCard-parice {
    position: absolute;
    z-index: 9;
    left: 30rpx;
    bottom: 50rpx;
    color: #f79210;
    font-weight: 600;
    font-size: 36rpx;
}

.userCard-parice text {
    font-size: 28rpx;
}

.userCard-arrow-left, .userCard-arrow-right {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    top: calc(50% - 25rpx);
}

.userCard-arrow-left {
    right: 10rpx;
}

.userCard-arrow-right {
    left: 10rpx;
}

.userCard-tips {
    background: #f0f4fa;
    border-radius: 30rpx;
    width: 360rpx;
    text-align: center;
    margin: 0 auto;
    color: #b4bbc4;
    font-size: 26rpx;
    padding: 14rpx 0;
}

.userCard-tips image {
    width: 20rpx;
    height: 20rpx;
}

.userOrder {
    overflow: hidden;
    margin-top: 40rpx;
}

.userOrder-label {
    float: left;
    width: 25%;
    text-align: center;
    font-size: 28rpx;
}

.userOrder-label-new .userOrder-label {
    width: 25%;
}

.userOrder-icon {
    width: 94rpx;
    height: 94rpx;
    background: #000;
    border-radius: 50%;
    padding: 18rpx;
    box-sizing: border-box;
    margin: 0 auto 10rpx;
}

.userOrder-icon.active {
    background: #000;
}

.userOrder-icon image {
    width: 100%;
    height: 100%;
}