uniapp 微信小程序 均分数据展示

效果图

数据展示,可自行搭配

html

javascript 复制代码
<view class="num-wrapper">
			<view class="num-item" @click.stop="routerGo('跳转的地址')">
				<text class="num">¥{{ 要展示的数据 || 0}}</text>
				<view class="txt">余额</view>
			</view>
			<view class="num-item num-item-center" @click="routerGo('跳转的地址')">
				<text class="num">{{ 要展示的数据 || 0}}</text>
				<view class="txt">免费次数</view>
			</view>
			<view class="num-item" @click.stop="routerGo('跳转的地址')">
				<text class="num">{{ 要展示的数据 || 0}}</text>
				<view class="txt">优惠券</view>
			</view>
		</view>

css

css 复制代码
.num-wrapper {
		width: 690rpx;
		margin: auto;
		padding: 30rpx 20rpx;
		border-radius: 8rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		// padding: 0 47rpx;
		color: #036045;
		margin-top: 30rpx;
		font-family: 'MyFont';

		.num-item {
			width: 33.33%;
			text-align: center;

			&~.num-item {
				position: relative;

				&:before {
					content: '';
					position: absolute;
					width: 1rpx;
					height: 28rpx;
					top: 50%;
					margin-top: -14rpx;
					// background-color: rgba(255, 255, 255, 0.4);
					left: 0;
				}
			}

			.num {
				font-size: 42rpx;
				font-weight: bold;
			}

			.txt {
				margin-top: 8rpx;
				font-size: 26rpx;
				color: #6B7280;
				font-family: 'Roboto';
			}
		}

		.num-item-center {
			border-left: 1rpx solid #F3F4F6;
			border-right: 1rpx solid #F3F4F6;
		}
	}

需求可自行修改

相关推荐
阿奇__1 小时前
uniapp 类似popover气泡下拉框组件
前端·css·uni-app
泡壶好茶1 小时前
uniapp Android App集成支付宝的扫码组件mPaaS
uni-app·扫码组件mpaas
绍棠1 小时前
uniapp转app时,cover-view的坑
前端·javascript·uni-app
QZ_orz_freedom1 小时前
uni-app学习笔记01-项目初始化及相关文件
笔记·学习·uni-app
游戏开发爱好者82 小时前
Fiddler中文版使用指南 提升开发流程的一站式抓包与调试体验
android·ios·小程序·https·uni-app·iphone·webview
顽疲3 小时前
从零用java实现小红书springboot_vue_uniapp(15)评论和im添加图片
java·vue.js·spring boot·uni-app
七七软件开发5 小时前
二手交易 app 系统架构分析
java·python·小程序·系统架构·php
2501_9159214313 小时前
移动端 WebView 视频无法播放怎么办 媒体控件错误排查与修复指南
android·ios·小程序·https·uni-app·iphone·webview
雪芽蓝域zzs13 小时前
uniapp 富文本rich-text 文本首行缩进和图片居中
uni-app
cc蒲公英17 小时前
uniapp x swiper/image组件mode=“aspectFit“ 图片有的闪现后黑屏
java·前端·uni-app