编辑页面

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>电子合同签署平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #48C0B0;
            --primary-light: #E6F5F3;
            --text: #1a1a1a;
            --text2: #666;
            --text3: #999;
            --bg: #f5f7fa;
            --white: #fff;
            --border: #e5e5e5;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            min-height: 100vh;
        }
        .app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--white); }

        .page { display: none; padding-bottom: 60px; }
        .page.active { display: block; }

        .header {
            background: var(--white);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--bg);
        }
        .header h2 { font-size: 16px; font-weight: 600; }
        .header .back {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .header .back svg { width: 20px; height: 20px; color: var(--text); }
        .header .right { display: flex; align-items: center; gap: 12px; }
        .header .icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .header .icon svg { width: 16px; height: 16px; color: var(--text); }

        .user-bar {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            gap: 10px;
            border-bottom: 8px solid var(--bg);
        }
        .user-bar .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-bar .avatar svg { width: 20px; height: 20px; color: var(--text3); }
        .user-bar .info { flex: 1; }
        .user-bar .name { font-size: 15px; font-weight: 500; }
        .user-bar .desc { font-size: 12px; color: var(--text3); }
        .user-bar .btn {
            padding: 6px 14px;
            border-radius: 16px;
            background: var(--primary);
            color: var(--white);
            font-size: 13px;
            border: none;
            cursor: pointer;
        }

        .quick-section { padding: 12px 16px; }
        .quick-section .main-card {
            background: linear-gradient(135deg, var(--primary), #5DD4C4);
            border-radius: 12px;
            padding: 14px;
            color: var(--white);
            margin-bottom: 10px;
            cursor: pointer;
        }
        .quick-section .main-card .top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .quick-section .main-card .title { font-size: 15px; font-weight: 600; }
        .quick-section .main-card .desc { font-size: 12px; opacity: 0.85; margin-top: 4px; }
        .quick-section .main-card .arrow {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            opacity: 0.85;
        }
        .quick-section .main-card .arrow svg { width: 14px; height: 14px; }
        .quick-section .sub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .quick-section .sub-card {
            background: var(--bg);
            border-radius: 10px;
            padding: 12px;
            cursor: pointer;
        }
        .quick-section .sub-card .title { font-size: 13px; font-weight: 500; }
        .quick-section .sub-card .desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
        .quick-section .sub-card svg { width: 22px; height: 22px; color: var(--primary); margin-bottom: 6px; }

        .banner {
            margin: 0 16px 12px;
            background: var(--primary-light);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        .banner .pic {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .banner .pic svg { width: 20px; height: 20px; color: var(--white); }
        .banner .text { flex: 1; }
        .banner .text .title { font-size: 13px; font-weight: 500; }
        .banner .text .desc { font-size: 11px; color: var(--text3); }
        .banner .link { font-size: 12px; color: var(--primary); }

        .stats { padding: 12px 16px; border-top: 8px solid var(--bg); border-bottom: 8px solid var(--bg); }
        .stats .title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
        .stats .row { display: flex; }
        .stats .item {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border-right: 1px solid var(--bg);
            cursor: pointer;
        }
        .stats .item:last-child { border-right: none; }
        .stats .num { font-size: 20px; font-weight: 600; color: var(--primary); }
        .stats .num.red { color: #FF4A4A; }
        .stats .lb { font-size: 11px; color: var(--text3); margin-top: 2px; }

        .tutorial { padding: 12px 16px; }
        .tutorial .title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
        .tutorial .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .tutorial .card {
            background: var(--bg);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
        }
        .tutorial .card .step {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-size: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
        }
        .tutorial .card .name { font-size: 13px; font-weight: 500; }
        .tutorial .card .desc { font-size: 11px; color: var(--text3); }

        .tips-section { padding: 12px 16px 20px; }
        .tips-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
        .tips-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            font-size: 12px;
            color: var(--text2);
        }
        .tips-item svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

        .tutorial-flow { display: flex; flex-direction: column; gap: 12px; }
        .flow-step { display: flex; align-items: flex-start; gap: 12px; }
        .flow-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .flow-content { flex: 1; }
        .flow-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
        .flow-desc { font-size: 12px; color: var(--text3); line-height: 1.6; }

        .tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .tips-card {
            background: var(--bg);
            border-radius: 10px;
            padding: 14px;
        }
        .tips-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }
        .tips-icon svg { width: 18px; height: 18px; color: var(--primary); }
        .tips-card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .tips-card-desc { font-size: 11px; color: var(--text3); line-height: 1.5; }

        .guide-intro {
            background: linear-gradient(135deg, var(--primary-light), #f0faf8);
            border-radius: 12px;
            padding: 16px;
            margin: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .guide-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .guide-icon svg { width: 24px; height: 24px; color: var(--white); }
        .guide-intro-text { font-size: 13px; color: var(--text2); line-height: 1.7; }

        .guide-section {
            padding: 0 16px 16px;
        }
        .guide-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .guide-num {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .guide-content { display: flex; flex-direction: column; gap: 10px; }
        .guide-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg);
            border-radius: 8px;
        }
        .guide-item-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .guide-item-icon svg { width: 16px; height: 16px; color: var(--primary); }
        .guide-item-text { font-size: 13px; color: var(--text2); line-height: 1.5; padding-top: 4px; }

        .guide-tip {
            background: #FFF8E6;
            border-radius: 8px;
            padding: 14px;
            margin: 0 16px 20px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .guide-tip-icon {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
        }
        .guide-tip-icon svg { width: 22px; height: 22px; color: #FAAD14; }
        .guide-tip-text { font-size: 12px; color: #8C6120; line-height: 1.6; }

        .sign-header {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 8px solid var(--bg);
        }
        .sign-header .tag {
            padding: 4px 10px;
            border-radius: 4px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 12px;
        }
        .sign-header .switch {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--primary);
        }
        .sign-header .switch svg { width: 14px; height: 14px; }

        .tabs {
            display: flex;
            padding: 0 16px;
            border-bottom: 1px solid var(--bg);
        }
        .tabs .tab {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            font-size: 14px;
            color: var(--text3);
            position: relative;
            cursor: pointer;
        }
        .tabs .tab.active { color: var(--primary); font-weight: 500; }
        .tabs .tab .count { font-size: 11px; margin-left: 2px; }
        .tabs .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary);
            border-radius: 1px;
        }

        .list { padding: 12px 16px; }
        .contract-item {
            background: var(--bg);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .contract-item .top { display: flex; justify-content: space-between; align-items: flex-start; }
        .contract-item .name { font-size: 14px; font-weight: 500; padding-right: 8px; }
        .contract-item .status {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        .contract-item .status.wait { background: #FFF2E8; color: #FF7A44; }
        .contract-item .status.done { background: var(--primary-light); color: var(--primary); }
        .contract-item .status.signed { background: #E8FFF0; color: #52C41A; }
        .contract-item .meta { font-size: 12px; color: var(--text3); margin-top: 6px; }

        .search-bar { padding: 10px 16px; border-bottom: 8px solid var(--bg); }
        .search-input {
            display: flex;
            align-items: center;
            background: var(--bg);
            border-radius: 20px;
            padding: 10px 14px;
            gap: 8px;
        }
        .search-input svg { width: 16px; height: 16px; color: var(--text3); }
        .search-input input {
            flex: 1;
            border: none;
            background: none;
            font-size: 14px;
            outline: none;
        }
        .search-input input::placeholder { color: var(--text3); }

        .func-cards { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .func-card {
            border-radius: 10px;
            padding: 12px;
            color: var(--white);
            cursor: pointer;
        }
        .func-card.blue { background: linear-gradient(135deg, #3B9BF5, #6BC1F7); }
        .func-card.green { background: linear-gradient(135deg, var(--primary), #5DD4C4); }
        .func-card .icon {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }
        .func-card .icon svg { width: 18px; height: 18px; color: var(--white); }
        .func-card .title { font-size: 14px; font-weight: 600; }
        .func-card .desc { font-size: 11px; opacity: 0.85; margin-top: 2px; }

        .category { padding: 12px 16px; }
        .category .title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
        .category .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .category .item { text-align: center; cursor: pointer; }
        .category .item .icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 6px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .category .item .icon svg { width: 20px; height: 20px; color: var(--white); }
        .category .item .name { font-size: 11px; color: var(--text2); }

        .menu-list { padding: 0 16px; }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid var(--bg);
            cursor: pointer;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item .icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        .menu-item .icon svg { width: 18px; height: 18px; color: var(--white); }
        .menu-item .text { flex: 1; font-size: 14px; font-weight: 500; }
        .menu-item .arrow { width: 14px; height: 14px; color: var(--text3); }
        .menu-item .badge {
            font-size: 12px;
            color: var(--primary);
            margin-right: 6px;
        }

        /* 二级页面 */
        .detail-page {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--white);
            z-index: 200;
            display: none;
            flex-direction: column;
        }
        .detail-page.active { display: flex; }

        .detail-header {
            background: var(--white);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--bg);
        }
        .detail-header .back {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
}
        .detail-header .back svg { width: 20px; height: 20px; color: var(--text); }
        .detail-header h2 { font-size: 16px; font-weight: 600; flex: 1; }
        .detail-body { flex: 1; overflow-y: auto; }

        /* 合同详情页 */
        .contract-detail { padding: 16px; }
        .status-banner {
            background: linear-gradient(135deg, #FFF2E8, #FFE7D6);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .status-banner.signed { background: linear-gradient(135deg, #E8FFF0, #D6FFE8); }
        .status-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .status-icon.wait { background: #FF7A44; }
        .status-icon.done { background: #52C41A; }
        .status-icon svg { width: 22px; height: 22px; color: var(--white); }
        .status-text { flex: 1; }
        .status-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
        .status-desc { font-size: 12px; color: var(--text3); }
        .detail-card {
            background: var(--bg);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
        }
        .detail-card h4 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
        .detail-card .row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--white);
        }
        .detail-card .row:last-child { border-bottom: none; }
        .detail-card .row .lb { color: var(--text3); font-size: 13px; }
        .detail-card .row .val { font-weight: 500; font-size: 13px; }
        
        /* 签署方信息卡片 */
        .party-item { display: flex; align-items: flex-start; gap: 10px; }
        .party-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .party-icon svg { width: 20px; height: 20px; color: var(--white); }
        .party-info { flex: 1; }
        .party-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
        .party-role { font-size: 12px; color: var(--text3); margin-bottom: 4px; }
        .party-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
        .party-status.done { background: #E8FFF0; color: #52C41A; }
        .party-status.pending { background: #FFF2E8; color: #FF7A44; }
        
        /* 操作按钮组 */
        .action-btns { display: flex; gap: 10px; margin-bottom: 12px; }
        .action-btn {
            flex: 1;
            background: var(--bg);
            border-radius: 10px;
            padding: 12px 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .action-btn:hover { background: var(--primary-light); }
        .action-btn svg { width: 22px; height: 22px; color: var(--text2); margin-bottom: 4px; }
        .action-btn span { display: block; font-size: 12px; color: var(--text2); }
        
        /* 附件列表 */
        .attach-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--white);
            cursor: pointer;
        }
        .attach-item:last-child { border-bottom: none; }
        .attach-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;
        }
        .attach-icon svg { width: 18px; height: 18px; }
        .attach-info { flex: 1; }
        .attach-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
        .attach-size { font-size: 11px; color: var(--text3); }

        /* 合同正文页 */
        .contract-content { padding: 16px; }
        .contract-content .doc-header { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--bg); margin-bottom: 16px; }
        .contract-content .doc-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
        .contract-content .doc-num { font-size: 12px; color: var(--text3); }
        .contract-content .chapter { margin-bottom: 16px; }
        .contract-content .chapter-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
        .contract-content .article { margin-bottom: 10px; }
        .contract-content .article-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .contract-content .article-content { font-size: 13px; color: var(--text2); line-height: 1.8; text-indent: 2em; }
        .contract-content .sign-area { margin-top: 30px; padding: 16px; background: var(--bg); border-radius: 8px; }
        .contract-content .sign-row { display: flex; justify-content: space-between; margin-bottom: 12px; }
        .contract-content .sign-row:last-child { margin-bottom: 0; }
        .contract-content .sign-label { font-size: 13px; color: var(--text3); }
        .contract-content .sign-value { font-size: 13px; color: var(--text); }
        .contract-content .sign-block { display: flex; align-items: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--text3); }
        .contract-content .sign-block-item { flex: 1; text-align: center; }
        .contract-content .sign-placeholder {
            height: 60px;
            border: 2px dashed var(--text3);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
            font-size: 12px;
            color: var(--text3);
            cursor: pointer;
            transition: all 0.3s;
        }
        .contract-content .sign-placeholder:hover { border-color: var(--primary); color: var(--primary); }
        .contract-content .sign-placeholder.signed { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-size: 12px; border-style: solid; }
        .contract-content .sign-placeholder.signed svg { width: 20px; height: 20px; margin-bottom: 4px; }
        .contract-content .sign-placeholder .sign-text { display: block; }
        .contract-content .sign-label { font-size: 12px; color: var(--text3); }

        /* 签署流程页 */
        .sign-flow { padding: 16px; }
        .sign-notice {
            background: #FFF8E6;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
            border-left: 3px solid #FFB020;
        }
        .sign-notice h4 { font-size: 13px; font-weight: 600; color: #D48806; margin-bottom: 4px; }
        .sign-notice p { font-size: 12px; color: #8C6120; line-height: 1.6; }
        .sign-party { background: var(--bg); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
        .sign-party h4 { font-size: 14px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; }
        .sign-party h4 svg { width: 16px; height: 16px; margin-right: 6px; color: var(--primary); }
        .sign-party-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--white); }
        .sign-party-item:last-child { border-bottom: none; }
        .sign-party-item .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;
        }
        .sign-party-item .avatar svg { width: 18px; height: 18px; color: var(--white); }
        .sign-party-item .info { flex: 1; }
        .sign-party-item .name { font-size: 14px; font-weight: 500; }
        .sign-party-item .role { font-size: 12px; color: var(--text3); }
        .sign-party-item .status { font-size: 12px; padding: 4px 10px; border-radius: 12px; }
        .sign-party-item .status.pending { background: #FFF2E8; color: #FF7A44; }
        .sign-party-item .status.done { background: var(--primary-light); color: var(--primary); }

        /* 签署方式选择 */
        .sign-method { margin-bottom: 16px; }
        .sign-method h4 { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
        .method-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .method-item {
            background: var(--bg);
            border-radius: 12px;
            padding: 16px 12px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        .method-item.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        .method-item svg { width: 32px; height: 32px; color: var(--text3); margin-bottom: 8px; }
        .method-item.active svg { color: var(--primary); }
        .method-item .label { font-size: 14px; font-weight: 500; display: block; }
        .method-item .sub { font-size: 11px; color: var(--text3); margin-top: 4px; display: block; }

        /* 意愿认证 */
        .verify-box { background: var(--bg); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
        .verify-box h4 { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
        .verify-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--white); }
        .verify-item:last-child { border-bottom: none; }
        .verify-item input[type="checkbox"] { width: 18px; height: 18px; margin-right: 10px; accent-color: var(--primary); cursor: pointer; }
        .verify-item label { font-size: 13px; color: var(--text2); cursor: pointer; flex: 1; }

        /* 确认签署按钮 */
        .btn-sign {
            display: block;
            width: calc(100% - 32px);
            margin: 0 16px 20px;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary), #5DD4C4);
            color: var(--white);
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(72,192,176,0.3);
        }
        .btn-sign:disabled {
            background: linear-gradient(135deg, #ccc, #bbb);
            box-shadow: none;
            cursor: not-allowed;
        }

        /* 手写签名弹窗 */
        .sign-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 300;
            display: none;
            flex-direction: column;
            justify-content: flex-end;
        }
        .sign-modal.active { display: flex; }
        .sign-modal .modal-content {
            background: var(--white);
            border-radius: 16px 16px 0 0;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
        }
        .sign-modal .modal-header {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--bg);
        }
        .sign-modal .modal-header h3 { font-size: 16px; font-weight: 600; }
        .sign-modal .modal-header .close {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .sign-modal .modal-header .close svg { width: 20px; height: 20px; color: var(--text3); }
        .sign-modal .modal-body { flex: 1; overflow-y: auto; padding: 16px; }

        /* 手写签名画布区域 */
        .sign-canvas-wrap {
            background: var(--white);
            border: 2px solid var(--primary);
            border-radius: 8px;
            margin-bottom: 16px;
        }
        .sign-canvas-wrap .canvas-tip {
            padding: 8px;
            text-align: center;
            font-size: 12px;
            color: var(--text3);
            border-bottom: 1px dashed var(--bg);
        }
        #signCanvas {
            width: 100%;
            height: 200px;
            display: block;
            touch-action: none;
        }
        .sign-actions {
            display: flex;
            gap: 10px;
        }
        .sign-actions .btn-clear {
            flex: 1;
            padding: 12px;
            background: var(--bg);
            color: var(--text);
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
        }
        .sign-actions .btn-confirm {
            flex: 2;
            padding: 12px;
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        /* 签署成功页 */
        .sign-success {
            text-align: center;
            padding: 60px 30px 30px;
        }
        .sign-success .icon-box {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #E8FFF0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }
        .sign-success .icon-box svg { width: 40px; height: 40px; color: #52C41A; }
        .sign-success h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: #52C41A; }
        .sign-success .desc { font-size: 14px; color: var(--text3); margin-bottom: 24px; }
        .sign-success .info-card {
            background: var(--bg);
            border-radius: 10px;
            padding: 16px;
            text-align: left;
            margin-bottom: 24px;
        }
        .sign-success .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--white);
        }
        .sign-success .info-row:last-child { border-bottom: none; }
        .sign-success .info-row .lb { color: var(--text3); font-size: 13px; }
        .sign-success .info-row .val { font-weight: 500; font-size: 13px; color: var(--text); }
        .sign-success .info-row .val.hash {
            font-size: 10px;
            color: var(--text2);
            word-break: break-all;
        }
        .btn-back {
            display: block;
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 24px;
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
        }

        /* 表单样式 */
        .form-group { padding: 12px 16px; }
        .form-group label { font-size: 13px; color: var(--text2); display: block; margin-bottom: 6px; }
        .form-group input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            background: var(--bg);
        }
        .form-group input:focus { border-color: var(--primary); }
        .btn-primary {
            display: block;
            width: calc(100% - 32px);
            margin: 20px 16px;
            padding: 12px;
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 8px;
            font-size: 15px;
            text-align: center;
            cursor: pointer;
        }

        .step-list { padding: 16px; }
        .step-item { display: flex; padding-bottom: 20px; position: relative; }
        .step-item::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 30px;
            bottom: 0;
            width: 1px;
            background: var(--bg);
        }
        .step-item:last-child::before { display: none; }
        .step-item .num {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 12px;
        }
        .step-item .content { flex: 1; }
        .step-item .content h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .step-item .content p { font-size: 12px; color: var(--text3); }

        .help-card { margin: 12px 16px; background: var(--bg); border-radius: 10px; padding: 14px; }
        .help-card h4 { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
        .help-card p { font-size: 12px; color: var(--text3); line-height: 1.6; }

        .template-list { padding: 12px 16px; }
        .template-item {
            background: var(--bg);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .template-item .t-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .template-item .t-desc { font-size: 12px; color: var(--text3); }
        .template-item .t-tag {
            display: inline-block;
            padding: 2px 8px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 11px;
            border-radius: 4px;
            margin-top: 6px;
        }

        /* 底部导航 */
        .nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 54px;
            background: var(--white);
            display: flex;
            border-top: 1px solid var(--bg);
            z-index: 100;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text3);
            cursor: pointer;
        }
        .nav-item.active { color: var(--primary); }
        .nav-item svg { width: 22px; height: 22px; }
        .nav-item span { font-size: 10px; margin-top: 1px; }

        .service {
            position: fixed;
            right: 16px;
            bottom: 70px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(72,192,176,0.4);
            z-index: 99;
        }
        .service svg { width: 20px; height: 20px; color: var(--white); }

        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.72);
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 13px;
            z-index: 400;
        }
    </style>
</head>
<body>
<div class="app">

    <!-- 首页 -->
    <div class="page active" id="pg-home">
        <div class="user-bar">
            <div class="avatar">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div class="info">
                <div class="name">点击登录</div>
                <div class="desc">登录后享受更多服务</div>
            </div>
            <button class="btn" onclick="openPage('pg-login')">登录/注册</button>
        </div>

        <div class="quick-section">
            <div class="main-card" onclick="openPage('pg-initiate')">
                <div class="top">
                    <div>
                        <div class="title">快速发起合同</div>
                        <div class="desc">选择模板，发起签署流程</div>
                    </div>
                    <div class="arrow">立即开始 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>
                </div>
            </div>
            <div class="sub-cards">
                <div class="sub-card" onclick="openPage('pg-template-detail')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2"/></svg>
                    <div class="title">合同模板库</div>
                    <div class="desc">多种模板任选</div>
                </div>
                <div class="sub-card" onclick="openPage('pg-upload')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5-5 5 5m-5-5v12"/></svg>
                    <div class="title">上传合同模板</div>
                    <div class="desc">自定义上传使用</div>
                </div>
            </div>
        </div>

        <div class="banner" onclick="openPage('pg-tutorial')">
            <div class="pic">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6M9 16h6M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div class="text">
                <div class="title">如何发起电子合同？</div>
                <div class="desc">从实名认证到合同签署，最快5分钟完成。支持个人、企业多种签署场景，合法有效！</div>
            </div>
            <div class="link">查看教程 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;margin-left:2px;"><path d="M9 18l6-6-6-6"/></svg></div>
        </div>

        <div class="stats">
            <div class="title">数据总览</div>
            <div class="row">
                <div class="item" onclick="openPage('pg-my-initiated')">
                    <div class="num">12</div>
                    <div class="lb">我发起的</div>
                </div>
                <div class="item" onclick="openPage('pg-pending')">
                    <div class="num red">3</div>
                    <div class="lb">待我签署</div>
                </div>
                <div class="item" onclick="openPage('pg-completed')">
                    <div class="num">156</div>
                    <div class="lb">签署完成</div>
                </div>
            </div>
        </div>

        <div class="tutorial">
            <div class="title">使用教程</div>
            <div class="tutorial-flow">
                <div class="flow-step">
                    <div class="flow-num">1</div>
                    <div class="flow-content">
                        <div class="flow-title">实名认证</div>
                        <div class="flow-desc">支持个人身份证认证和企业营业执照认证，通过人脸识别或银行四要素验证，确保签署人身份真实有效</div>
                    </div>
                </div>
                <div class="flow-step">
                    <div class="flow-num">2</div>
                    <div class="flow-content">
                        <div class="flow-title">选择/上传合同</div>
                        <div class="flow-desc">从海量合同模板库选择，或上传本地Word/PDF文件，系统自动识别合同内容</div>
                    </div>
                </div>
                <div class="flow-step">
                    <div class="flow-num">3</div>
                    <div class="flow-content">
                        <div class="flow-title">填写签署信息</div>
                        <div class="flow-desc">添加签署方信息，设置签署顺序和签署位置，支持多个签署方同时签署</div>
                    </div>
                </div>
                <div class="flow-step">
                    <div class="flow-num">4</div>
                    <div class="flow-content">
                        <div class="flow-title">发送并签署</div>
                        <div class="flow-desc">短信/邮件通知签署方，签署方在线手写签名或使用电子印章完成签署</div>
                    </div>
                </div>
                <div class="flow-step">
                    <div class="flow-num">5</div>
                    <div class="flow-content">
                        <div class="flow-title">自动存证</div>
                        <div class="flow-desc">签署完成自动上链存证，生成可信时间戳和哈希值，确保证据链完整</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tips-section">
            <div class="tips-title">平台优势</div>
            <div class="tips-grid">
                <div class="tips-card">
                    <div class="tips-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
                    <div class="tips-card-title">安全可靠</div>
                    <div class="tips-card-desc">采用RSA2048加密算法，数字签名技术确保合同不可篡改</div>
                </div>
                <div class="tips-card">
                    <div class="tips-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
                    <div class="tips-card-title">法律有效</div>
                    <div class="tips-card-desc">自动存证上链，司法机构认可，具备完整法律效力</div>
                </div>
                <div class="tips-card">
                    <div class="tips-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
                    <div class="tips-card-title">高效便捷</div>
                    <div class="tips-card-desc">随时随地签署，无需纸质打印，快递递送，最快5分钟完成</div>
                </div>
                <div class="tips-card">
                    <div class="tips-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
                    <div class="tips-card-title">管理方便</div>
                    <div class="tips-card-desc">合同云端存储，分类管理，支持一键搜索、下载和打印</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 签署页 -->
    <div class="page" id="pg-sign">
        <div class="sign-header">
            <span class="tag">企业版</span>
            <div class="switch">切换身份 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
        </div>
        <div class="tabs">
            <div class="tab active" onclick="switchTab(this)">全部<span class="count">28</span></div>
            <div class="tab" onclick="switchTab(this)">我发起的<span class="count">12</span></div>
            <div class="tab" onclick="switchTab(this)">待我签署<span class="count">3</span></div>
            <div class="tab" onclick="switchTab(this)">签署完成<span class="count">13</span></div>
        </div>
        <div class="list">
            <div class="contract-item" onclick="openContractDetail(0); closePage('pg-sign');">
                <div class="top">
                    <div class="name">软件采购合同</div>
                    <span class="status wait">待签署</span>
                </div>
                <div class="meta">华为技术有限公司 · 2026-05-25到期</div>
            </div>
            <div class="contract-item" onclick="openContractDetail(1); closePage('pg-sign');">
                <div class="top">
                    <div class="name">办公室租赁合同</div>
                    <span class="status wait">待签署</span>
                </div>
                <div class="meta">深圳市星河物业 · 2026-05-28到期</div>
            </div>
            <div class="contract-item" onclick="openContractDetail(2); closePage('pg-sign');">
                <div class="top">
                    <div class="name">年度审计服务协议</div>
                    <span class="status signed">已签署</span>
                </div>
                <div class="meta">立信会计师事务所 · 2026-05-20</div>
            </div>
        </div>
    </div>

    <!-- 模板页 -->
    <div class="page" id="pg-template">
        <div class="header"><h2>合同模板</h2></div>
        <div class="search-bar">
            <div class="search-input">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                <input type="text" placeholder="搜索合同模板">
            </div>
        </div>
        <div class="func-cards">
            <div class="func-card blue" onclick="openPage('pg-custom')">
                <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M12 18v-6m-3 3l3-3 3 3"/></svg></div>
                <div class="title">定制合同</div>
                <div class="desc">一键生成专属合同</div>
            </div>
            <div class="func-card green" onclick="toast('下载记录')">
                <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5-5 5 5m-5-5v12"/></svg></div>
                <div class="title">下载记录</div>
                <div class="desc">查看历史下载模板</div>
            </div>
        </div>
        <div class="category">
            <div class="title">合同分类</div>
            <div class="grid">
                <div class="item" onclick="openPage('pg-template-list')">
                    <div class="icon" style="background: linear-gradient(135deg, #3B9BF5, #6BC1F7);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 21h18M5 21V7l8-4 8 4v14M9 21v-6h6v6"/></svg></div>
                    <div class="name">租房</div>
                </div>
                <div class="item" onclick="openPage('pg-template-list')">
                    <div class="icon" style="background: linear-gradient(135deg, #52C41A, #73D13D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
                    <div class="name">劳动</div>
                </div>
                <div class="item" onclick="openPage('pg-template-list')">
                    <div class="icon" style="background: linear-gradient(135deg, #FAAD14, #FFC53D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18M16 10a4 4 0 01-8 0"/></svg></div>
                    <div class="name">买卖</div>
                </div>
                <div class="item" onclick="openPage('pg-template-list')">
                    <div class="icon" style="background: linear-gradient(135deg, #F5222D, #FF7875);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg></div>
                    <div class="name">借贷</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 我的页 -->
    <div class="page" id="pg-me">
        <div class="header"><h2>我的</h2></div>
        <div class="user-bar" style="border-bottom: none;">
            <div class="avatar" style="background: var(--primary);">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--white)" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div class="info">
                <div class="name">李明</div>
                <div class="desc">138****8888</div>
            </div>
        </div>
        <div class="menu-list">
            <div class="menu-item" onclick="openPage('pg-auth')">
                <div class="icon" style="background: linear-gradient(135deg, #52C41A, #73D13D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
                <div class="text">企业认证</div>
                <span class="badge">已认证</span>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="openPage('pg-seal')">
                <div class="icon" style="background: linear-gradient(135deg, #3B9BF5, #6BC1F7);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg></div>
                <div class="text">印章管理</div>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="openPage('pg-signature')">
                <div class="icon" style="background: linear-gradient(135deg, #722ED1, #9254DE);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg></div>
                <div class="text">签名管理</div>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="openPage('pg-contacts')">
                <div class="icon" style="background: linear-gradient(135deg, #FAAD14, #FFC53D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
                <div class="text">联系人管理</div>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="openPage('pg-record')">
                <div class="icon" style="background: linear-gradient(135deg, var(--primary), #5DD4C4);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
                <div class="text">签署记录</div>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item">
                <div class="icon" style="background: linear-gradient(135deg, #666, #999);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg></div>
                <div class="text">系统设置</div>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="nav">
        <div class="nav-item active" onclick="go('pg-home')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
            <span>首页</span>
        </div>
        <div class="nav-item" onclick="go('pg-sign')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
            <span>签署</span>
        </div>
        <div class="nav-item" onclick="go('pg-template')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2"/></svg>
            <span>合同模板</span>
        </div>
        <div class="nav-item" onclick="go('pg-me')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            <span>我的</span>
        </div>
    </div>

    <!-- 客服 -->
    <div class="service">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/></svg>
    </div>

    <!-- ===== 二级页面 ===== -->

    <!-- 登录页 -->
    <div class="detail-page" id="pg-login">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-login')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>登录/注册</h2>
        </div>
        <div class="detail-body">
            <div class="form-group">
                <label>手机号</label>
                <input type="tel" placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label>验证码</label>
                <input type="text" placeholder="请输入验证码">
            </div>
            <button class="btn-primary" onclick="toast('登录成功')">登录</button>
        </div>
    </div>

    <!-- 发起合同页 -->
    <div class="detail-page" id="pg-initiate">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-initiate')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>发起合同</h2>
        </div>
        <div class="detail-body">
            <div class="help-card">
                <h4>选择合同模板</h4>
                <p>从模板库选择适合您业务的合同模板，填写关键信息后发起签署。</p>
            </div>
            <div class="template-list">
                <div class="template-item">
                    <div class="t-title">采购合同模板</div>
                    <div class="t-desc">适用于商品采购业务场景</div>
                    <span class="t-tag">热门</span>
                </div>
                <div class="template-item">
                    <div class="t-title">销售合同模板</div>
                    <div class="t-desc">适用于产品销售业务场景</div>
                </div>
                <div class="template-item">
                    <div class="t-title">劳动合同模板</div>
                    <div class="t-desc">适用于员工雇佣关系</div>
                </div>
                <div class="template-item">
                    <div class="t-title">租赁合同模板</div>
                    <div class="t-desc">适用于场地/设备租赁</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 合同模板库详情 -->
    <div class="detail-page" id="pg-template-detail">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-template-detail')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>合同模板库</h2>
        </div>
        <div class="detail-body">
            <div class="category" style="border-top: none; padding-top: 12px;">
                <div class="title">全部模板</div>
                <div class="grid">
                    <div class="item"><div class="icon" style="background: linear-gradient(135deg, #3B9BF5, #6BC1F7);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 21h18M5 21V7l8-4 8 4v14"/></svg></div><div class="name">租房</div></div>
                    <div class="item"><div class="icon" style="background: linear-gradient(135deg, #52C41A, #73D13D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/></svg></div><div class="name">劳动</div></div>
                    <div class="item"><div class="icon" style="background: linear-gradient(135deg, #FAAD14, #FFC53D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/></svg></div><div class="name">买卖</div></div>
                    <div class="item"><div class="icon" style="background: linear-gradient(135deg, #F5222D, #FF7875);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg></div><div class="name">借贷</div></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传模板页 -->
    <div class="detail-page" id="pg-upload">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-upload')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>上传合同模板</h2>
        </div>
        <div class="detail-body">
            <div class="help-card">
                <h4>上传说明</h4>
                <p>支持上传PDF、Word格式的合同模板文件，系统将自动识别可填写字段。</p>
            </div>
            <div class="form-group" style="padding: 20px 16px;">
                <div style="border: 2px dashed var(--bg); border-radius: 10px; padding: 40px; text-align: center; cursor: pointer;">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--text3)" stroke-width="1.5" style="margin-bottom: 10px;"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5-5 5 5m-5-5v12"/></svg>
                    <p style="color: var(--text3); font-size: 13px;">点击上传文件</p>
                </div>
            </div>
            <button class="btn-primary" onclick="toast('上传成功')">确认上传</button>
        </div>
    </div>

    <!-- 教程详情页 -->
    <div class="detail-page" id="pg-tutorial">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-tutorial')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>如何发起电子合同</h2>
        </div>
        <div class="detail-body">
            <div class="guide-intro">
                <div class="guide-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
                <div class="guide-intro-text">电子合同与纸质合同具有同等法律效力，采用数字签名技术，确保签署人身份真实、合同内容不可篡改。整个签署流程线上完成，最快5分钟即可完成。</div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">1</span>注册登录</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
                        <div class="guide-item-text">打开APP，点击"登录/注册"按钮</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg></div>
                        <div class="guide-item-text">输入手机号，获取并填写短信验证码</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 13l4 4L19 7"/></svg></div>
                        <div class="guide-item-text">验证通过即完成注册，自动登录账号</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">2</span>实名认证</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/></svg></div>
                        <div class="guide-item-text">进入"我的"页面，点击"企业认证"</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
                        <div class="guide-item-text">提交企业营业执照、法人身份信息</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></div>
                        <div class="guide-item-text">完成人脸识别验证，等待审核（1-3个工作日）</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">3</span>选择/上传合同</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
                        <div class="guide-item-text">进入"合同模板"页面，选择适合的合同模板</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg></div>
                        <div class="guide-item-text">或点击"上传合同模板"，上传Word/PDF文件</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></div>
                        <div class="guide-item-text">系统自动识别可填写字段，生成合同草稿</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">4</span>填写签署信息</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
                        <div class="guide-item-text">添加签署方信息（甲方、乙方及更多签署方）</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
                        <div class="guide-item-text">设置签署截止日期和签署顺序</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/></svg></div>
                        <div class="guide-item-text">拖拽签署位置，确定签名/盖章的具体位置</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">5</span>发送并签署</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg></div>
                        <div class="guide-item-text">点击"发送签署"，系统自动发送短信/邮件通知签署方</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg></div>
                        <div class="guide-item-text">签署方收到通知后，点击链接查看合同并进行手写签名</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
                        <div class="guide-item-text">所有签署方完成签署后，合同生效</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-section">
                <div class="guide-title"><span class="guide-num">6</span>自动存证</div>
                <div class="guide-content">
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
                        <div class="guide-item-text">签署完成自动生成合同PDF文件，可下载保存</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
                        <div class="guide-item-text">合同内容哈希值自动上链存证，生成可信时间戳</div>
                    </div>
                    <div class="guide-item">
                        <div class="guide-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
                        <div class="guide-item-text">如需维权，可申请出具电子证据报告，具有法律效力</div>
                    </div>
                </div>
            </div>
            
            <div class="guide-tip">
                <div class="guide-tip-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
                <div class="guide-tip-text">整个流程纯线上完成，无需打印、快递、存档，省时省力又省钱！</div>
            </div>
        </div>
    </div>

    <!-- 我发起的列表 -->
    <div class="detail-page" id="pg-my-initiated">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-my-initiated')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>我发起的</h2>
        </div>
        <div class="detail-body">
            <div class="list">
                <div class="contract-item"><div class="top"><div class="name">软件开发合同</div><span class="status wait">签署中</span></div><div class="meta">字节跳动科技 · 2026-05-18</div></div>
                <div class="contract-item"><div class="top"><div class="name">市场推广服务合同</div><span class="status done">已完成</span></div><div class="meta">美团商业集团 · 2026-05-15</div></div>
            </div>
        </div>
    </div>

    <!-- 待我签署列表 -->
    <div class="detail-page" id="pg-pending">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-pending')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>待我签署</h2>
        </div>
        <div class="detail-body">
            <div class="list">
                <div class="contract-item" onclick="openContractDetail(0); closePage('pg-pending');"><div class="top"><div class="name">软件采购合同</div><span class="status wait">待签署</span></div><div class="meta">华为技术有限公司 · 2026-05-25到期</div></div>
                <div class="contract-item" onclick="openContractDetail(1); closePage('pg-pending');"><div class="top"><div class="name">办公室租赁合同</div><span class="status wait">待签署</span></div><div class="meta">深圳市星河物业 · 2026-05-28到期</div></div>
                <div class="contract-item" onclick="openContractDetail(3); closePage('pg-pending');"><div class="top"><div class="name">战略合作框架协议</div><span class="status wait">待签署</span></div><div class="meta">腾讯云计算 · 2026-05-26到期</div></div>
            </div>
        </div>
    </div>

    <!-- 签署完成列表 -->
    <div class="detail-page" id="pg-completed">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-completed')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>签署完成</h2>
        </div>
        <div class="detail-body">
            <div class="list">
                <div class="contract-item" onclick="openContractDetail(2); closePage('pg-completed');"><div class="top"><div class="name">年度审计服务协议</div><span class="status signed">已签署</span></div><div class="meta">立信会计师事务所 · 2026-05-20</div></div>
                <div class="contract-item" onclick="openContractDetail(2); closePage('pg-completed');"><div class="top"><div class="name">软件开发合同</div><span class="status signed">已签署</span></div><div class="meta">字节跳动科技 · 2026-05-18</div></div>
                <div class="contract-item" onclick="openContractDetail(2); closePage('pg-completed');"><div class="top"><div class="name">设备采购订单</div><span class="status signed">已签署</span></div><div class="meta">京东物流 · 2026-05-10</div></div>
            </div>
        </div>
    </div>

    <!-- 实名认证教程 -->
    <div class="detail-page" id="pg-auth-guide">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-auth-guide')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>实名认证</h2>
        </div>
        <div class="detail-body">
            <div class="step-list">
                <div class="step-item"><div class="num">1</div><div class="content"><h4>选择认证类型</h4><p>个人用户或企业用户选择对应的认证类型</p></div></div>
                <div class="step-item"><div class="num">2</div><div class="content"><h4>提交认证信息</h4><p>个人：身份证信息；企业：营业执照等资质</p></div></div>
                <div class="step-item"><div class="num">3</div><div class="content"><h4>人脸识别验证</h4><p>通过人脸识别确认身份真实性</p></div></div>
                <div class="step-item"><div class="num">4</div><div class="content"><h4>等待审核</h4><p>提交后1-3个工作日内完成审核</p></div></div>
            </div>
        </div>
    </div>

    <!-- 签署流程教程 -->
    <div class="detail-page" id="pg-sign-guide">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-sign-guide')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>签署流程</h2>
        </div>
        <div class="detail-body">
            <div class="step-list">
                <div class="step-item"><div class="num">1</div><div class="content"><h4>收到签署通知</h4><p>收到签署邀请短信/推送通知</p></div></div>
                <div class="step-item"><div class="num">2</div><div class="content"><h4>查阅合同内容</h4><p>查看并确认合同条款内容</p></div></div>
                <div class="step-item"><div class="num">3</div><div class="content"><h4>身份验证</h4><p>进行人脸识别或短信验证</p></div></div>
                <div class="step-item"><div class="num">4</div><div class="content"><h4>手写签名/盖章</h4><p>手写签名或选择电子印章</p></div></div>
                <div class="step-item"><div class="num">5</div><div class="content"><h4>完成签署</h4><p>确认签署意愿并完成操作</p></div></div>
            </div>
        </div>
    </div>

    <!-- 合同详情页 -->
    <div class="detail-page" id="pg-contract-detail">
        <div class="detail-header">
            <div class="back" onclick="goBackFromDetail()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>合同详情</h2>
            <div style="width:30px;"></div>
        </div>
        <div class="detail-body">
            <div class="contract-detail">
                <!-- 合同状态卡片 -->
                <div class="status-banner" id="detail-status-banner">
                    <div class="status-icon wait"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
                    <div class="status-text">
                        <div class="status-title" id="detail-status-title">待签署</div>
                        <div class="status-desc" id="detail-status-desc">请在截止日期前完成签署</div>
                    </div>
                </div>

                <!-- 基本信息 -->
                <div class="detail-card">
                    <h4>基本信息</h4>
                    <div class="row"><span class="lb">合同编号</span><span class="val" id="detail-num">HT2026050001</span></div>
                    <div class="row"><span class="lb">合同名称</span><span class="val" id="detail-name">软件采购合同</span></div>
                    <div class="row"><span class="lb">发起时间</span><span class="val" id="detail-date">2026-05-18</span></div>
                    <div class="row"><span class="lb">截止时间</span><span class="val" id="detail-expire" style="color:#FF7A44;">2026-05-25</span></div>
                </div>

                <!-- 金额信息 -->
                <div class="detail-card">
                    <h4>金额信息</h4>
                    <div class="row"><span class="lb">合同金额</span><span class="val" id="detail-amount" style="color:#FF4A4A;font-size:16px;font-weight:600;">¥500,000.00</span></div>
                    <div class="row"><span class="lb">付款方式</span><span class="val" id="detail-payment">分期付款</span></div>
                    <div class="row"><span class="lb">服务期限</span><span class="val" id="detail-period">12个月</span></div>
                    <div class="row"><span class="lb">签订日期</span><span class="val" id="detail-sign-date">待签订</span></div>
                </div>

                <!-- 签署方信息 -->
                <div class="detail-card">
                    <h4>签署方信息</h4>
                    <div class="party-item" style="margin-bottom:12px;">
                        <div class="party-icon" style="background:linear-gradient(135deg, #3B9BF5, #6BC1F7);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
                        <div class="party-info">
                            <div class="party-name" id="detail-partyA">云签科技有限公司</div>
                            <div class="party-role">甲方</div>
                            <div class="party-status done" id="partyA-status"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;"><path d="M9 12l2 2 4-4"/></svg> 已签署 · 2026-05-18</div>
                        </div>
                    </div>
                    <div class="party-item">
                        <div class="party-icon" style="background:linear-gradient(135deg, #FAAD14, #FFC53D);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
                        <div class="party-info">
                            <div class="party-name" id="detail-partyB">华为技术有限公司</div>
                            <div class="party-role">乙方</div>
                            <div class="party-status pending" id="partyB-status"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;"><circle cx="12" cy="12" r="10"/></svg> 待签署</div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-btns">
                    <div class="action-btn" onclick="openContractContent()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <span>查看正文</span>
                    </div>
                    <div class="action-btn" onclick="toast('下载中...')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"/></svg>
                        <span>下载合同</span>
                    </div>
                    <div class="action-btn" onclick="toast('打印预览中...')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                        <span>打印</span>
                    </div>
                </div>

                <!-- 附件信息 -->
                <div class="detail-card">
                    <h4>合同附件 <span style="font-size:12px;color:var(--text3);font-weight:400;">（2个）</span></h4>
                    <div class="attach-item" onclick="toast('预览附件中...')">
                        <div class="attach-icon" style="background:#E6F7FF;color:#1890FF;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
                        <div class="attach-info">
                            <div class="attach-name">软件采购清单.xlsx</div>
                            <div class="attach-size">23.5 KB</div>
                        </div>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;color:var(--text3);"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                    <div class="attach-item" onclick="toast('预览附件中...')">
                        <div class="attach-icon" style="background:#FFF7E6;color:#FAAD14;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
                        <div class="attach-info">
                            <div class="attach-name">技术方案.pdf</div>
                            <div class="attach-size">1.2 MB</div>
                        </div>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;color:var(--text3);"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                </div>

                <!-- 签署按钮 - 根据状态显示 -->
                <button class="btn-sign" id="btn-sign-contract" onclick="startSignProcess()">立即签署</button>
            </div>
        </div>
    </div>

    <!-- 合同正文页 -->
    <div class="detail-page" id="pg-contract-view">
        <div class="detail-header">
            <div class="back" onclick="backToContractDetail()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>合同正文</h2>
            <div style="width:30px;"></div>
        </div>
        <div class="detail-body">
            <div class="contract-content">
                <div class="doc-header">
                    <div class="doc-title" id="view-title">软件采购合同</div>
                    <div class="doc-num" id="view-num">合同编号：HT2026050001</div>
                </div>
                <div class="chapter">
                    <div class="chapter-title">第一章 总则</div>
                    <div class="article">
                        <div class="article-title">第一条 合同目的</div>
                        <div class="article-content">为保护合同当事人的合法权益，维护社会经济秩序，促进社会主义现代化建设，特制定本协议。</div>
                    </div>
                    <div class="article">
                        <div class="article-title">第二条 合同依据</div>
                        <div class="article-content">根据《中华人民共和国民法典》及相关法律法规的规定，甲乙双方经友好协商，达成如下协议。</div>
                    </div>
                </div>
                <div class="chapter">
                    <div class="chapter-title">第二章 商品信息</div>
                    <div class="article">
                        <div class="article-title">第三条 商品清单</div>
                        <div class="article-content">甲方向乙方采购以下软件产品及服务，具体明细见附件《软件采购清单》。</div>
                    </div>
                    <div class="article">
                        <div class="article-title">第四条 合同总价</div>
                        <div class="article-content">本合同总价为人民币大写：伍拾万元整（¥500,000.00元），此价格为含税价。</div>
                    </div>
                </div>
                <div class="chapter">
                    <div class="chapter-title">第三章 交付与验收</div>
                    <div class="article">
                        <div class="article-title">第五条 交付时间</div>
                        <div class="article-content">乙方应于合同签订后30个工作日内完成软件产品的交付，并提供相关技术文档。</div>
                    </div>
                    <div class="article">
                        <div class="article-title">第六条 验收标准</div>
                        <div class="article-content">软件产品交付后，甲乙双方应按照合同约定的功能清单进行验收，验收合格后签署验收报告。</div>
                    </div>
                </div>
                <div class="sign-area">
                    <div class="sign-row"><span class="sign-label">甲方（盖章）：</span><span class="sign-value" id="view-partyA">云签科技有限公司</span></div>
                    <div class="sign-row"><span class="sign-label">法定代表人：</span><span class="sign-value">张明</span></div>
                    <div class="sign-row"><span class="sign-label">签署日期：</span><span class="sign-value">2026年5月18日</span></div>
                    <div class="sign-block">
                        <div class="sign-block-item">
                            <div class="sign-placeholder signed" id="sign-area-A">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/></svg>
                                <span class="sign-text">已签署</span>
                            </div>
                            <div class="sign-label">甲方签章</div>
                        </div>
                        <div class="sign-block-item">
                            <div class="sign-placeholder" id="sign-area-B" onclick="startSignProcess()">点击签署</div>
                            <div class="sign-label">乙方签章</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 签署流程页 -->
    <div class="detail-page" id="pg-sign-process">
        <div class="detail-header">
            <div class="back" onclick="backFromSignProcess()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>在线签署</h2>
            <div style="width:30px;"></div>
        </div>
        <div class="detail-body">
            <div class="sign-flow">
                <div class="sign-notice">
                    <h4>温馨提示</h4>
                    <p>签署前请仔细阅读合同内容，确认无误后再进行签署。签署完成后合同将自动存证上链，具有法律效力。</p>
                </div>

                <div class="sign-party">
                    <h4>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                        合同签署方
                    </h4>
                    <div class="sign-party-item">
                        <div class="avatar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
                        <div class="info"><div class="name" id="sp-partyA">云签科技</div><div class="role">甲方 · 已签署</div></div>
                        <span class="status done">已完成</span>
                    </div>
                    <div class="sign-party-item">
                        <div class="avatar" style="background: var(--text3);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
                        <div class="info"><div class="name" id="sp-partyB">华为技术有限公司</div><div class="role">乙方 · 待签署</div></div>
                        <span class="status pending">待签署</span>
                    </div>
                </div>

                <div class="sign-method">
                    <h4>选择签署方式</h4>
                    <div class="method-list">
                        <div class="method-item active" id="method-handwrite" onclick="selectSignMethod('handwrite')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            <span class="label">手写签名</span>
                            <span class="sub">在屏幕上手写</span>
                        </div>
                        <div class="method-item" id="method-seal" onclick="selectSignMethod('seal')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
                            <span class="label">电子印章</span>
                            <span class="sub">使用已认证印章</span>
                        </div>
                    </div>
                </div>

                <div class="verify-box">
                    <h4>意愿认证</h4>
                    <div class="verify-item">
                        <input type="checkbox" id="verify-consent" onchange="updateSignBtn()">
                        <label for="verify-consent">本人知情并同意签署本合同</label>
                    </div>
                    <div class="verify-item">
                        <input type="checkbox" id="verify-identity" onchange="updateSignBtn()">
                        <label for="verify-identity">已完成身份验证</label>
                    </div>
                </div>

                <button class="btn-sign" id="btn-start-sign" onclick="openSignModal()" disabled>开始签署</button>
            </div>
        </div>
    </div>

    <!-- 签署成功页 -->
    <div class="detail-page" id="pg-sign-success">
        <div class="detail-header">
            <div class="back" onclick="closeSuccessAndGoHome()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>签署完成</h2>
            <div style="width:30px;"></div>
        </div>
        <div class="detail-body">
            <div class="sign-success">
                <div class="icon-box">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h3>签署成功</h3>
                <p class="desc">合同已签署完成并自动存证上链</p>
                <div class="info-card">
                    <div class="info-row"><span class="lb">合同名称</span><span class="val" id="success-name">软件采购合同</span></div>
                    <div class="info-row"><span class="lb">签署时间</span><span class="val" id="success-time">2026-05-25 10:40:04</span></div>
                    <div class="info-row"><span class="lb">存证哈希</span><span class="val hash" id="success-hash">0x7f3e8a9b2c1d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a</span></div>
                </div>
                <button class="btn-back" onclick="closeSuccessAndGoHome()">返回首页</button>
            </div>
        </div>
    </div>

    <!-- 印章管理 -->
    <div class="detail-page" id="pg-seal">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-seal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>印章管理</h2>
        </div>
        <div class="detail-body">
            <div class="contract-detail">
                <div class="detail-card">
                    <h4>企业印章</h4>
                    <div class="row"><span class="lb">公章</span><span class="val" style="color: #52C41A;">使用中</span></div>
                    <div class="row"><span class="lb">合同专用章</span><span class="val" style="color: #52C41A;">使用中</span></div>
                    <div class="row"><span class="lb">财务章</span><span class="val" style="color: var(--text3);">已停用</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 签名管理 -->
    <div class="detail-page" id="pg-signature">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-signature')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>签名管理</h2>
        </div>
        <div class="detail-body">
            <div class="contract-detail">
                <div class="detail-card">
                    <h4>我的手写签名</h4>
                    <div class="row"><span class="lb">状态</span><span class="val" style="color: #52C41A;">默认签名</span></div>
                    <div class="row"><span class="lb">创建时间</span><span class="val">2026-03-15</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 联系人管理 -->
    <div class="detail-page" id="pg-contacts">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-contacts')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>联系人管理</h2>
        </div>
        <div class="detail-body">
            <div class="list">
                <div class="contract-item"><div class="top"><div class="name">张伟</div></div><div class="meta">华为技术有限公司</div></div>
                <div class="contract-item"><div class="top"><div class="name">王芳</div></div><div class="meta">深圳市星河物业</div></div>
                <div class="contract-item"><div class="top"><div class="name">刘强</div></div><div class="meta">京东物流</div></div>
            </div>
        </div>
    </div>

    <!-- 签署记录 -->
    <div class="detail-page" id="pg-record">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-record')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>签署记录</h2>
        </div>
        <div class="detail-body">
            <div class="list">
                <div class="contract-item"><div class="top"><div class="name">软件开发合同</div><span class="status signed">已完成</span></div><div class="meta">2026-05-18 · 字节跳动科技</div></div>
                <div class="contract-item"><div class="top"><div class="name">年度审计服务协议</div><span class="status signed">已完成</span></div><div class="meta">2026-05-20 · 立信会计师事务所</div></div>
            </div>
        </div>
    </div>

    <!-- 企业认证 -->
    <div class="detail-page" id="pg-auth">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-auth')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>企业认证</h2>
        </div>
        <div class="detail-body">
            <div class="contract-detail">
                <div class="detail-card">
                    <h4>认证状态</h4>
                    <div class="row"><span class="lb">企业名称</span><span class="val">深圳市云签科技有限公司</span></div>
                    <div class="row"><span class="lb">统一信用代码</span><span class="val">91440300MA5XXXXXX</span></div>
                    <div class="row"><span class="lb">认证状态</span><span class="val" style="color: #52C41A;">已认证</span></div>
                    <div class="row"><span class="lb">认证时间</span><span class="val">2026-01-15</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模板列表 -->
    <div class="detail-page" id="pg-template-list">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-template-list')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>租房合同模板</h2>
        </div>
        <div class="detail-body">
            <div class="template-list">
                <div class="template-item"><div class="t-title">房屋租赁合同（范本）</div><div class="t-desc">标准商业/住宅租赁合同模板</div><span class="t-tag">标准</span></div>
                <div class="template-item"><div class="t-title">商铺租赁合同</div><div class="t-desc">适用于商铺、店面租赁场景</div></div>
                <div class="template-item"><div class="t-title">写字楼租赁合同</div><div class="t-desc">适用于办公室、写字楼租赁</div></div>
                <div class="template-item"><div class="t-title">设备租赁合同</div><div class="t-desc">适用于机械设备租赁场景</div></div>
            </div>
        </div>
    </div>

    <!-- 定制合同 -->
    <div class="detail-page" id="pg-custom">
        <div class="detail-header">
            <div class="back" onclick="closePage('pg-custom')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg></div>
            <h2>定制合同</h2>
        </div>
        <div class="detail-body">
            <div class="help-card">
                <h4>智能生成合同</h4>
                <p>填写您的需求，系统将智能生成专属合同文本。您可以进一步编辑和完善合同内容。</p>
            </div>
            <div class="form-group">
                <label>合同类型</label>
                <input type="text" placeholder="如：软件开发合同" style="background: var(--bg);">
            </div>
            <div class="form-group">
                <label>合同金额</label>
                <input type="text" placeholder="请输入合同金额">
            </div>
            <div class="form-group">
                <label>甲方名称</label>
                <input type="text" placeholder="请输入甲方名称">
            </div>
            <div class="form-group">
                <label>乙方名称</label>
                <input type="text" placeholder="请输入乙方名称">
            </div>
            <button class="btn-primary" onclick="toast('生成成功')">生成合同</button>
        </div>
    </div>

</div>

<!-- 手写签名弹窗 -->
<div class="sign-modal" id="signModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>请手写签名</h3>
            <div class="close" onclick="closeSignModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg>
            </div>
        </div>
        <div class="modal-body">
            <div class="sign-canvas-wrap">
                <div class="canvas-tip">请在下方区域内手写您的签名</div>
                <canvas id="signCanvas"></canvas>
            </div>
            <div class="sign-actions">
                <button class="btn-clear" onclick="clearCanvas()">清除</button>
                <button class="btn-confirm" onclick="confirmSign()">确认签名</button>
            </div>
        </div>
    </div>
</div>

<script>
// 合同数据
var contracts = [
    { id: 'HT2026050001', name: '软件采购合同', partyA: '云签科技', partyB: '华为技术有限公司', date: '2026-05-18', expire: '2026-05-25', status: 'pending' },
    { id: 'HT2026050002', name: '办公室租赁合同', partyA: '云签科技', partyB: '深圳市星河物业', date: '2026-05-15', expire: '2026-05-28', status: 'pending' },
    { id: 'HT2026050003', name: '年度审计服务协议', partyA: '云签科技', partyB: '立信会计师事务所', date: '2026-05-10', expire: '-', status: 'signed' },
    { id: 'HT2026050004', name: '战略合作框架协议', partyA: '云签科技', partyB: '腾讯云计算', date: '2026-05-20', expire: '2026-05-26', status: 'pending' }
];

var currentContract = null;
var selectedMethod = 'handwrite';
var canvas, ctx;
var isDrawing = false;

// 页面切换
function go(id) {
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    document.getElementById(id).classList.add('active');
    document.querySelectorAll('.nav-item').forEach((n, i) => {
        n.classList.toggle('active', ['pg-home','pg-sign','pg-template','pg-me'].indexOf(id) === i);
    });
    window.scrollTo(0, 0);
}

function openPage(id) {
    document.getElementById(id).classList.add('active');
}

function closePage(id) {
    document.getElementById(id).classList.remove('active');
}

function switchTab(el) {
    el.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

function toast(msg) {
    var t = document.createElement('div');
    t.className = 'toast';
    t.textContent = msg;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 1500);
}

// 从合同详情页返回
function goBackFromDetail() {
    closePage('pg-contract-detail');
}

// 打开合同详情
function openContractDetail(index) {
    currentContract = contracts[index];
    document.getElementById('detail-num').textContent = currentContract.id;
    document.getElementById('detail-name').textContent = currentContract.name;
    document.getElementById('detail-date').textContent = currentContract.date;
    document.getElementById('detail-expire').textContent = currentContract.expire;
    document.getElementById('detail-partyA').textContent = currentContract.partyA;
    document.getElementById('detail-partyB').textContent = currentContract.partyB;
    
    var statusBanner = document.getElementById('detail-status-banner');
    var btnEl = document.getElementById('btn-sign-contract');
    
    if (currentContract.status === 'signed') {
        document.getElementById('detail-status-title').textContent = '已签署完成';
        document.getElementById('detail-status-desc').textContent = '合同已签署完成，具有法律效力';
        statusBanner.classList.add('signed');
        statusBanner.style.background = 'linear-gradient(135deg, #E8FFF0, #D6FFE8)';
        document.getElementById('partyB-status').innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;"><path d="M9 12l2 2 4-4"/></svg> 已签署 · 2026-05-25';
        document.getElementById('partyB-status').className = 'party-status done';
        document.getElementById('detail-sign-date').textContent = '2026-05-25';
        btnEl.style.display = 'none';
    } else {
        document.getElementById('detail-status-title').textContent = '待签署';
        document.getElementById('detail-status-desc').textContent = '请在截止日期前完成签署';
        statusBanner.classList.remove('signed');
        statusBanner.style.background = 'linear-gradient(135deg, #FFF2E8, #FFE7D6)';
        document.getElementById('partyB-status').innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;"><circle cx="12" cy="12" r="10"/></svg> 待签署';
        document.getElementById('partyB-status').className = 'party-status pending';
        document.getElementById('detail-sign-date').textContent = '待签订';
        btnEl.style.display = 'block';
    }
    
    // 更新合同正文页
    document.getElementById('view-title').textContent = currentContract.name;
    document.getElementById('view-num').textContent = '合同编号：' + currentContract.id;
    document.getElementById('view-partyA').textContent = currentContract.partyA;
    
    // 更新签署流程页
    document.getElementById('sp-partyA').textContent = currentContract.partyA;
    document.getElementById('sp-partyB').textContent = currentContract.partyB;
    
    openPage('pg-contract-detail');
}

// 查看合同正文
function openContractContent() {
    if (!currentContract) return;
    closePage('pg-contract-detail');
    openPage('pg-contract-view');
}

// 返回合同详情页
function backToContractDetail() {
    closePage('pg-contract-view');
    openPage('pg-contract-detail');
}

// 返回上一页（从签署流程返回）
function backFromSignProcess() {
    closePage('pg-sign-process');
    // 返回合同详情页
    openPage('pg-contract-detail');
}

// 开始签署流程
function startSignProcess() {
    closePage('pg-contract-detail');
    closePage('pg-contract-view');
    
    // 重置签署流程页
    document.getElementById('verify-consent').checked = false;
    document.getElementById('verify-identity').checked = false;
    document.getElementById('btn-start-sign').disabled = true;
    selectSignMethod('handwrite');
    
    openPage('pg-sign-process');
}

// 选择签署方式
function selectSignMethod(method) {
    selectedMethod = method;
    document.getElementById('method-handwrite').classList.toggle('active', method === 'handwrite');
    document.getElementById('method-seal').classList.toggle('active', method === 'seal');
}

// 更新签署按钮状态
function updateSignBtn() {
    var consent = document.getElementById('verify-consent').checked;
    var identity = document.getElementById('verify-identity').checked;
    document.getElementById('btn-start-sign').disabled = !(consent && identity);
}

// 打开手写签名弹窗
function openSignModal() {
    document.getElementById('signModal').classList.add('active');
    initCanvas();
}

// 关闭手写签名弹窗
function closeSignModal() {
    document.getElementById('signModal').classList.remove('active');
    clearCanvas();
}

// 初始化画布
function initCanvas() {
    canvas = document.getElementById('signCanvas');
    ctx = canvas.getContext('2d');
    
    // 设置画布尺寸
    var wrap = canvas.parentElement;
    var width = wrap.offsetWidth - 4;
    canvas.width = width;
    canvas.height = 200;
    
    // 设置画布样式
    ctx.strokeStyle = '#1a1a1a';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
    // 绑定事件
    canvas.addEventListener('mousedown', startDraw);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', endDraw);
    canvas.addEventListener('mouseleave', endDraw);
    
    // 触摸事件
    canvas.addEventListener('touchstart', function(e) {
        e.preventDefault();
        var touch = e.touches[0];
        var rect = canvas.getBoundingClientRect();
        isDrawing = true;
        ctx.beginPath();
        ctx.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
    });
    canvas.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var touch = e.touches[0];
        var rect = canvas.getBoundingClientRect();
        if (isDrawing) {
            ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
            ctx.stroke();
        }
    });
    canvas.addEventListener('touchend', endDraw);
}

function startDraw(e) {
    isDrawing = true;
    var rect = canvas.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
}

function draw(e) {
    if (isDrawing) {
        var rect = canvas.getBoundingClientRect();
        ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
        ctx.stroke();
    }
}

function endDraw() {
    isDrawing = false;
}

function clearCanvas() {
    if (ctx && canvas) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}

// 确认签名
function confirmSign() {
    if (!ctx) {
        toast('请先书写签名');
        return;
    }
    
    // 获取签名数据
    var signatureData = canvas.toDataURL();
    
    // 关闭弹窗
    closeSignModal();
    
    // 完成签署
    completeSign();
}

// 完成签署
function completeSign() {
    // 更新合同状态
    if (currentContract) {
        currentContract.status = 'signed';
        
        // 更新列表中的状态 - 在待签署列表中查找并更新
        var pendingList = document.querySelectorAll('#pg-pending .contract-item');
        pendingList.forEach(function(item) {
            var nameEl = item.querySelector('.name');
            if (nameEl && nameEl.textContent === currentContract.name) {
                var statusEl = item.querySelector('.status');
                if (statusEl) {
                    statusEl.className = 'status signed';
                    statusEl.textContent = '已签署';
                }
            }
        });
    }
    
    // 更新合同详情页状态
    var statusBanner = document.getElementById('detail-status-banner');
    if (statusBanner) {
        statusBanner.classList.add('signed');
        statusBanner.style.background = 'linear-gradient(135deg, #E8FFF0, #D6FFE8)';
        var icon = statusBanner.querySelector('.status-icon');
        if (icon) {
            icon.classList.remove('wait');
            icon.classList.add('done');
        }
    }
    var statusTitle = document.getElementById('detail-status-title');
    if (statusTitle) statusTitle.textContent = '已签署完成';
    var statusDesc = document.getElementById('detail-status-desc');
    if (statusDesc) statusDesc.textContent = '合同已签署完成，具有法律效力';
    var partyBStatus = document.getElementById('partyB-status');
    if (partyBStatus) {
        partyBStatus.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;"><path d="M9 12l2 2 4-4"/></svg> 已签署 · ' + new Date().toLocaleDateString('zh-CN');
        partyBStatus.className = 'party-status done';
    }
    var signDate = document.getElementById('detail-sign-date');
    if (signDate) signDate.textContent = new Date().toLocaleDateString('zh-CN');
    var btnSign = document.getElementById('btn-sign-contract');
    if (btnSign) btnSign.style.display = 'none';
    
    // 更新合同正文页的签署区域
    var signAreaB = document.getElementById('sign-area-B');
    if (signAreaB) {
        signAreaB.className = 'sign-placeholder signed';
        signAreaB.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/></svg><span class="sign-text">已签署</span>';
        signAreaB.onclick = null;
    }
    
    // 显示成功页
    var successName = document.getElementById('success-name');
    if (successName) successName.textContent = currentContract ? currentContract.name : '合同';
    var successTime = document.getElementById('success-time');
    if (successTime) successTime.textContent = new Date().toLocaleString('zh-CN');
    var successHash = document.getElementById('success-hash');
    if (successHash) successHash.textContent = '0x' + Math.random().toString(16).substr(2, 64) + '...';
    
    closePage('pg-sign-process');
    openPage('pg-sign-success');
}

// 返回列表
function returnToList() {
    document.querySelectorAll('.detail-page').forEach(p => p.classList.remove('active'));
    go('pg-sign');
}

// 签署成功后返回首页
function closeSuccessAndGoHome() {
    closePage('pg-sign-success');
    go('pg-home');
}
</script>
</body>
</html>