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

<template>
	<view class="container">
		<view class="">
			<image class="bg" style="width:100%;height: 260rpx;" :src="`${$imgUrl}bank-bg.png`">
			</image>
			<view class="value">
				6216 **** **** 8721
			</view>
			<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">
					解除绑定
				</view>
			</view>
		</view>
		<view style='margin-top: 40rpx;' @click="navTo('/personal-center/setting/bank-card/bank-card-add')">
			<submit-button title="+ 添加银行卡">
			</submit-button>
		</view>
	</view>

</template>

<script lang="ts" setup>
	import {
		navTo
	} from '@/utils/utils';
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.bg {}

		.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;
		}

		.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>