效果图
代码:
javascript
<view class="popups popupsB">
<view class="appreciatePrice">
<view class="appreciatePriceTitle">
赞赏金额
</view>
<view class="appreciatePriceInput flex ac">
￥<input type="text" disabled class="appreciatePriceInputs" />
</view>
<view class="minAppreciatePrice">
最低赞赏￥
</view>
</view>
<view class="">
<view class="keyboard flex ac jsb">
<view class="keyboardLeft">
<!-- 19数字 -->
<view class="flex flexwrap">
<view class="keyboardLeftNumber flex jc ac" v-for="(item,index) in keyboard"
:key="index">
{{item}}
</view>
</view>
<!-- 0和点的按键 -->
<view class="keyboardLeftZooDrop flex jsb ac">
<view class="keyboardLeftZoo flex jc ac">
0
</view>
<view class="keyboardLeftDrop flex jc ac">
.
</view>
</view>
</view>
<!-- 右边确定和删除 -->
<view class="keyboardRight">
<view class="keyboardRightDel flex jc ac">
<u-icon name="close" color="#232323" size="20"></u-icon>
</view>
<view class="keyboardRightConfirm flex jc ac">
确定
</view>
</view>
</view>
<view class="liness">
</view>
</view>
</view>css
css
.popups {
height: 55vh;
padding: 0rpx 30rpx 40rpx 30rpx;
box-sizing: border-box;
}
.popupsB {
padding: 0 !important;
display: flex;
flex-direction: column;
justify-content: space-between;
.appreciatePrice {
padding: 30rpx;
box-sizing: border-box;
.appreciatePriceTitle {
font-size: 24rpx;
// padding-left: 10rpx;
// box-sizing: border-box;
}
.appreciatePriceInput {
padding: 30rpx 0rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #f5f5f5;
font-size: 50rpx;
font-weight: bold;
.appreciatePriceInputs {
margin-left: 10rpx;
}
}
.minAppreciatePrice {
color: #999;
margin-top: 20rpx;
font-size: 24rpx;
}
}
}
.keyboard {
padding: 20rpx;
box-sizing: border-box;
background: #f5f5f5;
border-radius: 8rpx;
.keyboardLeft {
width: 480rpx;
height: 380rpx;
// background: red;
.keyboardLeftNumber {
width: 146.66rpx;
height: 80rpx;
background: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 8rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.keyboardLeftNumber:nth-child(3n+3) {
margin-right: 0 !important;
}
.keyboardLeftZooDrop {
.keyboardLeftZoo {
width: 313.33rpx;
background: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 8rpx;
height: 80rpx;
}
.keyboardLeftDrop {
width: 146.66rpx;
background: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 8rpx;
height: 80rpx;
}
}
}
.keyboardRight {
width: 150rpx;
height: 380rpx;
// background: blue;
.keyboardRightDel {
width: 146.66rpx;
background: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 8rpx;
height: 80rpx;
}
.keyboardRightConfirm {
width: 146.66rpx;
background: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 8rpx;
height: 272rpx;
background: #4ac163;
margin-top: 20rpx;
color: #fff;
}
.keyboardRightConfirmNo {
opacity: 0.1;
}
}
}一些公共样式
css
.flex{
display: flex;
}
.jc{
justify-content: center;
}
.ac{
align-items: center;
}
.w100h100{
width: 100%;
height: 100%;
}
.jsb{
justify-content: space-between;
}
.flexwrap{
flex-wrap: wrap;
}
.me-text-beyond-multi2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.je{
justify-content: flex-end;
}
.jsa{
justify-content: space-around;
}js
css
keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9],并未做任何事件，如需请自行添加。