payProject/pages/member/member.wxss

page {
  background: #F9F9F9;
  /* overflow: hidden; */
  /* background: #fff; */
}

/* .user-info {
  height: 290rpx;
  position: relative;
} */

.user-info {
  width: 100%;
  height: 400rpx;
  padding: 28rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  /* position: relative;
  z-index: -1;
  overflow: hidden; */
}

.user-info::after {
  content: '';
  width: 140%;
  height: 400rpx;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #FA7D22;
  overflow: hidden;
}

.user-info .bg {
  width: 100%;
  height: 100%;
}

/* .user-info-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
} */

.user-info-box .avatar {
  width: 120rpx;
  height: 120rpx;
  /* margin-bottom: 20rpx; */
  border-radius: 50%;
  box-sizing: border-box;
}
.user-info-box{
  position: relative;
}
.user-info-box .avatarHead{
  width: 100rpx;
  height: 34rpx;
  position: absolute;
  bottom: -1rpx;
  left: 11rpx;
}
.user-info-box.active .avatar {
  border: 2rpx solid #FF3803;
}

.user-info-box .info-right {
  margin-left: 20rpx;
}

.user-info-box.active .nick-name {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #FF3803;
}

.user-info-box .intro {
  margin: 4rpx 0;
}

.user-info-box .gender {
  width: 44rpx;
  height: 28rpx;
  background: #FFFFFF;
  border-radius: 14rpx;
}

.user-info-box .gender image {
  width: 28rpx;
  height: 28rpx;
}

.user-info-box .city {
  height: 28rpx;
  padding: 0rpx 10rpx;
  background: #FFFFFF;
  border-radius: 14rpx;
  font-size: 16rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.user-info-box .vip-time {
  background: linear-gradient(298deg, #FFB16E 0%, #FF7F7F 100%);
  border-radius: 20rpx;
  height: 40rpx;
  padding: 0 8rpx;
}

.user-info-box .vip-time image {
  width: 48rpx;
  height: 28rpx;
}

.user-info-box .vip-time text {
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}

/* .user-info-box text {
  color: #fff;
} */

.order {
  height: 172rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
}

.order .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.order .item image {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 10rpx;
}

.order .item text {
  font-size: 24rpx;
  color: #666666;
  font-family: PingFangSC-Regular;
}

.order .item .item-num {
  position: absolute;
  top: -14rpx;
  right: -14rpx;
  height: 28rpx;
  width: 28rpx;
  padding: 4rpx;
  /* padding: 4rpx; */
  background: #FA7D22;
  border-radius: 50%;
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

.tools .item {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 112rpx;
  background: #fff;
}

.tools .item.top {
  margin-top: 20rpx;
}

.tools .item.line {
  /* border-bottom: 1rpx solid #F9F9F9; */
}

.tools .item .active {
  font-size: 14px;
  color: #FA7D22;
}

.tools .item .icon-left {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.tools .item .icon-right {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
}

.item-radius {
  background: #FFFFFF;
  border-radius: 16rpx;
  margin: 20rpx 30rpx;
  overflow: hidden;
}

.listker-top-add {
  margin-top: -20rpx;
  width: 100vw;
  height: 200rpx;
  display: flex;
  align-items: center;
}

.wallet {
  min-width: 150rpx;
  margin-left: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.desc {
  font-size: 48rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.desc text {
  font-size: 20rpx;
  font-weight: 500;
  color: #FFFFFF;
}

.title {
  font-size: 20rpx;
  font-weight: 400;
  color: #FFFFFF;
}

.tool {
  min-width: 150rpx;
  margin-left: 50rpx;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listker-line {
  width: 2rpx;
  height: 38rpx;
  background: #FFFFFF;
  margin-right: 92rpx;
  margin-left: 50rpx;
}

/* <view class="listker-top-add">
    <navigator url="/pages/storedValue/index">
      <view class="wallet">
        <view class="desc"><text>￥</text>{{inserllAmount}}<text>.00</text></view>
        <view class="title">我的储值</view>
      </view>
    </navigator>
    <navigator url="/pages/toolDetails/index">
    <view class="tool">
      <view class="desc">900</view>
      <view class="title">我的积分</view>
    </view>
    </navigator>
    <view class="listker-line"></view>
    <image class="listker-img"></image>
    <view class="card">
      <view class="desc">5</view>
      <view class="title">卡券包</view>
    </view>
  </view> */

.listker-img {
  width: 64rpx;
  height: 64rpx;
}

.card {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* wxss */
.noshadow {
  hover-class: none;
}
.cardBag{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}