代码
<style>body {font-family: Arial, sans-serif;}h2 {margin-top: 20px;}.tabs {display: flex;}.tab {padding: 10px 20px;background-color: #f1f1f1;cursor: pointer;}.tab.active {background-color: #ddd;border-top: 1px solid red;border-left: 1px solid red;border-right: 1px solid red;}.tab-content {display: none;}.tab-content.active {display: block;border: 1px solid red;}table {width: 100%;border-collapse: collapse;}th {background-color: #ff9999; /* 中国红减淡 */color: black;border: 1px solid #ddd;padding: 8px;text-align: left;}td {border: 1px solid #ddd;padding: 8px;text-align: left;}tr:nth-child(even) {background-color: #f2f2f2;}input[type="text"],input[type="number"] {width: 100%;padding: 5px;box-sizing: border-box;border-radius: 8px;background-color: #ffcccc;color: #000;}button {padding: 10px 20px;background-color: #ff4500;color: white;border: none;cursor: pointer;border-radius: 8px;}button:hover {background-color: #cc3300;}.input-row {display: flex;gap: 10px;}.仙盟div{display:inline-block;max-width:50%;min-width:300px;width:40%;
border: 1px solid #f1f1f1;
border-radius: 20px;
background: aliceblue;margin-top: 10px;margin-left: 10px;}</style><style>input[type="text"]{width: 100px;padding: 5px;box-sizing: border-box;border-radius: 8px;background-color: #ffcccc;color: #000;}input[type="number"] {width: 60px;padding: 5px;box-sizing: border-box;border-radius: 8px;background-color: #ffcccc;color: #000;}</style></head><body><h1>SPA 收入支出/技师提成自动统计系统——东方仙盟</h1><h2>台账报表免费-自动统计系统，让中小企业台账报表不再烦恼</h2><div class="tabs"><div class="tab active" onclick="showTab(0)">统计汇总</div><div class="tab" onclick="showTab(1)">支出</div><div class="tab" onclick="showTab(2)">SPA服务</div></div><div class="tab-content active"><cyberdiv class="仙盟div" style="width:90%;max-width: 90%;"><h2>利润汇总:总收入-支出-技师提成</h2><table id="东方仙盟智慧经营利润汇总SummaryTable" style="width:300px;"><tr><th>利润汇总</th><th><div id="东方仙盟智慧经营profitSummary"></div></th></tr></table></cyberdiv><cyberdiv class="仙盟div"><h2>技师统计</h2><table id="东方仙盟智慧经营technicianStatsTable"><thead><th>技师</th><th>服务次数汇总</th><th>服务金额汇总</th><th>提成汇总</th></thead><tbody id="东方仙盟智慧经营technicianStatsTable_tbody"><tr></tr></tbody></table></cyberdiv><cyberdiv class="仙盟div"><h2>支出汇总</h2><table id="东方仙盟智慧经营expenseSummaryTable"><thead><tr><th>项目</th><th>支出总金额</th></tr></thead><tbody id="东方仙盟智慧经营expenseSummaryTable_tbody"><tr></tr></tbody></table></cyberdiv></div><div class="tab-content"><h2>足浴支出</h2><div class="input-row"><input type="date" id="东方仙盟智慧经营expenseDate" /><input type="text" id="东方仙盟智慧经营expenseItem" placeholder="项目" /><input type="number" id="东方仙盟智慧经营expenseQuantity" placeholder="数量" /><input type="number" id="东方仙盟智慧经营expenseAmount" placeholder="金额" /><button onclick="addExpense()">添加支出</button></div><br><table id="东方仙盟智慧经营expenseTable"><tr><th>日期</th><th>项目</th><th>数量</th><th>金额</th><th>操作</th></tr></table><br><br><br></div><div class="tab-content"><h2>足浴收入</h2><div class="input-row"><input type="date" id="东方仙盟智慧经营incomeDate" /><input type="text" id="东方仙盟智慧经营incomeItem" placeholder="项目" /><input type="text" id="东方仙盟智慧经营technician" placeholder="技师" /><input type="number" id="东方仙盟智慧经营incomeAmount" placeholder="消费金额" oninput="calculateCommission(this)" /><input type="number" id="东方仙盟智慧经营commissionRatio" placeholder="提成比例" oninput="calculateCommission(this)" /><input type="number" id="东方仙盟智慧经营commissionAmount" placeholder="提成金额" oninput="toggleCommissionCalculation(this)" /><button onclick="addIncome()">添加服务</button></div>
<br><table id="东方仙盟智慧经营incomeTable"><tr><th>日期</th><th>项目</th><th>技师</th><th>消费金额</th><th>提成比例</th><th>提成金额</th><th>操作</th></tr></table><br><br><br></div>
使用和体验
