充值界面

src/pages.json

@@ -125,7 +125,7 @@
 			"path": "pages/IcbcModule/Recharge/Recharge",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "充值",
+				"navigationBarTitleText": "电子校园卡",
 				"enablePullDownRefresh": false
 			}
 
@@ -263,7 +263,7 @@
 			"path": "pages/BankModule/Recharge/Recharge",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "充值",
+				"navigationBarTitleText": "电子校园卡",
 				"enablePullDownRefresh": false
 			}
 

src/pages/IcbcModule/Recharge/Recharge.vue

 <template>
   <view class="container">
+    <view class="userInfoBox">
+      <view class="firstLine">
+        <view class="avatar">
+          <image :src="ImgUrl+'user/personAva.png'" alt=""></image>
+        </view>
+        <view class="name">{{ PersonalInfo.name }}</view>
+        <view>{{ PersonalInfo.gradename }}{{
+              PersonalInfo.classname
+            }}</view>
+      </view>
+      <view class="secondLine">{{ PersonalInfo.schoolname }}</view>
+    </view>
+    <view class="balanceWrapper">
+      <view class="firstLine"></view>
+    </view>
     <view class="contentBox" v-if="!depotMoneyother">
       <!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
       <view class="contentDiv">
@@ -216,7 +231,10 @@
                   item.bindCardNo.slice(item.bindCardNo.length - 4)
                 }}</span
               >
-              <image class='BankListImg' src='../../../static/img/choiceBank.png'></image>
+              <image
+                class="BankListImg"
+                src="../../../static/img/choiceBank.png"
+              ></image>
             </view>
           </view>
         </view>
@@ -871,7 +889,76 @@ page {
   width: 750rpx;
   background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
 }
-
+.userInfoBox {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 64rpx);
+  height: 150rpx;
+  margin: 0 32rpx;
+  margin-top: 30rpx;
+  background: linear-gradient(270deg, #f4f4f4 0%, #ebebeb 100%);
+  border-radius: 16px;
+  .firstLine {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 68rpx);
+    height: 56rpx;
+    line-height: 56rpx;
+    margin: 0 34rpx;
+    margin-top: 28rpx;
+    overflow: hidden;
+    view {
+      white-space: nowrap;
+    }
+    .avatar {
+      width: 56rpx;
+      height: 56rpx;
+      uni-image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+    .name {
+      margin-left: 17rpx;
+      font-size: 36rpx;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    view:last-child {
+      margin-left: 10rpx;
+      align-self: center;
+      align-items: center;
+      padding: 0 8rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      background: rgba(0, 0, 0, 0.08);
+      border-radius: 4rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+  .secondLine {
+    display: flex;
+    width: calc(100% - 62rpx);
+    margin: 0 31rpx;
+    margin-top: 8rpx;
+    height: 37rpx;
+    line-height: 37rpx;
+    font-size: 26rpx;
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+.balanceWrapper {
+  width: calc(100% - 64rpx);
+  margin: 0 32rpx;
+  margin-top: 24rpx;
+  height: 289rpx;
+  background-image: url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/user/bankBg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
 .showBindCardList {
   .choiceBox {
     text-align: center;