couponCenter_mpapp/src/pages-A/bank/index.vue

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

definePage({
    style: {
        navigationBarTitleText: '绑定银行卡',
    },
})

const list = ref([{
    bankName: '建设银行',
}, {
    bankName: '中国银行',
}, {
    bankName: '农业银行',
}, {
    bankName: '工商银行',
}])
</script>

<template>
    <view class="profile-container">
        <view class="bank-list">
            <view v-for="item in list" :key="item.bankName" class="bank-list-item">
                <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>
                    </view>
                </view>
                <view class="bank-list-item-right">
                    <u-icon name="arrow-right" size="13" color="#666" />
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
  font-family: Alibaba PuHuiTi;
  min-height: 100vh;
  background-color: #f5f5f5;
  line-height: 1;
  padding: 20rpx;
}
.bank-list {
  padding: 0 20rpx;
  background: #ffff;
  border-radius: 10rpx;
  .bank-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 24rpx;
    background: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #eeeeee;
    &:last-child {
      border-bottom: none;
    }
    .bank-list-item-left {
      display: flex;
      align-items: center;
      gap: 14rpx;
      padding: 28rpx 0 28rpx 4rpx;
      .bank-list-item-left-hanke {
        display: flex;
        align-items: center;
        gap: 14rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        image {
          width: 30rpx;
          height: 30rpx;
        }
        .bank-list-item-left-hanke-text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .bank-list-item-right {
      display: flex;
      align-items: center;
      gap: 10rpx;
      padding: 28rpx 4rpx 28rpx 0;
    }
  }
}
</style>