html, body, #root { height: 100%; margin: 0; } /* 左侧导航可滚动但不显示滚动条 */ .admin-sider-menu-scroll { scrollbar-width: none; -ms-overflow-style: none; } .admin-sider-menu-scroll::-webkit-scrollbar { display: none; } /* * 后台内容行:不换行 + 超出省略 * 覆盖主内容区、Drawer、Modal 内的表格与描述列表 */ .admin-layout .ant-table-cell, .ant-drawer .ant-table-cell, .ant-modal .ant-table-cell, .admin-layout .ant-descriptions-item-content, .ant-drawer .ant-descriptions-item-content, .ant-modal .ant-descriptions-item-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } .admin-layout .ant-descriptions-item-content, .ant-drawer .ant-descriptions-item-content, .ant-modal .ant-descriptions-item-content { max-width: 100%; } /* 表头同样不换行 */ .admin-layout .ant-table-thead > tr > th, .ant-drawer .ant-table-thead > tr > th, .ant-modal .ant-table-thead > tr > th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 操作列、含交互控件的不截断 */ .admin-layout .ant-table-cell:has(.ant-btn), .ant-drawer .ant-table-cell:has(.ant-btn), .ant-modal .ant-table-cell:has(.ant-btn), .admin-layout .ant-table-cell:has(.ant-space), .ant-drawer .ant-table-cell:has(.ant-space), .ant-modal .ant-table-cell:has(.ant-space) { overflow: visible; text-overflow: clip; max-width: none; } /* 代码块、表单区域保持原样 */ .admin-layout pre, .ant-drawer pre, .ant-modal pre, .admin-layout .ant-form-item-control-input, .ant-drawer .ant-form-item-control-input, .ant-modal .ant-form-item-control-input { white-space: pre-wrap; overflow: auto; text-overflow: unset; max-width: none; } /* 表格单元格双行信息合并为单行省略 */ .admin-cell-line { display: block; max-width: 100%; } .admin-cell-line-secondary { color: rgba(0, 0, 0, 0.45); font-size: 12px; } .admin-table-nowrap .ant-table-cell, .admin-table-nowrap .ant-table-cell-ellipsis { white-space: nowrap; } .admin-package-audit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .admin-package-audit-col { min-width: 0; } .admin-package-audit-text { white-space: pre-wrap; word-break: break-word; overflow: visible; max-width: none; } /* v3.5.1 #1 订单大屏:发布会现场 */ html:has(.big-screen-page), body:has(.big-screen-page), #root:has(.big-screen-page) { overflow: hidden; height: 100%; } .big-screen-page { position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(ellipse at 50% 18%, #163a6b 0%, #0b1e3a 42%, #061224 100%); color: #d6e8ff; padding: 20px 48px 24px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } .big-screen-stars { pointer-events: none; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 8% 18%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1px 1px at 22% 72%, rgba(160, 210, 255, 0.28), transparent), radial-gradient(1.5px 1.5px at 78% 24%, rgba(255, 255, 255, 0.22), transparent), radial-gradient(1px 1px at 91% 68%, rgba(160, 210, 255, 0.3), transparent), radial-gradient(1px 1px at 46% 88%, rgba(255, 255, 255, 0.18), transparent), radial-gradient(1.5px 1.5px at 61% 12%, rgba(160, 210, 255, 0.25), transparent); opacity: 0.7; } .big-screen-frame { pointer-events: none; position: absolute; inset: 14px 18px; } .big-screen-corner { position: absolute; width: 28px; height: 28px; border: 1px solid rgba(105, 192, 255, 0.7); } .big-screen-corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; } .big-screen-corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; } .big-screen-corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; } .big-screen-corner--br { bottom: 0; right: 0; border-left: none; border-top: none; } .big-screen-header { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(105, 192, 255, 0.18); } .big-screen-brand { display: flex; align-items: baseline; gap: 10px; } .big-screen-title { margin: 0; font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: 4px; color: #fff; } .big-screen-subtitle { font-size: 16px; color: rgba(200, 220, 245, 0.55); letter-spacing: 2px; } .big-screen-live-wrap { display: flex; align-items: center; gap: 12px; } .big-screen-live-label { font-size: 18px; color: rgba(230, 244, 255, 0.88); letter-spacing: 2px; } .big-screen-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border: 1px solid rgba(64, 169, 255, 0.7); border-radius: 6px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 2px; background: rgba(8, 28, 56, 0.55); } .big-screen-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 8px #ff4d4f; animation: big-screen-pulse 1.2s ease-in-out infinite; } @keyframes big-screen-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } .big-screen-hero { position: relative; z-index: 1; flex: 0 0 auto; text-align: center; padding: 16px 0 12px; } .big-screen-clock { font-size: 84px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 10px; color: #9fd3ff; text-shadow: 0 0 28px rgba(105, 192, 255, 0.45); } .big-screen-date { margin-top: 8px; font-size: 16px; letter-spacing: 4px; color: rgba(180, 210, 240, 0.65); } .big-screen-list { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; } .big-screen-list-head, .big-screen-row { display: grid; grid-template-columns: minmax(180px, 18%) minmax(0, 1fr) minmax(140px, 16%) minmax(160px, 18%); align-items: center; column-gap: 16px; width: 100%; box-sizing: border-box; } .big-screen-list-body { flex: 1 1 0%; min-height: 0; height: 0; overflow: hidden; position: relative; } .big-screen-track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; } .big-screen-track.is-rolling { animation: big-screen-marquee-up var(--marquee-ms, 20s) linear infinite; } .big-screen-track.is-paused { animation-play-state: paused; } @keyframes big-screen-marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } .big-screen-row { position: relative; flex: 0 0 auto; height: 68px; margin-bottom: 12px; padding: 0 28px 0 40px; background: rgba(18, 48, 88, 0.45); border: 1px solid transparent; border-radius: 4px; font-size: 22px; color: #e8f4ff; box-sizing: border-box; } .big-screen-row.is-latest { border-color: rgba(64, 169, 255, 0.85); box-shadow: 0 0 16px rgba(24, 144, 255, 0.28); } .big-screen-row--t1 { background: rgba(22, 54, 98, 0.48); border-color: rgba(105, 192, 255, 0.16); } .big-screen-row--t1 .big-screen-amount { color: #e6f4ff; } .big-screen-row--t2.is-latest { border-color: rgba(255, 229, 143, 0.95); box-shadow: 0 0 18px rgba(255, 229, 143, 0.42); } .big-screen-row--t3.is-latest { border-color: #ffd666; box-shadow: 0 0 22px rgba(250, 173, 20, 0.55); } .big-screen-row--t2 { background: rgba(64, 48, 8, 0.42); border-color: rgba(255, 229, 143, 0.45); color: #fff7d6; } .big-screen-row--t2 .big-screen-amount { color: #ffe58f; text-shadow: 0 0 10px rgba(255, 229, 143, 0.45); } .big-screen-row--t3 { background: rgba(72, 48, 0, 0.5); border-color: rgba(250, 173, 20, 0.75); color: #ffe7a3; box-shadow: 0 0 18px rgba(250, 173, 20, 0.28); } .big-screen-row--t3 .big-screen-amount { color: #ffd666; text-shadow: 0 0 14px rgba(255, 214, 102, 0.7); } .big-screen-row-mark { position: absolute; left: 12px; top: 50%; width: 10px; height: 22px; margin-top: -11px; border-radius: 6px; background: #40a9ff; box-shadow: 0 0 10px #40a9ff; } .big-screen-row--t2 .big-screen-row-mark { background: #ffe58f; box-shadow: 0 0 10px #ffe58f; } .big-screen-row--t3 .big-screen-row-mark { background: #ffd666; box-shadow: 0 0 12px #ffd666; } .big-screen-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.5px; min-width: 0; } .big-screen-amount--6d { font-size: 0.86em; letter-spacing: 0; } .big-screen-items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .big-screen-time, .big-screen-phone { font-variant-numeric: tabular-nums; letter-spacing: 1px; white-space: nowrap; } .big-screen-empty { position: absolute; left: 0; right: 0; /* 全屏高度黄金分割点(≈0.382),略偏上 */ top: 38.2%; transform: translateY(-50%); z-index: 2; text-align: center; color: rgba(145, 190, 230, 0.42); padding: 0 40px; font-size: 60px; letter-spacing: 6px; font-weight: 400; pointer-events: none; } .big-screen-fx { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; background: rgba(4, 12, 28, 0.38); } .big-screen-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .big-screen-fx-shock { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 214, 102, 0.85); animation: big-screen-shock 1.1s ease-out forwards; } @keyframes big-screen-shock { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(28); opacity: 0; } } .big-screen-fx-sweep { position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 38%, rgba(255, 245, 200, 0.22) 50%, transparent 62% ); background-size: 220% 100%; animation: big-screen-sweep 1.4s ease-out 0.15s both; } .big-screen-fx-sweep--alt { animation-delay: 0.55s; background: linear-gradient( 65deg, transparent 38%, rgba(255, 214, 102, 0.2) 50%, transparent 62% ); } .big-screen-fx-shock--late { animation-delay: 0.35s; border-color: rgba(255, 236, 179, 0.55); } @keyframes big-screen-sweep { from { background-position: 120% 0; opacity: 0; } 30% { opacity: 1; } to { background-position: -40% 0; opacity: 0; } } .big-screen-fx-card { position: relative; z-index: 2; min-width: min(420px, 92vw); max-width: min(920px, 92vw); padding: 28px 40px 32px; border-radius: 12px; text-align: center; background: rgba(8, 22, 48, 0.82); backdrop-filter: blur(8px); box-sizing: border-box; } .big-screen-fx-card--t1 { border: 2px solid rgba(105, 192, 255, 0.85); box-shadow: 0 0 32px rgba(24, 144, 255, 0.45); animation: big-screen-card-in-t1 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both; } .big-screen-fx-card--t2 { border: 2px solid rgba(255, 229, 143, 0.95); box-shadow: 0 0 40px rgba(255, 214, 102, 0.5); animation: big-screen-card-in-t2 0.6s cubic-bezier(0.16, 1.2, 0.3, 1) both; } .big-screen-fx-card--t3 { min-width: min(560px, 94vw); padding: 36px 48px 40px; border: 3px solid #ffd666; box-shadow: 0 0 28px rgba(255, 214, 102, 0.85), 0 0 80px rgba(250, 173, 20, 0.45); animation: big-screen-card-in-t3 0.7s cubic-bezier(0.12, 1.4, 0.2, 1) both; } @keyframes big-screen-card-in-t1 { from { opacity: 0; transform: translateY(80px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes big-screen-card-in-t2 { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes big-screen-card-in-t3 { 0% { opacity: 0; transform: scale(0.4) rotate(-4deg); } 55% { transform: scale(1.12) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } .big-screen-fx-kicker { font-size: 16px; letter-spacing: 8px; color: rgba(230, 244, 255, 0.7); margin-bottom: 8px; } .big-screen-fx-card--t2 .big-screen-fx-kicker, .big-screen-fx-card--t3 .big-screen-fx-kicker { color: #ffe58f; } .big-screen-fx-amount { font-size: clamp(44px, 8.5vw, 64px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 2px; line-height: 1.1; color: #e6f7ff; max-width: 100%; margin-inline: auto; } .big-screen-fx-amount--6d { font-size: clamp(36px, 7vw, 52px) !important; letter-spacing: 1px; } .big-screen-fx-card--t1 .big-screen-fx-amount { color: #91d5ff; text-shadow: 0 0 18px rgba(105, 192, 255, 0.6); } .big-screen-fx-card--t2 .big-screen-fx-amount { color: #ffe58f; text-shadow: 0 0 20px rgba(255, 229, 143, 0.7); animation: big-screen-amount-pop 0.8s ease-out 0.15s both; } .big-screen-fx-card--t3 .big-screen-fx-amount { font-size: clamp(52px, 10vw, 84px); color: #ffd666; text-shadow: 0 0 12px #ffd666, 0 0 36px rgba(250, 173, 20, 0.8); animation: big-screen-amount-flash 0.9s ease-in-out infinite; } .big-screen-fx-card--t3 .big-screen-fx-amount--6d { font-size: clamp(44px, 8.5vw, 68px) !important; letter-spacing: 1px; } @keyframes big-screen-amount-pop { 0% { transform: scale(0.7); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes big-screen-amount-flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } .big-screen-fx-items { margin-top: 12px; font-size: 22px; color: #fff; } .big-screen-fx-meta { margin-top: 10px; display: flex; justify-content: center; gap: 28px; font-size: 16px; color: rgba(210, 228, 250, 0.75); font-variant-numeric: tabular-nums; } @media (max-width: 1200px) { .big-screen-clock { font-size: 56px; } .big-screen-row { grid-template-columns: minmax(140px, 20%) minmax(0, 1fr) minmax(110px, 16%) minmax(130px, 18%); font-size: 16px; } .big-screen-amount--6d { font-size: 0.82em; } .big-screen-fx-amount { font-size: clamp(36px, 8vw, 44px); } .big-screen-fx-card--t3 .big-screen-fx-amount { font-size: clamp(40px, 9vw, 56px); } .big-screen-fx-amount--6d { font-size: clamp(32px, 6.5vw, 40px) !important; } .big-screen-fx-card--t3 .big-screen-fx-amount--6d { font-size: clamp(34px, 7vw, 48px) !important; } }