<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酒店场景预算模板</title>
<style>
/* 基础样式 */
body {
font-family: Arial, sans-serif;
background-color: #ffe6e6; /* 浅红色背景 */
color: #333;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #cc0000; /* 深红色标题 */
margin-bottom: 30px;
font-size: 2.5em;
}
form {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 700px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #555;
}
input[type="number"] {
width: calc(100% - 20px); /* 减去内边距和边框的宽度 */
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
margin-bottom: 15px;
box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}
input[type="checkbox"], input[type="radio"] {
margin-right: 10px;
}
.option-group {
margin-bottom: 20px;
padding: 15px;
border-left: 4px solid #cc0000; /* 深红色边框 */
background-color: #fff0f0; /* 浅红色背景 */
border-radius: 6px;
position: relative;
max-width: 100%; /* 确保父容器不会超出红色背景 */
}
.sub-option-group {
margin-left: 50px; /* 增加左边距 */
margin-top: 15px;
padding: 15px;
border-left: 3px solid #ff6666; /* 浅红色边框 */
background: linear-gradient(145deg, #ffffff, #ffe6e6); /* 浅红色渐变背景 */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
opacity: 0;
height: 0;
overflow: hidden;
}
.sub-option-group.visible {
opacity: 1;
height: auto;
padding: 15px;
margin-top: 15px;
}
.sub-option-group label {
display: flex;
align-items: center;
margin-bottom: 15px; /* 增加行距 */
}
.sub-option-group .option-container {
display: flex;
gap: 20px; /* 选项之间的间距 */
flex-wrap: wrap; /* 如果选项过多，自动换行 */
}
.hidden {
display: none;
}
.result {
margin-top: 30px;
padding: 25px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 700px;
margin: 20px auto;
}
.result h2 {
color: #cc0000; /* 深红色标题 */
margin-bottom: 15px;
font-size: 20px;
}
.result p {
margin: 10px 0;
font-size: 16px;
color: #555;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #cc0000; /* 深红色按钮 */
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #990000; /* 深红色按钮悬停效果 */
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2em; /* 标题字体缩小 */
}
form {
padding: 15px; /* 表单内边距缩小 */
}
.option-group {
padding: 10px; /* 选项组内边距缩小 */
}
.sub-option-group {
margin-left: 30px; /* 子选项组左边距缩小 */
}
.result {
padding: 15px; /* 结果框内边距缩小 */
}
button {
font-size: 14px; /* 按钮字体缩小 */
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5em; /* 标题字体进一步缩小 */
}
input[type="number"] {
font-size: 12px; /* 输入框字体缩小 */
}
.option-group {
border-left-width: 3px; /* 边框宽度缩小 */
}
.sub-option-group {
border-left-width: 2px; /* 子选项组边框宽度缩小 */
}
.result h2 {
font-size: 18px; /* 结果标题字体缩小 */
}
.result p {
font-size: 14px; /* 结果内容字体缩小 */
}
}
</style>
</head>
<body>
<h1>酒店场景预算模板</h1>
<form id="calcForm">
<!-- 输入框 -->
<div class="option-group">
<label for="roomCount">房间数:</label>
<input type="number" id="roomCount" name="roomCount" required>
</div>
<div class="option-group">
<label for="floorCount">层数:</label>
<input type="number" id="floorCount" name="floorCount" required>
</div>
<div class="option-group">
<label for="publicArea">公区面积:</label>
<input type="number" id="publicArea" name="publicArea" required>
</div>
<!-- 判断框 -->
<div class="option-group">
<label>是否选择专线?</label>
<input type="radio" name="dedicatedLine" value="yes" onchange="toggleDedicatedLineOptions()"> 是
<input type="radio" name="dedicatedLine" value="no" onchange="toggleDedicatedLineOptions()"> 否
<div id="dedicatedLineOptions" class="sub-option-group">
<div>
<label>专线使用范围?</label>
<div class="option-container">
<label><input type="checkbox" name="dedicatedLineScope" value="frontDesk"> 前台</label>
<label><input type="checkbox" name="dedicatedLineScope" value="guestRoom"> 客房</label>
</div>
</div>
<div>
<label>专线是否趸交?</label>
<div class="option-container">
<label><input type="radio" name="dedicatedLineLumpSum" value="yes"> 是</label>
<label><input type="radio" name="dedicatedLineLumpSum" value="no"> 否</label>
</div>
</div>
</div>
</div>
<div class="option-group">
<label>是否使用企业宽带?</label>
<input type="radio" name="enterpriseBroadband" value="yes" onchange="toggleEnterpriseBroadbandOptions()"> 是
<input type="radio" name="enterpriseBroadband" value="no" onchange="toggleEnterpriseBroadbandOptions()"> 否
<div id="enterpriseBroadbandOptions" class="sub-option-group">
<div>
<label>企业宽带是否趸交?</label>
<div class="option-container">
<label><input type="radio" name="enterpriseBroadbandLumpSum" value="yes"> 是</label>
<label><input type="radio" name="enterpriseBroadbandLumpSum" value="no"> 否</label>
</div>
</div>
</div>
</div>
<div class="option-group">
<label>是否融端?</label>
<input type="radio" name="integration" value="yes"> 是
<input type="radio" name="integration" value="no"> 否
</div>
<button type="button" onclick="calculate()">计算</button>
</form>
<!-- 生成框 -->
<div class="result">
<h2>FTTO主从数量</h2>
<div id="deviceCountResult"></div>
</div>
<div class="result">
<h2>专线情况</h2>
<div id="dedicatedLineResult"></div>
</div>
<div class="result">
<h2>企业宽带情况</h2>
<div id="enterpriseBroadbandResult"></div>
</div>
<script>
// 显示/隐藏专线选项
function toggleDedicatedLineOptions() {
const dedicatedLineOptions = document.getElementById('dedicatedLineOptions');
const dedicatedLineYes = document.querySelector('input[name="dedicatedLine"][value="yes"]');
if (dedicatedLineYes.checked) {
dedicatedLineOptions.classList.add('visible');
} else {
dedicatedLineOptions.classList.remove('visible');
}
}
// 显示/隐藏企业宽带选项
function toggleEnterpriseBroadbandOptions() {
const enterpriseBroadbandOptions = document.getElementById('enterpriseBroadbandOptions');
const enterpriseBroadbandYes = document.querySelector('input[name="enterpriseBroadband"][value="yes"]');
if (enterpriseBroadbandYes.checked) {
enterpriseBroadbandOptions.classList.add('visible');
} else {
enterpriseBroadbandOptions.classList.remove('visible');
}
}
// 计算函数
function calculate() {
const roomCount = parseInt(document.getElementById('roomCount').value);
const floorCount = parseInt(document.getElementById('floorCount').value);
const publicArea = parseInt(document.getElementById('publicArea').value);
const dedicatedLineYes = document.querySelector('input[name="dedicatedLine"][value="yes"]').checked;
const dedicatedLineScopeFrontDesk = document.querySelector('input[name="dedicatedLineScope"][value="frontDesk"]').checked;
const dedicatedLineScopeGuestRoom = document.querySelector('input[name="dedicatedLineScope"][value="guestRoom"]').checked;
const dedicatedLineLumpSumYes = document.querySelector('input[name="dedicatedLineLumpSum"][value="yes"]').checked;
const enterpriseBroadbandYes = document.querySelector('input[name="enterpriseBroadband"][value="yes"]').checked;
const enterpriseBroadbandLumpSumYes = document.querySelector('input[name="enterpriseBroadbandLumpSum"][value="yes"]').checked;
const integrationYes = document.querySelector('input[name="integration"][value="yes"]').checked;
// 生成框1: FTTO主从数量
let slaveDeviceCount = 0;
let masterDeviceCount = 0;
if (integrationYes) {
slaveDeviceCount = Math.floor(roomCount / 2);
masterDeviceCount = Math.max(floorCount, Math.ceil(slaveDeviceCount / 8));
}
document.getElementById('deviceCountResult').innerHTML = `
<p>从设备数量: ${slaveDeviceCount || '无'}</p>
<p>主设备数量: ${masterDeviceCount || '无'}</p>
`;
// 生成框2: 专线情况
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;
}
}
document.getElementById('dedicatedLineResult').innerHTML = `
<p>专线条数: ${dedicatedLineCount || '无'}</p>
<p>专线带宽: ${dedicatedLineBandwidth || '无'}</p>
<p>专线资费: ${dedicatedLineFee || '无'}</p>
<p>专线总资费: ${dedicatedLineTotalFee || '无'}元/月</p>
`;
// 生成框3: 企业宽带情况
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('enterpriseBroadbandResult').innerHTML = `
<p>企业宽带条数: ${enterpriseBroadbandCount || '无'}</p>
<p>企业宽带资费: ${enterpriseBroadbandFee || '无'}元/月</p>
`;
}
</script>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
\