当前位置: 首页 > 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;
}

http://www.lryc.cn/news/197928.html

相关文章:

  • SpringCloud-Nacos
  • 动态规划12(Leetcode221最大正方形)
  • 【Git】bad signature 0x00000000 index file corrupt. fatal: index file corrupt
  • GO 语言的函数??
  • 机器学习基础之《回归与聚类算法(3)—线性回归优化:岭回归》
  • DirectX3D 正交投影学习记录
  • 数据挖掘十大算法--Apriori算法
  • [蓝桥杯 2022 省 B] 统计子矩阵
  • 解决在部署springboot项目的docker中执行备份与之相连接的mysql容器命令
  • 正文Delphi XE Android下让TMemo不自动弹出键盘
  • [1Panel]开源,现代化,新一代的 Linux 服务器运维管理面板
  • PG集合查询
  • 目标检测应用场景和发展趋势
  • Confluence 自定义博文列表
  • chrome历史版本下载
  • Messari发布Moonbeam简报,每日交易量稳步增长,首次公布利润数据
  • 数据库 锁、索引、在实际开发中怎么设置和优化
  • 超详细彻底卸载Anaconda详细教程
  • Python--随机出拳(random)--if判断--综合案例练习:石头剪刀布
  • 微信小程序里配置less
  • MySq修改配置文件
  • HTML 表格及练习
  • YOLOv5-训练自己的VOC格式数据集(VOC、自建数据集)
  • 基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)
  • Linux性能优化--性能追踪:受CPU限制的应用程序(GIMP)
  • BERT变体(1):ALBERT、RoBERTa、ELECTRA、SpanBERT
  • 域控操作二:设置域用户使用简单密码
  • python---三目运算符
  • 百度地图定位BMap.GeolocationControl的用法
  • Vue3响应式原理初探