uniapp——列表选择样式
案例

代码
<view class="list"><block v-for="(item,index) in 8" :key="index"><view class="item" @click="choosePackage(item)" :class="{'active':item == current}"><view class="i_money"><text class="i_num">2</text>元</view><view class="i_txt">套餐</view></view></block>
</view>
export default {components: {},data() {return {current: 0,};},watch: {},onLoad() {},onShow() {},methods: {choosePackage(item) {console.log(item);this.current = item}}
}
.list {margin-top: 44rpx;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 16px 14px; //行间距 列间距.item {background: #FFFFFF;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 1rpx solid #BCBCBC;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20rpx 0;.i_money {font-weight: bold;font-size: 22rpx;color: #292929;.i_num {font-size: 30rpx;}}.i_txt {font-size: 22rpx;color: #292929;margin-top: 5rpx;}}.active {background: #FFFDFA;border: 1rpx solid #FE8300;position: relative;}.active::before {content: '';position: absolute;right: 5rpx;top: 6rpx;width: 12rpx;height: 9rpx;border-right: 2rpx solid #FFFFFF;border-top: 2rpx solid #FFFFFF;transform: rotate(135deg);z-index: 2;}.active::after {content: '';position: absolute;right: 0;top: 0;border-radius: 0 6rpx 0 10rpx;width: 26rpx;height: 26rpx;background-color: #FE8300;}}
相关文章:
uniapp——列表选择样式
案例 代码 <view class"list"><block v-for"(item,index) in 8" :key"index"><view class"item" click"choosePackage(item)" :class"{active:item current}"><view class"i_money&q…...
解决客户访问超时1s问题
访问公网地址返回状态码499-CSDN博客 需求描述 客户访问公司公网服务,期望在1s内完成。他们在客户端设置了超时1s的配置,如果超过1s公司服务就会报错499,这是正常的请求返回。 这里是业务简易的连路图: 分析问题 目前这个服务通过公网的alb负载均衡到ecs,通过ecs再转发…...
Linux命令(基础面试可用,都是自己觉得平时使用多的)
1.cat 参数:-n:显示行号-s:压缩连续的空行,只显示一个空行2.chattr 改变文件属性 语法:chattr [-RV] [/-/<属性>][文件或目录] 属性:a:让文件或目录仅供附加用途i:不得任意更…...
opencv-python图像增强一:传统图像去噪方法整理
一、简介: 在数字图像处理领域,噪声一直是影响图像质量的重要因素。无论是拍摄过程中的环境干扰,还是传输过程中的信号失真,噪声都可能导致图像模糊、细节丢失,甚至影响后续的图像分析和应用。为了提高图像的视觉效果…...
Canal单机部署
目录 一、前期准备 1、配置binlog日志 2、配置MQ服务 二、搭建canal 1、下载安装包 2、部署canal-admin的UI管理界面 2-1、创建&解压admin 2-2、配置UI管理界面 2-3、初始化元数据库 2-4、启动Canal Admin 3、部署canal-server服务 3-1、创建&解压deployer…...
java,每日练习02
题目 选自牛客网 1.下列关于Java中类的构造方法的描述,正确的是() A.构造方法的返回类型为void B.可以定义一个类而在代码中不写构造方法。 C.在同一个类中定义的重载构造方法不可以相互调用。 D.子类不允许调用父类的构造方法。 正确答案…...
C# TreeView
添加 TreeView 控件:定义节点:添加节点:设置节点属性:处理节点事件:自定义节点绘制:数据绑定:节点选择:节点展开和折叠:搜索和过滤:示例代码总结 C# 中的 Tre…...
通过xshell使用密钥连接阿里云服务器
目录 步骤1:创建密钥对 步骤2:连接服务器 步骤3:连接服务器 连接阿里云服务器有几种方式,例如有密码进行连接,但是密码连接安全风险较大,所以我们选择密钥方式进行连接。操作简单且安全性高 步骤1&…...
<数据集>路面坑洼识别数据集<目标检测>
数据集格式:VOCYOLO格式 图片数量:681张 标注数量(xml文件个数):681 标注数量(txt文件个数):681 标注类别数:1 标注类别名称:[pothole] 使用标注工具:labelImg 标注规则:对类…...
几个常用脚本
系统初始化 #!/bin/bash # 定义颜色常量 RED\033[0;31m GREEN\033[0;32m NC\033[0m # No Color #功能菜单 menu() {clearecho "请选择要执行的操作:"echo "1. 检查网络"echo "2. 关闭防火墙和SELinux"echo "3. 替换YUM源"echo "…...
gtest中TEST和TEST_F和TEST_P的区别是什么
gtest(Google Test)是Google开发的一个开源的C测试框架,它提供了多种宏来支持不同类型的测试。其中,TEST、TEST_F和TEST_P是三个常用的宏,它们各自有不同的用途和特性。以下是它们之间的主要区别: TEST 用…...
VS2022如何调出输出窗口,并在输出窗口打印日志
在输出窗口打印 System.Diagnostics.Debug.WriteLine("这是一行自定义的输出。Debug.WriteLine");System.Diagnostics.Debug.Write("这是第二行自定义的输出,Debug.Write");System.Diagnostics.Debug.WriteLine("换行");System.Diagn…...
【全国大学生电子设计竞赛】2021年I题
🥰🥰全国大学生电子设计大赛学习资料专栏已开启,限时免费,速速收藏~...
【项目】基于Vue2+Router+Vant 前端面经项目
环境配置 Vue脚手架的创建 在终端中打开输入 vue create 项目包名 -m npm注意⚠️:项目名称不再允许包含大写字母。 选择第三项 3.选择要安装的模块 从上到下的功能模块: Babel - ES:降级处理Router-Vue:路由插件CSS预处理器E…...
【论文阅读】YOLOv10: Real-Time End-to-End Object Detection
题目:YOLOv10: Real-Time End-to-End Object Detection 作者:Ao Wang Hui Chen∗ Lihao Liu Kai Chen Zijia Lin Jungong Han Guiguang Ding∗ 清华大学的 motivation: 作者觉得YOLO系列的NMS和某些结构非常的耗时,提出NMS-free和一些列高效…...
计算资源消耗
计算资源消耗 计算资源的消耗分成: 模型参数本身的存储。模型参数的梯度以及梯度momentum的存储。token的传播过程 例如以llama3-7b为例: 模型参数存储: 模型参数量 * fp32 例如llama3-70b为例,7 * 10^9 * 4 模型参数的梯度以…...
企业微信推送消息的Java实现教程
在这篇教程中,我们将介绍如何使用Java实现企业微信的消息推送功能,特别是在完成任务后,将结果信息通过企业微信推送给指定的用户。我们将基于您提供的代码进行说明。 1. 环境准备 1.1 依赖库 在开始编写代码之前,确保您的项目中…...
强化学习之Actor-Critic算法(基于值函数和策略的结合)——以CartPole环境为例
0.简介 DQN算法作为基于值函数的方法代表,基于值函数的方法只学习一个价值函数。REINFORCE算法作为基于策略的方法代表,基于策略的方法只学习一个策略函数。Actor-Critic算法则结合了两种学习方法,其本质是基于策略的方法,因为其目…...
Linux学习记录(五)-------三类读写函数
文章目录 三种读写函数1.行缓存2.无缓存3.全缓存4.fgets和fputs5.gets和puts 三种读写函数 1.行缓存 遇到新行(\n),或者写满缓存时,即调用系统函数 读:fgets,gets,printf,fprintf,sprintf写:fputs,puts,scanf 2.无缓…...
2024年8月13日(lvs NAT脚本 RS脚本 ds脚本)
lvs-nat模式的优点配置简单,缺点是请求和响应都必须经过ds,容易称为性能瓶颈 希望有这样的模式,请求的时候使用input链进行负载均衡,响应的时候就不要经过ds,直接由rs响应给客户端 在nat模式的时候,请求vip,接收vip的响应 构想 请求vip,接受rip响应,这是不允许lvs-dr模式 NAT脚…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...
数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)
名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 原创笔记:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 上一篇:《数据结构第4章 数组和广义表》…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
SQL进阶之旅 Day 22:批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述(300字左右) 在数据库开发中,面对大量数据的处理任务时,单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”,深入探讨如何通过批量操作和游标技术提…...
