console
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF-8">
<title>新增指标</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans‑serif;
font-size:13px;
}
body{
padding:16px;
}
.section-title{
font-size:14px;
font-weight:bold;
margin-bottom:12px;
}
.modal-wrap{
background:#fff;
border-radius:6px;
max-height:92vh;
overflow-y:auto;
border:1px solid #ddd;
width:920px;
}
.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
border-bottom:1px solid #eee;
}
.modal-header h2{
font-size:16px;
}
.close-x{
cursor:pointer;
font-size:18px;
color:#666;
}
.modal-body{
padding:18px;
}
.block-title{
font-weight:600;
margin-bottom:12px;
padding-bottom:6px;
border-bottom:1px solid #e8e8e8;
}
.row-form{
display:flex;
gap:16px;
margin-bottom:12px;
align-items:center;
}
.form-item{
display:flex;
align-items:center;
gap:6px;
}
.form-item label{
white-space:nowrap;
}
.form-item input,.form-item select{
border:1px solid #ccc;
border-radius:3px;
padding:5px 8px;
min-width:160px;
}
.toggle-row{
display:flex;
justify-content:flex-end;
margin-bottom:14px;
}
.green-tab-row{
display:flex;
margin:16px 0 10px;
}
.green-tab{
background:#27ae60;
color:#fff;
padding:7px 14px;
border:1px solid #27ae60;
}
.factor-row{
display:flex;
align-items:center;
gap:8px;
margin-bottom:10px;
}
textarea{
width:100%;
border:1px solid #ccc;
border-radius:3px;
padding:8px;
min-height:80px;
}
.sync-expand-area{
border:1px dashed #cccccc;
padding:12px;
margin:10px 0 0;
border-radius:4px;
display:none;
}
.tip-text{
font-size:12px;
color:#666;
margin-top:6px;
}
.modal-footer{
display:flex;
justify-content:flex-end;
gap:12px;
padding:14px 18px;
border-top:1px solid #eee;
}
.btn{
padding:5px 12px;
border:none;
border-radius:3px;
cursor:pointer;
}
.btn-green{
background:#27ae60;
color:#fff;
}
.btn-default{
background:#e8e8e8;
}
/* 开关样式 */
.switch-wrap {
display: inline-flex;
align-items: center;
gap:8px;
}
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #27ae60;
}
input:checked + .slider:before {
transform: translateX(16px);
}
</style>
</head>
<body>
<div class="modal-wrap">
<div class="modal-header">
<h2>新增指标</h2>
<span class="close-x" id="modalClose">×</span>
</div>
<div class="modal-body">
<div class="block-title">基本信息区
<span class="toggle-row">
<label>是否同步新增</label>
<input type="checkbox">
</span>
</div>
<div class="row-form">
<div class="form-item">
<label>*指标代码</label>
<input id="inpCode">
</div>
<div class="form-item">
<label>*上级指标</label>
<input id="inpParent">
</div>
<div class="form-item">
<label>*指标名称</label>
<input id="inpName">
</div>
</div>
<div class="row-form">
<div class="form-item">
<label>指标描述</label>
<input style="min-width:240px;">
</div>
<div class="form-item">
<label>*生成方式</label>
<select>
<option selected>系统计算</option>
</select>
</div>
<div class="form-item">
<label>是否百分比类型</label>
<select>
<option selected>否</option>
</select>
</div>
</div>
<div class="block-title">取数逻辑区</div>
<div class="green-tab-row">
<div class="green-tab">运算符号</div>
<div class="green-tab">取数类型</div>
<div class="green-tab" style="flex:1">取数因子</div>
<div>
<button class="btn btn-green">新增↑</button>
<button class="btn btn-green">新增↓</button>
</div>
</div>
<div class="factor-row">
<select>
<option>+</option>
<option>-</option>
</select>
<select>
<option selected>引用指标</option>
</select>
<input style="flex:1" placeholder="选取取数因子">
<button class="btn btn-default">…</button>
</div>
<button class="btn btn-green">生成公式并计算</button>
<div style="margin-top:12px;">
<label>取数规则</label>
<textarea></textarea>
</div>
<div class="row-form" style="margin-top:14px;">
<div class="form-item">
<label>试算日期</label>
<input type="month">
</div>
<button class="btn btn-green">试算</button>
<button class="btn btn-default">当年中期</button>
<button class="btn btn-default">上年年末</button>
</div>
<div style="margin-top:8px;">
<label>试算结果</label>
<textarea></textarea>
</div>
<div style="margin-top:18px;" class="switch-wrap">
<label class="switch">
<input type="checkbox" id="chkSyncOtherPeriod">
<span class="slider"></span>
</label>
<span>是否将本次指标变更同步至其他报告期</span>
<div class="sync-expand-area" id="syncPanel">
<div class="form-item">
<label>目标报告期</label>
<select id="targetPeriodSelect">
<option value="">请选择报告期</option>
<option value="2026-01">2026-01</option>
<option value="2026-02">2026-02</option>
<option value="2026-03">2026-03</option>
<option value="2026-04">2026-04</option>
<option value="2026-05">2026-05</option>
<option value="2026-06">2026-06</option>
<option value="2026-07">2026-07</option>
<option value="2026-08">2026-08</option>
<option value="2026-09">2026-09</option>
<option value="2026-10">2026-10</option>
<option value="2026-11">2026-11</option>
<option value="2026-12">2026-12</option>
</select>
</div>
<div class="tip-text">
说明：保存确认后，会把当前指标完整信息同步至目标报告期；取消弹窗则不会执行同步。单次仅支持同步一个报告期，多报告期请多次操作。
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-green" id="btnSave">确认</button>
<button class="btn btn-default" id="btnCancel">取消</button>
</div>
<script>
const chkSyncOtherPeriod = document.getElementById('chkSyncOtherPeriod');
const syncPanel = document.getElementById('syncPanel');
const modalClose = document.getElementById('modalClose');
const btnCancel = document.getElementById('btnCancel');
const btnSave = document.getElementById('btnSave');
chkSyncOtherPeriod.addEventListener('change',function(){
syncPanel.style.display = this.checked ? 'block' : 'none';
})
function closePage(){
alert('关闭新增指标页面');
}
modalClose.onclick = closePage;
btnCancel.onclick = closePage;
btnSave.addEventListener('click',function(){
const targetPeriod = document.getElementById('targetPeriodSelect').value;
if(chkSyncOtherPeriod.checked && !targetPeriod){
alert('请选择目标报告期');
return;
}
alert("指标保存成功，同步目标报告期："+ (targetPeriod||"无"));
})
</script>
</body>
</html>
<!-- （注：内容由AI生成） -->