Merge pull request #58 from imsyy/dev

fix 当域名较长时样式出现错误

.env

@@ -10,7 +10,7 @@ VITE_DESC_HELLO_OTHER = "Oops !"
 VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"
 
 # 社交链接
-## 请在根目录下的 socialLinks.json 文件中配置
+## 请在 public 目录下的 socialLinks.json 文件中配置
 
 # 网站链接
 ## 请在 src/components/Links/index.vue 文件中配置

package.json

@@ -4,7 +4,7 @@
   "github": "https://github.com/imsyy/home",
   "home": "https://imsyy.top",
   "private": true,
-  "version": "4.0.1",
+  "version": "4.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/socialLinks.json

@@ -12,7 +12,7 @@
     "name": "QQ",
     "icon": "/images/icon/qq.png",
     "tip": "有什么事吗",
-    "url": "https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes"
+    "url": "https://res.abeim.cn/api/qq/?qq=1539250352"
 }, {
     "name": "Email",
     "icon": "/images/icon/email.png",

src/components/Links/index.vue

@@ -41,6 +41,7 @@ import {
 } from "@vicons/fa";
 
 // 网站链接数据
+// 建议不要超出6个，若需要超出请自行调整样式
 let linksData = [
   {
     icon: Blog,

src/components/Message/index.vue

@@ -4,7 +4,7 @@
     <!-- Logo -->
     <div class="logo">
       <img class="logo-img" :src="siteLogo" alt="logo" />
-      <div class="name">
+      <div class="name text-hidden">
         <span class="bg">{{ siteUrl[0] }}</span>
         <span class="sm">.{{ siteUrl[1] }}</span>
       </div>
@@ -91,6 +91,7 @@ watch(
     }
     .name {
       width: 100%;
+      height: 142px;
       margin-left: 12px;
       transform: translateY(-8px);
       font-family: "Pacifico-Regular";
@@ -112,6 +113,7 @@ watch(
         width: 100px;
       }
       .name {
+        height: 128px;
         .bg {
           font-size: 4.5rem;
         }
@@ -151,5 +153,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;
+    }
+  }
 }
 </style>

src/components/SocialLinks/index.vue

@@ -65,6 +65,7 @@ onMounted(() => {
   backdrop-filter: blur(0);
   animation: fade;
   -webkit-animation: fade 0.5s;
+  transition: all 0.5s;
   @media (max-width: 840px) {
     max-width: 100%;
     justify-content: center;
@@ -95,12 +96,16 @@ onMounted(() => {
   .tip {
     display: none;
     margin-right: 12px;
+    animation: fade;
+    -webkit-animation: fade 0.5s;
   }
-  &:hover {
+  @media (min-width: 768px) {
-    background-color: #00000040;
+    &:hover {
-    backdrop-filter: blur(5px);
+      background-color: #00000040;
-    .tip {
+      backdrop-filter: blur(5px);
-      display: block;
+      .tip {
+        display: block;
+      }
     }
   }
 }

src/style/style.scss

@@ -76,6 +76,13 @@ p {
     transform: scale(0.98);
 }
 
+// 文字超出
+.text-hidden {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 // 弹窗样式
 .el-message {
     --el-message-bg-color: #00000040 !important;

src/views/Main/Left.vue

@@ -14,7 +14,8 @@ const store = mainStore();
 
 <style lang="scss" scoped>
 .left {
-  flex: 1 0 0%;
+  // flex: 1 0 0%;
+  width: 50%;
   margin-right: 10px;
   transform: translateY(20px);
   &.hidden {
@@ -22,6 +23,7 @@ const store = mainStore();
   }
   @media (max-width: 720px) {
     margin-right: 0;
+    width: 100%;
   }
 }
 </style>

src/views/Main/Right.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="store.mobileOpenState ? 'right' : 'right hidden'">
     <!-- 移动端 Logo -->
-    <div class="logo" @click="store.mobileFuncState = !store.mobileFuncState">
+    <div class="logo text-hidden" @click="store.mobileFuncState = !store.mobileFuncState">
       <span class="bg">{{ siteUrl[0] }}</span>
       <span class="sm">.{{ siteUrl[1] }}</span>
     </div>
@@ -26,16 +26,17 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 
 <style lang="scss" scoped>
 .right {
-  flex: 1 0 0%;
+  // flex: 1 0 0%;
+  width: 50%;
   margin-left: 0.75rem;
   .logo {
+    width: 80%;
     font-family: "Pacifico-Regular";
     font-size: 1.75rem;
     position: fixed;
-    width: 140px;
+    top: 6%;
-    text-align: center;
+    left: 50%;
-    top: 8%;
+    transform: translateX(-50%);
-    left: calc(50% - 70px);
     transition: all 0.3s;
     animation: fade;
     -webkit-animation: fade 0.5s;
@@ -48,6 +49,7 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
   }
   @media (max-width: 720px) {
     margin-left: 0;
+    width: 100%;
     &.hidden {
       display: none;
     }

src/views/MoreSet/index.vue

@@ -1,19 +1,39 @@
 <template>
-  <div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
+  <div
+    class="set"
+    @mouseenter="closeShow = true"
+    @mouseleave="closeShow = false"
+    @click.stop
+  >
     <transition name="el-fade-in-linear">
-      <close-one class="close" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
+      <close-one
-        @click="store.setOpenState = false" />
+        class="close"
+        theme="filled"
+        size="28"
+        fill="#ffffff60"
+        v-show="closeShow"
+        @click="store.setOpenState = false"
+      />
     </transition>
     <el-row :gutter="40">
       <el-col :span="12" class="left">
-        <div class="logo">
+        <div class="logo text-hidden">
           <span class="bg">{{ siteUrl[0] }}</span>
           <span class="sm">.{{ siteUrl[1] }}</span>
         </div>
         <div class="version">
           <div class="num">v&nbsp;{{ config.version }}</div>
-          <el-tooltip content="Github 源代码仓库" placement="right" :show-arrow="false">
+          <el-tooltip
-            <github-one class="github" theme="outline" size="24" @click="jumpTo(config.github)" />
+            content="Github 源代码仓库"
+            placement="right"
+            :show-arrow="false"
+          >
+            <github-one
+              class="github"
+              theme="outline"
+              size="24"
+              @click="jumpTo(config.github)"
+            />
           </el-tooltip>
         </div>
         <el-card class="update">
@@ -47,10 +67,16 @@
 
 <script setup>
 import { reactive, ref } from "vue";
-import { CloseOne, SettingTwo, GithubOne, AddOne, Bug } from "@icon-park/vue-next";
+import {
+  CloseOne,
+  SettingTwo,
+  GithubOne,
+  AddOne,
+  Bug,
+} from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 import Set from "@/components/Set/index.vue";
-import config from '@/../package.json';
+import config from "@/../package.json";
 const store = mainStore();
 
 let closeShow = ref(false);
@@ -60,9 +86,19 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 
 // 更新日志
 let upData = reactive({
-  new: ["采用 Vue 进行重构", "音乐歌单支持快速自定义", "壁纸支持个性化设置", "音乐播放器支持音量控制"],
+  new: [
-  fix: ["修复天气 API", "时光胶囊显示错误", "移动端动画及细节", "图标更换为 IconPark"],
+    "采用 Vue 进行重构",
-})
+    "音乐歌单支持快速自定义",
+    "壁纸支持个性化设置",
+    "音乐播放器支持音量控制",
+  ],
+  fix: [
+    "修复天气 API",
+    "时光胶囊显示错误",
+    "移动端动画及细节",
+    "图标更换为 IconPark",
+  ],
+});
 
 // 跳转源代码仓库
 const jumpTo = (url) => {
@@ -115,6 +151,8 @@ const jumpTo = (url) => {
         transform: translateY(-8%);
         font-family: "Pacifico-Regular";
         // line-height: 5rem;
+        width: 100%;
+        height: 260px;
 
         .bg {
           font-size: 5rem;
@@ -133,7 +171,7 @@ const jumpTo = (url) => {
 
         .num {
           font-size: 2rem;
-          font-family: 'Pacifico-Regular';
+          font-family: "Pacifico-Regular";
         }
 
         .github {

vite.config.js

@@ -42,7 +42,8 @@ export default ({
     VitePWA({
       registerType: 'autoUpdate',
       devOptions: {
-        enabled: true
+        enabled: true,
+        navigateFallbackAllowlist: [/^index.html$/]
       },
       workbox: {
         runtimeCaching: [{