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

效果图

相关推荐
Giant10010 分钟前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
Sherry00716 分钟前
【译】掌握 Flexbox 的终极指南:从烤肉串到鸡尾酒香肠的布局哲学
css·面试·flexbox
!win !1 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw52 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
那一抹阳光多灿烂3 小时前
CSS 编码规范
前端·css
degree5203 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・3 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'3 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css
三角叶蕨3 小时前
javaweb CSS
css·web
ice breaker3 小时前
tailwindcss 究竟比 unocss 快多少?
css·unocss·tailwindcss