编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验室仪器预约系统 · 用户端 Demo（武汉天行健科学仪器）</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; background: #f5f7fa; color: #333; font-size: 14px; }
a { color: #1677ff; text-decoration: none; }
.topbar { background: #0b1f3a; color: #fff; position: sticky; top: 0; z-index: 100; }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.brand .logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg,#1677ff,#4facfe); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: #9fb2c7; margin-top: 2px; }
.window { margin-left: auto; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 6px 14px; font-size: 12px; color: #cfe0f5; }
.window .dot { width: 8px; height: 8px; border-radius: 50%; background: #52c41a; }
.window.closed .dot { background: #faad14; }
.userbox { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.userbox .avatar { width: 30px; height: 30px; border-radius: 50%; background: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.userbox .role-tag { background: #1677ff; border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.userbox select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 4px 6px; font-size: 12px; outline: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; }
.nav { display: flex; gap: 6px; background: #fff; border-radius: 10px; padding: 6px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); flex-wrap: wrap; }
.nav button { flex: 1; min-width: 120px; background: none; border: none; padding: 10px 12px; font-size: 14px; color: #555; cursor: pointer; border-radius: 8px; font-family: inherit; }
.nav button:hover { background: #f0f6ff; color: #1677ff; }
.nav button.active { background: #1677ff; color: #fff; }
.nav button .n-muted { font-size: 11px; opacity: .65; margin-left: 4px; }
.hidden-tab { display: none; }
.card { background: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card h3 { font-size: 15px; color: #111; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.card .hint { font-size: 12px; color: #888; margin-bottom: 12px; }
.card .bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rules { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: #666; line-height: 1.8; }
.rules b { color: #1677ff; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type=text], .toolbar select { border: 1px solid #d9d9d9; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; background: #fff; }
.toolbar input[type=text]:focus, .toolbar select:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,.12); }
.toolbar input[type=text] { flex: 1; min-width: 200px; }
.instruments { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.inst-img { width: 100%; height: 128px; object-fit: cover; border-radius: 8px; border: 1px solid #eef0f2; background: #f2f3f5; display: block; }
.ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex-shrink: 0; }
.nav button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.nav button .ic { width: 16px; height: 16px; }
.card h3 .ic { width: 16px; height: 16px; color: #1677ff; }
.rules span { display: flex; align-items: center; gap: 6px; }
.rules .ic { color: #1677ff; }
.i-meta .ic { color: #8a94a6; }
.i-auth .ic { width: 13px; height: 13px; }
.window .dot { margin-right: 2px; }
.inst { border: 1px solid #e8ecf1; border-radius: 10px; padding: 14px; background: #fff; transition: all .15s; display: flex; flex-direction: column; gap: 6px; }
.inst:hover { border-color: #1677ff; box-shadow: 0 4px 12px rgba(22,119,255,.12); transform: translateY(-2px); }
.inst .i-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.inst .i-name { font-size: 14px; font-weight: 600; color: #111; }
.inst .i-cat { font-size: 11px; background: #eff6ff; color: #1677ff; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.inst .i-model { font-size: 12px; color: #888; }
.inst .i-meta { font-size: 12px; color: #555; display: flex; gap: 10px; flex-wrap: wrap; }
.inst .i-auth { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.inst .i-auth.ok { color: #52c41a; }
.inst .i-auth.no { color: #999; }
.inst .i-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.btn { border: 1px solid #d9d9d9; background: #fff; color: #333; border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; }
.btn:hover { color: #1677ff; border-color: #1677ff; }
.btn.primary { background: #1677ff; border-color: #1677ff; color: #fff; }
.btn.primary:hover { background: #4096ff; border-color: #4096ff; color: #fff; }
.btn.danger { color: #f5222d; border-color: #f3b7ba; }
.btn.danger:hover { background: #fff1f0; }
.btn.success { background: #52c41a; border-color: #52c41a; color: #fff; }
.btn.success:hover { background: #73d13d; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.schedule-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.schedule-title h3 { font-size: 16px; }
.badge-lock { background: #f5222d; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: #666; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.free-search { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.free-search label { font-size: 12px; color: #666; display: flex; flex-direction: column; gap: 4px; }
.free-search select { border: 1px solid #d9d9d9; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; background: #fff; min-width: 150px; }
.free-search input[type=time], .free-search input[type=date] { border: 1px solid #d9d9d9; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; }
.sched-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.sched-img { width: 210px; height: 132px; object-fit: cover; border-radius: 10px; border: 1px solid #eef0f2; background: #f2f3f5; }
.sched-hero-info { flex: 1; min-width: 220px; }
.sched-hero-meta { font-size: 13px; color: #444; line-height: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sched-hero-meta .ic { width: 14px; height: 14px; color: #8a94a6; }
@media (max-width: 560px) { .sched-img { width: 100%; height: 150px; } }
.slot-result { min-height: 20px; }
.slot-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 8px; padding: 14px; font-size: 13px; border: 1px solid transparent; }
.slot-box b { font-size: 14px; }
.slot-box span { color: #555; }
.slot-box .ic { width: 18px; height: 18px; }
.slot-box .btn { margin-left: auto; }
.slot-box.free { background: #f0fdf4; border-color: #b7eb8f; color: #389e0d; }
.slot-box.myok { background: #e6f4ff; border-color: #91caff; color: #0958d9; }
.slot-box.mypending { background: #fffbe6; border-color: #ffe58f; color: #d46b08; }
.slot-box.occupied { background: #f5f5f5; border-color: #d9d9d9; color: #8c8c8c; }
.slot-box.no { background: #fff1f0; border-color: #ffa39e; color: #cf1322; }
.cal-wrap { overflow-x: auto; margin-bottom: 12px; }
.cal-grid { width: 100%; min-width: 780px; border: 1px solid #e8ecf1; border-radius: 10px; background: #fff; }
.cal-grid .cg-row { display: flex; }
.cal-grid .cg-row + .cg-row { border-top: 1px solid #eef0f2; }
.cal-grid .cg-head .cg-cell { padding: 10px 6px; font-weight: 600; color: #555; line-height: 1.5; background: #fafbfc; }
.cal-grid .cg-time { flex: 0 0 112px; min-width: 112px; background: #fafbfc; color: #666; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; border-right: 1px solid #eef0f2; line-height: 1.5; }
.cal-grid .cg-cell { flex: 1; min-width: 96px; border-right: 1px solid #eef0f2; padding: 8px 6px; }
.cal-grid .cg-cell:last-child { border-right: none; }
.cal-cell { cursor: pointer; border-radius: 6px; padding: 6px 4px; text-align: center; transition: box-shadow .15s, transform .1s; height: 100%; box-sizing: border-box; }
.cal-cell .cc-time { font-weight: 700; font-size: 12px; }
.cal-cell .cc-state { margin-top: 4px; font-size: 11px; line-height: 1.5; }
.cal-free { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.cal-free:hover { background: #d9f7be; box-shadow: 0 2px 8px rgba(56,158,13,.25); }
.cal-pend { background: #fffbe6; color: #b8860b; border: 1px solid #ffe58f; }
.cal-pass { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
.cal-occ { background: #fafafa; color: #bbb; border: 1px solid #f0f0f0; cursor: default; }
.cal-no { background: repeating-linear-gradient(45deg,#fff,#fff 6px,#f6f7f8 6px,#f6f7f8 12px); color: #ccc; border: 1px solid #f2f3f5; cursor: default; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: #666; margin: 4px 0 8px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.06); }
.dot-free { background: #b7eb8f; } .dot-pend { background: #ffe58f; } .dot-pass { background: #91caff; } .dot-occ { background: #d9d9d9; } .dot-no { background: #eef0f2; }
.free-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 12px; }
.free-item { border: 1px solid #e8ecf1; border-radius: 8px; padding: 12px; }
.free-item .f-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.free-item .f-meta { font-size: 12px; color: #888; margin: 4px 0 8px; }
.booking-item { border: 1px solid #e8ecf1; border-radius: 10px; padding: 14px; margin-bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.booking-item .b-info { flex: 1; min-width: 240px; }
.booking-item .b-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.booking-item .b-meta { font-size: 12px; color: #666; line-height: 1.9; }
.booking-item .b-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-top: 8px; }
.flow .step { display: flex; align-items: center; gap: 4px; color: #999; }
.flow .step i { width: 20px; height: 20px; border-radius: 50%; background: #f0f2f5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; }
.flow .step i .ic { width: 12px; height: 12px; }
.flow .step.done i { background: #52c41a; color: #fff; }
.flow .step.on i { background: #1677ff; color: #fff; }
.flow .step.on { color: #1677ff; }
.flow .arrow { color: #d0d4da; }
.flow .step p { margin: 0; }
.tag-status { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.ts-0 { background: #fff7e6; color: #d48806; }
.ts-1 { background: #e6f4ff; color: #1677ff; }
.ts-2 { background: #f6ffed; color: #52c41a; }
.ts-3 { background: #f0f2f5; color: #999; }
.approve-item { border: 1px solid #e8ecf1; border-radius: 10px; padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.approve-item .a-info { flex: 1; min-width: 220px; }
.approve-item .a-btns { display: flex; gap: 8px; }
table.tbl { width: 100%; border-collapse: collapse; background: #fff; }
table.tbl th, table.tbl td { border: 1px solid #eef0f2; padding: 9px 10px; text-align: left; font-size: 13px; }
table.tbl th { background: #fafafa; font-weight: 600; color: #555; white-space: nowrap; }
table.tbl tr:hover td { background: #f8fafc; }
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: none; align-items: center; justify-content: center; z-index: 200; }
.mask.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 460px; max-width: 92vw; padding: 20px; }
.modal h4 { font-size: 15px; margin-bottom: 14px; }
.mform .row { display: flex; align-items: flex-start; margin-bottom: 12px; }
.mform .row > label { width: 76px; flex-shrink: 0; font-size: 13px; color: #555; padding-top: 7px; }
.mform input[type=text], .mform textarea { flex: 1; border: 1px solid #d9d9d9; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; }
.mform textarea { resize: vertical; min-height: 60px; }
.mform .row.static { color: #333; font-size: 13px; padding-top: 7px; line-height: 1.7; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.tip { font-size: 12px; color: #888; line-height: 1.7; }
.toast { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 13px; z-index: 300; opacity: 0; transition: all .25s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; }
footer { text-align: center; color: #aaa; font-size: 12px; padding: 20px; }
@media (max-width: 720px) {
  .rules { flex-direction: column; gap: 4px; }
  .booking-item .b-right { align-items: stretch; width: 100%; }
}
</style>
</head>
<body>

<header class="topbar">
  <div class="topbar-inner">
    <div class="brand">
      <div class="logo"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
      <div>实验室仪器预约系统<small>武汉天行健科学仪器 · 用户端 Demo</small></div>
    </div>
    <div class="window" id="windowBanner"></div>
    <div class="userbox">
      <span class="avatar" id="uAvatar">张</span>
      <span id="uName">张三</span>
      <span class="role-tag" id="uRole">学生</span>
      <select id="roleSwitch" title="切换演示角色">
        <option value="student" selected>学生：张三</option>
        <option value="teacher">老师：李老师</option>
        <option value="enterprise">企业人员：王工</option>
      </select>
    </div>
  </div>
</header>

<div class="wrap">
  <div class="nav">
    <button data-tab="booking" class="active"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>仪器预约</span></button>
    <button data-tab="free"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg><span>空闲查询</span></button>
    <button data-tab="mine"><svg class="ic" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01"/></svg><span>我的预约</span></button>
<button data-tab="approve" id="navApprove" class="hidden-tab"><svg class="ic" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg><span>审批中心</span><span class="n-muted" id="approveBadge"></span></button>
  </div>

  <div class="card">
    <h3><svg class="ic" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>预约规则说明</h3>
    <div class="rules">
      <span><svg class="ic" viewBox="0 0 24 24"><path d="M7 11V7a5 5 0 0 1 10 0v4"/><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/></svg><b>授权预约</b>：每台仪器单独授权，仅授权用户可预约</span>
      <span><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><b>周期开放</b>：周五 09:00 开放下周一至周日预约，周日 21:00 截止</span>
      <span><svg class="ic" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg><b>两级审批</b>：学生 → 指导老师审核 → 平台审核；企业人员 → 平台审核</span>
      <span><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M12 12v4"/></svg><b>不收费</b>：系统仅统计使用时长，收费在线下进行</span>
    </div>
  </div>

  <section id="tab-booking">
    <div class="card">
      <div class="bar">
        <h3><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>仪器列表（分析类仪器）</h3>
        <div class="toolbar">
          <input type="text" id="instSearch" placeholder="搜索仪器名称 / 型号 / 品类…">
          <select id="catFilter"><option value="">全部品类</option></select>
        </div>
      </div>
<div class="instruments" id="instGrid"></div>
    </div>
  </section>

  <section id="page-sched" style="display:none">
    <div class="card">
      <div class="bar">
        <button class="btn sm" onclick="closeSchedPage()"><span style="font-size:14px">‹</span> 返回仪器列表</button>
        <div class="schedule-title" style="margin:0">
          <h3 id="schedTitle">—</h3>
          <span id="schedLock" class="badge-lock" style="display:none">未授权 · 不可预约</span>
        </div>
      </div>

      <div class="sched-hero">
        <img class="sched-img" id="schedImg" src="" alt="">
        <div class="sched-hero-info">
          <div class="sched-hero-meta" id="schedHeroMeta"></div>
          <div class="hint" id="schedWeek" style="margin:2px 0 0">预约周期：8/24（周一）–8/30（周日）· 每时段 1 小时 · 本设备为单台独立设备，同一时段仅一个预约名额</div>
        </div>
      </div>

      <div class="hint" style="margin:0 0 10px">本页仅查询 <span id="schedLockName">该仪器</span> 的排期；在下方日历中点击<span style="color:#389e0d;font-weight:600">空闲可约</span>的时段即可立即预约，已约时段不可再选。</div>
      <div class="cal-wrap" id="schedCal"></div>
      <div class="cal-legend">
        <span><i class="dot dot-free"></i>空闲可约</span>
        <span><i class="dot dot-pend"></i>我的预约·审核中</span>
        <span><i class="dot dot-pass"></i>我的预约·已通过</span>
        <span><i class="dot dot-occ"></i>已被他人预约</span>
        <span><i class="dot dot-no"></i>未授权</span>
      </div>
      <div class="tip" id="schedTip"></div>
</div>
  </section>

  <section id="tab-free" style="display:none">
    <div class="card">
      <h3><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>空闲仪器查询</h3>
      <div class="hint">选择一个时间段，查看该时间段内有哪些仪器空闲；选择日期后点击"查看空闲仪器"或在下方选择具体时段。</div>
      <div class="free-search">
        <label>日期
          <input type="date" id="freeDate">
        </label>
        <label>时间段
          <select id="freeSlot"></select>
        </label>
        <button class="btn primary" onclick="renderFree()">查看空闲仪器</button>
      </div>
      <div class="free-list" id="freeList"></div>
    </div>
  </section>

  <section id="tab-mine" style="display:none">
    <div class="card">
      <div class="bar">
        <h3><svg class="ic" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01"/></svg>我的预约 <span id="mineCount" class="n-muted" style="font-size:12px;color:#888;font-weight:400"></span></h3>
        <button class="btn sm" onclick="refreshMine()">刷新</button>
      </div>
      <div class="hint">预约审批状态实时更新；审核中 / 已通过但未到使用日期的预约可取消。</div>
      <div id="mineList"></div>
    </div>
  </section>

  <section id="tab-approve" style="display:none">
    <div class="card">
      <div class="bar">
        <h3><svg class="ic" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>审批中心</h3>
        <span class="hint" id="approveHint" style="margin:0"></span>
      </div>
<div id="approveList"></div>
    </div>
  </section>

</div>

<footer>Demo 演示稿（仅前端示例，数据为模拟数据）· 武汉天行健科学仪器 · 一年免费维护 / 源码交付</footer>

<div class="mask" id="mask">
  <div class="modal">
    <h4>提交预约申请</h4>
    <div class="mform">
      <div class="row static" id="mInst"></div>
      <div class="row static" id="mTime"></div>
      <div class="row">
        <label>用途/样品</label>
        <textarea id="mPurpose" placeholder="请填写样品名称、测试项目等（选填）">