|  |  | 
 |  |  | /* pages/recharge/recharge.wxss */  | 
 |  |  | .base-wrapper {  | 
 |  |  |   background-color: #f5f5f5;  | 
 |  |  |   width: 100%;  | 
 |  |  |   height: 100vh;  | 
 |  |  |   overflow: hidden;  | 
 |  |  |   display: flex;  | 
 |  |  |   flex-direction: column;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .user-wrapper {  | 
 |  |  |   background-color: #1890FF;  | 
 |  |  |   height: 20vh;  | 
 |  |  |   padding-left: 10rpx;  | 
 |  |  |   display: flex;  | 
 |  |  |   flex-direction: column;  | 
 |  |  |   justify-content: space-around;  | 
 |  |  |   padding-top: 20rpx;  | 
 |  |  |   padding-bottom: 30rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .user-wrapper text {  | 
 |  |  |   color: #fff;  | 
 |  |  |   margin-left: 30rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .money-base-wrapper {  | 
 |  |  |   flex-direction: column;  | 
 |  |  |   height: 20vh;  | 
 |  |  |   display: flex;  | 
 |  |  |   justify-content: space-around;  | 
 |  |  |   margin-top: 20rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .row {  | 
 |  |  |   display: flex;  | 
 |  |  |   justify-content: space-around;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .item {  | 
 |  |  |   background-color: #fff;  | 
 |  |  |   border-radius: 5px;  | 
 |  |  |   width: 100%;  | 
 |  |  |   height: 10vh;  | 
 |  |  |   margin-left: 20rpx;  | 
 |  |  |   margin-top: 30rpx;  | 
 |  |  |   margin-right: 20rpx;  | 
 |  |  |   display: flex;  | 
 |  |  |   align-items: center;  | 
 |  |  |   justify-content: center;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .item text {  | 
 |  |  |   color: #2D8BF7;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .money-number {  | 
 |  |  |   font-size: 40rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .money-label {  | 
 |  |  |   font-size: 30rpx;  | 
 |  |  |   margin-left: 5rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .itemactive {  | 
 |  |  |   background-color: #2D8BF7;  | 
 |  |  |   border-radius: 5px;  | 
 |  |  |   width: 100%;  | 
 |  |  |   height: 10vh;  | 
 |  |  |   margin-top: 30rpx;  | 
 |  |  |   margin-left: 20rpx;  | 
 |  |  |   margin-right: 20rpx;  | 
 |  |  |   display: flex;  | 
 |  |  |   align-items: center;  | 
 |  |  |   justify-content: center;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .itemactive text {  | 
 |  |  |   color: #fff;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .money-wrapper {  | 
 |  |  |   display: flex;  | 
 |  |  |   align-items: flex-end;  | 
 |  |  |   /* 底部对齐 */  | 
 |  |  |   justify-content: center;  | 
 |  |  |   /* 水平居中 */  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .rechage-view {  | 
 |  |  |   margin-top: 40rpx; | 
 |  |  |   /* 占据剩余的全部高度 */  | 
 |  |  |   flex-direction: column;  | 
 |  |  |   display: flex;  | 
 |  |  |   justify-content: center;  | 
 |  |  |   align-items: center;  | 
 |  |  |   width: 100%;  | 
 |  |  | }  | 
 |  |  | .rechage-view text {  | 
 |  |  |   font-size: 30rpx;  | 
 |  |  |   padding-top: 10rpx;  | 
 |  |  |   padding-bottom: 10rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .rechageList-view {  | 
 |  |  |   margin-top: 40rpx; | 
 |  |  |   width: 50%;  | 
 |  |  |   background-color: #fff;  | 
 |  |  |   display: flex;  | 
 |  |  |   margin-left: 20rpx;  | 
 |  |  |   margin-right: 20rpx;  | 
 |  |  |   align-items: center;  | 
 |  |  |   justify-content: center;  | 
 |  |  |   margin-top: 30rpx;  | 
 |  |  |   border-radius: 90px;  | 
 |  |  |   border: 2px solid #2D8BF7;  | 
 |  |  |   /* 添加蓝色的边框 */  | 
 |  |  |   padding-top: 15rpx;  | 
 |  |  |   padding-bottom: 15rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .rechage {  | 
 |  |  |   display: flex;  | 
 |  |  |   width: 80%;  | 
 |  |  |   background-color: #2D8BF7;  | 
 |  |  |   align-items: center;  | 
 |  |  |   justify-content: center;  | 
 |  |  |   padding-top: 15rpx;  | 
 |  |  |   padding-bottom: 15rpx;  | 
 |  |  |   border-radius: 90px;  | 
 |  |  |   margin-top: 45rpx;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .rechageactive {  | 
 |  |  |   display: flex;  | 
 |  |  |   margin-top: 45rpx;  | 
 |  |  |   align-items: center;  | 
 |  |  |   justify-content: center;  | 
 |  |  |   width: 80%;  | 
 |  |  |   background-color: #bababa;  | 
 |  |  |   padding-top: 15rpx;  | 
 |  |  |   padding-bottom: 15rpx;  | 
 |  |  |   border-radius: 90px;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | /* pages/recharge/recharge.wxss */ | 
 |  |  | .base-wrapper { | 
 |  |  |   background-color: #f5f5f5; | 
 |  |  |   width: 100%; | 
 |  |  |   height: 100vh; | 
 |  |  |   overflow: hidden; | 
 |  |  |   display: flex; | 
 |  |  |   flex-direction: column; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |   | 
 |  |  | .rechageactive text {  | 
 |  |  |   color: #fff;  | 
 |  |  | }  | 
 |  |  |   | 
 |  |  | .rechage text {  | 
 |  |  |   color: #fff;  | 
 |  |  | .user-wrapper { | 
 |  |  |   background-color: #1890FF; | 
 |  |  |   height: 20vh; | 
 |  |  |   padding-left: 10rpx; | 
 |  |  |   display: flex; | 
 |  |  |   flex-direction: column; | 
 |  |  |   justify-content: space-around; | 
 |  |  |   padding-top: 20rpx; | 
 |  |  |   padding-bottom: 30rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .user-wrapper text { | 
 |  |  |   color: #fff; | 
 |  |  |   margin-left: 30rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .money-base-wrapper { | 
 |  |  |   flex-direction: column; | 
 |  |  |   height: 20vh; | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: space-around; | 
 |  |  |   margin-top: 40rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .row { | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: space-around; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .item { | 
 |  |  |   background-color: #fff; | 
 |  |  |   border-radius: 5px; | 
 |  |  |   width: 100%; | 
 |  |  |   height: 10vh; | 
 |  |  |   margin-left: 20rpx; | 
 |  |  |   margin-top: 10rpx; | 
 |  |  |   margin-right: 20rpx; | 
 |  |  |   margin-bottom: 10rpx; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .itemactive { | 
 |  |  |   background-color: #1890FF; | 
 |  |  |   border-radius: 5px; | 
 |  |  |   width: 100%; | 
 |  |  |   height: 10vh; | 
 |  |  |   margin-left: 20rpx; | 
 |  |  |   margin-top: 10rpx; | 
 |  |  |   margin-right: 20rpx; | 
 |  |  |   margin-bottom: 10rpx; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .itemList { | 
 |  |  |   background-color: #fff; | 
 |  |  |   border-radius: 5px; | 
 |  |  |   margin-left: 20rpx; | 
 |  |  |   margin-top: 10rpx; | 
 |  |  |   margin-right: 20rpx; | 
 |  |  |   margin-bottom: 0rpx; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: space-between; | 
 |  |  |   padding: 30rpx 20rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | .item text { | 
 |  |  |   color: #1890FF; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .money-number { | 
 |  |  |   font-size: 40rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .money-label { | 
 |  |  |   font-size: 30rpx; | 
 |  |  |   margin-left: 5rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | .itemactive text { | 
 |  |  |   color: #fff; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .money-wrapper { | 
 |  |  |   display: flex; | 
 |  |  |   align-items: flex-end; | 
 |  |  |   /* 底部对齐 */ | 
 |  |  |   justify-content: center; | 
 |  |  |   /* 水平居中 */ | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechage-view { | 
 |  |  |   margin-top: 40rpx; | 
 |  |  |   /* 占据剩余的全部高度 */ | 
 |  |  |   flex-direction: column; | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: center; | 
 |  |  |   align-items: center; | 
 |  |  |   width: 100%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechage-view text { | 
 |  |  |   font-size: 30rpx; | 
 |  |  |   padding-top: 10rpx; | 
 |  |  |   padding-bottom: 10rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechageList-view { | 
 |  |  |   display: flex; | 
 |  |  |   flex: 1; | 
 |  |  |   width: 100%; | 
 |  |  |   flex-direction: column; | 
 |  |  |   margin-top: 10rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechage { | 
 |  |  |   display: flex; | 
 |  |  |   width: 80%; | 
 |  |  |   background-color: #1890FF; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  |   padding-top: 15rpx; | 
 |  |  |   padding-bottom: 15rpx; | 
 |  |  |   border-radius: 90px; | 
 |  |  |   margin-top: 45rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechageactive { | 
 |  |  |   display: flex; | 
 |  |  |   margin-top: 45rpx; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  |   width: 80%; | 
 |  |  |   background-color: #bababa; | 
 |  |  |   padding-top: 15rpx; | 
 |  |  |   padding-bottom: 15rpx; | 
 |  |  |   border-radius: 90px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechage-text { | 
 |  |  |   color: #fff; | 
 |  |  |   font-size: 40rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .rechageList-view-head { | 
 |  |  |   color: #2D8BF7; | 
 |  |  |   border-radius: 5px 5px 0 0; | 
 |  |  |   background-color: #fff; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   /* 垂直方向居中 */ | 
 |  |  |   justify-content: space-between; | 
 |  |  |   /* 子元素在主轴上的对齐方式 */ | 
 |  |  |   padding: 10px; | 
 |  |  |   /* 容器的内边距 */ | 
 |  |  |   margin-left: 20rpx; | 
 |  |  |   margin-right: 20rpx; | 
 |  |  |   margin-top: 20rpx; | 
 |  |  |   text-align: center; | 
 |  |  |   flex-direction: column; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .item-card-text { | 
 |  |  |   font-size: 35rpx; | 
 |  |  | } |