.page { min-height: 100vh; background-color: #F8F9FC; display: flex; flex-direction: column; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 60rpx; } .poster-swiper { width: 100%; height: 1000rpx; margin-top: 40rpx; } .poster-item { display: flex; justify-content: center; align-items: center; } .poster-card { width: 540rpx; height: 960rpx; border-radius: 20rpx; overflow: hidden; position: relative; transform: scale(0.9); transition: all 0.3s ease; box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.1); } .poster-card.active { transform: scale(1); box-shadow: 0 20rpx 40rpx rgba(176, 106, 179, 0.3); } .poster-img { width: 100%; height: 100%; background: #eee; } .qr-overlay { position: absolute; width: 130rpx; height: 130rpx; background: #fff; padding: 10rpx; border-radius: 12rpx; } .qr-img { width: 100%; height: 100%; } .action-area { margin-top: 60rpx; width: 80%; display: flex; flex-direction: column; gap: 24rpx; } .save-btn { background: linear-gradient(135deg, #CF91D3 0%, #B06AB3 100%); color: white; font-weight: 600; border-radius: 50rpx; width: 100%; padding: 24rpx 0; font-size: 30rpx; } .share-btn { background: white; color: #B06AB3; font-weight: 600; border-radius: 50rpx; width: 100%; padding: 24rpx 0; font-size: 30rpx; border: 2rpx solid #B06AB3; } .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; color: #9ca3af; font-size: 28rpx; } .loading-spinner { width: 60rpx; height: 60rpx; border: 6rpx solid #f3f3f3; border-top: 6rpx solid #B06AB3; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20rpx; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }