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

需求可自行修改

相关推荐
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
说私域9 天前
云零售新中枢:定制化“开源AI智能名片+S2B2C商城小程序”驱动的沉浸式触点进化论
人工智能·小程序·开源·零售
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
xw59 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝
!win !9 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝小程序
xw510 天前
抖音小程序支付错误码141211
uni-app·抖音小程序
好好的哦10 天前
抖音小程序支付错误码141211
小程序·uni-app
anyup10 天前
uni-app 应用隐私政策怎么写?一份模板+实用技巧送给你
前端·uni-app·cursor
橘子海全栈攻城狮10 天前
【源码+文档+调试讲解】基于web的运动健康小程序的设计与实现y196
java·开发语言·小程序·notepad++