【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式

 

我原先是用的单选,但是单选并不支持选中后,再次点击取消选中;所以我改成了多选,然后改变多选样式,让他看起来像单选 

 在所在使用的页面上修改样式即可

<uni-data-checkbox multiple selectedColor='#2979ff' selectedTextColor="#000" v-model="agree"
					:localdata="agreedata">
					<label>
						<checkbox />
						<view>我已阅读并同意
							<text class="col-g" @click="handleXI">《用户协议》</text>
							<text class="col-g" @click="handleYX">《隐私协议》</text>
						</view>
					</label>
				</uni-data-checkbox>
<style lang="scss">
   //修改多选框的样式为单选样式
			.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner .checkbox__inner-icon {
				opacity: 1;
				background-color: #2979ff !important;
			}

			.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
				width: 8px !important;
				height: 8px !important;
				border-radius: 10px !important;

				top: 3px !important;
				left: 3px !important;
				height: 8px;
				width: 4px;
				border: 0px solid #2979ff !important;
			}

			.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
				border-radius: 8px !important;
				display: flex;
				flex-shrink: 0;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 16px;
				height: 16px;
				border: 1px solid #DCDFE6;
				border-radius: 16px;
				background-color: #fff !important;
				z-index: 1;
			}
</style>

2、修改checkbox的样式

 

<checkbox-group>
					<label style="display: flex;">
						<checkbox value="agree" class="checkbox" />
						<view>我已阅读并同意
							<text class="col-g" @click="handleYH">《用户协议》</text>及
							<text class="col-g" @click="handleYS">《隐私协议》</text>
						</view>
					</label>
				</checkbox-group>

 样式必须得写在app.vue中

.login_container {
		//自定义checkbox的样式( 元素使用的时候就是使用类名:checkbox )
		checkbox.checkbox .wx-checkbox-input,
		checkbox.checkbox .uni-checkbox-input {
			border-radius: 8px !important;
			display: flex;
			flex-shrink: 0;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 16px;
			height: 16px;
			border: 1px solid #DCDFE6;
			border-radius: 16px;
			background-color: #fff !important;
			z-index: 1;
		}

		// 选中后的 对勾样式 
		checkbox.checkbox .uni-checkbox-input-checked::before,
		checkbox.checkbox .wx-checkbox-input-checked::before {
			width: 8px;
			height: 8px;
			border-radius: 10px !important;
			line-height: 20px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			background: #2979ff;
			transform: translate(-70%, -50%) scale(1);
			-webkit-transform: translate(-70%, -50%) scale(1);
			position: absolute;
			top: 7px !important;
			left: 9px !important;
			border: 0px solid #2979ff !important;
		}
	}

3、uni-row的gutter无效

gutter的单位不是px是rpx,所以在设置的时候,要设置大一些

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/63918.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

小白到运维工程师自学之路 第六十七集(Harbor企业镜像仓库部署)

一、概述 Harbor 是 VMware 公司开源的企业级 Docker Registry 项目&#xff0c;其目标是帮助用户迅速搭建一个企业级的 Docker Registry 仓库服务。它以Docker公司开源的Registry为基础&#xff0c;提供了管理 UI。基于角色的访问控制(Role Based AccessControl)、AD/LDAP集成…

Java课题笔记~ AspectJ 对 AOP 的实现(掌握)

AspectJ 对 AOP 的实现(掌握) 对于 AOP 这种编程思想&#xff0c;很多框架都进行了实现。Spring 就是其中之一&#xff0c;可以完成面向切面编程。然而&#xff0c;AspectJ 也实现了 AOP 的功能&#xff0c;且其实现方式更为简捷&#xff0c;使用更为方便&#xff0c;而且还支…

vue中transition动画的使用

1.vue文件 说明&#xff1a;加name属性 <transition name"sort"><div class"sort" v-show"show"><div class"all-sort-list2" click"goSearch"><div class"item bo" v-for"(item1, in…

【深入探索Docker】:开启容器化时代的技术奇迹

深入探索Docker 深入探索Docker&#xff1a;开启容器化时代的技术奇迹前言1. 容器化&#xff1a;实现快速部署和可移植性2. 虚拟化&#xff1a;提高安全性和可靠性3. 映像&#xff1a;打包应用及依赖项的模板4. 网络管理&#xff1a;连接容器和主机5. 持久化数据&#xff1a;保…

Packet Tracer - IPv4 和 IPv6 编址故障排除

Packet Tracer - IPv4 和 IPv6 编址故障排除 地址分配表 设备 接口 IPv4 地址 子网掩码 默认网关 IPv6 地址/前缀 R1 G0/0 10.10.1.1 255.255.255.0 N/A G0/1 192.168.0.1 255.255.255.0 N/A 2001:DB8:1:1::1/64 N/A G0/2 2001:DB8:1:2::1/64 N/A S0/0/0 …

分布式 - 服务器Nginx:一小时入门系列之HTTP反向代理

文章目录 1. 正向代理和反向代理2. 配置代理服务3. proxy_pass 命令解析4. 设置代理请求headers 1. 正向代理和反向代理 正向代理是客户端通过代理服务器访问互联网资源的方式。在这种情况下&#xff0c;客户端向代理服务器发送请求&#xff0c;代理服务器再向互联网上的服务器…

【GitOps系列】如何实施自动化渐进式交付?

文章目录 前言自动渐进式交付概述自动渐进式交付准备创建生产环境创建 AnalysisTemplate访问生产环境安装Prometheus配置 Ingress-Nginx 和 ServiceMonitor验证 Ingress-Nginx 指标 自动渐进式交付实战自动渐进式交付成功自动渐进式交付失败 结语 前言 在实施金丝雀发布的过程中…

webpack性能优化

文章目录 1. 性能优化-分包2. 动态导入3. 自定义分包4. Prefetch和Preload5. CDN加载配置6. CSS的提取7. terser压缩7.1 Terser在webpack中配置7.2 css压缩 8. Tree Shaking 消除未使用的代码8.1 usedExports 配置8.2 sideEffects配置8.3 CSS实现Tree Shaking 9. Scope Hoistin…

AcWing 93:递归实现组合型枚举 ← DFS

【题目来源】https://www.acwing.com/problem/content/95/【题目描述】 从 1∼n 这 n 个整数中随机选出 m 个&#xff0c;输出所有可能的选择方案。【输入格式】 两个整数 n&#xff0c;m&#xff0c;在同一行用空格隔开。【输出格式】 按照从小到大的顺序输出所有方案&#xf…

内网横向移动—资源约束委派

内网横向移动—资源约束委派 1. 资源约束委派1.1. 基于资源的约束委派的优势1.2. 约束性委派和基于资源的约束性委派配置的差别1.3. 利用条件1.3.1. 什么用户能够修改msDS-AllowedToActOnBehalfOfOtherIdentity属性1.3.2. 将机器加入域的域用户 2. 案例操作2.1. 获取目标信息2.…

flink如何监听kafka主题配置变更

背景&#xff1a; 从前一篇文章我们知道flink消费kafka主题时是采用的手动assign指定分区的方式&#xff0c;这种消费方式是不处理主题的rebalance操作的&#xff0c;也就是消费者组中即使有消费者退出或者进入也是不会触发消费者所消费的分区的&#xff0c;那么疑问就来了&am…

MySQL建表和增添改查

1.创建一个名为mydb的数据库 mysql> show database mydb; 查询 mysql> show database mydb; 2.创建一个学生信息表 mysql> create table mydb.student_informtion( -> student_id int UNSIGNED NOT NULL PRIMARY KEY, //非空&#xff08;不允许为空&#xff0…

【工具使用】STM32CubeMX-基础定时器配置

一、概述 无论是新手还是大佬&#xff0c;基于STM32单片机的开发&#xff0c;使用STM32CubeMX都是可以极大提升开发效率的&#xff0c;并且其界面化的开发&#xff0c;也大大降低了新手对STM32单片机的开发门槛。     本文主要讲述STM32芯片的定时器的配置及其相关知识。 …

棒球网络宣传平台建设规划·野球1号位

棒球网络宣传平台建设规划 棒球网络宣传平台简介棒球网络宣传平台是什么&#xff1f; 棒球网络宣传平台的目标是什么&#xff1f; 棒球网络宣传平台的目标是提高公众对棒球的认知度、促进棒球运动的发展。平台致力于提供优质的棒球资讯、赛事直播、教练和球员的个人专访、棒球…

03微服务到底是什么

一句话导读 微服务是一种架构模式&#xff0c;英文翻译 microservice&#xff0c;微服务架构的核心理念是将大型、复杂的单体应用拆分成更小的、自治的组件&#xff0c;每个组件即为一个微服务 目录 一句话导读 一、微服务的定义 二、微服务的特点 1.独立性 2.松耦合 3.可伸…

2023牛客暑期多校训练营7-c-Beautiful Sequence

思路&#xff1a; &#xff0c;则有&#xff0c;也就是说只要知道A1就可以求任意A。由于A是升序排列&#xff0c;所以对于任意&#xff0c;二进制所包含1的最高位第k位来说&#xff0c;表明与第k位相反&#xff0c;要大一些&#xff0c;所以它的第k位为1&#xff0c;的第k位为…

Qt tabwidget中插入widget

一、简单介绍 QT->tabWidget&#xff1a;标签页面。 在ui中通过工具栏自定义拉取控件&#xff0c;其中tabwidget可以可以创建多个标签页面&#xff0c;默认生成两个tab_widget(tab_1/tab_2)。并且可以在ui中右键自由添加控制删除等标签页&#xff0c;切换标签页就是切换widg…

一文学会git常用命令和使用指南

文章目录 0. 前言1.分支分类和管理1. 分支分类规范&#xff1a;2. 最佳实践3. 分支命名规范示例&#xff1a;4. 分支管理方法&#xff1a; 2. commit 注释规范1. 提交注释结构&#xff1a;2. 提交注释的准则&#xff1a; 3. git 常用命令1. git pull 核心用法2. git push 命令1…

【LeetCode】24.两两交换链表中的节点

题目 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#xff1a…

K8s持久化存储(nfs网络存储)

数据卷 emptydir&#xff0c;是本地存储&#xff0c;pod重启&#xff0c;数据就不存在了&#xff0c;需要对数据持久化存储 1.nfs&#xff0c;网络存储 &#xff0c;pod重启&#xff0c;数据还存在的