利用LESS简单实现网页一键换肤功能，爱星物联网页换肤原来如此简单

时间： 2024-06-23 来源：安信可科技

技术问答

选型帮助

研发客服

商务客服

上次说到LESS。

他是CSS，只是多了一点东西。

这个东西是什么呢？本次换肤就用上了。

以上就是LESS比CSS多出来的扩展。

这次我们用变量来实现快速换肤。

打开代码目录src - styles - global.less 文件，可以看到里面已经定义了一些变量。当然，根据自己需要也可以自己定义样式变量。

在main.js文件引入了这个全局变量

接下来，我们把页面的颜色换成变量值。

将颜色的属性值换成变量后，该属性即展现了变量配置的颜色。

如果我直接将主题色换成了绿色，效果会怎么样呢？

噔噔蹬蹬……

没想到吧？除了底部按钮，其他组件的颜色怎么也变成绿色了呢？

因为这个组件库的变量也调用了全局变量的。所以只要改了@theme-color变量的值，所有调用这个变量的值都会随之改变。

图十一

搞定！

总结

以上就是本期分享的内容，目的在于让大家快速适应新品方案的开发，更多资料可从我们官网上获取。

发送到邮箱 |
+1 赞 0
收藏
评论 0
| 转发至：

本文由中国颜值的半壁江山转载自安信可科技，原文标题为:爱星物联——网页换肤原来如此简单，本站所有转载文章系出于传递更多信息之目的，且明确注明来源，不希望被转载的媒体或个人可与我们联系，我们将立即进行删除处理。

全部评论（0）

暂无评论

安信可星闪模组专属ComboAT初体验：点对点连接实现透传，强抗干扰、超低延迟、超远通讯

Ai-BS21-32S是由深圳市安信可科技有限公司开发的蓝牙星闪模块。本文中安信可科技将为大家介绍星闪模组Ai-BS21-32S的使用方法。

设计经验发布时间 : 2024-04-10

【经验】如何将安信可科技的PB-03F模块升级DTM固件进行认证测试？

使用安信可科技的蓝牙模组PB-03F进行产品设计后期，部分产品需要连同PB-03F模块一同送去认证机构进行认证测试，此时需要给蓝牙模组PB-03F烧录特殊的测试固件DTM。本文指导如何给PB-03F模块烧写DTM固件。

设计经验发布时间 : 2023-06-22

在爱星物联，如何上传OTA固件，如何对不同类型的OTA进行升级？

安信可科技讲解如何上传OTA固件和不同类型的OTA升级方式，从模组日志和APP上如何查看OTA是否升级成功，开放平台查看升级记录。

设计经验发布时间 : 2024-07-03

安信可科技（Ai-Thinker）物联网专用模组&天线选型指南

目录- LoRa product Radar product WiFi+Bluetooth products 2.4G Series Module GPS Series Module UWB & 4G series module GPRS series module Offline Voice Module Series Antenna

型号- RA-01SH,PB-02-KIT,RTL8720 SERIES,AI-WB1,AI-WB2,AI-WB2-M1,HI-07S-KIT,TB-02-KIT,AI-WB2-12F-KIT,AI-WB2-13-KIT,AI-WB2-13U,AI-WB2-01S,A9,SX1268,RA-01SC,TG-02-KIT,PB SERIES,RTL8710BX SERIES,GPS SERIES,AI-WB2-01M,VC-01-KIT,HI-12F,TB SERIES,HI-12F-KIT,BW16,AI-WB2 SERIES,BW15,BW14,TG-12F-KIT,BW12,RTL8710BX,A9G,HI SERIES,AI-WB2-12S,PB-03,SX126X,AI-WB1-32S,HI-07S,HI-07SL-KIT,PB-01,PB-02,RG-02,AI-WB1-32S-KIT,RTL8720DN,AI-WB2-12F,TG-01M,AI-WB1SERIES,NF-05,NF-02-PA,NF-04,NF-03,BW16-KIT,NF-01-S,SX127X,TB-03F-KIT,LLCC68,TG-02,AI-WB2-07S,NF-01-N,NF-02-PE,AI-WB1-32S-CAM,GP-02-KIT,AI-WB2-M1-I,TG-02M-KIT,TG-02M,RA-08-KIT,GP-01,GP-02,CA-01-KITC,CA-01,2.4G SERIES,AI-WB2-13,PB-03F,PB-03M,TG SERIES,TB-04-KIT,TB-05,GPRS SERIES,TB-04,TG-02F,TB-02,RTL8720DN SERIES,TG-02F-KIT,4G SERIES,PB-03M-KIT,AI-WB2-32S-KIT,BU01,RA-01,PB-03-KIT,ESP32-G,RTL8720,RA-08H,NF-04-MI,VC-02-KIT,NF-05-S,RA-01S,HI-12FL,RA-01H,HI-07SL,AI-WB2-32S,RA-01SCH,PB-01-KIT,RTL8720CF,TG-01M-KIT,TG-12F,AI-WB1-A1S,AI-WB1-12F,TB-03F,BW15-KIT,GPRS,UWB SERIES,GP-01-KIT,AI-WB1-12F-KIT,NODEMCU-BU01,RA-08H-KIT,RD-01,RA-02,RTL8720CF SERIES,RA-08,VC-02,VC-01,HI-12FL-KIT,PB-03F-KIT

选型指南 - 安信可科技 - 2023/09/19 PDF 中文下载

安信可科技(Ai-Thinker)是国内领先的物联网无线通信模组供应商，公司集研发、生产、销售于一体，专注于物联网通信应用，致力于为全球物联网终端提供WiFi、蓝牙、LoRa、雷达、离线语音、UWB、NB-IoT、GPS/GPRS等稳定可靠的物联网软硬件无线连接方案。

授权代理商 - 世强先进（深圳）科技股份有限公司线上商城技术资料

展开

【IC】安信可科技发布2款UWB模组BU03和BU04，实现室内厘米级高精度测距定位

BU03和BU04这两款定位模组使用的芯片都是一样的，不同的是BU03是没有带主控MCU的，并且体积小巧，可以集成到自己的主板上，用主芯片直接驱动。

产品发布时间 : 2024-10-11

安信可科技无线模组选型表

提供安信可科技无线模组选型,封装:DIP/SMD,尺寸:10.3mm*9.9mm*2.4(±0.2)mm-120.0mm*120.0mm*30.0mm,通信接口:UART/GPIO/ADC/PWM/I?C/SPI/Touch senser/PSRAM/SDIO/Duplex I²S/麦克风/扬声器,最大速率:2.5mW-100mW,参考距离:80m-5km,供电电压:1.9V-5.25V

产品型号	品类	封装	尺寸(mm)	通信接口	最大速率(mW)	参考距离(m/km)	供电电压(V)	空中速率(Kbps/Mbps)	天线形式	工作温度(℃)
NF-01-S	2.4G模组	DIP-8	28.6mm*15.3mm	SPI	5mW	240m	1.9V-3.6V	250Kbps-2Mbps	板载天线	-20℃～70℃