星评质控评价系统
/* 基础样式 */
:root {
--primary-color: #165DFF;
--primary-hover: #0E42D2;
--bg-color: #f9f9f9;
--border-color: #e0e0e0;
--text-color: #333;
--hover-bg: #f0f0f0;
--error-color: #e74c3c;
--info-bg: #f5f7fa;
--success-color: #28a745;
--warning-color: #ffc107;
--card-highlight: #f0f9ff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
padding: 20px;
background-image: linear-gradient(135deg, #f5f7fa 0%, #e4ecff 100%);
min-height: 100vh;
}
.cf7-ultra-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.cf7-header {
text-align: center;
margin-bottom: 30px;
padding: 25px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.cf7-header h1 {
font-size: 2.2rem;
color: var(--primary-color);
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.cf7-header p {
font-size: 1.1rem;
color: #666;
max-width: 700px;
margin: 0 auto;
}
.cf7-section-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
padding: 25px;
transition: all 0.3s ease;
border-left: 4px solid var(--primary-color);
}
.cf7-section-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cf7-info-card {
background-color: var(--info-bg);
border-radius: 8px;
margin-bottom: 25px;
padding: 25px;
border-left: 4px solid #8c9eff;
}
.cf7-info-title {
color: #555;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.cf7-info-title i {
color: var(--primary-color);
}
.cf7-info-content {
color: #666;
line-height: 1.6;
}
.cf7-info-content ul {
margin: 15px 0 15px 20px;
}
.cf7-info-content li {
margin-bottom: 8px;
}
.cf7-section-title {
color: var(--text-color);
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.cf7-section-title::before {
content: '';
display: inline-block;
width: 6px;
height: 20px;
background-color: var(--primary-color);
margin-right: 10px;
border-radius: 3px;
}
.cf7-form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.cf7-form-col {
flex: 1;
padding: 0 15px;
margin-bottom: 20px;
min-width: 280px;
}
.cf7-form-col-sm {
flex: 1;
padding: 0 10px;
margin-bottom: 15px;
min-width: 120px;
}
@media (max-width: 768px) {
.cf7-form-col, .cf7-form-col-sm {
flex-basis: 100%;
}
}
.cf7-input-wrapper {
position: relative;
margin-bottom: 20px;
}
.cf7-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
display: flex;
align-items: center;
gap: 8px;
}
.cf7-label i {
color: var(--primary-color);
font-size: 16px;
}
.required {
color: var(--error-color);
margin-left: 3px;
font-size: 14px;
}
.cf7-input, .cf7-select, .cf7-textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
color: var(--text-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cf7-input:focus, .cf7-select:focus, .cf7-textarea:focus {
outline: none;
border-color: var(--primary-color);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.15);
}
.cf7-input::placeholder, .cf7-textarea::placeholder {
color: #999;
}
.cf7-radio-group {
margin-bottom: 20px;
}
.cf7-radio {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cf7-radio-item {
display: flex;
align-items: center;
margin-right: 15px;
margin-bottom: 10px;
}
.cf7-radio-item input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cf7-radio-item label {
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
background-color: var(--bg-color);
color: #666;
cursor: pointer;
transition: all 0.2s ease;
font-size: 15px;
min-width: 100px;
text-align: center;
}
.cf7-radio-item input[type="radio"]:checked + label {
background-color: var(--primary-color);
color: #fff;
box-shadow: 0 2px 5px rgba(22, 93, 255, 0.3);
}
.cf7-radio-item label:hover {
background-color: var(--hover-bg);
}
.cf7-checkbox-group {
margin-bottom: 20px;
}
.cf7-checkbox {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cf7-checkbox-item {
display: flex;
align-items: center;
margin-bottom: 15px;
width: 100%;
}
.cf7-checkbox-item input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cf7-checkbox-item label {
position: relative;
padding-left: 35px;
cursor: pointer;
line-height: 22px;
color: #666;
font-size: 15px;
display: inline-block;
}
.cf7-checkbox-item label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border: 2px solid var(--border-color);
border-radius: 4px;
background-color: #fff;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cf7-checkbox-item input[type="checkbox"]:checked + label:before {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.cf7-checkbox-item input[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cf7-checkbox-item label:hover:before {
border-color: var(--primary-color);
}
.cf7-submit-wrapper {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.cf7-submit {
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 8px;
padding: 16px 50px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
}
.cf7-submit:hover {
background-color: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(22, 93, 255, 0.3);
}
.cf7-submit:active {
transform: translateY(0);
}
.cf7-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shine 2s infinite;
}
@keyframes shine {
100% {
left: 100%;
}
}
.cf7-footer {
text-align: center;
margin-top: 30px;
color: #777;
font-size: 14px;
}
.stats-summary {
display: flex;
justify-content: space-around;
margin: 25px 0;
flex-wrap: wrap;
gap: 15px;
}
.stat-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
text-align: center;
min-width: 180px;
flex: 1;
transition: all 0.3s ease;
}
.stat-card.highlight {
background: var(--card-highlight);
border: 2px solid var(--primary-color);
box-shadow: 0 6px 15px rgba(22, 93, 255, 0.15);
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.stat-card .value {
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-color);
margin: 10px 0;
}
.stat-card .sub-value {
font-size: 1rem;
margin: 5px 0;
color: #666;
}
.stat-card .label {
color: #666;
font-size: 0.9rem;
}
.progress-container {
margin-top: 10px;
}
.progress-bar {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--primary-color);
border-radius: 4px;
transition: width 0.5s ease;
}
.calculation-result {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
margin-top: 10px;
padding: 8px 0;
border-top: 1px dashed #ddd;
}
.calculation-value {
color: #ff6b35;
font-weight: 700;
}
.wpcf7-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
}
.wpcf7-table th, .wpcf7-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.wpcf7-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.wpcf7-table tr:nth-child(even) {
background-color: #f9f9f9;
}
input[readonly] {
background-color: #f0f0f0;
font-weight: bold;
color: #333;
border: 1px solid #ddd;
padding: 8px;
}
.result-container {
margin: 20px 0;
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 4px;
}
.result-container label {
font-weight: bold;
margin-right: 10px;
}
.star-display {
font-size: 24px;
letter-spacing: 3px;
color: #ffcc00;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
background: transparent !important;
border: none !important;
font-weight: bold;
width: 100%;
}
input[type="number"] {
width: 80px;
padding: 8px;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 8px;
}
input[type="submit"] {
background: #0073aa;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
input[type="submit"]:hover {
background: #005177;
}
.deduction-control {
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.deduction-input-group {
display: flex;
justify-content: center;
}
.basis-input-group {
display: flex;
justify-content: center;
}
.wpcf7-table tr:hover {
background-color: #f5f5f5;
}
/* 单选按钮（评分）样式 */
.cf7-rating-group {
margin-bottom: 20px;
}
.cf7-rating-label {
display: block;
margin-bottom: 12px;
font-weight: 500;
color: #555;
}
.cf7-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cf7-radio span.wpcf7-list-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.cf7-radio input[type="radio"] + span.wpcf7-list-item-label {
display: inline-block;
padding: 10px 18px;
border-radius: 6px;
background-color: var(--bg-color);
color: #666;
cursor: pointer;
transition: all 0.2s ease;
font-size: 18px;
line-height: 1.4;
min-width: 120px;
text-align: center;
}
.cf7-radio input[type="radio"]:checked + span.wpcf7-list-item-label {
background-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: 0 2px 5px rgba(22, 93, 255, 0.3);
}
.cf7-radio input[type="radio"] + span.wpcf7-list-item-label:hover {
background-color: var(--hover-bg);
transform: translateY(-1px);
}
/* 添加自定义提醒样式 */
.custom-alert {
position: fixed;
top: 400px;
left: 50%;
transform: translateX(-50%);
padding: 15px 30px;
border-radius: 8px;
font-size: 25px;
font-weight: 500;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
animation: fadeIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
display: flex;
align-items: center;
gap: 10px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; visibility: hidden; }
}
.custom-alert.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.custom-alert.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* 必填字段错误样式 */
.field-error {
position: relative;
}
.field-error::after {
content: "必填字段";
position: absolute;
top: 100%;
left: 0;
color: #e74c3c;
font-size: 12px;
margin-top: 4px;
}
.field-error .cf7-input,
.field-error .cf7-select {
border-color: #e74c3c !important;
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15) !important;
}
/* 单选框错误样式 */
.field-error .cf7-radio-item label {
background-color: rgba(231, 76, 60, 0.1);
border: 1px solid #e74c3c;
}
.alert-icon {
font-size: 18px;
}
document.addEventListener('DOMContentLoaded', function() {
// 存储原始表单HTML
const originalFormHTML = document.querySelector('.wpcf7-form').innerHTML;
// 声明变量但不初始化
let deductionInputs;
let totalSelfInput;
let starRatingInput;
let bonusAmountInput;
// 初始化函数
function initForm() {
// 获取所有得分输入框
deductionInputs = document.querySelectorAll('.deduction-input');
totalSelfInput = document.getElementById('total-self');
starRatingInput = document.getElementById('star-rating');
bonusAmountInput = document.getElementById('bonus-amount');
// 初始化总分
updateTotalScore();
// 为每个得分输入框添加事件监听
deductionInputs.forEach(input => {
input.addEventListener('input', function() {
// 验证输入值不超过最大值
const max = parseFloat(this.getAttribute('max'));
const value = parseFloat(this.value) || 0;
if (value > max) {
this.value = max;
}
updateTotalScore();
calculateStarRating();
});
});
// 初始计算星级
calculateStarRating();
}
// 初始化表单
initForm();
// 更新总分函数（所有得分项的总和）
function updateTotalScore() {
let totalScore = 0;
deductionInputs.forEach(input => {
const value = parseFloat(input.value) || 0;
totalScore += value;
});
if (totalSelfInput) {
totalSelfInput.value = totalScore.toFixed(2);
}
}
// 计算星级评定函数
function calculateStarRating() {
if (!totalSelfInput || !starRatingInput || !bonusAmountInput) return;
const totalSelf = parseFloat(totalSelfInput.value) || 0;
let rating = "无等级";
let bonus = "0万";
let stars = "";
if (totalSelf >= 91) {
rating = "★★★★★";
stars = "★★★★★";
bonus = "20万";
} else if (totalSelf >= 81) {
rating = "★★★★";
stars = "★★★★";
bonus = "15万";
} else if (totalSelf >= 71) {
rating = "★★★";
stars = "★★★";
bonus = "11万";
} else if (totalSelf >= 61) {
rating = "★★";
stars = "★★";
bonus = "8万";
} else if (totalSelf >= 51) {
rating = "★";
stars = "★";
bonus = "5万";
} else {
rating = "无等级";
stars = "无";
bonus = "0万";
}
starRatingInput.value = `${stars} (${totalSelf.toFixed(2)}分)`;
bonusAmountInput.value = bonus;
}
// 表单提交前处理
document.addEventListener('wpcf7beforesubmit', function(event) {
// 验证必填字段
if (!validateRequiredFields()) {
event.preventDefault();
showAlert('请填写所有必填字段', 'error');
return;
}
}, false);
// 验证必填字段函数
function validateRequiredFields() {
let isValid = true;
const requiredFields = document.querySelectorAll('[required]');
// 重置所有错误状态
document.querySelectorAll('.field-error').forEach(el => {
el.classList.remove('field-error');
});
requiredFields.forEach(field => {
// 检查字段是否填写
if (field.type === 'radio') {
// 处理单选框组
const groupName = field.name;
const radioGroup = document.querySelectorAll(`[name="${groupName}"]`);
let isChecked = false;
radioGroup.forEach(radio => {
if (radio.checked) isChecked = true;
});
if (!isChecked) {
isValid = false;
const wrapper = radioGroup[0].closest('.cf7-input-wrapper');
if (wrapper) wrapper.classList.add('field-error');
// 跳转到第一个错误字段
if (isValid === false) {
wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
} else if (!field.value.trim()) {
isValid = false;
const wrapper = field.closest('.cf7-input-wrapper');
if (wrapper) wrapper.classList.add('field-error');
// 跳转到第一个错误字段
if (isValid === false) {
wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
});
return isValid;
}
// 表单提交成功处理
document.addEventListener('wpcf7mailsent', function(event) {
showAlert('提交成功！您的评估已成功发送。', 'success');
// 恢复原始表单
document.querySelector('.wpcf7-form').innerHTML = originalFormHTML;
// 重新初始化表单
setTimeout(reinitializeForm, 100);
}, false);
// 表单提交失败处理 - 移除重置表单的代码
document.addEventListener('wpcf7mailfailed', function(event) {
showAlert('提交失败：邮件发送过程中出现问题，请稍后重试。', 'error');
// 不再重置表单，保留用户输入
reinitializeForm();
}, false);
// 表单验证失败处理 - 移除重置表单的代码
document.addEventListener('wpcf7invalid', function(event) {
showAlert('表单验证失败：请检查所有必填字段并修正错误。', 'error');
// 不再重置表单，保留用户输入
reinitializeForm();
}, false);
// 显示提醒消息函数
function showAlert(message, type) {
// 移除现有的提醒
const existingAlert = document.querySelector('.custom-alert');
if (existingAlert) existingAlert.remove();
// 创建提醒元素
const alertDiv = document.createElement('div');
alertDiv.className = `custom-alert ${type}`;
// 添加图标
const icon = document.createElement('i');
icon.className = `fas ${type === 'success' ? 'fa-check-circle alert-icon' : 'fa-exclamation-circle alert-icon'}`;
alertDiv.appendChild(icon);
// 添加消息文本
const text = document.createTextNode(message);
alertDiv.appendChild(text);
// 添加到页面
document.body.appendChild(alertDiv);
// 5秒后自动移除
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.parentNode.removeChild(alertDiv);
}
}, 5000);
}
// 重新初始化表单
function reinitializeForm() {
// 重新初始化表单元素和事件
initForm();
}
});