干部考核评价表
/* 干部考核表单样式 */
.evaluation-form-container {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
padding: 20px;
min-height: 100vh;
}
.evaluation-form-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.evaluation-form-container .evaluation-container {
max-width: 1200px;
margin: 20px auto;
background: white;
border-radius: 15px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
overflow: hidden;
border: 1px solid #d1e0ff;
}
.evaluation-form-container header {
background: linear-gradient(120deg, #1a6dcc 0%, #0d4b9e 100%);
color: white;
padding: 35px 40px;
text-align: center;
position: relative;
border-bottom: 5px solid #0a3d7c;
}
.evaluation-form-container header h1 {
font-size: 2.8rem;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: 1.5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.evaluation-form-container header p {
font-size: 1.2rem;
opacity: 0.92;
max-width: 750px;
margin: 0 auto;
line-height: 1.7;
}
.evaluation-form-container .form-container {
padding: 35px 40px;
}
.evaluation-form-container .info-section {
background: #e8f4ff;
border-radius: 12px;
padding: 25px;
margin-bottom: 35px;
display: flex;
flex-wrap: wrap;
gap: 25px;
border: 2px solid #c2dcf7;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.evaluation-form-container .info-item {
flex: 1;
min-width: 220px;
}
.evaluation-form-container .info-item label {
display: block;
font-weight: 700;
margin-bottom: 12px;
color: #0d4b9e;
font-size: 17px;
}
.evaluation-form-container .info-item input,
.evaluation-form-container .info-item select {
width: 100%;
padding: 14px 18px;
border: 2px solid #c2dcf7;
border-radius: 8px;
font-size: 17px;
background: white;
transition: all 0.3s;
}
.evaluation-form-container .info-item input:focus {
outline: none;
border-color: #1a6dcc;
box-shadow: 0 0 0 4px rgba(26, 109, 204, 0.2);
}
.evaluation-form-container .evaluation-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 30px 0;
font-size: 16px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow: hidden;
}
.evaluation-form-container .evaluation-table th {
background: #1a6dcc;
color: white;
text-align: center;
padding: 18px;
font-weight: 700;
font-size: 17px;
border-bottom: 3px solid #0d4b9e;
}
.evaluation-form-container .evaluation-table td {
padding: 15px 18px;
border-bottom: 1px solid #e1e8ed;
transition: background 0.2s;
}
.evaluation-form-container .evaluation-table tr:nth-child(even) {
background-color: #f8fbff;
}
.evaluation-form-container .evaluation-table tr:hover {
background-color: #edf5ff;
}
.evaluation-form-container .category-row {
background: #d4e6ff !important;
font-weight: 700;
color: #0d4b9e;
font-size: 17px;
}
.evaluation-form-container .category-row td {
border-bottom: 3px solid #a0c5f7;
}
.evaluation-form-container .score-input {
width: 90px;
padding: 10px 12px;
text-align: center;
border: 2px solid #c2dcf7;
border-radius: 6px;
font-size: 16px;
background-color: #fff;
font-weight: 600;
transition: all 0.2s;
}
.evaluation-form-container .score-input:focus {
border-color: #1a6dcc;
box-shadow: 0 0 0 3px rgba(26, 109, 204, 0.2);
}
.evaluation-form-container .note-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #c2dcf7;
border-radius: 6px;
font-size: 16px;
transition: all 0.2s;
}
.evaluation-form-container .note-input:focus {
border-color: #1a6dcc;
box-shadow: 0 0 0 3px rgba(26, 109, 204, 0.2);
}
.evaluation-form-container .total-row {
background: #c2dcf7 !important;
font-weight: 800;
font-size: 18px;
color: #0d4b9e;
}
.evaluation-form-container .total-row td {
border-top: 3px solid #a0c5f7;
border-bottom: none;
padding: 18px;
}
.evaluation-form-container .result-section {
background: #f0f8ff;
border-radius: 12px;
padding: 30px;
margin-top: 35px;
display: flex;
flex-wrap: wrap;
gap: 30px;
border: 2px solid #c2dcf7;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.evaluation-form-container .result-card {
flex: 1;
min-width: 260px;
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
text-align: center;
border: 1px solid #d1e0ff;
transition: transform 0.3s, box-shadow 0.3s;
}
.evaluation-form-container .result-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.evaluation-form-container .result-card h3 {
color: #0d4b9e;
margin-bottom: 20px;
font-size: 20px;
font-weight: 700;
}
.evaluation-form-container .result-value {
font-size: 32px;
font-weight: 800;
color: #1a6dcc;
margin: 15px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.evaluation-form-container .star-rating {
font-size: 42px;
letter-spacing: 6px;
color: #ffcc00;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
margin: 20px 0;
font-weight: 700;
}
.evaluation-form-container .bonus-amount {
font-size: 36px;
color: #27ae60;
font-weight: 800;
margin: 15px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.evaluation-form-container .submit-section {
text-align: center;
margin: 35px 0;
}
.evaluation-form-container .submit-btn {
background: linear-gradient(120deg, #1a6dcc 0%, #0d4b9e 100%);
color: white;
border: none;
padding: 18px 55px;
font-size: 20px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 18px rgba(26, 109, 204, 0.4);
margin: 0 10px;
position: relative;
overflow: hidden;
}
.evaluation-form-container .submit-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(26, 109, 204, 0.5);
}
.evaluation-form-container .footer-note {
text-align: center;
margin-top: 25px;
color: #555;
font-size: 16px;
padding: 20px;
border-top: 2px solid #eee;
background: #f9fbfd;
border-radius: 0 0 15px 15px;
}
.evaluation-form-container .calc-btn {
background: linear-gradient(120deg, #27ae60 0%, #219653 100%);
color: white;
border: none;
padding: 14px 35px;
font-size: 18px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 15px rgba(39, 174, 96, 0.4);
margin: 15px 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.evaluation-form-container .calc-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 22px rgba(39, 174, 96, 0.5);
}
.evaluation-form-container .test-btn {
background: linear-gradient(120deg, #9b59b6 0%, #8e44ad 100%);
color: white;
border: none;
padding: 14px 35px;
font-size: 18px;
font-weight: 700;
border-radius: 50px;
cursor: button;
transition: all 0.3s ease;
box-shadow: 0 6px 15px rgba(155, 89, 182, 0.4);
margin: 15px 10px;
display: inline-block;
position: relative;
overflow: hidden;
}
.evaluation-form-container .test-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 22px rgba(155, 89, 182, 0.5);
}
.evaluation-form-container .button-container {
text-align: center;
margin: 25px 0;
}
.evaluation-form-container .success-pulse {
animation: pulse 1.2s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.5); }
50% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(39, 174, 96, 0); }
100% { transform: scale(1); }
}
.evaluation-form-container .score-updated {
animation: scoreHighlight 1.5s ease;
}
@keyframes scoreHighlight {
0% { background-color: #e1f7e1; }
70% { background-color: #e1f7e1; }
100% { background-color: transparent; }
}
@media (max-width: 900px) {
.evaluation-form-container .form-container {
padding: 25px;
}
.evaluation-form-container header {
padding: 25px;
}
.evaluation-form-container header h1 {
font-size: 2.3rem;
}
.evaluation-form-container .evaluation-table {
font-size: 15px;
}
.evaluation-form-container .evaluation-table th,
.evaluation-form-container .evaluation-table td {
padding: 12px 10px;
}
.evaluation-form-container .score-input {
width: 80px;
}
.evaluation-form-container .result-card {
min-width: 100%;
margin-bottom: 20px;
}
}
@media (max-width: 600px) {
.evaluation-form-container .info-section {
flex-direction: column;
padding: 20px;
}
.evaluation-form-container .evaluation-table {
display: block;
overflow-x: auto;
font-size: 14px;
}
.evaluation-form-container .score-input {
width: 70px;
padding: 8px 10px;
}
.evaluation-form-container .submit-btn,
.evaluation-form-container .calc-btn,
.evaluation-form-container .test-btn {
width: 100%;
margin: 10px 0;
padding: 16px;
}
.evaluation-form-container .button-container {
margin: 15px 0;
}
.evaluation-form-container .result-section {
padding: 20px;
}
.evaluation-form-container .result-card {
padding: 20px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// 获取所有得分输入框
const scoreInputs = document.querySelectorAll('.score-input');
const totalScoreElement = document.getElementById('total-score');
const starRatingElement = document.getElementById('star-rating');
const bonusAmountElement = document.getElementById('bonus-amount');
const scoreValueElement = document.getElementById('score-value');
const overallScoreElement = document.getElementById('overall-score');
const performanceElement = document.getElementById('performance');
const submitBtn = document.getElementById('submit-btn');
const calculateBtn = document.getElementById('calculate-btn');
const testDataBtn = document.getElementById('test-data-btn');
// 设置默认日期为今天
const today = new Date();
const formattedDate = today.toISOString().split('T')[0];
document.getElementById('evaluation-date').value = formattedDate;
// 为计算按钮添加事件监听
calculateBtn.addEventListener('click', function() {
calculateScores();
// 添加成功动画
this.classList.add('success-pulse');
setTimeout(() => {
this.classList.remove('success-pulse');
}, 1200);
});
// 为测试数据按钮添加事件监听
testDataBtn.addEventListener('click', function() {
addSampleData();
// 添加成功动画
this.classList.add('success-pulse');
setTimeout(() => {
this.classList.remove('success-pulse');
}, 1200);
});
// 提交按钮事件
submitBtn.addEventListener('click', function() {
const branchName = document.getElementById('branch-name').value;
const totalScore = totalScoreElement.textContent;
if (!branchName) {
alert('请输入网点名称');
return;
}
if (totalScore === "0") {
if (!confirm('总分为0，确定要提交吗？')) {
return;
}
}
this.innerHTML = '
提交中...';
this.disabled = true;
// 模拟提交过程
setTimeout(() => {
this.innerHTML = '
提交成功!';
this.style.background = 'linear-gradient(120deg, #27ae60 0%, #219653 100%)';
// 显示成功消息
alert(`网点 ${branchName} 评价提交成功！\n最终得分：${totalScore}分`);
// 重置按钮状态
setTimeout(() => {
this.disabled = false;
this.innerHTML = '
提交评价表';
this.style.background = 'linear-gradient(120deg, #1a6dcc 0%, #0d4b9e 100%)';
}, 3000);
}, 2000);
});
// 计算分数函数 - 不区分部分，计算整体23项
function calculateScores() {
let total = 0;
const evaluationCount = scoreInputs.length;
// 计算所有23项的总和
for (let i = 0; i {
totalScoreElement.parentElement.classList.remove('score-updated');
}, 1500);
}
// 计算干部评定函数
function calculateStarRating(total) {
let stars = "";
let bonus = "0";
let performance = "待评定";
if (total >= 91) {
stars = "★★★★★";
bonus = "20";
performance = "卓越";
} else if (total >= 81) {
stars = "★★★★";
bonus = "15";
performance = "优秀";
} else if (total >= 71) {
stars = "★★★";
bonus = "11";
performance = "良好";
} else if (total >= 61) {
stars = "★★";
bonus = "8";
performance = "合格";
} else if (total >= 51) {
stars = "★";
bonus = "5";
performance = "需改进";
} else {
stars = "无";
bonus = "0";
performance = "不合格";
}
starRatingElement.textContent = stars;
bonusAmountElement.textContent = bonus;
performanceElement.textContent = performance;
}
// 添加测试数据函数
function addSampleData() {
// 填充所有23项
for (let i = 0; i < scoreInputs.length; i++) {
const randomScore = (Math.random() * 4 + 1).toFixed(1); // 1-5分
scoreInputs[i].value = randomScore;
}
// 自动计算
calculateScores();
}
// 初始显示
calculateScores();
});