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

需求可自行修改

相关推荐
流***陌2 小时前
宠物寄养美容小程序前端功能解析:贴心照料宠物的全流程支撑
小程序·宠物
小小王app小程序开发5 小时前
任务悬赏小程序深度细分分析:非技术视角下的运营逻辑拆解
大数据·小程序
2501_915918416 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
腾马科技13 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
用户9047066835716 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
郑叔敲代码17 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
乔冠宇18 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡18 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa18 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名21 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js