uniapp 微信小程序 金额展示套餐

html

<view class="gradelist">
<view class="flex jsb ac">
<text class="gradelisTitle">喜欢作者</text>
<!-- <text class="gradelisOtherPrice" @click="otherPiceButton(1)">其他金额</text> -->
</view>
<view class="gradelis flex flexwrap">
<view class="gradeli flex jc ac" v-for="(item,index) in rewardPriceList" :key="index"
@click.stop="fun_reward(item)" >
￥{{item}}</view>
</view>
</view>

js

//打赏
async fun_reward(price) {
//里面写逻辑
},

css

.gradelist {
padding: 30rpx;
background: #f5f5f5;
border-radius: 8rpx;
box-sizing: border-box;
border-radius: 12rpx;
margin-top: 30rpx;

.gradelisTitle {
color: #999;
font-size: 28rpx;

}

.gradelisOtherPrice {
color: steelblue;
font-size: 28rpx;

}

.gradelis {
width: 100%;
margin-top: 30rpx;
}

.gradeli {
width: 31%;
height: 100rpx;
background: #fff;
margin-right: 3%;
border-radius: 8rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
font-weight: bold;
}

.gradeli:nth-child(3n+3) {
margin-right: 0 !important;
}

}

原文地址：https://blog.csdn.net/zjqjy0911/article/details/145200521

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！