社会公众代表推荐系统 · AI智能推荐版
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
body {
background: #f0f3f8;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 20px;
}
.app-container {
max-width: 1600px;
width: 100%;
background: white;
border-radius: 32px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
overflow: hidden;
display: flex;
flex-direction: column;
}
.tabs {
display: flex;
background: #fafbff;
border-bottom: 1px solid #e9ebf0;
padding: 0 24px;
flex-wrap: wrap;
gap: 4px;
}
.tab {
padding: 18px 28px;
font-weight: 600;
font-size: 1rem;
color: #5a5f73;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.15s;
border-radius: 8px 8px 0 0;
}
.tab:hover {
background: #f0f2f8;
color: #1e3c72;
}
.tab.active {
color: #1e3c72;
border-bottom-color: #1e3c72;
background: rgba(30,60,114,0.02);
}
.main-layout {
display: flex;
flex: 1;
min-height: 600px;
}
.content-panel {
flex: 2.2;
padding: 28px 32px;
background: white;
overflow-y: auto;
max-height: 850px;
}
.invite-sidebar {
flex: 1.2;
background: #f9fafc;
border-left: 1px solid #e6e9f0;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 16px;
max-height: 850px;
overflow-y: auto;
}
.invite-sidebar h3 {
margin: 0 0 8px 0;
font-weight: 600;
font-size: 1.2rem;
color: #1e2b3a;
display: flex;
align-items: center;
gap: 8px;
}
.invite-sidebar h3 span {
background: #1e3c72;
color: white;
border-radius: 40px;
padding: 2px 12px;
font-size: 0.85rem;
}
.invite-card {
background: white;
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
border: 1px solid #ecedf2;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.1s;
animation: slideIn 0.2s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.invite-card-info {
font-weight: 500;
font-size: 0.95rem;
}
.invite-card-info small {
display: block;
color: #6f7885;
font-size: 0.8rem;
margin-top: 4px;
}
.btn-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn-icon {
border: none;
background: #f0f2f6;
padding: 6px 12px;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: 0.1s;
color: #2c3e50;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-icon:hover {
background: #e1e6ef;
}
.btn-confirm {
background: #d9eafb;
color: #0a4d8c;
}
.btn-confirm:hover {
background: #c0d9f0;
}
.btn-danger {
background: #ffeae9;
color: #b13e3e;
}
.btn-danger:hover {
background: #fbd1cf;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.filters input, .filters select {
padding: 10px 18px;
border: 1px solid #d0d5de;
border-radius: 40px;
font-size: 0.9rem;
background: white;
min-width: 140px;
transition: all 0.1s;
}
.filters input:focus, .filters select:focus {
outline: none;
border-color: #1e3c72;
box-shadow: 0 0 0 3px rgba(30,60,114,0.1);
}
.btn-primary {
background: #1e3c72;
color: white;
border: none;
padding: 10px 24px;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: 0.15s;
box-shadow: 0 4px 8px rgba(0,30,60,0.1);
}
.btn-primary:hover {
background: #15345c;
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0,30,60,0.15);
}
.btn-outline {
background: white;
border: 1px solid #cbd0da;
padding: 8px 18px;
border-radius: 40px;
font-weight: 500;
cursor: pointer;
transition: 0.1s;
}
.btn-outline:hover {
background: #f5f7fb;
border-color: #9aa4b8;
}
table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.02);
}
th {
background: #f2f5fb;
color: #1e2f40;
font-weight: 600;
font-size: 0.85rem;
padding: 16px 14px;
text-align: left;
white-space: nowrap;
}
td {
padding: 14px 14px;
border-bottom: 1px solid #edf0f5;
font-size: 0.9rem;
vertical-align: middle;
}
tr:hover td {
background-color: #fafbff;
}
.badge {
background: #ebf4ff;
color: #1a4972;
padding: 4px 10px;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
display: inline-block;
}
.badge.attended {
background: #e0e7e0;
color: #2b5e2b;
}
.badge.identity {
background: #e8eef9;
color: #2c3e6d;
}
.badge.category {
background: #f0e7fa;
color: #5e3c8a;
}
.action-cell {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.modal {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
border-radius: 36px;
padding: 32px;
width: 520px;
max-width: 90%;
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
max-height: 80vh;
overflow-y: auto;
}
.modal-content h3 {
margin-top: 0;
font-size: 1.4rem;
color: #1e2f40;
}
.modal-content input, .modal-content textarea, .modal-content select {
width: 100%;
padding: 12px 18px;
margin: 8px 0 16px;
border: 1px solid #ced4da;
border-radius: 30px;
font-size: 0.95rem;
}
.flex-row {
display: flex;
gap: 16px;
justify-content: flex-end;
margin-top: 24px;
}
.small-note {
color: #7b7f8c;
font-size: 0.8rem;
margin: 10px 0;
}
.upload-area {
border: 2px dashed #bac2cf;
border-radius: 40px;
padding: 36px;
text-align: center;
background: #fbfdff;
cursor: pointer;
transition: 0.1s;
}
.upload-area:hover {
background: #f5f9ff;
border-color: #1e3c72;
}
.meeting-record {
background: #f7f9fe;
border-radius: 24px;
padding: 20px 24px;
margin-bottom: 20px;
border-left: 6px solid #1e3c72;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.meeting-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.meeting-title {
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 12px;
}
.meeting-title input {
font-size: 1rem;
padding: 6px 12px;
border-radius: 30px;
border: 1px solid #ccc;
}
.meeting-badge {
background: #1e3c72;
color: white;
border-radius: 40px;
padding: 4px 16px;
font-size: 0.8rem;
}
.mini-table {
font-size: 0.9rem;
width: 100%;
background: white;
border-radius: 16px;
overflow: hidden;
}
.mini-table td {
padding: 10px 8px;
border-bottom: 1px dashed #e6eaf0;
}
.meeting-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 16px;
}
/* AI推荐区域样式 */
.ai-recommend-container {
background: linear-gradient(145deg, #f6f9ff, #ffffff);
border-radius: 28px;
padding: 28px;
margin-bottom: 32px;
border: 1px solid #e2e8f2;
box-shadow: 0 8px 20px rgba(0,30,60,0.05);
}
.ai-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.ai-header h2 {
margin: 0;
font-size: 1.5rem;
color: #1e2f40;
font-weight: 600;
}
.ai-badge {
background: #1e3c72;
color: white;
padding: 6px 16px;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.5px;
}
.ai-prompt-box {
background: white;
border-radius: 60px;
padding: 4px 4px 4px 24px;
display: flex;
align-items: center;
border: 1px solid #d9e0eb;
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
margin-bottom: 24px;
}
.ai-prompt-box input {
flex: 1;
border: none;
padding: 16px 8px 16px 0;
font-size: 0.95rem;
outline: none;
}
.ai-prompt-box button {
background: #1e3c72;
color: white;
border: none;
padding: 12px 28px;
border-radius: 40px;
font-weight: 600;
cursor: pointer;
transition: 0.15s;
white-space: nowrap;
}
.ai-prompt-box button:hover {
background: #15345c;
transform: scale(1.02);
}
.ai-examples {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
.ai-example-chip {
background: #f0f5ff;
border: 1px solid #cdd9ed;
padding: 8px 18px;
border-radius: 40px;
font-size: 0.85rem;
color: #1e3c72;
cursor: pointer;
transition: 0.1s;
}
.ai-example-chip:hover {
background: #e1eafc;
border-color: #1e3c72;
}
.ai-result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 24px 0 16px;
}
.ai-result-header h4 {
font-size: 1.1rem;
margin: 0;
color: #2c3e50;
}
.batch-actions {
display: flex;
gap: 12px;
}
.candidate-table {
background: white;
border-radius: 20px;
overflow: hidden;
border: 1px solid #eef2f7;
}
.candidate-row {
display: flex;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid #edf2f9;
transition: 0.1s;
}
.candidate-row:hover {
background: #fafcff;
}
.candidate-row:last-child {
border-bottom: none;
}
.candidate-info {
flex: 3;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.candidate-name {
font-weight: 600;
min-width: 100px;
}
.candidate-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background: #f2f6fc;
padding: 4px 12px;
border-radius: 30px;
font-size: 0.75rem;
color: #2c3e6d;
}
.tag.region {
background: #e8f1fb;
color: #026;
}
.tag.gender {
background: #f0eef9;
color: #5e3c8a;
}
.candidate-reason {
flex: 2;
font-size: 0.85rem;
color: #5f6b7a;
padding: 0 16px;
}
.candidate-action {
flex: 0.5;
text-align: right;
}
.select-all-row {
background: #f4f8ff;
padding: 16px 20px;
border-radius: 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 20px;
}
</style>
📋 代表名单
✨ AI智能推荐
📎 批量导入
📅 会议记录
<div class="main-layout">
<div class="content-panel" id="contentPanel"></div>
<div class="invite-sidebar" id="inviteSidebar">
<h3>📌 拟邀请名单 <span id="inviteCount">0</span></h3>
<div id="inviteListContainer">暂无邀请代表</div>
<div style="margin-top: 16px;">
<button class="btn-primary" id="confirmMeetingBtn" style="width:100%;">📋 保存为本次会议记录</button>
</div>
<div class="small-note">✔ 确认参会后代表标记为已参会</div>
</div>
</div>
