<!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>
/* 潘通2025流行色定义 */
:root {
--crystal-rose: #f9c5d1; /* 水晶玫瑰 */
--tranquil-blue: #c7d9e9; /* 宁静蓝 */
--mint-green: #d1e9d2; /* 薄荷绿 */
--soft-ivory: #f8f5f0; /* 柔和象牙 */
--deep-burgundy: #8c1d40; /* 深勃艮第红 */
--light-gold: #f5e1a4; /* 浅金色 */
--text-dark: #333333;
--text-medium: #666666;
--text-light: #999999;
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
--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, Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, var(--soft-ivory) 0%, #f9f0f5 100%);
color: var(--text-dark);
line-height: 1.6;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 320px;
background: linear-gradient(135deg, var(--crystal-rose) 0%, #f8d7e3 100%);
z-index: -1;
border-radius: 0 0 40% 40%;
}
/* 容器样式 */
.container {
width: 100%;
max-width: 1200px;
padding: 30px 20px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
/* 头部样式 */
.header {
text-align: center;
padding: 40px 0 20px;
position: relative;
}
.header h1 {
font-size: 2.8rem;
font-weight: 700;
color: var(--deep-burgundy);
margin-bottom: 12px;
letter-spacing: -0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.header p {
font-size: 1.2rem;
color: var(--text-medium);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
.header::after {
content: "";
display: block;
width: 80px;
height: 4px;
background: var(--light-gold);
margin: 25px auto;
border-radius: 2px;
}
/* 卡片样式 */
.card {
background: white;
border-radius: 20px;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition);
position: relative;
z-index: 1;
padding: 30px;
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.card-icon {
width: 50px;
height: 50px;
background: var(--crystal-rose);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: var(--deep-burgundy);
font-size: 1.4rem;
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--deep-burgundy);
}
/* 表单样式 */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
font-size: 1rem;
font-weight: 500;
color: var(--text-dark);
margin-bottom: 10px;
display: flex;
align-items: center;
}
.form-group label i {
margin-right: 8px;
color: var(--deep-burgundy);
}
.input-container {
position: relative;
}
input[type="number"] {
width: 100%;
padding: 16px 20px;
border: 1px solid #e0e0e0;
border-radius: 12px;
font-size: 1rem;
background: white;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
input[type="number"]:focus {
border-color: var(--crystal-rose);
box-shadow: 0 0 0 3px rgba(249, 197, 209, 0.3);
outline: none;
}
/* 选项组样式 */
.option-group {
background: linear-gradient(to right, rgba(249, 197, 209, 0.1) 0%, rgba(249, 197, 209, 0.03) 100%);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.option-group-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--deep-burgundy);
margin-bottom: 15px;
display: flex;
align-items: center;
}
.option-group-title i {
margin-right: 10px;
}
.radio-group {
display: flex;
gap: 25px;
margin-bottom: 15px;
}
.radio-option {
display: flex;
align-items: center;
}
.radio-option input[type="radio"] {
display: none;
}
.radio-option label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: var(--text-medium);
transition: var(--transition);
position: relative;
padding-left: 32px;
}
.radio-option label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 2px solid #ddd;
border-radius: 50%;
transition: var(--transition);
}
.radio-option label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 12px;
height: 12px;
background: var(--deep-burgundy);
border-radius: 50%;
transition: var(--transition);
}
.radio-option input[type="radio"]:checked + label {
color: var(--deep-burgundy);
}
.radio-option input[type="radio"]:checked + label::before {
border-color: var(--deep-burgundy);
}
.radio-option input[type="radio"]:checked + label::after {
transform: translateY(-50%) scale(1);
}
/* 子选项组样式 */
.sub-option-group {
padding: 20px;
background: white;
border-radius: 14px;
margin-top: 15px;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.03);
opacity: 0;
height: 0;
overflow: hidden;
transition: var(--transition);
}
.sub-option-group.visible {
opacity: 1;
height: auto;
padding: 20px;
margin-top: 15px;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.checkbox-option {
display: flex;
align-items: center;
}
.checkbox-option input[type="checkbox"] {
display: none;
}
.checkbox-option label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: var(--text-medium);
transition: var(--transition);
position: relative;
padding-left: 32px;
}
.checkbox-option label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 5px;
transition: var(--transition);
}
.checkbox-option label::after {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%) scale(0);
color: white;
font-size: 12px;
transition: var(--transition);
}
.checkbox-option input[type="checkbox"]:checked + label {
color: var(--deep-burgundy);
}
.checkbox-option input[type="checkbox"]:checked + label::before {
background: var(--deep-burgundy);
border-color: var(--deep-burgundy);
}
.checkbox-option input[type="checkbox"]:checked + label::after {
transform: translateY(-50%) scale(1);
}
/* 按钮样式 */
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
button {
background: linear-gradient(135deg, var(--deep-burgundy) 0%, #a02255 100%);
color: white;
border: none;
border-radius: 14px;
padding: 18px 45px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(140, 29, 64, 0.3);
background: linear-gradient(135deg, #a02255 0%, var(--deep-burgundy) 100%);
}
button:active {
transform: translateY(0);
}
/* 结果样式 */
.results-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.result-card {
background: linear-gradient(135deg, rgba(249, 197, 209, 0.1) 0%, rgba(199, 217, 233, 0.1) 100%);
border-radius: 18px;
padding: 25px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.result-card h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--deep-burgundy);
margin-bottom: 20px;
display: flex;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.result-card h3 i {
margin-right: 10px;
}
.result-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.result-item:last-child {
border-bottom: none;
}
.result-label {
font-weight: 500;
color: var(--text-medium);
}
.result-value {
font-weight: 600;
color: var(--deep-burgundy);
}
.highlight {
color: #e74c3c;
font-weight: 700;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 20px 15px;
gap: 20px;
}
.header h1 {
font-size: 2.2rem;
}
.header p {
font-size: 1rem;
}
.card {
padding: 25px 20px;
}
.form-grid {
grid-template-columns: 1fr;
}
.radio-group {
flex-direction: column;
gap: 12px;
}
}
@media (max-width: 480px) {
.header h1 {
font-size: 1.8rem;
}
.card-title {
font-size: 1.3rem;
}
.checkbox-group {
grid-template-columns: 1fr;
}
button {
width: 100%;
padding: 16px;
}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fadeIn 0.6s ease-out forwards;
}
.card:nth-child(2) {
animation-delay: 0.1s;
}
.card:nth-child(3) {
animation-delay: 0.2s;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>酒店场景预算模板</h1>
<p>酒店预算规划工具，帮助您高效计算酒店组网方案</p>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-hotel"></i>
</div>
<h2 class="card-title">基础参数配置</h2>
</div>
<form id="calcForm">
<div class="form-grid">
<div class="form-group">
<label for="roomCount">
<i class="fas fa-door-open"></i> 房间数
</label>
<div class="input-container">
<input type="number" id="roomCount" name="roomCount" placeholder="请输入房间数量" required>
</div>
</div>
<div class="form-group">
<label for="floorCount">
<i class="fas fa-building"></i> 层数
</label>
<div class="input-container">
<input type="number" id="floorCount" name="floorCount" placeholder="请输入楼层数量" required>
</div>
</div>
<div class="form-group">
<label for="publicArea">
<i class="fas fa-chart-area"></i> 公区面积 (㎡)
</label>
<div class="input-container">
<input type="number" id="publicArea" name="publicArea" placeholder="请输入公共区域面积" required>
</div>
</div>
</div>
<div class="option-group">
<div class="option-group-title">
<i class="fas fa-network-wired"></i> 是否选择专线?
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="dedicatedLine" id="dedicatedLineYes" value="yes" onchange="toggleDedicatedLineOptions()">
<label for="dedicatedLineYes">是</label>
</div>
<div class="radio-option">
<input type="radio" name="dedicatedLine" id="dedicatedLineNo" value="no" onchange="toggleDedicatedLineOptions()">
<label for="dedicatedLineNo">否</label>
</div>
</div>
<div id="dedicatedLineOptions" class="sub-option-group">
<div class="form-group">
<div class="option-group-title">
<i class="fas fa-map-marker-alt"></i> 专线使用范围?
</div>
<div class="checkbox-group">
<div class="checkbox-option">
<input type="checkbox" name="dedicatedLineScope" id="frontDesk" value="frontDesk">
<label for="frontDesk">前台</label>
</div>
<div class="checkbox-option">
<input type="checkbox" name="dedicatedLineScope" id="guestRoom" value="guestRoom">
<label for="guestRoom">客房</label>
</div>
</div>
</div>
<div class="form-group">
<div class="option-group-title">
<i class="fas fa-file-invoice-dollar"></i> 专线是否趸交?
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="dedicatedLineLumpSum" id="dedicatedLineLumpSumYes" value="yes">
<label for="dedicatedLineLumpSumYes">是</label>
</div>
<div class="radio-option">
<input type="radio" name="dedicatedLineLumpSum" id="dedicatedLineLumpSumNo" value="no">
<label for="dedicatedLineLumpSumNo">否</label>
</div>
</div>
</div>
</div>
</div>
<div class="option-group">
<div class="option-group-title">
<i class="fas fa-wifi"></i> 是否使用企业宽带?
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="enterpriseBroadband" id="enterpriseBroadbandYes" value="yes" onchange="toggleEnterpriseBroadbandOptions()">
<label for="enterpriseBroadbandYes">是</label>
</div>
<div class="radio-option">
<input type="radio" name="enterpriseBroadband" id="enterpriseBroadbandNo" value="no" onchange="toggleEnterpriseBroadbandOptions()">
<label for="enterpriseBroadbandNo">否</label>
</div>
</div>
<div id="enterpriseBroadbandOptions" class="sub-option-group">
<div class="form-group">
<div class="option-group-title">
<i class="fas fa-file-invoice-dollar"></i> 企业宽带是否趸交?
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="enterpriseBroadbandLumpSum" id="enterpriseBroadbandLumpSumYes" value="yes">
<label for="enterpriseBroadbandLumpSumYes">是</label>
</div>
<div class="radio-option">
<input type="radio" name="enterpriseBroadbandLumpSum" id="enterpriseBroadbandLumpSumNo" value="no">
<label for="enterpriseBroadbandLumpSumNo">否</label>
</div>
</div>
</div>
</div>
</div>
<div class="option-group">
<div class="option-group-title">
<i class="fas fa-plug"></i> 是否融端?
</div>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="integration" id="integrationYes" value="yes">
<label for="integrationYes">是</label>
</div>
<div class="radio-option">
<input type="radio" name="integration" id="integrationNo" value="no">
<label for="integrationNo">否</label>
</div>
</div>
</div>
<div class="button-container">
<button type="button" onclick="calculate()">
<i class="fas fa-calculator"></i> 计算预算方案
</button>
</div>
</form>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-chart-line"></i>
</div>
<h2 class="card-title">预算计算结果</h2>
</div>
<div class="results-container">
<div class="result-card">
<h3><i class="fas fa-server"></i> FTTO主从数量</h3>
<div id="deviceCountResult">
<div class="result-item">
<span class="result-label">从设备数量</span>
<span class="result-value">-</span>
</div>
<div class="result-item">
<span class="result-label">主设备数量</span>
<span class="result-value">-</span>
</div>
</div>
</div>
<div class="result-card">
<h3><i class="fas fa-ethernet"></i> 专线情况</h3>
<div id="dedicatedLineResult">
<div class="result-item">
<span class="result-label">专线条数</span>
<span class="result-value">-</span>
</div>
<div class="result-item">
<span class="result-label">专线带宽</span>
<span class="result-value">-</span>
</div>
<div class="result-item">
<span class="result-label">专线资费</span>
<span class="result-value">-</span>
</div>
<div class="result-item">
<span class="result-label">专线总资费</span>
<span class="result-value">-</span>
</div>
</div>
</div>
<div class="result-card">
<h3><i class="fas fa-globe"></i> 企业宽带情况</h3>
<div id="enterpriseBroadbandResult">
<div class="result-item">
<span class="result-label">企业宽带条数</span>
<span class="result-value">-</span>
</div>
<div class="result-item">
<span class="result-label">企业宽带资费</span>
<span class="result-value">-</span>
</div>
</div>
</div>
</div>
<div class="app-footer">
<p>© 西安联通 | 政企BG联网BU | 李昭兴</p>
</div>
</div>
<script>
// 显示/隐藏专线选项
function toggleDedicatedLineOptions() {
const dedicatedLineOptions = document.getElementById('dedicatedLineOptions');
const dedicatedLineYes = document.getElementById('dedicatedLineYes');
if (dedicatedLineYes.checked) {
dedicatedLineOptions.classList.add('visible');
} else {
dedicatedLineOptions.classList.remove('visible');
}
}
// 显示/隐藏企业宽带选项
function toggleEnterpriseBroadbandOptions() {
const enterpriseBroadbandOptions = document.getElementById('enterpriseBroadbandOptions');
const enterpriseBroadbandYes = document.getElementById('enterpriseBroadbandYes');
if (enterpriseBroadbandYes.checked) {
enterpriseBroadbandOptions.classList.add('visible');
} else {
enterpriseBroadbandOptions.classList.remove('visible');
}
}
// 计算函数
function calculate() {
const roomCount = parseInt(document.getElementById('roomCount').value) || 0;
const floorCount = parseInt(document.getElementById('floorCount').value) || 0;
const publicArea = parseInt(document.getElementById('publicArea').value) || 0;
const dedicatedLineYes = document.getElementById('dedicatedLineYes').checked;
const dedicatedLineScopeFrontDesk = document.getElementById('frontDesk').checked;
const dedicatedLineScopeGuestRoom = document.getElementById('guestRoom').checked;
const dedicatedLineLumpSumYes = document.getElementById('dedicatedLineLumpSumYes').checked;
const enterpriseBroadbandYes = document.getElementById('enterpriseBroadbandYes').checked;
const enterpriseBroadbandLumpSumYes = document.getElementById('enterpriseBroadbandLumpSumYes').checked;
const integrationYes = document.getElementById('integrationYes').checked;
// FTTO主从数量计算
let slaveDeviceCount = 0;
let masterDeviceCount = 0;
if (integrationYes) {
slaveDeviceCount = Math.floor(roomCount / 2);
masterDeviceCount = Math.max(floorCount, Math.ceil(slaveDeviceCount / 8));
}
// 专线情况计算
let dedicatedLineCount = 0;
let dedicatedLineBandwidth = '-';
let dedicatedLineFee = '-';
let dedicatedLineTotalFee = 0;
if (dedicatedLineYes) {
if (dedicatedLineScopeFrontDesk && dedicatedLineScopeGuestRoom) {
dedicatedLineCount = 2;
dedicatedLineBandwidth = `前台50M, 客房${Math.max(50, Math.ceil(roomCount * 0.8 / 50) * 50)}M`;
} else if (dedicatedLineScopeFrontDesk) {
dedicatedLineCount = 1;
dedicatedLineBandwidth = '前台50M';
} else if (dedicatedLineScopeGuestRoom) {
dedicatedLineCount = 1;
dedicatedLineBandwidth = `客房${Math.max(50, Math.ceil(roomCount * 0.8 / 50) * 50)}M`;
}
let frontDeskFee = 0;
let guestRoomFee = 0;
if (dedicatedLineLumpSumYes && integrationYes) {
frontDeskFee = 1000;
guestRoomFee = Math.ceil(roomCount * 0.8 / 50) * 50 * 18;
} else if (dedicatedLineLumpSumYes && !integrationYes) {
frontDeskFee = 1100;
guestRoomFee = Math.ceil(roomCount * 0.8 / 50) * 50 * 19;
} else if (!dedicatedLineLumpSumYes) {
frontDeskFee = 1500;
guestRoomFee = Math.ceil(roomCount * 0.8 / 50) * 50 * 25;
}
if (dedicatedLineScopeFrontDesk && dedicatedLineScopeGuestRoom) {
dedicatedLineFee = `前台${frontDeskFee}元/月, 客房${guestRoomFee}元/月`;
dedicatedLineTotalFee = frontDeskFee + guestRoomFee;
} else if (dedicatedLineScopeFrontDesk) {
dedicatedLineFee = `前台${frontDeskFee}元/月`;
dedicatedLineTotalFee = frontDeskFee;
} else if (dedicatedLineScopeGuestRoom) {
dedicatedLineFee = `客房${guestRoomFee}元/月`;
dedicatedLineTotalFee = guestRoomFee;
}
}
// 企业宽带情况计算
let enterpriseBroadbandCount = 0;
let enterpriseBroadbandFee = 0;
if (enterpriseBroadbandYes) {
if (integrationYes) {
enterpriseBroadbandCount = Math.max(masterDeviceCount, Math.ceil(roomCount / floorCount / 8));
} else {
enterpriseBroadbandCount = Math.max(floorCount, Math.ceil(roomCount / 15));
}
if (enterpriseBroadbandLumpSumYes) {
enterpriseBroadbandFee = enterpriseBroadbandCount * 199 * 0.7;
} else {
enterpriseBroadbandFee = enterpriseBroadbandCount * 199;
}
}
// 更新设备数量结果
document.getElementById('deviceCountResult').innerHTML = `
<div class="result-item">
<span class="result-label">从设备数量</span>
<span class="result-value">${slaveDeviceCount || '-'}</span>
</div>
<div class="result-item">
<span class="result-label">主设备数量</span>
<span class="result-value">${masterDeviceCount || '-'}</span>
</div>
`;
// 更新专线结果
document.getElementById('dedicatedLineResult').innerHTML = `
<div class="result-item">
<span class="result-label">专线条数</span>
<span class="result-value">${dedicatedLineCount || '-'}</span>
</div>
<div class="result-item">
<span class="result-label">专线带宽</span>
<span class="result-value">${dedicatedLineBandwidth}</span>
</div>
<div class="result-item">
<span class="result-label">专线资费</span>
<span class="result-value">${dedicatedLineFee}</span>
</div>
<div class="result-item">
<span class="result-label">专线总资费</span>
<span class="result-value">${dedicatedLineTotalFee ? dedicatedLineTotalFee + '元/月' : '-'}</span>
</div>
`;
// 更新企业宽带结果
document.getElementById('enterpriseBroadbandResult').innerHTML = `
<div class="result-item">
<span class="result-label">企业宽带条数</span>
<span class="result-value">${enterpriseBroadbandCount || '-'}</span>
</div>
<div class="result-item">
<span class="result-label">企业宽带资费</span>
<span class="result-value">${enterpriseBroadbandFee ? enterpriseBroadbandFee + '元/月' : '-'}</span>
</div>
`;
// 添加结果动画
const resultCards = document.querySelectorAll('.result-card');
resultCards.forEach(card => {
card.style.animation = 'none';
setTimeout(() => {
card.style.animation = 'fadeIn 0.5s ease-out forwards';
}, 10);
});
}
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
// 添加一些默认值方便测试
document.getElementById('roomCount').value = 120;
document.getElementById('floorCount').value = 8;
document.getElementById('publicArea').value = 1500;
document.getElementById('dedicatedLineYes').checked = true;
document.getElementById('frontDesk').checked = true;
document.getElementById('guestRoom').checked = true;
document.getElementById('dedicatedLineLumpSumYes').checked = true;
document.getElementById('enterpriseBroadbandYes').checked = true;
document.getElementById('enterpriseBroadbandLumpSumYes').checked = true;
document.getElementById('integrationYes').checked = true;
// 显示初始选项
toggleDedicatedLineOptions();
toggleEnterpriseBroadbandOptions();
});
</script>
</body>
</html>
index.html