/* 支付页面样式 */ .pay-container { max-width: 600px; margin: 2rem auto; padding: 0 1rem; } .order-info { background: #f8f9fa; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .payment-method { border: 2px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.3s ease; } .payment-method:hover { border-color: #007bff; background-color: #f8f9fa; } .payment-method.selected { border-color: #007bff; background-color: #e7f3ff; } .qr-code { text-align: center; padding: 2rem; background: #fff; border: 1px solid #dee2e6; border-radius: 0.5rem; margin: 1rem 0; } .payment-status { text-align: center; padding: 3rem 1rem; } .countdown { font-weight: bold; color: #dc3545; font-size: 1.1rem; } .simulate-panel { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border: 2px solid #ffc107 !important; } .simulate-panel h6 { margin-bottom: 0.5rem; } .simulate-panel .btn { min-width: 140px; } .payment-tips { background: #f8f9fa; padding: 1rem; border-radius: 0.5rem; border-left: 4px solid #007bff; } .payment-tips ul { margin-bottom: 0; padding-left: 1.2rem; } .payment-tips li { margin-bottom: 0.3rem; } /* 响应式设计 */ @media (max-width: 768px) { .pay-container { margin: 1rem auto; padding: 0 0.5rem; } .d-md-flex .btn { margin-bottom: 0.5rem; } .simulate-panel .btn { min-width: auto; width: 100%; } } /* 动画效果 */ .payment-status i { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* 按钮状态 */ .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* 支付方式图标 */ .payment-method i { min-width: 60px; } /* 倒计时样式 */ .countdown { background: #fff; padding: 0.2rem 0.5rem; border-radius: 0.25rem; border: 1px solid #dc3545; }