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

huiyio · Jan 31, 2023 · b8ed0c1 · b8ed0c1
1 parent 041daf4
commit b8ed0c1
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 23 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,6 @@
 # 站点名称
 VITE_SITE_NAME = "無名の主页"
-VITE_SITE_URL = "imsyy.top"
+VITE_SITE_URL = "imsyyyyyymmy.top"
 VITE_SITE_LOGO = "/images/icon/logo.png"
 
 # 简介文本
@@ -10,7 +10,7 @@ VITE_DESC_HELLO_OTHER = "Oops !"
 VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"
 
 # 社交链接
-## 请在根目录下的 socialLinks.json 文件中配置
+## 请在 public 目录下的 socialLinks.json 文件中配置
 
 # 网站链接
 ## 请在 src/components/Links/index.vue 文件中配置

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

diff --git a/src/components/Message/index.vue b/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";

diff --git a/src/style/style.scss b/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;

diff --git a/src/views/Main/Left.vue b/src/views/Main/Left.vue
@@ -14,14 +14,16 @@ 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 {
     display: none;
   }
   @media (max-width: 720px) {
     margin-right: 0;
+    width: 100%;
   }
 }
 </style>
diff --git a/src/views/Main/Right.vue b/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;
-    text-align: center;
-    top: 8%;
-    left: calc(50% - 70px);
+    top: 6%;
+    left: 50%;
+    transform: translateX(-50%);
     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;
     }

diff --git a/src/views/MoreSet/index.vue b/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"
-        @click="store.setOpenState = false" />
+      <close-one
+        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">
-            <github-one class="github" theme="outline" size="24" @click="jumpTo(config.github)" />
+          <el-tooltip
+            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 进行重构", "音乐歌单支持快速自定义", "壁纸支持个性化设置", "音乐播放器支持音量控制"],
-  fix: ["修复天气 API", "时光胶囊显示错误", "移动端动画及细节", "图标更换为 IconPark"],
-})
+  new: [
+    "采用 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 {

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