/* 整体遮罩背景 */ page { height: 100%; overflow: hidden; } .overlay { height: 100vh; width: 100vw; background: radial-gradient(circle at top, #1b1b3a, #0d0d1f); display: flex; justify-content: center; align-items: center; } /* 弹窗卡片 */ .modal { width: 75%; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20rpx); border-radius: 30rpx; padding: 50rpx 40rpx; opacity: 0; transform: translateY(40rpx); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: 0 0 40rpx rgba(122, 92, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } /* 动画显示 */ .modal-show { opacity: 1; transform: translateY(0); } /* 标题 */ .title { font-size: 38rpx; font-weight: bold; color: #ffffff; text-align: center; margin-bottom: 40rpx; text-shadow: 0 2rpx 10rpx rgba(122, 92, 255, 0.5); } /* 内容区域 */ .content { height: 300rpx; margin-bottom: 50rpx; } /* 文本 */ .text { font-size: 28rpx; color: #ddddff; line-height: 1.8; text-align: center; } /* 链接 */ .link { color: #b499ff; margin-top: 30rpx; display: block; text-align: center; text-decoration: underline; font-size: 26rpx; } /* 按钮 */ .agree-btn { background: linear-gradient(135deg, #7a5cff, #b499ff); color: #ffffff; border-radius: 60rpx; font-size: 32rpx; padding: 10rpx 0; box-shadow: 0 8rpx 30rpx rgba(122, 92, 255, 0.4); font-weight: bold; border: none; } .agree-btn:active { transform: scale(0.96); box-shadow: 0 4rpx 15rpx rgba(122, 92, 255, 0.4); }