/* 优惠券中心:券面金额、使用门槛、可用/失效状态及分页。 */ /* 导入方:app/pages/vouchers/index.vue。 */ .voucher-page[data-v-b08e3df0] { flex-direction: column; gap: 21px; min-width: 0; display: flex; } .page-head[data-v-b08e3df0] { justify-content: space-between; align-items: center; gap: 16px; display: flex; } .page-heading h2[data-v-b08e3df0] { margin: 0; font-size: 1.25rem; font-weight: 650; line-height: 2rem; } .page-heading p[data-v-b08e3df0] { color: var(--p-text-muted-color); margin: 4px 0 0; font-size: 0.9375rem; } .voucher-guide[data-v-b08e3df0] { background: var(--console-panel-bg); border: 1px solid var(--console-panel-border); border-radius: 8px; align-items: center; gap: 16px; padding: 22px 24px; display: flex; } .guide-icon[data-v-b08e3df0] { width: 44px; height: 44px; color: var(--p-primary-color); background: var(--p-highlight-background); border-radius: 10px; flex-shrink: 0; place-items: center; font-size: 1.375rem; display: grid; } .voucher-guide h3[data-v-b08e3df0] { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 600; } .voucher-guide p[data-v-b08e3df0] { margin: 0; font-size: 0.9375rem; } .guide-note[data-v-b08e3df0], .voucher-guide p[data-v-b08e3df0] { color: var(--p-text-muted-color); line-height: 1.7; } .guide-note[data-v-b08e3df0] { align-items: center; gap: 7px; max-width: 240px; margin-left: auto; font-size: 0.875rem; display: flex; } .guide-note > i[data-v-b08e3df0] { flex-shrink: 0; } .voucher-tabs[data-v-b08e3df0] { min-width: 0; } .voucher-tabs[data-v-b08e3df0] .p-tablist-tab-list { background: 0 0; } .voucher-tabs[data-v-b08e3df0] .p-tab { gap: 8px; padding: 14px 18px; } .voucher-tabs[data-v-b08e3df0] .p-tabpanels { background: 0 0; padding: 20px 0 0; } .tab-count[data-v-b08e3df0] { background: var(--p-content-hover-background); min-width: 22px; height: 20px; color: var(--p-text-muted-color); font-variant-numeric: tabular-nums; border-radius: 5px; justify-content: center; align-items: center; padding: 0 6px; font-size: 0.875rem; display: inline-flex; } .voucher-toolbar[data-v-b08e3df0] { justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; display: flex; } .voucher-toolbar p[data-v-b08e3df0] { color: var(--p-text-muted-color); margin: 0; font-size: 0.9375rem; } .voucher-grid[data-v-b08e3df0] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 18px; display: grid; } .voucher-card[data-v-b08e3df0] { border: 1px solid var(--console-panel-border); background: var(--console-panel-bg); border-radius: 8px; grid-template-columns: 128px minmax(0, 1fr); min-width: 0; display: grid; overflow: hidden; } .voucher-face[data-v-b08e3df0] { text-align: center; border-right: 1px dashed var(--console-panel-border); background: color-mix( in srgb, var(--p-highlight-background) 70%, var(--console-panel-bg) ); color: var(--p-primary-color); flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px 12px; display: flex; } .face-label[data-v-b08e3df0] { font-size: 0.875rem; } .face-value[data-v-b08e3df0] { font-variant-numeric: tabular-nums; justify-content: center; align-items: baseline; gap: 3px; max-width: 100%; display: flex; } .face-value small[data-v-b08e3df0] { font-size: 1.125rem; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .face-value strong[data-v-b08e3df0] { overflow-wrap: anywhere; font-size: clamp(24px, 2.6vw, 36px); font-weight: 650; line-height: 1.2; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .face-threshold[data-v-b08e3df0] { overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.7; } .voucher-details[data-v-b08e3df0] { flex-direction: column; gap: 16px; min-width: 0; padding: 20px; display: flex; } .voucher-title[data-v-b08e3df0] { justify-content: space-between; align-items: flex-start; gap: 10px; display: flex; } .voucher-title[data-v-b08e3df0] .p-tag { flex-shrink: 0; font-size: 0.8125rem; } .voucher-code[data-v-b08e3df0] { overflow-wrap: anywhere; font-size: 1rem; font-weight: 600; line-height: 1.6; } .voucher-rules[data-v-b08e3df0] { flex-direction: column; gap: 9px; margin: 0; font-size: 0.875rem; line-height: 1.7; display: flex; } .voucher-rules > div[data-v-b08e3df0] { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; display: grid; } .voucher-rules dt[data-v-b08e3df0] { color: var(--p-text-muted-color); } .voucher-rules dd[data-v-b08e3df0] { overflow-wrap: anywhere; margin: 0; } .voucher-uses[data-v-b08e3df0] { flex-wrap: wrap; gap: 7px 12px; font-size: 0.8125rem; line-height: 1.6; display: flex; } .voucher-uses > span[data-v-b08e3df0] { color: var(--p-primary-color); align-items: center; gap: 4px; display: inline-flex; } .voucher-uses > .restricted[data-v-b08e3df0] { color: var(--p-text-muted-color); } .voucher-uses i[data-v-b08e3df0] { font-size: 0.625rem; } .voucher-footer[data-v-b08e3df0] { border-top: 1px solid var(--console-panel-border); color: var(--p-text-muted-color); justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; font-size: 0.8125rem; display: flex; } .voucher-footer .p-button[data-v-b08e3df0] { flex-shrink: 0; } /* 不可用券的视觉弱化,实际可用性仍须由后端结算校验。 */ .inactive .voucher-face[data-v-b08e3df0], .use-tip[data-v-b08e3df0] { color: var(--p-text-muted-color); } .inactive .voucher-face[data-v-b08e3df0] { background: var(--p-content-hover-background); } .inactive .voucher-uses > span[data-v-b08e3df0] { color: var(--p-text-muted-color); } .voucher-state[data-v-b08e3df0] { background: var(--console-panel-bg); border: 1px solid var(--console-panel-border); border-radius: 8px; } .voucher-state[data-v-b08e3df0] .list-empty { justify-content: center; min-height: 340px; } .voucher-state[data-v-b08e3df0] .p-button { margin-top: 8px; } .voucher-skeleton[data-v-b08e3df0] { border: 1px solid var(--console-panel-border); background: var(--console-panel-bg); border-radius: 8px; flex-direction: column; gap: 20px; min-height: 260px; padding: 28px; display: flex; } .voucher-pagination[data-v-b08e3df0] { color: var(--p-text-muted-color); flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; font-size: 0.9375rem; display: flex; } .voucher-pagination[data-v-b08e3df0] .p-paginator { background: 0 0; padding: 0; } /* 视口条件 (width<=1000px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=1000px) { .guide-note[data-v-b08e3df0] { display: none; } } /* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=640px) { .page-head[data-v-b08e3df0] { flex-wrap: wrap; } .voucher-guide[data-v-b08e3df0] { align-items: flex-start; gap: 12px; padding: 18px; } .guide-icon[data-v-b08e3df0] { width: 36px; height: 36px; font-size: 1.1875rem; } .voucher-grid[data-v-b08e3df0] { gap: 14px; } .voucher-card[data-v-b08e3df0] { grid-template-columns: minmax(0, 1fr); } .voucher-face[data-v-b08e3df0] { text-align: left; border-right: 0; border-bottom: 1px dashed var(--console-panel-border); grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px 20px; display: grid; } .face-value[data-v-b08e3df0] { grid-area: 1/1/3; } .face-value strong[data-v-b08e3df0] { font-size: 2rem; } .face-label[data-v-b08e3df0] { grid-area: 1/2; } .face-threshold[data-v-b08e3df0] { grid-area: 2/2; } .voucher-details[data-v-b08e3df0] { padding: 18px; } .voucher-pagination[data-v-b08e3df0] { justify-content: center; } .voucher-pagination > span[data-v-b08e3df0] { text-align: center; width: 100%; } }