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

微信小程序修改van-popup的背景颜色

效果图:
van-popup背景颜色渐变

使用深度修改样式不生效,直接在 custom-style里面修改即可;

<van-popup   position="bottom"custom-style="height:25%;background:linear-gradient(95deg, #F8FCFF -0.03%, #EDF5FF 
64.44%, #F8FCFF 133.06%);"   在这里设置渐变背景round show="{{ showLogin }}" bind:close="onLoginClose"><button  open-type="getPhoneNumber"  open-type是微信原生自带class="wx-login-btn wx-btn" bindgetphonenumber="wxLogin">手机号快捷登录</button><checkbox-group class="certificate" style="width: 90%;margin:24rpx 40rpx;"><checkbox checked="{{isagree}}" class="checkbox" value="{{sms}}"></checkbox><view class="certificate-txt">阅读并同意<text class="txt" bindtap="openUrl" data-num='lending006'>《用户信息授权书》</text>、<text class="txt" bindtap="openUrl" data-num='lending008'>《卖家云SaaS系统服务协议》</text></view></checkbox-group>
</van-popup>

样式代码,包括同意协议勾选前后的样式,

.herad .wx-login-btn {margin: 80rpx 0 64rpx 0;height: 96rpx;line-height: 96rpx;font-size: 30rpx;border-radius: 6rpx;width: 90%;color: #fff;right: 0;display: flex;justify-content: center;align-items: center;position: flex;bottom: 0;left: 0;padding: 0;margin-left: 5%;text-align: center;/* padding-left: -5rpx; */border-top-left-radius: 50rpx;border-bottom-left-radius: 50rpx;border-top-right-radius: 50rpx;border-bottom-right-radius: 50rpx;letter-spacing: 3rpx;
}.wx-btn {background: var(--blue, linear-gradient(90deg, #1463FF 0%, #7214FF 100%));box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(20, 72, 255, 0.20);
}
.wx-btn:hover{box-shadow: 10rpx 10rpx 32rpx #91c9f4;
}
.certificate {display: flex;align-items: flex-start;justify-content: space-between;margin-top: 24rpx;font-size: 30rpx;color: #666666;
}
.checkbox .wx-checkbox-input {border-radius: 10rpx;/* 圆角 */width: 40rpx;/* 背景的宽 */height: 40rpx;border: none;
}
.checkbox .wx-checkbox-input {background:#E7E7E7
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked {background:#E7E7E7
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 20rpx;color: #7B7B7B;background: transparent;transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);
}
.certificate-txt{color: #222;font-size: 24rpx;}
.txt {color: #1F6DF2;font-size: 24rpx;
}

相关文章:

微信小程序修改van-popup的背景颜色

效果图&#xff1a; van-popup背景颜色渐变 使用深度修改样式不生效&#xff0c;直接在 custom-style里面修改即可&#xff1b; <van-popup position"bottom"custom-style"height:25%;background:linear-gradient(95deg, #F8FCFF -0.03%, #EDF5FF 64.44…...

SpringCloud-Nacos

一、介绍 &#xff08;1&#xff09;作为服务注册中心和配置中心 &#xff08;2&#xff09;等价于&#xff1a;EurekaConfigBus &#xff08;3&#xff09;nacos集成了ribbon&#xff0c;支持负载均衡 二、安装 &#xff08;1&#xff09;官网 &#xff08;2&#xff09; …...

动态规划12(Leetcode221最大正方形)

代码&#xff1a; class Solution {public int maximalSquare(char[][] matrix) {int m matrix.length;int n matrix[0].length;int[][]area new int[m][n];area[0][0] matrix[0][0];int max 0;for(int i0;i<m;i){area[i][0] matrix[i][0]1? 1:0;max Math.max(area…...

【Git】bad signature 0x00000000 index file corrupt. fatal: index file corrupt

问题描述 电脑写代码时蓝屏。重启后 git commit 出错。 error: bad signature 0x00000000 fatal: index file corrupt原因分析 当电脑发生蓝屏或异常关机时&#xff0c;Git 的索引文件可能损坏。 解决方案 删除损坏的索引文件。 rm -Force .git/index回退到上一个可用的版…...

GO 语言的函数??

函数是什么&#xff1f; 学过编程的 xdm 对于函数自然不会陌生&#xff0c;那么函数是什么呢&#xff1f; 函数是一段可以重用的代码块&#xff0c;可以被多次调用&#xff0c;我们可以通过使用函数&#xff0c;提高咱们代码代码的模块化&#xff0c;提高程序的可读性和可维护…...

机器学习基础之《回归与聚类算法(3)—线性回归优化:岭回归》

一、什么是岭回归 其实岭回归就是带L2正则化的线性回归 岭回归&#xff0c;其实也是一种线性回归。只不过在算法建立回归方程时候&#xff0c;加上L2正则化的限制&#xff0c;从而达到解决过拟合的效果 二、API 1、sklearn.linear_model.Ridge(alpha1.0, fit_interceptTrue…...

DirectX3D 正交投影学习记录

所谓正交投影变换&#xff0c;就是已知盒状可视空间内任意点坐标(x,y,z)&#xff0c;求解垂直投影到xy平面的对应点坐标。 按照这个定义&#xff0c;xyz坐标系本身就是正交坐标系&#xff0c;盒状可视空间内任意点的坐标(x,y,z)投影到(x,y)平面&#xff0c;只要简单地丢弃z坐标…...

数据挖掘十大算法--Apriori算法

一、Apriori 算法概述 Apriori 算法是一种用于关联规则挖掘的经典算法。它用于在大规模数据集中发现频繁项集&#xff0c;进而生成关联规则。关联规则揭示了数据集中项之间的关联关系&#xff0c;常被用于市场篮分析、推荐系统等应用。 以下是 Apriori 算法的基本概述&#x…...

[蓝桥杯 2022 省 B] 统计子矩阵

题目描述 给定一个 NM 的矩阵 A&#xff0c;请你统计有多少个子矩阵 (最小 11, 最大 NM) 满足子矩阵中所有数的和不超过给定的整数 K。 输入格式 第一行包含三个整数 N, M和 K。 之后 N 行每行包含 M 个整数, 代表矩阵 A。 输出格式 一个整数代表答案。 输入输出样例 输入 #1 3…...

解决在部署springboot项目的docker中执行备份与之相连接的mysql容器命令

文章目录 问题描述解决思路问题解决容器构建mysql客户端安装容器与主机的交互docker中执行 mysqldump 命令解决mysql8密码验证问题解决密码插件警告 问题描述 由于&#xff0c;使用1panel可视化的面板来部署springboot项目&#xff0c;可以很方便地安装和使用mysql&#xff0c…...

正文Delphi XE Android下让TMemo不自动弹出键盘

用TMemo来显示一段说明文字&#xff0c;可一点Memo,就弹出键盘&#xff0c;找了半天控制键盘的属性&#xff0c;没找到。最后将readOnly设置为True搞定。 如果需要一个form都不显示keyboard,那么可以利用全局变量 VKAutoShowMode来控制&#xff0c;这个全局变量可以有下面三个值…...

[1Panel]开源,现代化,新一代的 Linux 服务器运维管理面板

测评介绍 本期测评试用一下1Panel这款面板。1Panel是国内飞致云旗下开源产品。整个界面简洁清爽&#xff0c;后端使用GO开发&#xff0c;前端使用VUE的Element-Plus作为UI框架&#xff0c;整个面板的管理都是基于docker的&#xff0c;想法很先进。官方还提供了视频的使用教程&…...

PG集合查询

1.运算符 1.1 union并集 连接上下语句 union distinct连接并且去重 all不去重 1.2 intersect交集 上下交集 distinct连接并且去重 all不去重 1.3 except除外 上面除了下面 distinc去重 all不去重...

目标检测应用场景和发展趋势

参考&#xff1a; 目标检测的未来是什么&#xff1f; - 知乎 (zhihu.com)https://www.zhihu.com/question/394900756/answer/32489649815大应用场景 1 行人检测&#xff1a; 遮挡问题&#xff1a;行人之间的互动和遮挡是非常常见的&#xff0c;这给行人检测带来了挑战。非刚性…...

Confluence 自定义博文列表

1. 概述 Confluence 自有博文列表无法实现列表自定义功能&#xff0c;实现该需求可采用页面中引用博文宏标签控制的方式 2. 实现方式 功能入口&#xff1a; Confluence →指定空间→创建页面 功能说明&#xff1a; &#xff08;1&#xff09;页面引用博文宏 &#xff08;…...

chrome历史版本下载

chrome历史版本下载 windows Google Chrome all versions on Windows linux版本 Google Chrome 64bit Linux版_chrome浏览器,chrome插件,谷歌浏览器下载,谈笑有鸿儒...

Messari发布Moonbeam简报,每日交易量稳步增长,首次公布利润数据

区块链数据公司Messari首次发布Moonbeam项目分析简报&#xff0c;从项目市值、链上数据表现、质押以及Moonbeam的技术优势XCM使用量等角度全面分析。这个再熊市初期上线的项目一直在默默开发&#xff0c;并在跨链互操作领域拥有了相当的实操成绩。我们翻译了Messari简报中的部分…...

数据库 锁、索引、在实际开发中怎么设置和优化

数据库锁和索引是数据库管理的两个重要方面&#xff0c;它们对于确保数据的一致性和提高查询性能具有重要作用。在实际开发中&#xff0c;正确地设置和优化锁和索引对于构建高效、稳定的系统至关重要。下面是一些关于如何在实际开发中设置和优化锁和索引的建议&#xff1a; 锁…...

超详细彻底卸载Anaconda详细教程

一、在开始处打开Anaconda Prompt 二、打开后&#xff0c;输入conda install tqdm -f命令并按回车键 conda install tqdm -f三、之后页面会出现一个WANNING&#xff0c;这个我们不用在意&#xff0c;然后会出现一个y/n提示框&#xff0c;在这里我们输入y或者Y y四、输入cond…...

Python--随机出拳(random)--if判断--综合案例练习:石头剪刀布

注&#xff1a;涉及相关链接&#xff1a; Python&#xff1a;if判断--综合案例练习&#xff1a;石头剪刀布-CSDN博客 Python语言非常的强大&#xff0c;强大之处就在于其拥有很多模块&#xff08;module&#xff09;&#xff0c;这些模块中拥有很多别人已经开发好的代码&…...

微信小程序里配置less

介绍 在微信小程序里&#xff0c;样式文件的后缀名都是wxss&#xff0c;这导致一个问题&#xff0c;就是页面样式过多的时候&#xff0c;要写很多的类名来包裹&#xff0c;加大了工作量&#xff0c;还很有可能会写错样式。这时可以配置一个less&#xff0c;会大大提高代码编辑…...

MySq修改配置文件

要修改 MySQL 的配置文件,您可以按照以下步骤进行操作: 1、打开 MySQL 的配置文件 在大多数 Linux 系统上,默认的配置文件路径是 /etc/my.cnf 或 /etc/mysql/my.cnf。您可以使用文本编辑器(如 vim、nano)以管理员权限打开该文件。 sudo vim /etc/my.cnf 2、进行修改 …...

HTML 表格及练习

表格 概述 表格是一种二维结构&#xff0c;横行纵列。 由单元格组成。 表格是一种非常“强” 的结构&#xff1a; 每一行有相同的列数&#xff08;单元格&#xff09;&#xff0c;每一列有相同的行数&#xff08;单元格&#xff09; 同一列的单元格&#xff0c;宽度&#…...

YOLOv5-训练自己的VOC格式数据集(VOC、自建数据集)

YOLOv5&#xff1a;训练自己的 VOC 格式数据集 1. 自定义数据集 1.1 环境安装 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple注意&#xff1a; 安装 lxmlPillow 版本要低于 10.0.0&#xff0c;解释链接: module ‘PIL.Image’ has no attri…...

基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…...

Linux性能优化--性能追踪:受CPU限制的应用程序(GIMP)

10.0 概述 本章包含了一个例子&#xff1a;如何用Linux性能工具在受CPU限制的应用程序中寻找并修复性能问题。 阅读本章后&#xff0c;你将能够&#xff1a; 在受CPU限制的应用程序中明确所有的CPU被哪些源代码行使用。用1trace和oprofile弄清楚应用程序调用各种内部与外部函…...

BERT变体(1):ALBERT、RoBERTa、ELECTRA、SpanBERT

Author:龙箬 Computer Application Technology Change the World with Data and Artificial Intelligence ! CSDNweixin_43975035 *天下之大&#xff0c;虽离家万里&#xff0c;何处不可往&#xff01;何事不可为&#xff01; 1. ALBERT \qquad ALBERT的英文全称为A Lite versi…...

域控操作二:设置域用户使用简单密码

过程太多简单 直接写出路径更改即可 组策略—计算机配置----策略—Windows设置–安全设置----账户策略–密码策略 按自己想法改就行了 注意一点&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 要么自己设置策略&#xff0c;要么从默认策略改&#xff01;&am…...

python---三目运算符

在Python中三目运算符也叫三元运算符&#xff0c;其主要作用&#xff1a;就是用于 简化if...else...语句。 基本语法&#xff1a; 原 if 条件判断: # 语句段1 else: # 语句段2 新-----三目运算符/三元运算符 语句段1 if 条件判断 else 语句段2 案例 输入两个数…...

百度地图定位BMap.GeolocationControl的用法

BMap.GeolocationControl 是百度地图API中的一个类&#xff0c;用于添加地理定位控件到地图上&#xff0c;以便用户可以通过该控件获取自己的当前位置。以下是 BMap.GeolocationControl 的用法示例&#xff1a; 首先&#xff0c;确保已经加载了百度地图API&#xff0c;并且创建…...

电商网站搜索引擎怎么做/优秀企业网站模板

最近&#xff0c;手机圈内被各种新机频繁刷屏&#xff0c;比如小年轻喜爱的Reno、大表姐代言的vivo X27、华北强最新力作天锋W2019等等&#xff0c;都引起了吃瓜群众的广泛热议。尤其是天锋W2019&#xff0c;其仿三星W2019的功力&#xff0c;真是让人大开眼界&#xff0c;据说就…...

国内十个免费自学网站/郑州做网络优化的公司

贝壳找房1.公司是否有做生命周期管理2.为什么要做生命周期管理3.为什么使用parquet列式存储&#xff1f;为什么不用别的&#xff1f;4.orc,rc,parquet列式存储有什么区别&#xff0c;底层存储的内存是否是连续的&#xff1f;5.为什么orc有索引就一定快&#xff1f;我答了orc的构…...

保定做网站的公司/免费发布信息的平台

作为一名产品经理&#xff0c;最奢侈的愿望是什么&#xff1f;“有一个自己能控制的团队去实现心目中的产品”&#xff0c;应该不仅仅是我有这个想法吧。按照比较流行的说法&#xff0c;产品经理是只负责产品规划与管理、不直接负责团队管理的“经理”&#xff0c;但却身负推动…...

我想给别人做网站/网站排名优化专业定制

Hibernate中的一对一映射关系有两种实现方法&#xff08;单向一对一&#xff0c;和双向一对一)&#xff08;一对一关系&#xff1a;例如一个department只能有一个manager&#xff09; 单向和双向有什么区别呢&#xff1f;&#xff1f;例如若是单向一对一&#xff0c;比如在depa…...

展示型网站建设的标准/做好网络推广的技巧

最近早上地铁上一直看设计模式&#xff0c;代码中却使用不上&#xff0c;今天恰好碰到一个新需求&#xff0c;感觉和发布订阅模式有点相同&#xff0c;借用了一下理念&#xff0c;虽然代码写的很烂&#xff0c;但是还是第一次去试着用设计模式&#xff0c;记录一下成长的第一步…...

企业门户网站 php/百度seo优化服务项目

一、前言 写这篇文章&#xff0c;是因为之前服务器有遇到过关于ssh服务的问题&#xff0c;sshd服务不稳定&#xff0c;出现断联等情况。影响日常操作。 今天就对该服务进行下总结 具体sshd服务的相关信息&#xff0c;可参考我之前文章&#xff1a; https://blog.csdn.net/xu71…...