commit
75c75fff0f
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"tabWidth": 2,
|
||||||
|
"semi": true,
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
75
index.html
75
index.html
@ -1,40 +1,39 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
|
||||||
|
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="%VITE_SITE_LOGO%" />
|
||||||
|
<link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
|
||||||
|
<link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
|
||||||
|
<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="theme-color" content="#424242" />
|
||||||
|
<title>%VITE_SITE_NAME%</title>
|
||||||
|
<!-- HarmonyOS Sans -->
|
||||||
|
<!-- 本站 CDN 已开启防盗链,非本站域名不可访问,请更改链接为下方内容,否则自定义字体将失效 -->
|
||||||
|
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
|
||||||
|
<!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
|
||||||
|
<!-- IE Out -->
|
||||||
|
<script>
|
||||||
|
if (/*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
|
||||||
|
window.location.href =
|
||||||
|
'https://support.dmeng.net/upgrade-your-browser.html?referrer=' +
|
||||||
|
encodeURIComponent(window.location.href);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
<head>
|
<body>
|
||||||
<meta charset="UTF-8" />
|
<!-- 主体内容 -->
|
||||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
<div id="app"></div>
|
||||||
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
|
<!-- noscript -->
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<noscript>
|
||||||
<link rel="icon" href="%VITE_SITE_LOGO%">
|
<div style="text-align: center">请开启 JavaScript</div>
|
||||||
<link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
|
</noscript>
|
||||||
<link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
|
<script type="module" src="/src/main.js"></script>
|
||||||
<link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
|
</body>
|
||||||
<meta name="description" content="%VITE_SITE_DES%" />
|
</html>
|
||||||
<meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
|
|
||||||
<meta name="author" content="%VITE_SITE_ANTHOR%" />
|
|
||||||
<meta name="theme-color" content="#424242" />
|
|
||||||
<title>%VITE_SITE_NAME%</title>
|
|
||||||
<!-- HarmonyOS Sans -->
|
|
||||||
<!-- 本站 CDN 已开启防盗链,非本站域名不可访问,请更改链接为下方内容,否则自定义字体将失效 -->
|
|
||||||
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
|
|
||||||
<!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
|
|
||||||
<!-- IE Out -->
|
|
||||||
<script>
|
|
||||||
if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
|
|
||||||
window.location.href =
|
|
||||||
"https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 主体内容 -->
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- noscript -->
|
|
||||||
<noscript>
|
|
||||||
<div style="text-align: center">请开启 JavaScript</div>
|
|
||||||
</noscript>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
@ -9,7 +9,8 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --host",
|
"dev": "vite --host",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"aplayer": "^1.10.1",
|
"aplayer": "^1.10.1",
|
||||||
@ -33,6 +34,7 @@
|
|||||||
"unplugin-vue-components": "^0.22.8",
|
"unplugin-vue-components": "^0.22.8",
|
||||||
"vite": "^4.4.5",
|
"vite": "^4.4.5",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-pwa": "^0.14.1"
|
"vite-plugin-pwa": "^0.14.1",
|
||||||
|
"prettier": "^3.0.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -46,6 +46,9 @@ devDependencies:
|
|||||||
'@vitejs/plugin-vue':
|
'@vitejs/plugin-vue':
|
||||||
specifier: ^4.2.3
|
specifier: ^4.2.3
|
||||||
version: 4.2.3(vite@4.4.9)(vue@3.3.4)
|
version: 4.2.3(vite@4.4.9)(vue@3.3.4)
|
||||||
|
prettier:
|
||||||
|
specifier: ^3.0.2
|
||||||
|
version: 3.0.2
|
||||||
sass:
|
sass:
|
||||||
specifier: ^1.55.0
|
specifier: ^1.55.0
|
||||||
version: 1.55.0
|
version: 1.55.0
|
||||||
@ -3289,6 +3292,12 @@ packages:
|
|||||||
source-map-js: 1.0.2
|
source-map-js: 1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/prettier@3.0.2:
|
||||||
|
resolution: {integrity: sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==}
|
||||||
|
engines: {node: '>=14'}
|
||||||
|
hasBin: true
|
||||||
|
dev: true
|
||||||
|
|
||||||
/pretty-bytes@5.6.0:
|
/pretty-bytes@5.6.0:
|
||||||
resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
|
resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
69
src/App.vue
69
src/App.vue
@ -12,20 +12,12 @@
|
|||||||
<MainRight v-show="!store.boxOpenState" />
|
<MainRight v-show="!store.boxOpenState" />
|
||||||
<Box v-show="store.boxOpenState" />
|
<Box v-show="store.boxOpenState" />
|
||||||
</section>
|
</section>
|
||||||
<section
|
<section class="more" v-show="store.setOpenState" @click="store.setOpenState = false">
|
||||||
class="more"
|
|
||||||
v-show="store.setOpenState"
|
|
||||||
@click="store.setOpenState = false"
|
|
||||||
>
|
|
||||||
<MoreSet />
|
<MoreSet />
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<!-- 移动端菜单按钮 -->
|
<!-- 移动端菜单按钮 -->
|
||||||
<Icon
|
<Icon class="menu" size="24" @click="store.mobileOpenState = !store.mobileOpenState">
|
||||||
class="menu"
|
|
||||||
size="24"
|
|
||||||
@click="store.mobileOpenState = !store.mobileOpenState"
|
|
||||||
>
|
|
||||||
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
|
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
|
||||||
</Icon>
|
</Icon>
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
@ -36,19 +28,19 @@
|
|||||||
</Transition>
|
</Transition>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { helloInit, checkDays } from "@/utils/getTime.js";
|
import { helloInit, checkDays } from '@/utils/getTime.js';
|
||||||
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
|
import { HamburgerButton, CloseSmall } from '@icon-park/vue-next';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import { Icon } from "@vicons/utils";
|
import { Icon } from '@vicons/utils';
|
||||||
import Loading from "@/components/Loading.vue";
|
import Loading from '@/components/Loading.vue';
|
||||||
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.vue";
|
import Background from '@/components/Background.vue';
|
||||||
import Footer from "@/components/Footer.vue";
|
import Footer from '@/components/Footer.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 config from "@/../package.json";
|
import config from '@/../package.json';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -74,7 +66,7 @@ watch(
|
|||||||
if (value < 990) {
|
if (value < 990) {
|
||||||
store.boxOpenState = false;
|
store.boxOpenState = false;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -84,7 +76,7 @@ onMounted(() => {
|
|||||||
// 屏蔽右键
|
// 屏蔽右键
|
||||||
document.oncontextmenu = () => {
|
document.oncontextmenu = () => {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "为了浏览体验,本站禁用右键",
|
message: '为了浏览体验,本站禁用右键',
|
||||||
grouping: true,
|
grouping: true,
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
});
|
});
|
||||||
@ -92,11 +84,11 @@ onMounted(() => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 鼠标中键事件
|
// 鼠标中键事件
|
||||||
window.addEventListener("mousedown", (event) => {
|
window.addEventListener('mousedown', (event) => {
|
||||||
if (event.button == 1) {
|
if (event.button == 1) {
|
||||||
store.backgroundShow = !store.backgroundShow;
|
store.backgroundShow = !store.backgroundShow;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
|
message: `已${store.backgroundShow ? '开启' : '退出'}壁纸展示状态`,
|
||||||
grouping: true,
|
grouping: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -104,14 +96,13 @@ onMounted(() => {
|
|||||||
|
|
||||||
// 监听当前页面宽度
|
// 监听当前页面宽度
|
||||||
getWidth();
|
getWidth();
|
||||||
window.addEventListener("resize", getWidth);
|
window.addEventListener('resize', getWidth);
|
||||||
|
|
||||||
// 控制台输出
|
// 控制台输出
|
||||||
const styleTitle1 =
|
const styleTitle1 = 'font-size: 20px;font-weight: 600;color: rgb(244,167,89);';
|
||||||
"font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
|
const styleTitle2 = 'font-size:12px;color: rgb(244,167,89);';
|
||||||
const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
|
const styleContent = 'color: rgb(30,152,255);';
|
||||||
const styleContent = "color: rgb(30,152,255);";
|
const title1 = '無名の主页';
|
||||||
const title1 = "無名の主页";
|
|
||||||
const title2 = `
|
const title2 = `
|
||||||
_____ __ __ _______ ____ __
|
_____ __ __ _______ ____ __
|
||||||
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
||||||
@ -120,16 +111,11 @@ onMounted(() => {
|
|||||||
_| |_| | | |____) | | | | |
|
_| |_| | | |____) | | | | |
|
||||||
|_____|_| |_|_____/ |_| |_|`;
|
|_____|_| |_|_____/ |_| |_|`;
|
||||||
const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
|
const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
|
||||||
console.info(
|
console.info(`%c${title1} %c${title2} %c${content}`, styleTitle1, styleTitle2, styleContent);
|
||||||
`%c${title1} %c${title2} %c${content}`,
|
|
||||||
styleTitle1,
|
|
||||||
styleTitle2,
|
|
||||||
styleContent
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener("resize", getWidth);
|
window.removeEventListener('resize', getWidth);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -142,8 +128,7 @@ onBeforeUnmount(() => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||||
forwards;
|
|
||||||
animation-delay: 0.5s;
|
animation-delay: 0.5s;
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// import axios from "axios";
|
// import axios from "axios";
|
||||||
import fetchJsonp from "fetch-jsonp";
|
import fetchJsonp from 'fetch-jsonp';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 音乐播放器
|
* 音乐播放器
|
||||||
@ -8,19 +8,17 @@ import fetchJsonp from "fetch-jsonp";
|
|||||||
// 获取音乐播放列表
|
// 获取音乐播放列表
|
||||||
export const getPlayerList = async (server, type, id) => {
|
export const getPlayerList = async (server, type, id) => {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`
|
`${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`,
|
||||||
);
|
);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
if (data[0].url.startsWith("@")) {
|
if (data[0].url.startsWith('@')) {
|
||||||
const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url
|
const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url.split('@').slice(1);
|
||||||
.split("@")
|
|
||||||
.slice(1);
|
|
||||||
const jsonpData = await fetchJsonp(url).then((res) => res.json());
|
const jsonpData = await fetchJsonp(url).then((res) => res.json());
|
||||||
const domain = (
|
const domain = (
|
||||||
jsonpData.req_0.data.sip.find((i) => !i.startsWith("http://ws")) ||
|
jsonpData.req_0.data.sip.find((i) => !i.startsWith('http://ws')) ||
|
||||||
jsonpData.req_0.data.sip[0]
|
jsonpData.req_0.data.sip[0]
|
||||||
).replace("http://", "https://");
|
).replace('http://', 'https://');
|
||||||
|
|
||||||
return data.map((v, i) => ({
|
return data.map((v, i) => ({
|
||||||
title: v.name || v.title,
|
title: v.name || v.title,
|
||||||
@ -46,7 +44,7 @@ export const getPlayerList = async (server, type, id) => {
|
|||||||
|
|
||||||
// 获取一言数据
|
// 获取一言数据
|
||||||
export const getHitokoto = async () => {
|
export const getHitokoto = async () => {
|
||||||
const res = await fetch("https://v1.hitokoto.cn");
|
const res = await fetch('https://v1.hitokoto.cn');
|
||||||
return await res.json();
|
return await res.json();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -63,7 +61,7 @@ export const getAdcode = async (key) => {
|
|||||||
// 获取高德地理天气信息
|
// 获取高德地理天气信息
|
||||||
export const getWeather = async (key, city) => {
|
export const getWeather = async (key, city) => {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`
|
`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`,
|
||||||
);
|
);
|
||||||
return await res.json();
|
return await res.json();
|
||||||
};
|
};
|
||||||
@ -71,6 +69,6 @@ export const getWeather = async (key, city) => {
|
|||||||
// 获取教书先生天气 API
|
// 获取教书先生天气 API
|
||||||
// https://api.oioweb.cn/doc/weather/GetWeather
|
// https://api.oioweb.cn/doc/weather/GetWeather
|
||||||
export const getOtherWeather = async () => {
|
export const getOtherWeather = async () => {
|
||||||
const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather");
|
const res = await fetch('https://api.oioweb.cn/api/weather/GetWeather');
|
||||||
return await res.json();
|
return await res.json();
|
||||||
};
|
};
|
||||||
|
@ -1,31 +1,38 @@
|
|||||||
[{
|
[
|
||||||
|
{
|
||||||
"name": "Github",
|
"name": "Github",
|
||||||
"icon": "/images/icon/github.png",
|
"icon": "/images/icon/github.png",
|
||||||
"tip": "去 Github 看看",
|
"tip": "去 Github 看看",
|
||||||
"url": "https://github.com/imsyy"
|
"url": "https://github.com/imsyy"
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
"name": "BiliBili",
|
"name": "BiliBili",
|
||||||
"icon": "/images/icon/bilibili.png",
|
"icon": "/images/icon/bilibili.png",
|
||||||
"tip": "(゜-゜)つロ 干杯 ~",
|
"tip": "(゜-゜)つロ 干杯 ~",
|
||||||
"url": "https://space.bilibili.com/98544142"
|
"url": "https://space.bilibili.com/98544142"
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
"name": "QQ",
|
"name": "QQ",
|
||||||
"icon": "/images/icon/qq.png",
|
"icon": "/images/icon/qq.png",
|
||||||
"tip": "有什么事吗",
|
"tip": "有什么事吗",
|
||||||
"url": "https://res.abeim.cn/api/qq/?qq=1539250352"
|
"url": "https://res.abeim.cn/api/qq/?qq=1539250352"
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
"name": "Email",
|
"name": "Email",
|
||||||
"icon": "/images/icon/email.png",
|
"icon": "/images/icon/email.png",
|
||||||
"tip": "来封 Email ~",
|
"tip": "来封 Email ~",
|
||||||
"url": "mailto:one@imsyy.top"
|
"url": "mailto:one@imsyy.top"
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
"name": "Twitter",
|
"name": "Twitter",
|
||||||
"icon": "/images/icon/twitter.png",
|
"icon": "/images/icon/twitter.png",
|
||||||
"tip": "你懂的 ~",
|
"tip": "你懂的 ~",
|
||||||
"url": "https://twitter.com/iimmsyy"
|
"url": "https://twitter.com/iimmsyy"
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
"name": "Telegram",
|
"name": "Telegram",
|
||||||
"icon": "/images/icon/telegram.png",
|
"icon": "/images/icon/telegram.png",
|
||||||
"tip": "你懂的 ~",
|
"tip": "你懂的 ~",
|
||||||
"url": "https://t.me/bottom_user"
|
"url": "https://t.me/bottom_user"
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
|
@ -24,13 +24,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import { Error } from "@icon-park/vue-next";
|
import { Error } from '@icon-park/vue-next';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
const bgUrl = ref(null);
|
const bgUrl = ref(null);
|
||||||
const imgTimeout = ref(null);
|
const imgTimeout = ref(null);
|
||||||
const emit = defineEmits(["loadComplete"]);
|
const emit = defineEmits(['loadComplete']);
|
||||||
|
|
||||||
// 壁纸随机数
|
// 壁纸随机数
|
||||||
// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
|
// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
|
||||||
@ -41,36 +41,39 @@ const changeBg = (type) => {
|
|||||||
if (type == 0) {
|
if (type == 0) {
|
||||||
bgUrl.value = `/images/background${bgRandom}.jpg`;
|
bgUrl.value = `/images/background${bgRandom}.jpg`;
|
||||||
} else if (type == 1) {
|
} else if (type == 1) {
|
||||||
bgUrl.value = "https://api.dujin.org/bing/1920.php";
|
bgUrl.value = 'https://api.dujin.org/bing/1920.php';
|
||||||
} else if (type == 2) {
|
} else if (type == 2) {
|
||||||
bgUrl.value = "https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images";
|
bgUrl.value = 'https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images';
|
||||||
} else if (type == 3) {
|
} else if (type == 3) {
|
||||||
bgUrl.value = "https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images";
|
bgUrl.value = 'https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 图片加载完成
|
// 图片加载完成
|
||||||
const imgLoadComplete = () => {
|
const imgLoadComplete = () => {
|
||||||
imgTimeout.value = setTimeout(() => {
|
imgTimeout.value = setTimeout(
|
||||||
store.setImgLoadStatus(true);
|
() => {
|
||||||
}, Math.floor(Math.random() * (600 - 300 + 1)) + 300);
|
store.setImgLoadStatus(true);
|
||||||
|
},
|
||||||
|
Math.floor(Math.random() * (600 - 300 + 1)) + 300,
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 图片动画完成
|
// 图片动画完成
|
||||||
const imgAnimationEnd = () => {
|
const imgAnimationEnd = () => {
|
||||||
console.log("壁纸加载且动画完成");
|
console.log('壁纸加载且动画完成');
|
||||||
// 加载完成事件
|
// 加载完成事件
|
||||||
emit("loadComplete");
|
emit('loadComplete');
|
||||||
};
|
};
|
||||||
|
|
||||||
// 图片显示失败
|
// 图片显示失败
|
||||||
const imgLoadError = () => {
|
const imgLoadError = () => {
|
||||||
console.error("壁纸加载失败:", bgUrl.value);
|
console.error('壁纸加载失败:', bgUrl.value);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "壁纸加载失败,已临时切换回默认",
|
message: '壁纸加载失败,已临时切换回默认',
|
||||||
icon: h(Error, {
|
icon: h(Error, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
bgUrl.value = `/images/background${bgRandom}.jpg`;
|
bgUrl.value = `/images/background${bgRandom}.jpg`;
|
||||||
@ -105,7 +108,9 @@ onBeforeUnmount(() => {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
filter: blur(20px) brightness(0.3);
|
filter: blur(20px) brightness(0.3);
|
||||||
transition: filter 0.3s, transform 0.3s;
|
transition:
|
||||||
|
filter 0.3s,
|
||||||
|
transform 0.3s;
|
||||||
animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||||
animation-delay: 0.45s;
|
animation-delay: 0.45s;
|
||||||
}
|
}
|
||||||
@ -116,10 +121,7 @@ onBeforeUnmount(() => {
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: radial-gradient(
|
background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
|
||||||
rgba(0, 0, 0, 0) 0,
|
|
||||||
rgba(0, 0, 0, 0.5) 100%
|
|
||||||
),
|
|
||||||
radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
|
radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
|
||||||
|
|
||||||
transition: 1.5s;
|
transition: 1.5s;
|
||||||
|
@ -38,9 +38,9 @@
|
|||||||
</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";
|
import config from '@/../package.json';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
const fullYear = new Date().getFullYear();
|
const fullYear = new Date().getFullYear();
|
||||||
|
@ -26,10 +26,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { MusicMenu, Error } from "@icon-park/vue-next";
|
import { MusicMenu, Error } from '@icon-park/vue-next';
|
||||||
import { getHitokoto } from "@/api";
|
import { getHitokoto } from '@/api';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import debounce from "@/utils/debounce.js";
|
import debounce from '@/utils/debounce.js';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -38,8 +38,8 @@ const openMusicShow = ref(false);
|
|||||||
|
|
||||||
// 一言数据
|
// 一言数据
|
||||||
const hitokotoData = reactive({
|
const hitokotoData = reactive({
|
||||||
text: "这里应该显示一句话",
|
text: '这里应该显示一句话',
|
||||||
from: "無名",
|
from: '無名',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 获取一言数据
|
// 获取一言数据
|
||||||
@ -51,10 +51,10 @@ const getHitokotoData = () => {
|
|||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "一言获取失败",
|
message: '一言获取失败',
|
||||||
icon: h(Error, {
|
icon: h(Error, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -62,8 +62,8 @@ const getHitokotoData = () => {
|
|||||||
|
|
||||||
// 更新一言数据
|
// 更新一言数据
|
||||||
const updateHitokoto = () => {
|
const updateHitokoto = () => {
|
||||||
hitokotoData.text = "新的一言正在赶来的路上";
|
hitokotoData.text = '新的一言正在赶来的路上';
|
||||||
hitokotoData.from = "来源加载中";
|
hitokotoData.from = '来源加载中';
|
||||||
// 防抖
|
// 防抖
|
||||||
debounce(() => {
|
debounce(() => {
|
||||||
getHitokotoData();
|
getHitokotoData();
|
||||||
@ -124,4 +124,4 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -41,24 +41,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Icon } from "@vicons/utils";
|
import { Icon } from '@vicons/utils';
|
||||||
// 可前往 https://www.xicons.org 自行挑选并在此处引入
|
// 可前往 https://www.xicons.org 自行挑选并在此处引入
|
||||||
import {
|
import { Link, Blog, CompactDisc, Cloud, Compass, Book, Fire, LaptopCode } from '@vicons/fa'; // 注意使用正确的类别
|
||||||
Link,
|
import { mainStore } from '@/store';
|
||||||
Blog,
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
CompactDisc,
|
import { Pagination, Mousewheel } from 'swiper';
|
||||||
Cloud,
|
import siteLinks from '@/assets/siteLinks.json';
|
||||||
Compass,
|
import 'swiper/scss';
|
||||||
Book,
|
import 'swiper/scss/pagination';
|
||||||
Fire,
|
|
||||||
LaptopCode,
|
|
||||||
} from "@vicons/fa"; // 注意使用正确的类别
|
|
||||||
import { mainStore } from "@/store";
|
|
||||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
||||||
import { Pagination, Mousewheel } from "swiper";
|
|
||||||
import siteLinks from "@/assets/siteLinks.json";
|
|
||||||
import "swiper/scss";
|
|
||||||
import "swiper/scss/pagination";
|
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -85,10 +76,10 @@ const siteIcon = {
|
|||||||
|
|
||||||
// 链接跳转
|
// 链接跳转
|
||||||
const jumpLink = (data) => {
|
const jumpLink = (data) => {
|
||||||
if (data.name === "音乐" && store.musicClick) {
|
if (data.name === '音乐' && store.musicClick) {
|
||||||
if (typeof $openList === "function") $openList();
|
if (typeof $openList === 'function') $openList();
|
||||||
} else {
|
} else {
|
||||||
window.open(data.link, "_blank");
|
window.open(data.link, '_blank');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -52,7 +52,7 @@ const siteName = import.meta.env.VITE_SITE_NAME;
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
@ -65,7 +65,7 @@ const siteName = import.meta.env.VITE_SITE_NAME;
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
@ -109,7 +109,9 @@ const siteName = import.meta.env.VITE_SITE_NAME;
|
|||||||
&.loaded {
|
&.loaded {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
transition: transform 0.3s 1s ease-out, visibility 0.3s 1s ease-out;
|
transition:
|
||||||
|
transform 0.3s 1s ease-out,
|
||||||
|
visibility 0.3s 1s ease-out;
|
||||||
.loader {
|
.loader {
|
||||||
.loader-circle,
|
.loader-circle,
|
||||||
.loader-text {
|
.loader-text {
|
||||||
|
@ -28,16 +28,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Icon } from "@vicons/utils";
|
import { Icon } from '@vicons/utils';
|
||||||
import { QuoteLeft, QuoteRight } from "@vicons/fa";
|
import { QuoteLeft, QuoteRight } from '@vicons/fa';
|
||||||
import { Error } from "@icon-park/vue-next";
|
import { Error } from '@icon-park/vue-next';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
// 主页站点logo
|
// 主页站点logo
|
||||||
const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO;
|
const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO;
|
||||||
// 站点链接
|
// 站点链接
|
||||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
|
||||||
|
|
||||||
// 简介区域文字
|
// 简介区域文字
|
||||||
const descriptionText = reactive({
|
const descriptionText = reactive({
|
||||||
@ -51,11 +51,11 @@ const changeBox = () => {
|
|||||||
store.boxOpenState = !store.boxOpenState;
|
store.boxOpenState = !store.boxOpenState;
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "当前页面宽度不足以开启盒子",
|
message: '当前页面宽度不足以开启盒子',
|
||||||
grouping: true,
|
grouping: true,
|
||||||
icon: h(Error, {
|
icon: h(Error, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -72,7 +72,7 @@ watch(
|
|||||||
descriptionText.hello = import.meta.env.VITE_DESC_HELLO;
|
descriptionText.hello = import.meta.env.VITE_DESC_HELLO;
|
||||||
descriptionText.text = import.meta.env.VITE_DESC_TEXT;
|
descriptionText.text = import.meta.env.VITE_DESC_TEXT;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ watch(
|
|||||||
height: 142px;
|
height: 142px;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
transform: translateY(-8px);
|
transform: translateY(-8px);
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
@ -136,7 +136,7 @@ watch(
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -174,4 +174,4 @@ watch(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -11,49 +11,24 @@
|
|||||||
<span @click="store.musicOpenState = false">回到一言</span>
|
<span @click="store.musicOpenState = false">回到一言</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<go-start
|
<go-start theme="filled" size="30" fill="#efefef" @click="changeMusicIndex(0)" />
|
||||||
theme="filled"
|
|
||||||
size="30"
|
|
||||||
fill="#efefef"
|
|
||||||
@click="changeMusicIndex(0)"
|
|
||||||
/>
|
|
||||||
<div class="state" @click="changePlayState">
|
<div class="state" @click="changePlayState">
|
||||||
<play-one
|
<play-one theme="filled" size="50" fill="#efefef" v-show="!store.playerState" />
|
||||||
theme="filled"
|
<pause theme="filled" size="50" fill="#efefef" v-show="store.playerState" />
|
||||||
size="50"
|
|
||||||
fill="#efefef"
|
|
||||||
v-show="!store.playerState"
|
|
||||||
/>
|
|
||||||
<pause
|
|
||||||
theme="filled"
|
|
||||||
size="50"
|
|
||||||
fill="#efefef"
|
|
||||||
v-show="store.playerState"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<go-end
|
<go-end theme="filled" size="30" fill="#efefef" @click="changeMusicIndex(1)" />
|
||||||
theme="filled"
|
|
||||||
size="30"
|
|
||||||
fill="#efefef"
|
|
||||||
@click="changeMusicIndex(1)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<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">
|
<div class="volume" v-show="volumeShow">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<volume-mute
|
<volume-mute theme="filled" size="24" fill="#efefef" v-if="volumeNum == 0" />
|
||||||
theme="filled"
|
|
||||||
size="24"
|
|
||||||
fill="#efefef"
|
|
||||||
v-if="volumeNum == 0"
|
|
||||||
/>
|
|
||||||
<volume-small
|
<volume-small
|
||||||
theme="filled"
|
theme="filled"
|
||||||
size="24"
|
size="24"
|
||||||
@ -62,23 +37,13 @@
|
|||||||
/>
|
/>
|
||||||
<volume-notice theme="filled" size="24" fill="#efefef" v-else />
|
<volume-notice theme="filled" size="24" fill="#efefef" v-else />
|
||||||
</div>
|
</div>
|
||||||
<el-slider
|
<el-slider v-model="volumeNum" :show-tooltip="false" :min="0" :max="1" :step="0.01" />
|
||||||
v-model="volumeNum"
|
|
||||||
:show-tooltip="false"
|
|
||||||
:min="0"
|
|
||||||
:max="1"
|
|
||||||
:step="0.01"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 音乐列表弹窗 -->
|
<!-- 音乐列表弹窗 -->
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<div
|
<div class="music-list" v-show="musicListShow" @click="musicListShow = false">
|
||||||
class="music-list"
|
|
||||||
v-show="musicListShow"
|
|
||||||
@click="musicListShow = false"
|
|
||||||
>
|
|
||||||
<Transition name="zoom">
|
<Transition name="zoom">
|
||||||
<div class="list" v-show="musicListShow" @click.stop>
|
<div class="list" v-show="musicListShow" @click.stop>
|
||||||
<close-one
|
<close-one
|
||||||
@ -112,9 +77,9 @@ import {
|
|||||||
VolumeMute,
|
VolumeMute,
|
||||||
VolumeSmall,
|
VolumeSmall,
|
||||||
VolumeNotice,
|
VolumeNotice,
|
||||||
} from "@icon-park/vue-next";
|
} from '@icon-park/vue-next';
|
||||||
import Player from "@/components/Player.vue";
|
import Player from '@/components/Player.vue';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
// 音量条数据
|
// 音量条数据
|
||||||
@ -147,8 +112,8 @@ const changeMusicIndex = (type) => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 空格键事件
|
// 空格键事件
|
||||||
window.addEventListener("keydown", (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.code == "Space") {
|
if (e.code == 'Space') {
|
||||||
changePlayState();
|
changePlayState();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -162,7 +127,7 @@ watch(
|
|||||||
(value) => {
|
(value) => {
|
||||||
store.musicVolume = value;
|
store.musicVolume = value;
|
||||||
playerRef.value.changeVolume(store.musicVolume);
|
playerRef.value.changeVolume(store.musicVolume);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,10 +20,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
|
import { MusicOne, PlayWrong } from '@icon-park/vue-next';
|
||||||
import { getPlayerList } from "@/api";
|
import { getPlayerList } from '@/api';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import aplayer from "vue3-aplayer";
|
import aplayer from 'vue3-aplayer';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -47,12 +47,12 @@ const props = defineProps({
|
|||||||
// 主题色
|
// 主题色
|
||||||
theme: {
|
theme: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "#efefef",
|
default: '#efefef',
|
||||||
},
|
},
|
||||||
// 音频循环播放
|
// 音频循环播放
|
||||||
repeat: {
|
repeat: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "list", //'list' | 'music' | 'none'
|
default: 'list', //'list' | 'music' | 'none'
|
||||||
},
|
},
|
||||||
// 随机播放
|
// 随机播放
|
||||||
shuffle: {
|
shuffle: {
|
||||||
@ -70,17 +70,17 @@ const props = defineProps({
|
|||||||
// 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
|
// 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
|
||||||
songServer: {
|
songServer: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "netease", //'netease' | 'tencent'
|
default: 'netease', //'netease' | 'tencent'
|
||||||
},
|
},
|
||||||
// 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
// 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
||||||
songType: {
|
songType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "playlist",
|
default: 'playlist',
|
||||||
},
|
},
|
||||||
// id
|
// id
|
||||||
songId: {
|
songId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "7452421335",
|
default: '7452421335',
|
||||||
},
|
},
|
||||||
// 列表是否默认折叠
|
// 列表是否默认折叠
|
||||||
listFolded: {
|
listFolded: {
|
||||||
@ -90,7 +90,7 @@ const props = defineProps({
|
|||||||
// 列表最大高度
|
// 列表最大高度
|
||||||
listMaxHeight: {
|
listMaxHeight: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "420px",
|
default: '420px',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -98,42 +98,40 @@ const props = defineProps({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
try {
|
try {
|
||||||
getPlayerList(props.songServer, props.songType, props.songId).then(
|
getPlayerList(props.songServer, props.songType, props.songId).then((res) => {
|
||||||
(res) => {
|
console.log(res);
|
||||||
console.log(res);
|
// 生成歌单信息
|
||||||
// 生成歌单信息
|
playIndex.value = Math.floor(Math.random() * res.length);
|
||||||
playIndex.value = Math.floor(Math.random() * res.length);
|
playListCount.value = res.length;
|
||||||
playListCount.value = res.length;
|
// 更改播放器加载状态
|
||||||
// 更改播放器加载状态
|
store.musicIsOk = true;
|
||||||
store.musicIsOk = true;
|
// 生成歌单
|
||||||
// 生成歌单
|
res.forEach((v) => {
|
||||||
res.forEach((v) => {
|
playList.value.push({
|
||||||
playList.value.push({
|
title: v.name || v.title,
|
||||||
title: v.name || v.title,
|
artist: v.artist || v.author,
|
||||||
artist: v.artist || v.author,
|
src: v.url || v.src,
|
||||||
src: v.url || v.src,
|
pic: v.pic,
|
||||||
pic: v.pic,
|
lrc: v.lrc,
|
||||||
lrc: v.lrc,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
console.log(
|
});
|
||||||
"音乐加载完成",
|
console.log(
|
||||||
playList.value,
|
'音乐加载完成',
|
||||||
playIndex.value,
|
playList.value,
|
||||||
playListCount.value,
|
playIndex.value,
|
||||||
props.volume
|
playListCount.value,
|
||||||
);
|
props.volume,
|
||||||
}
|
);
|
||||||
);
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
store.musicIsOk = false;
|
store.musicIsOk = false;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "播放器加载失败",
|
message: '播放器加载失败',
|
||||||
grouping: true,
|
grouping: true,
|
||||||
icon: h(PlayWrong, {
|
icon: h(PlayWrong, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -142,20 +140,17 @@ onMounted(() => {
|
|||||||
|
|
||||||
// 播放
|
// 播放
|
||||||
const onPlay = () => {
|
const onPlay = () => {
|
||||||
console.log("播放");
|
console.log('播放');
|
||||||
// 播放状态
|
// 播放状态
|
||||||
store.setPlayerState(player.value.audio.paused);
|
store.setPlayerState(player.value.audio.paused);
|
||||||
// 储存播放器信息
|
// 储存播放器信息
|
||||||
store.setPlayerData(
|
store.setPlayerData(player.value.currentMusic.title, player.value.currentMusic.artist);
|
||||||
player.value.currentMusic.title,
|
|
||||||
player.value.currentMusic.artist
|
|
||||||
);
|
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: store.getPlayerData.name + " - " + store.getPlayerData.artist,
|
message: store.getPlayerData.name + ' - ' + store.getPlayerData.artist,
|
||||||
grouping: true,
|
grouping: true,
|
||||||
icon: h(MusicOne, {
|
icon: h(MusicOne, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -169,12 +164,10 @@ const onPause = () => {
|
|||||||
const onTimeUp = () => {
|
const onTimeUp = () => {
|
||||||
let playerRef = player.value.$.vnode.el;
|
let playerRef = player.value.$.vnode.el;
|
||||||
if (playerRef) {
|
if (playerRef) {
|
||||||
const currentLrcElement = playerRef.querySelector(".aplayer-lrc-current");
|
const currentLrcElement = playerRef.querySelector('.aplayer-lrc-current');
|
||||||
const previousLrcElement = currentLrcElement?.previousElementSibling;
|
const previousLrcElement = currentLrcElement?.previousElementSibling;
|
||||||
const lrcContent =
|
const lrcContent =
|
||||||
currentLrcElement?.innerHTML ||
|
currentLrcElement?.innerHTML || previousLrcElement?.innerHTML || '这句没有歌词';
|
||||||
previousLrcElement?.innerHTML ||
|
|
||||||
"这句没有歌词";
|
|
||||||
store.setPlayerLrc(lrcContent);
|
store.setPlayerLrc(lrcContent);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -218,7 +211,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-family: "HarmonyOS_Regular", sans-serif !important;
|
font-family: 'HarmonyOS_Regular', sans-serif !important;
|
||||||
:deep(.aplayer-body) {
|
:deep(.aplayer-body) {
|
||||||
.aplayer-pic {
|
.aplayer-pic {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -3,11 +3,7 @@
|
|||||||
<el-collapse class="collapse" v-model="activeName" accordion>
|
<el-collapse class="collapse" v-model="activeName" accordion>
|
||||||
<el-collapse-item title="个性壁纸" name="1">
|
<el-collapse-item title="个性壁纸" name="1">
|
||||||
<div class="bg-set">
|
<div class="bg-set">
|
||||||
<el-radio-group
|
<el-radio-group v-model="coverType" text-color="#ffffff" @change="radioChange">
|
||||||
v-model="coverType"
|
|
||||||
text-color="#ffffff"
|
|
||||||
@change="radioChange"
|
|
||||||
>
|
|
||||||
<el-radio label="0" size="large" border>默认壁纸</el-radio>
|
<el-radio label="0" size="large" border>默认壁纸</el-radio>
|
||||||
<el-radio label="1" size="large" border>每日一图</el-radio>
|
<el-radio label="1" size="large" border>每日一图</el-radio>
|
||||||
<el-radio label="2" size="large" border>随机风景</el-radio>
|
<el-radio label="2" size="large" border>随机风景</el-radio>
|
||||||
@ -64,24 +60,23 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { CheckSmall, CloseSmall, SuccessPicture } from "@icon-park/vue-next";
|
import { CheckSmall, CloseSmall, SuccessPicture } from '@icon-park/vue-next';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } =
|
const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } = storeToRefs(store);
|
||||||
storeToRefs(store);
|
|
||||||
|
|
||||||
// 默认选中项
|
// 默认选中项
|
||||||
const activeName = ref("1");
|
const activeName = ref('1');
|
||||||
|
|
||||||
// 壁纸切换
|
// 壁纸切换
|
||||||
const radioChange = () => {
|
const radioChange = () => {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "壁纸设置成功,刷新后生效",
|
message: '壁纸设置成功,刷新后生效',
|
||||||
icon: h(SuccessPicture, {
|
icon: h(SuccessPicture, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -18,10 +18,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import socialLinks from "@/assets/socialLinks.json";
|
import socialLinks from '@/assets/socialLinks.json';
|
||||||
|
|
||||||
// 社交链接提示
|
// 社交链接提示
|
||||||
const socialTip = ref("通过这里联系我吧");
|
const socialTip = ref('通过这里联系我吧');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -37,7 +37,9 @@ const socialTip = ref("通过这里联系我吧");
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
backdrop-filter: blur(0);
|
backdrop-filter: blur(0);
|
||||||
animation: fade 0.5s;
|
animation: fade 0.5s;
|
||||||
transition: background-color 0.3s, backdrop-filter 0.3s;
|
transition:
|
||||||
|
background-color 0.3s,
|
||||||
|
backdrop-filter 0.3s;
|
||||||
@media (max-width: 840px) {
|
@media (max-width: 840px) {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -1,45 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="time-capsule">
|
<div class="time-capsule">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<hourglass-full
|
<hourglass-full theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
|
||||||
theme="two-tone"
|
|
||||||
size="24"
|
|
||||||
:fill="['#efefef', '#00000020']"
|
|
||||||
/>
|
|
||||||
<span>时光胶囊</span>
|
<span>时光胶囊</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text"
|
<span class="text">今日已经度过了 {{ timeData.day.elapsed }} 小时</span>
|
||||||
>今日已经度过了 {{ timeData.day.elapsed }} 小时</span
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.day.pass" />
|
||||||
>
|
<span class="text">本周已经度过了 {{ timeData.week.elapsed }} 天</span>
|
||||||
<el-progress
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.week.pass" />
|
||||||
:text-inside="true"
|
<span class="text">本月已经度过了 {{ timeData.month.elapsed }} 天</span>
|
||||||
:stroke-width="20"
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.month.pass" />
|
||||||
:percentage="timeData.day.pass"
|
<span class="text">今年已经度过了 {{ timeData.year.elapsed }} 个月</span>
|
||||||
/>
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.year.pass" />
|
||||||
<span class="text"
|
|
||||||
>本周已经度过了 {{ timeData.week.elapsed }} 天</span
|
|
||||||
>
|
|
||||||
<el-progress
|
|
||||||
:text-inside="true"
|
|
||||||
:stroke-width="20"
|
|
||||||
:percentage="timeData.week.pass"
|
|
||||||
/>
|
|
||||||
<span class="text"
|
|
||||||
>本月已经度过了 {{ timeData.month.elapsed }} 天</span
|
|
||||||
>
|
|
||||||
<el-progress
|
|
||||||
:text-inside="true"
|
|
||||||
:stroke-width="20"
|
|
||||||
:percentage="timeData.month.pass"
|
|
||||||
/>
|
|
||||||
<span class="text"
|
|
||||||
>今年已经度过了 {{ timeData.year.elapsed }} 个月</span
|
|
||||||
>
|
|
||||||
<el-progress
|
|
||||||
:text-inside="true"
|
|
||||||
:stroke-width="20"
|
|
||||||
:percentage="timeData.year.pass"
|
|
||||||
/>
|
|
||||||
<div v-if="startDate?.length >= 4 && store.siteStartShow">
|
<div v-if="startDate?.length >= 4 && store.siteStartShow">
|
||||||
<span class="text" v-html="startDateText" />
|
<span class="text" v-html="startDateText" />
|
||||||
<!-- <el-progress
|
<!-- <el-progress
|
||||||
@ -54,9 +26,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { HourglassFull } from "@icon-park/vue-next";
|
import { HourglassFull } from '@icon-park/vue-next';
|
||||||
import { getTimeCapsule, siteDateStatistics } from "@/utils/getTime.js";
|
import { getTimeCapsule, siteDateStatistics } from '@/utils/getTime.js';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
// 进度条数据
|
// 进度条数据
|
||||||
@ -68,8 +40,7 @@ const timeInterval = ref(null);
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
timeInterval.value = setInterval(() => {
|
timeInterval.value = setInterval(() => {
|
||||||
timeData.value = getTimeCapsule();
|
timeData.value = getTimeCapsule();
|
||||||
if (startDate.value)
|
if (startDate.value) startDateText.value = siteDateStatistics(new Date(startDate.value));
|
||||||
startDateText.value = siteDateStatistics(new Date(startDate.value));
|
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -5,9 +5,9 @@
|
|||||||
<span>{{ weatherData.weather.temperature }}℃</span>
|
<span>{{ weatherData.weather.temperature }}℃</span>
|
||||||
<span class="sm-hidden">
|
<span class="sm-hidden">
|
||||||
{{
|
{{
|
||||||
weatherData.weather.winddirection?.endsWith("风")
|
weatherData.weather.winddirection?.endsWith('风')
|
||||||
? weatherData.weather.winddirection
|
? weatherData.weather.winddirection
|
||||||
: weatherData.weather.winddirection + "风"
|
: weatherData.weather.winddirection + '风'
|
||||||
}}
|
}}
|
||||||
</span>
|
</span>
|
||||||
<span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
|
<span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
|
||||||
@ -18,8 +18,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getAdcode, getWeather, getOtherWeather } from "@/api";
|
import { getAdcode, getWeather, getOtherWeather } from '@/api';
|
||||||
import { Error } from "@icon-park/vue-next";
|
import { Error } from '@icon-park/vue-next';
|
||||||
|
|
||||||
// 高德开发者 Key
|
// 高德开发者 Key
|
||||||
const mainKey = import.meta.env.VITE_WEATHER_KEY;
|
const mainKey = import.meta.env.VITE_WEATHER_KEY;
|
||||||
@ -58,8 +58,8 @@ const getWeatherData = () => {
|
|||||||
};
|
};
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error("天气信息获取失败:" + err);
|
console.error('天气信息获取失败:' + err);
|
||||||
onError("天气信息获取失败");
|
onError('天气信息获取失败');
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
getAdcode(mainKey)
|
getAdcode(mainKey)
|
||||||
@ -79,13 +79,13 @@ const getWeatherData = () => {
|
|||||||
};
|
};
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error("天气信息获取失败:" + err);
|
console.error('天气信息获取失败:' + err);
|
||||||
onError("天气信息获取失败");
|
onError('天气信息获取失败');
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error("地理位置获取失败:" + err);
|
console.error('地理位置获取失败:' + err);
|
||||||
onError("地理位置获取失败");
|
onError('地理位置获取失败');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -95,8 +95,8 @@ const onError = (message) => {
|
|||||||
ElMessage({
|
ElMessage({
|
||||||
message,
|
message,
|
||||||
icon: h(Error, {
|
icon: h(Error, {
|
||||||
theme: "filled",
|
theme: 'filled',
|
||||||
fill: "#efefef",
|
fill: '#efefef',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
console.error(message);
|
console.error(message);
|
||||||
|
18
src/main.js
18
src/main.js
@ -1,12 +1,8 @@
|
|||||||
import {
|
import { createApp } from 'vue';
|
||||||
createApp
|
|
||||||
} from 'vue';
|
|
||||||
import '@/style/style.scss';
|
import '@/style/style.scss';
|
||||||
import App from '@/App.vue';
|
import App from '@/App.vue';
|
||||||
// 引入 pinia
|
// 引入 pinia
|
||||||
import {
|
import { createPinia } from 'pinia';
|
||||||
createPinia
|
|
||||||
} from 'pinia';
|
|
||||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
@ -14,11 +10,11 @@ const pinia = createPinia();
|
|||||||
pinia.use(piniaPluginPersistedstate);
|
pinia.use(piniaPluginPersistedstate);
|
||||||
|
|
||||||
app.use(pinia);
|
app.use(pinia);
|
||||||
app.mount('#app')
|
app.mount('#app');
|
||||||
|
|
||||||
// PWA
|
// PWA
|
||||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||||
// 弹出更新提醒
|
// 弹出更新提醒
|
||||||
console.log("站点已更新,刷新后生效");
|
console.log('站点已更新,刷新后生效');
|
||||||
ElMessage("站点已更新,刷新后生效");
|
ElMessage('站点已更新,刷新后生效');
|
||||||
})
|
});
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
export const mainStore = defineStore("main", {
|
export const mainStore = defineStore('main', {
|
||||||
state: () => {
|
state: () => {
|
||||||
return {
|
return {
|
||||||
imgLoadStatus: false, // 壁纸加载状态
|
imgLoadStatus: false, // 壁纸加载状态
|
||||||
innerWidth: null, // 当前窗口宽度
|
innerWidth: null, // 当前窗口宽度
|
||||||
coverType: "0", // 壁纸种类
|
coverType: '0', // 壁纸种类
|
||||||
siteStartShow: false, // 建站日期显示
|
siteStartShow: false, // 建站日期显示
|
||||||
musicClick: false, // 音乐链接是否跳转
|
musicClick: false, // 音乐链接是否跳转
|
||||||
musicIsOk: false, // 音乐是否加载完成
|
musicIsOk: false, // 音乐是否加载完成
|
||||||
@ -19,7 +19,7 @@ export const mainStore = defineStore("main", {
|
|||||||
playerState: false, // 当前播放状态
|
playerState: false, // 当前播放状态
|
||||||
playerTitle: null, // 当前播放歌曲名
|
playerTitle: null, // 当前播放歌曲名
|
||||||
playerArtist: null, // 当前播放歌手名
|
playerArtist: null, // 当前播放歌手名
|
||||||
playerLrc: "歌词加载中", // 当前播放歌词
|
playerLrc: '歌词加载中', // 当前播放歌词
|
||||||
playerLrcShow: true, // 是否显示底栏歌词
|
playerLrcShow: true, // 是否显示底栏歌词
|
||||||
footerBlur: true, // 底栏模糊
|
footerBlur: true, // 底栏模糊
|
||||||
};
|
};
|
||||||
@ -73,15 +73,15 @@ export const mainStore = defineStore("main", {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
persist: {
|
persist: {
|
||||||
key: "data",
|
key: 'data',
|
||||||
storage: window.localStorage,
|
storage: window.localStorage,
|
||||||
paths: [
|
paths: [
|
||||||
"coverType",
|
'coverType',
|
||||||
"musicVolume",
|
'musicVolume',
|
||||||
"siteStartShow",
|
'siteStartShow',
|
||||||
"musicClick",
|
'musicClick',
|
||||||
"playerLrcShow",
|
'playerLrcShow',
|
||||||
"footerBlur",
|
'footerBlur',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
// scss 全局变量
|
// scss 全局变量
|
||||||
|
|
||||||
// 响应式布局
|
// 响应式布局
|
||||||
@mixin changeWidth($maxWidth:1200px) {
|
@mixin changeWidth($maxWidth: 1200px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: $maxWidth;
|
max-width: $maxWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 首次调用
|
// 首次调用
|
||||||
@ -12,26 +12,25 @@
|
|||||||
|
|
||||||
/* 小于1380px时 */
|
/* 小于1380px时 */
|
||||||
@media (max-width: 1380px) {
|
@media (max-width: 1380px) {
|
||||||
.el-radio-group {
|
.el-radio-group {
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小于1280px时 */
|
/* 小于1280px时 */
|
||||||
@media (max-width: 1280px) {
|
@media (max-width: 1280px) {
|
||||||
@include changeWidth($maxWidth:1100px);
|
@include changeWidth($maxWidth: 1100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小于992px时 */
|
/* 小于992px时 */
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
@include changeWidth($maxWidth:900px);
|
@include changeWidth($maxWidth: 900px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小于720px时 */
|
/* 小于720px时 */
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
|
// 隐藏元素
|
||||||
// 隐藏元素
|
.xs-hidden {
|
||||||
.xs-hidden {
|
display: none;
|
||||||
display: none;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@ -17,7 +17,7 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: "HarmonyOS_Regular", sans-serif;
|
font-family: 'HarmonyOS_Regular', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@ -37,13 +37,13 @@ p {
|
|||||||
|
|
||||||
// 字体文件
|
// 字体文件
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
src: url("/font/Pacifico-Regular.ttf") format("truetype");
|
src: url('/font/Pacifico-Regular.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "UnidreamLED";
|
font-family: 'UnidreamLED';
|
||||||
src: url("/font/UnidreamLED.ttf") format("truetype");
|
src: url('/font/UnidreamLED.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 基础样式
|
// 基础样式
|
||||||
@ -62,7 +62,9 @@ p {
|
|||||||
background-color: #00000040;
|
background-color: #00000040;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transition: backdrop-filter 0.3s, transform 0.3s;
|
transition:
|
||||||
|
backdrop-filter 0.3s,
|
||||||
|
transform 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.01);
|
transform: scale(1.01);
|
||||||
}
|
}
|
||||||
@ -104,7 +106,7 @@ p {
|
|||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "UnidreamLED";
|
font-family: 'UnidreamLED';
|
||||||
span {
|
span {
|
||||||
color: #564d59;
|
color: #564d59;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
@ -3,92 +3,89 @@ var CURSOR;
|
|||||||
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
|
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
|
||||||
|
|
||||||
const getStyle = (el, attr) => {
|
const getStyle = (el, attr) => {
|
||||||
try {
|
try {
|
||||||
return window.getComputedStyle ?
|
return window.getComputedStyle ? window.getComputedStyle(el)[attr] : el.currentStyle[attr];
|
||||||
window.getComputedStyle(el)[attr] :
|
} catch (e) {}
|
||||||
el.currentStyle[attr];
|
return '';
|
||||||
} catch (e) {}
|
|
||||||
return "";
|
|
||||||
};
|
};
|
||||||
|
|
||||||
class Cursor {
|
class Cursor {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.pos = {
|
this.pos = {
|
||||||
curr: null,
|
curr: null,
|
||||||
prev: null
|
prev: null,
|
||||||
};
|
};
|
||||||
this.pt = [];
|
this.pt = [];
|
||||||
this.create();
|
this.create();
|
||||||
this.init();
|
this.init();
|
||||||
this.render();
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
move(left, top) {
|
||||||
|
this.cursor.style['left'] = `${left}px`;
|
||||||
|
this.cursor.style['top'] = `${top}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
if (!this.cursor) {
|
||||||
|
this.cursor = document.createElement('div');
|
||||||
|
this.cursor.id = 'cursor';
|
||||||
|
this.cursor.classList.add('xs-hidden');
|
||||||
|
this.cursor.classList.add('hidden');
|
||||||
|
document.body.append(this.cursor);
|
||||||
}
|
}
|
||||||
|
|
||||||
move(left, top) {
|
var el = document.getElementsByTagName('*');
|
||||||
this.cursor.style["left"] = `${left}px`;
|
for (let i = 0; i < el.length; i++)
|
||||||
this.cursor.style["top"] = `${top}px`;
|
if (getStyle(el[i], 'cursor') == 'pointer') this.pt.push(el[i].outerHTML);
|
||||||
}
|
|
||||||
|
document.body.appendChild((this.scr = document.createElement('style')));
|
||||||
create() {
|
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
|
||||||
if (!this.cursor) {
|
}
|
||||||
this.cursor = document.createElement("div");
|
|
||||||
this.cursor.id = "cursor";
|
refresh() {
|
||||||
this.cursor.classList.add("xs-hidden");
|
this.scr.remove();
|
||||||
this.cursor.classList.add("hidden");
|
this.cursor.classList.remove('active');
|
||||||
document.body.append(this.cursor);
|
this.pos = {
|
||||||
}
|
curr: null,
|
||||||
|
prev: null,
|
||||||
var el = document.getElementsByTagName('*');
|
};
|
||||||
for (let i = 0; i < el.length; i++)
|
this.pt = [];
|
||||||
if (getStyle(el[i], "cursor") == "pointer")
|
|
||||||
this.pt.push(el[i].outerHTML);
|
this.create();
|
||||||
|
this.init();
|
||||||
document.body.appendChild((this.scr = document.createElement("style")));
|
this.render();
|
||||||
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
|
}
|
||||||
}
|
|
||||||
|
init() {
|
||||||
refresh() {
|
document.onmousemove = (e) => {
|
||||||
this.scr.remove();
|
this.pos.curr == null && this.move(e.clientX - 8, e.clientY - 8);
|
||||||
this.cursor.classList.remove("active");
|
this.pos.curr = {
|
||||||
this.pos = {
|
x: e.clientX - 8,
|
||||||
curr: null,
|
y: e.clientY - 8,
|
||||||
prev: null
|
};
|
||||||
};
|
this.cursor.classList.remove('hidden');
|
||||||
this.pt = [];
|
};
|
||||||
|
document.onmouseenter = (e) => this.cursor.classList.remove('hidden');
|
||||||
this.create();
|
document.onmouseleave = (e) => this.cursor.classList.add('hidden');
|
||||||
this.init();
|
document.onmousedown = (e) => this.cursor.classList.add('active');
|
||||||
this.render();
|
document.onmouseup = (e) => this.cursor.classList.remove('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
render() {
|
||||||
document.onmousemove = e => {
|
if (this.pos.prev) {
|
||||||
(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
|
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
|
||||||
this.pos.curr = {
|
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
|
||||||
x: e.clientX - 8,
|
this.move(this.pos.prev.x, this.pos.prev.y);
|
||||||
y: e.clientY - 8
|
} else {
|
||||||
};
|
this.pos.prev = this.pos.curr;
|
||||||
this.cursor.classList.remove("hidden");
|
|
||||||
};
|
|
||||||
document.onmouseenter = e => this.cursor.classList.remove("hidden");
|
|
||||||
document.onmouseleave = e => this.cursor.classList.add("hidden");
|
|
||||||
document.onmousedown = e => this.cursor.classList.add("active");
|
|
||||||
document.onmouseup = e => this.cursor.classList.remove("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.pos.prev) {
|
|
||||||
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
|
|
||||||
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
|
|
||||||
this.move(this.pos.prev.x, this.pos.prev.y);
|
|
||||||
} else {
|
|
||||||
this.pos.prev = this.pos.curr;
|
|
||||||
}
|
|
||||||
requestAnimationFrame(() => this.render());
|
|
||||||
}
|
}
|
||||||
|
requestAnimationFrame(() => this.render());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const cursorInit = () => {
|
const cursorInit = () => {
|
||||||
CURSOR = new Cursor();
|
CURSOR = new Cursor();
|
||||||
};
|
};
|
||||||
|
|
||||||
export default cursorInit;
|
export default cursorInit;
|
||||||
|
@ -2,22 +2,22 @@
|
|||||||
let timeout;
|
let timeout;
|
||||||
|
|
||||||
function debounce(func, wait = 300, immediate = false) {
|
function debounce(func, wait = 300, immediate = false) {
|
||||||
// 清除定时器
|
// 清除定时器
|
||||||
if (timeout !== null) {
|
if (timeout !== null) {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
}
|
}
|
||||||
// 立即执行
|
// 立即执行
|
||||||
if (immediate) {
|
if (immediate) {
|
||||||
var callNow = !timeout;
|
var callNow = !timeout;
|
||||||
timeout = setTimeout(function () {
|
timeout = setTimeout(function () {
|
||||||
timeout = null;
|
timeout = null;
|
||||||
}, wait);
|
}, wait);
|
||||||
if (callNow) typeof func === 'function' && func();
|
if (callNow) typeof func === 'function' && func();
|
||||||
} else {
|
} else {
|
||||||
timeout = setTimeout(function () {
|
timeout = setTimeout(function () {
|
||||||
typeof func === 'function' && func();
|
typeof func === 'function' && func();
|
||||||
}, wait);
|
}, wait);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default debounce;
|
export default debounce;
|
||||||
|
@ -1,29 +1,16 @@
|
|||||||
import { h } from "vue";
|
import { h } from 'vue';
|
||||||
import { SpaCandle } from "@icon-park/vue-next";
|
import { SpaCandle } from '@icon-park/vue-next';
|
||||||
|
|
||||||
// 时钟
|
// 时钟
|
||||||
export const getCurrentTime = () => {
|
export const getCurrentTime = () => {
|
||||||
let time = new Date();
|
let time = new Date();
|
||||||
let year = time.getFullYear();
|
let year = time.getFullYear();
|
||||||
let month =
|
let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
|
||||||
time.getMonth() + 1 < 10
|
let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
|
||||||
? "0" + (time.getMonth() + 1)
|
let hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
|
||||||
: time.getMonth() + 1;
|
let minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
|
||||||
let day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
|
let second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
|
||||||
let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
|
let weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||||
let minute =
|
|
||||||
time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
|
|
||||||
let second =
|
|
||||||
time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
|
|
||||||
let weekday = [
|
|
||||||
"星期日",
|
|
||||||
"星期一",
|
|
||||||
"星期二",
|
|
||||||
"星期三",
|
|
||||||
"星期四",
|
|
||||||
"星期五",
|
|
||||||
"星期六",
|
|
||||||
];
|
|
||||||
let currentTime = {
|
let currentTime = {
|
||||||
year,
|
year,
|
||||||
month,
|
month,
|
||||||
@ -87,21 +74,21 @@ export const helloInit = () => {
|
|||||||
const hour = new Date().getHours();
|
const hour = new Date().getHours();
|
||||||
let hello = null;
|
let hello = null;
|
||||||
if (hour < 6) {
|
if (hour < 6) {
|
||||||
hello = "凌晨好";
|
hello = '凌晨好';
|
||||||
} else if (hour < 9) {
|
} else if (hour < 9) {
|
||||||
hello = "早上好";
|
hello = '早上好';
|
||||||
} else if (hour < 12) {
|
} else if (hour < 12) {
|
||||||
hello = "上午好";
|
hello = '上午好';
|
||||||
} else if (hour < 14) {
|
} else if (hour < 14) {
|
||||||
hello = "中午好";
|
hello = '中午好';
|
||||||
} else if (hour < 17) {
|
} else if (hour < 17) {
|
||||||
hello = "下午好";
|
hello = '下午好';
|
||||||
} else if (hour < 19) {
|
} else if (hour < 19) {
|
||||||
hello = "傍晚好";
|
hello = '傍晚好';
|
||||||
} else if (hour < 22) {
|
} else if (hour < 22) {
|
||||||
hello = "晚上好";
|
hello = '晚上好';
|
||||||
} else {
|
} else {
|
||||||
hello = "夜深了";
|
hello = '夜深了';
|
||||||
}
|
}
|
||||||
ElMessage({
|
ElMessage({
|
||||||
dangerouslyUseHTMLString: true,
|
dangerouslyUseHTMLString: true,
|
||||||
@ -111,11 +98,11 @@ export const helloInit = () => {
|
|||||||
|
|
||||||
// 默哀模式
|
// 默哀模式
|
||||||
const anniversaries = {
|
const anniversaries = {
|
||||||
4.4: "清明节",
|
4.4: '清明节',
|
||||||
5.12: "汶川大地震纪念日",
|
5.12: '汶川大地震纪念日',
|
||||||
7.7: "中国人民抗日战争纪念日",
|
7.7: '中国人民抗日战争纪念日',
|
||||||
9.18: "九·一八事变纪念日",
|
9.18: '九·一八事变纪念日',
|
||||||
12.13: "南京大屠杀死难者国家公祭日",
|
12.13: '南京大屠杀死难者国家公祭日',
|
||||||
};
|
};
|
||||||
export const checkDays = () => {
|
export const checkDays = () => {
|
||||||
const myDate = new Date();
|
const myDate = new Date();
|
||||||
@ -124,13 +111,13 @@ export const checkDays = () => {
|
|||||||
const key = `${mon}.${date}`;
|
const key = `${mon}.${date}`;
|
||||||
if (anniversaries.hasOwnProperty(key)) {
|
if (anniversaries.hasOwnProperty(key)) {
|
||||||
console.log(`今天是${anniversaries[key]}`);
|
console.log(`今天是${anniversaries[key]}`);
|
||||||
const gray = document.createElement("style");
|
const gray = document.createElement('style');
|
||||||
gray.innerHTML = "html{filter: grayscale(100%)}";
|
gray.innerHTML = 'html{filter: grayscale(100%)}';
|
||||||
document.head.appendChild(gray);
|
document.head.appendChild(gray);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `今天是${anniversaries[key]}`,
|
message: `今天是${anniversaries[key]}`,
|
||||||
duration: 14000,
|
duration: 14000,
|
||||||
icon: h(SpaCandle, { theme: "filled", fill: "#efefef" }),
|
icon: h(SpaCandle, { theme: 'filled', fill: '#efefef' }),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -144,11 +131,11 @@ export const siteDateStatistics = (startDate) => {
|
|||||||
const differenceInYears = differenceInMonths / 12;
|
const differenceInYears = differenceInMonths / 12;
|
||||||
if (differenceInYears >= 1) {
|
if (differenceInYears >= 1) {
|
||||||
return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(
|
return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(
|
||||||
differenceInMonths % 12
|
differenceInMonths % 12,
|
||||||
)} 月 ${Math.round(differenceInDays % 30)} 天`;
|
)} 月 ${Math.round(differenceInDays % 30)} 天`;
|
||||||
} else if (differenceInMonths >= 1) {
|
} else if (differenceInMonths >= 1) {
|
||||||
return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(
|
return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(
|
||||||
differenceInDays % 30
|
differenceInDays % 30,
|
||||||
)} 天`;
|
)} 天`;
|
||||||
} else {
|
} else {
|
||||||
return `本站已经苟活了 ${Math.round(differenceInDays)} 天`;
|
return `本站已经苟活了 ${Math.round(differenceInDays)} 天`;
|
||||||
|
@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="box cards" @mouseenter="closeShow = true" @mouseleave="closeShow = false">
|
||||||
class="box cards"
|
|
||||||
@mouseenter="closeShow = true"
|
|
||||||
@mouseleave="closeShow = false"
|
|
||||||
>
|
|
||||||
<transition name="el-fade-in-linear">
|
<transition name="el-fade-in-linear">
|
||||||
<close-one
|
<close-one
|
||||||
class="close"
|
class="close"
|
||||||
@ -31,9 +27,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
|
import { CloseOne, SettingTwo } from '@icon-park/vue-next';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import TimeCapsule from "@/components/TimeCapsule.vue";
|
import TimeCapsule from '@/components/TimeCapsule.vue';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
const closeShow = ref(false);
|
const closeShow = ref(false);
|
||||||
@ -58,7 +54,9 @@ const closeShow = ref(false);
|
|||||||
right: 14px;
|
right: 14px;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
transition:
|
||||||
|
transform 0.3s,
|
||||||
|
opacity 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
|
@ -18,11 +18,7 @@
|
|||||||
<span class="sm-hidden">{{ currentTime.weekday }}</span>
|
<span class="sm-hidden">{{ currentTime.weekday }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span>
|
<span> {{ currentTime.hour }}:{{ currentTime.minute }}:{{ currentTime.second }}</span>
|
||||||
{{ currentTime.hour }}:{{ currentTime.minute }}:{{
|
|
||||||
currentTime.second
|
|
||||||
}}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Weather />
|
<Weather />
|
||||||
@ -33,11 +29,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getCurrentTime } from "@/utils/getTime";
|
import { getCurrentTime } from '@/utils/getTime';
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import Music from "@/components/Music.vue";
|
import Music from '@/components/Music.vue';
|
||||||
import Hitokoto from "@/components/Hitokoto.vue";
|
import Hitokoto from '@/components/Hitokoto.vue';
|
||||||
import Weather from "@/components/Weather.vue";
|
import Weather from '@/components/Weather.vue';
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
@ -126,7 +122,7 @@ onBeforeUnmount(() => {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 3.25rem;
|
font-size: 3.25rem;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-family: "UnidreamLED";
|
font-family: 'UnidreamLED';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.weather {
|
.weather {
|
||||||
|
@ -6,9 +6,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import Message from "@/components/Message.vue";
|
import Message from '@/components/Message.vue';
|
||||||
import SocialLinks from "@/components/SocialLinks.vue";
|
import SocialLinks from '@/components/SocialLinks.vue';
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -26,4 +26,4 @@ const store = mainStore();
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -13,16 +13,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { mainStore } from "@/store";
|
import { mainStore } from '@/store';
|
||||||
import Func from "@/views/Func/index.vue";
|
import Func from '@/views/Func/index.vue';
|
||||||
import Link from "@/components/Links.vue";
|
import Link from '@/components/Links.vue';
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
|
|
||||||
// 站点链接
|
// 站点链接
|
||||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.right {
|
.right {
|
||||||
// flex: 1 0 0%;
|
// flex: 1 0 0%;
|
||||||
@ -30,7 +29,7 @@ const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
|||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
.logo {
|
.logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 6%;
|
top: 6%;
|
||||||
@ -53,4 +52,4 @@ const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,10 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
|
||||||
class="set"
|
|
||||||
@mouseenter="closeShow = true"
|
|
||||||
@mouseleave="closeShow = false"
|
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
<transition name="el-fade-in-linear">
|
<transition name="el-fade-in-linear">
|
||||||
<close-one
|
<close-one
|
||||||
class="close"
|
class="close"
|
||||||
@ -23,17 +18,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="version">
|
<div class="version">
|
||||||
<div class="num">v {{ config.version }}</div>
|
<div class="num">v {{ config.version }}</div>
|
||||||
<el-tooltip
|
<el-tooltip content="Github 源代码仓库" placement="right" :show-arrow="false">
|
||||||
content="Github 源代码仓库"
|
<github-one class="github" theme="outline" size="24" @click="jumpTo(config.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">
|
||||||
@ -66,37 +52,26 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import { CloseOne, SettingTwo, GithubOne, AddOne, Bug } from '@icon-park/vue-next';
|
||||||
CloseOne,
|
import { mainStore } from '@/store';
|
||||||
SettingTwo,
|
import Set from '@/components/Set.vue';
|
||||||
GithubOne,
|
import config from '@/../package.json';
|
||||||
AddOne,
|
|
||||||
Bug,
|
|
||||||
} from "@icon-park/vue-next";
|
|
||||||
import { mainStore } from "@/store";
|
|
||||||
import Set from "@/components/Set.vue";
|
|
||||||
import config from "@/../package.json";
|
|
||||||
|
|
||||||
const store = mainStore();
|
const store = mainStore();
|
||||||
const closeShow = ref(false);
|
const closeShow = ref(false);
|
||||||
|
|
||||||
// 站点链接
|
// 站点链接
|
||||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
|
||||||
|
|
||||||
// 更新日志
|
// 更新日志
|
||||||
const upData = reactive({
|
const upData = reactive({
|
||||||
new: [
|
new: [
|
||||||
"采用 Vue 进行重构",
|
'采用 Vue 进行重构',
|
||||||
"音乐歌单支持快速自定义",
|
'音乐歌单支持快速自定义',
|
||||||
"壁纸支持个性化设置",
|
'壁纸支持个性化设置',
|
||||||
"音乐播放器支持音量控制",
|
'音乐播放器支持音量控制',
|
||||||
],
|
|
||||||
fix: [
|
|
||||||
"修复天气 API",
|
|
||||||
"时光胶囊显示错误",
|
|
||||||
"移动端动画及细节",
|
|
||||||
"图标更换为 IconPark",
|
|
||||||
],
|
],
|
||||||
|
fix: ['修复天气 API', '时光胶囊显示错误', '移动端动画及细节', '图标更换为 IconPark'],
|
||||||
});
|
});
|
||||||
|
|
||||||
// 跳转源代码仓库
|
// 跳转源代码仓库
|
||||||
@ -148,7 +123,7 @@ const jumpTo = (url) => {
|
|||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
transform: translateY(-8%);
|
transform: translateY(-8%);
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
// line-height: 5rem;
|
// line-height: 5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
@ -170,7 +145,7 @@ const jumpTo = (url) => {
|
|||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-family: "Pacifico-Regular";
|
font-family: 'Pacifico-Regular';
|
||||||
}
|
}
|
||||||
|
|
||||||
.github {
|
.github {
|
||||||
|
Loading…
Reference in New Issue
Block a user