<script setup>
	// 我的银行卡

	// 跳转
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</script>

<template>
	<view class="app">
		<view class="list">
			<view class="card item" v-for="(item,index) in 3" :key="index">
				<view class="name">很行银行</view>
				<view class="type">储蓄卡</view>
				<view class="number">**** **** **** 0896</view>
			</view>

			<view class="item add rows" @click="link('/pages/mine/setting/bankCardAdd')">
				<view>添加银行卡</view>
				<uni-icons type="right" color="#999" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.list {
		.item {
			margin: 20rpx;
			padding: 30rpx 40rpx;
			border-radius: 25rpx;
		}

		// 卡片
		.card {
			background: linear-gradient(130deg, #ff8888 0%, #ff4142 35%, #f65253ff 60%, #ff9999 100%);
			color: #fff;

			// 名称
			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			// 类型
			.type {
				color: #ffffffcc;
				font-size: 26rpx;
			}

			// 卡号
			.number {
				letter-spacing: 1rpx;
				margin: 30rpx 0;
				font-size: 40rpx;
			}
		}

		// 
		.add {
			background: #fff;
			// border: 2rpx solid #ff4142;
		}
	}
</style>