<template> <view> <u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='36'></u-navbar> <view class="cont"> <view class="card" @click="tobd()"> <view class="tit"> 个人用户 </view> <view class="txt"> 拥有个人银行卡 </view> </view> <view class="card" style="background-color: #8883F0;"> <view class="tit"> 企业用户 </view> <view class="txt"> 拥有个人银行卡 </view> </view> <view class="card" style="background-color: #00BA88 ;"> <view class="tit"> 微信账号 </view> <view class="txt"> 需微信实名认证 </view> </view> <view class="card" style="background-color: #4C97E7 ;"> <view class="tit"> 支付宝账号 </view> <view class="txt"> 需支付宝实名认证 </view> </view> <view class="tip">充值须知 1.充值时与蓝牙设备保持三米以内 </view> <view class="btn"> 立即支付 </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, } }, methods: { tobd(){ uni.navigateTo({ url:'/pages/userpage/bdcard' }) } } } </script> <style lang="scss" scoped> .cont{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; .card{ display: flex; flex-wrap: wrap; margin-top: 26rpx; width: 636rpx; height: 188rpx; background: #8EA9E4; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1); border-radius: 20rpx; .tit{ width: 80%; margin-top: 38rpx; margin-left: 48rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 400; font-size: 40rpx; color: #FFFFFF; line-height: 40rpx; } .txt{ // margin-top: 20rpx; margin-left: 48rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 400; font-size: 28rpx; color: #FFFFFF; } } .tip{ margin-top: 62rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 400; font-size: 24rpx; color: #FF8D1A; line-height: 36rpx; } .btn{ display: flex; align-items: center; justify-content: center; margin-top: 218rpx; width: 590rpx; height: 84rpx; background: #2A82E4; border-radius: 40rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 400; font-size: 36rpx; color: #FFFFFF; } } </style>