Uniapp 自定义弹窗

布局

html 复制代码
<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>

样式

css 复制代码
.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;
					}
                
			}
		}
	}

效果图

相关推荐
三巧8 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
软件技术NINI8 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
街尾杂货店&9 小时前
css word
前端·css
七七小报12 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
换日线°12 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
爱上大树的小猪12 小时前
【前端基础】viewport 元标签的详细参数解析与实战指南
前端·css·面试
喵爱吃鱼12 小时前
Flex布局和省略号
前端·css·flexbox
张张张31212 小时前
4.23-4.26学习总结 HTML—CSS常见标签和样式
css·学习·html
代码对我眨眼睛13 小时前
404页面精选(一)翻滚盒子
前端·css
软件开发技术深度爱好者13 小时前
CSS3布局方式介绍
前端·javascript·css3