challengeFamily/pages/account/monetaryCenter/index.wxss

page{
  font-size: 28rpx;
  min-height: 100%;
  background: #F5F5F4 url('https://img.bbztx.com/image_test/upload/thumbs/20220426/logo/1650962916646054418.png') no-repeat;
  background-size: 100%;
}
.coin-head{

}
.coin-head .head-user{
  padding-top: 100rpx;
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coin-head .head-user .tip{
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 10rpx;
}
.coin-head .head-user .headImg{
  width: 140rpx;
  height: 140rpx;
  border-radius: 100%;
  overflow: hidden;
  background: #fff;
}
.coin-head .head-user .level{
  margin-top: -10rpx;
  background: #ee3a43;
  color: #fff;
  padding: 0 10rpx 0 50rpx;
  border-radius: 20rpx;
  position: relative;
  z-index: 1;
}
.coin-head .head-user .level .icon{
  position: absolute;
  top: -2rpx;
  left: 10rpx;
  font-size: 40rpx;
}
.coin-head .head-user .coin{
  margin: 20rpx 0 10rpx;
  font-size: 30rpx;
  color: #ee3a43;
}
.coin-head .head-user .coin .con{
  letter-spacing: -2rpx;
}
.coin-head .head-user .show-detail{
  color: #666;
  display: flex;
  align-items: center;
  font-size:24rpx
}
.coin-head .head-user .show-detail::after{
  content: '';
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  margin-left: 6rpx;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  transform: rotate(45deg);
}
.coin-head .swipe{
  margin-top: 60rpx;
  height: 320rpx;
}
.coin-head .swipe .swipe-item{
}
.van-swipe{
  overflow: visible;
}
.swipe .item-box{
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 0 50rpx 0 88rpx;
  background: #ee3a43;
  border-radius: 50rpx;
  margin: 0 10rpx;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
}
.swipe .item-box .current-level{
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, rgb(255, 255, 255,.6) , rgb(255, 255, 255,0));
  padding: 0 30rpx;
  font-size: 22rpx;
  line-height: 2.5;
}
.swipe .item-box .member{
  margin-top: 108rpx;
}
.swipe .item-box .member .member-type{
  font-size: 36rpx;
  letter-spacing: 2px;
  font-weight: 700;
}
.swipe .item-box .member .member-num{
  font-size: 20rpx;
}
.swipe .item-box .speed-rate{
  margin-top: 45rpx;
}
.swipe .item-box .speed-rate .rate-ins{
  font-size:20rpx
}
.swipe .item-box .speed-rate .tate{
  height: 6rpx;
  background: rgba(255,255,255,.4);
  border-radius: 10rpx;
  margin-top: 10rpx;
  overflow: hidden;
  width: 50%;
}
.swipe .item-box .speed-rate .tate .rate-wid{
  height: 100%;
  background: #fff;
  border-radius: 10rpx;
  transition: width 1s;
}

.modular{
  background: none;
  margin-top: 30rpx;
}
.modular .modal-title{
  border: none;
  padding: 0 20rpx;
  font-weight: 700;
  font-size: 28rpx;
}
.modular .modal-label{
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
}
.modular .modal-label > view:last-child{
  margin: 0;
}

/* 获取宝贝币方式列表 */
.coin-list{
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
}
.coin-list .coin-list-l{
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0));
}
.coin-list .coin-list-l .icon-box{
  margin: 2rpx;
  background: #fff;
  height: calc(100% - 4rpx);
  border-radius: 50%;
  text-align: center;
  line-height: 86rpx;
  font-size: 52rpx;
  color: #ee3a43;
}
.coin-list .coin-list-c{
  flex: 1;
  padding: 0 20rpx;
}
.coin-list .coin-list-c .get-method{
  font-size: 26rpx;
}
.coin-list .coin-list-r{
  background: #FEF5F5;
  color: #ee3a43;
  padding: 0 20rpx;
  border-radius: 20rpx;
}
.coin-list .finished-task{
  background: #ccc;
  color: #fff;
}
.coin-list .coin-list-c .get-ins{
  color: #999;
  font-size: 22rpx;
  margin-top: 10rpx;
}
/* 等级特权 */
.privilege-type{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}
.privilege-type .type-item{
  width: 25%;
  position: relative;
  height: 150rpx;
}
.modular .privilege-type .type-item .act_privilege{
  width: 140rpx;
  height: 140rpx;
  background-image: linear-gradient(to top,rgba(241, 21, 32, 0.4) 0% ,rgba(241, 75, 83, 0.25) 40%, rgba(247, 178, 178, 0));
}
.privilege-type .type-item .position-icon{
  position: absolute;
  top: 1rpx;
  right: 5rpx;
  color: #ccc;
  font-size: 26rpx !important;
  font-weight: 500 !important;
}
.privilege-type .type-item .type-item-box{
  /* border: 1px solid #ee3a43; */
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ee3a43;
  background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0));
  transition: all .5s;
}
.privilege-type .type-item .type-item-box .type-item-name{
  font-size: 22rpx;
}
.privilege-type .type-item .type-item-box .icon{
  font-size: 64rpx; 
}
.privilege-ins{
  background: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  position: relative;
  padding: 20rpx;
}
.privilege-ins .arrow{
  content: '';
  display: inline-block;
  width: 30rpx;
  height: 30rpx;
  transform: rotate(-45deg);
  background: #fff;
  position: absolute;
  top: -13rpx;
  transition: left .5s;
}
.card .card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #F5F5F4;
  padding-bottom: 26rpx;
  color: #666;
  margin-top: 10rpx;
  font-size: 24rpx;
}
.privilege-ins .card .card-title .card-right{
  border: 1px solid #ccc;
  padding: 0 20rpx;
  border-radius: 40rpx;
  line-height: 1.2;
}
.privilege-ins .card-content{
  padding-top: 40rpx;
}
.privilege-ins .card-content .act-item{
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}
.privilege-ins .card-content .act-item:last-child{margin: 0;}
/* 活动列表 */
.act-item .act-l{
  width: 160rpx;
  border-radius: 10rpx;
  overflow: hidden;
}
.act-item .act-c{
  flex: 1;
  margin: 0 50rpx 0 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
  line-height: 2;
}
.act-item .act-c .act-sign{
  margin-top: 10rpx;
  font-size: 22rpx;
}
.act-item .act-r{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.act-item .act-r .price-ins{
  margin-top: 6rpx;
}
.card .btn-box{
  padding: 1px;
  background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0));
  border-radius: 40rpx;
  width: 140rpx;
}
.card .btn-box .btn{
  /* padding:0 20rpx; */
  background: #fff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 1.4;
  font-size: 32rpx;
}
.modular:last-child{
  margin-bottom: 100rpx;
}

/* 电商商品 */
.goods-fixed{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.goods-fixed .good-item{
  width: calc(50% - 10rpx);
  margin-bottom: 60rpx;
}
.goods-fixed .good-item:nth-child(3),.goods-fixed .good-item:nth-child(4){
  margin: 0;
}
.goods-fixed .good-item .item-top-img{
  border-radius:10rpx;
  overflow: hidden;
}
.goods-fixed .good-item .goods-title{
  margin: 10rpx 0;
  line-height: 1.8;
}
.goods-fixed .good-item .sign{
  font-size: 24rpx;
}
.goods-fixed .good-item .good-price{
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.goods-fixed .good-item .good-price .price-ins{
  margin-left: 10rpx;
  font-size: 24rpx;
}
.card .price-ins{
  background: #F8F1F3;
  padding: 0 10rpx;
  display: inline-block;
  border-radius: 10rpx;
  font-size: 22rpx;
}
.card .act-title,.card .goods-title{
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box; */
  color: #3E3A39;
}
/* 抢购特权 */
.card-content .privilege-title{

}
.card-content .privilege-content{
  margin-top: 20rpx;
  min-height: 100rpx;
  border-radius: 10rpx;
}

/* 获取宝贝币 */
.coin-card-mar{
  margin-top: 0 !important;
  margin-bottom: 40rpx;
}
/* 表格 */
.table{
  border: 1rpx solid #999;
  text-align: center;
  line-height: 2;
  border-radius: 20rpx;
  overflow: hidden;
}
.table .tr{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.table .tr:first-child{
  background: #EE3A43;
  color: #fff;
}
.table .tr:last-child{
  border: none;
}
.table .tr view:first-child{flex: .5;}
.table .tr view:last-child{flex: 1;}