养老机构服务满意度评价表 - DB4201/T 631—2020
/* 移除了全局选择器 *，添加了表单容器作用域 */
.elderly-care-form-container {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
color: #333;
line-height: 1.6;
padding: 20px;
}
.elderly-care-form-container .container {
max-width: 1200px;
margin: 0 auto;
}
.elderly-care-form-container header {
text-align: center;
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(to right, #1e6bb8, #2a87e0);
border-radius: 15px;
color: white;
box-shadow: 0 8px 20px rgba(30, 107, 184, 0.3);
}
.elderly-care-form-container header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 700;
}
.elderly-care-form-container header p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.elderly-care-form-container .form-container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 25px;
}
.elderly-care-form-container .form-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 30px;
margin-bottom: 25px;
border: 1px solid #e1e5eb;
}
.elderly-care-form-container .section-title {
color: #1e6bb8;
border-bottom: 2px solid #4a90e2;
padding-bottom: 15px;
margin-top: 0;
margin-bottom: 25px;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 12px;
}
.elderly-care-form-container .section-title i {
font-size: 1.4rem;
}
.elderly-care-form-container .form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px 20px;
}
.elderly-care-form-container .form-col {
flex: 1;
min-width: 250px;
padding: 0 10px;
margin-bottom: 20px;
}
.elderly-care-form-container .input-group {
margin-bottom: 20px;
}
.elderly-care-form-container .input-label {
display: block;
font-weight: 600;
margin-bottom: 10px;
color: #2d3748;
font-size: 16px;
}
.elderly-care-form-container .input-label .weight {
color: #e53e3e;
font-weight: 700;
margin-left: 8px;
}
.elderly-care-form-container .input-field {
width: 100%;
padding: 14px 16px;
border: 1px solid #d1d5db;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.elderly-care-form-container .input-field:focus {
border-color: #4a90e2;
outline: none;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}
.elderly-care-form-container .rating-description {
color: #4a5568;
margin-bottom: 15px;
font-size: 15px;
line-height: 1.5;
background: #f8fafc;
padding: 12px 15px;
border-radius: 8px;
border-left: 3px solid #4a90e2;
}
.elderly-care-form-container .rating-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.elderly-care-form-container .rating-input {
display: none;
}
.elderly-care-form-container .rating-label {
display: block;
padding: 15px 5px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
height: 100%;
}
.elderly-care-form-container .rating-label:hover {
background: #ebf8ff;
border-color: #90cdf4;
transform: translateY(-3px);
}
.elderly-care-form-container .rating-input:checked + .rating-label {
background: #ebf8ff;
border-color: #4299e1;
box-shadow: 0 5px 15px rgba(66, 153, 225, 0.2);
transform: translateY(-3px);
}
.elderly-care-form-container .rating-score {
display: block;
font-size: 20px;
font-weight: 700;
color: #2d3748;
margin-bottom: 5px;
}
.elderly-care-form-container .rating-level {
display: block;
font-size: 14px;
font-weight: 600;
}
/* 满意度级别颜色 */
.elderly-care-form-container .rating-option:nth-child(1) .rating-level { color: #38a169; } /* 非常满意 */
.elderly-care-form-container .rating-option:nth-child(2) .rating-level { color: #38a169; }
.elderly-care-form-container .rating-option:nth-child(3) .rating-level { color: #68d391; } /* 比较满意 */
.elderly-care-form-container .rating-option:nth-child(4) .rating-level { color: #68d391; }
.elderly-care-form-container .rating-option:nth-child(5) .rating-level { color: #ecc94b; } /* 一般 */
.elderly-care-form-container .rating-option:nth-child(6) .rating-level { color: #ecc94b; }
.elderly-care-form-container .rating-option:nth-child(7) .rating-level { color: #ed8936; } /* 不太满意 */
.elderly-care-form-container .rating-option:nth-child(8) .rating-level { color: #ed8936; }
.elderly-care-form-container .rating-option:nth-child(9) .rating-level { color: #e53e3e; } /* 非常不满意 */
.elderly-care-form-container .rating-option:nth-child(10) .rating-level { color: #e53e3e; }
.elderly-care-form-container .total-card {
background: linear-gradient(135deg, #1e6bb8 0%, #2a87e0 100%);
color: white;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(30, 107, 184, 0.3);
margin-top: 20px;
}
.elderly-care-form-container .total-card h3 {
font-size: 1.4rem;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.elderly-care-form-container .total-score {
font-size: 3.5rem;
font-weight: 800;
margin: 15px 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.elderly-care-form-container .score-description {
font-size: 1.1rem;
opacity: 0.9;
}
.elderly-care-form-container .info-card {
background: #f0f7ff;
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid #c2d8f0;
}
.elderly-care-form-container .info-title {
color: #1e6bb8;
margin-top: 0;
margin-bottom: 20px;
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 10px;
}
.elderly-care-form-container .info-content {
color: #4a5568;
line-height: 1.7;
}
.elderly-care-form-container .info-content ul {
padding-left: 25px;
margin: 15px 0;
}
.elderly-care-form-container .info-content li {
margin-bottom: 10px;
position: relative;
padding-left: 25px;
}
.elderly-care-form-container .info-content li:before {
content: "•";
color: #1e6bb8;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
font-size: 1.2rem;
}
.elderly-care-form-container .info-content strong {
color: #2d3748;
}
.elderly-care-form-container .submit-btn {
display: block;
width: 100%;
background: linear-gradient(to right, #1e6bb8, #2a87e0);
color: white;
border: none;
padding: 18px;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(30, 107, 184, 0.3);
}
.elderly-care-form-container .submit-btn:hover {
background: linear-gradient(to right, #155093, #1e6bb8);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(30, 107, 184, 0.4);
}
.elderly-care-form-container .submit-btn i {
margin-right: 10px;
}
.elderly-care-form-container .footer {
text-align: center;
margin-top: 30px;
color: #4a5568;
font-size: 14px;
padding: 20px 0;
}
@media (max-width: 900px) {
.elderly-care-form-container .form-container {
grid-template-columns: 1fr;
}
.elderly-care-form-container .rating-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.elderly-care-form-container .rating-grid {
grid-template-columns: 1fr;
}
.elderly-care-form-container header h1 {
font-size: 1.8rem;
}
.elderly-care-form-container .section-title {
font-size: 1.4rem;
}
.elderly-care-form-container .total-score {
font-size: 2.8rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
// 所有评分项的权重
const weights = {
'service-attitude': 0.07,
'skill-level': 0.07,
'staff-allocation': 0.07,
'living-facilities': 0.07,
'safety-facilities': 0.07,
'service-facilities': 0.07,
'cleanliness': 0.08,
'service-effect': 0.20,
'service-demand': 0.20,
'fee-evaluation': 0.10
};
// 评分描述
const scoreDescriptions = {
10: "非常满意",
9: "非常满意",
8: "比较满意",
7: "比较满意",
6: "一般",
5: "一般",
4: "不太满意",
3: "不太满意",
2: "非常不满意",
1: "非常不满意"
};
// 获取总分元素
const totalScoreElement = document.getElementById('total-score');
const scoreDescriptionElement = document.getElementById('score-description');
// 为所有评分选项添加事件监听
document.querySelectorAll('.elderly-care-form-container .rating-input').forEach(input => {
input.addEventListener('change', calculateTotalScore);
});
// 计算总分的函数
function calculateTotalScore() {
let total = 0;
// 计算每个评分项的加权分
for (const field in weights) {
const selected = document.querySelector(`.elderly-care-form-container input[name="${field}"]:checked`);
if (selected) {
const score = parseFloat(selected.value);
total += score * weights[field];
}
}
// 更新总分显示
totalScoreElement.textContent = total.toFixed(2);
// 更新评分描述
if (total === 0) {
scoreDescriptionElement.textContent = "请完成评价后查看结果";
} else {
let description = "评价结果：";
if (total >= 9.0) description += "非常满意";
else if (total >= 7.0) description += "比较满意";
else if (total >= 5.0) description += "一般";
else if (total >= 3.0) description += "不太满意";
else description += "非常不满意";
scoreDescriptionElement.textContent = description;
}
}
// 初始设置当前日期
const today = new Date();
const formattedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
document.getElementById('evaluation-date').value = formattedDate;
// 表单提交处理
document.querySelector('.elderly-care-form-container .submit-btn').addEventListener('click', function() {
// 检查是否所有评价项都已填写
let allRated = true;
for (const field in weights) {
const selected = document.querySelector(`.elderly-care-form-container input[name="${field}"]:checked`);
if (!selected) {
allRated = false;
break;
}
}
if (allRated) {
// 这里可以添加表单提交逻辑
alert('评价提交成功！感谢您的反馈！');
} else {
alert('请完成所有评价项后再提交！');
}
});
// 模拟初始评分
setTimeout(() => {
// 设置一些初始评分
document.querySelector('.elderly-care-form-container input[name="service-attitude"][value="8"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="skill-level"][value="9"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="staff-allocation"][value="7"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="living-facilities"][value="8"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="safety-facilities"][value="9"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="service-facilities"][value="7"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="cleanliness"][value="8"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="service-effect"][value="8"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="service-demand"][value="9"]').checked = true;
document.querySelector('.elderly-care-form-container input[name="fee-evaluation"][value="7"]').checked = true;
// 计算初始总分
calculateTotalScore();
}, 500);
});