my bank list

src/pages-A/myBankList/index.vue

@@ -14,42 +14,56 @@ const list = ref([{
     bankName: '建设银行',
     bankLogo: '/static/images/income/y-1.png',
     bankNumber: '6228 **** **** *** 000',
+    bankShortName: 'jh',
 }, {
     bankName: '中国银行',
     bankLogo: '/static/images/income/y-1.png',
     bankNumber: '6228 **** **** *** 000',
+    bankShortName: 'zh',
 }, {
     bankName: '农业银行',
     bankLogo: '/static/images/income/y-1.png',
     bankNumber: '6228 **** **** *** 000',
+    bankShortName: 'nh',
 }, {
     bankName: '工商银行',
     bankLogo: '/static/images/income/y-1.png',
     bankNumber: '6228 **** **** *** 000',
+    bankShortName: 'gh',
 }])
 </script>
 
 <template>
     <view class="profile-container">
         <view class="bank-list">
-            <view v-for="item in list" :key="item.bankName" class="bank-list-item jh">
-                <view class="bank-list-item-left">
-                    <view class="bank-list-item-left-hanke">
-                        <image src="/static/images/income/y-1.png" />
-                        <view class="bank-list-item-left-hanke-text">
-                            {{ item.bankName }}
+            <view v-for="item in list" :key="item.bankName" class="bank-list-item-container" :class="item.bankShortName">
+                <view class="bank-list-item">
+                    <view class="bank-list-item-left">
+                        <view class="bank-list-item-left-hanke">
+                            <image :src="`/static/images/income/logo-${item.bankShortName}.png`" class="bank-list-item-left-hanke-logo" />
+                            <view class="bank-list-item-left-hanke-text">
+                                {{ item.bankName }}
+                            </view>
+                        </view>
+                        <view class="bank-list-item-left-number">
+                            {{ item.bankNumber }}
                         </view>
                     </view>
-                    <view class="bank-list-item-left-number">
-                        {{ item.bankNumber }}
+                    <view class="bank-list-item-right">
+                        <view style="margin-top: 9rpx;">
+                            储蓄卡 4427
+                        </view>
+                        <text class="bank-list-item-right-full-number">
+                            完整卡号
+                        </text>
                     </view>
                 </view>
-                <view class="bank-list-item-right">
-                    <view>储蓄卡 4427</view>
-                    <view>完整卡号</view>
-                </view>
+                <image :src="`/static/images/income/logo${item.bankShortName}.png`" class="bank-list-item-right-logo" />
             </view>
         </view>
+        <view class="submit-btn">
+            添加银行卡
+        </view>
     </view>
 </template>
 
@@ -64,42 +78,89 @@ const list = ref([{
 .bank-list {
   padding: 0 20rpx;
   border-radius: 10rpx;
-  .bank-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 30rpx 27rpx 40rpx 30rpx;
-    border-radius: 10rpx;
-    margin-bottom: 20rpx;
-    color: #fff;
+  .bank-list-item-container {
+    position: relative;
     &.jh {
       background: linear-gradient(270deg, #3571fe 0%, #5386ff 100%);
     }
-    .bank-list-item-left {
+    &.gh {
+      background: linear-gradient(270deg, #ff3137 0%, #ff7278 100%);
+    }
+    &.zh {
+      background: linear-gradient(270deg, #c80c31 0%, #bd445c 100%);
+    }
+    &.nh {
+      background: linear-gradient(270deg, #009981 0%, #00b699 100%);
+    }
+    .bank-list-item {
       display: flex;
-      flex-direction: column;
-      gap: 38rpx;
-      .bank-list-item-left-hanke {
+      align-items: center;
+      justify-content: space-between;
+      padding: 30rpx 27rpx 40rpx 30rpx;
+      border-radius: 10rpx;
+      margin-bottom: 20rpx;
+      color: #fff;
+      position: relative;
+      z-index: 1;
+
+      .bank-list-item-left {
         display: flex;
-        align-items: center;
-        gap: 14rpx;
-        font-weight: 400;
-        font-size: 26rpx;
-        image {
-          width: 30rpx;
-          height: 30rpx;
+        flex-direction: column;
+        gap: 38rpx;
+        .bank-list-item-left-hanke {
+          display: flex;
+          align-items: center;
+          gap: 14rpx;
+          font-weight: 400;
+          font-size: 30rpx;
+          image.bank-list-item-left-hanke-logo {
+            width: 40rpx;
+            height: 40rpx;
+          }
+          .bank-list-item-left-hanke-text {
+            font-weight: 400;
+            font-size: 30rpx;
+          }
         }
-        .bank-list-item-left-hanke-text {
+      }
+      .bank-list-item-right {
+        display: flex;
+        flex-direction: column;
+        gap: 41rpx;
+        font-size: 24rpx;
+        position: relative;
+        .bank-list-item-right-full-number {
           font-weight: 400;
-          font-size: 26rpx;
+          color: #ffffff;
+          text-align: center;
+          background: rgba(#001649, 0.21);
+          border-radius: 10rpx;
+          padding: 7rpx 15rpx;
         }
       }
     }
-    .bank-list-item-right {
-      display: flex;
-      gap: 10rpx;
-      padding: 28rpx 4rpx 28rpx 0;
+    .bank-list-item-right-logo {
+      width: 115rpx;
+      height: 122rpx;
+      position: absolute;
+      bottom: 11rpx;
+      right: 53rpx;
     }
   }
 }
+.submit-btn {
+  width: 600rpx;
+  height: 80rpx;
+  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
+  border-radius: 10rpx;
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 80rpx;
+  position: fixed;
+  bottom: 52rpx;
+  left: 50%;
+  transform: translateX(-50%);
+}
 </style>