<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>西安联通专线+终端合约测算工具</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
/* 2024潘通流行色组合 */
--primary-color: #e63946; /* 活力红 - 主色 */
--secondary-color: #f1faee; /* 薄荷霜 - 背景色 */
--accent-color: #a8dadc; /* 浅湖蓝 - 强调色 */
--dark-accent: #457b9d; /* 深海蓝 - 深色强调 */
--neutral-light: #f8f9fa; /* 浅灰 */
--neutral-mid: #e9ecef; /* 中灰 */
--neutral-dark: #212529; /* 深灰 */
--success-color: #2a9d8f; /* 成功色 */
--error-color: #e76f51; /* 错误色 */
--border-radius: 16px;
--box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, var(--secondary-color) 0%, #d8e2dc 100%);
color: var(--neutral-dark);
line-height: 1.6;
padding: 40px 20px;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
transform: translateY(0);
transition: var(--transition);
position: relative;
}
.container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.app-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #d00000 100%);
color: white;
padding: 35px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.app-header::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.app-header::after {
content: "";
position: absolute;
bottom: -80px;
left: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.app-header h1 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 12px;
position: relative;
z-index: 2;
}
.app-header p {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.app-content {
padding: 40px;
display: grid;
grid-template-columns: 1fr;
gap: 35px;
}
@media (min-width: 992px) {
.app-content {
grid-template-columns: 1fr 1fr;
}
}
.section {
background: var(--neutral-light);
border-radius: var(--border-radius);
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
transition: var(--transition);
}
.section:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.section-title {
display: flex;
align-items: center;
color: var(--primary-color);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 2px solid var(--neutral-mid);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 70px;
height: 2px;
background: var(--primary-color);
}
.section-title i {
margin-right: 12px;
background: rgba(230, 57, 70, 0.15);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0 25px;
}
.radio-btn {
flex: 1;
min-width: 120px;
padding: 18px 15px;
border: 1px solid var(--neutral-mid);
border-radius: 12px;
cursor: pointer;
transition: var(--transition);
background: white;
color: var(--neutral-dark);
text-align: center;
font-weight: 500;
position: relative;
overflow: hidden;
}
.radio-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, transparent 50%, rgba(230, 57, 70, 0.05) 100%);
z-index: 1;
}
.radio-btn:hover {
border-color: var(--primary-color);
background: rgba(230, 57, 70, 0.03);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(230, 57, 70, 0.1);
}
.radio-btn.active {
border-color: var(--primary-color);
background: rgba(230, 57, 70, 0.08);
color: var(--primary-color);
box-shadow: 0 5px 15px rgba(230, 57, 70, 0.1);
}
.radio-btn.active::after {
content: '✓';
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
background: var(--primary-color);
color: white;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.input-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.input-grid {
grid-template-columns: 1fr 1fr;
}
}
.input-item {
display: flex;
flex-direction: column;
gap: 10px;
}
.input-item label {
font-weight: 500;
font-size: 1rem;
display: flex;
align-items: center;
}
.input-item label i {
margin-right: 8px;
color: var(--dark-accent);
}
.input-field {
position: relative;
}
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--dark-accent);
}
input[type="number"] {
width: 100%;
padding: 16px 16px 16px 45px;
border: 1px solid var(--neutral-mid);
border-radius: 10px;
font-size: 1rem;
transition: var(--transition);
background: white;
font-weight: 500;
}
input[type="number"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2);
}
.error-tip {
color: var(--error-color);
font-size: 0.85rem;
height: 20px;
margin-top: 5px;
padding-left: 25px;
position: relative;
display: none;
}
.error-tip::before {
content: '!';
position: absolute;
left: 0;
top: 1px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--error-color);
color: white;
font-size: 0.8rem;
text-align: center;
line-height: 18px;
}
.error-tip.visible {
display: block;
}
.result-box {
background: linear-gradient(135deg, var(--neutral-light) 0%, #f0f4f8 100%);
padding: 30px;
border-radius: var(--border-radius);
margin-top: 10px;
position: relative;
overflow: hidden;
border: 1px solid var(--neutral-mid);
}
.result-box::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
background: rgba(230, 57, 70, 0.05);
border-radius: 50%;
}
.result-box::after {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 100px;
height: 100px;
background: rgba(69, 123, 157, 0.05);
border-radius: 50%;
}
.result-item {
margin: 18px 0;
font-size: 1.25rem;
display: flex;
justify-content: space-between;
}
.result-value {
color: var(--primary-color);
font-weight: 700;
font-size: 1.4rem;
}
.calculation-steps {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--neutral-mid);
}
.step-item {
margin: 12px 0;
font-size: 1rem;
line-height: 1.7;
color: #555;
display: flex;
}
.step-label {
color: var(--dark-accent);
font-weight: 500;
min-width: 120px;
}
.formula {
background: rgba(168, 218, 220, 0.2);
padding: 15px;
border-radius: 10px;
margin-top: 15px;
font-family: monospace;
font-size: 1.1rem;
text-align: center;
}
.summary-card {
background: linear-gradient(135deg, var(--dark-accent) 0%, #1d3557 100%);
color: white;
border-radius: var(--border-radius);
padding: 30px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.summary-card h3 {
font-size: 1.4rem;
margin-bottom: 25px;
color: var(--accent-color);
}
.summary-value {
font-size: 3rem;
font-weight: 700;
margin: 15px 0;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.summary-label {
font-size: 1.1rem;
opacity: 0.85;
margin-top: 10px;
}
.app-footer {
text-align: center;
padding: 25px;
color: var(--neutral-dark);
font-size: 0.9rem;
opacity: 0.7;
border-top: 1px solid var(--neutral-mid);
}
/* 新增样式：隐藏计算结果 */
.results-hidden {
display: none;
}
.prompt-box {
background: rgba(168, 218, 220, 0.2);
padding: 20px;
border-radius: 10px;
text-align: center;
margin-top: 20px;
color: var(--dark-accent);
border: 1px dashed var(--dark-accent);
}
.prompt-box i {
font-size: 2rem;
margin-bottom: 15px;
color: var(--dark-accent);
}
@media (max-width: 768px) {
.app-header {
padding: 25px 20px;
}
.app-header h1 {
font-size: 1.8rem;
}
.app-content {
padding: 25px 20px;
gap: 25px;
}
.section {
padding: 25px 20px;
}
.summary-value {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="app-header">
<h1>西安联通专线+终端合约测算工具</h1>
<p>双线合约与终端补贴测算工具 - 精准计算客户合约价值</p>
</div>
<div class="app-content">
<div class="input-section">
<!-- 第一部分：费用输入 -->
<div class="section">
<h3 class="section-title"><i class="fas fa-calculator"></i>费用录入</h3>
<div class="input-grid">
<div class="input-item">
<label><i class="fas fa-file-contract"></i>合同总额（元/月）</label>
<div class="input-field">
<i class="fas fa-dollar-sign"></i>
<input type="number" id="totalFee" placeholder="自动计算或输入">
</div>
<div class="error-tip" id="totalError"></div>
</div>
<div class="input-item">
<label><i class="fas fa-network-wired"></i>专线实际月租（元/月）</label>
<div class="input-field">
<i class="fas fa-server"></i>
<input type="number" id="lineFee" placeholder="≥2500">
</div>
<div class="error-tip" id="lineError"></div>
</div>
<div class="input-item">
<label><i class="fas fa-mobile-alt"></i>终端合约包（元/月）</label>
<div class="input-field">
<i class="fas fa-box"></i>
<input type="number" id="terminalFee" placeholder="100-5000">
</div>
<div class="error-tip" id="terminalError"></div>
</div>
</div>
</div>
<!-- 第二部分：合约期数选择 -->
<div class="section">
<h3 class="section-title"><i class="fas fa-calendar-alt"></i>选择合约期数</h3>
<div class="radio-group" id="termGroup">
<div class="radio-btn" data-term="12" data-rate="0.1">
<div>12期合约</div>
<small>税率10%</small>
</div>
<div class="radio-btn" data-term="24" data-rate="0.16">
<div>24期合约</div>
<small>税率16%</small>
</div>
<div class="radio-btn" data-term="36" data-rate="0.23">
<div>36期合约</div>
<small>税率23%</small>
</div>
</div>
<div class="result-item">
<span>当前选择税率：</span>
<span class="result-value" id="currentRate">未选择</span>
</div>
</div>
<!-- 第三部分：测算结果 -->
<div class="section" id="resultsSection">
<h3 class="section-title"><i class="fas fa-chart-line"></i>终端直降金额</h3>
<div class="prompt-box" id="promptBox">
<i class="fas fa-info-circle"></i>
<p>请先选择合约期数并输入费用信息以查看计算结果</p>
</div>
<div class="result-box" id="resultBox" style="display: none;">
<div class="result-item">
<span>可获得终端直降金额：</span>
<span class="result-value" id="terminalSubsidy">0.00 元</span>
</div>
<div class="calculation-steps">
<div class="step-item">
<span class="step-label">合约期数：</span>
<span id="stepTerm">24</span> 期
</div>
<div class="step-item">
<span class="step-label">对应税率：</span>
<span id="stepRate">16%</span>
</div>
<div class="step-item">
<span class="step-label">终端合约包月费：</span>
<span id="stepTerminalFee">0.00</span> 元
</div>
<div class="step-item">
<span class="step-label">计算公式：</span>
<span>终端直降金额 = (终端合约包月费 × 期数) / (1 + 税率)</span>
</div>
<div class="formula">
<span id="stepFormula">(0.00 × 24) ÷ (1 + 0.16) = 0.00 元</span>
</div>
</div>
</div>
</div>
</div>
<div class="summary-section">
<div class="summary-card">
<h3><i class="fas fa-trophy"></i> 终端补贴总额</h3>
<div class="summary-value" id="summaryValue">请先选择合约期数</div>
<div class="summary-label">基于您输入的参数计算得出</div>
</div>
<div class="section">
<h3 class="section-title"><i class="fas fa-lightbulb"></i>使用说明</h3>
<div class="calculation-steps">
<div class="step-item">
<span class="step-label"><i class="fas fa-check-circle"></i> 步骤一：</span>
<span>输入合同总额、专线月租和终端月费</span>
</div>
<div class="step-item">
<span class="step-label"><i class="fas fa-check-circle"></i> 步骤二：</span>
<span>选择合约期数（12/24/36个月）</span>
</div>
<div class="step-item">
<span class="step-label"><i class="fas fa-check-circle"></i> 步骤三：</span>
<span>系统自动计算终端直降金额</span>
</div>
<div class="step-item">
<span class="step-label"><i class="fas fa-exclamation-triangle"></i> 注意：</span>
<span>专线月租 ≥2500元，终端月费100-5000元</span>
</div>
</div>
</div>
</div>
</div>
<div class="app-footer">
<p>© 西安联通 | 政企BG联网BU | 李昭兴</p>
</div>
</div>
<script>
// 初始化变量
let selectedTerm = 0;
let selectedRate = 0;
let isTermSelected = false;
// 期数选择事件
document.querySelectorAll('.radio-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.radio-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
selectedTerm = parseInt(btn.dataset.term);
selectedRate = parseFloat(btn.dataset.rate);
document.getElementById('currentRate').textContent = (selectedRate * 100).toFixed(1) + '%';
isTermSelected = true;
// 显示计算结果
toggleResultsDisplay();
calculateAll();
});
});
// 输入框事件监听
const inputs = ['totalFee', 'lineFee', 'terminalFee'];
inputs.forEach(id => {
document.getElementById(id).addEventListener('input', () => {
if (isTermSelected) {
calculateAll();
}
});
});
// 切换结果显示
function toggleResultsDisplay() {
const resultBox = document.getElementById('resultBox');
const promptBox = document.getElementById('promptBox');
const summaryValue = document.getElementById('summaryValue');
if (isTermSelected) {
promptBox.style.display = 'none';
resultBox.style.display = 'block';
summaryValue.innerHTML = '¥0.00';
} else {
promptBox.style.display = 'block';
resultBox.style.display = 'none';
summaryValue.innerHTML = '请先选择合约期数';
}
}
// 核心计算函数
function calculateAll() {
const total = parseFloat(document.getElementById('totalFee').value) || 0;
const line = parseFloat(document.getElementById('lineFee').value) || 0;
const terminal = parseFloat(document.getElementById('terminalFee').value) || 0;
if (event?.target.id === 'totalFee') {
if (line > 0) document.getElementById('terminalFee').value = (total - line).toFixed(2);
else if (terminal > 0) document.getElementById('lineFee').value = (total - terminal).toFixed(2);
}
if (event?.target.id === 'lineFee') {
if (total > 0) document.getElementById('terminalFee').value = (total - line).toFixed(2);
else if (terminal > 0) document.getElementById('totalFee').value = (line + terminal).toFixed(2);
}
if (event?.target.id === 'terminalFee') {
if (total > 0) document.getElementById('lineFee').value = (total - terminal).toFixed(2);
else if (line > 0) document.getElementById('totalFee').value = (line + terminal).toFixed(2);
}
const lineError = document.getElementById('lineError');
lineError.classList.toggle('visible', line < 2500 && line > 0);
lineError.textContent = line < 2500 ? '专线月租不得低于2500元基准值' : '';
const terminalError = document.getElementById('terminalError');
terminalError.classList.toggle('visible', (terminal < 100 || terminal > 5000) && terminal > 0);
terminalError.textContent = terminal < 100 ? '终端合约包不得低于100元' :
terminal > 5000 ? '终端合约包不得超过5000元' : '';
let subsidy = 0;
if (isTermSelected && terminal > 0 && selectedTerm > 0) {
subsidy = (terminal * selectedTerm) / (1 + selectedRate);
document.getElementById('terminalSubsidy').textContent = subsidy.toFixed(2) + ' 元';
document.getElementById('summaryValue').textContent = '¥' + subsidy.toFixed(2);
} else if (isTermSelected) {
document.getElementById('terminalSubsidy').textContent = '0.00 元';
document.getElementById('summaryValue').textContent = '¥0.00';
}
document.getElementById('stepTerm').textContent = selectedTerm;
document.getElementById('stepRate').textContent = (selectedRate * 100).toFixed(1) + '%';
document.getElementById('stepTerminalFee').textContent = terminal.toFixed(2);
const ratePercent = (selectedRate * 100).toFixed(1);
document.getElementById('stepFormula').textContent =
`(${terminal.toFixed(2)} × ${selectedTerm}) ÷ (1 + ${ratePercent}%) = ${subsidy.toFixed(2)} 元`;
}
// 初始化
document.getElementById('currentRate').textContent = '未选择';
toggleResultsDisplay();
// 添加动画效果
document.querySelectorAll('.section').forEach((section, index) => {
section.style.opacity = "0";
section.style.transform = "translateY(20px)";
setTimeout(() => {
section.style.transition = "opacity 0.5s ease, transform 0.5s ease";
section.style.opacity = "1";
section.style.transform = "translateY(0)";
}, 300 + index * 150);
});
</script>
</body>
</html>
index.html