2026年社区养老服务设施星级评定质控评价表
/* ============ 基础变量（政务/民政文档风格） ============ */
:root {
--primary: #345b6e; /* 暖墨青，主色（温馨向） */
--primary-dark: #244a5c; /* 表头深色 */
--accent: #b08968; /* 暖陶土棕，强调/分组 */
--gold: #c9a227; /* 暖金，星级/补贴 */
--bg: #faf5ee; /* 暖米白背景，略带杏色 */
--surface: #ffffff; /* 卡片白 */
--row-alt: #f5efe6; /* 暖米交替行 */
--row-group: #efe6d8; /* 暖陶土浅，分组标题行 */
--row-subtotal: #f2ede4; /* 暖小计行 */
--row-total: #ebe4d6; /* 暖合计行 */
--border: #ddd3c2; /* 暖灰边框 */
--border-light: #e8e0d2; /* 暖细线 */
--text: #3a332c; /* 暖深棕灰正文 */
--text-soft: #5d5249; /* 暖灰次要文字 */
--text-mute: #9a8d7d; /* 暖灰弱化 */
--required: #c0392b; /* 暖砖红，必填 */
--error: #c0392b;
--success-bg: #ecf3e8;
--success-text: #4a6b3a;
--error-bg: #f9eae6;
--error-text: #8a3a2a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { -webkit-text-size-adjust: 100%; }
body {
font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.65;
padding: 18px 14px;
font-size: 17px;
}
/* ============ 容器 ============ */
.eval-container {
max-width: 960px;
margin: 0 auto;
}
/* ============ 页眉 ============ */
.eval-header {
background: var(--surface);
border: 1px solid var(--border);
border-top: 4px solid var(--accent);
padding: 22px 26px 18px;
margin-bottom: 14px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(176, 137, 104, 0.10);
}
.eval-header .doc-meta {
font-size: 15px;
color: var(--text-soft);
border-bottom: 1px solid var(--border-light);
padding-bottom: 8px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
gap: 4px 22px;
}
.eval-header .doc-meta span b { color: var(--primary); font-weight: 600; }
.eval-header h1 {
font-family: 'SimSun', '宋体', 'Songti SC', serif;
font-size: 24px;
font-weight: 700;
color: var(--primary);
letter-spacing: 1px;
margin-bottom: 6px;
}
.eval-header .subtitle {
font-size: 15px;
color: var(--text-soft);
}
/* ============ 填报说明 ============ */
.eval-notice {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
padding: 14px 20px;
margin-bottom: 14px;
font-size: 13.5px;
color: var(--text-soft);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(176, 137, 104, 0.08);
}
.eval-notice .notice-title {
font-family: 'SimSun', '宋体', serif;
font-size: 15px;
font-weight: 700;
color: var(--primary);
margin-bottom: 6px;
}
.eval-notice ul { margin: 4px 0 0 18px; }
.eval-notice li { margin-bottom: 3px; }
.eval-notice .required { color: var(--required); font-weight: 700; }
/* ============ 区块标题 ============ */
.section-bar {
font-family: 'SimSun', '宋体', serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background: var(--primary);
padding: 7px 16px;
margin-bottom: 0;
border: 1px solid var(--primary);
border-bottom: 2px solid var(--accent);
}
/* ============ 基本信息区 ============ */
.info-block {
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
padding: 18px 20px;
margin-bottom: 14px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 22px;
}
.info-field { display: flex; flex-direction: column; }
.info-field.full { grid-column: 1 / -1; }
.info-field label {
font-size: 15.5px;
font-weight: 600;
color: var(--text-soft);
margin-bottom: 5px;
}
.info-field label .required { color: var(--required); margin-left: 2px; }
.info-field .hint { font-size: 14px; color: var(--text-mute); font-weight: 400; margin-top: 3px; }
.cf7-input, .cf7-select, .cf7-password {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: #fff;
font-size: 16px;
color: var(--text);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.cf7-input:focus, .cf7-select:focus, .cf7-password:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(52, 91, 110, 0.16);
}
.cf7-input::placeholder { color: var(--text-mute); }
/* 提交类型 单选 */
.radio-inline { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 2px; }
.radio-inline .wpcf7-list-item { margin: 0; }
.radio-inline label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 16px; color: var(--text); font-weight: 500; }
.radio-inline input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--border);
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.radio-inline input[type="radio"]:checked { border-color: var(--primary); }
.radio-inline input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
border-radius: 50%;
background: var(--primary);
}
/* ============ 评分表格 ============ */
.table-block {
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
margin-bottom: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 同时保留无前缀选择器（便于本地预览）并增加 .wpcf7-form 前缀（提高在 WordPress/CF7 中的优先级） */
.eval-table,
.wpcf7-form .eval-table {
width: 100% !important;
border-collapse: collapse;
font-size: 16px;
table-layout: fixed !important;
min-width: 760px;
}
.eval-table th,
.wpcf7-form .eval-table th {
background: var(--primary-dark);
color: #fff;
font-weight: 600;
font-size: 13.5px;
padding: 9px 8px;
border: 1px solid var(--primary-dark);
text-align: center;
white-space: nowrap;
word-break: break-word;
}
.eval-table td,
.wpcf7-form .eval-table td {
border: 1px solid var(--border-light);
padding: 9px 10px;
vertical-align: top;
color: var(--text);
word-break: break-word;
}
.eval-table tbody tr:nth-child(even):not(.group-header):not(.subtotal-row):not(.total-row) td,
.wpcf7-form .eval-table tbody tr:nth-child(even):not(.group-header):not(.subtotal-row):not(.total-row) td {
background: var(--row-alt);
}
.eval-table tbody tr:nth-child(odd):not(.group-header):not(.subtotal-row):not(.total-row) td,
.wpcf7-form .eval-table tbody tr:nth-child(odd):not(.group-header):not(.subtotal-row):not(.total-row) td {
background: #fff;
}
/* 列宽（百分比，合计100%） */
.col-no,
.wpcf7-form .col-no { width: 6%; text-align: center; }
.col-item,
.wpcf7-form .col-item { width: 12%; }
.col-criteria,
.wpcf7-form .col-criteria { width: 43%; }
.col-score,
.wpcf7-form .col-score { width: 7%; text-align: center; }
.col-self,
.wpcf7-form .col-self { width: 13%; text-align: center; }
.col-basis,
.wpcf7-form .col-basis { width: 19%; }
/* 序号、分值居中列 */
.eval-table td.col-no,
.wpcf7-form .eval-table td.col-no,
.eval-table td.col-score,
.wpcf7-form .eval-table td.col-score {
text-align: center;
font-weight: 600;
}
.eval-table td.col-no,
.wpcf7-form .eval-table td.col-no {
font-size: 14px; /* 序号列 a1-a19：加大2号后再减2号，回到原始字号 */
}
.eval-table td.col-item,
.wpcf7-form .eval-table td.col-item {
font-weight: 600;
color: var(--primary);
}
.eval-table td.col-criteria,
.wpcf7-form .eval-table td.col-criteria {
font-size: 15.5px;
line-height: 1.7;
}
/* 分组标题行 */
.eval-table tr.group-header td,
.wpcf7-form .eval-table tr.group-header td {
background: var(--row-group);
font-family: 'SimSun', '宋体', serif;
font-weight: 700;
font-size: 16.5px;
color: var(--primary);
text-align: left;
padding: 8px 12px;
border-top: 2px solid var(--accent);
border-bottom: 1px solid var(--border);
}
/* 小计行 */
.eval-table tr.subtotal-row td,
.wpcf7-form .eval-table tr.subtotal-row td {
background: var(--row-subtotal);
font-weight: 700;
font-size: 15.5px;
color: var(--primary);
text-align: center;
}
.eval-table tr.subtotal-row td.subtotal-label,
.wpcf7-form .eval-table tr.subtotal-row td.subtotal-label { text-align: right; padding-right: 14px; }
/* 合计行 */
.eval-table tr.total-row td,
.wpcf7-form .eval-table tr.total-row td {
background: var(--row-total);
font-family: 'SimSun', '宋体', serif;
font-weight: 700;
font-size: 17px;
color: var(--primary);
text-align: center;
border-top: 2px solid var(--primary);
}
.eval-table tr.total-row td.total-label,
.wpcf7-form .eval-table tr.total-row td.total-label { text-align: right; padding-right: 14px; }
/* 得分输入框 */
.score-input,
.wpcf7-form .wpcf7-form-control.score-input {
box-sizing: border-box !important;
max-width: 100% !important;
width: 78px !important;
padding: 6px 4px;
border: 1px solid var(--border);
border-radius: 6px;
background: #fff;
text-align: center;
font-size: 16px;
color: var(--text);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.score-input:focus,
.wpcf7-form .wpcf7-form-control.score-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(52, 91, 110, 0.16);
}
.basis-input,
.wpcf7-form .wpcf7-form-control.basis-input {
box-sizing: border-box !important;
max-width: 100% !important;
width: 100% !important;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: #fff;
font-size: 15px;
color: var(--text);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.basis-input:focus,
.wpcf7-form .wpcf7-form-control.basis-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(52, 91, 110, 0.16);
}
.basis-input::placeholder,
.wpcf7-form .wpcf7-form-control.basis-input::placeholder { color: var(--text-mute); }
/* 只读汇总框 */
.readonly-box {
background: var(--row-alt);
border: 1px solid var(--border);
font-weight: 700;
color: var(--primary);
text-align: center;
padding: 6px 8px;
border-radius: 6px;
width: 78px;
font-size: 16px;
}
.readonly-box.wide { width: 100%; }
/* ============ 评定结果区 ============ */
.result-block {
background: var(--surface);
border: 1px solid var(--border);
padding: 16px 20px;
margin-bottom: 14px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(176, 137, 104, 0.10);
}
.result-row {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 0;
border-bottom: 1px dashed var(--border-light);
flex-wrap: wrap;
}
.result-row:last-child { border-bottom: none; }
.result-row .result-label {
font-family: 'SimSun', '宋体', serif;
font-weight: 700;
color: var(--primary);
font-size: 17px;
min-width: 120px;
}
.star-display {
font-size: 22px;
letter-spacing: 3px;
color: var(--gold);
font-weight: 700;
background: transparent !important;
border: none !important;
flex: 1;
min-width: 160px;
}
.bonus-amount {
font-size: 18px;
font-weight: 700;
color: var(--gold);
}
/* ============ 提交按钮 ============ */
.submit-wrapper {
text-align: center;
padding: 8px 0 4px;
}
.cf7-submit {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 56px;
font-size: 18px;
font-weight: 600;
font-family: 'SimSun', '宋体', serif;
letter-spacing: 4px;
cursor: pointer;
transition: background 0.15s;
}
.cf7-submit:hover { background: var(--primary-dark); }
.cf7-submit:active { background: #0d2236; }
/* ============ 页脚 ============ */
.eval-footer {
text-align: center;
color: var(--text-mute);
font-size: 14px;
padding: 12px 0 4px;
border-top: 1px solid var(--border-light);
margin-top: 6px;
}
/* ============ 必填错误样式 ============ */
.field-error .cf7-input,
.field-error .cf7-select,
.field-error .cf7-password,
.field-error .score-input,
.field-error .basis-input,
.field-error .wpcf7-form-control.score-input,
.field-error .wpcf7-form-control.basis-input {
border-color: var(--error) !important;
box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.12) !important;
}
.field-error .radio-inline { outline: 1px solid var(--error); outline-offset: 2px; }
.err-tip {
color: var(--error);
font-size: 14px;
margin-top: 3px;
display: none;
}
.field-error .err-tip { display: block; }
/* ============ 提示框 ============ */
.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 16px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: 500;
text-align: center;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
z-index: 10000;
animation: alertIn 0.25s ease-out, alertOut 0.4s ease-in 4.4s forwards;
max-width: 86vw;
}
@keyframes alertIn {
from { opacity: 0; transform: translate(-50%, -42%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes alertOut {
from { opacity: 1; }
to { opacity: 0; visibility: hidden; }
}
.custom-alert.success {
background: var(--success-bg);
color: var(--success-text);
border: 1px solid #b8d8b8;
}
.custom-alert.error {
background: var(--error-bg);
color: var(--error-text);
border: 1px solid #e0b8b8;
}
/* ============ 响应式：移动端 ============ */
@media (max-width: 768px) {
body { padding: 10px 8px; font-size: 16px; }
.eval-header { padding: 16px 14px 14px; }
.eval-header h1 { font-size: 20px; letter-spacing: 0.5px; }
.eval-header .doc-meta { gap: 2px 14px; font-size: 14px; }
.info-block, .result-block { padding: 14px 12px; }
.info-grid { grid-template-columns: 1fr; gap: 12px; }
/* 表格转堆叠卡片 */
.table-block { overflow-x: visible; }
.eval-table,
.wpcf7-form .eval-table { min-width: 0; display: block; }
.eval-table thead,
.wpcf7-form .eval-table thead { display: none; }
.eval-table tbody,
.wpcf7-form .eval-table tbody { display: block; }
.eval-table tr,
.wpcf7-form .eval-table tr {
display: block;
border: 1px solid var(--border);
margin-bottom: 10px;
background: #fff;
}
.eval-table tr.group-header td,
.wpcf7-form .eval-table tr.group-header td { border-top: 3px solid var(--accent); }
.eval-table td,
.wpcf7-form .eval-table td {
display: block;
border: none;
border-bottom: 1px solid var(--border-light);
padding: 8px 12px;
text-align: left !important;
background: #fff !important;
}
.eval-table td::before,
.wpcf7-form .eval-table td::before {
content: attr(data-label);
display: block;
font-size: 14px;
font-weight: 700;
color: var(--text-mute);
margin-bottom: 3px;
}
.eval-table td.col-no::before,
.wpcf7-form .eval-table td.col-no::before,
.eval-table td.col-score::before,
.wpcf7-form .eval-table td.col-score::before { display: inline; margin-right: 6px; }
.eval-table td.col-no,
.wpcf7-form .eval-table td.col-no { display: inline-block; width: auto; border-bottom: none; padding-bottom: 0; font-size: 13px; }
.eval-table td.col-item,
.wpcf7-form .eval-table td.col-item {
display: inline-block;
width: auto;
border-bottom: 1px solid var(--border-light);
font-size: 16.5px;
}
/* 小计/合计行保持块状 */
.eval-table tr.subtotal-row,
.wpcf7-form .eval-table tr.subtotal-row,
.eval-table tr.total-row,
.wpcf7-form .eval-table tr.total-row { background: var(--row-subtotal); }
.eval-table tr.subtotal-row td,
.wpcf7-form .eval-table tr.subtotal-row td,
.eval-table tr.total-row td,
.wpcf7-form .eval-table tr.total-row td { background: transparent !important; }
.eval-table tr.subtotal-row td::before,
.wpcf7-form .eval-table tr.subtotal-row td::before,
.eval-table tr.total-row td::before,
.wpcf7-form .eval-table tr.total-row td::before { display: none; }
.eval-table tr.subtotal-row td.subtotal-label,
.wpcf7-form .eval-table tr.subtotal-row td.subtotal-label,
.eval-table tr.total-row td.total-label,
.wpcf7-form .eval-table tr.total-row td.total-label { text-align: left; padding-right: 12px; }
.score-input,
.wpcf7-form .wpcf7-form-control.score-input { width: 100% !important; max-width: 200px; }
.readonly-box { width: 100%; max-width: 200px; }
.result-row .result-label { min-width: 100px; font-size: 16px; }
.cf7-submit { padding: 12px 40px; letter-spacing: 2px; }
}
@media (max-width: 420px) {
.eval-header h1 { font-size: 18px; }
.cf7-submit { padding: 11px 28px; font-size: 17px; letter-spacing: 1px; }
}
填报说明
- 本表用于社区养老服务设施星级评定的网点自评与质控评价，满分100分（基本项5分＋增值项95分）。
- 请选择对应网点名称，填写主管密钥及工号，并逐项填写自评得分与得分依据。
- 系统将自动汇总总分并按分档标准评定星级及相应补贴金额。星级分档：≥91分五星、≥81分四星、≥71分三星、≥61分二星、≥51分一星、<51分无等级。
- 带 * 为必填项，得分依据须如实填写、可佐证。
一、基本信息
二、评分标准及得分情况
三、星级评定结果
document.addEventListener('DOMContentLoaded', function () {
// 保存原始表单 HTML，用于提交成功后还原
var formEl = document.querySelector('.wpcf7-form') || document.querySelector('.eval-container');
var originalFormHTML = formEl ? formEl.innerHTML : '';
var deductionInputs = [];
var totalSelfInput = document.getElementById('total-self');
var starRatingInput = document.getElementById('star-rating');
var bonusAmountInput = document.getElementById('bonus-amount');
var subtotalBasicEl = document.getElementById('subtotal-basic-self');
var subtotalValueEl = document.getElementById('subtotal-value-self');
function collectInputs() {
deductionInputs = Array.prototype.slice.call(document.querySelectorAll('.deduction-input'));
}
// 按 data-group 计算分组小计
function groupSum(group) {
var sum = 0;
deductionInputs.forEach(function (input) {
if (input.getAttribute('data-group') === group) {
sum += parseFloat(input.value) || 0;
}
});
return sum;
}
// 更新总分与小计
function updateTotalScore() {
var total = 0;
deductionInputs.forEach(function (input) {
total += parseFloat(input.value) || 0;
});
if (totalSelfInput) totalSelfInput.value = total.toFixed(2);
if (subtotalBasicEl) subtotalBasicEl.textContent = groupSum('basic').toFixed(2);
if (subtotalValueEl) subtotalValueEl.textContent = groupSum('value').toFixed(2);
}
// 星级评定
function calculateStarRating() {
if (!totalSelfInput || !starRatingInput || !bonusAmountInput) return;
var total = parseFloat(totalSelfInput.value) || 0;
var stars = '无', bonus = '0万';
if (total >= 91) { stars = '★★★★★'; bonus = '20万'; }
else if (total >= 81) { stars = '★★★★'; bonus = '15万'; }
else if (total >= 71) { stars = '★★★'; bonus = '11万'; }
else if (total >= 61) { stars = '★★'; bonus = '8万'; }
else if (total >= 51) { stars = '★'; bonus = '5万'; }
else { stars = '无等级'; bonus = '0万'; }
starRatingInput.value = stars + '（' + total.toFixed(2) + '分）';
bonusAmountInput.value = bonus;
}
// 绑定输入事件
function bindInputEvents() {
deductionInputs.forEach(function (input) {
input.addEventListener('input', function () {
var max = parseFloat(this.getAttribute('max'));
var value = parseFloat(this.value) || 0;
if (value > max) { this.value = max; value = max; }
if (value < 0) { this.value = 0; }
updateTotalScore();
calculateStarRating();
});
// 失焦时规整空值
input.addEventListener('blur', function () {
if (this.value === '') this.value = '';
});
});
}
// 必填字段校验
function validateRequiredFields() {
var isValid = true;
var firstError = null;
// 清除既有错误标记
var prevErrors = document.querySelectorAll('.field-error');
prevErrors.forEach(function (el) { el.classList.remove('field-error'); });
// 文本/下拉/密码/邮箱/数字类必填
var requiredInputs = document.querySelectorAll('.eval-container [required], .eval-container .wpcf7-validates-as-required');
requiredInputs.forEach(function (field) {
if (field.type === 'radio') return; // 单选单独处理
var wrapper = field.closest('.info-field') || field.closest('td') || field.closest('.cf7-input-wrapper');
if (!field.value || !field.value.trim()) {
isValid = false;
if (wrapper) {
wrapper.classList.add('field-error');
if (!firstError) firstError = wrapper;
}
}
});
// 提交类型单选
var qaLevel = document.querySelectorAll('[name="qa-level"]');
if (qaLevel.length) {
var checked = false;
qaLevel.forEach(function (r) { if (r.checked) checked = true; });
if (!checked) {
isValid = false;
var qaWrapper = document.getElementById('qa-level');
if (qaWrapper) {
var field = qaWrapper.closest('.info-field');
if (field) { field.classList.add('field-error'); if (!firstError) firstError = field; }
}
}
}
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
return isValid;
}
// 提示框
function showAlert(message, type) {
var existing = document.querySelector('.custom-alert');
if (existing) existing.remove();
var div = document.createElement('div');
div.className = 'custom-alert ' + (type || 'error');
div.textContent = message;
document.body.appendChild(div);
setTimeout(function () {
if (div.parentNode) div.parentNode.removeChild(div);
}, 5000);
}
// 初始化
function initForm() {
collectInputs();
bindInputEvents();
updateTotalScore();
calculateStarRating();
}
initForm();
// CF7 提交前校验
document.addEventListener('wpcf7beforesubmit', function () {
if (!validateRequiredFields()) {
showAlert('请填写所有必填字段后再提交', 'error');
}
}, false);
// 提交成功
document.addEventListener('wpcf7mailsent', function () {
showAlert('提交成功！您的评估已成功发送。', 'success');
if (formEl && originalFormHTML) {
formEl.innerHTML = originalFormHTML;
setTimeout(initForm, 120);
}
}, false);
// 提交失败（邮件）
document.addEventListener('wpcf7mailfailed', function () {
showAlert('提交失败：邮件发送出现问题，请稍后重试。', 'error');
}, false);
// 校验失败
document.addEventListener('wpcf7invalid', function () {
showAlert('表单验证失败：请检查所有必填字段并修正错误。', 'error');
}, false);
});