diff --git a/.env b/.env index f4854ad..9c5d227 100644 --- a/.env +++ b/.env @@ -1,2 +1,5 @@ # 搜索框提示词 -VITE_INPUT_TIP = "想要搜点什么" \ No newline at end of file +VITE_INPUT_TIP = "想要搜点什么" + +# 进入欢迎词 +VITE_WELCOME_TEXT = "欢迎访问本站" \ No newline at end of file diff --git a/public/background/bg1.jpg b/public/background/bg1.jpg index d1c9d6c..47f714d 100644 Binary files a/public/background/bg1.jpg and b/public/background/bg1.jpg differ diff --git a/src/App.vue b/src/App.vue index 34e60cc..be702f8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ diff --git a/src/main.js b/src/main.js index 5e046cd..05dcea2 100644 --- a/src/main.js +++ b/src/main.js @@ -7,8 +7,7 @@ import SvgIcon from "@/components/SvgIcon.vue"; import "@/utils/iconfont.js"; // Notivue import { notivue } from "notivue"; -import "notivue/notifications.css"; // Only needed if using built-in notifications -import "notivue/animations.css"; // Only needed if using built-in animations +import "notivue/notifications.css"; // 主组件 import App from "@/App.vue"; @@ -27,6 +26,11 @@ app.use(pinia); app.use(notivue, { pauseOnHover: false, limit: 1, + animations: { + enter: "notivue-slide-in", + leave: "notivue-slide-out", + clearAll: "notivue-fade", + }, }); app.component("SvgIcon", SvgIcon); app.mount("#app"); diff --git a/src/style/global.scss b/src/style/global.scss index a0cc5dd..2d4acd5 100644 --- a/src/style/global.scss +++ b/src/style/global.scss @@ -29,11 +29,6 @@ body { height: 100vh; } -::selection { - color: var(--main-text-color); - background-color: var(--main-text-hover-color); -} - // Transition 动画 .fade-enter-active, .fade-leave-active { @@ -68,6 +63,12 @@ body { } // Notivue +.notivue-slide-in { + animation: notivue-slide-in 0.7s ease-in-out both; +} +.notivue-slide-out { + animation: notivue-slide-out 0.3s ease-in-out both; +} .Notivue__notification { background-color: var(--main-background-light-color); // backdrop-filter: blur(30px) saturate(1.25); @@ -77,11 +78,27 @@ body { display: none; } .Notivue__content { - padding: 0.5rem; - .Notivue__content-message { - text-align: center; + padding: 0.8rem 0.5rem; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + .Notivue__content-title { + margin: 0; + margin-right: 6px; + line-height: inherit; color: var(--main-text-grey-color); } + .Notivue__content-message { + line-height: inherit; + color: var(--main-text-grey-color); + } + @media (max-width: 480px) { + flex-direction: column; + .Notivue__content-title { + margin-bottom: 6px; + } + } } } @@ -148,3 +165,56 @@ body { transform: scale(1); } } + +@keyframes notivue-slide-in { + 0% { + opacity: 0; + transform: translateY(-200px); + } + 50% { + opacity: 1; + transform: translateY(10px); + } + 70% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0); + } +} + +@keyframes notivue-slide-out { + from { + transform: perspective(400px); + } + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + to { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +// 文本选中 +::selection { + color: var(--main-text-color); + background-color: var(--main-text-hover-color); +} + +// 滚动条 +::-webkit-scrollbar { + background-color: transparent; + width: 6px; +} + +::-webkit-scrollbar-track { + display: none; +} + +::-webkit-scrollbar-thumb { + border-radius: 12px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); + background-color: var(--main-background-color); +} diff --git a/src/utils/timeTools.js b/src/utils/timeTools.js index 0ea3de4..ab2fbaa 100644 --- a/src/utils/timeTools.js +++ b/src/utils/timeTools.js @@ -27,3 +27,27 @@ export const getCurrentTime = () => { }; return currentTime; }; + +/** + * 根据实时时间返回不同的问候语 + * @returns {string} 问候语 + */ +export const getGreeting = () => { + const currentTime = new Date(); + const currentHour = currentTime.getHours(); + let greeting = ""; + if (currentHour >= 5 && currentHour < 9) { + greeting = "早上好"; + } else if (currentHour >= 9 && currentHour < 12) { + greeting = "上午好"; + } else if (currentHour >= 12 && currentHour < 18) { + greeting = "下午好"; + } else if (currentHour >= 18 && currentHour < 24) { + greeting = "晚上好"; + } else if (currentHour >= 0 && currentHour < 5) { + greeting = "凌晨好"; + } else { + greeting = "夜深了"; + } + return greeting; +};