如何为JavaScript生成的单页QR票证应用匹配目标CSS样式？

我希望为JavaScript生成的单页QR票证应用实现与目标效果完全一致的CSS样式，但调试现有CSS未达到预期效果。我不熟悉在JavaScript函数中添加CSS，尝试了不同的内联样式但未达到预期效果。

当前代码 #

function openQRCodeWindow(registrationId) {
  var qrCodeImage = generatedQRCode._el.firstChild.toDataURL("image/png");
  var firstName = document.getElementById("first-name").value;
  var lastName = document.getElementById("last-name").value;
  var email = document.getElementById("email").value;
  var contactNumber = document.getElementById("contact-number").value;
  var seatNumber = document.getElementById("seat-number").textContent;

  var newWindow = window.open();
  newWindow.document.write('<style>');
  newWindow.document.write('body { display: flex; flex-direction: column; align-items: center; background-image: url("megapolis background.png"); background-size: cover; }');
  newWindow.document.write('.container { display: flex; justify-content: space-between; align-items: center; padding: 50px; border: 2px solid #ccc; border-radius: 10px; width: 400px; }');
  newWindow.document.write('.qr-container { margin-right: 20px; }');
  newWindow.document.write('.details-container { text-align: right; }');
  newWindow.document.write('.button-container { margin-top: 20px; text-align: center; }');
  newWindow.document.write('.button-container button { margin: 0 5px; }');
  newWindow.document.write('</style>');

  newWindow.document.write('<h2>QR Code</h2>'); // Place the QR code title here
  newWindow.document.write('<div class="container" id="form-container">');
  newWindow.document.write('<div class="qr-container">');
  newWindow.document.write('<img src="' + qrCodeImage + '">');
  newWindow.document.write('</div>');
  newWindow.document.write('<div class="details-container">');
  newWindow.document.write('<h3>Details</h3>');
  newWindow.document.write('<p>Registration ID: ' + registrationId + '</p>'); // Display the Firebase-generated ID
  newWindow.document.write('<p>First Name: ' + firstName + '</p>');
  newWindow.document.write('<p>Last Name: ' + lastName + '</p>');
  newWindow.document.write('<p>Email: ' + email + '</p>');
  newWindow.document.write('<p>Contact Number: ' + contactNumber + '</p>');
  newWindow.document.write('<p>' + seatNumber + '</p>');
  newWindow.document.write('</div>');
  newWindow.document.write('</div>');
  newWindow.document.write('<div class="button-container">');
  newWindow.document.write('<button id="save-image-btn">Save Image</button>');
  newWindow.document.write('<button id="email-btn">Email</button>');
  newWindow.document.write('</div>');
  newWindow.document.close();
}

修复后的代码及说明 #

针对目标效果，调整CSS样式如下，重点优化了容器背景、排版布局、文字样式和元素对齐：

function openQRCodeWindow(registrationId) {
  var qrCodeImage = generatedQRCode._el.firstChild.toDataURL("image/png");
  var firstName = document.getElementById("first-name").value;
  var lastName = document.getElementById("last-name").value;
  var email = document.getElementById("email").value;
  var contactNumber = document.getElementById("contact-number").value;
  var seatNumber = document.getElementById("seat-number").textContent;

  var newWindow = window.open();
  newWindow.document.write('<style>');
  // 优化body样式，确保背景全屏覆盖，添加最小高度和字体设置
  newWindow.document.write('body { margin: 0; padding: 2rem; display: flex; flex-direction: column; align-items: center; min-height: 100vh; background-image: url("megapolis background.png"); background-size: cover; background-position: center; font-family: Arial, sans-serif; }');
  // 容器添加白色背景、阴影，调整宽度和内边距，确保内容垂直对齐
  newWindow.document.write('.container { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 2rem; border: 2px solid #ddd; border-radius: 12px; width: 800px; max-width: 90%; background-color: rgba(255,255,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }');
  // 固定QR码大小，避免拉伸
  newWindow.document.write('.qr-container img { width: 180px; height: 180px; border: 1px solid #eee; border-radius: 8px; }');
  // 调整详情区域的文字对齐和间距
  newWindow.document.write('.details-container { text-align: left; flex: 1; }');
  newWindow.document.write('.details-container h3 { margin-top: 0; color: #2d3748; font-size: 1.4rem; }');
  newWindow.document.write('.details-container p { margin: 0.5rem 0; color: #4a5568; font-size: 1rem; line-height: 1.5; }');
  // 标题样式调整
  newWindow.document.write('h2 { color: #2d3748; margin-bottom: 1.5rem; font-size: 1.8rem; }');
  // 按钮样式优化
  newWindow.document.write('.button-container { margin-top: 2rem; display: flex; gap: 1rem; }');
  newWindow.document.write('.button-container button { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; background-color: #3182ce; color: white; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; }');
  newWindow.document.write('.button-container button:hover { background-color: #2b6cb0; }');
  newWindow.document.write('</style>');

  newWindow.document.write('<h2>QR Code</h2>');
  newWindow.document.write('<div class="container" id="form-container">');
  newWindow.document.write('<div class="qr-container">');
  newWindow.document.write('<img src="' + qrCodeImage + '">');
  newWindow.document.write('</div>');
  newWindow.document.write('<div class="details-container">');
  newWindow.document.write('<h3>Details</h3>');
  newWindow.document.write('<p><strong>Registration ID:</strong> ' + registrationId + '</p>');
  newWindow.document.write('<p><strong>First Name:</strong> ' + firstName + '</p>');
  newWindow.document.write('<p><strong>Last Name:</strong> ' + lastName + '</p>');
  newWindow.document.write('<p><strong>Email:</strong> ' + email + '</p>');
  newWindow.document.write('<p><strong>Contact Number:</strong> ' + contactNumber + '</p>');
  newWindow.document.write('<p><strong>Seat Number:</strong> ' + seatNumber + '</p>');
  newWindow.document.write('</div>');
  newWindow.document.write('</div>');
  newWindow.document.write('<div class="button-container">');
  newWindow.document.write('<button id="save-image-btn">Save Image</button>');
  newWindow.document.write('<button id="email-btn">Email</button>');
  newWindow.document.write('</div>');
  newWindow.document.close();
}

修改要点 #

• Body样式：添加margin:0消除默认边距，min-height:100vh确保背景覆盖全屏，background-position:center让背景图居中显示，统一字体为无衬线字体提升可读性。
• 容器样式：增大容器宽度到800px（适配更多内容），添加半透明白色背景和阴影增强层次感，将align-items改为flex-start让内容顶部对齐，用gap替代margin-right实现更灵活的间距。
• QR码样式：固定QR码尺寸，添加边框和圆角，避免图片变形。
• 详情区域：将文字对齐改为左对齐（更符合阅读习惯），为标签添加粗体强调，调整文字颜色和行高提升可读性。
• 按钮样式：优化按钮的 padding、背景色和 hover 效果，提升交互体验。

内容的提问来源于stack exchange，提问作者Austin Lopez De Leon