微信小程序修改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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt之布局】QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout介绍及使用

在Qt中&#xff0c;布局管理器&#xff08;Layout&#xff09;用于管理窗口中的控件的位置和大小&#xff0c;以适应不同大小的窗口。 常用的布局管理器包括QVBoxLayout、QHBoxLayout、QGridLayout和QFormLayout。 先放张布局UI&#xff1a; 1. QVBoxLayout&#xff08;垂直布…

Linux性能优化--性能工具:磁盘I/O

6.0 概述 本章介绍的性能工具能帮助你评估磁盘I/O子系统的使用情况。这些工具可以展示哪些磁盘或分区已被使用&#xff0c;每个磁盘处理了多少I/O,发给这些磁盘的I/O请求要等多久才被处理。 阅读本章后&#xff0c;你将能够&#xff1a; 确定系统内磁盘I/O的总量和类型(读/写…

使用 ClickHouse 深入了解 Apache Parquet (一)

​ 【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 自2013年作为Hadoop的列存储发布以来&#xff0c;Parquet几乎已经成为一种无处不在的文件交换格式&#xff0c;它提供了高效的存储和检索。这种采纳使其成为更近期的…

为网站配置SSL

HTTPS &#xff08;全称&#xff1a;Hyper Text Transfer Protocol over SecureSocket Layer&#xff09;&#xff0c;是以安全为目标的 HTTP 通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS 在HTTP 的基础下加入SSL 层&#xff0c;HTTPS…

AWS S3加密

Hello大家好&#xff61; 在本课时我们将讨论S3加密相关的内容。 S3加密相关是认证考试的一个重要的主题考点&#xff0c;您需要了解亚马逊S3的几种不同类型的加密方式。| 首先是静态数据的加密&#xff0c;静态数据加密是指数据存储在亚马逊S3 数据中心的磁盘上时&#xff0…

Maven的详细介绍(maven的全据配置以及idea中maven的配置)

maven的理解 Maven 是一个强大的项目管理和构建自动化工具&#xff0c;它通过抽象的项目对象模型(POM&#xff1a;Project Object Model)和构建生命周期模型(Project Lifecycle)来对项目及其构建过程进行管理(Dependency Management System)&#xff0c;Maven 最大化的消除了构…

爬虫/scrapy基础

如果文章对你有帮助&#xff0c;欢迎关注、点赞、收藏一键三连支持以下哦&#xff01; 想要一起交流学习的小伙伴可以加zkaq222&#xff08;备注CSDN&#xff0c;不备注通不过哦&#xff09;进入学习&#xff0c;共同学习进步 目录 0x01 安装和简介 0x02 文件作用 0x04 保存…

阿里巴巴店铺所有商品数据接口及店铺商品数据分析

获取阿里巴巴店铺所有商品数据的接口是阿里巴巴开放平台提供的接口&#xff0c;通过该接口可以获取店铺所有商品数据。 通过阿里巴巴开放平台接口获取店铺所有商品数据的方法如下&#xff1a; 在开放平台注册成为开发者并创建一个应用&#xff0c;获取到所需的 App Key 和 Ap…

C语言实现用递归方法求 () = ∑ (^2)

完整代码&#xff1a; // 用递归方法求 ??(??) ∑ (??^2) #include<stdio.h>int func(int n){if (n1){return 1;}else{return n*nfunc(n-1);} }int main() {int n;printf("请输入一个整数");scanf("%d",&n);printf("%d",func(…

微信好友消息自动回复,让你轻松应对好友咨询

有许多用微信做业务、做微商的小伙伴&#xff0c;微信有时候消息太多看不过来&#xff0c;漏看消息&#xff0c;或者不知道怎么引导用户&#xff0c;让他们看到你想让他们看到的消息。微信上用户多微信上的信息容易漏掉&#xff0c;怎么能有时效的回复客户呢&#xff1f;此时你…

学习pytorch14 损失函数与反向传播

神经网络-损失函数与反向传播 官网损失函数L1Loss MAE 平均MSELoss 平方差CROSSENTROPYLOSS 交叉熵损失注意code 反向传播在debug中的显示code B站小土堆pytorch视频学习 官网 https://pytorch.org/docs/stable/nn.html#loss-functions 损失函数 L1Loss MAE 平均 import to…

食品软水树脂和工业软水树脂有什么区别?高盐水除钙镁应选择什么树脂?

在食品、饮料、制药、汽车制造、化工、电子、制革、钢铁、纺织等许多行业中&#xff0c;水的质量对产品的质量有非常重要的影响。 软化水可以有效改善水质&#xff0c;减少水中钙、镁离子含量&#xff0c;避免水垢形成&#xff0c;从而减少加热和冷却设备的能源消耗&#xff0c…

元梦之星内测上线,如何在B站打响声量?

元梦之星是腾讯天美工作室群研发的超开星乐园派对手游&#xff0c;于2023年1月17日通过审批。该游戏风格可爱软萌&#xff0c;带有社交属性&#xff0c;又是一款开黑聚会的手游&#xff0c;备受年轻人关注。 飞瓜数据&#xff08;B站版&#xff09;显示&#xff0c;元梦之星在…

Python制作PDF转Word工具(Tkinter+pdf2docx)

一、效果样式 二、核心点 1. 使用pdf2docx完成PDF转换Word 安装pdf2docx可能会报错&#xff0c;安装完成引入from pdf2docx import Converter运行也可能报错&#xff0c;可以根据报错提示看缺少那些库&#xff0c;先卸载pip uninstall xxx,使用pip install python-docx -i htt…

Smartbi携手某证券公司成功打造数据文化体系

以数据为抓手搭建数据体系&#xff0c;需要从业务运营的角度出发&#xff0c;借助工具方法&#xff0c;结构化、系统性地解决业务运营场景中的各种问题&#xff0c;不断优化和提升业务运营效率。数据体系、运营体系、工具方法和组织文化四位一体&#xff0c;自成体系&#xff0…

RabbitMQ的LazyQueue

在默认情况下&#xff0c;RabbitMQ会将接收到的信息保存在内存中以降低消息收发的延迟。但在某些特殊情况下&#xff0c;这会导致消息积压&#xff0c;比如&#xff1a; 消费者宕机或出现网络故障消息发送量激增&#xff0c;超过了消费者处理速度消费者处理业务发生阻塞 一旦…

python实现TCPclient

python实现TCPclient是一件简单的事情&#xff0c;只要通过socket这个模块就可以实现。 一、实现步骤 1、导入模块&#xff1a; 首先&#xff0c;你需要导入Python的socket模块。 import socket2、创建Socket对象&#xff1a; 使用socket.socket()函数创建一个新的socket对…

35 机器学习(三):混淆矩阵|朴素贝叶斯|决策树|随机森林

文章目录 分类模型的评估混淆矩阵精确率和召回率 接口介绍其他的补充 朴素贝叶斯基础原理介绍拉普拉斯平滑下面给出应用的例子朴素贝叶斯的思辨 决策树基础使用基本原理信息熵信息增益信息增益率Gini指数 剪枝api介绍 随机森林------集成学习初识基本使用api介绍 分类模型的评估…

【EI会议征稿】第三届应用力学与先进材料国际学术会议(ICAMAM 2024)

第三届应用力学与先进材料国际学术会议&#xff08;ICAMAM 2024&#xff09; 2024 3rd International Conference on Applied Mechanics and Advanced Materials&#xff08;ICAMAM 2024&#xff09; 第三届应用力学与先进材料国际学术会议&#xff08;ICAMAM 2024&#xff09…

如何写代码实现VRP问题中车辆容量限制及时间窗要求(python)

问题研究背景 使用遗传模拟退火算法求解如下10个卸货点的VRPTW问题。为了使研究的问题更加有意义&#xff0c;本人将时间限理解为服务点一天的具体可以允许配送的时间。 如果不要求车辆从配送中心出发的时间是统一的并且为0时刻&#xff0c;那么就默认第一个配送节点是一定能赶…