|  |  |  | 
|---|
|  |  |  | /* 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: 50%; | 
|---|
|  |  |  | 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: 50%; | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|