.container { min-height: 100vh; background-color: #f8fafc; display: flex; flex-direction: column; align-items: center; padding: 40rpx 0; } .poster-preview { position: relative; width: 600rpx; min-height: 800rpx; background-color: #fff; border-radius: 32rpx; box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.1); overflow: hidden; } .poster-img { width: 100%; display: block; } .loading-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; } .loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid #f3f4f6; border-top: 4rpx solid #f43f5e; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20rpx; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { font-size: 24rpx; color: #64748b; } .action-bar { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 40rpx; display: flex; flex-direction: column; align-items: center; border-radius: 40rpx 40rpx 0 0; box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05); } .save-btn { width: 100% !important; height: 100rpx; background: #f43f5e; color: #fff; border-radius: 24rpx; font-size: 32rpx; font-weight: bold; box-shadow: 0 10rpx 20rpx rgba(244, 63, 94, 0.2); margin-bottom: 20rpx; } .save-btn[disabled] { background: #cbd5e1; box-shadow: none; } .tip-text { font-size: 24rpx; color: #94a3b8; margin-bottom: 20rpx; } .safe-bottom { height: env(safe-area-inset-bottom); }