zhywpt-sp/subpackage/personal-center/setting/bank-card/bank-card.vue

<template>
	<view class="container" @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
		<view class="">
			<image class="bg" style="width:100%;height: 260rpx;" :src="`${$imgUrl}bank-bg.png`"></image>
			<view class="content">
				<view class="flex">
					<image style="width:68rpx;height:68rpx;" :src="`${$imgUrl}gongshang.png`">
					</image>
					<view style="margin-left: 15rpx;" class="">
						<view class="bank">工商银行</view>
						<view class="card">储蓄卡</view>
					</view>
				</view>
				<view class="button" @click.stop='delCard()'>解除绑定</view>
			</view>
			<view class="value">6216 **** **** 8721</view>
			<view class='default'>默认</view>
		</view>
	</view> 
	<view class="container" @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
		<view class="">
			<image class="bg" style="width:100%;height: 260rpx;" :src="`${$imgUrl}bank-bg.png`"></image>
			<view class="content">
				<view class="flex">
					<image style="width:68rpx;height:68rpx;" :src="`${$imgUrl}gongshang.png`">
					</image>
					<view style="margin-left: 15rpx;" class="">
						<view class="bank">工商银行</view>
						<view class="card">储蓄卡</view>
					</view>
				</view>
				<view class="button" @click.stop='delCard()'>解除绑定</view>
			</view>
			<view class="value">6216 **** **** 8721</view>
			<view class='default'>默认</view>
		</view>
	</view> 
       <view style='margin-top: 40rpx;' @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
			<submit-button title="+ 添加银行卡">
			</submit-button>
		</view>
</template>

<script lang="ts" setup>
	import {navTo} from '@/utils/utils';
	const delCard=()=>{
		console.log("删除")
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 30rpx 0 30rpx;
        position:relative;
		.flex {
			display: flex;
			align-items: center;
		}

		.value {
			position: absolute;
			top: 160rpx;
			left: 30rpx;
			right: 30rpx;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 36rpx;
		}
        .default{
			position: absolute;
			top: 235rpx;
			left: 60rpx;
			font-size: 29rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
		}
		.content {
			padding: 30rpx;
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			right: 30rpx;
			display: flex;
			justify-content: space-between;

			.bank {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
			}

			.card {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 24rpx;
				margin-top: 5rpx;
			}

			.button {
				height: 48rpx;
				line-height: 48rpx;
				border: 1px solid #FFFFFF;
				border-radius: 20rpx;
				color: #ffffff;
				font-size: 24rpx;
				text-align: center;
				padding: 0 20rpx;
			}
		}
	}
</style>