定义公共样式css

news2024/11/24 19:30:13

在这里插入图片描述
index.less 文件

// 全局按钮颜色
@btn_background: #005298;
@btn_border-color: #6fa18d;// 默认的
@btn_border-color-highlight: #0598d3;// 高亮边框 
@btn_border-color-success: #36be7e;// 成功边框
@btn_font_color: #fff;

// 边框颜色 背景色 文字颜色
.btn_public(@btn_bor_back:@btn_background,@btn_back:@btn_background,@btn_color:@btn_font_color){
  border: 1px solid @btn_bor_back;
  background: @btn_back;
  color: @btn_color;
}

.display(@a:flex,@b:center,@c:center){
  display: @a;
  justify-content: @b;
  align-items: @c;
}

页面用法
在这里插入图片描述
在这里插入图片描述

   .btn_details{
      .btn_public();
    }
 .search_loading{
    background: rgba(54, 190, 126, 0.6);
    .display();
    .el-icon-loading{
      position: relative;
      left: -0.5vw;
      top: 0.1vw;
      padding: 0;
      margin: 0;
      font-size: 0.8vw;
    }
  }

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

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

相关文章

什么是区块链?

区块链 区块链 (英语:blockchain)是借由 密码学 与 共识机制 等技术建立,存储数据的 保证不可篡改和不可伪造的 分布式技术。 什么是区块 区块 就是将一批数据打包在一起,并且给打包出来的区块编号。第一个区块的编…

【Qt】Qt配置

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Qt SDK下载 二、配置环境变量 三、新建工程(QWidget) 四、QWidg…

SpringBoot之拦截器与过滤器解读

目录 一、SpringBoot 拦截器 过滤器 二、实现HandleInterceptor接口 三、继承HandleInterceptorAdapter类 四、实现RequestInterceptor接口 五、粉丝福利 一、SpringBoot 拦截器 过滤器 1、过滤器和拦截器触发时机不一样&#xff0c;过滤器是在请求进入容器后&#xff0c;…

python系列28:fastapi部署应用

1. 介绍与安装 FastAPI 是一个用于构建 API 的现代、快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;类似flask&#xff0c;Django&#xff0c;webpy 在部署时可能需要用到下面的库&#xff1a; Uvicorn 或者 Hypercorn负责ASGI 服务器。 Starlette 负责 web 部分…

C语言从入门到实战——动态内存管理

动态内存管理 前言一、 为什么要有动态内存分配二、 malloc和free2.1 malloc2.2 free 三、calloc和realloc3.1 calloc3.2 realloc 四、常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动态开…

自动化测试总结

1.什么是自动化测试 以程序测试程序&#xff0c;以代码代替思维&#xff0c;以脚本的运行代替手工测试。自动化的测试涵盖了&#xff1a;功能&#xff08;黑盒&#xff09;自动化测试&#xff0c;功能&#xff08;白盒&#xff09;自动化测试&#xff0c;性能测试&#xff0c;…

Mac版VsCode快捷键大全

1 对应关系 标志 键名 ⌘ command ⇧ shift ↩ 回车 ↑ 上 ↓ 下 ⌃ control ⌥ option 高亮标记的是常用的快捷键。 2 编辑 按键 功能 ⇧ ⌥ 鼠标左键 ( Left) 按住鼠标左键下拉可以批量将鼠标键放在指定位置 ⇧ ⌥ ↑ 向上复制整行或者整段 ⇧ ⌥ ↓ 向下复制整行或…

掌上单片机实验室 – 低分辨率编码器测速方式完善(24)

一、背景 本以为“掌上单片机实验室”这一主题已告一段落&#xff0c;可最近在测试一批新做的“轮式驱动单元”时&#xff0c;发现原来的测速算法存在问题。 起因是&#xff1a;由于轮式驱动单元的连线较长&#xff0c;PCB体积也小&#xff0c;导致脉冲信号有干扰&#xff0c;加…

组件v-model(.sync)记录使用(vue3)

示例&#xff08;演示地址&#xff09; 以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码&#xff1a; 首先&#xff0c;让我们来了解一下Vue3中v-model的用法。在Vue3中&#xff0c;v-model 指令可以用于自定义组件上&#xff0c;用于实现组件的双向数据绑定。与Vue2…

一键式Excel分词统计工具:如何轻松打包Python脚本为EXE

一键式Excel分词统计工具&#xff1a;如何轻松打包Python脚本为EXE 写在最前面需求分析直接用Python打包为什么大&#xff1f;为什么要使用conda环境&#xff1f; 将Python脚本打包为一个独立的应用程序1. 编写Python脚本&#xff1a;初步功能实现2. 初步图形用户界面&#xff…

基于Python flask的猫眼电影票房数据分析可视化系统,可以定制可视化

技术方案 猫眼电影票房数据分析可视化系统是基于Python Flask框架开发的一款用于分析和展示猫眼电影票房数据的Web应用程序。该系统利用Flask提供了一个简单而强大的后端框架&#xff0c;结合Request库进行网络爬虫获取猫眼电影票房数据&#xff0c;并使用Pyecharts进行可视化…

【AI的未来 - AI Agent系列】【MetaGPT】4.1 细说我在ActionNode实战中踩的那些坑

文章目录 1. MetaGPT 0.5.2 版本的坑1.1 坑一&#xff1a;cannot import name "ActionNode" from "metagpt.actions.action"1.2 坑二&#xff1a;simple_fill 没有参数 schema1.3 坑三&#xff1a;ActionNode一直在循环执行&#xff0c; 2. 升级成 MetaGP…

高精度算法笔记·····························

目录 加法 减法 乘法 除法 高精度加法的步骤&#xff1a; 1.高精度数字利用字符串读入 2.把字符串翻转存入两个整型数组A、B 3.从低位到高位&#xff0c;逐位求和&#xff0c;进位&#xff0c;存余 4.把数组C从高位到低位依次输出 1.2为准备 vector<int> A, B, …

模拟实现简单的shell

目录 1.实现交互界面 2.子串分割的问题&#xff0c;解决命令行 3.指令的判断 1.实现交互界面 我们模仿打印出来就好了&#xff1a; 现在已经有初步的形状了。 2.子串分割的问题&#xff0c;解决命令行 3.指令的判断 看上面有一行内建命令中的export&#xff0c;其实不对的&a…

C++初入(四)

1.万能头文件 #include <bits/stdc.h> 里面包含了大量我们日常所需的头文件&#xff0c;如果使用它&#xff0c;我们就可以减少大量时间去写头文件&#xff0c;但是其实在平常练习和实际运用中&#xff0c;该头文件几乎没有实际价值&#xff0c;原因&#xff1a;1.里面…

真实体验|微信新推出的工作流表现如何?

以小程序公众号消息推送为例&#xff0c;全面真实体验微信工作流新能力。详解到底能不能用&#xff1f;谁适合用&#xff1f; 上周微信云开发上线了「工作流」能力。支持通过拖拉拽的方式搭建流程&#xff0c;支持调用、时间、消息通知、支付等多种驱动场景的业务计算&#xf…

开源图床LightPicture搭建本地图片管理系统并实现无公网IP远程访问

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…

工具 | WSL | WSL动不动就卡死

工具 | WSL | WSL动不动就卡死 PS C: Users flyer> ws1 由于连接方在一段时间后没有正确答复或连接的主机没有反应&#xff0c;连接尝试失败 Error code: Ws1/Service/0x8007274c wsl动不动就卡住 Error code: Wsl/Service/0x8007274c

文心一言 VS 讯飞星火 VS chatgpt (181)-- 算法导论13.4 4题

四、用go语言&#xff0c;在 RB-DELETE-FIXUP 代码的哪些行中&#xff0c;可能会检查或修改哨兵 T.nil &#xff1f; 文心一言&#xff1a; RB-DELETE-FIXUP 是红黑树中的一个操作&#xff0c;用于在删除一个节点后进行必要的调整以保持红黑树的性质。在这个过程中&#xff0…

Alinx ZYNQ 7020 LED调试--in RAM

设置拨码开关为JTAG方式 烧写LED bit stream a. 点击“Program device”烧录程序到FPGA中&#xff08;重新上电程序就丢失了&#xff09; b. /01_led/led.runs/impl_1/led.bit 程序烧录到Flash中 ZYNQ与以往的直接烧录Flash不同&#xff0c;首先必须PS&#xff0c;然后烧…