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

ops/2024/12/19 20:16:24/

效果图

数据展示,可自行搭配

html 

<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 

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

需求可自行修改


http://www.ppmy.cn/ops/143279.html

相关文章

软件包git没有可安装候选

‌在Ubuntu系统中安装git时出现“软件包git没有可安装候选”的错误&#xff0c;通常是因为软件源列表未更新或软件包信息不完整。‌ 解决方法 ‌更新软件源‌&#xff1a;首先&#xff0c;确保你的系统软件源是最新的。可以通过以下命令更新软件源&#xff1a; sudo apt-get u…

微积分复习笔记 Calculus Volume 2 - 4.2 Direction Fields and Numerical Methods

4.2 Direction Fields and Numerical Methods - Calculus Volume 2 | OpenStax

回型矩阵:JAVA

解题思路&#xff1a; 通过定义四条边界&#xff1b;top,left,right,bottom,来循环&#xff0c;当top>bottom&&left>right的时候循环终止 循环结束的条件&#xff1a; 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述…

Spring(二)AOP、切入点表达式、AspecJ常用通知的类型、Spring中的事务管理

文章目录 一、AOP 1、定义 2、特点 3、AOP中的术语&#xff08;连接点、切入点、通知、目标、代理&#xff09; 4、配置 &#xff08;1&#xff09;下载AOP相关jar &#xff08;2&#xff09;启动AspectJ支持 5、使用 6、切入点表达式 7、AspecJ常用通知的类型 &…

二、windows环境下vscode使用wsl教程

本篇文件介绍了在windows系统使用vscode如何连接使用wsl&#xff0c;方便wsl在vscode进行开发。 1、插件安装 双击桌面vscode&#xff0c;按快捷键CtrlShiftX打开插件市场&#xff0c;搜索【WSL】点击安装即可。 2、开启WSL的linux子系统 点击左下方图标【Open a Remote Win…

linux 免密远程到多个服务器如何实现

要实现从主机 192.168.1.2 免密远程连接到 192.168.1.3 和 192.168.1.4&#xff0c;您可以使用 SSH 密钥对进行身份验证。以下是详细的步骤&#xff1a; 步骤 1&#xff1a;生成 SSH 密钥对 在 192.168.1.2 主机上生成 SSH 密钥对&#xff08;如果您尚未生成过&#xff09;&a…

深入了解AI编程工具Cursor:智能编程的未来

随着人工智能技术的不断发展&#xff0c;AI 编程工具的出现极大地提升了开发者的编程效率和代码质量。**Cursor** 是其中一款备受关注的 AI 编程工具&#xff0c;它通过智能代码补全、错误提示、代码优化和自动生成等功能&#xff0c;为开发者提供了前所未有的编程体验。在本文…

【MySQL】优雅的使用MySQL实现分布式锁

MySQL实现分布式锁 引言二、基于唯一索引2.1、实现思路2.2、代码实现2.3、 测试代码2.4、小结 三、基于悲观锁3.1 、实现思路3.2、代码实现3.3、测试代码3.4、小结 四、基于乐观锁4.1 、实现思路4.2 、代码实现4.3 、测试代码4.4、小结 总结 引言 在文章《Redis实现分布式锁详…