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

html

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

javascript 复制代码
			//打赏
			async fun_reward(price) {
				//里面写逻辑
			},

css

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;
			}

		}
相关推荐
默魔4 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发16 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
shmily ....19 小时前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术21 小时前
uniapp制作一个个人页面
uni-app
小阿技术21 小时前
uniapp制作一个视频播放页面
uni-app
小周同学:1 天前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
難釋懷1 天前
微信小程序全局配置
微信小程序·小程序
Enti7c1 天前
微信小程序核心知识点速览
微信小程序·小程序
书山有路勤为径~1 天前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_424409192 天前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app