/** * 科技感通用增强：图标(mask)、品牌徽标、面板层次、可选全页氛围 * 页面需： 且根容器保持原有 class（如 .screen / .app） */ /* ---------- SVG 图标（白色图形 + mask，颜色用 background） ---------- */ .ti { display: inline-block; vertical-align: middle; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat; } .ti-lg { width: 28px; height: 28px; } .ti-md { width: 22px; height: 22px; } .ti-sm { width: 16px; height: 16px; } /* 用户 / 人员 */ .ti-users { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M16 11a4 4 0 10-4-4 4 4 0 004 4zm-8 1a3 3 0 10-3-3 3 3 0 003 3zm0 2c-2.67 0-8 1.34-8 4v2h10v-2c0-1.88 3.41-3.18 6.32-3.82A5.4 5.4 0 018 14zm8 0c-.71 0-1.39.05-2 .14 2.16.84 3 2.05 3 3.86v2h7v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); } /* 塔吊 / 工程 */ .ti-crane { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 22h2v-8h2v8h2V10h3l4-6V4h-3l-4 6H9V2H7v8H5V2H3v20zm14-10h-2v8h2v-8zm-1-8l3 3-3 3v-6z'/%3E%3C/svg%3E"); } /* 车辆 */ .ti-truck { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20 8h-3V4H3v13h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); } /* 监控 */ .ti-video { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 8h12v10H4V8zm14 0l4 3v4l-4 3V8z'/%3E%3C/svg%3E"); } /* 图表 */ .ti-chart { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 19h16v2H4v-2zm2-4h2v3H6v-3zm4-6h2v9h-2V9zm4-4h2v13h-2V5zm4 8h2v5h-2v-5z'/%3E%3C/svg%3E"); } /* 盾牌 / 安全 */ .ti-shield { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm0 17.91c-3.56-.98-6-4.54-6-8.82V6.39l6-2.25 6 2.25v4.7c0 4.28-2.44 7.84-6 8.82z'/%3E%3C/svg%3E"); } /* 停车 P */ .ti-parking { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 4h8a4 4 0 014 4v8a4 4 0 01-4 4H6V4zm2 2v12h6a2 2 0 002-2V8a2 2 0 00-2-2H8zm2 3h4v2h-4V9zm0 4h4v2h-4v-2z'/%3E%3C/svg%3E"); } /* 建筑 */ .ti-building { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 22h16V2H4v20zm2-2V4h5v16H6zm7 0V10h5v10h-5zM9 6h2v2H9V6zm0 4h2v2H9v-2zm5 6h2v2h-2v-2zm0-4h2v2h-2v-2zm0-4h2v2h-2V8z'/%3E%3C/svg%3E"); } /* 钱包 / 资产 */ .ti-wallet { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 7H3V5h18v2zm0 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V9h18zm-4 6h-2v2h2v-2z'/%3E%3C/svg%3E"); } /* 闪电 / 能耗 */ .ti-bolt { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 21h2l1-7h5l-8-12v9H7l4 10z'/%3E%3C/svg%3E"); } /* 网格 / 门户 */ .ti-grid { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z'/%3E%3C/svg%3E"); } /* 铃铛 / 告警 */ .ti-bell { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V11c0-3.07-1.63-5.64-4.5-6.32V4a1.5 1.5 0 00-3 0v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E"); } /* 叶子 / 环境 */ .ti-leaf { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A9 9 0 0021 8v-2l-4 2z'/%3E%3C/svg%3E"); } /* 书本 / 知识库 */ .ti-book { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18 2H8a3 3 0 00-3 3v15a2 2 0 002 2h11a2 2 0 002-2V4a2 2 0 00-2-2zm0 16H7V5a1 1 0 011-1h10v14zM6 20a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1v16H6z'/%3E%3C/svg%3E"); } /* 客服 / 耳机 */ .ti-headset { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 1a9 9 0 00-9 9v7a3 3 0 003 3h1v-8H5a1 1 0 01-1-1v-1a7 7 0 1114 0v1a1 1 0 01-1 1h-2v8h1a3 3 0 003-3v-7a9 9 0 00-9-9z'/%3E%3C/svg%3E"); } /* ---------- 品牌徽标 ---------- */ .brand-emblem { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(145deg, rgba(0, 232, 255, 0.35), rgba(45, 124, 255, 0.15)); border: 1px solid rgba(0, 232, 255, 0.45); box-shadow: 0 0 24px rgba(0, 232, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); display: grid; place-items: center; color: #00e8ff; } .brand-emblem .ti { width: 26px; height: 26px; } .brand-emblem-sm { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 18px rgba(56, 189, 248, 0.15); display: grid; place-items: center; color: var(--a, #38bdf8); } .brand-emblem-sm .ti-md { width: 22px; height: 22px; } /* ---------- 全页微弱光晕（不挡操作） ---------- */ html.tech-page .screen, html.tech-page .app, html.tech-page .shell, html.tech-page .wrap { position: relative; } html.tech-page .screen::before, html.tech-page .app::before, html.tech-page .shell::before, html.tech-page .wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 45% at 85% 12%, rgba(0, 232, 255, 0.07), transparent 55%), radial-gradient(ellipse 50% 40% at 10% 88%, rgba(45, 124, 255, 0.06), transparent 50%); opacity: 1; } html.tech-page .layout, html.tech-page .lay, html.tech-page .wrap > .grid, html.tech-page .shell > * { position: relative; z-index: 1; } html.tech-page .screen > *, html.tech-page .app > * { position: relative; z-index: 1; } html.tech-page .wrap > * { position: relative; z-index: 1; } /* ---------- 面板科技层次 ---------- */ html.tech-page .panel { position: relative; overflow: hidden; } html.tech-page .panel::after { content: ""; position: absolute; right: -25%; top: -50%; width: 55%; height: 120%; background: radial-gradient(ellipse, rgba(56, 189, 248, 0.09), transparent 65%); pointer-events: none; z-index: 0; } html.tech-page .panel > * { position: relative; z-index: 1; } /* 物业/停车等 ph 内 h2 左侧小图标槽 */ html.tech-page .ph { display: flex; align-items: center; gap: 8px; } html.tech-page .ph h2 { display: flex; align-items: center; gap: 8px; } html.tech-page .ph-ico { color: var(--cyan, var(--a, #38bdf8)); opacity: 0.95; } /* ---------- 门户专用 ---------- */ html.tech-page .section-title h2 { display: flex; align-items: center; gap: 10px; } html.tech-page .sec-ico { color: var(--cyan); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.4)); } html.tech-page .tcard .no { display: flex; align-items: center; gap: 8px; } html.tech-page .tcard-ico { color: var(--accent, #38bdf8); opacity: 0.9; } html.tech-page .topic h3 { display: flex; align-items: center; gap: 10px; } html.tech-page .topic-ico { opacity: 0.95; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); } html.tech-page .cp h4 { display: flex; align-items: center; gap: 8px; } /* ---------- KPI 条小图标（nth 子项） ---------- */ html.tech-page .kpi-strip .kpi, html.tech-page .strip .cell { position: relative; padding-top: 26px; } html.tech-page .kpi-strip .kpi::before, html.tech-page .strip .cell::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; background: rgba(0, 229, 255, 0.85); -webkit-mask: var(--kpi-ico) center / contain no-repeat; mask: var(--kpi-ico) center / contain no-repeat; opacity: 0.9; } html.tech-page .kpi-strip .kpi:nth-child(1)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 11a4 4 0 100-8 4 4 0 000 8zm-8 9v-1c0-2 4-3.5 8-3.5s8 1.5 8 3.5v1H4z'/%3E%3C/svg%3E"); } html.tech-page .kpi-strip .kpi:nth-child(2)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 22h2v-8h2v8h2V10h3l4-6V4h-3l-4 6H9V2H7v8H5V2H3v20z'/%3E%3C/svg%3E"); } html.tech-page .kpi-strip .kpi:nth-child(3)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 21h2l1-7h5l-8-12v9H7l4 10z'/%3E%3C/svg%3E"); } html.tech-page .kpi-strip .kpi:nth-child(4)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 8h12v10H4V8zm14 0l4 3v4l-4 3V8z'/%3E%3C/svg%3E"); } html.tech-page .kpi-strip .kpi:nth-child(5)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 4h8a4 4 0 014 4v8a4 4 0 01-4 4H6V4zm2 2v12h6a2 2 0 002-2V8a2 2 0 00-2-2H8z'/%3E%3C/svg%3E"); } html.tech-page .kpi-strip .kpi:nth-child(6)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/%3E%3C/svg%3E"); } html.tech-page .strip .cell:nth-child(1)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M14 6l-1-2H5L4 6H2v2h20V6h-8zm-2 4H4v10a2 2 0 002 2h12a2 2 0 002-2V10h-8v2h-2v-2z'/%3E%3C/svg%3E"); } html.tech-page .strip .cell:nth-child(2)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 18h8v2H8v-2zm8-8l-4-4-4 4h3v6h2v-6h3z'/%3E%3C/svg%3E"); } html.tech-page .strip .cell:nth-child(3)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 7H3V5h18v2zm0 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V9h18zm-4 6h-2v2h2v-2z'/%3E%3C/svg%3E"); } html.tech-page .strip .cell:nth-child(4)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E"); } html.tech-page .strip .cell:nth-child(5)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); } /* 资产页 strip .cell 6 个 */ html.tech-page .strip .cell:nth-child(6)::before { --kpi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); } /* ---------- 大屏顶栏（含返回门户） ---------- */ html.tech-page .header-brand, html.tech-page .head-brand, html.tech-page .hdr-l, html.tech-page .top-l { display: flex; align-items: center; gap: 14px; } html.tech-page .with-portal-back { flex-direction: column; align-items: flex-start; gap: 8px; } html.tech-page .with-portal-back > .portal-back-row { display: flex; align-items: center; gap: 14px; } html.tech-page .header-brand-inner { line-height: 1.45; } html.tech-page .head-brand strong, html.tech-page .hdr-l strong, html.tech-page .top-l strong { display: block; } html.tech-page .head-brand, html.tech-page .hdr-l, html.tech-page .top-l { font-size: inherit; } html.tech-page .wrap { position: relative; } /* 返回数字化门户 */ .nav-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--nav-back, var(--cyan, #38bdf8)); text-decoration: none; border: 1px solid var(--nav-back-bd, rgba(56, 189, 248, 0.38)); border-radius: 6px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .nav-back:hover { background: rgba(56, 189, 248, 0.14); border-color: var(--nav-back-bd-hover, rgba(56, 189, 248, 0.62)); color: var(--nav-back-hover, #e0f2fe); } /* ---------- 全局滚动条（贴合深色/科技风背景，弱化白轨与箭头） ---------- */ html.tech-page { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.38) rgba(3, 7, 18, 0.55); } /* Firefox：子区域滚动条与根一致（scrollable 元素使用 thin + 配色） */ html.tech-page * { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.38) rgba(3, 7, 18, 0.55); } /* WebKit / Chromium / Edge */ html.tech-page *::-webkit-scrollbar, html.tech-page::-webkit-scrollbar { width: 6px; height: 6px; } html.tech-page *::-webkit-scrollbar-track, html.tech-page::-webkit-scrollbar-track { background: rgba(3, 7, 18, 0.55); border-radius: 3px; } html.tech-page *::-webkit-scrollbar-thumb, html.tech-page::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(56, 189, 248, 0.42), rgba(56, 189, 248, 0.22) ); border-radius: 3px; border: 1px solid rgba(56, 189, 248, 0.12); } html.tech-page *::-webkit-scrollbar-thumb:hover, html.tech-page::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.5); border-color: rgba(56, 189, 248, 0.28); } /* 隐藏上下箭头按钮，避免系统默认灰白按钮突兀 */ html.tech-page *::-webkit-scrollbar-button, html.tech-page::-webkit-scrollbar-button { display: none; width: 0; height: 0; } html.tech-page *::-webkit-scrollbar-corner, html.tech-page::-webkit-scrollbar-corner { background: transparent; }