UniApp 微信零钱提现页面代码:实现银行卡切换、金额输入、余额显示
<template>
<view>
<!-- 顶部显示到账银行卡 -->
<view class='top'>
<text class='bank'>到账银行卡</text>
<text class='card'>**** **** **** 1234</text>
<text class='switch'>切换银行卡</text>
</view>
<!-- 中间是提现金额 -->
<view class='middle'>
<text class='title'>提现金额</text>
<view class='input-wrapper'>
<text class='symbol'>¥</text>
<input type='number' class='input' placeholder='0.00' />
</view>
<text class='balance'>当前余额:¥888.88</text>
<text class='all'>全部提现</text>
</view>
<!-- 下方是键盘输入提现金额 -->
<view class='keyboard-wrapper'>
<view class='keyboard-row'>
<text class='keyboard-btn'>1</text>
<text class='keyboard-btn'>2</text>
<text class='keyboard-btn'>3</text>
</view>
<view class='keyboard-row'>
<text class='keyboard-btn'>4</text>
<text class='keyboard-btn'>5</text>
<text class='keyboard-btn'>6</text>
</view>
<view class='keyboard-row'>
<text class='keyboard-btn'>7</text>
<text class='keyboard-btn'>8</text>
<text class='keyboard-btn'>9</text>
</view>
<view class='keyboard-row'>
<text class='keyboard-btn'></text>
<text class='keyboard-btn'>0</text>
<text class='keyboard-btn'>.</text>
</view>
</view>
</view>
</template>
<style>
/* 样式可以根据需要自行修改 */
.top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.bank {
font-size: 16px;
font-weight: bold;
}
.card {
font-size: 20px;
font-weight: bold;
}
.switch {
color: #007aff;
}
.middle {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}
.title {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.input-wrapper {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.symbol {
font-size: 24px;
margin-right: 10px;
}
.input {
font-size: 32px;
font-weight: bold;
border: none;
text-align: center;
width: 100%;
}
.balance {
font-size: 14px;
color: #999;
margin-bottom: 20px;
}
.all {
color: #007aff;
font-size: 16px;
font-weight: bold;
}
.keyboard-wrapper {
background-color: #f2f2f2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
.keyboard-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.keyboard-btn {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
padding: 12px 20px;
text-align: center;
width: calc(33.33% - 8px);
}
</style>
原文地址: http://www.cveoy.top/t/topic/oneH 著作权归作者所有。请勿转载和采集!