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

需求可自行修改

相关推荐
bmy-happy2 小时前
实验2 天气预报
微信小程序·小程序
江湖行骗老中医7 小时前
uniapp 引入使用u-view 完整步骤,u-view 样式不生效
uni-app
雪芽蓝域zzs7 小时前
uniapp 页面favicon.ico文件不存在提示404问题解决
uni-app
一嘴一个橘子7 小时前
uniapp 顶部tab + 占满剩余高度的内容区域swiper
javascript·uni-app
睡美人的小仙女1277 小时前
在 UniApp 中,实现下拉刷新
uni-app
兰亭妙微10 小时前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
青青子衿越11 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
iOS阿玮11 小时前
江湖传闻谷歌比苹果严格多了,那么到底有多狠?
uni-app·app·apple
乔公子搬砖11 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
!win !16 小时前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app