.srm-shell{--ink:#172238;--muted:#77849a;--line:#e6ebf2;--soft:#f7f9fc;--blue:#1677ff;--blue-soft:#edf5ff;--green:#16a36a;--red:#dc4f58;--orange:#d98622;min-height:calc(100vh - 100px);background:#f6f8fb;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;padding:26px 30px 48px} .srm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}.srm-title{font-size:26px;line-height:1.2;font-weight:760;letter-spacing:0}.srm-subtitle{margin-top:8px;color:var(--muted);font-size:13px}.srm-top-meta{display:flex;align-items:center;gap:16px;color:#7c8798;font-size:12px;white-space:nowrap}.srm-period-label{display:flex;align-items:center;gap:7px}.srm-period-label i{color:#9aa6b7} .srm-sync{display:flex;align-items:center;gap:8px}.srm-dot{width:7px;height:7px;border-radius:50%;background:#1fbd7a;box-shadow:0 0 0 4px #def7ea} .srm-actions{display:flex;gap:8px;align-items:center}.srm-btn{height:34px;border:1px solid var(--line);background:#fff;color:#46536a;border-radius:6px;padding:0 12px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:7px;transition:.16s ease}.srm-btn:hover{border-color:#a9c8f8;color:var(--blue);background:#fbfdff}.srm-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(22,119,255,.18)}.srm-btn.primary:hover{background:#0f68e6;color:#fff}.srm-btn.icon{width:34px;padding:0;justify-content:center}.srm-btn:disabled,.srm-icon-btn:disabled{opacity:.45;cursor:not-allowed} .srm-tabs{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px}.srm-tab{border:0;background:transparent;color:#748198;font-size:14px;padding:10px 1px 13px;cursor:pointer;position:relative}.srm-tab.active{color:var(--blue);font-weight:700}.srm-tab.active:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:-1px;background:var(--blue);border-radius:2px} .srm-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.srm-stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:17px 18px 15px;min-width:0;box-shadow:0 1px 2px rgba(25,42,70,.02)}.srm-stat-head{display:flex;justify-content:space-between;align-items:center;color:#748197;font-size:13px}.srm-stat-icon{width:30px;height:30px;border-radius:7px;display:grid;place-items:center}.srm-tone-blue{color:#1677ff;background:#eaf3ff}.srm-tone-violet{color:#6956d8;background:#f0edff}.srm-tone-orange{color:#d57a1c;background:#fff3df}.srm-tone-green{color:#159c68;background:#e4f8ee}.srm-stat-value{font-size:28px;line-height:1.15;font-weight:760;margin:17px 0 7px;font-variant-numeric:tabular-nums}.srm-stat-value small{font-size:13px;font-weight:500;color:#8994a6;margin-left:4px}.srm-stat-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px}.srm-previous{color:#9aa5b5}.srm-trend{font-weight:600}.srm-up{color:var(--green)}.srm-down{color:var(--red)}.srm-trend i{margin-right:4px} .srm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:14px 16px}.srm-toolbar-left{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.srm-toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.srm-filter-label{font-size:12px;color:#8a96a8}.srm-range{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line);border-radius:6px;color:#536178;background:#fbfcfe;font-size:12px}.srm-range i{color:#91a0b4}.srm-current-range{font-weight:600;color:#34435a}.srm-pop-wrap{position:relative}.srm-pop{position:absolute;z-index:20;top:42px;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(30,48,80,.14);padding:12px;min-width:250px}.srm-pop-title{font-size:12px;color:#8591a4;margin-bottom:8px}.srm-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 13px}.srm-check{display:flex;gap:7px;align-items:center;color:#435168;font-size:13px;white-space:nowrap}.srm-check input{accent-color:var(--blue)} .srm-table-wrap{background:#fff;border:1px solid var(--line);border-radius:0 0 8px 8px;overflow:auto}.srm-table{width:100%;border-collapse:collapse;min-width:1480px;font-size:12px}.srm-table th{height:38px;background:#fafbfe;color:#79869a;text-align:left;font-weight:600;white-space:nowrap;padding:0 12px;border-bottom:1px solid var(--line)}.srm-table thead tr:first-child th{height:35px;background:#f8faff;color:#66758b;font-size:12px}.srm-table th.group{text-align:center;border-left:1px solid #edf0f5}.srm-table td{padding:12px;border-bottom:1px solid #eef1f5;color:#425068;vertical-align:middle}.srm-table tr:hover td{background:#fcfdff}.srm-title-cell{max-width:255px;color:#1f2d43;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srm-title-link{color:inherit;text-decoration:none}.srm-title-link:hover{color:var(--blue)}.srm-sub-cell{display:block;margin-top:4px;color:#9aa5b5;font-size:11px}.srm-type{display:inline-flex;padding:3px 8px;border-radius:4px;background:#eef4ff;color:#4666b3}.srm-source{display:block;margin-top:4px;color:#9aa5b5;font-size:11px}.srm-metric{text-align:right;font-variant-numeric:tabular-nums}.srm-rate{color:#536178;font-variant-numeric:tabular-nums}.srm-hot{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:4px;background:#fff3e5;color:#d27a1b}.srm-cold{color:#a4adba}.srm-row-actions{display:flex;gap:4px}.srm-icon-btn{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:5px;color:#7c899c;cursor:pointer}.srm-icon-btn:hover{color:var(--blue);border-color:#a8b9e8}.srm-icon-btn.danger:hover{color:var(--red);border-color:#eeb2b2}.srm-empty{text-align:center!important;color:#98a3b3!important;padding:45px!important} .srm-standard{position:relative}.srm-standard summary{cursor:pointer;color:#5e6d83;font-size:13px;list-style:none}.srm-standard summary::-webkit-details-marker{display:none}.srm-standard table{position:absolute;right:0;top:40px;width:560px;max-width:calc(100vw - 44px);z-index:18;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(30,48,80,.14);border-collapse:collapse;font-size:12px;color:#66748a}.srm-standard td,.srm-standard th{padding:8px 10px;border-bottom:1px solid #eef1f5;text-align:left} .srm-mask{position:fixed;inset:0;background:rgba(22,32,51,.42);z-index:100;display:grid;place-items:center;padding:20px}.srm-modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:10px;box-shadow:0 18px 60px rgba(20,30,50,.24)}.srm-modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}.srm-modal-title{font-size:16px;font-weight:700}.srm-modal-body{padding:20px}.srm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.srm-field{display:flex;flex-direction:column;gap:6px}.srm-field.full{grid-column:1/-1}.srm-field label{font-size:12px;color:#758298}.srm-field input,.srm-field select{height:36px;border:1px solid #dfe5ee;border-radius:6px;padding:0 10px;color:#35435a;outline:0;background:#fff}.srm-field input:focus,.srm-field select:focus{border-color:#91b6ed;box-shadow:0 0 0 3px #edf5ff}.srm-upload{height:80px;border:1px dashed #c7d1e0;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#8490a4;cursor:pointer;overflow:hidden}.srm-upload img{height:100%;max-width:100%;object-fit:contain}.srm-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 20px;border-top:1px solid var(--line)} .srm-traffic-preview{max-width:100%;max-height:70vh;display:block;margin:auto}.srm-note{font-size:12px;color:#8a95a7;margin-top:8px} /* 新增 / 编辑收录记录：横向自定义浮层与图片投放区 */ .srm-mask .srm-record-modal{width:min(960px,calc(100vw - 48px));max-height:min(88vh,820px);display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff} .srm-record-modal .srm-modal-head{flex:0 0 auto;padding:17px 24px;background:linear-gradient(120deg,#f1f7ff 0%,#fff 58%,#f7faff 100%)} .srm-record-modal .srm-modal-title{display:flex;flex-direction:column;gap:3px} .srm-record-modal .srm-modal-title small{color:#4d82d4;font-size:9px;font-weight:900;letter-spacing:.18em} .srm-record-modal .srm-modal-title strong{color:#172238;font-size:19px;line-height:1.25} .srm-record-modal .srm-modal-body{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 24px} .srm-record-modal .srm-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 16px} .srm-record-modal .srm-span-2{grid-column:span 2} .srm-record-modal .srm-field{gap:7px} .srm-record-modal .srm-field>label{color:#5d6c82;font-size:11px;font-weight:750} .srm-record-modal .srm-field>input,.srm-record-modal .srm-field>select{height:41px;border-color:#dbe4f0;border-radius:9px;background:#fbfcfe;color:#24334a;transition:border-color .16s,box-shadow .16s,background .16s} .srm-record-modal .srm-field>input:hover,.srm-record-modal .srm-field>select:hover{border-color:#b6cae6;background:#fff} .srm-record-modal .srm-field>select:disabled{cursor:not-allowed;border-color:#e1e7ef;background:#f3f6fa;color:#65758b;opacity:1} .srm-record-modal .srm-modal-foot{flex:0 0 auto;align-items:center;justify-content:space-between;min-height:64px;padding:12px 24px} .srm-record-modal .srm-modal-foot .srm-btn.primary{min-width:116px;height:40px} .srm-record-error{max-width:70%;color:#d9363e;font-size:12px;font-weight:700} .srm-traffic-field{padding-top:3px} .srm-upload-zone{padding:12px;border:1px solid #dce5f2;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f7faff);outline:0;transition:border-color .16s,box-shadow .16s,background .16s} .srm-upload-zone:focus,.srm-upload-zone:focus-within{border-color:#7ea9e8;background:#fff;box-shadow:0 0 0 3px rgba(55,117,207,.1)} .srm-upload-alert{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding:8px 10px;border:1px solid #ffd4d7;border-radius:8px;background:#fff5f5;color:#d9363e;font-size:11px;font-weight:700;line-height:1.45} .srm-upload-alert i{flex:none;font-size:12px} .srm-upload-error{margin:9px 0 0;color:#d9363e;font-size:11px;font-weight:700} .srm-upload-grid.busy,.srm-traffic-grid.busy{pointer-events:none;opacity:.62} .srm-upload-grid .srm-upload{height:128px;border:1px dashed #bfcde0;border-radius:10px;background:#fff} .srm-upload-grid .srm-upload span{color:#718197;font-size:11px} .srm-upload-grid .srm-upload span i{color:#4f8adf;font-size:22px} .srm-upload-grid .srm-upload span b{color:#394b65;font-size:12px} .srm-upload-grid .srm-upload span small,.srm-traffic-empty small{color:#9aa8ba;font-size:10px} .srm-upload-grid .srm-upload img{width:100%;height:100%;object-fit:contain;background:#f4f7fb} .srm-traffic-hint-danger{color:#d9363e;font-weight:700} .srm-traffic-empty b{color:#53657e;font-size:13px} @media(max-width:850px){ .srm-mask .srm-record-modal{width:min(100%,760px);max-height:94vh} .srm-record-modal .srm-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .srm-mask{padding:10px} .srm-mask .srm-record-modal{width:100%;max-height:96vh;border-radius:14px} .srm-record-modal .srm-form-grid{grid-template-columns:1fr} .srm-record-modal .srm-span-2,.srm-record-modal .srm-field.full{grid-column:1} .srm-record-modal .srm-modal-body{padding:16px} .srm-record-modal .srm-modal-head,.srm-record-modal .srm-modal-foot{padding-left:16px;padding-right:16px} .srm-record-error{max-width:62%} } @media(max-width:1100px){.srm-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.srm-top{flex-direction:column}.srm-top-meta{width:100%;justify-content:space-between}.srm-toolbar{align-items:flex-start;flex-direction:column}.srm-toolbar-right{width:100%;justify-content:flex-end}} @media(max-width:560px){.srm-shell{padding:18px 12px 32px}.srm-stat-grid{grid-template-columns:1fr}.srm-form-grid{grid-template-columns:1fr}.srm-field.full{grid-column:auto}.srm-tabs{gap:16px;overflow:auto}.srm-top-meta{align-items:flex-start;flex-direction:column;gap:8px}.srm-toolbar-right{justify-content:flex-start}} /* 方案 A：数据驾驶舱表头 */ .srm-top{margin-bottom:18px} .srm-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap} .srm-btn-lg{height:40px;padding:0 15px;border-radius:7px;font-size:13px} .srm-btn-chevron{font-size:10px;color:#93a0b3;margin-left:2px} .srm-tabs-row{display:flex;align-items:center;gap:18px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:18px;box-shadow:0 1px 2px rgba(25,42,70,.02)} .srm-tabs-row>.srm-range{height:40px;min-width:154px;background:#fbfcfe;border-radius:7px;font-size:13px} .srm-range-chevron{margin-left:auto;color:#98a5b7;font-size:10px} .srm-tabs-row .srm-tabs{flex:1;margin:0;border:0;gap:8px;overflow:visible} .srm-tabs-row .srm-tab{min-width:92px;height:40px;padding:0 20px;border:1px solid #e8edf4;border-radius:7px;background:#fff;color:#53627a;font-size:14px} .srm-tabs-row .srm-tab:hover{border-color:#a9c8f8;background:#fbfdff;color:var(--blue)} .srm-tabs-row .srm-tab.active{border-color:#8bb7ff;background:#edf5ff;color:var(--blue);font-weight:700;box-shadow:inset 0 -2px 0 var(--blue)} .srm-tabs-row .srm-tab.active:after{display:none} .srm-tabs-meta{display:flex;align-items:center;min-width:max-content;padding-left:4px;color:#8390a3;font-size:12px} .srm-toolbar{border-radius:8px 8px 0 0;padding:11px 16px} .srm-filter-context{display:inline-flex;align-items:center;gap:7px;color:#7c899d;font-size:12px} .srm-table-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.srm-table-filter{position:relative}.srm-table-filter summary{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border:1px solid #e1e8f1;border-radius:6px;background:#fbfcfe;color:#718096;cursor:pointer;list-style:none;font-size:11px}.srm-table-filter summary::-webkit-details-marker{display:none}.srm-table-filter summary:hover,.srm-table-filter summary.on{border-color:#9dc1f3;background:#edf5ff;color:#1677ff}.srm-table-filter summary span{display:grid;place-items:center;min-width:15px;height:15px;border-radius:99px;background:#1677ff;color:#fff;font-size:9px}.srm-table-filter summary i{font-size:9px;color:#9ba8b9}.srm-table-filter-pop{position:absolute;z-index:30;top:33px;left:0;min-width:145px;max-height:245px;overflow:auto;padding:7px;background:#fff;border:1px solid #e1e8f1;border-radius:8px;box-shadow:0 12px 30px rgba(30,48,80,.15)}.srm-table-filter-pop label{display:flex;align-items:center;gap:7px;padding:6px 5px;color:#55647b;font-size:11px;white-space:nowrap;cursor:pointer}.srm-table-filter-pop label:hover{background:#f4f8fd;border-radius:5px}.srm-table-filter-pop input{accent-color:#1677ff}.srm-table-filter-pop small{display:block;padding:7px;color:#a0abba}.srm-filter-clear{height:28px;padding:0 7px;border:0;background:transparent;color:#9b6970;cursor:pointer;font-size:11px}.srm-filter-clear:hover{color:#dc4f58}.srm-sort-btn{margin-left:3px;padding:0;border:0;background:transparent;color:#9aa7b9;cursor:pointer;font-size:10px}.srm-sort-btn:hover{color:#1677ff} /* ---------- 工作台导航与数据看板（不改数据表格主体布局） ---------- */ .srm-workspace-nav{display:flex;align-items:center;gap:24px;margin:-8px 0 18px;padding:10px 4px 12px;border-bottom:1px solid #e7edf5}.srm-workspace-title{display:flex;align-items:center;gap:10px;min-width:205px}.srm-workspace-title .mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf3ff;color:#1677ff}.srm-workspace-title b{display:block;color:#172238;font-size:17px;line-height:1.1}.srm-workspace-title small{display:block;margin-top:3px;color:#9aa6b7;font-size:9px;letter-spacing:1.6px}.srm-workspace-links{display:flex;align-items:center;gap:4px}.srm-workspace-links button{height:34px;border:0;border-radius:8px;background:transparent;color:#7d8ba0;padding:0 14px;cursor:pointer;font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:7px}.srm-workspace-links button:hover{background:#f0f6ff;color:#2977e8}.srm-workspace-links button.on{background:#edf5ff;color:#1677ff;font-weight:700;box-shadow:inset 0 -2px 0 #1677ff}.srm-workspace-note{margin-left:auto;color:#7d8ba0;font-size:11px;display:inline-flex;align-items:center;gap:6px}.srm-workspace-note i{color:#1fa873} .srm-dashboard{padding:2px 0 16px}.srm-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 2px 20px}.srm-dashboard-kicker{color:#1677ff;font-size:10px;letter-spacing:2px;font-weight:800}.srm-dashboard-head h1{margin:4px 0 5px;color:#172238;font-size:25px;letter-spacing:-.3px}.srm-dashboard-head p{margin:0;color:#8a96a8;font-size:12px}.srm-dashboard-view-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #dcefe7;border-radius:99px;background:#f1fbf6;color:#159c68;font-size:11px;white-space:nowrap}.srm-dashboard-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(25,42,70,.02)}.srm-dashboard-filters label,.srm-dashboard-period{display:flex;flex-direction:column;gap:6px;color:#8290a5;font-size:11px}.srm-dashboard-filters select{height:35px;min-width:128px;padding:0 10px;border:1px solid #dfe6f0;border-radius:7px;background:#fbfcfe;color:#33435a;outline:0;font:inherit;font-size:12px}.srm-dashboard-filters select:focus{border-color:#91b6ed;box-shadow:0 0 0 3px #edf5ff}.srm-dashboard-period{gap:5px}.srm-period-tabs{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #e5ebf3;border-radius:8px;background:#f8fafc}.srm-period-tabs button{height:27px;border:0;border-radius:6px;padding:0 10px;background:transparent;color:#8190a5;cursor:pointer;font:inherit;font-size:11px}.srm-period-tabs button:hover{color:#1677ff}.srm-period-tabs button.active{background:#fff;color:#1677ff;font-weight:700;box-shadow:0 1px 3px rgba(30,70,130,.1)}.srm-period-tabs.compact{border:0;background:transparent;padding:0}.srm-period-tabs.compact button{height:25px;padding:0 8px}.srm-date-range{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important;color:#a0aaba!important}.srm-dashboard-context{display:flex;justify-content:space-between;gap:10px;margin:12px 2px;color:#54647b;font-size:12px}.srm-dashboard-context small{color:#a0abba}.srm-dashboard-error{display:flex;align-items:center;gap:8px;margin:10px 0;padding:10px 12px;border:1px solid #f5d0d0;border-radius:8px;background:#fff6f6;color:#c4444c;font-size:12px}.srm-dashboard-error .srm-btn{margin-left:auto;height:28px}.srm-dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:14px}.srm-dash-kpi{position:relative;min-height:104px;padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 7px rgba(30,50,80,.025)}.srm-dash-kpi:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#3b82f6}.srm-dash-kpi.violet:before{background:#8b5cf6}.srm-dash-kpi.rose:before{background:#f43f5e}.srm-dash-kpi.mint:before{background:#10b981}.srm-dash-kpi>span{display:flex;align-items:center;gap:7px;color:#78879b;font-size:12px}.srm-dash-kpi>span i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#edf5ff;color:#2678e8;font-size:11px}.srm-dash-kpi.violet>span i{background:#f1edff;color:#7c55e9}.srm-dash-kpi.rose>span i{background:#fff0f3;color:#ed3f64}.srm-dash-kpi.mint>span i{background:#eafaf3;color:#10a36e}.srm-dash-kpi b{display:block;margin-top:10px;color:#15233a;font-size:25px;line-height:1;font-variant-numeric:tabular-nums}.srm-dash-kpi b small{margin-left:4px;color:#8996a8;font-size:11px;font-weight:500}.srm-dash-kpi em{display:block;margin-top:8px;color:#a0abba;font-size:10px;font-style:normal}.srm-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:14px;margin-bottom:14px}.srm-dash-card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 7px rgba(30,50,80,.025);overflow:hidden}.srm-dash-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px 11px}.srm-dash-card h3{margin:0;color:#23324a;font-size:14px}.srm-dash-card header small{display:block;margin-top:4px;color:#9aa6b8;font-size:11px}.srm-dash-muted{color:#a1adbd;font-size:10px}.srm-trend-chart{height:230px;padding:3px 12px 10px}.srm-trend-chart svg{width:100%;height:100%;overflow:visible}.srm-trend-chart .grid{stroke:#edf1f6;stroke-width:1}.srm-trend-chart text{fill:#a1adbd;font-size:10px}.srm-trend-chart .area{fill:url(#none);fill:#eaf3ff;opacity:.75}.srm-trend-chart .line{fill:none;stroke:#3b82f6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.srm-trend-chart .dot{fill:#fff;stroke:#3b82f6;stroke-width:2}.srm-compare-list{padding:2px 17px 15px}.srm-compare-row{padding:10px 0;border-bottom:1px solid #f0f3f7}.srm-compare-row:last-child{border-bottom:0}.srm-compare-row>div:first-child{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}.srm-compare-row span{color:#46566f;font-size:12px;font-weight:600}.srm-compare-row small{color:#a0abba;font-size:10px}.srm-compare-row b{grid-column:2;grid-row:1/3;color:#23324a;font-size:14px}.srm-compare-track{height:5px;margin-top:8px;border-radius:99px;background:#f0f3f8;overflow:hidden}.srm-compare-track i{display:block;height:100%;min-width:3px;border-radius:99px;background:linear-gradient(90deg,#74adff,#3b82f6)}.srm-dash-empty{padding:25px 0;text-align:center;color:#a0abba;font-size:12px}.srm-ranking-card{padding-bottom:5px}.srm-ranking-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 17px 11px}.srm-ranking-toolbar>small{color:#a0abba;font-size:10px}.srm-ranking-head,.srm-ranking-row{display:grid;grid-template-columns:minmax(180px,1fr) 110px 80px 80px 80px;align-items:center;gap:10px;padding:10px 17px}.srm-ranking-head{background:#fafbfe;color:#9aa6b8;font-size:10px}.srm-ranking-row{border-top:1px solid #f0f3f7;color:#52627a;font-size:12px}.srm-ranking-row>strong{color:#24344c;font-variant-numeric:tabular-nums}.rank-name{display:flex;align-items:center;gap:9px;min-width:0}.rank-name i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#f2f5f9;color:#8795a9;font-size:10px;font-style:normal;font-weight:700}.srm-ranking-row:nth-child(3) .rank-name i{background:#fff2cf;color:#ad771d}.rank-name b{color:#43536b;font-weight:600}.rank-name small{margin-left:2px;color:#a1adbd;font-size:10px}.srm-ranking-card footer{padding:12px 17px;color:#a0abba;font-size:10px;border-top:1px solid #f0f3f7} .srm-filter-context i{color:#9aabc0} @media(max-width:1100px){ .srm-top-actions{width:100%;justify-content:flex-start} .srm-tabs-row{align-items:flex-start;flex-wrap:wrap} .srm-tabs-row .srm-tabs{order:3;flex-basis:100%;overflow:auto;padding-bottom:1px} .srm-tabs-meta{margin-left:auto} } @media(max-width:560px){ .srm-top-actions{display:grid;grid-template-columns:1fr 1fr} .srm-top-actions>.srm-btn{width:100%;justify-content:center} .srm-top-actions .srm-pop-wrap{width:100%} .srm-top-actions .srm-pop-wrap>.srm-btn{width:100%;justify-content:center} .srm-top-actions>.primary{grid-column:1/-1} .srm-tabs-row{gap:10px;padding:10px} .srm-tabs-row>.srm-range{width:100%} .srm-tabs-row .srm-tabs{gap:6px} .srm-tabs-row .srm-tab{min-width:76px;padding:0 13px} .srm-tabs-meta{width:100%;padding-left:0} } /* 种草收录表 */ .srm-entry-table{min-width:1850px}.srm-entry-table th{background:#f5f8ff;color:#51627e}.srm-entry-table tbody tr:nth-child(even) td{background:#fcfdff}.srm-entry-table tbody tr:hover td{background:#eef6ff}.srm-entry-table td{height:48px;padding:7px 10px}.srm-entry-table td select,.srm-entry-table td input{max-width:150px;height:30px;border:1px solid transparent;border-radius:5px;background:transparent;color:#34435a;padding:0 5px;font-size:12px}.srm-entry-table td select:hover,.srm-entry-table td input:focus{border-color:#9ec3fa;background:#fff;outline:0}.srm-entry-table td input:focus{box-shadow:0 0 0 2px #e6f0ff}.srm-date-cell{min-width:92px;background:linear-gradient(180deg,#f0f6ff,#f9fbff)!important;color:#2f65b5;text-align:center;border-right:1px solid #dfeafa}.srm-date-cell b{display:block;font-size:12px}.srm-date-cell small{display:block;margin-top:4px;color:#91a5c5;font-size:10px}.srm-link-state{border:0;border-radius:5px;padding:6px 8px;background:#f1f5fb;color:#8391a6;cursor:pointer;font-size:11px;white-space:nowrap}.srm-link-state i{margin-right:4px}.srm-link-state.done{background:#eaf8f1;color:#14875d}.srm-entry-table .srm-title-cell{max-width:230px}.srm-entry-table .srm-title-cell input{width:220px;max-width:220px}.srm-entry-table .srm-title-link{display:block;max-width:225px;overflow:hidden;text-overflow:ellipsis}.srm-entry-table .srm-row-locked{opacity:.78}.srm-filter-context em{font-style:normal;margin-left:8px;padding:3px 8px;background:#edf5ff;color:#3775ce;border-radius:10px}.srm-person-select{height:40px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;border:1px solid #e3eaf4;border-radius:7px;background:#fff;color:#677790;font-size:12px;white-space:nowrap}.srm-person-select i{color:#5f91df}.srm-person-select select{border:0;outline:0;background:transparent;color:#315d9b;font-weight:600;cursor:pointer}.srm-binding-pop{right:auto;left:0;width:340px;max-height:420px;overflow:auto}.srm-store-bind{padding:9px 0;border-top:1px solid #edf1f7}.srm-store-bind-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;color:#31425c;font-weight:700}.srm-store-bind-title small{font-weight:400;color:#9aa8bc}.srm-store-bind .srm-check{display:inline-flex;margin:3px 9px 3px 0}.srm-muted{color:#9aa5b5;font-size:12px}.srm-upload img{max-height:100%;max-width:100%;object-fit:contain}.srm-entry-table .srm-icon-btn{background:#fff}.srm-entry-table .srm-icon-btn:not(:disabled):hover{background:#edf5ff} /* ===== 收录表 V2：彩色语义胶囊 · 分隔表头 · 热度分级 ===== */ .srm-entry-table{min-width:1830px} /* 表头：三层分组色带 */ .srm-entry-table thead tr.srm-g th{height:32px;font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-align:center;background:#fafbfe;color:#8494ac;border-bottom:1px solid #eff3f9} .srm-entry-table thead tr.srm-g th.srm-g-content{background:#f2f5fe!important;color:#4338ca!important} .srm-entry-table thead tr.srm-g th.srm-g-metric{background:#fef9f0!important;color:#b45309!important} .srm-entry-table thead tr.srm-g th.srm-g-plain{background:#f7f9fc!important;color:#64748b!important;letter-spacing:0;font-weight:700;vertical-align:middle} .srm-entry-table thead tr.srm-h th{height:38px;font-size:12px;background:#fff;color:#6a7a92;border-bottom:1px solid #e6ebf3} .srm-entry-table thead th.srm-g-div{border-left:1px solid #e6ebf3} /* 行高：去掉斑马纹，改悬停淡蓝 */ .srm-entry-table td{height:52px;padding:0 12px;border-bottom:1px solid #eff3f9} .srm-entry-table tbody tr:nth-child(even) td{background:#fff} .srm-entry-table tbody tr:hover td{background:#f5f9ff} /* ---- 语义胶囊（核心：彻底移除原生下拉箭头） ---- */ .srm-entry-table td .srm-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:650;line-height:1;white-space:nowrap;position:relative;cursor:pointer;transition:.15s;background:#f1f4f9;color:#64748b} .srm-entry-table td .srm-chip>select{display:block;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;max-width:none;height:100%;flex:1;min-width:0;border:0!important;border-radius:0;background:transparent!important;color:inherit!important;font:inherit;font-size:12px;line-height:1;padding:0!important;margin:0;cursor:pointer;outline:0;text-align:left;text-align-last:left} .srm-entry-table td .srm-chip>select::-ms-expand{display:none} .srm-entry-table td .srm-chip>select option{color:#16213a;background:#fff;font-weight:500} .srm-entry-table td .srm-chip>select:hover{border:0!important;background:transparent!important} .srm-entry-table td .srm-chip i{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor;opacity:.9} /* 原生箭头已移除，仅 hover / 键盘聚焦时浮出微 caret */ .srm-entry-table td .srm-chip:after{content:"";width:0;height:0;margin-left:1px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;opacity:0;transition:opacity .15s} .srm-entry-table td .srm-chip:hover:after,.srm-entry-table td .srm-chip:focus-within:after{opacity:.5} .srm-entry-table td .srm-chip:hover{filter:saturate(1.06) brightness(.985);box-shadow:inset 0 0 0 1px rgba(15,23,42,.06),0 2px 6px rgba(22,33,58,.07)} .srm-entry-table td .srm-chip:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.13),inset 0 0 0 1px rgba(37,99,235,.35)} /* 四列四种造型：产品=圆角方 / 平台=圆点药丸 / 渠道=描边药丸 / 类型=方角实心 */ .srm-entry-table td .srm-chip-prod{border-radius:9px;width:110px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.055)} .srm-entry-table td .srm-chip-plat{border-radius:99px;width:94px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.055)} .srm-entry-table td .srm-chip-src{border-radius:99px;width:82px;background:#fff;border:1px solid var(--srm-bd,#dbe3ef)} .srm-entry-table td .srm-chip-type{border-radius:8px;width:84px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.055)} /* 色板：同值恒同色 */ .srm-entry-table td .p-douyin{background:#e8f8fa;color:#0e7490} .srm-entry-table td .p-douyin i{background:#0fb6c9;opacity:1} .srm-entry-table td .p-xhs{background:#ffedf1;color:#c2185b} .srm-entry-table td .p-xhs i{background:#ff2442;opacity:1} .srm-entry-table td .p-daifa{color:#4338ca;--srm-bd:#c9cdfb} .srm-entry-table td .p-zifa{color:#047857;--srm-bd:#a8e5c9} .srm-entry-table td .p-shipai{background:#edf4fe;color:#1d4ed8} .srm-entry-table td .p-ganhuo{background:#fef6e7;color:#b45309} .srm-entry-table td .p-zhongcao{background:#f3eefe;color:#6d28d9} .srm-entry-table td .p-ceping{background:#fdf1f6;color:#be185d} .srm-entry-table td .p-yinliu{background:#fff3ea;color:#c2410c} .srm-entry-table td .p-kouce{background:#e9faf6;color:#0f766e} .srm-entry-table td .p-jiaodian{background:#ecfdff;color:#0e7490} .srm-entry-table td .p-zuodian{background:#fff8ec;color:#b45309} .srm-entry-table td .p-xiangxun{background:#fdf2f6;color:#9d174d} .srm-entry-table td .p-quyoumo{background:#eef2ff;color:#4338ca} .srm-entry-table td .p-toushen{background:#edfaf3;color:#047857} .srm-entry-table td .p-yaokao{background:#fff7e3;color:#a16207} .srm-entry-table td .p-cheyi{background:#eef4fe;color:#1d4ed8} .srm-entry-table td .p-tidao{background:#f5f3ff;color:#6d28d9} .srm-entry-table td .p-palouji{background:#f0fdfa;color:#0f766e} .srm-entry-table td .p-yaoshuang{background:#f3f1fe;color:#5b4bd1} .srm-entry-table td .p-huyao{background:#f1f5f9;color:#475569} .srm-entry-table td .p-baowenbei{background:#fff7ed;color:#c2410c} .srm-entry-table td .p-default{background:#f1f4f9;color:#64748b} /* 日期轨道 */ .srm-entry-table td.srm-date-cell{min-width:132px;padding:0 16px!important;text-align:center;white-space:nowrap;position:relative;background:linear-gradient(180deg,#eef4fe,#f8fbff)!important;border-right:1px solid #dfeafa;border-bottom:1px solid #d9e6f8} .srm-entry-table td.srm-date-cell:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#2563eb,#4f46e5)} .srm-entry-table td.srm-date-cell b{display:block;font-size:12.5px;color:#1d4ed8;letter-spacing:.2px} .srm-entry-table td.srm-date-cell small{display:block;margin-top:3px;color:#8ca3c6;font-size:10.5px} .srm-entry-table td.srm-date-cell .srm-grp{display:inline-block;margin-top:7px;padding:3px 8px;border-radius:99px;background:#fff;border:1px solid #d9e6f8;color:#4f74ae;font-size:10.5px;font-weight:700} .srm-entry-table td.srm-date-cell input{max-width:110px} /* 标题 / 账号 / 备注 / 居中列 */ .srm-entry-table .srm-title-cell{max-width:234px} .srm-entry-table .srm-title-cell input{width:220px;max-width:220px} .srm-entry-table .srm-title-link{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis} .srm-entry-table td.srm-acct{min-width:146px} .srm-entry-table td.srm-video-id{min-width:148px;max-width:170px;font-size:11px;font-variant-numeric:tabular-nums;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srm-entry-table td.srm-acct b{display:block;color:#1b2a45;font-weight:650;font-size:12.5px} .srm-entry-table td.srm-acct small{display:block;margin-top:3px;color:#98a4b6;font-size:10.5px;font-variant-numeric:tabular-nums} .srm-entry-table td.srm-acct input{max-width:130px} .srm-entry-table td.srm-remark-cell{color:#6a7a92;white-space:nowrap} .srm-entry-table td.srm-center-cell{text-align:center} /* 发布链接状态 */ .srm-entry-table .srm-link-state{border:0;border-radius:99px;padding:6px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;background:#f7f9fc;color:#93a0b4;box-shadow:inset 0 0 0 1px #e3e9f2} .srm-entry-table .srm-link-state i{margin-right:4px} .srm-entry-table .srm-link-state:hover{filter:brightness(.97)} .srm-entry-table .srm-link-state.todo{border:1px dashed #d8e0ec} .srm-entry-table .srm-link-state.done{background:#e9faf2;color:#047857;box-shadow:inset 0 0 0 1px #c6efd9} /* 互动数据：图标 + 阈值弱色阶 */ .srm-entry-table .srm-iv{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;color:#5a6980;font-weight:600} .srm-entry-table .srm-iv i{font-size:10px;opacity:.75} .srm-entry-table td.srm-m-warm .srm-iv{color:#e11d48} .srm-entry-table td.srm-m-amber .srm-iv{color:#d97706} .srm-entry-table td.srm-m-blue .srm-iv{color:#2563eb} /* 阅读量热度 */ .srm-entry-table td.srm-views{text-align:right} .srm-entry-table .srm-view{display:flex;flex-direction:column;align-items:flex-end;gap:5px} .srm-entry-table .srm-view-val{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:760;color:#33415c;font-variant-numeric:tabular-nums} .srm-entry-table .srm-view-bar{display:block;width:62px;height:4px;border-radius:99px;background:#edf1f7;overflow:hidden} .srm-entry-table .srm-view-bar>span{display:block;height:100%;border-radius:99px} .srm-entry-table .srm-heat{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:800} .srm-entry-table .srm-heat i{font-size:8px} .srm-entry-table .srm-heat-hot{background:#ffecef;color:#c81e4a} .srm-entry-table .srm-heat-warm{background:#fff4e5;color:#b45309} .srm-entry-table td.srm-v-hot .srm-view-val{color:#c81e4a} .srm-entry-table td.srm-v-hot .srm-view-bar>span{background:linear-gradient(90deg,#fb7185,#e11d48)} .srm-entry-table td.srm-v-warm .srm-view-val{color:#b45309} .srm-entry-table td.srm-v-warm .srm-view-bar>span{background:linear-gradient(90deg,#fbbf24,#d97706)} .srm-entry-table td.srm-v-normal .srm-view-bar>span{background:linear-gradient(90deg,#93c5fd,#3b82f6)} /* 流量分析按钮状态 */ .srm-entry-table .srm-traffic-btn.has{background:#eef4fe;color:#1d4ed8;border-color:#cbdefc} .srm-entry-table .srm-traffic-btn.no{color:#b8c2d0;border-style:dashed} /* 底部合计 */ .srm-entry-table tfoot td{padding:11px 12px;background:#fafcff;border-top:1px solid #e6ebf3} .srm-entry-table .srm-sum{display:flex;gap:24px;align-items:center;flex-wrap:wrap;color:#6a7a92;font-size:12px;font-weight:700} .srm-entry-table .srm-sum b{font-size:13.5px;font-variant-numeric:tabular-nums} .srm-entry-table .srm-sum .srm-s1 b{color:#2563eb} .srm-entry-table .srm-sum .srm-s2 b{color:#e11d48} .srm-entry-table .srm-sum .srm-s3 b{color:#d97706} .srm-entry-table .srm-sum .srm-s4 b{color:#7c3aed} .srm-entry-table .srm-sum .srm-dim{color:#b4becd;font-weight:600} /* 窄屏收窄胶囊 */ @media(max-width:1100px){ .srm-entry-table td .srm-chip-prod{width:96px} .srm-entry-table td .srm-chip-plat{width:86px} .srm-entry-table td .srm-chip-src,.srm-entry-table td .srm-chip-type{width:78px} } /* ===== 顶部区 V2：品牌标题区 · 分段筛选 · 四色统计卡 ===== */ /* 页面底纹：右上角品牌光晕，消灭「一片死白」 */ .srm-shell{ background: radial-gradient(1180px 400px at 100% -60px,#e9f1ff 0%,rgba(233,241,255,0) 62%), #f6f8fb; } /* ---- 1. 标题区：品牌徽章 + 同步状态药丸 + 左侧渐变条 ---- */ .srm-top{ position:relative;align-items:flex-start;gap:20px;margin-bottom:16px; padding:19px 22px;border:1px solid #e3e9f2;border-radius:14px; background: radial-gradient(340px 260px at calc(100% + 60px) -46px,#d9e8ff 0%,rgba(217,232,255,0) 72%), linear-gradient(180deg,#fff 0%,#fdfeff 100%); box-shadow:0 1px 2px rgba(25,42,70,.03),0 14px 34px -24px rgba(37,99,235,.30); } .srm-top:after{ content:"";position:absolute;left:0;top:19px;bottom:19px;width:3px;border-radius:0 3px 3px 0; background:linear-gradient(180deg,#3b82f6,#6366f1); } .srm-head{display:flex;align-items:center;gap:14px;position:relative;z-index:1} .srm-mark{ width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center; color:#fff;font-size:19px; background:linear-gradient(135deg,#3b82f6 0%,#4f46e5 100%); box-shadow:0 10px 22px -9px rgba(59,130,246,.85),inset 0 1px 0 rgba(255,255,255,.42); } .srm-top .srm-title{font-size:26px;line-height:1.15;font-weight:780;letter-spacing:-.2px;display:flex;align-items:center;gap:10px} .srm-top .srm-subtitle{display:flex;align-items:center;gap:8px;margin-top:8px;color:#8b98ab;font-size:12.5px} .srm-top .srm-subtitle b{color:#64748b;font-weight:650} .srm-subtitle em{width:3px;height:3px;border-radius:50%;background:#cbd5e1;flex:none} /* 同步状态药丸（原在筛选条右端，上移到标题旁；两态变色） */ .srm-live{ display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px;border-radius:99px; background:#e9faf2;color:#047857;font-size:11.5px;font-weight:700;letter-spacing:0;white-space:nowrap; box-shadow:inset 0 0 0 1px #c6efd9; } .srm-live i{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);flex:none} .srm-live.warn{background:#fff7e8;color:#b45309;box-shadow:inset 0 0 0 1px #f6e0b4} .srm-live.warn i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)} .srm-top-actions{position:relative;z-index:1;gap:10px} .srm-top .srm-btn-lg{height:40px;padding:0 16px;border-radius:10px;font-size:13px;font-weight:650} .srm-top .srm-btn-lg:not(.primary){border-color:#e0e7f1;color:#475569} .srm-top .srm-btn-lg:not(.primary):hover{border-color:#bcd3f7;background:#f6faff;color:#2563eb} .srm-top .srm-btn-lg.primary{ border-color:transparent; background:linear-gradient(135deg,#3b82f6,#4f46e5); box-shadow:0 10px 20px -9px rgba(59,130,246,.95); } .srm-top .srm-btn-lg.primary:hover{background:linear-gradient(135deg,#2563eb,#4338ca);color:#fff} /* ---- 2. 筛选条：白条 -> 内嵌控制台 + 分段控件 ---- */ .srm-tabs-row{ gap:14px;min-height:0;padding:9px 11px;margin-bottom:16px; background:#f4f7fc;border:1px solid #e4eaf3;border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(25,42,70,.03); } /* 左侧「当前收录」：去掉灰底块，改成蓝图标 + 竖分隔线 */ .srm-tabs-row>.srm-range{ height:38px;min-width:0;padding:0 2px 0 11px;gap:9px; border:0;background:transparent;color:#334155;font-size:12.5px;font-weight:700; } .srm-tabs-row>.srm-range i{color:#3b82f6;font-size:13px} .srm-tabs-row>.srm-range b{font-weight:780;color:#1e293b;font-size:13px} .srm-tabs-row>.srm-range:after{content:"";width:1px;height:20px;margin-left:6px;background:#d9e2ee;flex:none} /* 部门分段控件 */ .srm-tabs-row .srm-tabs{ flex:0 1 auto;margin:0;border:0;gap:4px;overflow:visible; background:#fff;border-radius:11px;padding:4px; box-shadow:0 1px 2px rgba(25,42,70,.05),inset 0 0 0 1px #e6ecf5; } .srm-tabs-row .srm-tab{ min-width:0;height:32px;padding:0 15px;border:0;border-radius:8px;background:transparent; color:#64748b;font-size:13px;font-weight:600;position:relative; display:inline-flex;align-items:center;gap:6px;transition:.16s ease; } .srm-tabs-row .srm-tab:before{content:"";width:6px;height:6px;border-radius:50%;background:#c7d2e0;opacity:0;transition:.16s ease;flex:none} .srm-tabs-row .srm-tab:hover{border:0;background:#f2f7ff;color:#2563eb} .srm-tabs-row .srm-tab:hover:before{opacity:.4;background:#93b4e8} .srm-tabs-row .srm-tab.active{ border:0;background:linear-gradient(135deg,#3b82f6,#4f46e5);color:#fff;font-weight:700; box-shadow:0 7px 15px -7px rgba(59,130,246,.95); } .srm-tabs-row .srm-tab.active:before{background:#fff;opacity:.95} .srm-tabs-row .srm-tab.active:after{display:none} /* 人员下拉：彻底移除原生箭头，仅 hover / 聚焦浮出微 caret（与收录表同款做法） */ .srm-tabs-row .srm-person-select{ margin-left:auto;height:38px;padding:0 12px;gap:7px; border:1px solid #e2e9f3;border-radius:11px;background:#fff; color:#64748b;font-size:12.5px;box-shadow:0 1px 2px rgba(25,42,70,.05); } .srm-tabs-row .srm-person-select>i{color:#8b5cf6;font-size:12px} .srm-tabs-row .srm-person-select select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; border:0!important;background:transparent!important;outline:0;cursor:pointer; color:#1e293b;font-size:12.5px;font-weight:700;padding:0 2px; } .srm-tabs-row .srm-person-select select::-ms-expand{display:none} .srm-tabs-row .srm-person-select select:hover{color:#2563eb} .srm-tabs-row .srm-person-select:after{ content:"";width:4px;height:4px;flex:none; border-right:1.5px solid #94a3b8;border-bottom:1.5px solid #94a3b8; transform:rotate(45deg) translate(-1px,-1px);opacity:0;transition:.16s ease; } .srm-tabs-row .srm-person-select:hover:after, .srm-tabs-row .srm-person-select:focus-within:after{opacity:.8} .srm-tabs-row .srm-person-select:focus-within{ border-color:#b9d4fa;box-shadow:0 0 0 3px rgba(59,130,246,.14),0 1px 2px rgba(25,42,70,.05); } /* ---- 3. 统计卡：4 色身份 + 渐变图标块 + 各自的次要指标 ---- */ .srm-stat{ position:relative;border:1px solid #e4eaf3;border-radius:14px;padding:16px 17px 14px; background:#fff;box-shadow:0 1px 2px rgba(25,42,70,.03);overflow:visible; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .srm-stat:has(.srm-card-filter[open]){z-index:90} .srm-stat:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--srm-t1),var(--srm-t2))} .srm-stat:hover{transform:translateY(-2px);border-color:var(--srm-tb);box-shadow:0 16px 30px -18px var(--srm-ts)} .srm-stat-head{display:flex;align-items:center;justify-content:flex-start;gap:11px;color:#5b6a80;font-size:13px;font-weight:650} .srm-stat-label{min-width:0;white-space:nowrap} .srm-period-trigger{ display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:28px;padding:0 10px; border:1px solid #dce5f2;border-radius:9px;background:linear-gradient(180deg,#fff,#f7faff); color:#52627a;font:inherit;font-size:11.5px;font-weight:750;cursor:pointer; box-shadow:0 2px 5px rgba(30,64,112,.05);transition:border-color .16s ease,box-shadow .16s ease,color .16s ease; } .srm-period-trigger i{font-size:9px;color:#8fa0b8;transition:transform .16s ease} .srm-period-trigger:hover,.srm-period-trigger.open{border-color:#a9c7f4;color:#2563eb;box-shadow:0 0 0 3px rgba(59,130,246,.11)} .srm-period-trigger.open i{transform:rotate(180deg);color:#2563eb} .srm-period-panel{min-width:118px} .srm-period-panel .srm-dd-head{font-size:11px;color:#718096} .srm-stat-icon{ width:40px;height:40px;flex:0 0 40px;border-radius:12px; display:grid;place-items:center;color:#fff;font-size:16px; background:linear-gradient(135deg,var(--srm-t1),var(--srm-t2)); box-shadow:0 9px 18px -9px var(--srm-ts),inset 0 1px 0 rgba(255,255,255,.36); } .srm-stat-value{ display:flex;align-items:baseline;gap:5px; font-size:31px;line-height:1;font-weight:790;letter-spacing:-.6px; margin:15px 0 12px;color:#0f172a;font-variant-numeric:tabular-nums; } .srm-stat-value small{font-size:12.5px;font-weight:600;color:#94a3b8;margin-left:0} .srm-stat-foot{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding-top:10px;border-top:1px dashed #eef2f8;font-size:11.5px; } .srm-stat-sub{display:inline-flex;align-items:center;gap:6px;color:#9aa5b5;font-weight:600} .srm-stat-sub i{font-size:10px;opacity:.85} .srm-stat-sub b{color:#475569;font-weight:750;font-variant-numeric:tabular-nums} .srm-stat-tag{ display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:99px; font-size:11px;font-weight:700;white-space:nowrap;color:var(--srm-t1);background:var(--srm-tag); } /* 四色身份：靛蓝=内容 / 紫=阅读量 / 玫红=爆文·点赞 / 翠绿=已就绪 */ .srm-ct-blue{--srm-t1:#2563eb;--srm-t2:#60a5fa;--srm-tb:#bed8fb;--srm-ts:rgba(37,99,235,.60);--srm-tag:#edf4ff} .srm-ct-violet{--srm-t1:#7c3aed;--srm-t2:#a855f7;--srm-tb:#d9c9fb;--srm-ts:rgba(124,58,237,.55);--srm-tag:#f4efff} .srm-ct-rose{--srm-t1:#e11d48;--srm-t2:#fb7185;--srm-tb:#fbc9d4;--srm-ts:rgba(225,29,72,.48);--srm-tag:#fff0f4} .srm-ct-green{--srm-t1:#059669;--srm-t2:#34d399;--srm-tb:#bce8d4;--srm-ts:rgba(5,150,105,.50);--srm-tag:#eafaf3} /* ---- 4. 表头工具条：上下文胶囊 + 计数徽章 + 编辑提示 ---- */ .srm-toolbar{ background:linear-gradient(180deg,#fbfcff,#fff); border:1px solid #e4eaf3;border-bottom:0; border-radius:14px 14px 0 0;padding:11px 14px; } .srm-filter-context{display:inline-flex;align-items:center;gap:8px;color:#64748b;font-size:12.5px;font-weight:600} .srm-filter-context i{color:#8b5cf6} .srm-filter-context em{ font-style:normal;font-weight:800;color:#fff;font-size:11.5px;margin-left:2px; min-width:22px;height:20px;padding:0 7px;border-radius:99px; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#3b82f6,#4f46e5); box-shadow:0 6px 13px -7px rgba(59,130,246,.95); } .srm-toolbar-tip{display:inline-flex;align-items:center;gap:6px;color:#a8b2c2;font-size:11.5px;font-weight:600;margin-right:5px} .srm-toolbar-tip i{color:#c6cfdc} .srm-table-wrap{border-radius:0 0 14px 14px;border-color:#e4eaf3} /* 窄屏：分段控件独占一行时，人员下拉回到行首对齐 */ @media(max-width:1100px){ .srm-tabs-row .srm-person-select{margin-left:0} .srm-tabs-row .srm-tabs{flex-basis:100%} } /* ========================================================================== 顶部区 V4 —— 方案A「指挥台」融合 · 全尺寸放大 · 收留白 · 关键列常驻 -------------------------------------------------------------------------- ① 面色归一（治「大横框不融合 / 突兀 / 配色不搭」） 病根：一屏四张脸 —— 标题条白+双蓝晕(#d9e8ff 叠页级 #e9f1ff，两个蓝都不在本页 调色板)、筛选条冷灰 #f4f7fc(全页唯一灰面)、工具条微渐变白、统计卡纯白。 处方：全页只剩「白(卡) + 页底渐变」两种面；品牌色收敛到卡左 4px 渐变竖条； 标题条 + 筛选条合并成一张「指挥台」卡（顶部 3 块板 → 1 块）。 ★ 合并卡绝不能 overflow:hidden —— 会裁掉品类绑定弹层 .srm-pop (position:absolute;top:42px，本就靠溢出卡外显示)。故竖条改内缩 :before。 ② 全尺寸放大（治「框太小 / 数据展示不完整」）：基准 ~1.2x，逐项见下。 ③ 收留白（治「页面周围空白较多」）：原单侧 24(page-section)+30(shell)=54px， 现 shell margin:0 -12px 吃掉一半 + padding 30→22 → 单侧 12+22=34px，省 40px 给内容。 ④ 关键列常驻：15 列 + 放大字号后表格宽约 1970px，1920 屏必横滚（改造前也滚 98px）。 故首列(发布时间)与末列(操作) sticky 常驻 —— 滚到哪都知道「这是哪条 + 能点什么」。 ========================================================================== */ /* ---------- 0. 收留白 + 去掉页级蓝晕（面色归一的前提） ---------- */ .srm-shell{ background:transparent; /* 去掉页级 #e9f1ff 蓝晕，露出 .main-content 页底渐变 */ margin:0 -12px; /* 吃掉 .page-section 24px 内距的一半 */ padding:18px 22px 40px; /* 30px -> 22px */ } /* ---------- 1. 卡片三统一：边框 / 圆角 / 阴影 ---------- */ .srm-shell .srm-stat-grid{gap:20px;margin-bottom:20px} .srm-shell .srm-stat{border:1px solid #e6eaf2;border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04)} .srm-shell .srm-toolbar{background:#fff;border:1px solid #e6eaf2;border-bottom:0; border-radius:18px 18px 0 0;padding:16px 22px} .srm-shell .srm-table-wrap{border:1px solid #e6eaf2;border-radius:0 0 18px 18px} /* ---------- 2. 方案A：标题 + 筛选 → 一张「指挥台」卡 ---------- */ .srm-shell>.srm-console{ position:relative;background:#fff;border:1px solid #e6eaf2;border-radius:18px; margin-bottom:20px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 20px 42px -30px rgba(16,24,40,.6); } /* 唯一的品牌装饰：贯穿整卡的左侧 4px 渐变竖条（内缩，不与四角圆角打架） */ .srm-shell>.srm-console:before{ content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;z-index:3; border-radius:0 4px 4px 0; background:linear-gradient(180deg,#3b82f6 0%,#6366f1 52%,#8b5cf6 100%); } .srm-shell>.srm-console>.srm-top{ margin:0;border:0;border-radius:17px 17px 0 0;align-items:center; padding:23px 28px 21px 32px; /* 17/20/15/23 -> 23/28/21/32 */ background:radial-gradient(620px 210px at 100% -38px,rgba(37,99,235,.05),rgba(37,99,235,0) 72%),#fff; box-shadow:none; } .srm-shell>.srm-console>.srm-top:after{display:none} /* 竖条已上移到整卡，不再画在标题条上 */ .srm-shell>.srm-console>.srm-tabs-row{ margin:0;border:0;border-top:1px solid #eef2f8;border-radius:0 0 17px 17px;background:#fff; box-shadow:none;padding:14px 28px 14px 32px;gap:16px; /* 10/20/10/23 -> 14/28/14/32 */ } /* 分段控件：白卡上要有一条浅灰轨道才看得出「分段」 */ .srm-shell>.srm-console .srm-tabs{background:#f2f5fa;box-shadow:inset 0 0 0 1px #e7ecf5} .srm-shell>.srm-console .srm-tab:hover{background:#e9efff} .srm-shell>.srm-console .srm-person-select{border-color:#e6eaf2} /* ---------- 3. 放大：标题区 ---------- */ .srm-shell .srm-mark{width:56px;height:56px;flex:0 0 56px;border-radius:17px;font-size:23px} .srm-shell .srm-top .srm-title{font-size:31px} /* 26 -> 31 */ .srm-shell .srm-top .srm-subtitle{font-size:13.5px;margin-top:10px} /* 12.5 -> 13.5 */ .srm-shell .srm-live{height:27px;padding:0 12px;font-size:12.5px;gap:7px} /* h23 -> 27 */ .srm-shell .srm-live i{width:7px;height:7px} .srm-shell .srm-top .srm-btn-lg{height:46px;padding:0 20px;border-radius:12px;font-size:14px} /* h40 -> 46 */ /* ---------- 4. 放大：筛选条控件 ---------- */ .srm-shell .srm-tabs-row>.srm-range{height:46px;font-size:13.5px;gap:10px} /* h38 -> 46 */ .srm-shell .srm-tabs-row>.srm-range b{font-size:14.5px} .srm-shell .srm-tabs-row>.srm-range i{font-size:14px} .srm-shell .srm-tabs-row>.srm-range:after{height:22px} .srm-shell .srm-tabs-row .srm-tabs{padding:5px;gap:5px;border-radius:13px} .srm-shell .srm-tabs-row .srm-tab{height:42px;padding:0 24px;font-size:14.5px;border-radius:10px} /* h32 -> 42 */ .srm-shell .srm-tabs-row .srm-person-select{height:46px;padding:0 16px;border-radius:12px;font-size:14px;gap:9px} .srm-shell .srm-tabs-row .srm-person-select select{font-size:14px} /* ---------- 5. 放大：统计卡（核心） ---------- */ .srm-shell .srm-stat{padding:22px 24px 20px} /* 16/17/14 -> 22/24/20 */ .srm-shell .srm-stat:before{height:4px} /* 3 -> 4 */ .srm-shell .srm-stat-head{font-size:14.5px;gap:13px} /* 13 -> 14.5 */ .srm-shell .srm-stat-icon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;font-size:20px} /* 40 -> 48 */ .srm-shell .srm-stat-value{font-size:40px;margin:18px 0 14px} /* 31 -> 40 */ .srm-shell .srm-stat-value small{font-size:14px} .srm-shell .srm-stat-foot{font-size:13px;padding-top:13px} /* 11.5 -> 13 */ .srm-shell .srm-stat-sub i{font-size:12px} /* 10 -> 12 */ .srm-shell .srm-stat-tag{height:25px;padding:0 11px;font-size:12.5px} /* h21 -> 25 */ /* ---------- 6. 放大：表头工具条 ---------- */ .srm-shell .srm-filter-context{font-size:14px} /* 12.5 -> 14 */ .srm-shell .srm-filter-context em{min-width:28px;height:24px;font-size:13px;padding:0 10px} .srm-shell .srm-toolbar-tip{font-size:13px} /* 11.5 -> 13 */ /* ---------- 7. 放大：收录表 ---------- */ .srm-shell .srm-table{font-size:13.5px} /* 12 -> 13.5 */ .srm-shell .srm-entry-table{min-width:1660px} /* 1690 -> 1660：不人为撑宽 */ .srm-shell .srm-entry-table thead tr.srm-g th{height:46px;font-size:12.5px;letter-spacing:2px} /* h32 -> 46 */ .srm-shell .srm-entry-table thead tr.srm-h th{height:48px;font-size:13px} /* h38 -> 48 */ .srm-shell .srm-entry-table td{height:60px;padding:0 12px} /* h52 -> 60；内距保持线上 12 */ .srm-shell .srm-entry-table .srm-metric{font-size:14.5px} .srm-shell .srm-entry-table td select,.srm-shell .srm-entry-table td input{ height:38px;font-size:13.5px;max-width:190px} /* h30 -> 38 */ /* 语义胶囊：四列四种造型同步放大（胶囊内 select 走 height:100%，由 .srm-chip 控高） */ .srm-shell .srm-entry-table td .srm-chip{height:34px;padding:0 13px;font-size:13.5px;gap:7px} /* h28 -> 34 */ .srm-shell .srm-entry-table td .srm-chip>select{font-size:13.5px} .srm-shell .srm-entry-table td .srm-chip i{width:7px;height:7px} .srm-shell .srm-entry-table td .srm-chip-prod{width:124px} /* 110 -> 124 */ .srm-shell .srm-entry-table td .srm-chip-plat{width:108px} /* 94 -> 108 */ .srm-shell .srm-entry-table td .srm-chip-src{width:96px} /* 82 -> 96 */ .srm-shell .srm-entry-table td .srm-chip-type{width:100px} /* 84 -> 100 */ /* 日期轨道 */ .srm-shell .srm-entry-table td.srm-date-cell{min-width:158px;padding:0 18px!important} /* 132 -> 158 */ .srm-shell .srm-entry-table td.srm-date-cell:before{width:4px} .srm-shell .srm-entry-table td.srm-date-cell b{font-size:14px} /* 12.5 -> 14 */ .srm-shell .srm-entry-table td.srm-date-cell small{font-size:11.5px} /* 10.5 -> 11.5 */ .srm-shell .srm-entry-table td.srm-date-cell .srm-grp{font-size:11.5px;padding:4px 10px;margin-top:8px} .srm-shell .srm-entry-table td.srm-date-cell input{max-width:130px} /* ★ 标题列：234 -> 336，长标题不再被省略号吃掉 */ .srm-shell .srm-entry-table .srm-title-cell{max-width:336px} .srm-shell .srm-entry-table .srm-title-cell input{width:316px;max-width:316px} .srm-shell .srm-entry-table .srm-title-link{max-width:324px} /* 发布账号（名称 + 账号ID 合并列） */ .srm-shell .srm-entry-table td.srm-acct{min-width:190px} /* 146 -> 190 */ .srm-shell .srm-entry-table td.srm-acct b{font-size:14px} .srm-shell .srm-entry-table td.srm-acct small{font-size:11.5px} .srm-shell .srm-entry-table td.srm-acct input{max-width:170px} /* 互动数据 / 阅读量 / 发布链接 */ .srm-shell .srm-entry-table .srm-iv i{font-size:11px} /* 10 -> 11 */ .srm-shell .srm-entry-table .srm-view-val{font-size:14px} /* 12.5 -> 14 */ .srm-shell .srm-entry-table .srm-view-bar{width:70px} /* 62 -> 70 */ .srm-shell .srm-entry-table .srm-heat{font-size:11px} /* 10 -> 11 */ .srm-shell .srm-entry-table .srm-link-state{padding:8px 14px;font-size:12.5px} /* 6/11 -> 8/14 */ /* 合计行 */ .srm-shell .srm-entry-table .srm-sum,.srm-shell .srm-entry-table tfoot td{font-size:14px} .srm-shell .srm-entry-table .srm-sum b{font-size:15px} .srm-shell .srm-entry-table .srm-empty{padding:60px!important;font-size:14px!important} /* ---------- 8. ★ 关键列常驻：只吸左（发布时间时间轴锚点） ---------- ★★ 左列必须认 .srm-date-cell 类，不能写 tbody td:first-child： 日期格是按日期分组 rowspan 渲染的（v-if="showDate"），同一天的第 2+ 行没有该格， 写 :first-child 会把那些行的「产品」格吸到左边（设计稿阶段曾实测踩到）。 ★★ 表头只认 thead 第一行的 th：表头是双层结构，「发布时间 / 流量分析 / 备注 / 操作」 是 rowspan=2 挂在第一行的；若写 thead th:first-child / :last-child， 会连第二行的「产品」「阅读量」一起命中 → 两列被吸到两侧错位。 */ .srm-shell .srm-entry-table thead tr:first-child th:first-child, .srm-shell .srm-entry-table tbody td.srm-date-cell{ position:sticky;left:0;z-index:2; box-shadow:14px 0 18px -16px rgba(16,24,40,.5); } .srm-shell .srm-entry-table thead tr:first-child th:first-child{z-index:4} /* ★★ 末列(操作)「不」吸右 —— 实测（本地 1920 探针）：「吸右」会在默认滚动位置 盖住它左边的列，被盖住的宽度恒等于横向溢出量（本地 47px；线上带 220px 侧边栏约 260px， 会把「备注」「流量分析」整整两列压住）。文字被截成半截（"已通知补图" -> "已通知"）， 读起来像数据坏了 —— 与「数据展示要完整」的诉求正好相反。 故右侧改为：只给 1px 分隔线 + 12px 彩色滚动条做提示，绝不遮挡任何内容。 */ .srm-shell .srm-entry-table thead tr:first-child th:last-child, .srm-shell .srm-entry-table tbody td:last-child:not([colspan]){ border-left:1px solid #edf1f7; } .srm-shell .srm-entry-table tbody tr:hover td.srm-date-cell{ background:linear-gradient(180deg,#e8f0ff,#f4f9ff)!important} /* ---------- 9. 可滚动提示：横向滚动条加粗到 12px，一眼看出右边还有内容 ---------- */ .srm-shell .srm-table-wrap::-webkit-scrollbar{height:12px} .srm-shell .srm-table-wrap::-webkit-scrollbar-track{background:#f8fafc} .srm-shell .srm-table-wrap::-webkit-scrollbar-thumb{ background:#cbd5e1;border-radius:99px;border:3px solid #f8fafc} .srm-shell .srm-table-wrap::-webkit-scrollbar-thumb:hover{background:#94a3b8} /* ---------- 10. 窄屏回落（V4 的负边距 / 大内距在窄屏必须收回） ---------- */ @media(max-width:1100px){ .srm-shell{margin:0;padding:18px 16px 32px} .srm-shell>.srm-console>.srm-top{padding:20px 20px 18px 26px} .srm-shell>.srm-console>.srm-tabs-row{padding:12px 20px 12px 26px;gap:12px} .srm-shell .srm-stat{padding:18px 18px 16px} .srm-shell .srm-stat-value{font-size:34px;margin:15px 0 12px} } @media(max-width:560px){ .srm-shell{margin:0;padding:16px 12px 28px} .srm-shell>.srm-console>.srm-top{padding:18px 16px 16px 22px} .srm-shell>.srm-console>.srm-tabs-row{padding:10px 14px 10px 22px} .srm-shell .srm-stat{padding:16px 16px 14px} } /* ========================================================================== 布局 V5 —— 顶格 · 收边 · 框更大 · 卡片归位 · 两盒合流 · 图标淡色 -------------------------------------------------------------------------- 用户原话 → 落成规则（每条都能在线上实测验证） ①「上方顶格 / 页面两边和上方都有空白」 .srm-shell padding-top 18 -> 0 控制台卡与 topbar 之间留 14px 呼吸 ②「两边缩短空白间距 / 把元素框范围变大」 .page-section 两侧 24px **全吃掉** （V4 只吃了 12px）→ margin:0 -24px shell 左右内距 22 -> 14 ⇒ 单侧留白 34 -> 14px，两侧共省 40px 给内容 ③「文本等框内元素分辨率不动，而非跟着放大」 ★ 只放宽容器，不放字： V4 把 字号 12->13.5、行高 52->60、 页签 32->42、按钮 40->46 全部放大过， 这正是用户说的「跟着放大」→ V5 一律收回基准 ④「把数值卡片放到监测中台元素框中」 .srm-stat-grid 由独立区块移进 .srm-console ⑤「当前收录/全部/一部…/全部部门·」这一行放在表格上方、与表格共用一个大盒子 .srm-tabs-row 移出 .srm-console， 成为 .srm-table-box（筛选行+工具条+表）的头部 ⑥「种草监测中台的大盒子和下方表的大盒子用前端样式融合到一块，不要那么刻意地分开」 两卡间距 20 -> 7px；品牌竖条拆成上下两段， 上段从卡顶 16px 处直插卡底、下段从盒顶直插盒底内缩 16px ⇒ 视觉上是一条连续竖条贯穿两卡 ⑦「种草监测中台图标换个淡色」 实心渐变块 -> #eef4ff 淡底 + #d3e3fb 描边 + #3b82f6 图标 -------------------------------------------------------------------------- ★ 结构性约束（别踩） · .srm-table-box / .srm-console 都不能 overflow:hidden —— 会裁掉「品类绑定」弹层 .srm-pop（absolute;top:42px，靠溢出卡外显示） · 表头双层结构：sticky 只认 thead tr:first-child 的 th， 写 thead th:first-child/:last-child 会连第二行的「产品」「阅读量」一起命中 · 左列 sticky 只认 .srm-date-cell 类（日期格按 rowspan 分组渲染） ========================================================================== */ /* ---------- ① ② 外壳：顶格 + 收两边 ---------- */ .srm-shell{ background:transparent; /* 页级蓝晕已在 V4 去掉，保持无色 */ /* ★★ 两侧共两层内距：#page-seeding-monitor-vue 的 8px 24px 40px + .page-section 的 8px 24px 40px → 实际单侧 48px。只吃一层（V4 做法 -24px）仍剩 24px。这里两层一起吃（-48px）， 再由自己的 padding 定成 14px → 单侧总留白恰好 14px（1920 屏实测：右沿贴齐 1920）。 */ margin:0 -48px; padding:0 14px 40px; /* ① 上方 padding-top 归零 */ } .srm-shell > .srm-console{margin-top:14px} /* ① 与 topbar 下沿留一线呼吸，非留白 */ /* ---------- ③ 框更大：只放宽、不放字 ---------- */ .srm-shell > .srm-console > .srm-top{padding:20px 26px 18px 30px} /* 表格盒：筛选行 + 工具条 + 表，一个大盒子包住 */ .srm-shell > .srm-table-box{ position:relative;background:#fff;border:1px solid #e6eaf2;border-radius:18px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 20px 42px -30px rgba(16,24,40,.6); } /* ---------- ④ 数值卡片归位：进指挥台卡，露在标题条下方 ---------- */ .srm-shell > .srm-console > .srm-stat-grid{ gap:16px;margin:0;padding:0 26px 20px 30px; } .srm-shell > .srm-console > .srm-stat-grid > .srm-stat{ background:#fbfcfe;border-color:#eef2f8;box-shadow:none; } .srm-shell > .srm-console > .srm-stat-grid > .srm-stat:hover{ background:#fff;border-color:var(--srm-tb); } /* ---------- ⑤ 筛选行 = 表格盒头部 ---------- */ .srm-shell > .srm-table-box > .srm-tabs-row{ margin:0;border:0;border-bottom:1px solid #eef2f8;border-radius:17px 17px 0 0; background:#fff;box-shadow:none;padding:12px 20px 12px 24px;gap:16px; } .srm-shell > .srm-table-box > .srm-tabs-row > .srm-range{height:38px;font-size:12.5px;gap:9px} .srm-shell > .srm-table-box > .srm-tabs-row > .srm-range b{font-size:13px} .srm-shell > .srm-table-box > .srm-tabs-row > .srm-range i{font-size:13px} .srm-shell > .srm-table-box > .srm-tabs-row > .srm-range:after{height:20px} .srm-shell > .srm-table-box > .srm-tabs-row .srm-tabs{padding:4px;gap:4px;border-radius:11px} .srm-shell > .srm-table-box > .srm-tabs-row .srm-tab{height:32px;padding:0 16px;font-size:13px;border-radius:8px} .srm-shell > .srm-table-box > .srm-tabs-row .srm-person-select{height:38px;padding:0 12px;border-radius:11px;font-size:12.5px;gap:7px} .srm-shell > .srm-table-box > .srm-tabs-row .srm-person-select select{font-size:12.5px} /* 工具条：盒内一段（白底、无边框，由盒子统一描边） */ .srm-shell > .srm-table-box > .srm-toolbar{ background:transparent;border:0;border-radius:0;padding:12px 20px 10px 24px; } .srm-shell > .srm-table-box > .srm-table-wrap{ border:0;border-top:1px solid #e6eaf2;border-radius:0 0 17px 17px; } .srm-shell > .srm-table-box .srm-filter-context{font-size:12.5px} .srm-shell > .srm-table-box .srm-filter-context em{min-width:22px;height:20px;font-size:11.5px;padding:0 7px} .srm-shell > .srm-table-box .srm-toolbar-tip{font-size:11.5px} /* ---------- ⑦ 图标淡色 ---------- */ .srm-shell .srm-mark{ background:#eef4ff;color:#3b82f6;border:1px solid #d3e3fb; box-shadow:0 2px 6px rgba(37,99,235,.08); } .srm-shell .srm-mark i{color:#3b82f6} /* ---------- ③ 文本分辨率还原：V4 的放大一律收回基准 ---------- */ .srm-shell .srm-mark{width:50px;height:50px;flex:0 0 50px;border-radius:15px;font-size:20px} .srm-shell .srm-top .srm-title{font-size:26px} .srm-shell .srm-top .srm-subtitle{font-size:12.5px;margin-top:8px} .srm-shell .srm-live{height:23px;padding:0 10px;font-size:11.5px;gap:6px} .srm-shell .srm-live i{width:6px;height:6px} .srm-shell .srm-top .srm-btn-lg{height:40px;padding:0 16px;border-radius:10px;font-size:13px} .srm-shell .srm-stat{padding:15px 16px 13px} .srm-shell .srm-stat-head{font-size:12.5px;gap:11px} .srm-shell .srm-stat-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;font-size:16px} .srm-shell .srm-stat-value{font-size:28px;margin:15px 0 11px} .srm-shell .srm-stat-value small{font-size:12.5px} .srm-shell .srm-stat-foot{font-size:11.5px;padding-top:10px} .srm-shell .srm-stat-sub i{font-size:10px} .srm-shell .srm-stat-tag{height:21px;padding:0 9px;font-size:11px} .srm-shell .srm-table{font-size:12px} .srm-shell .srm-entry-table{min-width:1560px} .srm-shell .srm-entry-table thead tr.srm-g th{height:32px;font-size:11.5px;letter-spacing:1.5px} .srm-shell .srm-entry-table thead tr.srm-h th{height:38px;font-size:12px} .srm-shell .srm-entry-table td{height:52px;padding:0 12px} .srm-shell .srm-entry-table .srm-metric{font-size:12px} .srm-shell .srm-entry-table td select,.srm-shell .srm-entry-table td input{height:30px;font-size:12px;max-width:170px} .srm-shell .srm-entry-table td .srm-chip{height:28px;padding:0 10px;font-size:12px;gap:6px} .srm-shell .srm-entry-table td .srm-chip>select{font-size:12px} .srm-shell .srm-entry-table td .srm-chip i{width:6px;height:6px} .srm-shell .srm-entry-table td .srm-chip-prod{width:118px} .srm-shell .srm-entry-table td .srm-chip-plat{width:104px} .srm-shell .srm-entry-table td .srm-chip-src{width:92px} .srm-shell .srm-entry-table td .srm-chip-type{width:96px} .srm-shell .srm-entry-table td.srm-date-cell{min-width:132px;padding:0 14px!important} .srm-shell .srm-entry-table td.srm-date-cell:before{width:3px} .srm-shell .srm-entry-table td.srm-date-cell b{font-size:12.5px} .srm-shell .srm-entry-table td.srm-date-cell small{font-size:10.5px} .srm-shell .srm-entry-table td.srm-date-cell .srm-grp{font-size:10.5px;padding:3px 8px;margin-top:7px} .srm-shell .srm-entry-table .srm-title-cell{max-width:300px} .srm-shell .srm-entry-table .srm-title-cell input{width:280px;max-width:280px} .srm-shell .srm-entry-table .srm-title-link{max-width:288px} .srm-shell .srm-entry-table td.srm-acct{min-width:174px} .srm-shell .srm-entry-table td.srm-acct b{font-size:12.5px} .srm-shell .srm-entry-table td.srm-acct small{font-size:10.5px} .srm-shell .srm-entry-table td.srm-acct input{max-width:154px} .srm-shell .srm-entry-table .srm-iv i{font-size:10px} .srm-shell .srm-entry-table .srm-view-val{font-size:12.5px} .srm-shell .srm-entry-table .srm-view-bar{width:62px} .srm-shell .srm-entry-table .srm-heat{font-size:10px} .srm-shell .srm-entry-table .srm-link-state{padding:6px 11px;font-size:11px} .srm-shell .srm-entry-table .srm-sum,.srm-shell .srm-entry-table tfoot td{font-size:12px} .srm-shell .srm-entry-table .srm-sum b{font-size:13.5px} .srm-shell .srm-entry-table .srm-empty{padding:48px!important;font-size:13px!important} /* ---------- ⑥ 两卡合流：窄缝 + 连续竖条 ---------- */ .srm-shell > .srm-console{margin-bottom:7px} .srm-shell > .srm-console:before{top:16px;bottom:0;border-radius:4px 4px 0 0} .srm-shell > .srm-table-box:before{ content:"";position:absolute;left:0;top:0;bottom:16px;width:4px;z-index:3;border-radius:0 0 4px 4px; background:linear-gradient(180deg,#4f46e5 0%,#8b5cf6 60%,#a78bfa 100%); } /* ---------- ⑧ 窄屏回落 ---------- */ @media(max-width:1100px){ .srm-shell{margin:0;padding:0 16px 32px} .srm-shell > .srm-console > .srm-top{padding:18px 20px 16px 26px} .srm-shell > .srm-console > .srm-stat-grid{padding:0 20px 18px 26px} .srm-shell > .srm-table-box > .srm-tabs-row{padding:10px 16px 10px 22px;gap:12px} .srm-shell > .srm-table-box > .srm-toolbar{padding:10px 16px 8px 22px} } @media(max-width:560px){ .srm-shell{margin:0;padding:0 12px 28px} .srm-shell > .srm-console > .srm-top{padding:16px 14px 14px 20px} .srm-shell > .srm-console > .srm-stat-grid{padding:0 14px 16px 20px} .srm-shell > .srm-table-box > .srm-tabs-row{padding:10px 12px 10px 18px} .srm-shell > .srm-table-box > .srm-toolbar{padding:10px 12px 8px 18px} } /* ========================================================================== 布局 V6 —— 自定义下拉面板 · 数据不可选 · 批量删除 · 发布链接跳转 · 大图换图 -------------------------------------------------------------------------- 用户原话 → 落成规则 ①「产品/发布平台/发布渠道/笔记类型下拉框展开的列表样式太丑了」 原生