测试页面的弹窗的样式,uniapp

1.效果

2.代码：

<template>
	<view>
	<view>
		 <button @click="togglePopup">点击我</button>
	</view>
	<!-- 输入密码弹窗 -->
			<uni-popup ref="popupMima" type="center">
				<view class="common-dialog">
					<view class="contentt">
						<view class="log-title">您的手机号在平台中已存在<br>请输入密码验证</view>
						<view class="form-row">
							<view class="form-row-tt">密码：</view>
							<view class="form-row-dd">
								<input type="text" v-model="password" placeholder="请输入密码" />
							</view>
						</view>
						<view class="log-footer">
							<!-- <button @click="Close" class="cancel">取消</button> -->
							<button @click="Confirmima" class="ok">确定</button>
						</view>
					</view>
				</view>
			</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				othersPhone: null,
				password: null, //密码
			}
		},
		methods:{
			togglePopup() {
				this.$refs.popupMima.open();
			}
		}
	}
</script>
<style scoped>
.common-dialog {
    width: 300px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0px 0px 0px; /* 将底部内边距设置为0 */
    display: flex;
    flex-direction: column;
}
.contentt {
    flex-grow: 1;
}
.log-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px; /* 如果需要，可以适当减小这里的外边距 */
	color: #000000;
}
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 如果需要，可以适当减小这里的外边距 */
}
.form-row-tt {
	margin-left: 20rpx;
    flex-basis: 70px;
    font-size: 17px;
}
.form-row-dd input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
}
.log-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    flex-direction: row;
}
.cancel {
    padding: 5px 20px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
    width: 49%; /* 将按钮宽度设置为49%以留出一些间隔 */
    text-align: center; /* 保证文本居中 */
    background-color: #ffffff;
    color: #333;
    margin-right: 2%; /* 添加右边距 */
}
.ok {
    padding: 5px 20px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
    width: 49%; /* 将按钮宽度设置为49%以留出一些间隔 */
    text-align: center; /* 保证文本居中 */
    background-color: #ffffff; /* 红色，因为是红包的相关操作 */
    color: #55aaff;
}
</style>