feat: add flex wrap for mobile

This commit is contained in:
Tim
2025-07-21 20:51:26 +08:00
parent 8cb92d4b2c
commit 48b1db5880
2 changed files with 22 additions and 10 deletions
+11 -9
View File
@@ -1,4 +1,7 @@
/* Custom styles for vue-toastification */ .Vue-Toastification__toast {
border-radius: 20px;
}
.Vue-Toastification__toast--info { .Vue-Toastification__toast--info {
background-color: #d0e9ff; background-color: #d0e9ff;
color: #1b6ec2; color: #1b6ec2;
@@ -8,26 +11,25 @@
color: #2b7a2b; color: #2b7a2b;
} }
.Vue-Toastification__toast--error { .Vue-Toastification__toast--error {
background-color: #ffe4e4; background-color: #f99a9a;
color: #b73737; color: #b73737;
} }
@media (max-width: 600px) { @media (max-width: 768px) {
.Vue-Toastification__container { .Vue-Toastification__container.open-isle-toast-style-v1 {
width: auto; width: auto;
max-width: 90vw; max-width: 90vw;
right: 0.5em; right: 0.5em;
left: auto; left: auto;
} }
.Vue-Toastification__toast {
padding: 12px 14px;
}
.Vue-Toastification__toast-body { .Vue-Toastification__toast-body {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
} }
.Vue-Toastification__close-button { .Vue-Toastification__close-button {
font-size: 20px; font-size: 18px;
line-height: 20px; line-height: 18px;
} }
} }
+11 -1
View File
@@ -30,7 +30,17 @@ initTheme()
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.use(Toast, { position: POSITION.TOP_RIGHT }) app.use(
Toast,
{
position: POSITION.TOP_RIGHT,
containerClassName: "open-isle-toast-style-v1",
transition: "Vue-Toastification__fade",
// closeButton: false,
timeout: 2000,
},
)
app.mount('#app') app.mount('#app')
checkToken().then(valid => { checkToken().then(valid => {