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

server/2024/12/23 20:52:13/

效果图

数据展示,可自行搭配

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/server/152579.html

相关文章

windows11 环境 paddleOCR 环境配置

一、系统环境: 操作系统:Windows 11 专业版 显卡:RTX 4080 CUDA:cuda_12.6.2_560.94_windows.exe、cudnn-windows-x86_64-8.9.7.29_cuda12-archive python: 3.12.8 二、配置过程 1.设置python国内源 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/…

Docker dockerfile镜像编码 centos7

一、 大多数docker基础镜像使用locale查看编码&#xff0c;发现默认编码都是POSIX&#xff0c;这会导致中文乱码。 解决方法如下: 二、首先使用locale -a查看容器所有语言环境 三、dockerfile中加入以下参数重新生成镜像   ENV LANGen_US.UTF-8   ENV TZAsia/Shanghai  …

解决新安装CentOS 7系统mirrorlist.centos.org can‘t resolve问题

原因 mirrorlist.centos.org yum源用不了 解决办法就是 # cd /etc/yum.repos.d/ # mv CentOS-Base.repo CentOS-Base.repo_bak # vim CentOS-Base.repoCentOS系统操作 # mv /etc/yum.repos.d/*.repo /etc/yum.repos.d/*.repo_bak # curl -o /etc/yum.repos.d/CentOS-Linux-Ba…

网络安全的攻防战争

当前&#xff0c;来自Web的各种攻击已经成为全球安全领域最大的挑战&#xff0c;并且有愈演愈烈之势。目前的难点在于&#xff0c;很多Web威胁的思路已经有别于传统&#xff0c;隐蔽、牟利、产业化已经成为了此类威胁的特点。对广大企业用户来讲&#xff0c;Web威胁令人无法忽视…

ArkUI性能优化(0)—DevEco Profiler调优工具

1章节目录 注意,目前profiler调优只支持真机。 2 工具介绍 无需关注数据采集细节,分析启动、卡顿、耗时、内存、能耗等场景问题 2.1 会话区 根据不同的场景,选择不同的场景分析任务类型 2.2数据区

Hive其一,简介、体系结构和内嵌模式、本地模式的安装

目录 一、Hive简介 二、体系结构 三、安装 1、内嵌模式 2、测试内嵌模式 3、本地模式--最常使用的模式 一、Hive简介 Hive 是一个框架&#xff0c;可以通过编写sql的方式&#xff0c;自动的编译为MR任务的一个工具。 在这个世界上&#xff0c;会写SQL的人远远大于会写ja…

MLM: 掩码语言模型的预训练任务

MLM: 掩码语言模型的预训练任务 掩码语言模型&#xff08;Masked Language Model, MLM&#xff09;是一种用于训练语言模型的预训练任务&#xff0c;其核心目标是帮助模型理解和预测语言中的上下文关系。以下是对这一概念的详细说明&#xff1a; 基本定义&#xff1a; MLM是一…

使用 Copilot 增强创造力:Mighty Media 的卓越数字化之旅

欢迎来到《用Copilot发展你的业务》&#xff0c;这是您获取关于在中小企业中利用AI的可行见解的首选资源。在当今快速发展的科技环境中&#xff0c;保持领先需要创新、灵活性和合适的工具。总部位于西雅图的创意机构Mighty Media Studios就是这种方法的典范。 小而强大 Mighty…