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

需求可自行修改

相关推荐
为风而战37 分钟前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Ama_tor38 分钟前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊10 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由10 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术12 小时前
uniapp简介
uni-app·hbuilder
一只一只妖12 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app