/* 全局基础样式:本地图标字体、主题变量、表单/弹窗、商品配置、列表及首页卡片。 */ /* 导入方:nuxt.config.ts。 */ /* 本地图标字体声明:URL对应public/icons中的字体,后续.pi字符映射依赖同一份字形表。 */ @font-face { font-family: primeicons; font-display: block; src: url(/icons/primeicons.C1oiW3xv.eot); src: url(/icons/primeicons.C1oiW3xv.eot?#iefix) format("embedded-opentype"), url(/icons/primeicons.Cw7jw2u3.woff2) format("woff2"), url(/icons/primeicons.DFbS0HxT.woff) format("woff"), url(/icons/primeicons.MNyB0pWW.ttf) format("truetype"), url(/icons/primeicons.DI7WxhAS.svg?#primeicons) format("svg"); font-weight: 400; font-style: normal; } .pi { speak: none; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: primeicons; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; } .pi:before { --webkit-backface-visibility: hidden; backface-visibility: hidden; } .pi-fw { text-align: center; width: 1.28571em; } .pi-spin { animation: 2s linear infinite fa-spin; } /* 尊重减少动态效果偏好:保留状态信息,降低或取消非必要动画。 */ @media (prefers-reduced-motion: reduce) { .pi-spin { transition-duration: 0s; transition-delay: 0s; animation-duration: 1ms; animation-iteration-count: 1; animation-delay: -1ms; } } /* 动画 fa-spin 的关键帧;动画名称与引用该名称的选择器需要同步维护。 */ @keyframes fa-spin { 0% { transform: rotate(0); } to { transform: rotate(359deg); } } .pi-eye-dropper:before { content: ""; } .pi-code-branch:before { content: ""; } .pi-signature:before { content: ""; } .pi-stamp:before { content: ""; } .pi-rectangle-xmark:before { content: ""; } .pi-note-sticky:before { content: ""; } .pi-sidebar:before { content: ""; } .pi-slash:before { content: ""; } .pi-grid-2:before { content: ""; } .pi-columns-2:before { content: ""; } .pi-rows-2:before { content: ""; } .pi-square:before { content: ""; } .pi-compress:before { content: ""; } .pi-pen-line:before { content: ""; } .pi-case-sensitive:before { content: ""; } .pi-text-color:before { content: ""; } .pi-list-tree:before { content: ""; } .pi-highlighter:before { content: ""; } .pi-text:before { content: ""; } .pi-heading-6:before { content: ""; } .pi-heading-5:before { content: ""; } .pi-heading-4:before { content: ""; } .pi-heading-3:before { content: ""; } .pi-heading-2:before { content: ""; } .pi-heading-1:before { content: ""; } .pi-heading:before { content: ""; } .pi-grip:before { content: ""; } .pi-grip-horizontal:before { content: ""; } .pi-grip-vertical:before { content: ""; } .pi-paragraph-right:before { content: ""; } .pi-paragraph-left:before { content: ""; } .pi-arrow-u-turn-up-left:before { content: ""; } .pi-arrow-u-turn-up-right:before { content: ""; } .pi-horizontal-rule:before { content: ""; } .pi-outdent:before { content: ""; } .pi-indent:before { content: ""; } .pi-list-ol:before { content: ""; } .pi-block-quote:before { content: ""; } .pi-superscript:before { content: ""; } .pi-subscript:before { content: ""; } .pi-strikethrough:before { content: ""; } .pi-underline:before { content: ""; } .pi-italic:before { content: ""; } .pi-bold:before { content: ""; } .pi-dot:before { content: ""; } .pi-folder-plus:before { content: ""; } .pi-receipt:before { content: ""; } .pi-asterisk:before { content: ""; } .pi-face-smile:before { content: ""; } .pi-pinterest:before { content: ""; } .pi-expand:before { content: ""; } .pi-pen-to-square:before { content: ""; } .pi-wave-pulse:before { content: ""; } .pi-turkish-lira:before { content: ""; } .pi-spinner-dotted:before { content: ""; } .pi-crown:before { content: ""; } .pi-pause-circle:before { content: ""; } .pi-warehouse:before { content: ""; } .pi-objects-column:before { content: ""; } .pi-clipboard:before { content: ""; } .pi-play-circle:before { content: ""; } .pi-venus:before { content: ""; } .pi-cart-minus:before { content: ""; } .pi-file-plus:before { content: ""; } .pi-microchip:before { content: ""; } .pi-twitch:before { content: ""; } .pi-building-columns:before { content: ""; } .pi-file-check:before { content: ""; } .pi-microchip-ai:before { content: ""; } .pi-trophy:before { content: ""; } .pi-barcode:before { content: ""; } .pi-file-arrow-up:before { content: ""; } .pi-mars:before { content: ""; } .pi-tiktok:before { content: ""; } .pi-arrow-up-right-and-arrow-down-left-from-center:before { content: ""; } .pi-ethereum:before { content: ""; } .pi-list-check:before { content: ""; } .pi-thumbtack:before { content: ""; } .pi-arrow-down-left-and-arrow-up-right-to-center:before { content: ""; } .pi-equals:before { content: ""; } .pi-lightbulb:before { content: ""; } .pi-star-half:before { content: ""; } .pi-address-book:before { content: ""; } .pi-chart-scatter:before { content: ""; } .pi-indian-rupee:before { content: ""; } .pi-star-half-fill:before { content: ""; } .pi-cart-arrow-down:before { content: ""; } .pi-calendar-clock:before { content: ""; } .pi-sort-up-fill:before { content: ""; } .pi-sparkles:before { content: ""; } .pi-bullseye:before { content: ""; } .pi-sort-down-fill:before { content: ""; } .pi-graduation-cap:before { content: ""; } .pi-hammer:before { content: ""; } .pi-bell-slash:before { content: ""; } .pi-gauge:before { content: ""; } .pi-shop:before { content: ""; } .pi-headphones:before { content: ""; } .pi-eraser:before { content: ""; } .pi-stopwatch:before { content: ""; } .pi-verified:before { content: ""; } .pi-delete-left:before { content: ""; } .pi-hourglass:before { content: ""; } .pi-truck:before { content: ""; } .pi-wrench:before { content: ""; } .pi-microphone:before { content: ""; } .pi-megaphone:before { content: ""; } .pi-arrow-right-arrow-left:before { content: ""; } .pi-bitcoin:before { content: ""; } .pi-file-edit:before { content: ""; } .pi-language:before { content: ""; } .pi-file-export:before { content: ""; } .pi-file-import:before { content: ""; } .pi-file-word:before { content: ""; } .pi-gift:before { content: ""; } .pi-cart-plus:before { content: ""; } .pi-thumbs-down-fill:before { content: ""; } .pi-thumbs-up-fill:before { content: ""; } .pi-arrows-alt:before { content: ""; } .pi-calculator:before { content: ""; } .pi-sort-alt-slash:before { content: ""; } .pi-arrows-h:before { content: ""; } .pi-arrows-v:before { content: ""; } .pi-pound:before { content: ""; } .pi-prime:before { content: ""; } .pi-chart-pie:before { content: ""; } .pi-reddit:before { content: ""; } .pi-code:before { content: ""; } .pi-sync:before { content: ""; } .pi-shopping-bag:before { content: ""; } .pi-server:before { content: ""; } .pi-database:before { content: ""; } .pi-hashtag:before { content: ""; } .pi-bookmark-fill:before { content: ""; } .pi-filter-fill:before { content: ""; } .pi-heart-fill:before { content: ""; } .pi-flag-fill:before { content: ""; } .pi-circle:before { content: ""; } .pi-circle-fill:before { content: ""; } .pi-bolt:before { content: ""; } .pi-history:before { content: ""; } .pi-box:before { content: ""; } .pi-at:before { content: ""; } .pi-arrow-up-right:before { content: ""; } .pi-arrow-up-left:before { content: ""; } .pi-arrow-down-left:before { content: ""; } .pi-arrow-down-right:before { content: ""; } .pi-telegram:before { content: ""; } .pi-stop-circle:before { content: ""; } .pi-stop:before { content: ""; } .pi-whatsapp:before { content: ""; } .pi-building:before { content: ""; } .pi-qrcode:before { content: ""; } .pi-car:before { content: ""; } .pi-instagram:before { content: ""; } .pi-linkedin:before { content: ""; } .pi-send:before { content: ""; } .pi-slack:before { content: ""; } .pi-moon:before { content: ""; } .pi-sun:before { content: ""; } .pi-youtube:before { content: ""; } .pi-vimeo:before { content: ""; } .pi-flag:before { content: ""; } .pi-wallet:before { content: ""; } .pi-map:before { content: ""; } .pi-link:before { content: ""; } .pi-credit-card:before { content: ""; } .pi-discord:before { content: ""; } .pi-percentage:before { content: ""; } .pi-euro:before { content: ""; } .pi-book:before { content: ""; } .pi-shield:before { content: ""; } .pi-paypal:before { content: ""; } .pi-amazon:before { content: ""; } .pi-phone:before { content: ""; } .pi-filter-slash:before { content: ""; } .pi-facebook:before { content: ""; } .pi-github:before { content: ""; } .pi-twitter:before { content: ""; } .pi-step-backward-alt:before { content: ""; } .pi-step-forward-alt:before { content: ""; } .pi-forward:before { content: ""; } .pi-backward:before { content: ""; } .pi-fast-backward:before { content: ""; } .pi-fast-forward:before { content: ""; } .pi-pause:before { content: ""; } .pi-play:before { content: ""; } .pi-compass:before { content: ""; } .pi-id-card:before { content: ""; } .pi-ticket:before { content: ""; } .pi-file-o:before { content: ""; } .pi-reply:before { content: ""; } .pi-directions-alt:before { content: ""; } .pi-directions:before { content: ""; } .pi-thumbs-up:before { content: ""; } .pi-thumbs-down:before { content: ""; } .pi-sort-numeric-down-alt:before { content: ""; } .pi-sort-numeric-up-alt:before { content: ""; } .pi-sort-alpha-down-alt:before { content: ""; } .pi-sort-alpha-up-alt:before { content: ""; } .pi-sort-numeric-down:before { content: ""; } .pi-sort-numeric-up:before { content: ""; } .pi-sort-alpha-down:before { content: ""; } .pi-sort-alpha-up:before { content: ""; } .pi-sort-alt:before { content: ""; } .pi-sort-amount-up:before { content: ""; } .pi-sort-amount-down:before { content: ""; } .pi-sort-amount-down-alt:before { content: ""; } .pi-sort-amount-up-alt:before { content: ""; } .pi-palette:before { content: ""; } .pi-undo:before { content: ""; } .pi-desktop:before { content: ""; } .pi-sliders-v:before { content: ""; } .pi-sliders-h:before { content: ""; } .pi-search-plus:before { content: ""; } .pi-search-minus:before { content: ""; } .pi-file-excel:before { content: ""; } .pi-file-pdf:before { content: ""; } .pi-check-square:before { content: ""; } .pi-chart-line:before { content: ""; } .pi-user-edit:before { content: ""; } .pi-exclamation-circle:before { content: ""; } .pi-android:before { content: ""; } .pi-google:before { content: ""; } .pi-apple:before { content: ""; } .pi-microsoft:before { content: ""; } .pi-heart:before { content: ""; } .pi-mobile:before { content: ""; } .pi-tablet:before { content: ""; } .pi-key:before { content: ""; } .pi-shopping-cart:before { content: ""; } .pi-comments:before { content: ""; } .pi-comment:before { content: ""; } .pi-briefcase:before { content: ""; } .pi-bell:before { content: ""; } .pi-paperclip:before { content: ""; } .pi-share-alt:before { content: ""; } .pi-envelope:before { content: ""; } .pi-volume-down:before { content: ""; } .pi-volume-up:before { content: ""; } .pi-volume-off:before { content: ""; } .pi-eject:before { content: ""; } .pi-money-bill:before { content: ""; } .pi-images:before { content: ""; } .pi-image:before { content: ""; } .pi-sign-in:before { content: ""; } .pi-sign-out:before { content: ""; } .pi-wifi:before { content: ""; } .pi-sitemap:before { content: ""; } .pi-chart-bar:before { content: ""; } .pi-camera:before { content: ""; } .pi-dollar:before { content: ""; } .pi-lock-open:before { content: ""; } .pi-table:before { content: ""; } .pi-map-marker:before { content: ""; } .pi-list:before { content: ""; } .pi-eye-slash:before { content: ""; } .pi-eye:before { content: ""; } .pi-folder-open:before { content: ""; } .pi-folder:before { content: ""; } .pi-video:before { content: ""; } .pi-inbox:before { content: ""; } .pi-lock:before { content: ""; } .pi-unlock:before { content: ""; } .pi-tags:before { content: ""; } .pi-tag:before { content: ""; } .pi-power-off:before { content: ""; } .pi-save:before { content: ""; } .pi-question-circle:before { content: ""; } .pi-question:before { content: ""; } .pi-copy:before { content: ""; } .pi-file:before { content: ""; } .pi-clone:before { content: ""; } .pi-calendar-times:before { content: ""; } .pi-calendar-minus:before { content: ""; } .pi-calendar-plus:before { content: ""; } .pi-ellipsis-v:before { content: ""; } .pi-ellipsis-h:before { content: ""; } .pi-bookmark:before { content: ""; } .pi-globe:before { content: ""; } .pi-replay:before { content: ""; } .pi-filter:before { content: ""; } .pi-print:before { content: ""; } .pi-align-right:before { content: ""; } .pi-align-left:before { content: ""; } .pi-align-center:before { content: ""; } .pi-align-justify:before { content: ""; } .pi-cog:before { content: ""; } .pi-cloud-download:before { content: ""; } .pi-cloud-upload:before { content: ""; } .pi-cloud:before { content: ""; } .pi-pencil:before { content: ""; } .pi-users:before { content: ""; } .pi-clock:before { content: ""; } .pi-user-minus:before { content: ""; } .pi-user-plus:before { content: ""; } .pi-trash:before { content: ""; } .pi-window-minimize:before { content: ""; } .pi-window-maximize:before { content: ""; } .pi-external-link:before { content: ""; } .pi-refresh:before { content: ""; } .pi-user:before { content: ""; } .pi-exclamation-triangle:before { content: ""; } .pi-calendar:before { content: ""; } .pi-chevron-circle-left:before { content: ""; } .pi-chevron-circle-down:before { content: ""; } .pi-chevron-circle-right:before { content: ""; } .pi-chevron-circle-up:before { content: ""; } .pi-angle-double-down:before { content: ""; } .pi-angle-double-left:before { content: ""; } .pi-angle-double-right:before { content: ""; } .pi-angle-double-up:before { content: ""; } .pi-angle-down:before { content: ""; } .pi-angle-left:before { content: ""; } .pi-angle-right:before { content: ""; } .pi-angle-up:before { content: ""; } .pi-upload:before { content: ""; } .pi-download:before { content: ""; } .pi-ban:before { content: ""; } .pi-star-fill:before { content: ""; } .pi-star:before { content: ""; } .pi-chevron-left:before { content: ""; } .pi-chevron-right:before { content: ""; } .pi-chevron-down:before { content: ""; } .pi-chevron-up:before { content: ""; } .pi-caret-left:before { content: ""; } .pi-caret-right:before { content: ""; } .pi-caret-down:before { content: ""; } .pi-caret-up:before { content: ""; } .pi-search:before { content: ""; } .pi-check:before { content: ""; } .pi-check-circle:before { content: ""; } .pi-times:before { content: ""; } .pi-times-circle:before { content: ""; } .pi-plus:before { content: ""; } .pi-plus-circle:before { content: ""; } .pi-minus:before { content: ""; } .pi-minus-circle:before { content: ""; } .pi-circle-on:before { content: ""; } .pi-circle-off:before { content: ""; } .pi-sort-down:before { content: ""; } .pi-sort-up:before { content: ""; } .pi-sort:before { content: ""; } .pi-step-backward:before { content: ""; } .pi-step-forward:before { content: ""; } .pi-th-large:before { content: ""; } .pi-arrow-down:before { content: ""; } .pi-arrow-left:before { content: ""; } .pi-arrow-right:before { content: ""; } .pi-arrow-up:before { content: ""; } .pi-bars:before { content: ""; } .pi-arrow-circle-down:before { content: ""; } .pi-arrow-circle-left:before { content: ""; } .pi-arrow-circle-right:before { content: ""; } .pi-arrow-circle-up:before { content: ""; } .pi-info:before { content: ""; } .pi-info-circle:before { content: ""; } .pi-home:before { content: ""; } .pi-spinner:before { content: ""; } /* 全局设计变量在这里定义;业务样式通过变量读取主题,不应逐组件硬编码一套颜色。 */ :root { --console-page-bg: #f8fafc; --console-panel-bg: #fff; --console-panel-border: #e2e8f0; --console-panel-shadow: 0 1px 2px #0000001a, 0 1px 3px #0000001a; --page-title-size: 1.25rem; --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "HarmonyOS Sans SC", monospace; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; color: var(--p-text-color, #23324d); background: var(--p-content-background, #fff); font-synthesis: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; font-family: HarmonyOS Sans SC, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 81.25%; line-height: 1.5; } *, :after, :before { box-sizing: border-box; } /* 基础页面尺寸与滚动规则;后续滚动条能力检测与这里的布局配合。 */ html { scrollbar-gutter: stable; } /* 按浏览器是否支持 not (scrollbar-gutter: stable) 分支处理滚动条布局,避免同一能力的两套规则同时生效。 */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* 按浏览器是否支持 (scrollbar-gutter: stable) 分支处理滚动条布局,避免同一能力的两套规则同时生效。 */ @supports (scrollbar-gutter: stable) { body.p-overflow-hidden { padding-right: 0 !important; } } body { min-width: 320px; margin: 0; } button, input, select, textarea { font: inherit; } a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ [tabindex]:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } img, video { max-width: 100%; } /* 第三方弹窗尺寸/滚动适配,作用于全站,修改前需检查各类业务对话框。 */ .p-dialog { max-width: calc(100vw - 24px); } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .p-dialog-content { overflow-wrap: anywhere; } .p-datatable-table-container { overscroll-behavior-x: contain; } .p-message { overflow-wrap: anywhere; } .p-tab { white-space: nowrap; flex-shrink: 0; } .p-tabs .p-tablist, .p-tabs .p-tablist-tab-list, .p-tabs .p-tab, .p-tabs .p-tab:not(.p-disabled):hover, .p-tabs .p-tabpanels { background: transparent; } .p-datatable { min-width: 0; max-width: 100%; } .p-datatable-header-cell { white-space: nowrap; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .p-datatable-table:not(:has(.p-datatable-empty-message)) { min-width: 680px; } .p-datatable-table:has(.p-datatable-empty-message) { table-layout: fixed; width: 100%; min-width: 0 !important; } .p-datatable-table:has(.p-datatable-empty-message) thead { display: none; } } /* 尊重减少动态效果偏好:保留状态信息,降低或取消非必要动画。 */ @media (prefers-reduced-motion: reduce) { *, :after, :before { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .app-dark { --console-page-bg: #09090b; --console-panel-bg: #18181b; --console-panel-border: #3f3f46; } .app-dark img[src$="/images/brand/logo.png"] { filter: brightness(2.5); } @media print { .app-dark img[src$="/images/brand/logo.png"] { filter: none; } } .instance-product-status.p-tag-warn { background: var(--p-yellow-100); color: var(--p-yellow-800); } .app-dark .instance-product-status.p-tag-warn { background: var(--p-yellow-950); color: var(--p-yellow-300); } /* 以下为商品配置页共享控件和汇总区域,不绑定某一种供应商模块。 */ .config-options, .config-page { flex-direction: column; gap: 32px; min-width: 0; display: flex; } .config-layout { grid-template-columns: minmax(0, 3.15fr) minmax(270px, 1fr); align-items: start; gap: 20px; min-width: 0; display: grid; } .config-options > .panel { min-width: 0; box-shadow: none; background: 0 0; border: 0; border-radius: 0; padding: 0; } .config-column-title, .config-options .section-title { border-bottom: 1px solid var(--p-content-border-color); color: var(--p-text-color); margin: 0 0 22px; padding: 0 0 15px; font-size: 1rem; font-weight: 400; line-height: 1.429rem; } .config-page .form-row { flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; margin-bottom: 24px; display: flex; } .config-page .form-row:last-child { margin-bottom: 0; } .config-page .form-row > label, .config-page .form-row > span[id] { color: var(--p-text-color); font-size: 1rem; line-height: 1.429rem; } .config-page .form-row > .p-multiselect, .config-page .form-row > .p-select, .config-page .form-row > .p-textarea { width: 100%; max-width: 470px; } .config-page .grow, .config-page .p-inputnumber { width: 100%; min-width: 0; max-width: 470px; } .config-page .p-inputnumber-input, .config-page .p-multiselect-label-container, .config-page .p-select-label { min-width: 0; } .config-page .p-inputnumber-input { width: 100%; } .config-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; display: grid; } .config-choice { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); min-height: 60px; color: var(--p-text-color); text-align: left; cursor: pointer; overflow-wrap: anywhere; border-radius: var(--radius-md); flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 17px 14px; font-size: 1rem; font-weight: 600; line-height: 1.429rem; display: flex; box-shadow: 0 1px 3px #0000001a; } .config-choice small { color: var(--p-text-muted-color); font-size: 0.875rem; font-weight: 400; } .config-choice.active { outline: 1px solid var(--p-primary-color); background: var(--p-highlight-background); color: var(--p-highlight-color); } .config-choice.active, .config-choice:hover { border-color: var(--p-primary-color); } .config-choice.active:only-child { outline: 0; border-color: var(--p-content-border-color); background: var(--p-content-hover-background); color: var(--p-text-color); cursor: default; } .config-choice:focus-visible, .image-group:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } .config-choice:disabled, .image-group:disabled { opacity: 0.6; cursor: not-allowed; } .config-choices.compact { flex-wrap: wrap; gap: 0; max-width: 100%; display: flex; } .compact .config-choice { min-width: 96px; min-height: 36px; box-shadow: none; border-radius: 0; align-items: center; margin: 0 -1px -1px 0; padding: 7px 18px; font-weight: 400; } .compact .config-choice:first-child { border-radius: 5px 0 0 5px; } .compact .config-choice:last-child { border-radius: 0 5px 5px 0; } .compact .config-choice:only-child { border-radius: var(--radius-md); } .compact .config-choice.active { z-index: 1; position: relative; } .compact .config-choice:focus-visible { z-index: 2; position: relative; } .config-page .image-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; display: grid; } .config-page .image-group { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); min-height: 72px; color: var(--p-text-color); text-align: left; cursor: pointer; border-radius: var(--radius-md); align-items: center; gap: 14px; padding: 14px; font-size: 1rem; font-weight: 600; display: flex; box-shadow: 0 1px 3px #0000001a; } .config-page .image-group.active { border-color: var(--p-primary-color); outline: 1px solid var(--p-primary-color); background: var(--p-highlight-background); color: var(--p-highlight-color); } .config-page .image-group > span { overflow-wrap: anywhere; min-width: 0; } .config-page .image-group:hover:not(:disabled) { border-color: var(--p-primary-color); } .config-page .form-row .image-groups { margin-bottom: 0; } .config-summary-wrap { min-width: 0; max-width: 100%; } .config-column-title { margin-bottom: 14px; } .config-page .config-checkout { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); border-radius: var(--radius-md); min-width: 0; max-width: 100%; padding: 16px 14px; scroll-margin-top: calc(var(--console-top-offset, 56px) + 19px); box-shadow: 0 1px 3px #0000001a; } .config-checkout .section-title { color: var(--p-text-color); margin: 0 0 12px; font-size: 1.125rem; font-weight: 600; line-height: 1.714rem; } .config-summary { flex-direction: column; gap: 10px; margin: 0; display: flex; } .config-summary-row { grid-template-columns: 68px minmax(0, 1fr); align-items: baseline; gap: 12px; font-size: 1rem; line-height: 1.429rem; display: grid; } .config-summary-row dt { min-width: 0; color: var(--p-text-muted-color); overflow-wrap: anywhere; } .config-summary-row dd { text-align: right; overflow-wrap: anywhere; min-width: 0; margin: 0; } .checkout-divider { border-top: 1px solid var(--p-content-border-color); margin: 16px 0; } .config-page .config-checkout .form-row { gap: 5px; margin-bottom: 12px; } .config-page .config-checkout .form-row > label { color: var(--p-text-muted-color); } .config-page .config-checkout .grow, .config-page .config-checkout .p-inputnumber { max-width: 100%; } .config-page .config-checkout .p-inputnumber-input { flex: 1; width: 0; min-width: 0; } .config-page .config-checkout .form-row > span[id] { color: var(--p-text-muted-color); } .config-page .config-checkout .form-row > .p-select { max-width: none; } .config-page .buy-bar { border-top: 1px solid var(--p-content-border-color); flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; display: flex; } .config-page .price-area { flex-direction: column; align-items: flex-start; gap: 7px; display: flex; } .config-page .price-label { color: var(--p-text-color); font-size: 1.125rem; font-weight: 600; line-height: 1.714rem; } .config-page .price-value { font-variant-numeric: tabular-nums; max-width: 100%; color: var(--p-primary-color); overflow-wrap: anywhere; font-size: 1.75rem; font-weight: 650; line-height: 1.3; } .config-page .price-pending { color: var(--p-text-muted-color); align-items: center; gap: 8px; font-size: 1.25rem; display: inline-flex; } .config-page .level-hint { color: var(--p-green-600, #16a34a); overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.6; } .config-page .quote-status { background: var(--p-content-hover-background); color: var(--p-text-muted-color); border-radius: var(--radius-sm); flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; font-size: 0.875rem; line-height: 1.6; display: flex; } .config-page .quote-status p { margin: 0; } .config-page .buy-actions { flex-direction: column-reverse; gap: 8px; display: flex; } .config-page .buy-actions .p-button { white-space: nowrap; width: 100%; min-width: 0; min-height: 36px; padding-inline: 10px; font-size: 1rem; } .config-page .cart-confirmation { background: var(--p-content-hover-background); color: var(--p-text-color); border-radius: var(--radius-md); flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 12px; font-size: 0.875rem; line-height: 1.286rem; display: flex; } .cart-confirmation-message { align-items: center; gap: 7px; display: inline-flex; } .cart-confirmation-message > i { color: var(--p-green-500, #22c55e); font-size: 1rem; } .config-page .cart-confirmation-link { color: var(--p-primary-color); white-space: nowrap; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; display: inline-flex; } .cart-confirmation-link > i { font-size: 0.625rem; } .config-page .cart-confirmation-link:hover { text-underline-offset: 3px; text-decoration: underline; } .cart-confirmation-link:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; border-radius: 2px; } .config-page .config-checkout .promo-body { flex-wrap: wrap; } .config-page .config-checkout .promo-input { flex: 120px; width: 100%; min-width: 0; } .config-page .p-message { overflow-wrap: anywhere; min-width: 0; } .config-load-error { flex-direction: column; align-items: flex-start; gap: 14px; display: flex; } .config-page > .config-load-error, .config-page > .config-loading, .product-order-page > .config-load-error, .product-order-page > .config-loading { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); width: 100%; padding: 24px; } .config-loading .p-skeleton { width: 100%; } .config-mobile-label { align-items: center; gap: 8px; font-size: 0.9375rem; display: inline-flex; } .config-mobile-total { display: none; } /* 视口条件 (width>=1024px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width>=1024px) { .config-summary-wrap { position: sticky; top: calc(var(--console-top-offset, 56px) + 20px); } } /* 视口条件 (width<1200px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<1200px) { .config-choices, .config-page .image-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 视口条件 (width<1024px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<1024px) { .config-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .config-page { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .config-summary-wrap { width: 100%; position: static; } .config-page .config-checkout { width: 100%; padding: 16px; } .config-summary-wrap .config-column-title { display: block; } .config-page .config-checkout .price-value { word-break: break-all; font-size: 1.625rem; } .config-page .config-checkout .buy-actions .p-button { white-space: normal; min-height: 44px; } .config-mobile-total { padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--p-content-border-color); background: var(--p-content-background); min-height: 64px; color: var(--p-text-color); z-index: 40; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 12px; text-decoration: none; display: grid; position: fixed; bottom: 0; left: 0; right: 0; } .config-mobile-total > span:first-child { min-width: 0; color: var(--p-text-muted-color); flex-direction: column; font-size: 0.875rem; display: flex; } .config-mobile-total strong { color: var(--p-primary-color); overflow-wrap: anywhere; word-break: break-all; font-size: 1.5rem; line-height: 1.857rem; } .config-mobile-label { justify-content: flex-end; min-width: 0; max-width: 132px; min-height: 44px; } .config-mobile-label > i { flex-shrink: 0; } } /* 视口条件 (width<640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<640px) { .config-choices, .config-page .image-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .config-choice { padding: 15px 14px; } .config-page .image-group { gap: 10px; padding: 12px; } .compact .config-choice { flex: 1; min-width: 78px; } .config-page .form-row > .p-multiselect, .config-page .form-row > .p-select, .config-page .form-row > .p-textarea, .config-page .grow, .config-page .p-inputnumber { max-width: none; } .config-page .form-row { margin-bottom: 24px; } } /* 尊重减少动态效果偏好:保留状态信息,降低或取消非必要动画。 */ @media (prefers-reduced-motion: reduce) { .config-page .pi-spin { animation: none; } } .config-page .price-pending, .config-page .price-value { min-height: 2.275rem; line-height: 2.275rem; } .config-loading-fields { flex-direction: column; gap: 16px; display: flex; } .config-loading-summary { flex-direction: column; gap: 10px; display: flex; } .product-switch-status { color: var(--p-text-muted-color); margin: 0; font-size: 0.875rem; } .config-page > .config-loading-shell { padding-bottom: 0; } /* 以下为业务列表共享外壳;查询、空态、表格与分页需要一起维持窄屏可用性。 */ .list-page { flex-direction: column; gap: 24px; min-width: 0; max-width: 100%; display: flex; } .list-head { justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; display: flex; } .list-head h2 { color: var(--p-text-color); margin: 0; font-size: var(--page-title-size); font-weight: 600; } .list-head-actions { flex-shrink: 0; align-items: center; gap: 8px; display: flex; } .list-toolbar { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; display: flex; } .host-list-page .list-toolbar { flex-direction: column; } .list-toolbar-right { flex-wrap: wrap; align-items: center; gap: 8px; display: flex; } .list-segments { background: color-mix( in srgb, var(--p-content-hover-background) 60%, transparent ); border-radius: var(--radius-sm); align-items: center; gap: 2px; max-width: 100%; padding: 3px; display: inline-flex; overflow-x: auto; } .list-seg { min-height: 30px; color: var(--p-text-muted-color); white-space: nowrap; cursor: pointer; background: 0 0; border: 1px solid #0000; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 1rem; line-height: 1.5; } .list-seg.active, .list-seg:hover { color: var(--p-text-color); } .list-seg.active { background: var(--p-content-background); border-color: var(--p-content-border-color); font-weight: 500; box-shadow: 0 1px 2px #0000000a; } .list-search { width: 280px; } .list-search > .p-inputtext { width: 100%; } .list-select { width: 280px; } .list-table { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); border-radius: var(--radius-md); min-width: 0; max-width: 100%; overflow: hidden; box-shadow: 0 2px 3px #00000014; } .list-table:has(.p-datatable-mask):has(.p-datatable-empty-message) { min-height: 100dvh; } .list-table .p-datatable-header-cell { color: var(--p-text-color); white-space: nowrap; background: 0 0; font-weight: 500; } .list-table .p-datatable-header-cell, .list-table .p-datatable-tbody > tr > td { border-color: var(--p-content-border-color); padding: 18px 14px; } .list-table .p-tag, .list-table .p-tag-label { white-space: nowrap; } .list-table .p-tag { border-radius: 20px; padding: 2px 8px; font-size: 0.875rem; font-weight: 600; } .list-table .p-datatable-tbody > tr.clickable { cursor: pointer; } .col-id, .col-mono { font-family: inherit; } .col-id { color: var(--p-text-color); } .list-empty { color: var(--p-text-muted-color); text-align: center; flex-direction: column; align-items: center; gap: 10px; padding: 56px 20px; display: flex; } .list-empty > i { opacity: 0.5; font-size: 2.375rem; } .list-empty-title { color: var(--p-text-color); font-size: 1.0625rem; } .list-empty-desc { max-width: 42em; margin: 0; font-size: 0.9375rem; line-height: 1.7; } .list-foot { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; display: flex; } .list-foot .list-bulk { align-items: center; gap: 8px; display: flex; } .list-foot .p-paginator { background: 0 0; padding: 0; } .host-list-page .host-loading-status { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; } .host-list-page .host-row-placeholder { flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; display: flex; } .host-list-page .host-list-foot { min-height: 40px; } .host-list-page .host-list-foot-empty { visibility: hidden; } .host-list-page .host-refresh-error .p-message-text { flex-wrap: wrap; align-items: center; gap: 12px; display: flex; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .list-table:has(.p-datatable-mask) .p-datatable-table:has(.p-datatable-empty-message) { table-layout: auto; min-width: 680px !important; } .list-table:has(.p-datatable-mask) .p-datatable-table:has(.p-datatable-empty-message) thead { display: table-header-group; } .list-head { gap: 10px; } .list-head, .list-head-actions { flex-wrap: wrap; } .list-toolbar { flex-direction: column; align-items: stretch; } .list-toolbar-right { width: 100%; } .list-toolbar-right > * { flex: 1; min-width: 0; } .list-toolbar-right > .list-search { flex-basis: 100%; } .list-search, .list-select { width: 100%; } .list-seg { min-height: 34px; } .list-table { overflow-x: auto; } .list-table .p-datatable-table { min-width: 680px; } .list-foot { justify-content: center; } .list-foot .list-bulk { flex-wrap: wrap; justify-content: flex-start; width: 100%; } } /* 账号管理/绑定页面的共享布局,避免在多个路由重复维护相同排版。 */ .account-management-page { flex-direction: column; gap: 21px; min-width: 0; padding: 4px 0; display: flex; } .account-management-head { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; display: flex; } .account-management-head h2 { margin: 0 0 16px; font-size: 1.5rem; font-weight: 400; line-height: 1.5; } .account-management-head p { color: var(--p-text-muted-color); margin: 0; font-size: 0.9375rem; line-height: 1.7; } .account-management-actions { flex-wrap: wrap; align-items: center; gap: 10px; display: flex; } .account-management-link { border: 1px solid var(--p-content-border-color); min-height: 36px; color: var(--p-text-color); white-space: nowrap; background: 0 0; border-radius: var(--radius-sm); align-items: center; gap: 7px; padding: 7px 12px; font-size: 1rem; line-height: 1.5; text-decoration: none; display: inline-flex; } .account-management-link:hover { background: var(--p-content-hover-background); } .account-management-link > i { font-size: 0.875rem; } .account-management-note { color: var(--p-text-muted-color); margin: 0; font-size: 0.9375rem; line-height: 1.7; } .connection-list { border-top: 1px solid var(--console-panel-border); } .connection-section-title { margin: 0 0 14px; font-size: 1.125rem; font-weight: 500; } .connection-provider { border-bottom: 1px solid var(--console-panel-border); align-items: center; gap: 14px; min-width: 0; padding: 21px 0; display: flex; } .connection-provider > img { -o-object-fit: contain; object-fit: contain; flex-shrink: 0; width: 32px; height: 32px; } .connection-provider-main { flex: 1; min-width: 0; } .connection-provider-main strong { font-size: 1rem; font-weight: 500; } .connection-provider-main p { color: var(--p-text-muted-color); overflow-wrap: anywhere; margin: 6px 0 0; font-size: 0.9375rem; } /* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=640px) { .account-management-actions { width: 100%; } .account-management-head h2 { margin-bottom: 12px; } .connection-provider { flex-wrap: wrap; } .connection-provider > .p-button { margin-left: auto; } } /* 首页网格与卡片共享样式;各首页子面板在自身样式文件补充细节。 */ .home-page { flex-direction: column; gap: 21px; display: flex; } .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 21px; display: grid; } .home-grid > * { min-width: 0; } .home-welcome { grid-column: span 3; min-height: 232px; } .home-wallet { grid-column: span 1; min-height: 232px; } .home-expiring, .home-tickets { grid-column: span 1; min-height: 360px; } .home-servers { grid-column: span 2; min-height: 360px; } .home-notices, .home-referral { grid-column: span 2; min-height: 272px; } .home-card { background: var(--p-content-background); border: 1px solid var(--p-content-border-color, #e2e8f0); border-radius: var(--radius-md); flex-direction: column; min-width: 0; display: flex; overflow: hidden; box-shadow: 0 1px 3px #0000001a; } .home-card-head { justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; display: flex; } .home-card-title { color: var(--p-text-color, #334155); gap: 8px; margin: 0; font-weight: 600; display: flex; } .home-card-more, .home-card-title { align-items: center; font-size: 1rem; } .home-card-more { min-width: 20px; min-height: 28px; color: var(--p-text-color); flex-shrink: 0; justify-content: center; text-decoration: none; display: inline-flex; } .home-card-more:hover { color: var(--p-primary-color); } .home-card-body { padding: 14px; } .home-card-foot { align-items: center; gap: 7px; margin-top: auto; padding: 14px; display: flex; } .home-card-foot > * { flex: 1; min-width: 0; } .home-button { border: 1px solid var(--p-primary-color); background: var(--p-primary-color); min-height: 36px; color: var(--p-primary-contrast-color, #fff); border-radius: var(--radius-sm); justify-content: center; align-items: center; gap: 6px; padding: 7px 12px; font-size: 1rem; line-height: 1.429rem; text-decoration: none; display: inline-flex; } .home-button.secondary { border-color: var(--p-content-border-color); color: var(--p-text-muted-color); background: 0 0; } .home-button i { opacity: 1; font-size: 1rem; } .home-button:hover { filter: brightness(0.97); } .home-list { flex-direction: column; min-width: 0; display: flex; } .home-row { border-bottom: 1px solid var(--p-content-border-color); color: inherit; align-items: center; gap: 12px; padding: 12px 7px; text-decoration: none; display: flex; } .home-row:last-child { border-bottom: 0; } a.home-row:hover, button.home-row:hover { background: var(--p-content-hover-background); } .home-row-main { flex-direction: column; flex: 1; gap: 3px; min-width: 0; display: flex; } .home-row-title { color: var(--p-text-color); text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; line-height: 1.429rem; overflow: hidden; } .home-row-side, .home-row-sub { color: var(--p-text-muted-color); font-size: 0.875rem; line-height: 1.286rem; } .home-row-side { white-space: nowrap; flex-shrink: 0; } .home-row-skeleton { border-bottom: 1px solid var(--p-content-border-color); padding: 12px 14px; } .home-mini-stats { flex-wrap: wrap; gap: 12px 28px; padding: 0 14px 14px; display: flex; } .home-mini-stat { flex-direction: column; gap: 2px; display: flex; } .home-mini-label { color: var(--p-text-muted-color); font-size: 0.875rem; } .home-mini-value { color: var(--p-text-color); font-size: 1.125rem; font-weight: 600; } .home-card .list-empty { flex: 1; justify-content: center; padding: 32px 20px; } .home-page a:focus-visible, .home-page button:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 2px; } /* 视口条件 (width<1024px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<1024px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-welcome { grid-column: span 2; } .home-tickets, .home-wallet { grid-column: span 1; } .home-expiring, .home-servers { grid-column: span 2; } .home-notices, .home-referral { grid-column: span 1; } } /* 视口条件 (width<640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<640px) { .home-grid { flex-direction: column; gap: 21px; display: flex; } .home-welcome { min-height: 0; } .home-wallet { min-height: 180px; } .home-servers, .home-tickets { min-height: 240px; } .home-expiring { min-height: 0; } .home-notices, .home-referral { min-height: 200px; } } @media (width<640px) { .list-toolbar-right { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; display: grid; } .list-toolbar-right > .list-search, .list-toolbar-right > .p-iconfield, .list-toolbar-right > form { order: -1; grid-column: 1 / -1; } .list-toolbar-right > .p-button-text { justify-self: start; } .p-datatable:not(.no-stack) .p-datatable-table-container { overflow: visible; } .p-datatable:not(.no-stack) .p-datatable-table, .p-datatable:not(.no-stack) .p-datatable-tbody { width: 100%; min-width: 0 !important; display: block; } .list-table:has(.p-datatable:not(.no-stack)) { overflow-x: visible; } .p-datatable:not(.no-stack) .p-datatable-thead { display: none; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr { border-bottom: 1px solid var(--p-content-border-color); padding: 10px 14px; display: block; position: relative; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr:last-child { border-bottom: 0; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td { text-align: right; overflow-wrap: anywhere; white-space: normal !important; border: 0 !important; justify-content: space-between; align-items: center; gap: 16px; width: auto !important; min-width: 0 !important; padding: 5px 0 !important; display: flex; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td::before { content: attr(data-label); color: var(--p-text-muted-color); text-align: left; white-space: nowrap; flex-shrink: 0; font-size: 0.875rem; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td[data-label=""]::before, .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td:not([data-label])::before { display: none; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td[data-label=""] { justify-content: flex-end; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td:first-child:has(> .p-checkbox) { padding: 0 !important; position: absolute; top: 13px; right: 14px; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr:has(> td:first-child > .p-checkbox) > td:nth-child(2) { padding-right: 32px !important; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td > * { min-width: 0; max-width: 100%; } .p-datatable:not(.no-stack) .p-datatable-tbody > tr > td > div { flex-wrap: wrap; justify-content: flex-end; } .p-datatable:not(.no-stack) .p-datatable-empty-message > td { text-align: center; padding: 0 !important; display: block; } .table-scroll-hint { display: none !important; } } @media (width<640px) { .list-toolbar:not(:has(> .list-toolbar-right)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; display: grid; } .list-toolbar:not(:has(> .list-toolbar-right)) > .list-search { grid-column: 1 / -1; width: 100%; } }