Uniapp 自定义弹窗

news2024/11/27 2:20:54

布局

<view>
			<view v-if="show" class="popup">
				<view class="popup-box">
					<view>支付方式:{{way}}</view>
					<view>停车费用:{{money}}</view>
					<view class="btn-box">
						<view class="cancel btn" @click="cancel">取消</view>
						<view class="confirm btn" @click="confirm">支付</view>
					</view>
				</view>
			</view>
		</view>

样式

.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.popup-box {
			background-color: #fff;
			width: 80%;
			height: 40%;
			margin: 60% auto 0rpx; // 居中显示弹窗内容
			padding: 20rpx; // 添加一些内边距,使内容不会紧贴边缘
			border-radius: 10rpx; // 添加一些圆角,使内容更美观
			box-sizing: border-box; // 确保内边距不会影响内容宽度和高度
			overflow: auto; // 添加滚动条,如果内容超出弹窗框的高度
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5); // 添加一些阴影,使内容更突出
			
			.btn-box{
				display: flex; // 使用flex布局,使按钮水平排列
                justify-content: space-between; // 使按钮平均分布,两端对齐
				align-items: center;
				.btn{
					margin-top: 80rpx;
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
				.cancel{
					background-color: #fff;
					color: #000;
					border-radius: 10rpx; // 添加一些圆角,使内容更美观
                    border: 1rpx solid #ccc; // 添加一些边框,使内容更突出
                    text-align: center;
				}
				.confirm{
                    background-color: #1BA035;
                    color: #fff; // 添加一些内边距,使内容不会紧贴边缘
                    border-radius: 10rpx; // 添加一些边框,使内容更突出
					text-align: center;
					}
                
			}
		}
	}

效果图

在这里插入图片描述

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

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

相关文章

修改el-checkbox样式

一定要在最外层&#xff1b; //未选中框/deep/ .el-checkbox__inner{border-color: #0862a3;}//选中框/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #0862a3;border-color: #0862a3;}//未选中框时右侧文字/deep/ .el-checkbox__label{}//选中…

虚拟化技术 挂载iSCSI网络存储器

一、实验内容 挂载iSCSI网络存储器到ESXi主机 二、实验主要仪器设备及材料 安装有64位Windows操作系统的台式电脑或笔记本电脑&#xff0c;建议4C8G或以上配置已安装vSphere Client 三、实验步骤 1、挂载iSCSI网络存储器到ESXi主机 配置ESXi主机的虚拟网络 ESXi识别出三块…

【补充】图神经网络前传——DeepWalk

论文阅读 论文&#xff1a;https://arxiv.org/pdf/1403.6652 参考&#xff1a;【论文逐句精读】DeepWalk&#xff0c;随机游走实现图向量嵌入&#xff0c;自然语言处理与图的首次融合_随机游走图嵌入-CSDN博客 abstract DeepWalk是干什么的&#xff1a;在一个网络中学习顶点…

039——解决室内不能使用GPS问题

目录 引入 GUI整改 client添加GPS分析 完善服务器网络通讯部分代码 添加GPS的BSW层 GPS操作部分代码&#xff08;相当于驱动&#xff09; 效果展示 项目管理操作 引入 最近在写论文加上出去玩了一圈所以停更了一段时间。上次咱们GPS有个室内用不了的问题&#xff0c;咱…

Ubuntu 24 换国内源及原理 (阿里源 清华源 中科大源 网易源)

备份原文件 sudo cp /etc/apt/sources.list.d/ubuntu.sources /etc/apt/sources.list.d/ubuntu.sources.bak 编辑源文件 sudo gedit /etc/apt/sources.list.d/ubuntu.sources 粘贴到文本&#xff08;其中一个即可&#xff09;&#xff1a; &#xff08;阿里源&#xff09…

与 Apollo 共创生态:Apollo 七周年大会带我体会自动驾驶技术的发展

前言 自动驾驶技术作为当今科技领域的热门话题&#xff0c;吸引着无数开发者和企业的目光。而在这个风起云涌的行业中&#xff0c;Apollo开放平台作为自动驾驶领域的领军者之一&#xff0c;扮演着不可或缺的角色。七年前&#xff0c;当Apollo开放平台刚刚起步时&#xff0c;也…

C语言(指针)5

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

等保一体机能过三级等保吗?过等保无需再买安全设备如何做到?

等保一体机能过三级等保吗&#xff1f;过等保无需再买安全设备如何做到&#xff1f; 全云在线 2024-03-28 12:08 广东 尽管等保建设的标准是统一的&#xff0c;但由于不同行业和用户规模的差异&#xff0c;建设方案呈现出多样化的特点。 虽然重点行业过等保现象确实已经十分…

【35分钟掌握金融风控策略25】定额策略实战2

目录 基于收入和负债的定额策略 确定托底额度和盖帽额度 确定基础额度 基于客户风险评级确定风险系数 计算最终授信额度 确定授信有效期 基于收入和负债的定额策略 在实际生产中&#xff0c;客户的收入和负债数据大多无法直接获得&#xff0c;对于个人的收入和负债数据&…

中小型客户过等保,选择比努力重要!

国内谈网络安全&#xff0c;等保是绕不过去的话题。 作为国家网络安全保障的基本制度、基本策略、基本方法&#xff0c;等保经过十几年发展&#xff0c;其基本概念、相关标准已经深入人心&#xff0c;市面上各类成熟的等保方案让用户应接不暇&#xff0c;挑花了眼。 网络安全…

数据结构之排序(上)

片头 嗨&#xff0c;小伙伴们&#xff0c;大家好&#xff01;我们今天来学习数据结构之排序&#xff08;上&#xff09;&#xff0c;今天我们先讲一讲3个排序&#xff0c;分别是直接插入排序、冒泡排序以及希尔排序。 1. 排序的概念及其应用 1.1 排序的概念 排序&#xff1a…

R语言数据分析案例-股票可视化分析

一、数据整合的对象 # Loading necessary libraries library(readxl) library(dplyr)# Reading the data from Excel files data_1 <- read_excel("云南白药.xlsx") data_2 <- read_excel("冰山.xlsx")二、数据整合的代码 # Reading the data from…

Docker:docker在项目中常用的一些命令

简介   Docker 是一个开源的容器化平台&#xff0c;它允许开发者将应用程序及其依赖项打包到一个可移植的容器中&#xff0c;并发布到任何安装了 Docker 引擎的机器上。这些容器是轻量级的&#xff0c;包含了应用程序运行所需的所有东西&#xff0c;如代码、系统库、系统工具…

“数字化叙事的革命:人工智能驱动的创意工具的崛起”

近年来&#xff0c;人工智能 (AI) 改变了我们生活的许多方面&#xff0c;数字故事讲述的世界也不例外。随着人工智能驱动的创意工具的出现&#xff0c;广告商、内容创作者和专业人士现在配备了创新的解决方案来简化他们的工作流程&#xff0c;增强他们的创意输出&#xff0c;并…

08.4.grafana自定义图形并直接数据库取值

grafana自定义图形并直接数据库取值 自定义添加油表图形 选择gauge图形&#xff0c;并且配置对应设定值&#xff0c;点击应用 如图所示&#xff0c;可以看到仪表盘上的值是zabbix上取得值 配置grafana直接数据库取值 添加mysql数据源 添加后进行配置&#xff0c;我这…

二分判定+选插冒排序+归并快速堆希尔+计数排序

二分力扣题 一&#xff1a;搜索二维矩阵 74. 搜索二维矩阵 按照题意&#xff1a;直接利用二维数组转换成一维数组进行求解 方法一&#xff1a;普通等于的二分查找 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {t…

websevere服务器从零搭建到上线(三)|IO多路复用小总结和服务器的基础框架

文章目录 epollselect和poll的优缺点epoll的原理以及优势epoll 好的网络服务器设计Reactor模型图解Reactor muduo库的Multiple Reactors模型 epoll select和poll的优缺点 1、单个进程能够监视的文件描述符的数量存在最大限制&#xff0c;通常是1024&#xff0c;当然可以更改数…

STM32快速入门(定时器之输入捕获)

STM32快速入门&#xff08;定时器之输入捕获&#xff09; 前言 本节主要讲解STM32利用通用定时器&#xff0c;在输入引脚出现指定电平跳变时&#xff0c;将CNT的值锁存到CCR寄存器当中&#xff0c;从而计算PWM波形的频率、占空比、脉冲间隔、电平持续时间等。其功能的应用有&…

免费思维13招之七:空间型思维

免费思维13招之七:空间型思维 本篇给你带来的是空间型思维。 空间型思维,具体分为内部空间型思维和外部空间型思维。 什么叫内部空间型思维呢? 内部空间型就是充分利用现有空间或资源为社会提供免费服务,积累人气,增加流量,从而带动消费。 为什么你生意不好?为什么你…

ubuntu中的docker记录(5)——如何使用阿里云的镜像加速配置docker镜像加速器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、镜像加速器介绍1. 什么是docker镜像加速器&#xff1f;2. 为什么要配置镜像加速器&#xff1f; 二、配置镜像加速器1. 注册阿里云账号2. 注册镜像容器服务3…