Fix Bug
This commit is contained in:
parent
3463084339
commit
6e416bfec0
5
.env
5
.env
@ -16,12 +16,15 @@ VITE_SOCIAL_TELEGRAM = "bottom_user"
|
|||||||
VITE_SOCIAL_TWITTER = "iimmsyy"
|
VITE_SOCIAL_TWITTER = "iimmsyy"
|
||||||
|
|
||||||
# 网站链接
|
# 网站链接
|
||||||
## 请在 src\components\Links\index.vue 中设置
|
## 请在 src/components/Links/index.vue 中设置
|
||||||
|
|
||||||
# 天气 Key
|
# 天气 Key
|
||||||
## 请前往高德开放平台注册 Web服务 Key
|
## 请前往高德开放平台注册 Web服务 Key
|
||||||
|
## 请各位大佬行行好,别再让我超量了
|
||||||
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
|
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
|
||||||
|
|
||||||
|
# 歌曲 API 地址
|
||||||
|
VITE_SONG_API = "https://api-meting.imsyy.top"
|
||||||
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
|
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
|
||||||
VITE_SONG_SERVER = "netease"
|
VITE_SONG_SERVER = "netease"
|
||||||
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "home",
|
"name": "home",
|
||||||
|
"author": "imsyy",
|
||||||
|
"github": "https://github.com/imsyy/home",
|
||||||
|
"home": "https://imsyy.top",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@ -15,6 +18,7 @@
|
|||||||
"element-plus": "^2.2.18",
|
"element-plus": "^2.2.18",
|
||||||
"pinia": "^2.0.23",
|
"pinia": "^2.0.23",
|
||||||
"pinia-plugin-persistedstate": "^3.0.0",
|
"pinia-plugin-persistedstate": "^3.0.0",
|
||||||
|
"terser": "^5.16.1",
|
||||||
"vue": "^3.2.37",
|
"vue": "^3.2.37",
|
||||||
"vue3-aplayer": "^1.7.3"
|
"vue3-aplayer": "^1.7.3"
|
||||||
},
|
},
|
||||||
|
75
src/App.vue
75
src/App.vue
@ -3,30 +3,28 @@
|
|||||||
<Background />
|
<Background />
|
||||||
<main>
|
<main>
|
||||||
<div class="container" v-show="!store.backgroundShow">
|
<div class="container" v-show="!store.backgroundShow">
|
||||||
<transition name="el-fade-in-linear">
|
<section class="main" v-show="!store.setOpenState">
|
||||||
<section class="main" v-show="!store.setOpenState">
|
<MainLeft />
|
||||||
<MainLeft />
|
<MainRight v-show="!store.boxOpenState" />
|
||||||
<MainRight v-show="!store.boxOpenState" />
|
<Box v-show="store.boxOpenState" />
|
||||||
<Box v-show="store.boxOpenState" />
|
</section>
|
||||||
</section>
|
<section
|
||||||
</transition>
|
class="more"
|
||||||
<transition name="el-fade-in-linear">
|
v-show="store.setOpenState"
|
||||||
<section
|
@click="store.setOpenState = false"
|
||||||
class="more"
|
>
|
||||||
v-show="store.setOpenState"
|
<MoreSet />
|
||||||
@click="store.setOpenState = false"
|
</section>
|
||||||
>
|
|
||||||
<MoreSet />
|
|
||||||
</section>
|
|
||||||
</transition>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<Footer v-show="!store.backgroundShow" />
|
<Footer v-show="!store.backgroundShow && !store.setOpenState" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, onBeforeUnmount } from "vue";
|
import { onMounted, onBeforeUnmount, watch } from "vue";
|
||||||
|
import { helloInit, checkDays } from "@/utils/getTime.js";
|
||||||
|
import { mainStore } from "@/store";
|
||||||
import MainLeft from "@/views/Main/Left.vue";
|
import MainLeft from "@/views/Main/Left.vue";
|
||||||
import MainRight from "@/views/Main/Right.vue";
|
import MainRight from "@/views/Main/Right.vue";
|
||||||
import Background from "@/components/Background/index.vue";
|
import Background from "@/components/Background/index.vue";
|
||||||
@ -34,8 +32,10 @@ import Footer from "@/components/Footer/index.vue";
|
|||||||
import Box from "@/views/Box/index.vue";
|
import Box from "@/views/Box/index.vue";
|
||||||
import MoreSet from "@/views/MoreSet/index.vue";
|
import MoreSet from "@/views/MoreSet/index.vue";
|
||||||
import cursorInit from "@/utils/cursor.js";
|
import cursorInit from "@/utils/cursor.js";
|
||||||
import { helloInit, checkDays } from "@/utils/getTime.js";
|
import config from "@/../package.json";
|
||||||
import { mainStore } from "@/store";
|
// 新春灯笼
|
||||||
|
import "@/utils/lantern.js";
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
// 页面宽度
|
// 页面宽度
|
||||||
@ -76,8 +76,38 @@ onMounted(() => {
|
|||||||
// 监听当前页面宽度
|
// 监听当前页面宽度
|
||||||
getWidth();
|
getWidth();
|
||||||
window.addEventListener("resize", getWidth);
|
window.addEventListener("resize", getWidth);
|
||||||
|
|
||||||
|
// 控制台输出
|
||||||
|
let styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
|
||||||
|
let styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
|
||||||
|
let styleContent = "color: rgb(30,152,255);";
|
||||||
|
let title1 = "無名の主页";
|
||||||
|
let title2 = `
|
||||||
|
_____ __ __ _______ ____ __
|
||||||
|
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
||||||
|
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
|
||||||
|
| | | |\\/| |\\___ \\ \\ / \\ /
|
||||||
|
_| |_| | | |____) | | | | |
|
||||||
|
|_____|_| |_|_____/ |_| |_|`;
|
||||||
|
let content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
|
||||||
|
console.info(
|
||||||
|
`%c${title1} %c${title2} %c${content}`,
|
||||||
|
styleTitle1,
|
||||||
|
styleTitle2,
|
||||||
|
styleContent
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 监听宽度变化
|
||||||
|
watch(
|
||||||
|
() => store.innerWidth,
|
||||||
|
(value) => {
|
||||||
|
if (value < 990) {
|
||||||
|
store.boxOpenState = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener("resize", getWidth);
|
window.removeEventListener("resize", getWidth);
|
||||||
});
|
});
|
||||||
@ -89,7 +119,7 @@ main {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 0 2vw;
|
||||||
.main {
|
.main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -99,7 +129,6 @@ main {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -109,6 +138,8 @@ main {
|
|||||||
background-color: #00000080;
|
background-color: #00000080;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
// 获取音乐播放列表
|
// 获取音乐播放列表
|
||||||
export const getPlayerList = async (server, type, id) => {
|
export const getPlayerList = async (server, type, id) => {
|
||||||
const res = await fetch(`https://api-meting.imsyy.top/?server=${server}&type=${type}&id=${id}`);
|
const res = await fetch(`${import.meta.env.VITE_SONG_API}/?server=${server}&type=${type}&id=${id}`);
|
||||||
return await res.json();
|
return await res.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,38 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer>
|
<footer>
|
||||||
<Transition name="fade">
|
<div class="power" v-show="!store.playerState">
|
||||||
<div class="power" v-show="!store.playerState">
|
<span
|
||||||
<span
|
>Copyright © {{ fullYear }}
|
||||||
>Copyright © {{ fullYear }}
|
<a href="https://imsyy.top">無名</a>
|
||||||
<a href="https://imsyy.top">無名</a>
|
</span>
|
||||||
</span>
|
<!-- 以下信息请不要修改哦 -->
|
||||||
<!-- 以下信息请不要修改哦 -->
|
<span
|
||||||
<span
|
> & Made by <a
|
||||||
> & Made by <a
|
:href="config.github"
|
||||||
href="https://github.com/imsyy/home"
|
target="_blank"
|
||||||
target="_blank"
|
|
||||||
>imsyy</a
|
|
||||||
> </span
|
|
||||||
> &
|
|
||||||
<!-- 站点备案 -->
|
|
||||||
<a href="https://beian.miit.gov.cn" target="_blank"
|
|
||||||
>豫ICP备2022018134号-1</a
|
|
||||||
>
|
>
|
||||||
</div>
|
{{ config.author }}
|
||||||
</Transition>
|
</a> </span
|
||||||
<Transition name="fade">
|
> &
|
||||||
<div class="lrc" v-show="store.playerState">
|
<!-- 站点备案 -->
|
||||||
<music-one theme="filled" size="18" fill="#efefef" />
|
<a href="https://beian.miit.gov.cn" target="_blank"
|
||||||
<span class="lrc-text">{{ store.getPlayerLrc }}</span>
|
>豫ICP备2022018134号-1</a
|
||||||
<music-one theme="filled" size="18" fill="#efefef" />
|
>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
<div class="lrc" v-show="store.playerState">
|
||||||
|
<music-one theme="filled" size="18" fill="#efefef" />
|
||||||
|
<span class="lrc-text">{{ store.getPlayerLrc }}</span>
|
||||||
|
<music-one theme="filled" size="18" fill="#efefef" />
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { MusicOne } from "@icon-park/vue-next";
|
import { MusicOne } from "@icon-park/vue-next";
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from "@/store";
|
||||||
|
import config from "@/../package.json";
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
let fullYear = new Date().getFullYear();
|
let fullYear = new Date().getFullYear();
|
||||||
@ -50,11 +48,19 @@ footer {
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
background: rgb(0 0 0 / 25%);
|
background: rgb(0 0 0 / 25%);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
|
.power {
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.3s;
|
||||||
|
}
|
||||||
.lrc {
|
.lrc {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.3s;
|
||||||
.lrc-text {
|
.lrc-text {
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
|
@ -89,6 +89,7 @@ const jumpLink = (url) => {
|
|||||||
.title {
|
.title {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
|
text-shadow: 0 0 5px #00000050;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.link-all {
|
.link-all {
|
||||||
@ -100,15 +101,23 @@ const jumpLink = (url) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
.name {
|
animation: fade;
|
||||||
font-size: 1.1rem;
|
-webkit-animation: fade 0.5s;
|
||||||
margin-left: 8px;
|
@media (max-width: 820px) {
|
||||||
|
.name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.02);
|
transform: scale(1.02);
|
||||||
background: rgb(0 0 0 / 40%);
|
background: rgb(0 0 0 / 40%);
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -81,6 +81,8 @@ watch(
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
|
|
||||||
.logo-img {
|
.logo-img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -108,13 +110,15 @@ watch(
|
|||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
margin-top: 3.5rem;
|
margin-top: 3.5rem;
|
||||||
max-width: 460px;
|
max-width: 460px;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
margin: 0.75rem auto;
|
margin: 0.75rem 1rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
|
@ -39,41 +39,37 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<Transition name="fade">
|
<div class="name" v-show="!volumeShow">
|
||||||
<div class="name" v-show="!volumeShow">
|
<span>{{
|
||||||
<span>{{
|
store.getPlayerData.name
|
||||||
store.getPlayerData.name
|
? store.getPlayerData.name + " - " + store.getPlayerData.artist
|
||||||
? store.getPlayerData.name + " - " + store.getPlayerData.artist
|
: "未播放音乐"
|
||||||
: "未播放音乐"
|
}}</span>
|
||||||
}}</span>
|
</div>
|
||||||
</div>
|
<div class="volume" v-show="volumeShow">
|
||||||
</Transition>
|
<div class="icon">
|
||||||
<Transition name="fade">
|
<volume-mute
|
||||||
<div class="volume" v-show="volumeShow">
|
theme="filled"
|
||||||
<div class="icon">
|
size="24"
|
||||||
<volume-mute
|
fill="#efefef"
|
||||||
theme="filled"
|
v-if="volumeNum == 0"
|
||||||
size="24"
|
|
||||||
fill="#efefef"
|
|
||||||
v-if="volumeNum == 0"
|
|
||||||
/>
|
|
||||||
<volume-small
|
|
||||||
theme="filled"
|
|
||||||
size="24"
|
|
||||||
fill="#efefef"
|
|
||||||
v-else-if="volumeNum > 0 && volumeNum < 0.7"
|
|
||||||
/>
|
|
||||||
<volume-notice theme="filled" size="24" fill="#efefef" v-else />
|
|
||||||
</div>
|
|
||||||
<el-slider
|
|
||||||
v-model="volumeNum"
|
|
||||||
:show-tooltip="false"
|
|
||||||
:min="0"
|
|
||||||
:max="1"
|
|
||||||
:step="0.01"
|
|
||||||
/>
|
/>
|
||||||
|
<volume-small
|
||||||
|
theme="filled"
|
||||||
|
size="24"
|
||||||
|
fill="#efefef"
|
||||||
|
v-else-if="volumeNum > 0 && volumeNum < 0.7"
|
||||||
|
/>
|
||||||
|
<volume-notice theme="filled" size="24" fill="#efefef" v-else />
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
<el-slider
|
||||||
|
v-model="volumeNum"
|
||||||
|
:show-tooltip="false"
|
||||||
|
:min="0"
|
||||||
|
:max="1"
|
||||||
|
:step="0.01"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 音乐列表弹窗 -->
|
<!-- 音乐列表弹窗 -->
|
||||||
@ -260,6 +256,8 @@ watch(
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
// font-size: 1.1rem;
|
// font-size: 1.1rem;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume {
|
.volume {
|
||||||
@ -268,6 +266,8 @@ watch(
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.3s;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
@ -350,20 +350,23 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 弹窗动画
|
// 弹窗动画
|
||||||
|
.fade-enter-active {
|
||||||
|
animation: fade 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.fade-leave-active {
|
||||||
|
animation: fade 0.3s ease-in-out reverse;
|
||||||
|
}
|
||||||
.zoom-enter-active {
|
.zoom-enter-active {
|
||||||
animation: zoom 0.4s ease-in-out;
|
animation: zoom 0.4s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-leave-active {
|
.zoom-leave-active {
|
||||||
animation: zoom 0.3s ease-in-out reverse;
|
animation: zoom 0.3s ease-in-out reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes zoom {
|
@keyframes zoom {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0) translateY(-600px);
|
transform: scale(0) translateY(-600px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1) translateY(0);
|
transform: scale(1) translateY(0);
|
||||||
|
@ -197,12 +197,15 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
state.instance.on("timeupdate", () => {
|
state.instance.on("timeupdate", () => {
|
||||||
playerData.lrc = playerRef.value.getElementsByClassName(
|
if (playerRef.value) {
|
||||||
"aplayer-lrc-current"
|
playerData.lrc = playerRef.value.getElementsByClassName(
|
||||||
)[0].innerHTML;
|
"aplayer-lrc-current"
|
||||||
|
)[0].innerHTML;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
store.musicIsOk = false;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "播放器加载失败",
|
message: "播放器加载失败",
|
||||||
grouping: true,
|
grouping: true,
|
||||||
|
@ -131,6 +131,20 @@ const leaveTip = () => {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
backdrop-filter: blur(0);
|
backdrop-filter: blur(0);
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
max-width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
.link {
|
||||||
|
justify-content: space-evenly !important;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
// 首次调用
|
// 首次调用
|
||||||
@include changeWidth;
|
@include changeWidth;
|
||||||
|
|
||||||
/* 小于1200px时 */
|
/* 小于1380px时 */
|
||||||
@media (max-width: 1380px) {
|
@media (max-width: 1380px) {
|
||||||
.el-radio-group {
|
.el-radio-group {
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
@ -20,11 +20,6 @@
|
|||||||
/* 小于1200px时 */
|
/* 小于1200px时 */
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
@include changeWidth($maxWidth:1000px);
|
@include changeWidth($maxWidth:1000px);
|
||||||
|
|
||||||
// 隐藏元素
|
|
||||||
.sm-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小于992px时 */
|
/* 小于992px时 */
|
||||||
|
@ -26,13 +26,11 @@ p {
|
|||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: .3s;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
// color: #ffffff90;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -66,19 +64,15 @@ p {
|
|||||||
-webkit-backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transition: 0.5s;
|
transition: all 0.3s;
|
||||||
animation: fade;
|
|
||||||
-webkit-animation: fade 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards:hover {
|
.cards:hover {
|
||||||
transform: scale(1.01);
|
transform: scale(1.01);
|
||||||
transition: 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards:active {
|
.cards:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
transition: 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 弹窗样式
|
// 弹窗样式
|
||||||
@ -143,14 +137,6 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 渐入动画
|
// 渐入动画
|
||||||
.fade-enter-active {
|
|
||||||
animation: fade 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-leave-active {
|
|
||||||
animation: fade 0.3s ease-in-out reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade {
|
@keyframes fade {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -161,6 +147,14 @@ p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 隐藏元素
|
||||||
|
@media (min-width: 910px) and (max-width: 1200px) {
|
||||||
|
.sm-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 自定义鼠标
|
// 自定义鼠标
|
||||||
#cursor {
|
#cursor {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -181,7 +175,6 @@ p {
|
|||||||
&.active {
|
&.active {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transform: scale(0.5);
|
transform: scale(0.5);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
6
src/utils/lantern.js
Normal file
6
src/utils/lantern.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,12 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box cards" @mouseenter="closeShow = true" @mouseleave="closeShow = false">
|
<div
|
||||||
|
class="box cards"
|
||||||
|
@mouseenter="closeShow = true"
|
||||||
|
@mouseleave="closeShow = false"
|
||||||
|
>
|
||||||
<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.boxOpenState = false" />
|
class="close"
|
||||||
|
theme="filled"
|
||||||
|
size="28"
|
||||||
|
fill="#ffffff60"
|
||||||
|
v-show="closeShow"
|
||||||
|
@click="store.boxOpenState = false"
|
||||||
|
/>
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="el-fade-in-linear">
|
<transition name="el-fade-in-linear">
|
||||||
<setting-two class="setting" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
|
<setting-two
|
||||||
@click="store.setOpenState = true" />
|
class="setting"
|
||||||
|
theme="filled"
|
||||||
|
size="28"
|
||||||
|
fill="#ffffff60"
|
||||||
|
v-show="closeShow"
|
||||||
|
@click="store.setOpenState = true"
|
||||||
|
/>
|
||||||
</transition>
|
</transition>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<TimeCapsule />
|
<TimeCapsule />
|
||||||
@ -15,24 +31,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from "vue";
|
import { ref } from "vue";
|
||||||
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
|
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
|
||||||
import TimeCapsule from "@/components/TimeCapsule/index.vue";
|
import TimeCapsule from "@/components/TimeCapsule/index.vue";
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from "@/store";
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
let closeShow = ref(false);
|
let closeShow = ref(false);
|
||||||
|
|
||||||
// 监听宽度变化
|
|
||||||
watch(
|
|
||||||
() => store.innerWidth,
|
|
||||||
(value) => {
|
|
||||||
console.log(value);
|
|
||||||
if (value < 990 && store.boxOpenState) {
|
|
||||||
store.boxOpenState = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -41,6 +46,8 @@ watch(
|
|||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
@ -66,6 +66,17 @@ onBeforeUnmount(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
.el-col {
|
.el-col {
|
||||||
|
@media (max-width: 910px) {
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
padding: 0 !important;
|
||||||
|
flex: none;
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
@ -84,6 +95,8 @@ onBeforeUnmount(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
animation: fade;
|
||||||
|
-webkit-animation: fade 0.5s;
|
||||||
.time {
|
.time {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -9,9 +9,9 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { reactive, ref, onMounted } from "vue";
|
||||||
|
import { mainStore } from "@/store";
|
||||||
import Func from "@/views/Func/index.vue";
|
import Func from "@/views/Func/index.vue";
|
||||||
import Link from "@/components/Links/index.vue";
|
import Link from "@/components/Links/index.vue";
|
||||||
import { mainStore } from "@/store";
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<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 content="Github 源代码仓库" placement="right" :show-arrow="false">
|
||||||
<github-one class="github" theme="outline" size="24" @click="jumpTo" />
|
<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">
|
||||||
@ -65,8 +65,8 @@ let upData = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 跳转源代码仓库
|
// 跳转源代码仓库
|
||||||
const jumpTo = () => {
|
const jumpTo = (url) => {
|
||||||
window.open('https://github.com/imsyy/home');
|
window.open(url);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -54,5 +54,14 @@ export default ({
|
|||||||
additionalData: `@import "./src/style/global.scss";`
|
additionalData: `@import "./src/style/global.scss";`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
build: {
|
||||||
|
minify: 'terser',
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
// 生产环境时移除 console
|
||||||
|
pure_funcs: ['console.log'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
})
|
})
|
@ -1,62 +0,0 @@
|
|||||||
// vite.config.js
|
|
||||||
import {
|
|
||||||
defineConfig,
|
|
||||||
loadEnv
|
|
||||||
} from "file:///D:/Html/WorkSpace/Home/node_modules/vite/dist/node/index.js";
|
|
||||||
import vue from "file:///D:/Html/WorkSpace/Home/node_modules/@vitejs/plugin-vue/dist/index.mjs";
|
|
||||||
import AutoImport from "file:///D:/Html/WorkSpace/Home/node_modules/unplugin-auto-import/dist/vite.js";
|
|
||||||
import Components from "file:///D:/Html/WorkSpace/Home/node_modules/unplugin-vue-components/dist/vite.mjs";
|
|
||||||
import {
|
|
||||||
ElementPlusResolver
|
|
||||||
} from "file:///D:/Html/WorkSpace/Home/node_modules/unplugin-vue-components/dist/resolvers.mjs";
|
|
||||||
import {
|
|
||||||
createHtmlPlugin
|
|
||||||
} from "file:///D:/Html/WorkSpace/Home/node_modules/vite-plugin-html/dist/index.mjs";
|
|
||||||
import {
|
|
||||||
resolve
|
|
||||||
} from "path";
|
|
||||||
var __vite_injected_original_dirname = "D:\\Html\\WorkSpace\\Home";
|
|
||||||
var vite_config_default = ({
|
|
||||||
mode
|
|
||||||
}) => defineConfig({
|
|
||||||
plugins: [
|
|
||||||
vue(),
|
|
||||||
AutoImport({
|
|
||||||
resolvers: [ElementPlusResolver()]
|
|
||||||
}),
|
|
||||||
Components({
|
|
||||||
resolvers: [ElementPlusResolver()]
|
|
||||||
}),
|
|
||||||
createHtmlPlugin({
|
|
||||||
minify: true,
|
|
||||||
template: "index.html",
|
|
||||||
inject: {
|
|
||||||
data: {
|
|
||||||
title: loadEnv(mode, process.cwd()).VITE_SITE_NAME
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
],
|
|
||||||
server: {
|
|
||||||
port: "3000",
|
|
||||||
hmr: true
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
alias: [{
|
|
||||||
find: "@",
|
|
||||||
replacement: resolve(__vite_injected_original_dirname, "src")
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
css: {
|
|
||||||
preprocessorOptions: {
|
|
||||||
scss: {
|
|
||||||
charset: false,
|
|
||||||
additionalData: `@import "./src/style/global.scss";`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
export {
|
|
||||||
vite_config_default as default
|
|
||||||
};
|
|
||||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxIdG1sXFxcXFdvcmtTcGFjZVxcXFxIb21lXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJEOlxcXFxIdG1sXFxcXFdvcmtTcGFjZVxcXFxIb21lXFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9IdG1sL1dvcmtTcGFjZS9Ib21lL3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHtcbiAgZGVmaW5lQ29uZmlnLFxuICBsb2FkRW52XG59IGZyb20gJ3ZpdGUnO1xuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnO1xuaW1wb3J0IEF1dG9JbXBvcnQgZnJvbSAndW5wbHVnaW4tYXV0by1pbXBvcnQvdml0ZSdcbmltcG9ydCBDb21wb25lbnRzIGZyb20gJ3VucGx1Z2luLXZ1ZS1jb21wb25lbnRzL3ZpdGUnXG5pbXBvcnQge1xuICBFbGVtZW50UGx1c1Jlc29sdmVyXG59IGZyb20gJ3VucGx1Z2luLXZ1ZS1jb21wb25lbnRzL3Jlc29sdmVycydcbmltcG9ydCB7XG4gIGNyZWF0ZUh0bWxQbHVnaW5cbn0gZnJvbSAndml0ZS1wbHVnaW4taHRtbCc7XG5pbXBvcnQge1xuICByZXNvbHZlXG59IGZyb20gJ3BhdGgnO1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgKHtcbiAgbW9kZVxufSkgPT4gZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSgpLFxuICAgIEF1dG9JbXBvcnQoe1xuICAgICAgcmVzb2x2ZXJzOiBbRWxlbWVudFBsdXNSZXNvbHZlcigpXSxcbiAgICB9KSxcbiAgICBDb21wb25lbnRzKHtcbiAgICAgIHJlc29sdmVyczogW0VsZW1lbnRQbHVzUmVzb2x2ZXIoKV0sXG4gICAgfSksXG4gICAgY3JlYXRlSHRtbFBsdWdpbih7XG4gICAgICBtaW5pZnk6IHRydWUsXG4gICAgICB0ZW1wbGF0ZTogJ2luZGV4Lmh0bWwnLFxuICAgICAgaW5qZWN0OiB7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICB0aXRsZTogbG9hZEVudihtb2RlLCBwcm9jZXNzLmN3ZCgpKS5WSVRFX1NJVEVfTkFNRSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSksXG4gIF0sXG4gIHNlcnZlcjoge1xuICAgIHBvcnQ6IFwiMzAwMFwiLFxuICAgIGhtcjogdHJ1ZSxcbiAgfSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiBbe1xuICAgICAgZmluZDogJ0AnLFxuICAgICAgcmVwbGFjZW1lbnQ6IHJlc29sdmUoX19kaXJuYW1lLCBcInNyY1wiKSxcbiAgICB9LCBdXG4gIH0sXG4gIGNzczoge1xuICAgIHByZXByb2Nlc3Nvck9wdGlvbnM6IHtcbiAgICAgIHNjc3M6IHtcbiAgICAgICAgY2hhcnNldDogZmFsc2UsXG4gICAgICAgIGFkZGl0aW9uYWxEYXRhOiBgQGltcG9ydCBcIi4vc3JjL3N0eWxlL2dsb2JhbC5zY3NzXCI7YFxuICAgICAgfVxuICAgIH1cbiAgfVxufSkiXSwKICAibWFwcGluZ3MiOiAiO0FBQTRQO0FBQUEsRUFDMVA7QUFBQSxFQUNBO0FBQUEsT0FDSztBQUNQLE9BQU8sU0FBUztBQUNoQixPQUFPLGdCQUFnQjtBQUN2QixPQUFPLGdCQUFnQjtBQUN2QjtBQUFBLEVBQ0U7QUFBQSxPQUNLO0FBQ1A7QUFBQSxFQUNFO0FBQUEsT0FDSztBQUNQO0FBQUEsRUFDRTtBQUFBLE9BQ0s7QUFmUCxJQUFNLG1DQUFtQztBQWtCekMsSUFBTyxzQkFBUSxDQUFDO0FBQUEsRUFDZDtBQUNGLE1BQU0sYUFBYTtBQUFBLEVBQ2pCLFNBQVM7QUFBQSxJQUNQLElBQUk7QUFBQSxJQUNKLFdBQVc7QUFBQSxNQUNULFdBQVcsQ0FBQyxvQkFBb0IsQ0FBQztBQUFBLElBQ25DLENBQUM7QUFBQSxJQUNELFdBQVc7QUFBQSxNQUNULFdBQVcsQ0FBQyxvQkFBb0IsQ0FBQztBQUFBLElBQ25DLENBQUM7QUFBQSxJQUNELGlCQUFpQjtBQUFBLE1BQ2YsUUFBUTtBQUFBLE1BQ1IsVUFBVTtBQUFBLE1BQ1YsUUFBUTtBQUFBLFFBQ04sTUFBTTtBQUFBLFVBQ0osT0FBTyxRQUFRLE1BQU0sUUFBUSxJQUFJLENBQUMsRUFBRTtBQUFBLFFBQ3RDO0FBQUEsTUFDRjtBQUFBLElBQ0YsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxJQUNOLEtBQUs7QUFBQSxFQUNQO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPLENBQUM7QUFBQSxNQUNOLE1BQU07QUFBQSxNQUNOLGFBQWEsUUFBUSxrQ0FBVyxLQUFLO0FBQUEsSUFDdkMsQ0FBRztBQUFBLEVBQ0w7QUFBQSxFQUNBLEtBQUs7QUFBQSxJQUNILHFCQUFxQjtBQUFBLE1BQ25CLE1BQU07QUFBQSxRQUNKLFNBQVM7QUFBQSxRQUNULGdCQUFnQjtBQUFBLE1BQ2xCO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
|
|
10
yarn.lock
10
yarn.lock
@ -1291,6 +1291,16 @@ terser@^5.10.0:
|
|||||||
commander "^2.20.0"
|
commander "^2.20.0"
|
||||||
source-map-support "~0.5.20"
|
source-map-support "~0.5.20"
|
||||||
|
|
||||||
|
terser@^5.16.1:
|
||||||
|
version "5.16.1"
|
||||||
|
resolved "https://registry.npmmirror.com/terser/-/terser-5.16.1.tgz#5af3bc3d0f24241c7fb2024199d5c461a1075880"
|
||||||
|
integrity sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==
|
||||||
|
dependencies:
|
||||||
|
"@jridgewell/source-map" "^0.3.2"
|
||||||
|
acorn "^8.5.0"
|
||||||
|
commander "^2.20.0"
|
||||||
|
source-map-support "~0.5.20"
|
||||||
|
|
||||||
to-regex-range@^5.0.1:
|
to-regex-range@^5.0.1:
|
||||||
version "5.0.1"
|
version "5.0.1"
|
||||||
resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
|
resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
|
||||||
|
Loading…
Reference in New Issue
Block a user