微信小程序修改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.mzph.cn/news/112076.shtml

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

相关文章

01_introduction_to_diffusers_CN

&#x1f917; Diffusers 介绍 来源&#xff1a;https://github.com/huggingface/diffusion-models-class/blob/main/unit1/01_introduction_to_diffusers.ipynb 预备知识 在进入 Notebook 之前&#xff0c;你需要: &#x1f4d6; 阅读第一单元的材料&#x1f917; 在 Hugg…

第十四章lambda表达式与流处理

14.1 Iambda表达式 Iambda表达式简介 lambda表达式可以用非常少的代码实现抽象方法。 lambda表达式不能独立执行&#xff0c;因此必须实现函数式接口&#xff0c;并且会返回一个函数式接口的对象。 lambdab表达式的语法非常特殊 语法格式&#xff1a; &#xff08;&#xff0…

虚拟机如何联网【NAT】

查看VMWARE的IP地址 #进入root用户 su -#更改虚拟网卡设置界面 vi /etc/sysconfig/network-scripts/ifcfg-ens33 修改ONBOOT为yes BOOTPROTO为static IPADDR为前面的网段 192.168.211.xx (xx为自己设置的&#xff0c;可以随意设置&#xff0c;前面的为前面查看的IP地址的前…

Vue2之防抖_debounce封装函数v-debounce自定义指令(传参/不传)

目录 1、防抖 2、debounce - 封装函数 3、v-debounce 全局自定义指令 1、防抖 推荐文章 &#xff1a; https://blog.csdn.net/weixin_58099903/article/details/119902796 2、debounce - 封装函数 utils / tools.js /*** 函数防抖 是n秒后延迟执行&#xff0c;多用于页面scr…

MATLAB——神经网络参考代码

欢迎关注“电击小子程高兴的MATLAB小屋” %% I. 清空环境变量 clear all clc %% II. 训练集/测试集产生 %% % 1. 导入数据 load spectra_data.mat %% % 2. 随机产生训练集和测试集 temp randperm(size(NIR,1)); %打乱60个样本排序 % 训练集——50个样本 P_train NIR(…

YOLOv8改进实战 | 更换主干网络Backbone之轻量化模型Efficientvit

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法: 网络剪枝:移除神经网络中冗余的连接和参数,以达到模型压缩和加速的目的。分组卷积:将卷积操作分解为若干个较小的卷积操作,并将它们分别作用于输入的不…

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

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

【无人机】太阳能伪卫星VoLTE无人机设计(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

从0到1,申请cos服务器并上传图片到cos文件服务器

目录 准备工作 Java代码编写 控制台打印 整理成工具类 编写接口 Postman测试 准备工作 1.进入网址腾讯云 产业智变云启未来 - 腾讯 (tencent.com) 2.搜索cos,点击立即使用&#xff0c;刚开始会免费赠送你 3.存储都是基于桶的&#xff0c;先创建桶&#xff0c;在桶里面创…

PyQt 问题记录

1.现成的组件不一定线程安全&#xff0c;&#xff08;包括且不限于数据的修改竞争,和一些组件的崩溃 ) 对于PyQt 的线程使用&#xff0c;可能还需要更谨慎些 保存逻辑 QuestionBox("保存/Save")def Save(self):okFlagFalseerrFlagFalseWriteCmd{}for it in self.Mode…

视频SDK开发,多平台SDK快速接入

随着科技的不断发展&#xff0c;视频已经成为了企业业务中不可或缺的一部分。无论是在线教育、企业培训还是产品展示&#xff0c;视频都发挥着至关重要的作用。为了满足企业对视频应用的需求&#xff0c;美摄视频SDK应运而生&#xff0c;为企业提供了一站式的视频解决方案。 一…

从入门到进阶 之 ElasticSearch 节点配置 集群篇

&#x1f339; 以上分享 ElasticSearch 安装部署&#xff0c;如有问题请指教写。&#x1f339;&#x1f339; 如你对技术也感兴趣&#xff0c;欢迎交流。&#x1f339;&#x1f339;&#x1f339; 如有需要&#xff0c;请&#x1f44d;点赞&#x1f496;收藏&#x1f431;‍&a…

回顾 | E³CI效能认知与改进论坛,助力企业研发效能度量和提升

2023年8月&#xff0c;TiD质量竞争力大会组委会和ECI专家委员会成功举办TiD大时段课程“度量驱动研发效能提升”与“ECI效能认知与改进论坛”。与会专家以《ECI软件研发效能度量规范》团体标准为要点&#xff0c;为企业研发效能度量和提升分享诸多实践成果与经验。 《ECI软件研…

es6(三)——常用es6(函数、数组、对象的扩展)

ES6的系列文章目录 第一章 Python 机器学习入门之pandas的使用 文章目录 ES6的系列文章目录0、数值的扩展一、函数的扩展1、函数的默认值2、函数的reset参数 二、数组的扩展1. 将对象转成数组的Array.from()2. 将对象转成数组的Array.from()3. 实例方法 find()&#xff0c;fin…

高质量发展新引擎:智能工业操作系统助力产业升级

工业操作系统是推动制造业高质量发展的重要支撑&#xff0c;也是推动经济发展方式转变的重要手段。打造自主可控的工业实时操作系统是实现工业科技自立自强的必然要求&#xff0c;是推动高质量发展的必由之路。 基于软件定义控制的智能工业操作系统 Intewell操作系统是由科东…

uniapp高德地图ios 使用uni.chooseLocation选取位置显示没有搜索到相关数据

uniapp云打包后&#xff0c;高德地图ios选取位置显示“ 对不起&#xff0c;没有搜索到相关数据” 详细问题描述 废话不多说&#xff0c;直接上图 解决方案 1.打开高德地图开发平台 2.重新创建key 3.获取云打包时的ios报名作为安全码 4.使用生成的高德key更改manifest.json里…

Ubuntu系统忘记Root用户密码-无法登录系统-更改Root密码-Ubuntu系统维护

一、背景 很多时候&#xff0c;我们总会设计复杂的密码&#xff0c;但是大多数时候&#xff0c;我们反而会先忘记我们的密码&#xff0c;导致密码不仅仅阻挡其他用户进入系统&#xff0c;同时也阻碍我们进入系统。 本文将介绍在忘记密码的情况下&#xff0c;如何进入系统并更改…

分析并实现Android中的MVC、MVP架构模式

架构是什么 架构是为了解决特定的问题而提出来的&#xff0c;而且它还有特定的规则&#xff0c;能够把整个应用的整体进行角色的划分。并且他还能够约定角色之间的联系沟通机制。 所以学习架构要带着以下三个问题去理解&#xff1a; 。架构解决了什么问题&#xff1f; 。架…

AUTOSAR AP硬核知识点梳理(1)

一 什么是 Adaptive AUTOSAR? Adaptive AUTOSAR是一种新的汽车软件框架,旨在满足现代汽车行业中不断增长的技术需求。随着汽车变得越来越智能,对处理器的性能要求也在不断增长。 Adaptive AUTOSAR旨在通过提供高性能计算和通信机制以及灵活的软件配置来满足这些需求,为车…

软件工程与计算总结(二十)软件交付

软件交付是软件项目的结束阶段 &#xff0c;标志着软件开发任务的完成——其作为一个分水岭&#xff0c;区分了软件开发与软件维护两个既连续又不同的软件产品生存状态~ 在经历连续的辛苦工作之后&#xff0c;开发人员在胜利曙光之前难免会忽视软件交付阶段的一些工作——在准…