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

news2024/12/27 14:08:07
效果图:
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.coloradmin.cn/o/1100686.html

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

相关文章

JIRA 在 2024 年完全停止服务器版本支持

在服务器上的开源许可证版本已经要过期了&#xff0c;想去更新下。 发现&#xff0c;JIRA 的所有服务器版本的支持马上就要结束了。 这就意味着&#xff0c;如果你部署的服务器版本的 JIRA 的话&#xff0c;你将没有办法对服务器进行更新。 貌似&#xff0c;必须使用 JIRA 提供…

用建筑中智能消防应急照明系统的应用

【摘要】&#xff1a;火灾应急照明是火灾安全疏散、保障消防人员生命安全的关键。对电气设计人员来说&#xff0c;火灾紧急照明系统的设计非常必要&#xff0c;消防紧急照明系统启动与其正常工作状态有直接的关系&#xff0c;但由于其存在的问题通常不能被及时发现&#xff0c;…

苏轼的人生足迹

传说徐霞客游历了中国所有角落&#xff0c;但实际上北宋才子苏东坡也同样历经千辛万苦&#xff0c;漫游天涯海角。这两者的不同之处在于&#xff0c;徐霞客是为了旅游而旅游&#xff0c;而苏东坡的大部分旅程则是由于他的贬谪之事导致的。 苏东坡一生到过很多地方&#xff0c;…

如何打造智能公厕:实现智慧监测、自动化运营和智慧化管理

在现代城市里&#xff0c;公共厕所是人们不可或缺的基础设施之一。然而&#xff0c;传统的公厕管理方式已经无法满足人们对公厕的期望&#xff0c;因此需要采用智慧公厕管理系统来提升公厕服务的质量。本文将以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量精品案例现…

实验笔记之——可见光通信调制驱动芯片模组

本博文记录本团队研发出的VLC驱动调制芯片模组&#xff08;如下图所示&#xff09;的驱动调制代码烧录过程。 实物模组正面 实物模组反面 首先需要安装keil5&#xff0c;其安装与编译过程请参考博客&#xff1a;实验笔记之——单片机烧录的实验过程_烧录程序的基本步骤-CSDN博客…

ES6(ECMAScript 2015)有哪些新属性,如何判断当前浏览器是否支持?

ES6&#xff08;ECMAScript 2015&#xff09;引入了许多新的语法和特性&#xff0c;以增强 JavaScript 编程语言的功能。以下是一些常见的 ES6 语法和特性以及它们的解释&#xff1a; let 和 const 声明&#xff1a; let 和 const 用于声明变量&#xff0c;代替了旧的 var 关键…

什么是关系数据库,你知道吗?

什么是关系数据库管理系统 关系数据库管理系统&#xff08;RDBMS&#xff0c;relational database management system&#xff09;是基于关系数据模型的数字数据库&#xff0c;由 E. F. Codd 于 1970 年提出。 许多关系数据库都提供使用结构化查询语言 SQL&#xff08;Struct…

6、函数式编程--高级用法

目录 7. 高级用法基本数据类型优化并行流parallel()parallelStream() 7. 高级用法 基本数据类型优化 ​ 我们之前用到的很多Stream的方法由于都使用了泛型。所以涉及到的参数和返回值都是引用数据类型。 ​ 即使我们操作的是整数小数&#xff0c;但是实际用的都是他们的包装…

【触想智能】工业级触摸显示器的分类与应用分享

工业级触摸显示器是具有触摸功能的工业显示器&#xff0c;常见的触摸方式有电容触摸和电阻触摸。它是应用在工业上的设备&#xff0c;和普通的显示器有着很大的区别。 工业级触摸显示器由液晶触摸屏、功能主板、外壳三部分组成&#xff0c;结构用料一般都采用铝合金材质&#x…

企业现在开始准备应对2024技术趋势了

导读从完善和扩大人工智能的使用&#xff0c;到平衡创新需求与紧缩预算&#xff0c;企业需要了解多种新兴技术趋势。以下是将主导2024年的技术趋势&#xff0c;以及企业现在应该如何为此做好准备。 毫无疑问&#xff0c;2023年的主流技术趋势将集中在人工智能&#xff0c;更具…

Ubuntu 16.04 LTS third maintenance update release

Ubuntu 16.04 LTS (Xenial Xerus)今天迎来的第三个维护版本更新中&#xff0c;已经基于Linux Kernel 4.10内核&#xff0c;而且Mesa图形栈已经升级至17.0版本。Adam Conrad表示&#xff1a;“像此前LTS系列相似&#xff0c;16.04.3对那些使用更新硬件的用户带来了硬件优化。该版…

寻找可靠的软件外包开发公司

寻找可靠的软件外包开发公司是关键&#xff0c;以确保项目的顺利交付和质量。以下是一些方法和步骤&#xff0c;帮助您找到可靠的软件外包开发公司&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 明确…

众和策略:尾盘5分钟拉升意味着什么?

跟着投资者越来越重视股市改动&#xff0c;一些术语逐渐进入商场人员的词汇库中&#xff0c;例如“尾盘5分钟拉升”。这个概念在许多人眼中是听起来生疏的&#xff0c;但它实际上是股市生意中十分重要的一种现象。 简略来说&#xff0c;尾盘5分钟拉升是指股市在毕竟5分钟呈现了…

短视频剪辑矩阵系统开发解决的市场工具难点?

短视频剪辑矩阵系统开发源码----源头搭建 一、源码技术构建源码部署搭建交付之---- 1.需要协助系统完成部署、接口全部正常接入、系统正常运行多久&#xff1f;7个工作日 2.需要准备好服务器以及备案域名 3.短视频SEO模块一年项目带宽&#xff0c;带宽最低要求10M&#xff0c;…

解决笔记本无线网络5G比2.4还慢的奇怪问题

环境&#xff1a;笔记本Dell XPS15 9570&#xff0c;内置无线网卡Killer Wireless-n/a/ac 1535 Wireless Network Adapter&#xff0c;系统win10家庭版&#xff0c;路由器H3C Magic R2Pro千兆版 因为笔记本用的不多&#xff0c;一直没怎么注意网络速度&#xff0c;直到最近因为…

制作厂区电子地图所具备的必要条件分析

工业4.0时代的到来&#xff0c;使得制造业开始向智能化、网络化方向发展。随着科技的不断进步和数字化转型的加速&#xff0c;企业越来越需要利用先进的技术手段来提高运营效率。厂区电子地图能够更好地满足工厂智能化管理和运营的需求&#xff0c;促进数字化转型。那么如何制作…

2、Calcite 源码编译与运行

Calcite 源码编译与运行 一、概述 1&#xff09;简介 Calcite是一个数据库查询优化器。 2&#xff09;使用方式 1.将Calcite作为独立的服务&#xff0c;向下对接异构数据源&#xff0c;上层应用则使用Calcite原生的JDBC接口&#xff0c;利用SQL语句进行请求和响应。 2.将…

不同行业的WMS仓储管理系统解决方案要考虑哪些因素

随着经济的发展和社会的进步&#xff0c;各行各业对仓储管理的需求日益增长。WMS仓储管理系统解决方案作为物流管理的重要组成部分&#xff0c;在提高仓储效率、降低成本、提升服务质量等方面具有重要作用。然而&#xff0c;不同行业在WMS仓储管理系统设计方面面临着不同的难点…

vue+ts vite环境项目取不到process 解决方法

在tdesign文档中用官方的解决方案创建了一个 vue2ts项目 用的配置文件是 vite.config.js 这里 我做了一个简单的多环境配置 当我在js中 使用 console.log(process.env.VITE_APP_BASE_URL)代码会直接白屏 然后 报错内容大概就是 process 这个属性拿不到 在vite中 我们改成了…

【 OpenGauss源码学习 —— 列存储(CU)(一)】

列存储&#xff08;CU&#xff09; 概述cstore 存储单元结构&#xff08;CU&#xff09;CU 类CU 的构造函数Reset 函数 CU::CheckCrc 函数CU::GenerateCrc 函数CU::AppendValue 函数CU::AppendCuData 函数 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#…