body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #f4f7fa; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 500px; padding: 20px 30px; } h1 { text-align: center; color: #333; } .tips { background-color: #eef3ff; border-left: 4px solid #5b8def; padding: 15px; margin-bottom: 20px; border-radius: 4px; font-size: 14px; color: #333; } .special-notice { background-color: #d6e4ff; padding: 1vh; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-weight: 500; margin-bottom: 5px; color: #555; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="number"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .form-group input:focus { border-color: #5b8def; outline: none; box-shadow: 0 0 5px rgba(91, 141, 239, 0.2); } .form-group input[type="radio"] { margin-right: 10px; } .payment-container { display: flex; align-items: center; gap: 10px; } .payment-label { font-weight: 500; margin-right: 10px; } .payment-option { display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 5px; padding: 8px 15px; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .payment-option.selected { border: 2px solid #5b8def; background-color: rgba(91, 141, 239, 0.1); } .payment-option input[type="radio"] { display: none; } .payment-option span { margin-left: 5px; color: #333; } .payment-option img { width: 24px; height: 24px; } .dot { width: 12px; height: 12px; background-color: #5b8def; border-radius: 50%; margin-right: 8px; } .payment-option.selected .dot { background-color: #007bff; } button { width: 100%; padding: 12px; background-color: #5b8def; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #487acc; } .el-icon { --color: inherit; height: 1em; width: 1em; line-height: 1em; display: inline-flex; justify-content: center; align-items: center; position: relative; fill: currentColor; color: var(--color); font-size: inherit; } .modal { display: none; /* 初始隐藏 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; } .modal-content { background: white; padding: 20px; border-radius: 8px; width: 90%; max-width: 46vh; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative; } .close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; cursor: pointer; } .close-btn:hover, .close-btn:focus { color: black; } .modal-header h2 { display: flex; justify-content: center; /* 标题居中 */ align-items: center; position: relative; } .modal-body { max-height: 45vh; overflow-y: auto; display: flex; /* 添加 Flexbox */ flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ text-align: center; } .modal-footer { margin-top: 15px; text-align: center; } .qr-code { margin-top: 15px; max-width: 100%; height: auto; max-height: 200px; display: block; } .payment-address { margin-top: 10px; font-size: 14px; word-break: break-all; text-align: center; } .address-option { padding: 10px; border-bottom: 1px solid #ccc; cursor: pointer; } .address-option:hover { background: #f1f1f1; }