.page-total{ position: fixed; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999; // position: fixed; /* 固定定位,覆盖整个视口 */ // top: 0; // left: 0; // width: 100%; // height: 100%; // background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ // display: flex; /* 使用 Flexbox 居中 */ // justify-content: center; /* 水平居中 */ // align-items: center; /* 垂直居中 */ // z-index: 1000; /* 确保它处于最前面 */ } .box{ display: flex; justify-content: center; width: 100%; } /* 文件重命名 */ .dialog-box{ background-color: #ffffff; width:auto;height:auto; padding:10rpx 50rpx; border-radius: 8rpx; overflow: hidden; position: relative; display: flex;flex-direction: row;justify-content: center;align-items: center; .title{ display: flex; justify-content: center; align-items: center; width: 100%; font-size: 28rpx; color: #000000; } } .a-fadein, .a-fadeinT, .a-fadeinR, .a-fadeinB, .a-fadeinL, .a-bouncein, .a-bounceinT, .a-bounceinR, .a-bounceinB, .a-bounceinL, .a-rotatein, .a-rotateinLT, .a-rotateinLB, .a-rotateinRT, .a-rotateinRB, .a-flipin, .a-flipinX, .a-flipinY { -webkit-animation: .3s ease-out backwards; -moz-animation: .3s ease-out backwards; -ms-animation: .3s ease-out backwards; -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .a-fadeout, .a-fadeoutT, .a-fadeoutR, .a-fadeoutB, .a-fadeoutL, .a-bounceout, .a-bounceoutT, .a-bounceoutR, .a-bounceoutB, .a-bounceoutL, .a-rotateout, .a-rotateoutLT, .a-rotateoutLB, .a-rotateoutRT, .a-rotateoutRB, .a-flipoutX, .a-flipoutY { -webkit-animation: .3s ease-in forwards; -moz-animation: .3s ease-in forwards; -ms-animation: .3s ease-in forwards; animation: .3s ease-in forwards; -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* 淡入 */ .a-fadein { -webkit-animation-name: fadein; -moz-animation-name: fadein; -ms-animation-name: fadein; animation-name: fadein; } /* 淡出 */ .a-fadeout { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; -ms-animation-name: fadeout; animation-name: fadeout; } /* 弹入 */ .a-bouncein { -webkit-animation-name: bouncein; -moz-animation-name: bouncein; -ms-animation-name: bouncein; animation-name: bouncein; } /* 弹出 */ .a-bounceout { -webkit-animation-name: bounceout; -moz-animation-name: bounceout; -ms-animation-name: bounceout; animation-name: bounceout; } /* 淡入 */ @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* 淡出 */ @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* 弹入 */ @keyframes bouncein { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } } /* 弹出 */ @keyframes bounceout { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }