hulimall/pages/user/wallet.wxss

/* pages/wallet/wallet.wxss */
.sc{
  width: 100%;
  height: 310rpx;
  background-size:100% auto;
  background-image: url('https://mall.gylservice.com/pic/images/icon/myyxbj.png');
  text-align: center; 
  display: flex;
  flex-direction: column;
  position: relative;
}
.bte{
  border-top: 1px solid #eee;
}
.qbdd{
  background: #fff;
  width: 92%;
  font-size: 12px;
  color: #666;
  padding: 4%;
  border-bottom: 1px solid #eee;
}
.c33{
  float: left;
  color: #000;
}

contact-button{
  position: relative;
  left:-50px;
  opacity: 0;
}
.c3{
  color: black;
  font-weight: bold;
}

.df_1{
  width: 100%;
  height: 220rpx;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center
}
.df_2{
  width: 100%;
  position: absolute;
  bottom: 1%;
  display: flex;
  justify-content:space-around;
}
.df_2_1{
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.df_2_2{
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.qb_01{
  color: #fff;
  font-size: 15px;
  margin-left: 8px;
  line-height: 25px;
  opacity:0.8;
}
.qb_02{
  color: #fff;
  font-size: 28px;
  margin-left: 8px;
}
.qb_03{
  font-size: 14px;  
}
.qb_04{
  font-size: 14px;
  color: gray;
}
.bot_1{
  background: black;
}
.page{
  /* background-color: rgb(240, 239, 245);   */
  position: fixed;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
}
.dibu{
  background-color: #48474c;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content:space-around;
  position: absolute;
  bottom: 0;
  align-items: center;
  margin: 0 auto;
}
.dibu_t{
  top: 20%;
  color: #fff;
  align-content:center;
  width: 100%;
  height: 100%;
}
.dibu_3{
  color: #fff;
}
.dibu_1{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.dibu_2{
  /* background-color: blue; */
  width: 50%;
  height: 100%;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.swiper-tab{  
  display: flex;
  justify-content:space-around ;
  width: 100%;  
  text-align: center;  
  line-height: 80rpx;
  left:0;
  background-color: #FFFFFF;
  /* border-bottom:2rpx solid #EAE9EC; */
}  
.swiper-tab-list{  
  font-size: 30rpx;  
  display: inline-block;  
  color: #999999;
  font-weight:500;
}
.swiper-box{
  display: block; 
  height: 100%;  
  width: 100%; 
  overflow: hidden;
 }
 
.obtain_box{
  width:90%;
  margin:0 auto;
  border-top: 1px solid #eee;
}
.obtain_bt{
  color: #000;
  font-size:30rpx;
  height:25px;
}
.jf_obtain{
  width:100%;
  display: flex;
  align-items: center;
  margin-top:10px;
  height:50px;
}
.on{
  color:#020202;
  font-weight:bold;
  border-bottom:5rpx solid #020202;
} 
.obtain_bt_1{
  width: 0;
}
.obtain_bt_2{
  width: 40%;
  text-align: end;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: #020202;
  font-size:28rpx;
  font-weight:bold;
}
@keyframes rise{
  0% {opacity: 0;transform: translate3d(0,100%,0);}
  50% {opacity: 1;}
  100% {opacity: 1;transform: translate3d(0,450rpx,0);}
}
.title{
  position: absolute;
  top: 10rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

.smalltitle{
  position: absolute;
  top: 50rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}

@keyframes show{
  0% {opacity: 0;}
  100% {opacity: .95;}
}

.hd {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1000rpx;
  margin-left: -500rpx;
  height: 200rpx;
  transition: all .35s ease;
}
.logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 200rpx;
  width: 160rpx;
  height: 160rpx;
  margin-left: -80rpx;
  border-radius: 160rpx;
  animation: sway 10s ease-in-out infinite;
  opacity: .95;
}
@keyframes sway{
  0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
  17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
  34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
  50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
  67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
  84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
  100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
}
.wave {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.725;
  height: 260rpx;
  width: 2250rpx;
  animation: wave 10s linear infinite;
  z-index: 99999;
}
.wave-bg {
  z-index: 1;
  animation: wave-bg 10.25s linear infinite;
}
@keyframes wave{
  from {transform: translate3d(125rpx,0,0);}
  to {transform: translate3d(1125rpx,0,0);}
}
@keyframes wave-bg{
  from {transform: translate3d(375rpx,0,0);}
  to {transform: translate3d(1375rpx,0,0);}
}

.bd {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
  opacity: 0;
}
@keyframes bd-rise{
  from {opacity: 0; transform: translate3d(0,60rpx,0); }
  to {opacity: 1; transform: translate3d(0,0,0); }
}

.confirm-btn {
  font-size: 13pt;
  line-height: 85rpx;
  height: 85rpx;
  background: #69C3AA;
  color: #fff;
  text-align: center;
  border-radius: 100rpx;
  margin:0rpx 30%;
}
.confirm-btn:active {
  opacity: .8;
}


.copyright {
  font-size: 28rpx;
  color: #999;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  text-align: center;
}
.my_money{
  font-size: 14px;
}

.brokerage {
  height: 90rpx;
  background-color: #E0573E;
  position: absolute;
  width: 92%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 30rpx;
}

.nav-title{
  font-size:28rpx;
  font-weight:500;
  color: #F4F4F4;

}

.nav-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-sum image {
  width: 16rpx;
  height: 30rpx;
}

.nav-sum-s {
  padding-right: 20rpx;
  font-size:40rpx;
  font-weight:400;
  color: #FEFEFE;
}