Merge branch 'dev' of github.com:imsyy/home into dev

Author: imsyy

.env.example

@@ -1,6 +1,6 @@
 # 站点信息
 VITE_SITE_NAME = "無名の主页" # 名称
-VITE_SITE_ANTHOR = "無名" # 作者
+VITE_SITE_AUTHOR = "無名" # 作者
 VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
 VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
 VITE_SITE_URL = "imsyy.top" # 站点地址

index.html

@@ -11,7 +11,7 @@
  <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
  <meta name="description" content="%VITE_SITE_DES%" />
  <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
- <meta name="author" content="%VITE_SITE_ANTHOR%" />
+ <meta name="author" content="%VITE_SITE_AUTHOR%" />
  <meta name="theme-color" content="#424242" />
  <title>%VITE_SITE_NAME%</title>
  <!-- HarmonyOS Sans -->

src/App.vue

@@ -27,11 +27,12 @@
  </Icon>
  <!-- 页脚 -->
  <Transition name="fade" mode="out-in">
- <Footer v-show="!store.backgroundShow && !store.setOpenState" />
+ <Footer class="f-ter" v-show="!store.backgroundShow && !store.setOpenState" />
  </Transition>
  </main>
  </Transition>
 </template>
+
 <script setup>
 import { helloInit, checkDays } from "@/utils/getTime.js";
 import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
@@ -68,8 +69,9 @@ const loadComplete = () => {
 watch(
  () => store.innerWidth,
  (value) => {
- if (value < 990) {
+ if (value < 721) {
  store.boxOpenState = false;
+ store.setOpenState = false;
  }
  },
 );
@@ -139,6 +141,7 @@ onBeforeUnmount(() => {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
+ padding: 0 0.5vw;
  .all {
  width: 100%;
  height: 100%;
@@ -164,7 +167,7 @@ onBeforeUnmount(() => {
  }
  }
  .menu {
- position: fixed;
+ position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
@@ -187,5 +190,65 @@ onBeforeUnmount(() => {
  display: none;
  }
  }
+ @media (max-height: 720px) {
+ overflow-y: auto;
+ overflow-x: hidden;
+ .container {
+ height: 721px;
+ .more {
+ height: 721px;
+ width: calc(100% + 6px);
+ }
+ @media (min-width: 391px) {
+ // w 1201px ~ max
+ padding-left: 0.7vw;
+ padding-right: 0.25vw;
+ @media (max-width: 1200px) { // w 1101px ~ 1280px
+ padding-left: 2.3vw;
+ padding-right: 1.75vw;
+ }
+ @media (max-width: 1100px) { // w 993px ~ 1100px
+ padding-left: 2vw;
+ padding-right: calc(2vw - 6px);
+ }
+ @media (max-width: 992px) { // w 901px ~ 992px
+ padding-left: 2.3vw;
+ padding-right: 1.7vw;
+ }
+ @media (max-width: 900px) { // w 391px ~ 900px
+ padding-left: 2vw;
+ padding-right: calc(2vw - 6px);
+ }
+ }
+ }
+ .menu {
+ top: 605.64px; // 721px * 0.84
+ left: 170.5px; // 391 * 0.5 - 25px
+ @media (min-width: 391px) {
+ left: calc(50% - 25px);
+ }
+ }
+ .f-ter {
+ top: 675px; // 721px - 46px
+ @media (min-width: 391px) {
+ padding-left: 6px;
+ }
+ }
+ }
+ @media (max-width: 390px) {
+ overflow-x: auto;
+ .container {
+ width: 391px;
+ }
+ .menu {
+ left: 167.5px; // 391px * 0.5 - 28px
+ }
+ .f-ter {
+ width: 391px;
+ }
+ @media (min-height: 721px) {
+ overflow-y: hidden;
+ }
+ }
 }
 </style>

src/components/Footer.vue

@@ -3,13 +3,15 @@
  <Transition name="fade" mode="out-in">
  <div v-if="!store.playerState || !store.playerLrcShow" class="power">
  <span>
- Copyright&nbsp;&copy;
- <span v-if="siteStartDate?.length >= 4" class="site-start">
- {{ siteStartDate.substring(0, 4) }}
+ <span :class="startYear < fullYear ? 'c-hidden' : 'hidden'">Copyright&nbsp;</span>
+ &copy;
+ <span v-if="startYear < fullYear"
+ class="site-start">
+ {{ startYear }}
  -
  </span>
  {{ fullYear }}
- <a :href="siteUrl">{{ siteAnthor }}</a>
+ <a :href="siteUrl">{{ siteAuthor }}</a>
  </span>
  <!-- 以下信息请不要修改哦 -->
  <span class="hidden">
@@ -19,10 +21,12 @@
  </a>
  </span>
  <!-- 站点备案 -->
- <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+ <span>
  &amp;
- {{ siteIcp }}
- </a>
+ <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+ {{ siteIcp }}
+ </a>
+ </span>
  </div>
  <div v-else class="lrc">
  <Transition name="fade" mode="out-in">
@@ -46,9 +50,13 @@ const store = mainStore();
 const fullYear = new Date().getFullYear();
 
 // 加载配置数据
-const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+// const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+const startYear = ref(
+ import.meta.env.VITE_SITE_START?.length >= 4 ? 
+ import.meta.env.VITE_SITE_START.substring(0, 4) : null
+);
 const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
-const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
+const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR);
 const siteUrl = computed(() => {
  const url = import.meta.env.VITE_SITE_URL;
  if (!url) return "https://www.imsyy.top";
@@ -71,6 +79,9 @@ const siteUrl = computed(() => {
  text-align: center;
  z-index: 0;
  font-size: 14px;
+ // 文字不换行
+ word-break: keep-all;
+ white-space: nowrap;
  .power {
  animation: fade 0.3s;
  }
@@ -106,9 +117,14 @@ const siteUrl = computed(() => {
  transition: opacity 0.15s ease-in-out;
  }
  @media (max-width: 720px) {
- font-size: 0.85rem;
+ font-size: 0.9rem;
  &.blur {
- font-size: 0.85rem;
+ font-size: 0.9rem;
+ }
+ }
+ @media (max-width: 560px) {
+ .c-hidden {
+ display: none;
  }
  }
  @media (max-width: 480px) {

src/components/Message.vue

@@ -58,7 +58,7 @@ const descriptionText = reactive({
 
 // 切换右侧功能区
 const changeBox = () => {
- if (store.getInnerWidth >= 990) {
+ if (store.getInnerWidth >= 721) {
  store.boxOpenState = !store.boxOpenState;
  } else {
  ElMessage({
@@ -112,7 +112,7 @@ watch(
  .sm {
  margin-left: 6px;
  font-size: 2rem;
- @media (min-width: 720px) and (max-width: 789px) {
+ @media (min-width: 721px) and (max-width: 789px) {
  display: none;
  }
  }
@@ -166,28 +166,28 @@ watch(
  pointer-events: none;
  }
  }
- @media (max-width: 390px) {
- .logo {
- flex-direction: column;
- .logo-img {
- display: none;
- }
- .name {
- margin-left: 0;
- height: auto;
- transform: none;
- text-align: center;
- .bg {
- font-size: 3.5rem;
- }
- .sm {
- font-size: 1.4rem;
- }
- }
- }
- .description {
- margin-top: 2.5rem;
- }
- }
+ // @media (max-width: 390px) {
+ //  .logo {
+ //  flex-direction: column;
+ //  .logo-img {
+ //  display: none;
+ //  }
+ //  .name {
+ //  margin-left: 0;
+ //  height: auto;
+ //  transform: none;
+ //  text-align: center;
+ //  .bg {
+ //  font-size: 3.5rem;
+ //  }
+ //  .sm {
+ //  font-size: 1.4rem;
+ //  }
+ //  }
+ //  }
+ //  .description {
+ //  margin-top: 2.5rem;
+ //  }
+ // }
 }
 </style>

src/components/TimeCapsule.vue

@@ -16,7 +16,7 @@
  剩余 {{ item.remaining }} {{ tag === "day" ? "小时" : "天" }}
  </span>
  </div>
- <el-progress :text-inside="true" :stroke-width="20" :percentage="item.percentage" />
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(item.percentage)" />
  </div>
  <!-- 建站日期 -->
  <div v-if="store.siteStartShow" class="capsule-item start">

src/style/style.scss

@@ -37,6 +37,12 @@ p {
  }
 }
 
+// 链接悬停效果
+a:hover {
+ color: rgb(57, 159, 255);
+ text-decoration: underline;
+}
+
 // 字体文件
 @font-face {
  font-family: "Pacifico-Regular";

src/utils/getTime.js

@@ -45,12 +45,9 @@ export const getTimeCapsule = () => {
  // 计算总的天数或小时数
  const total = end.diff(start, unit === "day" ? "hour" : "day") + 1;
  // 计算已经过去的天数或小时数
- let passed;
- if (unit === "week" && now.day() === 0) {
- // 如果是星期日
- passed = total - 1;
- } else {
- passed = now.diff(start, unit === "day" ? "hour" : "day");
+ let passed = now.diff(start, unit === "day" ? "hour" : "day");
+ if (unit === "week") {
+ passed = (passed + 6) % 7;
  }
  const remaining = total - passed;
  const percentage = (passed / total) * 100;

src/views/Func/index.vue

@@ -127,6 +127,15 @@ onBeforeUnmount(() => {
  letter-spacing: 2px;
  font-family: "UnidreamLED";
  }
+ @media (min-width: 1201px) and (max-width: 1280px) {
+ font-size: 1rem;
+ }
+ @media (min-width: 911px) and (max-width: 992px) {
+ font-size: 1rem;
+ .text {
+ font-size: 2.75rem;
+ }
+ }
  }
  .weather {
  text-align: center;

src/views/Main/Right.vue

@@ -39,7 +39,7 @@ const siteUrl = computed(() => {
  .logo {
  width: 100%;
  font-family: "Pacifico-Regular";
- font-size: 1.75rem;
+ font-size: 2.25rem;
  position: fixed;
  top: 6%;
  left: 0;
@@ -49,9 +49,16 @@ const siteUrl = computed(() => {
  &:active {
  transform: scale(0.95);
  }
- @media (min-width: 720px) {
+ @media (min-width: 721px) {
  display: none;
  }
+ @media (max-height: 720px) {
+ width: calc(100% + 6px);
+ top: 43.26px; // 721px * 0.06
+ }
+ @media (max-width: 390px) {
+ width: 391px;
+ }
  }
  @media (max-width: 720px) {
  margin-left: 0;