编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>CAD辅助报价小程序 · 原型</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #eef0f4;
    color: #1a1a1a;
    overflow: hidden;
  }
  /* ========== 手机外框 ========== */
  .phone-frame {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
  }
  /* ========== 状态栏 ========== */
  .status-bar {
    height: 28px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    color: #333;
    font-weight: 600;
  }
  .status-bar .right { display: flex; gap: 6px; align-items: center; }
  /* ========== 顶部导航 ========== */
  .navbar {
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
  }
  .navbar .nav-title { font-size: 16px; font-weight: 600; }
  .navbar .nav-icon {
    font-size: 18px;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
  }
  .navbar .nav-back { font-size: 20px; }

  /* ========== 页面容器 ========== */
  .page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 0px);
    background: #f7f8fa;
    display: none;
    flex-direction: column;
  }
  .page.active { display: flex; }
  .page-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-content::-webkit-scrollbar { display: none; }

  /* ========== 底部 Tab ========== */
  .tabbar {
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    flex-shrink: 0;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #999;
    font-size: 11px;
    cursor: pointer;
  }
  .tab-item .icon { font-size: 22px; }
  .tab-item.active { color: #1a6cff; }

  /* ========== 通用组件 ========== */
  .card {
    background: #fff;
    margin: 12px;
    border-radius: 10px;
    overflow: hidden;
  }
  .card-title {
    padding: 14px 16px 8px;
    font-size: 15px;
    font-weight: 600;
  }
  .card-desc {
    padding: 0 16px 12px;
    font-size: 12px;
    color: #888;
  }
  .divider { height: 1px; background: #f0f0f0; margin: 0 16px; }
  .btn {
    display: inline-block;
    padding: 10px 20px;
    background: #1a6cff;
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }
  .btn-block { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 12px; }
  .btn-outline {
    background: #fff;
    color: #1a6cff;
    border: 1px solid #1a6cff;
  }
  .btn-ghost { background: #f0f4ff; color: #1a6cff; }
  .tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f4ff;
    color: #1a6cff;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
  }
  .tag-gray { background: #f2f3f5; color: #666; }
  .tag-orange { background: #fff4e6; color: #ff8800; }
  .tag-green { background: #e6fff0; color: #00b86b; }

  /* ========== 登录页 ========== */
  .login-page { background: #fff; }
  .login-hero {
    padding: 60px 30px 40px;
    text-align: center;
  }
  .login-logo {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #1a6cff, #4a9bff);
    border-radius: 18px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
  }
  .login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
  .login-subtitle { font-size: 13px; color: #888; }
  .login-form { padding: 0 30px; }
  .login-input {
    width: 100%;
    height: 48px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 0 14px;
    margin-bottom: 14px;
    font-size: 14px;
    background: #fafafa;
  }
  .login-input:focus { outline: none; border-color: #1a6cff; background: #fff; }
  .login-btn {
    width: 100%;
    height: 48px;
    background: #1a6cff;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
    cursor: pointer;
  }
  .login-divider {
    display: flex;
    align-items: center;
    margin: 24px 30px;
    color: #bbb;
    font-size: 12px;
  }
  .login-divider::before, .login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
  }
  .login-divider::before { margin-right: 12px; }
  .login-divider::after { margin-left: 12px; }
  .login-wechat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 30px;
    height: 48px;
    border: 1px solid #e5e5e5;
    border-radius: 24px;
    color: #1aad19;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .login-tip {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 18px;
  }
  .login-tip a { color: #1a6cff; text-decoration: none; }

  /* ========== 首页 ========== */
  .home-banner {
    margin: 12px;
    height: 110px;
    background: linear-gradient(135deg, #1a6cff, #4a9bff);
    border-radius: 10px;
    padding: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .home-banner h3 { font-size: 17px; margin-bottom: 4px; }
  .home-banner p { font-size: 12px; opacity: 0.9; }
  .home-banner .banner-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border-radius: 14px;
    font-size: 12px;
  }
  .home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: #fff;
    margin: 0 12px;
    padding: 16px 8px;
    border-radius: 10px;
  }
  .home-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    cursor: pointer;
  }
  .home-grid-item .gicon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
  }
  .home-grid-item .glabel { font-size: 11px; color: #333; }
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 8px;
    font-size: 14px;
    font-weight: 600;
  }
  .section-title .more { font-size: 12px; color: #999; font-weight: normal; }

  .notice-bar {
    margin: 0 12px;
    background: #fff7e6;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ad6800;
  }
  .notice-bar .ntag {
    background: #ff8800;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
  }

  .news-item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
  }
  .news-thumb {
    width: 88px;
    height: 64px;
    background: linear-gradient(135deg, #4a9bff, #1a6cff);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
  }
  .news-info { flex: 1; }
  .news-info h4 { font-size: 14px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
  .news-info p { font-size: 11px; color: #888; }

  /* ========== CAD 模块 ========== */
  .cad-empty {
    margin: 24px 12px;
    padding: 40px 20px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    color: #888;
  }
  .cad-empty .empty-icon { font-size: 56px; margin-bottom: 12px; }
  .cad-empty h4 { color: #333; font-size: 16px; margin-bottom: 6px; font-weight: 600; }
  .cad-empty p { font-size: 12px; line-height: 1.6; margin-bottom: 16px; }
  .cad-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .cad-action-row .btn { flex: 1; max-width: 140px; }

  .drawer-list {
    background: #fff;
    margin: 0 12px;
    border-radius: 10px;
    overflow: hidden;
  }
  .drawer-item {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
  }
  .drawer-item:last-child { border-bottom: none; }
  .drawer-item .dicon {
    width: 36px;
    height: 36px;
    background: #f0f4ff;
    color: #1a6cff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .drawer-item .dinfo { flex: 1; }
  .drawer-item .dinfo h5 { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
  .drawer-item .dinfo p { font-size: 11px; color: #888; }
  .drawer-item .dmeta { text-align: right; }
  .drawer-item .dmeta .num { font-size: 13px; color: #1a6cff; font-weight: 600; }
  .drawer-item .dmeta .date { font-size: 11px; color: #aaa; }

  /* CAD 标注画布 */
  .cad-canvas {
    flex: 1;
    position: relative;
    background: #1a1f2e;
    overflow: hidden;
  }
  .cad-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .cad-line {
    position: absolute;
    background: #fff;
    opacity: 0.6;
  }
  .cad-line.h { height: 1px; }
  .cad-line.v { width: 1px; }
  .device-marker {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
    transform: translate(-50%, -50%);
  }
  .canvas-toolbar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    border-radius: 24px;
    padding: 6px;
    display: flex;
    gap: 4px;
    backdrop-filter: blur(10px);
  }
  .canvas-tool {
    width: 40px;
    height: 40px;
    border-radius: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
  }
  .canvas-tool.active { background: #1a6cff; }
  .canvas-topbar {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
  }
  .canvas-chip {
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    backdrop-filter: blur(10px);
  }

  /* 设备信息弹层 */
  .sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10;
    display: none;
  }
  .sheet-mask.active { display: block; }
  .sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    max-height: 70%;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s;
    z-index: 11;
  }
  .sheet.show { transform: translateY(0); }
  .sheet-handle {
    width: 36px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .sheet h3 { font-size: 16px; margin-bottom: 4px; }
  .sheet .ssub { font-size: 12px; color: #888; margin-bottom: 16px; }
  .form-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
  }
  .form-row label { color: #666; width: 90px; flex-shrink: 0; }
  .form-row input, .form-row select {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1a1a1a;
    background: transparent;
  }
  .form-row .pill {
    padding: 4px 12px;
    background: #f0f4ff;
    color: #1a6cff;
    border-radius: 12px;
    font-size: 12px;
  }

  /* 设备识别与编号 */
  .identify-group {
    background: #f8fbff;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .ig-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f4ff;
    font-size: 13px;
    cursor: pointer;
  }
  .ig-color { width: 8px; height: 8px; border-radius: 50%; }
  .ig-title { flex: 1; font-weight: 500; }
  .ig-count { color: #888; font-size: 12px; }
  .ig-toggle { color: #aaa; font-size: 12px; }
  .ig-body { padding: 6px 12px; }
  .ig-body.collapsed { display: none; }
  .ig-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  .ig-input {
    width: 70px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
    color: #1a6cff;
    font-weight: 600;
  }
  .ig-tag {
    flex: 1;
    font-size: 12px;
    color: #666;
  }
  .ig-edit { color: #aaa; cursor: pointer; font-size: 14px; }
  .ig-toggle-more {
    text-align: center;
    padding: 6px;
    color: #1a6cff;
    font-size: 12px;
    cursor: pointer;
  }

  /* 清单列表 */
  .list-item {
    background: #fff;
    padding: 12px 14px;
    margin: 0 12px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .list-item .licon {
    width: 32px;
    height: 32px;
    background: #1a6cff;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .list-item .linfo { flex: 1; min-width: 0; }
  .list-item .linfo h5 { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
  .list-item .linfo p { font-size: 11px; color: #888; }
  .list-item .lprice { color: #ff6b00; font-size: 14px; font-weight: 600; }

  /* ========== 项目档案 ========== */
  .project-card {
    background: #fff;
    margin: 12px;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
  }
  .project-card .ph {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .project-card .ph h4 { font-size: 15px; font-weight: 600; }
  .project-card .ph .pmeta { font-size: 11px; color: #888; }
  .project-card .pstats {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #f0f0f0;
  }
  .project-card .pstat { font-size: 11px; color: #888; }
  .project-card .pstat b { color: #1a6cff; font-size: 14px; margin-right: 2px; }

  /* 报价 */
  .quote-summary {
    background: linear-gradient(135deg, #1a6cff, #4a9bff);
    color: #fff;
    margin: 12px;
    border-radius: 10px;
    padding: 16px;
  }
  .quote-summary .qlabel { font-size: 12px; opacity: 0.9; }
  .quote-summary .qamount { font-size: 28px; font-weight: 700; margin: 4px 0 12px; }
  .quote-summary .qrow {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.95;
  }
  .quote-tabs {
    display: flex;
    margin: 0 12px;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
  }
  .quote-tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
  }
  .quote-tab.active { background: #1a6cff; color: #fff; }

  /* ========== 资讯 ========== */
  .article-item {
    background: #fff;
    margin: 0 12px 10px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
  }
  .article-cover {
    height: 120px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .article-cover.green { background: linear-gradient(135deg, #11998e, #38ef7d); }
  .article-cover.orange { background: linear-gradient(135deg, #f093fb, #f5576c); }
  .article-cover.blue { background: linear-gradient(135deg, #4facfe, #00f2fe); }
  .article-body { padding: 12px 14px; }
  .article-body h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .article-body p { font-size: 12px; color: #888; line-height: 1.5; margin-bottom: 8px; }
  .article-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #aaa;
  }

  /* 资讯文章详情 */
  .article-content {
    background: #fff;
    padding: 20px 16px;
    line-height: 1.8;
    font-size: 15px;
  }
  .article-content h1 { font-size: 20px; margin-bottom: 12px; }
  .article-content .meta {
    color: #888;
    font-size: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
  }
  .article-content p { margin-bottom: 12px; color: #333; }
  .comment-section {
    background: #fff;
    margin-top: 10px;
    padding: 16px;
  }
  .comment-item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  .comment-avatar {
    width: 32px;
    height: 32px;
    background: #4a9bff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .comment-body { flex: 1; }
  .comment-body .cname { font-size: 12px; color: #1a6cff; margin-bottom: 4px; }
  .comment-body .ctext { font-size: 13px; color: #333; }
  .comment-body .cdate { font-size: 11px; color: #aaa; margin-top: 4px; }

  /* 积分 */
  .points-header {
    background: linear-gradient(135deg, #ff8800, #ff5500);
    color: #fff;
    margin: 12px;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
  }
  .points-header .plabel { font-size: 12px; opacity: 0.9; }
  .points-header .pnum { font-size: 36px; font-weight: 700; margin: 4px 0; }
  .points-header .ptip { font-size: 12px; opacity: 0.85; }
  .task-item {
    background: #fff;
    margin: 0 12px 8px;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .task-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
  }
  .task-info { flex: 1; }
  .task-info h5 { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
  .task-info p { font-size: 11px; color: #888; }
  .task-btn {
    padding: 4px 12px;
    border: 1px solid #ff8800;
    color: #ff8800;
    border-radius: 12px;
    font-size: 12px;
    background: #fff;
  }
  .task-btn.done {
    background: #f5f5f5;
    color: #aaa;
    border-color: #e5e5e5;
  }

  /* 我的 */
  .user-header {
    background: linear-gradient(135deg, #1a6cff, #4a9bff);
    color: #fff;
    padding: 30px 16px 24px;
  }
  .user-header .uinfo { display: flex; align-items: center; gap: 12px; }
  .user-avatar {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  .user-header .uname { font-size: 17px; font-weight: 600; }
  .user-header .uid { font-size: 12px; opacity: 0.9; }
  .user-stats {
    display: flex;
    background: #fff;
    margin: -16px 12px 12px;
    border-radius: 10px;
    padding: 16px 0;
  }
  .user-stat {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
  .user-stat .v { font-size: 18px; color: #1a6cff; font-weight: 600; }
  .user-stat .l { font-size: 11px; color: #888; margin-top: 2px; }
  .menu-group {
    background: #fff;
    margin: 0 12px 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  .menu-row {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
  }
  .menu-row:last-child { border-bottom: none; }
  .menu-row .micon {
    width: 28px;
    text-align: center;
    font-size: 16px;
    color: #1a6cff;
  }
  .menu-row .mtxt { flex: 1; font-size: 14px; }
  .menu-row .arr { color: #ccc; font-size: 14px; }
  .menu-row .badge {
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 6px;
  }

  /* PC 端占位 */
  .pc-stub {
    margin: 30px 16px;
    padding: 24px;
    background: #fff;
    border: 2px dashed #cdd5e0;
    border-radius: 10px;
    text-align: center;
    color: #888;
  }
  .pc-stub .pc-icon { font-size: 48px; margin-bottom: 8px; }
  .pc-stub h4 { color: #333; font-size: 15px; margin-bottom: 6px; }
  .pc-stub p { font-size: 12px; line-height: 1.6; }

  /* Toast */
  .toast {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 18px;
    border-radius: 18px;
    font-size: 13px;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .toast.show { opacity: 1; }

  /* Modal 弹窗 */
  .modal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
  }
  .modal.active { display: flex; }
  .modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  .modal-box h4 { font-size: 16px; margin-bottom: 8px; }
  .modal-box p { font-size: 13px; color: #666; margin-bottom: 16px; line-height: 1.5; }
  .modal-actions { display: flex; gap: 10px; }
  .modal-actions .btn { flex: 1; }

  /* 数字标号气泡 */
  .badge-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>
<div class="phone-frame" id="app">

  <!-- ========== 1. 登录注册 ========== -->
  <div class="page login-page" id="page-login">
    <div class="page-content">
      <div class="login-hero">
        <div class="login-logo">CAD</div>
        <div class="login-title">CAD 辅助报价</div>
        <div class="login-subtitle">图纸标注 · 智能报价 · 一站式管理</div>
      </div>
      <div class="login-form">
        <input class="login-input" type="tel" placeholder="请输入手机号" maxlength="11" id="loginPhone" value="138****8888">
        <input class="login-input" type="text" placeholder="验证码" maxlength="6" id="loginCode" value="8888">
      </div>
      <button class="login-btn" onclick="doLogin()">登录 / 注册</button>
      <div class="login-divider">其他登录方式</div>
      <div class="login-wechat" onclick="doLogin()">
        <span style="font-size:18px;">💬</span>
        <span>微信一键登录</span>
      </div>
      <div class="login-tip">
        登录即表示同意<a href="#">《用户协议》</a>和<a href="#">《隐私政策》</a>
      </div>
    </div>
  </div>

  <!-- ========== 2. 首页 ========== -->
  <div class="page active" id="page-home">
    <div class="status-bar">
      <span>17:50</span>
      <span class="right"><span>📶</span><span>📊</span><span>🔋</span></span>
    </div>
    <div class="navbar">
      <span class="nav-icon" style="visibility:hidden;">·</span>
      <span class="nav-title">CAD 辅助报价</span>
      <span class="nav-icon" onclick="go('page-news')">🔔</span>
    </div>
    <div class="page-content">
      <div class="home-banner" onclick="openImportSheet()">
        <h3>📐 立即开始 CAD 标注</h3>
        <p>导入图纸 · 智能识别 · 一键报价</p>
        <span class="banner-btn">开始使用 →</span>
      </div>

      <div class="home-grid">
        <div class="home-grid-item" onclick="go('page-cad-list')">
          <div class="gicon" style="background:#1a6cff;">📐</div>
          <div class="glabel">CAD 标注</div>
        </div>
        <div class="home-grid-item" onclick="go('page-project-list')">
          <div class="gicon" style="background:#00b86b;">📁</div>
          <div class="glabel">项目档案</div>
        </div>
        <div class="home-grid-item" onclick="go('page-news')">
          <div class="gicon" style="background:#a855f7;">📰</div>
          <div class="glabel">行业资讯</div>
        </div>
        <div class="home-grid-item" onclick="go('page-points')">
          <div class="gicon" style="background:#ef4444;">🎁</div>
          <div class="glabel">积分中心</div>
        </div>
      </div>

      <div class="notice-bar">
        <span class="ntag">公告</span>
        <span>🔥 智能识别引擎 v2.0 上线，识别准确率提升至 96%</span>
      </div>

      <div class="section-title">
        <span>行业资讯</span>
        <span class="more" onclick="go('page-news')">更多 ›</span>
      </div>
      <div class="card" style="padding:0 16px;">
        <div class="news-item" onclick="go('page-article')">
          <div class="news-thumb" style="background:linear-gradient(135deg,#667eea,#764ba2);">消防</div>
          <div class="news-info">
            <h4>新国标 GB 50016-2024 解读：火灾自动报警设计变更要点</h4>
            <p>📅 2025-12-08 · 👁 1.2k · 💬 23</p>
          </div>
        </div>
        <div class="divider"></div>
        <div class="news-item" onclick="go('page-article')">
          <div class="news-thumb" style="background:linear-gradient(135deg,#11998e,#38ef7d);">报价</div>
          <div class="news-info">
            <h4>2025 年度消防设备主流品牌价格行情分析</h4>
            <p>📅 2025-12-05 · 👁 856 · 💬 12</p>
          </div>
        </div>
        <div class="divider"></div>
        <div class="news-item" onclick="go('page-article')">
          <div class="news-thumb" style="background:linear-gradient(135deg,#f093fb,#f5576c);">工程</div>
          <div class="news-info">
            <h4>大型商业综合体消防设计常见 5 大问题案例剖析</h4>
            <p>📅 2025-12-02 · 👁 642 · 💬 8</p>
          </div>
        </div>
        <div class="divider"></div>
        <div class="news-item" onclick="go('page-article')">
          <div class="news-thumb" style="background:linear-gradient(135deg,#4facfe,#00f2fe);">CAD</div>
          <div class="news-info">
            <h4>CAD 图纸识别准确率提升实战：从 70% 到 96% 的 3 个技巧</h4>
            <p>📅 2025-11-28 · 👁 1.5k · 💬 31</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tabbar">
      <div class="tab-item active" onclick="go('page-home')">
        <div class="icon">🏠</div><div>首页</div>
      </div>
      <div class="tab-item" onclick="go('page-cad-list')">
        <div class="icon">📐</div><div>CAD</div>
      </div>
      <div class="tab-item" onclick="go('page-project-list')">
        <div class="icon">📁</div><div>项目</div>
      </div>
      <div class="tab-item" onclick="go('page-account')">
        <div class="icon">👤</div><div>我的</div>
      </div>
    </div>
  </div>

  <!-- ========== 3. CAD 图纸列表 ========== -->
  <div class="page" id="page-cad-list">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-home')">‹</span>
      <span class="nav-title">我的图纸</span>
      <span class="nav-icon" onclick="go('page-cad-import')">＋</span>
    </div>
    <div class="page-content">
      <div class="cad-empty" onclick="go('page-cad-import')">
        <div class="empty-icon">📥</div>
        <h4>导入 CAD 图纸</h4>
        <p>支持从微信聊天选择文件，或从本地上传<br>DWG / DXF 格式 · 最大 50MB</p>
        <div class="cad-action-row">
          <button class="btn" onclick="event.stopPropagation();go('page-cad-import')">📱 微信文件</button>
          <button class="btn btn-outline" onclick="event.stopPropagation();go('page-cad-import')">📁 本地上传</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 4. CAD 导入 ========== -->
  <div class="page" id="page-cad-import">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-cad-list')">‹</span>
      <span class="nav-title">导入图纸</span>
      <span class="nav-icon" style="visibility:hidden;">·</span>
    </div>
    <div class="page-content">
      <div class="card" id="importStatus" style="margin-top:24px;">
        <div class="card-title">正在解析</div>
        <div style="padding:8px 16px 16px;">
          <div style="background:#f0f0f0;height:8px;border-radius:4px;overflow:hidden;margin-bottom:8px;">
            <div id="importProgress" style="width:0%;height:100%;background:linear-gradient(90deg,#1a6cff,#4a9bff);transition:width 0.3s;"></div>
          </div>
          <p style="font-size:12px;color:#666;" id="importText">准备上传...</p>
        </div>
      </div>

      <div class="card" id="importResult" style="display:none;">
        <div class="card-title" style="color:#00b86b;">✓ 解析完成</div>
        <div class="card-desc">系统已自动识别 24 个设备，请进入图纸查看</div>
        <div style="padding:0 16px 16px;">
          <div style="background:#f8fbff;border-radius:8px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;">
            <span style="font-size:13px;">📍 感烟探测器</span><span style="color:#1a6cff;font-weight:600;">12 个</span>
          </div>
          <div style="background:#f8fbff;border-radius:8px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;">
            <span style="font-size:13px;">📍 感温探测器</span><span style="color:#1a6cff;font-weight:600;">6 个</span>
          </div>
          <div style="background:#f8fbff;border-radius:8px;padding:12px;display:flex;justify-content:space-between;">
            <span style="font-size:13px;">📍 手动报警按钮</span><span style="color:#1a6cff;font-weight:600;">6 个</span>
          </div>
        </div>
        <button class="btn btn-block" onclick="go('page-cad-canvas')">查看图纸 →</button>
      </div>
    </div>
  </div>

  <!-- ========== 5. CAD 标注画布 ========== -->
  <div class="page" id="page-cad-canvas">
    <div class="status-bar" style="background:#1a1f2e;color:#fff;"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar" style="background:#1a1f2e;color:#fff;border-bottom-color:#333;">
      <span class="nav-icon nav-back" style="color:#fff;" onclick="go('page-cad-list')">‹</span>
      <span class="nav-title" style="color:#fff;">B1-火灾报警平面图</span>
      <span class="nav-icon" style="color:#fff;" onclick="go('page-export')">⋯</span>
    </div>
    <div class="cad-canvas">
      <div class="cad-bg"></div>
      <!-- 模拟 CAD 线条 -->
      <div class="cad-line h" style="top:40px;left:20px;width:300px;"></div>
      <div class="cad-line h" style="top:140px;left:60px;width:240px;"></div>
      <div class="cad-line h" style="top:260px;left:20px;width:320px;"></div>
      <div class="cad-line h" style="top:360px;left:40px;width:280px;"></div>
      <div class="cad-line v" style="top:40px;left:20px;height:340px;"></div>
      <div class="cad-line v" style="top:40px;left:180px;height:120px;"></div>
      <div class="cad-line v" style="top:40px;left:320px;height:340px;"></div>
      <div class="cad-line v" style="top:260px;left:120px;height:120px;"></div>

      <!-- 设备标注 -->
      <div class="device-marker" style="top:90px;left:60px;background:#1a6cff;" onclick="openDeviceSheet('S-001','感烟探测器','B1-1区')">1</div>
      <div class="device-marker" style="top:90px;left:130px;background:#1a6cff;" onclick="openDeviceSheet('S-002','感烟探测器','B1-1区')">2</div>
      <div class="device-marker" style="top:90px;left:220px;background:#1a6cff;" onclick="openDeviceSheet('S-003','感烟探测器','B1-1区')">3</div>
      <div class="device-marker" style="top:90px;left:290px;background:#1a6cff;" onclick="openDeviceSheet('S-004','感烟探测器','B1-1区')">4</div>
      <div class="device-marker" style="top:180px;left:80px;background:#ff8800;" onclick="openDeviceSheet('T-005','感温探测器','B1-2区')">5</div>
      <div class="device-marker" style="top:180px;left:160px;background:#ff8800;" onclick="openDeviceSheet('T-006','感温探测器','B1-2区')">6</div>
      <div class="device-marker" style="top:200px;left:240px;background:#ef4444;" onclick="openDeviceSheet('M-007','手报按钮','B1-2区')">7</div>
      <div class="device-marker" style="top:200px;left:300px;background:#ef4444;" onclick="openDeviceSheet('M-008','手报按钮','B1-2区')">8</div>
      <div class="device-marker" style="top:300px;left:80px;background:#1a6cff;" onclick="openDeviceSheet('S-009','感烟探测器','B1-3区')">9</div>
      <div class="device-marker" style="top:300px;left:200px;background:#00b86b;" onclick="openDeviceSheet('H-010','广播模块','B1-3区')">10</div>
      <div class="device-marker" style="top:320px;left:280px;background:#1a6cff;" onclick="openDeviceSheet('S-011','感烟探测器','B1-3区')">11</div>
      <div class="device-marker" style="top:390px;left:160px;background:#1a6cff;" onclick="openDeviceSheet('S-012','感烟探测器','B1-4区')">12</div>

      <div class="canvas-topbar">
        <div class="canvas-chip">共 24 个设备</div>
        <div class="canvas-chip" onclick="go('page-bom')">查看清单 →</div>
      </div>

      <div class="canvas-toolbar">
        <div class="canvas-tool" onclick="showToast('拖动')">✋</div>
        <div class="canvas-tool active" onclick="showToast('点击设备标注')">📍</div>
        <div class="canvas-tool" onclick="showToast('测量')">📏</div>
        <div class="canvas-tool" onclick="showToast('放大')">🔍</div>
        <div class="canvas-tool" onclick="go('page-bom')">📋</div>
        <div class="canvas-tool" onclick="go('page-export')">💾</div>
      </div>
    </div>

    <!-- 设备信息弹层 -->
    <div class="sheet-mask" id="sheetMask" onclick="closeDeviceSheet()"></div>
    <div class="sheet" id="deviceSheet">
      <div class="sheet-handle"></div>
      <h3 id="ds-title">设备信息</h3>
      <p class="ssub" id="ds-sub">设备编号 · 类型 · 位置</p>
      <div class="form-row">
        <label>设备编号</label>
        <input id="ds-id" value="S-001">
      </div>
      <div class="form-row">
        <label>设备类型</label>
        <span class="pill" id="ds-type">感烟探测器</span>
      </div>
      <div class="form-row">
        <label>所在回路</label>
        <input value="回路 1 - B1F">
      </div>
      <div class="form-row">
        <label>设备地址</label>
        <input value="001" maxlength="3">
      </div>
      <div class="form-row">
        <label>安装位置</label>
        <input value="B1-1区 走廊顶部" id="ds-loc">
      </div>
      <div class="form-row">
        <label>所在楼层</label>
        <input value="B1F">
      </div>
      <div class="form-row">
        <label>防烟分区</label>
        <input value="防烟分区 1">
      </div>
      <div class="form-row">
        <label>备注</label>
        <input value="" placeholder="选填">
      </div>
      <div style="display:flex;gap:10px;margin-top:16px;">
        <button class="btn btn-outline" style="flex:1;" onclick="closeDeviceSheet()">取消</button>
        <button class="btn" style="flex:1;" onclick="saveDevice()">保存</button>
      </div>
    </div>
  </div>

  <!-- ========== 6. 设备清单(BOM) ========== -->
  <div class="page" id="page-bom">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-cad-canvas')">‹</span>
      <span class="nav-title">设备清单</span>
      <span class="nav-icon" onclick="go('page-export')">⤴</span>
    </div>
    <div class="page-content">
      <div class="quote-summary" style="background:linear-gradient(135deg,#1a6cff,#4a9bff);">
        <div class="qlabel">共 24 个设备</div>
        <div class="qamount">¥ 28,650</div>
        <div class="qrow"><span>感烟探测器 12</span><span>¥ 8,400</span></div>
        <div class="qrow" style="margin-top:4px;"><span>感温探测器 6</span><span>¥ 5,400</span></div>
        <div class="qrow" style="margin-top:4px;"><span>手报按钮 6</span><span>¥ 1,800</span></div>
      </div>

      <div class="section-title" style="padding-top:0;"><span>设备明细</span></div>
      <div class="list-item">
        <div class="licon">S</div>
        <div class="linfo">
          <h5>感烟探测器 · JTY-GD-点型</h5>
          <p>× 12 · 单价 ¥700</p>
        </div>
        <div class="lprice">¥ 8,400</div>
      </div>
      <div class="list-item">
        <div class="licon" style="background:#ff8800;">T</div>
        <div class="linfo">
          <h5>感温探测器 · JTW-ZD-点型</h5>
          <p>× 6 · 单价 ¥900</p>
        </div>
        <div class="lprice">¥ 5,400</div>
      </div>
      <div class="list-item">
        <div class="licon" style="background:#ef4444;">M</div>
        <div class="linfo">
          <h5>手动报警按钮 · J-SAP-M</h5>
          <p>× 6 · 单价 ¥300</p>
        </div>
        <div class="lprice">¥ 1,800</div>
      </div>
      <div class="list-item">
        <div class="licon" style="background:#00b86b;">H</div>
        <div class="linfo">
          <h5>消防广播模块 · GST-LD-8305</h5>
          <p>× 4 · 单价 ¥450</p>
        </div>
        <div class="lprice">¥ 1,800</div>
      </div>

      <button class="btn btn-block" onclick="go('page-quote-list')">生成报价单 →</button>
      <button class="btn btn-block btn-outline" onclick="showToast('Excel 已导出到本地')">📊 导出 Excel</button>
    </div>
  </div>

  <!-- ========== 7. 导出与分享 ========== -->
  <div class="page" id="page-export">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-cad-canvas')">‹</span>
      <span class="nav-title">导出与分享</span>
      <span class="nav-icon" style="visibility:hidden;">·</span>
    </div>
    <div class="page-content">
      <div class="card" style="margin-top:20px;">
        <div class="card-title">📐 标注图纸</div>
        <div class="card-desc">导出已标注的 CAD 图，支持图片 / PDF 格式</div>
        <div style="padding:0 16px 16px;display:flex;gap:8px;">
          <button class="btn btn-ghost" style="flex:1;color:#1a6cff;" onclick="showToast('已导出为 PNG')">🖼️ 图片</button>
          <button class="btn btn-ghost" style="flex:1;color:#1a6cff;" onclick="showToast('已导出为 PDF')">📄 PDF</button>
        </div>
      </div>

      <div class="card">
        <div class="card-title">📊 设备清单</div>
        <div class="card-desc">导出设备清单 Excel 文件</div>
        <div style="padding:0 16px 16px;">
          <button class="btn btn-block" onclick="showToast('Excel 已生成，消耗 5 积分')">📊 导出 Excel</button>
        </div>
      </div>

      <div class="card">
        <div class="card-title">💬 微信分享</div>
        <div class="card-desc">将标注图、清单、报价单转发给同事 / 客户</div>
        <div style="padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap;">
          <span class="tag" onclick="showToast('已复制分享链接')">🔗 复制链接</span>
          <span class="tag" onclick="showToast('已发送给微信好友')">💬 微信好友</span>
          <span class="tag" onclick="showToast('已分享到朋友圈')">📱 朋友圈</span>
          <span class="tag" onclick="showToast('已保存到工作群')">👥 工作群</span>
        </div>
      </div>

      <div class="card">
        <div class="card-title" style="color:#ff8800;">💎 提示</div>
        <div class="card-desc">每次导出消耗 5 积分，邀请好友注册可获 50 积分</div>
      </div>
    </div>
  </div>

  <!-- ========== 8. 项目档案列表 ========== -->
  <div class="page" id="page-project-list">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-home')">‹</span>
      <span class="nav-title">项目档案</span>
      <span class="nav-icon" onclick="showToast('已新建项目')">＋</span>
    </div>
    <div class="page-content">
      <div style="padding:12px 16px 0;">
        <input class="login-input" style="margin:0;background:#fff;border:1px solid #eee;" placeholder="🔍 搜索项目名 / 客户">
      </div>

      <div class="project-card" onclick="go('page-project-detail')">
        <div class="ph">
          <div>
            <h4>万科 · 翡翠公园 3 期</h4>
            <p style="font-size:12px;color:#888;margin-top:4px;">消防改造工程</p>
          </div>
          <span class="tag tag-orange">报价中</span>
        </div>
        <div style="font-size:12px;color:#666;line-height:1.7;">
          📍 苏州工业园区钟南街 666 号<br>
          👤 联系人：李工 · 138****1234
        </div>
        <div class="pstats">
          <div class="pstat"><b>12</b>图纸</div>
          <div class="pstat"><b>3</b>清单</div>
          <div class="pstat"><b>2</b>报价</div>
          <div class="pstat"><b>¥ 286K</b>总额</div>
        </div>
      </div>

      <div class="project-card" onclick="go('page-project-detail')">
        <div class="ph">
          <div>
            <h4>海康威视 · 总部研发中心</h4>
            <p style="font-size:12px;color:#888;margin-top:4px;">消防系统安装</p>
          </div>
          <span class="tag tag-green">已签约</span>
        </div>
        <div style="font-size:12px;color:#666;line-height:1.7;">
          📍 杭州滨江区阡陌路 555 号<br>
          👤 联系人：王经理 · 139****5678
        </div>
        <div class="pstats">
          <div class="pstat"><b>8</b>图纸</div>
          <div class="pstat"><b>5</b>清单</div>
          <div class="pstat"><b>1</b>报价</div>
          <div class="pstat"><b>¥ 1.24M</b>总额</div>
        </div>
      </div>

      <div class="project-card" onclick="go('page-project-detail')">
        <div class="ph">
          <div>
            <h4>银泰城 · 商场 4 层改造</h4>
            <p style="font-size:12px;color:#888;margin-top:4px;">消防升级</p>
          </div>
          <span class="tag tag-gray">已归档</span>
        </div>
        <div style="font-size:12px;color:#666;line-height:1.7;">
          📍 上海浦东新区张杨路 1234 号<br>
          👤 联系人：张工 · 136****9012
        </div>
        <div class="pstats">
          <div class="pstat"><b>6</b>图纸</div>
          <div class="pstat"><b>2</b>清单</div>
          <div class="pstat"><b>1</b>报价</div>
          <div class="pstat"><b>¥ 458K</b>总额</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 9. 项目档案详情 ========== -->
  <div class="page" id="page-project-detail">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-project-list')">‹</span>
      <span class="nav-title">项目详情</span>
      <span class="nav-icon" onclick="showToast('已编辑项目信息')">✏️</span>
    </div>
    <div class="page-content">
      <div class="card" style="margin-top:16px;">
        <div class="card-title">📋 基本信息</div>
        <div style="padding:0 16px 12px;font-size:13px;line-height:2;">
          <div><span style="color:#888;">项目名称：</span>万科 · 翡翠公园 3 期</div>
          <div><span style="color:#888;">工程类型：</span>消防改造</div>
          <div><span style="color:#888;">项目地址：</span>苏州工业园区钟南街 666 号</div>
          <div><span style="color:#888;">业主公司：</span>万科地产</div>
          <div><span style="color:#888;">联系人：</span>李工 · 138****1234</div>
          <div><span style="color:#888;">创建时间：</span>2025-11-20</div>
        </div>
      </div>

      <div class="section-title" style="padding-top:4px;"><span>📐 项目图纸 (12)</span></div>
      <div class="drawer-list" style="margin:0 12px;">
        <div class="drawer-item" onclick="go('page-cad-canvas')">
          <div class="dicon">📄</div>
          <div class="dinfo">
            <h5>B1-火灾报警平面图.dwg</h5>
            <p>24 个设备</p>
          </div>
          <div class="dmeta"><div class="date">已标注</div></div>
        </div>
        <div class="drawer-item" onclick="go('page-cad-canvas')">
          <div class="dicon">📄</div>
          <div class="dinfo">
            <h5>1F-火灾报警平面图.dwg</h5>
            <p>18 个设备</p>
          </div>
          <div class="dmeta"><div class="date">已标注</div></div>
        </div>
        <div class="drawer-item" onclick="go('page-cad-canvas')">
          <div class="dicon">📄</div>
          <div class="dinfo">
            <h5>地下车库-喷淋图.dwg</h5>
            <p>86 个设备</p>
          </div>
          <div class="dmeta"><div class="date">已标注</div></div>
        </div>
      </div>

      <div class="section-title" style="padding-top:4px;"><span>📊 设备清单 (3)</span></div>
      <div class="drawer-list" style="margin:0 12px;">
        <div class="drawer-item" onclick="go('page-bom')">
          <div class="dicon" style="background:#e0f7ec;color:#00b86b;">📋</div>
          <div class="dinfo">
            <h5>火灾报警系统清单</h5>
            <p>¥ 28,650 · 24 项</p>
          </div>
          <div class="dmeta"><div class="date">v1.0</div></div>
        </div>
        <div class="drawer-item" onclick="go('page-bom')">
          <div class="dicon" style="background:#e0f7ec;color:#00b86b;">📋</div>
          <div class="dinfo">
            <h5>喷淋系统清单</h5>
            <p>¥ 186,400 · 86 项</p>
          </div>
          <div class="dmeta"><div class="date">v1.0</div></div>
        </div>
      </div>

      <div class="section-title" style="padding-top:4px;"><span>💰 报价单 (2)</span></div>
      <div class="drawer-list" style="margin:0 12px;">
        <div class="drawer-item" onclick="go('page-quote-list')">
          <div class="dicon" style="background:#fff0e0;color:#ff8800;">💰</div>
          <div class="dinfo">
            <h5>对外报价单 v2.1</h5>
            <p>¥ 286,500</p>
          </div>
          <div class="dmeta"><div class="date">对外版</div></div>
        </div>
        <div class="drawer-item" onclick="go('page-quote-list')">
          <div class="dicon" style="background:#fff0e0;color:#ff8800;">💰</div>
          <div class="dinfo">
            <h5>内部报价单 v2.1</h5>
            <p>¥ 215,800</p>
          </div>
          <div class="dmeta"><div class="date">内部版</div></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 10. 报价列表 ========== -->
  <div class="page" id="page-quote-list">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-home')">‹</span>
      <span class="nav-title">报价单</span>
      <span class="nav-icon" onclick="showToast('已新建报价单')">＋</span>
    </div>
    <div class="page-content">
      <div class="quote-summary">
        <div class="qlabel">本月报价总额</div>
        <div class="qamount">¥ 1,985,300</div>
        <div class="qrow"><span>报价单数 8</span><span>已签约 3</span></div>
      </div>

      <div class="quote-tabs">
        <div class="quote-tab active" onclick="switchQuoteTab(this,'all')">全部</div>
        <div class="quote-tab" onclick="switchQuoteTab(this,'out')">对外版</div>
        <div class="quote-tab" onclick="switchQuoteTab(this,'in')">内部版</div>
      </div>

      <div class="project-card" onclick="go('page-quote-detail')">
        <div class="ph">
          <div>
            <h4>万科 · 翡翠公园 3 期</h4>
            <p style="font-size:12px;color:#888;margin-top:4px;">v2.1 · 2025-12-08</p>
          </div>
          <span class="tag tag-orange">对外</span>
        </div>
        <div class="pstats">
          <div class="pstat"><b style="color:#ff6b00;">¥ 286,500</b></div>
          <div class="pstat">128 设备</div>
          <div class="pstat" style="color:#00b86b;">●报价中</div>
        </div>
      </div>

      <div class="project-card" onclick="go('page-quote-detail')">
        <div class="ph">
          <div>
            <h4>海康威视 · 总部研发中心</h4>
            <p style="font-size:12px;color:#888;margin-top:4px;">v1.0 · 2025-12-05</p>
          </div>
          <span class="tag tag-gray">内部</span>
        </div>
        <div class="pstats">
          <div class="pstat"><b style="color:#ff6b00;">¥ 1,240,800</b></div>
          <div class="pstat">456 设备</div>
          <div class="pstat" style="color:#00b86b;">●已签约</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 11. 报价单详情(双版本) ========== -->
  <div class="page" id="page-quote-detail">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-quote-list')">‹</span>
      <span class="nav-title">报价单详情</span>
      <span class="nav-icon" onclick="showToast('已转发到微信')">⤴</span>
    </div>
    <div class="page-content">
      <div class="quote-tabs" style="margin:12px 12px 0;">
        <div class="quote-tab active" onclick="switchVersion(this,'out')">📤 对外版</div>
        <div class="quote-tab" onclick="switchVersion(this,'in')">🔒 内部版</div>
      </div>

      <div class="quote-summary" id="quoteOutView" style="background:linear-gradient(135deg,#1a6cff,#4a9bff);">
        <div class="qlabel">对外报价 (不含采购价)</div>
        <div class="qamount">¥ 286,500</div>
        <div class="qrow"><span>设备费 215,800</span><span>75.3%</span></div>
        <div class="qrow" style="margin-top:4px;"><span>安装费 45,200</span><span>15.8%</span></div>
        <div class="qrow" style="margin-top:4px;"><span>税费 25,500</span><span>8.9%</span></div>
      </div>

      <div class="quote-summary" id="quoteInView" style="background:linear-gradient(135deg,#ff8800,#ff5500);display:none;">
        <div class="qlabel">内部报价 (含采购价)</div>
        <div class="qamount">¥ 215,800</div>
        <div class="qrow"><span>采购成本 158,600</span><span>73.5%</span></div>
        <div class="qrow" style="margin-top:4px;"><span>毛利润 57,200</span><span>26.5%</span></div>
      </div>

      <div class="card">
        <div class="card-title">📋 报价明细</div>
        <div class="list-item" style="margin:0;">
          <div class="licon" style="background:#1a6cff;">S</div>
          <div class="linfo">
            <h5>感烟探测器 × 12</h5>
            <p>单价 ¥700</p>
          </div>
          <div class="lprice">¥ 8,400</div>
        </div>
        <div class="list-item" style="margin:0;">
          <div class="licon" style="background:#ff8800;">T</div>
          <div class="linfo">
            <h5>感温探测器 × 6</h5>
            <p>单价 ¥900</p>
          </div>
          <div class="lprice">¥ 5,400</div>
        </div>
        <div class="list-item" style="margin:0;">
          <div class="licon" style="background:#ef4444;">M</div>
          <div class="linfo">
            <h5>手报按钮 × 6</h5>
            <p>单价 ¥300</p>
          </div>
          <div class="lprice">¥ 1,800</div>
        </div>
        <div class="list-item" style="margin:0;border-bottom:none;">
          <div class="licon" style="background:#00b86b;">+</div>
          <div class="linfo">
            <h5>其他设备共 104 项</h5>
            <p>详见完整清单</p>
          </div>
          <div class="lprice">¥ 200,200</div>
        </div>
      </div>

      <button class="btn btn-block" onclick="showToast('已转发到微信')">💬 微信转发</button>
      <button class="btn btn-block btn-outline" onclick="showToast('已导出 PDF')">📄 导出 PDF</button>
      <button class="btn btn-block btn-ghost" style="color:#1a6cff;" onclick="go('page-pc')">🖥️ 在 PC 端继续编辑</button>
    </div>
  </div>

  <!-- ========== 12. 资讯列表 ========== -->
  <div class="page" id="page-news">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-home')">‹</span>
      <span class="nav-title">行业资讯</span>
      <span class="nav-icon" style="visibility:hidden;">·</span>
    </div>
    <div class="page-content">
      <div style="padding:12px 16px 0;">
        <input class="login-input" style="margin:0;background:#fff;border:1px solid #eee;" placeholder="🔍 搜索资讯">
      </div>

      <div class="section-title" style="padding-bottom:4px;"><span>📌 置顶</span></div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover">🔥 新国标解读</div>
        <div class="article-body">
          <h4>GB 50016-2024 火灾自动报警设计变更要点深度解读</h4>
          <p>本文详解新国标相比 2014 版的 12 项核心变化，附设计院权威解读视频。</p>
          <div class="article-foot">
            <span>📅 2025-12-08</span>
            <span>👁 1.2k · 💬 23</span>
          </div>
        </div>
      </div>

      <div class="section-title" style="padding-bottom:4px;"><span>📰 最新文章</span></div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover green">💰 价格行情</div>
        <div class="article-body">
          <h4>2025 年度消防设备主流品牌价格行情分析</h4>
          <p>海湾、利达、青鸟等 8 大品牌最新报价对比，含税情况说明。</p>
          <div class="article-foot">
            <span>📅 2025-12-05</span>
            <span>👁 856 · 💬 12</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover orange">⚡ 工程案例</div>
        <div class="article-body">
          <h4>大型商业综合体消防设计常见 5 大问题</h4>
          <p>结合 3 个实际项目，剖析防火分区、疏散设计中的典型错误。</p>
          <div class="article-foot">
            <span>📅 2025-12-02</span>
            <span>👁 642 · 💬 8</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover blue">📐 CAD 技巧</div>
        <div class="article-body">
          <h4>CAD 图纸导入识别准确率提升实战</h4>
          <p>分享 3 个让 AI 识别更准的图纸准备技巧，亲测从 70% → 96%。</p>
          <div class="article-foot">
            <span>📅 2025-11-28</span>
            <span>👁 1.5k · 💬 31</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover">🔍 验收标准</div>
        <div class="article-body">
          <h4>消防验收常见 8 个被退回的原因及解决办法</h4>
          <p>从材料报验、系统调试到现场检测全流程，附送检样本模板。</p>
          <div class="article-foot">
            <span>📅 2025-11-25</span>
            <span>👁 2.1k · 💬 45</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover green">🛠️ 维保指南</div>
        <div class="article-body">
          <h4>消防系统日常维保到底要做什么？年度计划表请收好</h4>
          <p>含探测器清洗、联动测试、电源检查等12项常规项的执行标准。</p>
          <div class="article-foot">
            <span>📅 2025-11-20</span>
            <span>👁 1.8k · 💬 19</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover orange">📜 政策法规</div>
        <div class="article-body">
          <h4>2025 年消防工程师注册新规深度解读</h4>
          <p>继续教育学时要求、注册执业范围、违规处罚条款全部说清楚。</p>
          <div class="article-foot">
            <span>📅 2025-11-15</span>
            <span>👁 3.4k · 💬 67</span>
          </div>
        </div>
      </div>
      <div class="article-item" onclick="go('page-article')">
        <div class="article-cover blue">💡 技术干货</div>
        <div class="article-body">
          <h4>火灾报警总线短路隔离器的原理与选型</h4>
          <p>从工作原理到品牌选型再到常见故障排查，一篇全搞定。</p>
          <div class="article-foot">
            <span>📅 2025-11-10</span>
            <span>👁 980 · 💬 14</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 13. 文章详情 + 评论 ========== -->
  <div class="page" id="page-article">
    <div class="status-bar"><span>17:50</span><span class="right"><span>📶</span><span>📊</span><span>🔋</span></span></div>
    <div class="navbar">
      <span class="nav-icon nav-back" onclick="go('page-news')">‹</span>
      <span class="nav-title">文章详情</span>
      <span class="nav-icon" style="visibility:hidden;">·</span>
    </div>
    <div class="page-content">
      <div class="article-content">
        <h1>GB 50016-2024 火灾自动报警设计变更要点深度解读</h1>
        <div class="meta">📅 2025-12-08 · 👁 1.2k · 👤 消防老司机 · 🏷 国标解读</div>
        <p>新国标 GB 50016-2024 相比 2014 版有 12 项核心变化，其中与电气消防直接相关的有 5 项。本文重点解读这几项，并结合实际项目说明落地应用。</p>
        <p><b>1. 探测器设置间距变更</b><br>感烟探测器的保护半径由 5.8m 调整为 6.0m，实际项目中需重新核对图纸。</p>
        <p><b>2. 回路带载量调整</b><br>单个回路最大带载量由 200 点调整为 256 点，但需预留 20% 余量。</p>
        <p><b>3. 新增防烟分区联动要求</b><br>所有防烟分区必须与火灾报警系统联动，且响应时间 ≤ 30s。</p>
        <p><b>视频讲解</b>：文末附有设计院专家 12 分钟视频解读，建议收藏。</p>
      </div>

      <div class="comment-section">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
          <h4 style="font-size:15px;">💬 精选评论 (23)</h4>
          <span style="font-size:12px;color:#1a6cff;cursor:pointer;" onclick="openComment()">✍️ 写评论</span>
        </div>
        <div class="comment-item">
          <div class="comment-avatar">张</div>
          <div class="comment-body">
            <div class="cname">张工 · 设计师</div>
            <div class="ctext">非常及时！我们项目刚好卡在新旧标切换期，受益匪浅。</div>
            <div class="cdate">2 小时前 · 👍 12 · 回复</div>
          </div>
        </div>
        <div class="comment-item">
          <div class="comment-avatar" style="background:#ff8800;">李</div>
          <div class="comment-body">
            <div class="cname">李经理 · 工程商</div>
            <div class="ctext">第三条防烟分区联动要求，能否给个示例代码？我们这做集成的老板正在催。</div>
            <div class="cdate">5 小时前 · 👍 8 · 回复</div>
          </div>
        </div>
        <div class="comment-item">
          <div class="comment-avatar" style="background:#00b86b;">王</div>
          <div class="comment-body">
            <div class="cname">王老师 · 审图专家</div>
            <div class="ctext">补充一点：新国标对总线短路隔离器的要求也提高了，建议大家重点关注。</div>
            <div class="cdate">昨天 · 👍 25 · 回复</div>
          </div>
        </div>

        <div style="background:#f8fbff;border-radius:8px;padding:12px;margin-top:12px;display:flex;align-items:center;gap:8px;">
          <span style="font-size:18px;">🎁</span>
          <span style="font-size:12px;color:#666;flex:1;">评论可获得 <b style="color:#ff8800;">+2 积分</b></span>
        </div>
      </div>
    </div>

    <div class="sheet-mask" id="commentMask" onclick="closeComment()"></div>
    <div class="sheet" id="commentSheet">
      <div class="sheet-handle"></div>
      <h3>发表评论</h3>
      <p class="ssub">分享你的看法，优质评论可获得积分奖励</p>
      <textarea style="width:100%;min-height:100px;padding:12px;border:1px solid #e5e5e5;border-radius:8px;font-size:14px;resize:none;margin-bottom:12px;" placeholder="说点什么吧...">
🔍 设备识别与编号

系统已自动识别 24 个设备，按种类分组，顺序编号
识别准确率
96%
感烟探测器 12 个 ▾
B1-1区 · 走廊 ✏️
B1-1区 · 办公室 ✏️
B1-2区 · 电梯厅 ✏️
展开剩余 7 个 ▾
感温探测器 6 个 ▾
B1-2区 · 厨房 ✏️
B1-3区 · 机房 ✏️
展开剩余 3 个 ▾
手报按钮 6 个 ▾
B1-2区 · 楼梯口 ✏️
展开剩余 4 个 ▾
💡 操作提示：编号可点击输入框修改，拖拽设备项可调整顺序
17:50📶📊🔋
我的积分
1,286
邀请好友注册可获 50 积分 · 转发文件消耗 5 积分/次
🎯 每日任务
📺
观看行业视频

+5 积分 · 已完成 2/3
💬
发表 1 条评论

+2 积分 · 已完成 0/1
📤
分享 1 个项目

+3 积分 · 已完成 1/1
📲
邀请好友注册

+50 积分/人 · 已邀请 3 人
📜 积分记录
完成视频任务

2025-12-09 14:23
发表评论

2025-12-08 21:15
导出 Excel 清单

2025-12-08 17:50
-5
17:50📶📊🔋
当前积分
1,286
累计获得 1,520累计消耗 234
完成视频任务

2025-12-09 14:23
发表评论

2025-12-08 21:15
导出 Excel 清单

2025-12-08 17:50
-5
邀请好友注册 (3人)

2025-12-07 10:20
+150
👷
王工 · 138****8888
消防工程师 · 注册于 2025-08-12
项目
报价
1286
积分
📥 导入 CAD 图纸

支持微信聊天文件 / 本地上传 · DWG / DXF · 最大 50MB
💬
微信文件
从聊天记录选择
📁
本地上传
从手机文件夹
💡 小贴士：支持批量导入，最多 10 个文件，单个文件不超过 50MB
提示