利用transform和border 创造简易图标,以适应uniapp中多字体大小情况下的符号问题

news2024/9/30 9:44:37

heml:

<text class="icon-check"></text>

 css:

	.icon-check {
		border: 2px solid black;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		transform: rotate(45deg);
	}

实际上就是声明一个带边框的div 将其中相邻的两边去掉再通过设置两边的边长差来改变夹角,比较适合用来显示对钩符号。

因为uni-app的page-meta再加上插件postcss-px-to-viewport插件可以将页面中的px/rpx进行大小动态设置,此处的px就可以随着全局变量中的字体大小一起进行变化,当想设计一个大小不随着全局变量变化的符号时将其换成rpx即可(postcss-px-to-viewport配置文件中可以生命将px进行转换还是将rpx进行转换)。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

抖音小店爆款制造指南:打造抖音爆款商品的八大技巧

抖音小店作为一种电商模式&#xff0c;通过短视频形式展示商品&#xff0c;吸引用户购买。在抖音平台上&#xff0c;打造爆款商品是每个抖音小店主的梦想。以下是四川不若与众整理的一些抖音小店如何打造爆款商品的技巧。 1. 产品选择&#xff1a;选择适合抖音平台的产品非常重…

mysql数据库,字符串使用双引号““导致报错,使用单引号‘‘不报错,Unknown column ‘user-test‘ in ‘where clause‘

文章目录 一、完整报错二、报错数据三、报错原因四、解决方式1、更改执行sql2、更改sql数据校验模式&#xff08;改为默认校验&#xff09; 一、完整报错 > 1054 - Unknown column user-test in where clause二、报错数据 SELECT * FROM config_info WHERE config_info.da…

肖sir__设计测试用例方法之正交表08_(黑盒测试)

设计测试用例方法之正交 一、正交表定义 正交试验设计法&#xff0c;是从大量的试验点中挑选出适量的、有代表性的点&#xff0c;应用依据迦罗瓦理论导出的“正交表”&#xff0c;合理的安排试验的一种科学的试验设计方法。 二、 正交常用的术语 指标&#xff1a;通常把判断试验…

Mongodb 安装脚本(附服务器自启动)

shell脚本 #!/bin/bash #mail:xuelanchnet.com #function:auto install mongodb [ $(id -u) ! "0" ] && echo "Error: You must be root to run this script" && exit 1 logfile"/var/log/mongod_install.log" softdir"/s…

索尼 toio™ 应用创意开发征文|小巧机器,大无限,探索奇妙世界

文章目录 前言微型机器人的未来&#xff1a;toio™小机器人简介toio™小机器人&#xff1a;创新功能一览toio™小机器人&#xff1a;多领域的变革者toio™小机器人贪吃蛇游戏代码实现写在最后 前言 当我们谈到现代科技的创新时&#xff0c;往往会联想到复杂的机器和高级的编程…

腾讯正式发布新混元大模型:规模超千亿,预训练语料超2万亿

2023腾讯全球数字生态大会于9月7日举办&#xff0c;腾讯公司在此正式发布了其新的混元大模型。该模型参数规模超过千亿&#xff0c;预训练语料超过2万亿tokens&#xff0c;并已成功测试于腾讯云、腾讯广告、微信搜一搜等多个内部业务和产品中。 这一混元大模型不仅能服务于腾讯…

基于SSM的社区文化宣传网站

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

数据向好,分析师预测美联储GDP或将翻一番?

KlipC报道&#xff1a;最新公布的一些数据显示&#xff0c;美国经济看起来十分稳健&#xff0c;华尔街人士认为&#xff0c;这可能促使美联储本月公布的将2023年经济增长预测提高一倍&#xff0c;同时下调明年降息的预期幅度。 KlipC的合伙人Andi D表示&#xff1a;“在从消费者…

基于 Transformation-Equivariant 的自动驾驶 3D 目标检测

论文地址&#xff1a;https://arxiv.org/abs/2211.11962 论文代码&#xff1a;https://github.com/hailanyi/TED 论文背景 三维场景中的物体分布有不同的方向。普通探测器不明确地模拟旋转和反射变换的变化。需要大的网络和广泛的数据增强来进行鲁棒检测。 equivariant netw…

【高等数学重点题型篇】——不定积分

文章目录 一、换元积分法二、分部积分法三、两类特殊函数的不定积分——有理函数与有理三角函数四、分段函数的积分五、综合型不定积分六、总结 一、换元积分法 分子分母同时除以 x 2 x\ ^2 x 2。 当根号下内容无法用第一类换元积分&#xff08;凑微分法&#xff09;和第二类换…

SQL注入案例

目录 一、简介 二、案例 1.发现注入点 2.寻找注入类型 3.寻找字段数 4.将传参值设为超出数据量的大值&#xff0c;联合查询找到回显位置 5.找到数据库 6.寻找库中的表 7.寻找表中列 8.查看表中数据 附&#xff1a;SQLMap注入 1.输入指令查数据库 2.输入指令查表 3…

利用无头浏览器爬取JavaScript生成的网页

在进行网页爬取时&#xff0c;经常会遇到 JavaScript 生成的网页。由于 JavaScript 的动态渲染特性&#xff0c;传统的爬虫工具往往无法获取完整的页面内容。这时就需要使用无头浏览器来爬取JavaScript生成的网页&#xff0c;以获取所需的数据。 JavaScript生成的网页之所以无法…

华阳半年报!汽车业务「冷热不均」,HUD所属子公司利润大跌

整车智能化赛道竞争日趋白热化。 本周&#xff0c;华阳集团发布2023年度半年报&#xff0c;今年1-6月实现营业收入28.68亿元&#xff0c;较上年同期增长15.39%&#xff0c;实现归属于上市公司股东的净利润1.82亿元&#xff0c;较上年同期增长11.64%。 其中&#xff0c;汽车电子…

下单时如何保证数据一致性?

原创 哪吒 哪吒编程 2023-09-07 08:03 发表于辽宁 收录于合集#Redis11个 &#xff08;给哪吒编程加星标&#xff0c;提高Java技能&#xff09; 大家好&#xff0c;我是哪吒。 在前几篇文章中&#xff0c;提到了Redis实现排行榜、Redis数据缓存策略&#xff0c;让我们对Redis…

如何提高抖音直播间的人气(从15个方面为你解答)

抖音直播是一项非常受欢迎的内容创作方式&#xff0c;但是在直播过程中若是没有足够的人气&#xff0c;会让主播感到非常沮丧。如何才能提高抖音直播间的人气呢&#xff1f;本文将从15个方面为你一一解答。 一、打造独特个性的直播形象 在抖音直播中&#xff0c;每一个主播都有…

学校水电能源管理系统

随着社会的发展和经济的增长&#xff0c;学校规模逐渐扩大&#xff0c;能源消耗也不断增加&#xff0c;因此学校水电能源管理系统成为了当今智能化校园建设的重要组成部分。学校水电能源管理系统通过科技手段&#xff0c;实现对学校水电资源的全面监控和管理&#xff0c;不仅能…

OCR训练部署文档

Cuda安装 wget https://developer.download.nvidia.com/compute/cuda/11.6.0/local_installers/cuda_11.6.0_510.39.01_linux.run sh cuda_11.6.0_510.39.01_linux.run#可能会报错&#xff0c;查看/var/log/nvidia-installer.log &#xff0c;kill -9 [ID]可以解决vim ~/.bash…

FAA批准uAvionix C波段超视距飞行(BVLOS)豁免和Vantis网络

美国联邦航空管理局(FAA)于2023年9月6日在拉斯维加斯的商业无人机博览会上宣布批准uAvionix公司的豁免申请&#xff0c;允许该公司在北达科他州通过使用Vantis指挥与控制系统(C2)和检测与避障(DAA)网络&#xff0c;无需载人即可进行超视距(BVLOS)的无人机系统(UAS)操作。具体而…

视频监控/安防监控/视频云存储EasyCVR平台设备分配模块升级详解

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台支持将部署在监控现场的前端设备进行统一集中接入&#xff0c;可兼容多协议、多类型设备&#xff0c;管理员可选择任意一路或多路视频实时观看&#xff0c;视频画面支持单画面、多画面显示&#xff0c;视频窗口数量有1、4…

Origin绘制彩色光谱图

成果图 1、双击线条打开如下窗口 2、选择“图案”-》颜色-》按点-》映射-》Wavelength 3、选择颜色映射 4、单击填充-》选择加载调色板-》Rainbow-》确定 5、单击级别&#xff0c;设置成从370到780&#xff0c;右侧增量选择2&#xff08;越小&#xff0c;颜色渐变越细腻&am…