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 @@
-
+
@@ -20,19 +20,36 @@
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;
+};