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;
					}
                
			}
		}
	}

效果图

相关推荐
咖啡教室16 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
CodePencil19 小时前
CSS专题之盒模型
前端·css
getyefang20 小时前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH20 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_11 天前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
FanetheDivine1 天前
正确使用flex-1
css·html
芭拉拉小魔仙1 天前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w1 天前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白1 天前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
吞掉星星的鲸鱼1 天前
使用高德api实现天气查询
前端·javascript·css