.loan-calc-container { max-width: 500px; margin: 20px auto; padding: 25px 25px 25px 20px; background: #fff; border: 1px solid #eaeaea; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .calc-title { text-align: center; margin-bottom: 30px; } .calc-row { display: flex !important; align-items: center !important; margin-bottom: 15px !important; } .calc-label { flex: 0 0 105px !important;; font-weight: bold !important;; color: #555 !important;; } /* 輸入框組容器：設為相對定位 */ .calc-input-group { position: relative !important; flex: 0 0 1 !important; /* 固定輸入框寬度 */ display: flex !important; } .calc-input-wrap { flex: 0 0 1 !important; } /* 輸入框樣式：右側留白給單位 */ .calc-input-group input { width: 200px !important; height: 40px !important; border: 1px solid #ced4da !important; border-radius: 6px !important; padding: 0 30px 0 12px !important; /* 右側 padding 45px 留給單位 */ box-sizing: border-box !important; } /* 下拉選單維持原樣 */ .calc-input-wrap select { width: 110% !important; height: 40px !important; border: 1px solid #ced4da !important; border-radius: 6px !important; } /* 內嵌單位樣式：定位在輸入框右側內部 */ .input-unit { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: #888 !important; font-weight: bold !important; pointer-events: none !important; /* 點擊單位時依然能觸發 input */ font-size: 14px !important; } #calc-loan-btn { width: 150px; height: 44px; background-color: #0073aa; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } .calc-hr { border: 0; border-top: 1px solid #eee; margin: 25px 0; } .calc-result-box { background: #f8f9fa; padding: 15px; border-radius: 8px; } .res-num { color: #d9534f; font-weight: bold; font-size: 1.2em;padding-left: 10px; } /* 修正 CF7 標籤 */ .wpcf7-form-control-wrap { display: block !important; width: 100% !important; } .calc-row br { display: none !important; } @media (max-width: 480px) { /* .calc-row { flex-direction: column !important; align-items: flex-start !important; }*/ /* .calc-label { margin-bottom: 5px !important; }*/ /* .calc-input-group, #calc-loan-btn { width: 100% !important; flex: 0 0 auto !important; }*/ } .elementor-122 .elementor-element.elementor-element-49b448c .eael-contact-form-7 .wpcf7-form input[type="submit"]{ width: 160px; font-size: 18px; display: flex; } .wpcf7-spinner{margin: 0px 10px 10px -30px;} document.addEventListener('DOMContentLoaded', function() { const typeSelect = document.getElementById('interest-type'); const phase2Section = document.getElementById('phase-2-section'); const phase1Label = document.getElementById('phase-1-label'); const calcBtn = document.getElementById('calc-loan-btn'); typeSelect.addEventListener('change', function() { if (this.value === '二階段階梯利率') { phase2Section.style.display = 'block'; phase1Label.innerText = '一階段利率'; } else { phase2Section.style.display = 'none'; phase1Label.innerText = '年利率'; } }); calcBtn.addEventListener('click', function() { const amountVal = document.querySelector('[name="loan-amount"]').value; const termMonthsVal = document.querySelector('[name="loan-term"]').value; // 這裡現在是月數 const rate1Val = document.querySelector('[name="rate-1"]').value; const paidMonthsVal = parseInt(document.querySelector('[name="paid-months"]').value) || 0; if (!amountVal || !termMonthsVal || !rate1Val) { alert('請填寫完整資訊'); return; } let amount = parseFloat(amountVal) * 10000; const totalMonths = parseInt(termMonthsVal); // 直接使用輸入的月數 const graceMonths = (parseInt(document.querySelector('[name="grace-period"]').value) || 0) * 12; const isTwoPhase = (typeSelect.value === '二階段階梯利率'); const r1 = (parseFloat(rate1Val) / 100) / 12; const r2 = isTwoPhase ? (parseFloat(document.querySelector('[name="rate-2"]').value) / 100) / 12 : r1; const p1EndMonth = isTwoPhase ? (parseInt(document.querySelector('[name="phase-1-years"]').value) * 12) : totalMonths; const repayTotal = totalMonths - graceMonths; if(repayTotal <= 0) { alert('貸款期限必須大於寬限期'); return; } let m1 = (amount * r1 * Math.pow(1 + r1, repayTotal)) / (Math.pow(1 + r1, repayTotal) - 1); let m2 = m1; if(isTwoPhase) { let tempBal = amount; for(let m=1; m <= (p1EndMonth - graceMonths); m++) tempBal -= (m1 - tempBal * r1); const p2RepayMonths = totalMonths - p1EndMonth; m2 = (tempBal * r2 * Math.pow(1 + r2, p2RepayMonths)) / (Math.pow(1 + r2, p2RepayMonths) - 1); } let currentBal = amount; let totalInterest = 0; let stats = { paidP: 0, paidI: 0 }; for (let i = 1; i <= totalMonths; i++) { let rate = (i <= p1EndMonth) ? r1 : r2; let monthly = (i <= p1EndMonth) ? m1 : m2; let intPart = currentBal * rate; let priPart = 0; if (i <= graceMonths) { intPart = amount * rate; priPart = 0; } else { priPart = monthly - intPart; } if (i 0) { document.getElementById('advanced-stats').style.display = 'block'; let actualPaidMonth = Math.min(paidMonthsVal, totalMonths); document.getElementById('stat-month').innerText = actualPaidMonth; document.getElementById('stat-paid-p').innerText = Math.round(stats.paidP).toLocaleString(); document.getElementById('stat-paid-i').innerText = Math.round(stats.paidI).toLocaleString(); document.getElementById('stat-rem-p').innerText = Math.round(amount - stats.paidP).toLocaleString(); document.getElementById('stat-rem-i').innerText = Math.round(totalInterest - stats.paidI).toLocaleString(); } else { document.getElementById('advanced-stats').style.display = 'none'; } }); });