fix 当域名较长时样式出现错误 #56
This commit is contained in:
parent
041daf4c22
commit
b8ed0c1926
4
.env
4
.env
@ -1,6 +1,6 @@
|
|||||||
# 站点名称
|
# 站点名称
|
||||||
VITE_SITE_NAME = "無名の主页"
|
VITE_SITE_NAME = "無名の主页"
|
||||||
VITE_SITE_URL = "imsyy.top"
|
VITE_SITE_URL = "imsyyyyyymmy.top"
|
||||||
VITE_SITE_LOGO = "/images/icon/logo.png"
|
VITE_SITE_LOGO = "/images/icon/logo.png"
|
||||||
|
|
||||||
# 简介文本
|
# 简介文本
|
||||||
@ -10,7 +10,7 @@ VITE_DESC_HELLO_OTHER = "Oops !"
|
|||||||
VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关闭 )"
|
VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关闭 )"
|
||||||
|
|
||||||
# 社交链接
|
# 社交链接
|
||||||
## 请在根目录下的 socialLinks.json 文件中配置
|
## 请在 public 目录下的 socialLinks.json 文件中配置
|
||||||
|
|
||||||
# 网站链接
|
# 网站链接
|
||||||
## 请在 src/components/Links/index.vue 文件中配置
|
## 请在 src/components/Links/index.vue 文件中配置
|
||||||
|
@ -41,6 +41,7 @@ import {
|
|||||||
} from "@vicons/fa";
|
} from "@vicons/fa";
|
||||||
|
|
||||||
// 网站链接数据
|
// 网站链接数据
|
||||||
|
// 建议不要超出6个,若需要超出请自行调整样式
|
||||||
let linksData = [
|
let linksData = [
|
||||||
{
|
{
|
||||||
icon: Blog,
|
icon: Blog,
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img class="logo-img" :src="siteLogo" alt="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="bg">{{ siteUrl[0] }}</span>
|
||||||
<span class="sm">.{{ siteUrl[1] }}</span>
|
<span class="sm">.{{ siteUrl[1] }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -91,6 +91,7 @@ watch(
|
|||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 142px;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
transform: translateY(-8px);
|
transform: translateY(-8px);
|
||||||
font-family: "Pacifico-Regular";
|
font-family: "Pacifico-Regular";
|
||||||
|
@ -76,6 +76,13 @@ p {
|
|||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 文字超出
|
||||||
|
.text-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
// 弹窗样式
|
// 弹窗样式
|
||||||
.el-message {
|
.el-message {
|
||||||
--el-message-bg-color: #00000040 !important;
|
--el-message-bg-color: #00000040 !important;
|
||||||
|
@ -14,7 +14,8 @@ const store = mainStore();
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.left {
|
.left {
|
||||||
flex: 1 0 0%;
|
// flex: 1 0 0%;
|
||||||
|
width: 50%;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
&.hidden {
|
&.hidden {
|
||||||
@ -22,6 +23,7 @@ const store = mainStore();
|
|||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="store.mobileOpenState ? 'right' : 'right hidden'">
|
<div :class="store.mobileOpenState ? 'right' : 'right hidden'">
|
||||||
<!-- 移动端 Logo -->
|
<!-- 移动端 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="bg">{{ siteUrl[0] }}</span>
|
||||||
<span class="sm">.{{ siteUrl[1] }}</span>
|
<span class="sm">.{{ siteUrl[1] }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -26,16 +26,17 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.right {
|
.right {
|
||||||
flex: 1 0 0%;
|
// flex: 1 0 0%;
|
||||||
|
width: 50%;
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
.logo {
|
.logo {
|
||||||
|
width: 80%;
|
||||||
font-family: "Pacifico-Regular";
|
font-family: "Pacifico-Regular";
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 140px;
|
top: 6%;
|
||||||
text-align: center;
|
left: 50%;
|
||||||
top: 8%;
|
transform: translateX(-50%);
|
||||||
left: calc(50% - 70px);
|
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
animation: fade;
|
animation: fade;
|
||||||
-webkit-animation: fade 0.5s;
|
-webkit-animation: fade 0.5s;
|
||||||
@ -48,6 +49,7 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
|||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
&.hidden {
|
&.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,39 @@
|
|||||||
<template>
|
<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">
|
<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>
|
</transition>
|
||||||
<el-row :gutter="40">
|
<el-row :gutter="40">
|
||||||
<el-col :span="12" class="left">
|
<el-col :span="12" class="left">
|
||||||
<div class="logo">
|
<div class="logo text-hidden">
|
||||||
<span class="bg">{{ siteUrl[0] }}</span>
|
<span class="bg">{{ siteUrl[0] }}</span>
|
||||||
<span class="sm">.{{ siteUrl[1] }}</span>
|
<span class="sm">.{{ siteUrl[1] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="version">
|
<div class="version">
|
||||||
<div class="num">v {{ config.version }}</div>
|
<div class="num">v {{ 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>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<el-card class="update">
|
<el-card class="update">
|
||||||
@ -47,10 +67,16 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from "vue";
|
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 { mainStore } from "@/store";
|
||||||
import Set from "@/components/Set/index.vue";
|
import Set from "@/components/Set/index.vue";
|
||||||
import config from '@/../package.json';
|
import config from "@/../package.json";
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
let closeShow = ref(false);
|
let closeShow = ref(false);
|
||||||
@ -60,9 +86,19 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
|||||||
|
|
||||||
// 更新日志
|
// 更新日志
|
||||||
let upData = reactive({
|
let upData = reactive({
|
||||||
new: ["采用 Vue 进行重构", "音乐歌单支持快速自定义", "壁纸支持个性化设置", "音乐播放器支持音量控制"],
|
new: [
|
||||||
fix: ["修复天气 API", "时光胶囊显示错误", "移动端动画及细节", "图标更换为 IconPark"],
|
"采用 Vue 进行重构",
|
||||||
})
|
"音乐歌单支持快速自定义",
|
||||||
|
"壁纸支持个性化设置",
|
||||||
|
"音乐播放器支持音量控制",
|
||||||
|
],
|
||||||
|
fix: [
|
||||||
|
"修复天气 API",
|
||||||
|
"时光胶囊显示错误",
|
||||||
|
"移动端动画及细节",
|
||||||
|
"图标更换为 IconPark",
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
// 跳转源代码仓库
|
// 跳转源代码仓库
|
||||||
const jumpTo = (url) => {
|
const jumpTo = (url) => {
|
||||||
@ -115,6 +151,8 @@ const jumpTo = (url) => {
|
|||||||
transform: translateY(-8%);
|
transform: translateY(-8%);
|
||||||
font-family: "Pacifico-Regular";
|
font-family: "Pacifico-Regular";
|
||||||
// line-height: 5rem;
|
// line-height: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 260px;
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
@ -133,7 +171,7 @@ const jumpTo = (url) => {
|
|||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-family: 'Pacifico-Regular';
|
font-family: "Pacifico-Regular";
|
||||||
}
|
}
|
||||||
|
|
||||||
.github {
|
.github {
|
||||||
|
@ -42,7 +42,8 @@ export default ({
|
|||||||
VitePWA({
|
VitePWA({
|
||||||
registerType: 'autoUpdate',
|
registerType: 'autoUpdate',
|
||||||
devOptions: {
|
devOptions: {
|
||||||
enabled: true
|
enabled: true,
|
||||||
|
navigateFallbackAllowlist: [/^index.html$/]
|
||||||
},
|
},
|
||||||
workbox: {
|
workbox: {
|
||||||
runtimeCaching: [{
|
runtimeCaching: [{
|
||||||
|
Loading…
Reference in New Issue
Block a user