.my-dialog { opacity: 1; } .my-dialog .my-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000; } .my-dialog .my-container { position: fixed; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 3px; overflow: hidden; z-index: 5000; height: 346rpx; } .my-dialog .my-container .title { display: inline-block; width: 100%; margin: 20rpx 0 0 0; height: 50rpx; line-height: 50rpx; text-align: center; font-weight: 400; font-size: 18px; color: #303133; } .my-dialog .my-container .content { margin: 10rpx 0 20rpx; display: inline-block; width: 100%; line-height: 50rpx; text-align: left; height: 130rpx; font-family: SourceHanSansCN-Regular; } .my-dialog .my-container .content .row { margin: 0 10%; width: 80%; word-break: break-all; height: 84rpx; font-size: 36rpx; font-family: PingFang-SC-Regular; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 48rpx; } .my-dialog .my-container .btn-row { padding: 10rpx 0 0; width: 100%; height: 68rpx; line-height: 68rpx; font-size: 18px; border-top: 1rpx solid #c0c4cc; display: flex; } .my-dialog .my-container .btn-row .confirm { float: right; width: 50%; height: 100%; font-size: 36rpx; font-family: PingFang-SC-Medium; font-weight: 500; color: var(--color--); border-right: 1px solid #c0c4cc; } .my-dialog .my-container .btn-row .cancel { float: right; width: calc(50% - 2rpx); height: 100%; border-right: 1rpx solid #c0c4cc; font-size: 36rpx; font-family: PingFang-SC-Medium; font-weight: 500; color: rgba(153, 153, 153, 1); } .confirm { width: 220rpx; height: 80rpx; border: 2rpx solid var(--color--); border-radius: 10rpx; line-height: 80rpx; } .cancel { width: 220rpx; height: 80rpx; background: var(--color--); border-radius: 10rpx; font-size: 36rpx; font-family: PingFang-SC-Medium; font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 80rpx; } .rows { width: 90%; margin: auto auto; display: flex; flex-direction: row; justify-content: space-around; }