Skip to content

A
aozhiYX
Commit abcfa1eb by suyuchen
Options

feat(sidebar): 添加侧边栏导航和升级记录页面

- 创建 aside.html 侧边栏组件，包含设备管理、工单管理、基本设置等导航菜单 - 实现可折叠子菜单功能，支持设备编码管理、工单池、升级记录等功能入口 - 添加 toggleSubmenu JavaScript 函数用于控制子菜单展开收起 - 创建 escalation-records.html 升级记录列表页面，包含完整的页面结构和样式 - 实现升级记录表格展示功能，支持筛选和分页操作 - 配置 .gitignore 文件忽略 IDE 相关文件和配置
parent 9e304fa8
Showing with 7107 additions and 1112 deletions
aside.html
...@@ -21,19 +21,75 @@ ...@@ -21,19 +21,75 @@
<a href="二维码列表页.html" class="nav-subitem "> <a href="二维码列表页.html" class="nav-subitem ">
设备编码管理 设备编码管理
</a> </a>
<a href="设备档案.html" class="nav-subitem "> <a href="设备档案1.html" class="nav-subitem ">
设备档案 设备档案
</a> </a>
<a href="认证管理.html" class="nav-subitem "> <a href="设备机型.html" class="nav-subitem ">
认证管理 设备机型
</a> </a>
<a href="制造商维护.html" class="nav-subitem "> </div>
制造商维护 <div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>认证管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>邀请注册</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="我的黄页.html" class="nav-subitem ">
我的黄页
</a>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>账户管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="账户档案.html" class="nav-subitem ">
账户档案
</a> </a>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>知识库</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="知识仓库.html" class="nav-subitem "> <a href="知识仓库.html" class="nav-subitem ">
知识仓库 知识仓库
</a> </a>
</div> </div>
<!-- 工单管理 --> <!-- 工单管理 -->
......
h5.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<img src="./h5.png" alt="" style="margin: 0 auto;display:block;"/>
</body>
</html>
\ No newline at end of file
h5.png 0 → 100644
h5.png

353 KB

img.png 0 → 100644
img.png

75.3 KB

img_1.png 0 → 100644
img_1.png

107 KB

img_2.png 0 → 100644
img_2.png

118 KB

img_3.png 0 → 100644
img_3.png

9.02 KB

img_4.png 0 → 100644
img_4.png

58.9 KB

js.js
...@@ -8,4 +8,117 @@ async function loadSidebar() { ...@@ -8,4 +8,117 @@ async function loadSidebar() {
} }
} }
document.addEventListener('DOMContentLoaded', loadSidebar); // 批量上传功能
\ No newline at end of file function initBatchUpload() {
const batchUploadBtn = document.getElementById('batch-upload-btn');
const batchUploadModal = document.getElementById('batch-upload-modal');
const closeBatchUploadModal = document.getElementById('close-batch-upload-modal');
const cancelBatchUploadBtn = document.getElementById('cancel-batch-upload-btn');
const startUploadBtn = document.getElementById('start-upload-btn');
if (batchUploadBtn && batchUploadModal) {
// 显示批量上传模态框
batchUploadBtn.addEventListener('click', () => {
batchUploadModal.style.display = 'flex';
});
// 关闭批量上传模态框
function closeUploadModal() {
batchUploadModal.style.display = 'none';
}
if (closeBatchUploadModal) {
closeBatchUploadModal.addEventListener('click', closeUploadModal);
}
if (cancelBatchUploadBtn) {
cancelBatchUploadBtn.addEventListener('click', closeUploadModal);
}
// 点击模态框外部区域关闭模态框
batchUploadModal.addEventListener('click', (event) => {
if (event.target === batchUploadModal) {
closeUploadModal();
}
});
}
// 文件上传功能
const uploadArea = document.getElementById('upload-area');
const batchFileInput = document.getElementById('batch-file-input');
const fileNameDisplay = document.getElementById('file-name-display');
const progressSection = document.getElementById('progress-section');
if (uploadArea && batchFileInput) {
// 点击上传区域触发文件选择
uploadArea.addEventListener('click', () => {
batchFileInput.click();
});
// 文件选择事件
batchFileInput.addEventListener('change', (event) => {
if (event.target.files.length > 0) {
const file = event.target.files[0];
if (fileNameDisplay) {
fileNameDisplay.textContent = `已选择文件: ${file.name}`;
fileNameDisplay.style.display = 'block';
}
if (startUploadBtn) {
startUploadBtn.disabled = false;
}
if (progressSection) {
progressSection.style.display = 'block';
}
}
});
// 拖拽上传功能
uploadArea.addEventListener('dragover', (event) => {
event.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (event) => {
event.preventDefault();
uploadArea.classList.remove('dragover');
if (event.dataTransfer.files.length > 0) {
const file = event.dataTransfer.files[0];
// 检查文件类型
if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
file.type === 'application/vnd.ms-excel' ||
file.type === 'text/csv') {
// 创建新的FileList来更新input的值
batchFileInput.files = event.dataTransfer.files;
if (fileNameDisplay) {
fileNameDisplay.textContent = `已选择文件: ${file.name}`;
fileNameDisplay.style.display = 'block';
}
if (startUploadBtn) {
startUploadBtn.disabled = false;
}
if (progressSection) {
progressSection.style.display = 'block';
}
} else {
alert('请上传Excel或CSV文件');
}
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
loadSidebar();
initBatchUpload();
});
\ No newline at end of file
二维码列表页.html
This source diff could not be displayed because it is too large. You can view the blob instead.
制造商维护.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -1708,261 +1708,6 @@ ...@@ -1708,261 +1708,6 @@
</div> </div>
</div> </div>
<!-- 新增二维码表单模态框 -->
<div class="modal" id="add-modal">
<div class="modal-content add-modal-content" style="max-width: 80%;width: 80%;">
<div class="modal-header">
<h3 class="modal-title">新增二维码</h3>
<button class="close-modal" id="close-add-modal">×</button>
</div>
<div class="modal-body">
<form class="add-modal-form" id="add-form">
<!-- 基础信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">基础信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table>
<thead>
<tr>
<th width="41"></th>
<th>设备编码</th>
<th>设备名称</th>
<th>机型名称</th>
<th>出厂日期</th>
<th>设备总锭数</th>
<th>车间</th>
<th>所属工序</th>
<th>使用锭数</th>
<th>Iot编号</th>
<th>Iot模式</th>
<th>Iot状态</th>
<th>创建时间</th>
<th>创建人</th>
<th>生产厂商</th>
<th>PLC厂商</th>
<th>PLC型号</th>
<th>HMI厂商</th>
<!-- <th>操作</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS026</td>
<td>细纱机026</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_026</td>
<td>0</td>
<td>2</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS025</td>
<td>细纱机025</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_025</td>
<td>0</td>
<td>0</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS024</td>
<td>细纱机024</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_024</td>
<td>0</td>
<td></td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
</tbody>
</table>
</div>
<!-- 附件上传区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">附件上传</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>知识文档名称</th>
<th>知识大类</th>
<th>知识小类</th>
<th>文件名称</th>
<th>文件格式</th>
<th>文件大小</th>
<th>可查阅部门</th>
<th>创建部门</th>
<th>文档管理人</th>
<th>保密级别</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>111</td>
<td>业务知识库</td>
<td></td>
<td>运维领域.docx</td>
<td>0.016 M</td>
<td></td>
<td>人事部财务部财务部/会计1组</td>
<td>人事部</td>
<td>jiojioGIAdmin update,su</td>
<td>公开级</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 认证信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">认证信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>文档名称</th>
<th>文档类型</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>电机合规文档</td>
<td>PDF</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 制造商信息区域 -->
<div class="section-title">制造商信息</div>
<div class="form-row">
<div class="form-group">
<label for="add-manufacturer">制造商</label>
<input type="text" id="add-manufacturer" placeholder="制造商名称">
</div>
<div class="form-group">
<label for="add-country">国家</label>
<input type="text" id="add-country" placeholder="国家">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="add-website">网址</label>
<input type="text" id="add-website" placeholder="网址">
</div>
<div class="form-group">
<label for="add-phone">公司电话</label>
<input type="text" id="add-phone" placeholder="公司电话">
</div>
</div>
<div class="form-group">
<label for="add-address">制造商地址</label>
<input type="text" id="add-address" placeholder="制造商地址">
</div>
<!-- 替换原有的静态供应商表单 -->
<div class="section-title">供应商信息</div>
<div id="supplier-container">
<!-- 动态供应商表单将在这里添加 -->
</div>
<button type="button" class="btn btn-secondary" id="add-supplier-btn"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
<i class="fas fa-plus"></i> 添加供应商
</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-add-btn">取消</button>
<button class="btn btn-primary" id="confirm-add-btn">确认新增</button>
</div>
</div>
</div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
</html> </html>
\ No newline at end of file
我的黄页.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">我的黄页</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="./企业微信截图_f29d069f-89c8-4b41-b278-71ddf57de875.png" alt="" style="width: 100%;display:block;">
<img src="./企业微信截图_428a57a2-966d-4969-8a74-cb4c593e9706.png" alt="" style="width: 100%;display:block;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
知识仓库.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知识仓库</title> <title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1306,7 +1306,7 @@ ...@@ -1306,7 +1306,7 @@
<div class="breadcrumb"> <div class="breadcrumb">
<span>首页</span> <span>首页</span>
<span class="breadcrumb-separator">/</span> <span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案</span> <span class="breadcrumb-current">知识仓库</span>
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
...@@ -1327,761 +1327,12 @@ ...@@ -1327,761 +1327,12 @@
<div class="main-content"> <div class="main-content">
<div class="content-area"> <div class="content-area">
<div class="card"> <div class="card">
<div class="card-header"> <img src="./img_1.png" alt="" style="width: 100%;">
<div class="card-title">知识仓库</div>
<div style="display: flex; gap: 12px;">
<button class="btn btn-primary" id="add-qrcode-btn">
<i class="fas fa-plus"></i> 新增
</button>
</div>
</div>
<div class="card-body">
<div class="table-container">
<table>
<thead class="">
<tr class="">
<th colspan="1" rowspan="1"
class="el-table_1_column_1 el-table-column--selection is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><span
class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false"
class="el-checkbox__original"
value=""></span><!----></label>
</div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_2 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">编号</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_3 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识文档名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_4 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识大类</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_5 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识小类</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_6 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_7 is-center is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件格式</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_8 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件大小</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_9 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">可查阅部门</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_10 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">创建部门</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_11 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文档管理人</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_12 is-center is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">保密级别</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_13 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">更新时间</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_14 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell">
<div data-v-274fd674="" class="cell" style="padding-left: 0px;">
<span> 操作 </span>
</div>
</div>
</th>
</tr>
</thead>
<tbody id="qrcode-table-body">
<tr class="el-table__row">
<td rowspan="1" colspan="1"
class="el-table_1_column_1 el-table-column--selection is-hidden el-table__cell">
<div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><span
class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false"
class="el-checkbox__original"
value=""></span><!----></label>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">1</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">MAX标签打印机操作指导书_V1</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_4 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
公司知识库</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_5 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
精益办公室</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_6 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="documents-container">
<div data-v-3725bdee="" class="documents-list">
<div data-v-3725bdee="" class="document-item"><span data-v-3725bdee=""
class="link mb-6"> MAX标签打印机操作指导书_V1.0.xlsx </span>
</div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_7 is-center el-table__cell">
<div class="cell"><!----><i data-v-3725bdee="" class="el-tooltip iconfont icon-xls"
aria-describedby="el-tooltip-74" tabindex="0"
style="color: rgb(2, 122, 83); font-size: 20px !important;"></i>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_8 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">1.449 M</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_9 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="departments-container"><span data-v-3725bdee=""><div
role="tooltip" id="el-popover-6370" aria-hidden="true"
class="el-popover el-popper department-list-popover" tabindex="0"
style="width: 300px; display: none;"><!----><div data-v-3725bdee=""
class="departments-popover-list"><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8797" tabindex="0"> test-1 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-7000" tabindex="0"> 1111111111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4605" tabindex="0"> 一级部门 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4525" tabindex="0"> hahahahah </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8544" tabindex="0"> 人事部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1577" tabindex="0"> 精益办公室 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-6262"
tabindex="0"> 技术研发中心 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5452"
tabindex="0"> 财务部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-9704" tabindex="0"> 技术部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5881" tabindex="0"> GI财务部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4451" tabindex="0"> 工程部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1098" tabindex="0"> 111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8680" tabindex="0"> 11111111111111111111111111111111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3728" tabindex="0"> 22222 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-7766" tabindex="0"> GI开发部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-89" tabindex="0"> 销售部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4276" tabindex="0"> test-1/One-Test </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-9430"
tabindex="0"> 一级部门/二级部门-1 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3569"
tabindex="0"> 一级部门/二级部门-2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1203"
tabindex="0"> hahahahah /33333 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8085"
tabindex="0"> 财务部/会计1组 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-286"
tabindex="0"> 技术部/技术部-一级子部门 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3088"
tabindex="0"> 技术部/jiojio 专用部门 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-839"
tabindex="0"> 技术部/IT一部 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8288"
tabindex="0"> 销售部/销售1组 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4103"
tabindex="0"> 一级部门/二级部门-1/三级部门-1 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8693"
tabindex="0"> 技术部/IT一部/IT1组 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-2127"
tabindex="0"> 销售部/销售1组/销售2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5812"
tabindex="0"> 销售部/销售1组/销售2组 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-2738"
tabindex="0"> 技术部/IT一部/IT1组/it1-2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-356" tabindex="0"> 技术部/IT一部/IT1组/222222222222222 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8035"
tabindex="0"> 技术部/IT一部/IT1组/1 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-371"
tabindex="0"> 技术部/IT一部/IT1组/it1-2/112 </span></div></div><span
class="el-popover__reference-wrapper"><div data-v-3725bdee=""
class="department-item departments-summary el-popover__reference"
aria-describedby="el-popover-6370"
tabindex="0"><i
data-v-3725bdee="" class="el-icon-office-building"></i> 查看 33 个部门 </div></span></span>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_10 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
精益办公室</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_11 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">程</p>
</div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_12 is-center el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="flex align-center" style="gap: 10px;">
<div data-v-3725bdee="" class="secret-level"><i data-v-3725bdee=""
class="el-icon-circle"></i>
</div>
公开级
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_13 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">2025-12-30 10:48:24</div>
</div>
</td>
<td rowspan="1" colspan="1"
class="el-table_1_column_14 is-left is-hidden el-table__cell">
<div class="cell"><!---->
<button data-v-3725bdee="" type="button" class="el-button el-button--text"
title="查看" style="margin-left: 5px;"><!----><i
class="iconfont icon-chakan"></i><!----></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="view-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">二维码详情</h3>
<button class="close-modal" id="close-view-modal">×</button>
</div>
<div class="modal-body">
<div class="qrcode-preview-large">
<div class="qrcode-image" id="modal-qrcode-image">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZmZmIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE5MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMjAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxMTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PC9zdmc+"
alt="二维码">
</div>
<p>扫描二维码可查看设备详情并联系客服</p>
</div>
<div class="detail-info">
<div class="detail-item">
<div class="detail-label">设备名称：</div>
<div class="detail-value" id="modal-device-name"></div>
</div>
<div class="detail-item">
<div class="detail-label">设备编号：</div>
<div class="detail-value" id="modal-device-id"></div>
</div>
<div class="detail-item">
<div class="detail-label">设备类型：</div>
<div class="detail-value" id="modal-device-type"></div>
</div>
<div class="detail-item">
<div class="detail-label">文档数量：</div>
<div class="detail-value" id="modal-doc-count"></div>
</div>
<div class="detail-item">
<div class="detail-label">生成时间：</div>
<div class="detail-value" id="modal-create-time"></div>
</div>
<div class="detail-item">
<div class="detail-label">创建人所属部门：</div>
<div class="detail-value" id="modal-department"></div>
</div>
<div class="detail-item">
<div class="detail-label">创建人：</div>
<div class="detail-value" id="modal-creator"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="modal-download-btn">
<i class="fas fa-download"></i> 下载二维码
</button>
<button class="btn btn-secondary" id="modal-close-btn">关闭</button>
</div>
</div>
</div>
<div class="modal" id="delete-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">确认删除</h3>
<button class="close-modal" id="close-delete-modal">×</button>
</div>
<div class="modal-body">
<p>确定要删除此二维码吗？此操作不可撤销。</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-delete-btn">取消</button>
<button class="btn btn-danger" id="confirm-delete-btn">确认删除</button>
</div>
</div>
</div>
<!-- 批量上传模态框 -->
<div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">批量上传设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button>
</div>
<div class="modal-body">
<!-- 模板选择区域 -->
<div class="template-selector">
<label>选择设备类型模板：</label>
<select id="device-template-select">
<option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option>
<option value="smart-terminal">智能客服终端</option>
<option value="self-service">自助服务机</option>
<option value="info-terminal">信息查询终端</option>
</select>
<button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板
</button>
</div>
<!-- 文件上传区域 -->
<div class="upload-area" id="upload-area">
<div class="upload-icon-large">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="upload-text">点击或拖拽文件到此处上传</div>
<div class="upload-hint">支持 Excel 文件 (.xlsx, .xls) 和 CSV 文件 (.csv)</div>
<input type="file" id="batch-file-input" accept=".xlsx,.xls,.csv" style="display: none;">
</div>
<div id="file-name-display" class="file-name-display" style="display: none;"></div>
<!-- 进度和结果区域 -->
<div class="progress-section" id="progress-section" style="display: none;">
<div class="progress-info">
<div class="progress-stats">
<div class="stat-item">
<span class="stat-label">已录入：</span>
<span class="stat-value" id="progress-current">0</span>
<span class="stat-label">/</span>
<span class="stat-value" id="progress-total">0</span>
</div>
<div class="stat-item">
<span class="stat-label">成功：</span>
<span class="stat-value success" id="progress-success">0</span>
</div>
<div class="stat-item">
<span class="stat-label">失败：</span>
<span class="stat-value error" id="progress-error">0</span>
</div>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar" style="width: 0%;"></div>
</div>
<!-- 错误列表 -->
<div id="error-list-container" style="display: none;">
<!-- <div class="error-list" id="error-list"></div> -->
<!-- <button class="download-error-btn" id="download-error-btn">
<i class="fas fa-download"></i> 下载失败清单
</button> -->
</div>
<!-- 校验结果表格 -->
<div id="validation-table-container" style="display: none; margin-top: 16px;">
<table class="validation-table" id="validation-table">
<thead>
<tr>
<th>行号</th>
<th>SN号</th>
<th>型号</th>
<th>状态</th>
<th>错误原因</th>
</tr>
</thead>
<tbody id="validation-table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-batch-upload-btn">取消</button>
<button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button>
</div>
</div>
</div>
<!-- 新增二维码表单模态框 -->
<div class="modal" id="add-modal">
<div class="modal-content add-modal-content" style="max-width: 80%;width: 80%;">
<div class="modal-header">
<h3 class="modal-title">新增二维码</h3>
<button class="close-modal" id="close-add-modal">×</button>
</div>
<div class="modal-body">
<form class="add-modal-form" id="add-form">
<!-- 基础信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">基础信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table>
<thead>
<tr>
<th width="41"></th>
<th>设备编码</th>
<th>设备名称</th>
<th>机型名称</th>
<th>出厂日期</th>
<th>设备总锭数</th>
<th>车间</th>
<th>所属工序</th>
<th>使用锭数</th>
<th>Iot编号</th>
<th>Iot模式</th>
<th>Iot状态</th>
<th>创建时间</th>
<th>创建人</th>
<th>生产厂商</th>
<th>PLC厂商</th>
<th>PLC型号</th>
<th>HMI厂商</th>
<!-- <th>操作</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS026</td>
<td>细纱机026</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_026</td>
<td>0</td>
<td>2</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS025</td>
<td>细纱机025</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_025</td>
<td>0</td>
<td>0</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS024</td>
<td>细纱机024</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_024</td>
<td>0</td>
<td></td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
</tbody>
</table>
</div>
<!-- 附件上传区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">附件上传</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>知识文档名称</th>
<th>知识大类</th>
<th>知识小类</th>
<th>文件名称</th>
<th>文件格式</th>
<th>文件大小</th>
<th>可查阅部门</th>
<th>创建部门</th>
<th>文档管理人</th>
<th>保密级别</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>111</td>
<td>业务知识库</td>
<td></td>
<td>运维领域.docx</td>
<td>0.016 M</td>
<td></td>
<td>人事部财务部财务部/会计1组</td>
<td>人事部</td>
<td>jiojioGIAdmin update,su</td>
<td>公开级</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 认证信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">认证信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>文档名称</th>
<th>文档类型</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>电机合规文档</td>
<td>PDF</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 制造商信息区域 -->
<div class="section-title">制造商信息</div>
<div class="form-row">
<div class="form-group">
<label for="add-manufacturer">制造商</label>
<input type="text" id="add-manufacturer" placeholder="制造商名称">
</div>
<div class="form-group">
<label for="add-country">国家</label>
<input type="text" id="add-country" placeholder="国家">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="add-website">网址</label>
<input type="text" id="add-website" placeholder="网址">
</div>
<div class="form-group">
<label for="add-phone">公司电话</label>
<input type="text" id="add-phone" placeholder="公司电话">
</div>
</div>
<div class="form-group">
<label for="add-address">制造商地址</label>
<input type="text" id="add-address" placeholder="制造商地址">
</div>
<!-- 替换原有的静态供应商表单 -->
<div class="section-title">供应商信息</div>
<div id="supplier-container">
<!-- 动态供应商表单将在这里添加 -->
</div>
<button type="button" class="btn btn-secondary" id="add-supplier-btn"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
<i class="fas fa-plus"></i> 添加供应商
</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-add-btn">取消</button>
<button class="btn btn-primary" id="confirm-add-btn">确认新增</button>
</div>
</div>
</div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
......
认证管理.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备编码信息</title> <title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1300,8 +1300,40 @@ ...@@ -1300,8 +1300,40 @@
<body> <body>
<div class="app-container"> <div class="app-container">
<div id="sidebar-container"></div> <div id="sidebar-container"></div>
<img src="./企业微信截图_09590b68-0b98-4b07-9d10-48af38e122a6.png" alt="" style="width: 80%;position: fixed;right: 0;top: 0">
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案编辑</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="./企业微信截图_09590b68-0b98-4b07-9d10-48af38e122a6.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div> </div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
</html> </html>
\ No newline at end of file
设备机型.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案编辑</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="./img_4.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
设备档案.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备编码信息</title> <title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1328,7 +1328,7 @@ ...@@ -1328,7 +1328,7 @@
<div class="content-area"> <div class="content-area">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-title">设备编码信息</div> <div class="card-title">设备档案</div>
<div style="display: flex; gap: 12px;"> <div style="display: flex; gap: 12px;">
<button class="btn btn-primary" id="add-qrcode-btn"> <button class="btn btn-primary" id="add-qrcode-btn">
<i class="fas fa-plus"></i> 新增 <i class="fas fa-plus"></i> 新增
...@@ -1344,100 +1344,71 @@ ...@@ -1344,100 +1344,71 @@
<thead class="has-gutter"> <thead class="has-gutter">
<tr class=""> <tr class="">
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_17 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备编码</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_18 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备名称</span></div> <div class="cell"><span data-v-7f0e5ced="">设备名称</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_19 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">机型名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_20 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">出厂日期</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_21 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备总锭数</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_22 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">车间</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_23 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">所属工序</span></div> <div class="cell"><span data-v-7f0e5ced="">品牌</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_24 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">使用锭数</span></div> <div class="cell"><span data-v-7f0e5ced="">设备编号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_25 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot编号</span></div> <div class="cell"><span data-v-7f0e5ced="">能耗等级</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_26 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot模式</span></div> <div class="cell"><span data-v-7f0e5ced="">型号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_27 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot状态</span></div> <div class="cell"><span data-v-7f0e5ced="">产品序列号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_28 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">创建时间</span></div> <div class="cell"><span data-v-7f0e5ced="">出厂日期</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_29 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">创建人</span></div> <div class="cell"><span data-v-7f0e5ced="">制造商</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_30 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">生产厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">输入电压</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_31 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">PLC厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">功率</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_32 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">PLC型号</span></div> <div class="cell"><span data-v-7f0e5ced="">设备重量</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_33 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">HMI厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">设备尺寸</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_34 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"> <div class="cell"><span data-v-7f0e5ced="">操作</span></div>
<div data-v-7f0e5ced="" class="cell" style="padding-left: 0px;">
<span> 操作 </span>
</div>
</div>
</th> </th>
<th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
</tr> </tr>
</thead> </thead>
<tbody id="qrcode-table-body"> <tbody id="qrcode-table-body">
...@@ -1500,42 +1471,19 @@ ...@@ -1500,42 +1471,19 @@
</td> </td>
<td rowspan="1" colspan="1" class="el-table_3_column_28 is-left el-table__cell"> <td rowspan="1" colspan="1" class="el-table_3_column_28 is-left el-table__cell">
<div class="cell"><!----> <div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">2024-06-20 20:17:47</span> <div data-v-7f0e5ced=""><span data-v-7f0e5ced="">100*200mm</span>
</div> </div>
</div> </div>
</td> </td>
<td rowspan="1" colspan="1" class="el-table_3_column_29 is-left el-table__cell"> <td rowspan="1" colspan="1" class="el-table_3_column_29 is-left el-table__cell">
<div class="cell"><!----> <div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">张可冉</span></div> <button class="action-btn copy-btn">
</div> <!-- <input type="radio" name="qrcode-radio"/>-->
</td> 编辑
<td rowspan="1" colspan="1" class="el-table_3_column_30 is-left el-table__cell"> </button>
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_31 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_32 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">PLC</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_33 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_34 is-left el-table__cell">
<div class="cell"><!----><i data-v-34d82efe="" title="修改" class="iconfont bianji"
style="margin-right: 10px; cursor: pointer; color: rgb(1, 51, 122);"></i><i
data-v-34d82efe="" title="" class="iconfont shanchu"
style="margin-right: 10px; cursor: pointer; color: rgb(1, 51, 122);"></i>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -1621,7 +1569,7 @@ ...@@ -1621,7 +1569,7 @@
<div class="modal batch-upload-modal" id="batch-upload-modal"> <div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">批量上传设备信息</h3> <h3 class="modal-title">批量导入设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button> <button class="close-modal" id="close-batch-upload-modal">×</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -1630,10 +1578,10 @@ ...@@ -1630,10 +1578,10 @@
<label>选择设备类型模板：</label> <label>选择设备类型模板：</label>
<select id="device-template-select"> <select id="device-template-select">
<option value="">请选择设备类型</option> <option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option> <option value="high-speed-drawer">行星轧机</option>
<option value="smart-terminal">智能客服终端</option> <option value="smart-terminal">伺服铣</option>
<option value="self-service">自助服务机</option> <option value="self-service">旋风铣面机</option>
<option value="info-terminal">信息查询终端</option> <option value="info-terminal">管棒凸轮拉拔设备</option>
</select> </select>
<button class="template-download-btn" id="download-template-btn"> <button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板 <i class="fas fa-download"></i> 下载模板
......
设备档案1.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content" style="position: relative;">
<div class="content-area">
<div class="card">
<img src="./img_2.png" alt="" style="width: 100%;">
</div>
</div>
<div style="width: 100%;height: 50%;position:absolute;left: 0;top: 0;" id="import">
</div>
<a href="设备档案编辑.html" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 50%;position:absolute;left: 0;bottom: 0;">
</div>
</a>
</div>
<!-- 批量上传模态框 -->
<div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content" style="margin: 0 auto;">
<div class="modal-header">
<h3 class="modal-title">批量导入设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button>
</div>
<div class="modal-body">
<!-- 模板选择区域 -->
<div class="template-selector">
<label>选择设备类型模板：</label>
<select id="device-template-select">
<option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option>
<option value="smart-terminal">智能客服终端</option>
<option value="self-service">自助服务机</option>
<option value="info-terminal">信息查询终端</option>
</select>
<button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板
</button>
</div>
<!-- 文件上传区域 -->
<div class="upload-area" id="upload-area">
<div class="upload-icon-large">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="upload-text">点击或拖拽文件到此处上传</div>
<div class="upload-hint">支持 Excel 文件 (.xlsx, .xls) 和 CSV 文件 (.csv)</div>
<input type="file" id="batch-file-input" accept=".xlsx,.xls,.csv" style="display: none;">
</div>
<div id="file-name-display" class="file-name-display" style="display: none;"></div>
<!-- 进度和结果区域 -->
<div class="progress-section" id="progress-section" style="display: none;">
<div class="progress-info">
<div class="progress-stats">
<div class="stat-item">
<span class="stat-label">已录入：</span>
<span class="stat-value" id="progress-current">0</span>
<span class="stat-label">/</span>
<span class="stat-value" id="progress-total">0</span>
</div>
<div class="stat-item">
<span class="stat-label">成功：</span>
<span class="stat-value success" id="progress-success">0</span>
</div>
<div class="stat-item">
<span class="stat-label">失败：</span>
<span class="stat-value error" id="progress-error">0</span>
</div>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar" style="width: 0%;"></div>
</div>
<!-- 错误列表 -->
<div id="error-list-container" style="display: none;">
<!-- <div class="error-list" id="error-list"></div> -->
<!-- <button class="download-error-btn" id="download-error-btn">
<i class="fas fa-download"></i> 下载失败清单
</button> -->
</div>
<!-- 校验结果表格 -->
<div id="validation-table-container" style="display: none; margin-top: 16px;">
<table class="validation-table" id="validation-table">
<thead>
<tr>
<th>行号</th>
<th>SN号</th>
<th>型号</th>
<th>状态</th>
<th>错误原因</th>
</tr>
</thead>
<tbody id="validation-table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-batch-upload-btn">取消</button>
<button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button>
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
<script>
let importstr = document.getElementById('import')
let uploadstr = document.getElementById('batch-upload-modal')
let close = document.getElementById('close-batch-upload-modal')
let cancel = document.getElementById('cancel-batch-upload-btn')
uploadstr.style.display = 'none'
importstr.addEventListener('click', function () {
uploadstr.style.display = 'flex'
})
uploadstr.addEventListener('click', function (e) {
// 阻止事件冒泡，只有点击模态框背景时才关闭
if (e.target === uploadstr) {
uploadstr.style.display = 'none'
}
})
close.addEventListener('click', function () {
uploadstr.style.display = 'none'
})
cancel.addEventListener('click', function () {
uploadstr.style.display = 'none'
})
</script>
</html>
\ No newline at end of file
设备档案编辑.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案编辑</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="./企业微信截图_b3a28d50-9aed-4599-9130-cf24fb78765a.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
账户档案.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">账户档案</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="企业微信截图_9bce6113-c7b1-4e9c-9a82-21d34e55e3d5.png" alt="" style="width: 100%;display:block;">
<img src="企业微信截图_25cdffcc-fec3-4a14-a154-074f841bbb2b.png" alt="" style="width: 100%;display:block;">
<img src="企业微信截图_2cdabb9d-3456-4a92-b544-74694a96b6ef.png" alt="" style="width: 100%;display:block;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment