diff --git a/src/components/toast/VersionUpdateToast.vue b/src/components/toast/VersionUpdateToast.vue index 0f5bb784..dc13b757 100644 --- a/src/components/toast/VersionUpdateToast.vue +++ b/src/components/toast/VersionUpdateToast.vue @@ -36,7 +36,8 @@ const handleRefresh = () => { .message { flex: 1; - white-space: nowrap; + word-break: break-all; + line-height: 1.4; } .refresh-button { diff --git a/src/styles/main.scss b/src/styles/main.scss index c0fac356..b7692a03 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,4 +16,31 @@ .version-update-toast-container { min-width: unset !important; width: fit-content !important; + + // 移动端适配:强制靠右并修正位置 + @media only screen and (width <= 600px) { + max-width: calc(100vw - 1rem) !important; + margin-inline: 0 0.5rem !important; + border-radius: 8px !important; + position: relative !important; + top: calc(100vh - 12rem) !important; + } +} + +// 使用 :has 选择器精准控制包含更新通知的容器 +.Vue-Toastification__container:has(.version-update-toast-container) { + @media only screen and (width <= 600px) { + top: auto !important; + bottom: 0 !important; + display: flex !important; + flex-direction: column !important; + align-items: flex-end !important; + padding-block-end: 4.5rem !important; + pointer-events: none; + + .version-update-toast-container { + pointer-events: auto; + margin-inline-end: 0.5rem !important; + } + } }