From bc04b43db6a5f4e88d3e3b49072aaa359bbb0f12 Mon Sep 17 00:00:00 2001 From: yml Date: Mon, 25 May 2026 02:31:14 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E8=B7=A8?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=BC=9A=E8=AF=9D=E5=90=8C=E6=AD=A5=E3=80=81?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E5=BC=BA=E7=B1=BB=E5=9E=8B=E5=AE=89=E5=85=A8?= =?UTF-8?q?JSON=E8=A7=A3=E6=9E=90=E5=B7=A5=E5=85=B7=E5=8F=8ASeller?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/main.ts | 7 + frontend/src/utils/json.ts | 8 + .../views/admin/AdminSystemConfigsView.vue | 41 +- .../components/HomeAnnouncementsDialog.vue | 9 +- .../admin/components/HomeBannersDialog.vue | 9 +- .../admin/components/PublishOptionsDialog.vue | 10 +- .../admin/components/SalePriceDialog.vue | 10 +- .../views/seller/SellerListingCreateView.css | 664 +++++++++--------- 8 files changed, 387 insertions(+), 371 deletions(-) create mode 100644 frontend/src/utils/json.ts diff --git a/frontend/src/main.ts b/frontend/src/main.ts index d38a3ea..33365f3 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -21,4 +21,11 @@ window.addEventListener("auth-storage-changed", () => { useAdminSessionStore(pinia).syncFromStorage(); }); +window.addEventListener("storage", (event) => { + if (event.storageArea === localStorage) { + useSessionStore(pinia).syncFromStorage(); + useAdminSessionStore(pinia).syncFromStorage(); + } +}); + router.isReady().then(() => app.mount("#app")); diff --git a/frontend/src/utils/json.ts b/frontend/src/utils/json.ts new file mode 100644 index 0000000..5be683f --- /dev/null +++ b/frontend/src/utils/json.ts @@ -0,0 +1,8 @@ +export function safeParseJSON(raw: string, fallback: T): T { + if (!raw || !raw.trim()) return fallback + try { + return JSON.parse(raw) as T + } catch { + return fallback + } +} diff --git a/frontend/src/views/admin/AdminSystemConfigsView.vue b/frontend/src/views/admin/AdminSystemConfigsView.vue index 550e6d0..9b51922 100644 --- a/frontend/src/views/admin/AdminSystemConfigsView.vue +++ b/frontend/src/views/admin/AdminSystemConfigsView.vue @@ -17,6 +17,7 @@ import { } from '@/api/homeConfig' import { fetchSystemConfigs, type SystemConfig } from '@/api/systemConfigs' import { formatDateTime } from '@/utils/time' +import { safeParseJSON } from '@/utils/json' // 导入重构后的 Dialog 子组件 import PublishOptionsDialog from './components/PublishOptionsDialog.vue' @@ -76,8 +77,8 @@ const salePriceStats = computed(() => { }) const homeStats = computed(() => { - const announcements = parseHomeAnnouncements(homeAnnouncementsConfig.value?.value || '', false) - const banners = parseHomeBanners(homeBannersConfig.value?.value || '', false) + const announcements = parseHomeAnnouncements(homeAnnouncementsConfig.value?.value || '') + const banners = parseHomeBanners(homeBannersConfig.value?.value || '') return { announcementCount: announcements.length, bannerCount: banners.length, @@ -111,39 +112,23 @@ function openEdit(row: SystemConfig) { } function safeParsePublishOptions(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : emptyListingPublishOptions - return cloneOptions(mergeListingPublishOptions(parsed)) - } catch { - return cloneOptions(emptyListingPublishOptions) - } + const parsed = safeParseJSON(raw, emptyListingPublishOptions) + return cloneOptions(mergeListingPublishOptions(parsed)) } function safeParseSalePriceConfig(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : emptyListingSalePriceConfig - return cloneSalePriceConfig(mergeListingSalePriceConfig(parsed)) - } catch { - return cloneSalePriceConfig(emptyListingSalePriceConfig) - } + const parsed = safeParseJSON(raw, emptyListingSalePriceConfig) + return cloneSalePriceConfig(mergeListingSalePriceConfig(parsed)) } -function parseHomeAnnouncements(raw: string, showWarning = false) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeAnnouncements - return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements - } catch { - return [...defaultHomeAnnouncements] - } +function parseHomeAnnouncements(raw: string) { + const parsed = safeParseJSON(raw, defaultHomeAnnouncements) + return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements } -function parseHomeBanners(raw: string, showWarning = false) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeBanners - return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners) - } catch { - return cloneHomeBanners(defaultHomeBanners) - } +function parseHomeBanners(raw: string) { + const parsed = safeParseJSON(raw, defaultHomeBanners) + return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners) } function cloneOptions(options: ListingPublishOptions) { diff --git a/frontend/src/views/admin/components/HomeAnnouncementsDialog.vue b/frontend/src/views/admin/components/HomeAnnouncementsDialog.vue index b596752..4781a6e 100644 --- a/frontend/src/views/admin/components/HomeAnnouncementsDialog.vue +++ b/frontend/src/views/admin/components/HomeAnnouncementsDialog.vue @@ -4,6 +4,7 @@ import { ref, watch } from 'vue' import { defaultHomeAnnouncements, mergeHomeConfig } from '@/api/homeConfig' import { updateSystemConfig, type SystemConfig } from '@/api/systemConfigs' +import { safeParseJSON } from '@/utils/json' const props = defineProps<{ modelValue: boolean @@ -31,12 +32,8 @@ watch( ) function parseHomeAnnouncements(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeAnnouncements - return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements - } catch { - return [...defaultHomeAnnouncements] - } + const parsed = safeParseJSON(raw, defaultHomeAnnouncements) + return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements } function linesToItems(value: string) { diff --git a/frontend/src/views/admin/components/HomeBannersDialog.vue b/frontend/src/views/admin/components/HomeBannersDialog.vue index d60bc13..f324912 100644 --- a/frontend/src/views/admin/components/HomeBannersDialog.vue +++ b/frontend/src/views/admin/components/HomeBannersDialog.vue @@ -5,6 +5,7 @@ import { ref, watch } from 'vue' import { uploadAdminFile } from '@/api/files' import { defaultHomeBanners, mergeHomeConfig, type HomeBannerSlide } from '@/api/homeConfig' import { updateSystemConfig, type SystemConfig } from '@/api/systemConfigs' +import { safeParseJSON } from '@/utils/json' const props = defineProps<{ modelValue: boolean @@ -33,12 +34,8 @@ watch( ) function parseHomeBanners(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeBanners - return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners) - } catch { - return cloneHomeBanners(defaultHomeBanners) - } + const parsed = safeParseJSON(raw, defaultHomeBanners) + return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners) } function cloneHomeBanners(banners: HomeBannerSlide[]) { diff --git a/frontend/src/views/admin/components/PublishOptionsDialog.vue b/frontend/src/views/admin/components/PublishOptionsDialog.vue index 0c6ae4c..c05bdbb 100644 --- a/frontend/src/views/admin/components/PublishOptionsDialog.vue +++ b/frontend/src/views/admin/components/PublishOptionsDialog.vue @@ -8,6 +8,7 @@ import { type ListingPublishOptions, } from '@/api/listingOptions' import { updateSystemConfig, type SystemConfig } from '@/api/systemConfigs' +import { safeParseJSON } from '@/utils/json' const props = defineProps<{ modelValue: boolean @@ -35,13 +36,8 @@ watch( ) function parsePublishOptions(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : emptyListingPublishOptions - return cloneOptions(mergeListingPublishOptions(parsed)) - } catch { - ElMessage.warning('发布选项 JSON 解析失败，已清空草稿') - return cloneOptions(emptyListingPublishOptions) - } + const parsed = safeParseJSON(raw, emptyListingPublishOptions) + return cloneOptions(mergeListingPublishOptions(parsed)) } function cloneOptions(options: ListingPublishOptions) { diff --git a/frontend/src/views/admin/components/SalePriceDialog.vue b/frontend/src/views/admin/components/SalePriceDialog.vue index 94401e9..be63c05 100644 --- a/frontend/src/views/admin/components/SalePriceDialog.vue +++ b/frontend/src/views/admin/components/SalePriceDialog.vue @@ -8,6 +8,7 @@ import { type PublishSalePriceConfig, } from '@/api/listingOptions' import { updateSystemConfig, type SystemConfig } from '@/api/systemConfigs' +import { safeParseJSON } from '@/utils/json' const props = defineProps<{ modelValue: boolean @@ -35,13 +36,8 @@ watch( ) function parseSalePriceConfig(raw: string) { - try { - const parsed = raw.trim() ? JSON.parse(raw) : emptyListingSalePriceConfig - return cloneSalePriceConfig(mergeListingSalePriceConfig(parsed)) - } catch { - ElMessage.warning('出售定价规则 JSON 解析失败，已清空草稿') - return cloneSalePriceConfig(emptyListingSalePriceConfig) - } + const parsed = safeParseJSON(raw, emptyListingSalePriceConfig) + return cloneSalePriceConfig(mergeListingSalePriceConfig(parsed)) } function cloneSalePriceConfig(config: PublishSalePriceConfig) { diff --git a/frontend/src/views/seller/SellerListingCreateView.css b/frontend/src/views/seller/SellerListingCreateView.css index 3c7b76f..dce167e 100644 --- a/frontend/src/views/seller/SellerListingCreateView.css +++ b/frontend/src/views/seller/SellerListingCreateView.css @@ -1,6 +1,18 @@ +/* 设计系统变量定义 */ .publish-page { + --color-bg-gray: #f7f9fc; + --color-bg-orange: #fff7f0; + --color-orange-primary: #ff6a00; + --color-orange-dark: #e65f00; + --color-text-main: #303743; + --color-text-sub: #7f8895; + --color-text-dark: #20242a; + --color-border: #dfe5ee; + --color-danger: #f04438; + --radius-8: 8px; + min-width: 0; - color: #20242a; + color: var(--color-text-dark); } .publish-layout { @@ -10,6 +22,11 @@ gap: 18px; max-width: 1238px; margin: 0 auto; + + @media (max-width: 1180px) { + grid-template-columns: 1fr; + max-width: 920px; + } } .form-column { @@ -18,9 +35,29 @@ gap: 18px; } +/* 统合的灰色圆角面板基础类 */ +.panel-field-row, +.panel-input-grid, +.level-row, +.login-method-row, +.quantity-item, +.skin-group, +.region-panel, +.ratio-panel, +.time-preset-row, +.price-cell { + padding: 12px; + border-radius: var(--radius-8); + background: var(--color-bg-gray); +} + +.panel-input-grid { + align-items: end; +} + .summary-panel { border: 1px solid #e6ebf2; - border-radius: 8px; + border-radius: var(--radius-8); background: #fff; box-shadow: 0 12px 34px rgba(20, 34, 56, 0.05); } @@ -31,34 +68,24 @@ gap: 14px; align-items: center; margin-top: 12px; + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } + + & > label { + color: var(--color-text-main); + font-size: 13px; + font-weight: 800; + line-height: 22px; + } + + & label span { + color: var(--color-danger); + } } -.panel-field-row, -.panel-input-grid { - padding: 12px; - border-radius: 8px; - background: #f7f9fc; -} - -.panel-input-grid { - align-items: end; -} - -.field-row > label, -.input-block > span { - color: #303743; - font-size: 13px; - font-weight: 800; - line-height: 22px; -} - -.field-row label span, -.input-block b, -.level-row strong span, -.upload-copy strong span { - color: #f04438; -} - +/* 按钮共用样式 */ .level-btn, .region-btn, .mode-toggle button, @@ -68,14 +95,28 @@ color: #596474; font-weight: 800; cursor: pointer; - transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease; + transition: all 0.16s ease; } -.level-btn.active, -.region-btn.active { - border-color: #1477ff; - background: #1477ff; - color: #fff; +.level-btn, +.region-btn { + &.active { + border-color: #1477ff; + background: #1477ff; + color: #fff; + } +} + +.level-btn { + height: 30px; + min-width: 0; + border-radius: 15px; +} + +.region-btn { + height: 32px; + min-width: 0; + border-radius: 16px; } .compact-grid { @@ -83,28 +124,43 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; -} -.compact-grid.two { - grid-template-columns: repeat(2, minmax(0, 1fr)); + &.two { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .input-block { display: grid; min-width: 0; gap: 8px; -} -.input-block :deep(.el-input-number), -.input-block :deep(.el-input), -.input-block :deep(.el-date-editor) { - width: 100%; -} + & > span { + color: var(--color-text-main); + font-size: 13px; + font-weight: 800; + line-height: 22px; + } + + & b { + color: var(--color-danger); + } -.input-block :deep(.el-input__wrapper), -.input-block :deep(.el-textarea__inner) { - border-radius: 8px; - box-shadow: 0 0 0 1px #dfe5ee inset; + :deep(.el-input-number), + :deep(.el-input), + :deep(.el-date-editor) { + width: 100%; + } + + :deep(.el-input__wrapper), + :deep(.el-textarea__inner) { + border-radius: var(--radius-8); + box-shadow: 0 0 0 1px var(--color-border) inset; + } } .level-panel { @@ -114,17 +170,18 @@ } .level-row { - display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; - border-radius: 8px; - background: #f7f9fc; -} -.level-row strong { - font-size: 13px; + & strong { + font-size: 13px; + + & span { + color: var(--color-danger); + } + } } .level-options { @@ -133,28 +190,22 @@ gap: 9px; } -.level-btn { - height: 30px; - min-width: 0; - border-radius: 15px; -} - .field-hint { grid-column: 2; margin: 0; - color: #7f8895; + color: var(--color-text-sub); font-size: 12px; line-height: 1.55; + + @media (max-width: 860px) { + grid-column: auto; + } } .login-method-row { - padding: 12px; - border-radius: 8px; - background: #f7f9fc; -} - -.login-method-row .field-hint { - margin-top: -2px; + & .field-hint { + margin-top: -2px; + } } .quantity-table { @@ -168,6 +219,10 @@ grid-template-columns: minmax(160px, 1fr) 90px 112px 112px 92px; gap: 12px; align-items: center; + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .quantity-header { @@ -176,50 +231,50 @@ color: #7b8492; font-size: 12px; font-weight: 800; + + @media (max-width: 860px) { + display: none; + } } .quantity-item { min-height: 58px; - padding: 12px; - border-radius: 8px; - background: #f7f9fc; + + &.disabled { + opacity: 0.62; + } + + :deep(.el-input-number) { + width: 100%; + min-width: 0; + } } .quantity-meta { display: grid; min-width: 0; gap: 4px; -} -.quantity-meta strong { - overflow: hidden; - font-size: 13px; - text-overflow: ellipsis; - white-space: nowrap; -} + & strong { + overflow: hidden; + font-size: 13px; + text-overflow: ellipsis; + white-space: nowrap; + } -.quantity-meta small, -.quantity-price, -.quantity-status, -.upload-copy small, -.region-title span { - color: #7f8895; - font-size: 12px; - font-weight: 700; + & small { + color: var(--color-text-sub); + font-size: 12px; + font-weight: 700; + } } .quantity-price, .quantity-status { white-space: nowrap; -} - -.quantity-item.disabled { - opacity: 0.62; -} - -.quantity-item :deep(.el-input-number) { - width: 100%; - min-width: 0; + color: var(--color-text-sub); + font-size: 12px; + font-weight: 700; } .mode-toggle { @@ -227,24 +282,24 @@ grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; -} -.mode-toggle button { - height: 30px; - min-width: 0; - border-radius: 8px; - font-size: 12px; - white-space: nowrap; -} + & button { + height: 30px; + min-width: 0; + border-radius: var(--radius-8); + font-size: 12px; + white-space: nowrap; -.mode-toggle button:disabled { - cursor: not-allowed; -} + &:disabled { + cursor: not-allowed; + } -.mode-toggle button.active { - border-color: #ff6a00; - background: #fff3ea; - color: #e65f00; + &.active { + border-color: var(--color-orange-primary); + background: #fff3ea; + color: var(--color-orange-dark); + } + } } .recommend-button { @@ -252,9 +307,9 @@ height: 32px; padding: 0 12px; border: 1px solid #ffba86; - border-radius: 8px; - background: #fff7f0; - color: #e65f00; + border-radius: var(--radius-8); + background: var(--color-bg-orange); + color: var(--color-orange-dark); font-size: 12px; font-weight: 800; cursor: pointer; @@ -265,22 +320,26 @@ grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .deposit-breakdown { display: flex; flex-wrap: wrap; gap: 6px; -} -.deposit-breakdown span { - min-height: 24px; - padding: 4px 8px; - border-radius: 12px; - background: #fff7f0; - color: #e65f00; - font-size: 12px; - font-weight: 800; + & span { + min-height: 24px; + padding: 4px 8px; + border-radius: 12px; + background: var(--color-bg-orange); + color: var(--color-orange-dark); + font-size: 12px; + font-weight: 800; + } } .skin-groups { @@ -288,14 +347,8 @@ gap: 10px; } -.skin-group, -.region-panel, -.ratio-panel { - display: grid; - gap: 10px; - padding: 12px; - border-radius: 8px; - background: #f7f9fc; +.skin-group { + border: none; } .skin-title, @@ -305,10 +358,12 @@ justify-content: space-between; gap: 12px; font-size: 13px; -} -.skin-group { - border: none; + & span { + color: var(--color-text-sub); + font-size: 12px; + font-weight: 700; + } } .skin-title { @@ -327,16 +382,17 @@ grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; - padding: 12px; - border-radius: 8px; - background: #f7f9fc; -} -.time-preset-row strong { - color: #303743; - font-size: 13px; - font-weight: 800; - line-height: 32px; + @media (max-width: 860px) { + grid-template-columns: 1fr; + } + + & strong { + color: var(--color-text-main); + font-size: 13px; + font-weight: 800; + line-height: 32px; + } } .time-preset-content { @@ -347,11 +403,15 @@ .time-input { width: 118px; -} -.time-input :deep(.el-input__wrapper) { - border-radius: 8px; - box-shadow: 0 0 0 1px #dfe5ee inset; + @media (max-width: 860px) { + width: 140px; + } + + & :deep(.el-input__wrapper) { + border-radius: var(--radius-8); + box-shadow: 0 0 0 1px var(--color-border) inset; + } } .login-region-panel { @@ -362,18 +422,20 @@ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; -} -.region-btn { - height: 32px; - min-width: 0; - border-radius: 16px; + @media (max-width: 860px) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } } .upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .upload-item { @@ -382,32 +444,44 @@ gap: 12px; align-items: center; min-height: 112px; - padding: 12px; - border: 1px solid #e6ebf2; - border-radius: 8px; - background: #f8fafc; + border: 1px solid var(--color-border-light); + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .upload-copy { display: grid; min-width: 0; gap: 6px; -} -.upload-copy strong { - color: #232a35; - font-size: 14px; -} + & strong { + color: #232a35; + font-size: 14px; + + & span { + color: var(--color-danger); + } + } -.upload-copy small { - line-height: 1.45; + & small { + color: var(--color-text-sub); + font-size: 12px; + font-weight: 700; + line-height: 1.45; + } } .upload-add, .upload-preview { width: 96px; height: 88px; - border-radius: 8px; + border-radius: var(--radius-8); + + @media (max-width: 860px) { + width: 100%; + } } .upload-add { @@ -419,38 +493,38 @@ font-size: 12px; font-weight: 800; cursor: pointer; -} -.upload-add:disabled { - cursor: not-allowed; - opacity: 0.58; + &:disabled { + cursor: not-allowed; + opacity: 0.58; + } } .upload-preview { position: relative; overflow: hidden; background: #e8edf4; -} -.upload-preview img { - width: 100%; - height: 100%; - object-fit: cover; -} + & img { + width: 100%; + height: 100%; + object-fit: cover; + } -.upload-preview button { - position: absolute; - right: 6px; - bottom: 6px; - display: grid; - width: 28px; - height: 28px; - place-items: center; - border: none; - border-radius: 8px; - background: rgba(17, 24, 39, 0.72); - color: #fff; - cursor: pointer; + & button { + position: absolute; + right: 6px; + bottom: 6px; + display: grid; + width: 28px; + height: 28px; + place-items: center; + border: none; + border-radius: var(--radius-8); + background: rgba(17, 24, 39, 0.72); + color: #fff; + cursor: pointer; + } } .hidden-file { @@ -459,6 +533,13 @@ .ratio-panel { margin-top: 14px; + + & p { + margin: 0; + color: var(--color-text-sub); + font-size: 12px; + line-height: 1.5; + } } .ratio-reference { @@ -467,32 +548,20 @@ justify-content: space-between; min-height: 52px; padding: 12px; - border-radius: 8px; + border-radius: var(--radius-8); background: #fff; -} -.ratio-reference span { - color: #303743; - font-size: 13px; - font-weight: 800; -} + & span { + color: var(--color-text-main); + font-size: 13px; + font-weight: 800; + } -.ratio-reference strong, -.price-cell strong, -.summary-main strong { - color: #ff6a00; - font-weight: 900; -} - -.ratio-reference strong { - font-size: 22px; -} - -.ratio-panel p { - margin: 0; - color: #7f8895; - font-size: 12px; - line-height: 1.5; + & strong { + color: var(--color-orange-primary); + font-weight: 900; + font-size: 22px; + } } .ratio-mode-grid, @@ -500,6 +569,10 @@ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; + + @media (max-width: 860px) { + grid-template-columns: 1fr; + } } .ratio-mode-btn { @@ -507,24 +580,23 @@ gap: 6px; min-height: 72px; padding: 12px; - border-radius: 8px; text-align: left; -} -.ratio-mode-btn span { - color: #7f8895; - font-size: 12px; -} + & span { + color: var(--color-text-sub); + font-size: 12px; + } -.ratio-mode-btn.active { - border-color: #ff6a00; - background: #fff7f0; - color: #ff6a00; -} + &.active { + border-color: var(--color-orange-primary); + background: var(--color-bg-orange); + color: var(--color-orange-primary); + } -.ratio-mode-btn:disabled { - cursor: not-allowed; - opacity: 0.58; + &:disabled { + cursor: not-allowed; + opacity: 0.58; + } } .price-grid { @@ -537,23 +609,23 @@ gap: 6px; min-height: 82px; padding: 14px; - border-radius: 8px; - background: #f7f9fc; -} -.price-cell span { - color: #6f7a89; - font-size: 12px; - font-weight: 800; -} + & span { + color: #6f7a89; + font-size: 12px; + font-weight: 800; + } -.price-cell strong { - overflow-wrap: anywhere; - font-size: 21px; -} + & strong { + overflow-wrap: anywhere; + color: var(--color-orange-primary); + font-weight: 900; + font-size: 21px; + } -.price-cell.accent { - background: #fff7f0; + &.accent { + background: var(--color-bg-orange); + } } .remark { @@ -566,6 +638,10 @@ top: 76px; align-self: start; height: fit-content; + + @media (max-width: 1180px) { + display: none; + } } .summary-panel { @@ -576,102 +652,56 @@ display: grid; gap: 8px; padding: 16px; - border-radius: 8px; - background: #fff7f0; -} + border-radius: var(--radius-8); + background: var(--color-bg-orange); -.summary-main span, -.summary-list span { - color: #6f7a89; - font-size: 12px; - font-weight: 800; -} + & span { + color: #6f7a89; + font-size: 12px; + font-weight: 800; + } -.summary-main strong { - font-size: 34px; - line-height: 1; + & strong { + color: var(--color-orange-primary); + font-weight: 900; + font-size: 34px; + line-height: 1; + } } .summary-list { display: grid; gap: 10px; margin: 14px 0; -} -.summary-list div { - display: flex; - justify-content: space-between; - gap: 12px; - padding-bottom: 10px; - border-bottom: 1px solid #eef2f6; -} + & span { + color: #6f7a89; + font-size: 12px; + font-weight: 800; + } + + & div { + display: flex; + justify-content: space-between; + gap: 12px; + padding-bottom: 10px; + border-bottom: 1px solid #eef2f6; + } -.summary-list strong { - color: #20242a; - font-size: 13px; - text-align: right; - overflow-wrap: anywhere; + & strong { + color: var(--color-text-dark); + font-size: 13px; + text-align: right; + overflow-wrap: anywhere; + } } .summary-actions { display: grid; gap: 10px; -} - -.summary-actions :deep(.el-button) { - width: 100%; - margin-left: 0; -} - -@media (max-width: 1180px) { - .publish-layout { - grid-template-columns: 1fr; - max-width: 920px; - } - - .summary-column { - display: none; - } -} - -@media (max-width: 860px) { - .field-row, - .compact-grid, - .compact-grid.two, - .upload-grid, - .price-grid { - grid-template-columns: 1fr; - } - - .quantity-header { - display: none; - } - - .field-hint { - grid-column: auto; - } - - .quantity-item, - .upload-item { - grid-template-columns: 1fr; - } - - .deposit-control, - .ratio-mode-grid, - .time-preset-row { - grid-template-columns: 1fr; - } - - .time-input { - width: 140px; - } - - .upload-add, - .upload-preview { + + & :deep(.el-button) { width: 100%; - } - - .region-grid { - grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-left: 0; } }