|
|
@@ -6,6 +6,111 @@ import ConfirmDialog from 'primevue/confirmdialog'
|
|
|
|
|
|
<template>
|
|
|
<RouterView />
|
|
|
- <Toast />
|
|
|
+ <Toast position="top-center" />
|
|
|
<ConfirmDialog />
|
|
|
</template>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* Toast 提示框样式优化 */
|
|
|
+.p-toast {
|
|
|
+ opacity: 1 !important;
|
|
|
+ width: auto !important;
|
|
|
+ max-width: min(90vw, 400px) !important;
|
|
|
+ top: 1rem !important;
|
|
|
+ left: 50% !important;
|
|
|
+ transform: translateX(-50%) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message {
|
|
|
+ margin: 0 !important;
|
|
|
+ border-radius: 0.75rem !important;
|
|
|
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message-content {
|
|
|
+ padding: 0.875rem 1rem !important;
|
|
|
+ gap: 0.75rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message-icon {
|
|
|
+ font-size: 1.25rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-summary {
|
|
|
+ font-size: 0.875rem !important;
|
|
|
+ font-weight: 600 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-detail {
|
|
|
+ font-size: 0.8125rem !important;
|
|
|
+ margin-top: 0.125rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-icon-close {
|
|
|
+ width: 1.5rem !important;
|
|
|
+ height: 1.5rem !important;
|
|
|
+ border-radius: 0.375rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端优化 */
|
|
|
+@media (max-width: 640px) {
|
|
|
+ .p-toast {
|
|
|
+ max-width: calc(100vw - 2rem) !important;
|
|
|
+ top: 0.75rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-toast .p-toast-message-content {
|
|
|
+ padding: 0.75rem 0.875rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-toast .p-toast-summary {
|
|
|
+ font-size: 0.8125rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-toast .p-toast-detail {
|
|
|
+ font-size: 0.75rem !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 不同类型的提示样式 */
|
|
|
+.p-toast .p-toast-message-success {
|
|
|
+ background-color: rgba(16, 185, 129, 0.95) !important;
|
|
|
+ border: 1px solid rgba(16, 185, 129, 0.2) !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message-info {
|
|
|
+ background-color: rgba(59, 130, 246, 0.95) !important;
|
|
|
+ border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message-warn {
|
|
|
+ background-color: rgba(245, 158, 11, 0.95) !important;
|
|
|
+ border: 1px solid rgba(245, 158, 11, 0.2) !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+.p-toast .p-toast-message-error {
|
|
|
+ background-color: rgba(239, 68, 68, 0.95) !important;
|
|
|
+ border: 1px solid rgba(239, 68, 68, 0.2) !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 动画优化 */
|
|
|
+.p-toast .p-toast-message {
|
|
|
+ animation: toast-slide-in 0.3s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes toast-slide-in {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-1rem);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|