Uniapp 自定义弹窗

缘不易

于 2024-05-12 09:50:37 发布

阅读量495

点赞数 2

分类专栏： uniapp 文章标签： uni-app css css3

本文链接：https://blog.csdn.net/qq_45834006/article/details/138745563

版权

uniapp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

布局

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