当前位置: 首页 > news >正文

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 参数&#xff1a;-n&#xff1a;显示行号-s&#xff1a;压缩连续的空行&#xff0c;只显示一个空行2.chattr 改变文件属性 语法&#xff1a;chattr [-RV] [/-/<属性>][文件或目录] 属性&#xff1a;a&#xff1a;让文件或目录仅供附加用途i&#xff1a;不得任意更…...

opencv-python图像增强一:传统图像去噪方法整理

一、简介&#xff1a; 在数字图像处理领域&#xff0c;噪声一直是影响图像质量的重要因素。无论是拍摄过程中的环境干扰&#xff0c;还是传输过程中的信号失真&#xff0c;噪声都可能导致图像模糊、细节丢失&#xff0c;甚至影响后续的图像分析和应用。为了提高图像的视觉效果…...

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中类的构造方法的描述&#xff0c;正确的是&#xff08;&#xff09; A.构造方法的返回类型为void B.可以定义一个类而在代码中不写构造方法。 C.在同一个类中定义的重载构造方法不可以相互调用。 D.子类不允许调用父类的构造方法。 正确答案…...

C# TreeView

添加 TreeView 控件&#xff1a;定义节点&#xff1a;添加节点&#xff1a;设置节点属性&#xff1a;处理节点事件&#xff1a;自定义节点绘制&#xff1a;数据绑定&#xff1a;节点选择&#xff1a;节点展开和折叠&#xff1a;搜索和过滤&#xff1a;示例代码总结 C# 中的 Tre…...

通过xshell使用密钥连接阿里云服务器

目录 步骤1&#xff1a;创建密钥对 步骤2&#xff1a;连接服务器 步骤3&#xff1a;连接服务器 连接阿里云服务器有几种方式&#xff0c;例如有密码进行连接&#xff0c;但是密码连接安全风险较大&#xff0c;所以我们选择密钥方式进行连接。操作简单且安全性高 步骤1&…...

<数据集>路面坑洼识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;681张 标注数量(xml文件个数)&#xff1a;681 标注数量(txt文件个数)&#xff1a;681 标注类别数&#xff1a;1 标注类别名称&#xff1a;[pothole] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对类…...

几个常用脚本

系统初始化 #!/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&#xff08;Google Test&#xff09;是Google开发的一个开源的C测试框架&#xff0c;它提供了多种宏来支持不同类型的测试。其中&#xff0c;TEST、TEST_F和TEST_P是三个常用的宏&#xff0c;它们各自有不同的用途和特性。以下是它们之间的主要区别&#xff1a; TEST 用…...

VS2022如何调出输出窗口,并在输出窗口打印日志

在输出窗口打印 System.Diagnostics.Debug.WriteLine("这是一行自定义的输出。Debug.WriteLine");System.Diagnostics.Debug.Write("这是第二行自定义的输出&#xff0c;Debug.Write");System.Diagnostics.Debug.WriteLine("换行");System.Diagn…...

【全国大学生电子设计竞赛】2021年I题

&#x1f970;&#x1f970;全国大学生电子设计大赛学习资料专栏已开启&#xff0c;限时免费&#xff0c;速速收藏~...

【项目】基于Vue2+Router+Vant 前端面经项目

环境配置 Vue脚手架的创建 在终端中打开输入 vue create 项目包名 -m npm注意⚠️&#xff1a;项目名称不再允许包含大写字母。 选择第三项 3.选择要安装的模块 从上到下的功能模块&#xff1a; Babel - ES&#xff1a;降级处理Router-Vue&#xff1a;路由插件CSS预处理器E…...

【论文阅读】YOLOv10: Real-Time End-to-End Object Detection

题目&#xff1a;YOLOv10: Real-Time End-to-End Object Detection 作者&#xff1a;Ao Wang Hui Chen∗ Lihao Liu Kai Chen Zijia Lin Jungong Han Guiguang Ding∗ 清华大学的 motivation: 作者觉得YOLO系列的NMS和某些结构非常的耗时&#xff0c;提出NMS-free和一些列高效…...

计算资源消耗

计算资源消耗 计算资源的消耗分成&#xff1a; 模型参数本身的存储。模型参数的梯度以及梯度momentum的存储。token的传播过程 例如以llama3-7b为例&#xff1a; 模型参数存储&#xff1a; 模型参数量 * fp32 例如llama3-70b为例&#xff0c;7 * 10^9 * 4 模型参数的梯度以…...

企业微信推送消息的Java实现教程

在这篇教程中&#xff0c;我们将介绍如何使用Java实现企业微信的消息推送功能&#xff0c;特别是在完成任务后&#xff0c;将结果信息通过企业微信推送给指定的用户。我们将基于您提供的代码进行说明。 1. 环境准备 1.1 依赖库 在开始编写代码之前&#xff0c;确保您的项目中…...

强化学习之Actor-Critic算法(基于值函数和策略的结合)——以CartPole环境为例

0.简介 DQN算法作为基于值函数的方法代表&#xff0c;基于值函数的方法只学习一个价值函数。REINFORCE算法作为基于策略的方法代表&#xff0c;基于策略的方法只学习一个策略函数。Actor-Critic算法则结合了两种学习方法&#xff0c;其本质是基于策略的方法&#xff0c;因为其目…...

Linux学习记录(五)-------三类读写函数

文章目录 三种读写函数1.行缓存2.无缓存3.全缓存4.fgets和fputs5.gets和puts 三种读写函数 1.行缓存 遇到新行&#xff08;\n&#xff09;,或者写满缓存时&#xff0c;即调用系统函数 读&#xff1a;fgets,gets,printf,fprintf,sprintf写&#xff1a;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脚…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...