commit
8bbf410a25
8
.env
8
.env
@ -16,15 +16,15 @@ VITE_DESC_HELLO_OTHER = "Oops !"
|
||||
VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关闭 )"
|
||||
|
||||
# 社交链接
|
||||
## 请在 public 目录下的 socialLinks.json 文件中配置
|
||||
## 请在 src/assets/socialLinks.json 文件中配置
|
||||
|
||||
# 网站链接
|
||||
## 请在 src/components/Links/index.vue 文件中配置
|
||||
## 请在 src/assets/siteLinks.json 文件中配置
|
||||
|
||||
# 天气 Key
|
||||
## 请前往高德开放平台注册 Web服务 Key(免费的)
|
||||
## 请前往高德开放平台注册 **Web服务** Key(免费的)
|
||||
## 请各位大佬行行好,别再让我超量了
|
||||
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
|
||||
VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"
|
||||
|
||||
# 建站日期
|
||||
## 请按照 YYYY-MM-DD 格式填写
|
||||
|
@ -27,8 +27,6 @@
|
||||
- [x] 音乐播放器
|
||||
- [x] 移动端适配
|
||||
|
||||
* [ ] 播放器取消使用 Aplayer
|
||||
|
||||
### 部署
|
||||
|
||||
* **安装** [node.js](https://nodejs.org/zh-cn/) **环境**
|
||||
|
@ -19,6 +19,7 @@
|
||||
"fetch-jsonp": "^1.2.3",
|
||||
"pinia": "^2.0.23",
|
||||
"pinia-plugin-persistedstate": "^3.0.0",
|
||||
"swiper": "^9.3.2",
|
||||
"terser": "^5.16.1",
|
||||
"vue": "^3.2.37",
|
||||
"vue3-aplayer": "^1.7.3"
|
||||
|
12
src/App.vue
12
src/App.vue
@ -55,18 +55,18 @@ const getWidth = () => {
|
||||
onMounted(() => {
|
||||
// 自定义鼠标
|
||||
cursorInit();
|
||||
// 欢迎提示
|
||||
helloInit();
|
||||
// 默哀模式
|
||||
checkDays();
|
||||
// 加载完成事件
|
||||
window.addEventListener("load", () => {
|
||||
console.log("加载完成");
|
||||
// 去除加载标记
|
||||
document.getElementsByTagName("body")[0].className = "";
|
||||
// 给加载动画添加结束标记
|
||||
let loadingBox = document.getElementById("loading-box");
|
||||
const loadingBox = document.getElementById("loading-box");
|
||||
loadingBox.classList.add("loaded");
|
||||
// 欢迎提示
|
||||
helloInit();
|
||||
// 默哀模式
|
||||
checkDays();
|
||||
});
|
||||
|
||||
// 屏蔽右键
|
||||
@ -207,4 +207,4 @@ main {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -67,13 +67,3 @@ export const getWeather = async (key, city) => {
|
||||
);
|
||||
return await res.json();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取配置
|
||||
*/
|
||||
|
||||
// 获取社交链接
|
||||
export const getSocialLinks = async () => {
|
||||
const res = await fetch("/socialLinks.json");
|
||||
return await res.json();
|
||||
};
|
||||
|
41
src/assets/siteLinks.json
Normal file
41
src/assets/siteLinks.json
Normal file
@ -0,0 +1,41 @@
|
||||
[
|
||||
[
|
||||
{
|
||||
"icon": "Blog",
|
||||
"name": "博客",
|
||||
"link": "https://blog.imsyy.top/"
|
||||
},
|
||||
{
|
||||
"icon": "Cloud",
|
||||
"name": "网盘",
|
||||
"link": "https://pan.imsyy.top/"
|
||||
},
|
||||
{
|
||||
"icon": "CompactDisc",
|
||||
"name": "音乐",
|
||||
"link": "https://music.imsyy.top/"
|
||||
},
|
||||
{
|
||||
"icon": "Compass",
|
||||
"name": "起始页",
|
||||
"link": "https://nav.imsyy.top/"
|
||||
},
|
||||
{
|
||||
"icon": "Book",
|
||||
"name": "网址集",
|
||||
"link": "https://web.imsyy.top/"
|
||||
},
|
||||
{
|
||||
"icon": "Fire",
|
||||
"name": "今日热榜",
|
||||
"link": "https://hot.imsyy.top/"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
"icon": "LaptopCode",
|
||||
"name": "站点监测",
|
||||
"link": "https://status.imsyy.top/"
|
||||
}
|
||||
]
|
||||
]
|
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
Before Width: | Height: | Size: 496 B |
@ -20,7 +20,7 @@ import { SuccessPicture } from "@icon-park/vue-next";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
let bgUrl = ref(null); // 壁纸链接
|
||||
const bgUrl = ref(null); // 壁纸链接
|
||||
|
||||
const changeBg = (type) => {
|
||||
if (type == 0) {
|
||||
|
@ -35,7 +35,7 @@ import { mainStore } from "@/store";
|
||||
import config from "@/../package.json";
|
||||
const store = mainStore();
|
||||
|
||||
let fullYear = new Date().getFullYear();
|
||||
const fullYear = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -7,7 +7,7 @@
|
||||
@click.stop
|
||||
>
|
||||
<!-- 打开音乐面板 -->
|
||||
<Transition name="fade">
|
||||
<Transition name="el-fade-in-linear">
|
||||
<div
|
||||
class="open-music"
|
||||
v-show="openMusicShow && store.musicIsOk"
|
||||
@ -34,17 +34,14 @@ import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 开启音乐面板按钮显隐
|
||||
let openMusicShow = ref(false);
|
||||
const openMusicShow = ref(false);
|
||||
|
||||
// 一言数据
|
||||
let hitokotoData = reactive({
|
||||
const hitokotoData = reactive({
|
||||
text: "这里应该显示一句话",
|
||||
from: "無名",
|
||||
});
|
||||
|
||||
// 打开音乐面板
|
||||
const openMusic = () => {};
|
||||
|
||||
// 获取一言数据
|
||||
const getHitokotoData = () => {
|
||||
getHitokoto()
|
||||
|
@ -6,29 +6,46 @@
|
||||
</Icon>
|
||||
<span class="title">网站列表</span>
|
||||
</div>
|
||||
<el-row class="link-all" :gutter="20">
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="(item, index) in linksData"
|
||||
:key="item"
|
||||
@click="jumpLink(item.link)"
|
||||
>
|
||||
<div
|
||||
class="item cards"
|
||||
:style="index < 3 ? 'margin-bottom: 20px' : null"
|
||||
>
|
||||
<Icon size="26">
|
||||
<component :is="item.icon" />
|
||||
</Icon>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 网站列表 -->
|
||||
<Swiper
|
||||
v-if="siteLinks[0]"
|
||||
:modules="[Pagination, Mousewheel]"
|
||||
:slides-per-view="1"
|
||||
:space-between="40"
|
||||
:pagination="{
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
bulletElement: 'div',
|
||||
}"
|
||||
:mousewheel="true"
|
||||
>
|
||||
<SwiperSlide v-for="site in siteLinks" :key="site">
|
||||
<el-row class="link-all" :gutter="20">
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="(item, index) in site"
|
||||
:key="item"
|
||||
@click="jumpLink(item)"
|
||||
>
|
||||
<div
|
||||
class="item cards"
|
||||
:style="index < 3 ? 'margin-bottom: 20px' : null"
|
||||
>
|
||||
<Icon size="26">
|
||||
<component :is="siteIcon[item.icon]" />
|
||||
</Icon>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</SwiperSlide>
|
||||
<div class="swiper-pagination" />
|
||||
</Swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onMounted } from "vue";
|
||||
import { Icon } from "@vicons/utils";
|
||||
import {
|
||||
Link,
|
||||
@ -38,11 +55,30 @@ import {
|
||||
Compass,
|
||||
Book,
|
||||
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 siteIcon = {
|
||||
Blog,
|
||||
Cloud,
|
||||
CompactDisc,
|
||||
Compass,
|
||||
Book,
|
||||
Fire,
|
||||
LaptopCode,
|
||||
};
|
||||
|
||||
// 网站链接数据
|
||||
// 建议不要超出6个,若需要超出请自行调整样式
|
||||
let linksData = [
|
||||
const linksData = [
|
||||
{
|
||||
icon: Blog,
|
||||
name: "博客",
|
||||
@ -76,9 +112,17 @@ let linksData = [
|
||||
];
|
||||
|
||||
// 链接跳转
|
||||
const jumpLink = (url) => {
|
||||
window.open(url, "_blank");
|
||||
const jumpLink = (data) => {
|
||||
if (data.name === "音乐" && store.musicClick) {
|
||||
if (typeof $openList === "function") $openList();
|
||||
} else {
|
||||
window.open(data.link, "_blank");
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log(siteLinks);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -96,6 +140,29 @@ const jumpLink = (url) => {
|
||||
text-shadow: 0 0 5px #00000050;
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
left: -10px;
|
||||
width: calc(100% + 20px);
|
||||
padding: 5px 10px 0;
|
||||
z-index: 0;
|
||||
.swiper-slide {
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-pagination {
|
||||
position: static;
|
||||
margin-top: 4px;
|
||||
:deep(.swiper-pagination-bullet) {
|
||||
background-color: #fff;
|
||||
width: 18px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.link-all {
|
||||
.item {
|
||||
height: 100px;
|
||||
@ -112,6 +179,11 @@ const jumpLink = (url) => {
|
||||
background: rgb(0 0 0 / 40%);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 8px;
|
||||
@ -135,4 +207,4 @@ const jumpLink = (url) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -36,12 +36,12 @@ import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 主页站点logo
|
||||
let siteLogo = import.meta.env.VITE_SITE_LOGO;
|
||||
const siteLogo = import.meta.env.VITE_SITE_LOGO;
|
||||
// 站点链接
|
||||
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
|
||||
// 简介区域文字
|
||||
let descriptionText = reactive({
|
||||
const descriptionText = reactive({
|
||||
hello: import.meta.env.VITE_DESC_HELLO,
|
||||
text: import.meta.env.VITE_DESC_TEXT,
|
||||
});
|
||||
|
@ -7,7 +7,7 @@
|
||||
v-show="store.musicOpenState"
|
||||
>
|
||||
<div class="btns">
|
||||
<span @click="musicListShow = true">音乐列表</span>
|
||||
<span @click="openMusicList()">音乐列表</span>
|
||||
<span @click="store.musicOpenState = false">回到一言</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
@ -103,7 +103,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted, nextTick } from "vue";
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
import {
|
||||
GoStart,
|
||||
PlayOne,
|
||||
@ -119,19 +119,23 @@ import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 音量条数据
|
||||
let volumeShow = ref(false);
|
||||
let volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
|
||||
const volumeShow = ref(false);
|
||||
const volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
|
||||
|
||||
// 播放列表数据
|
||||
let musicListShow = ref(false);
|
||||
const musicListShow = ref(false);
|
||||
const playerRef = ref(null);
|
||||
const musicDialog = ref(null);
|
||||
const playerData = reactive({
|
||||
server: import.meta.env.VITE_SONG_SERVER,
|
||||
type: import.meta.env.VITE_SONG_TYPE,
|
||||
id: import.meta.env.VITE_SONG_ID,
|
||||
});
|
||||
|
||||
// 开启播放列表
|
||||
const openMusicList = () => {
|
||||
musicListShow.value = true;
|
||||
};
|
||||
|
||||
// 音乐播放暂停
|
||||
const changePlayState = () => {
|
||||
playerRef.value.playToggle();
|
||||
@ -149,6 +153,8 @@ onMounted(() => {
|
||||
changePlayState();
|
||||
}
|
||||
});
|
||||
// 挂载方法至 window
|
||||
window.$openList = openMusicList;
|
||||
});
|
||||
|
||||
// 监听音量变化
|
||||
@ -293,8 +299,8 @@ watch(
|
||||
border-radius: 6px;
|
||||
z-index: 999;
|
||||
@media (max-width: 720px) {
|
||||
left: calc(50% - 45%);
|
||||
width: 90%;
|
||||
left: calc(50% - 45%);
|
||||
width: 90%;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
@ -336,4 +342,4 @@ watch(
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -33,12 +33,12 @@ const store = mainStore();
|
||||
const player = ref(null);
|
||||
|
||||
// 歌曲播放列表
|
||||
let playList = ref([]);
|
||||
let playerLrc = ref("");
|
||||
const playList = ref([]);
|
||||
const playerLrc = ref("");
|
||||
|
||||
// 歌曲播放项
|
||||
let playIndex = ref(0);
|
||||
let playListCount = ref(0);
|
||||
const playIndex = ref(0);
|
||||
const playListCount = ref(0);
|
||||
|
||||
// 配置项
|
||||
const props = defineProps({
|
||||
@ -216,6 +216,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
|
||||
width: 80%;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
font-family: "HarmonyOS_Regular", sans-serif !important;
|
||||
:deep(.aplayer-body) {
|
||||
.aplayer-pic {
|
||||
display: none;
|
||||
|
@ -21,6 +21,15 @@
|
||||
:inactive-icon="CloseSmall"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="text">音乐点击是否打开面板</span>
|
||||
<el-switch
|
||||
v-model="musicClick"
|
||||
inline-prompt
|
||||
:active-icon="CheckSmall"
|
||||
:inactive-icon="CloseSmall"
|
||||
/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="其他设置" name="3">
|
||||
<div>设置内容待增加</div>
|
||||
@ -39,11 +48,11 @@ import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const store = mainStore();
|
||||
const { siteStartShow } = storeToRefs(store);
|
||||
const { siteStartShow, musicClick } = storeToRefs(store);
|
||||
|
||||
// 默认选中项
|
||||
let activeName = ref("1");
|
||||
let bgSet = ref("0");
|
||||
const activeName = ref("1");
|
||||
const bgSet = ref("0");
|
||||
|
||||
onMounted(() => {
|
||||
bgSet.value = store.coverType.toString();
|
||||
@ -130,4 +139,4 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="social">
|
||||
<div class="link">
|
||||
<a
|
||||
v-for="item in socialLinksData"
|
||||
v-for="item in socialLinks"
|
||||
:key="item.name"
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
@ -18,37 +18,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getSocialLinks } from "@/api";
|
||||
import { Error } from "@icon-park/vue-next";
|
||||
import { ref } from "vue";
|
||||
import socialLinks from "@/assets/socialLinks.json";
|
||||
|
||||
// 社交链接数据
|
||||
let socialLinksData = ref([]);
|
||||
let socialTip = ref("通过这里联系我吧");
|
||||
|
||||
// 获取社交链接数据
|
||||
const getSocialLinksData = () => {
|
||||
getSocialLinks()
|
||||
.then((res) => {
|
||||
socialLinksData.value = res;
|
||||
console.log(socialLinksData.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
ElMessage({
|
||||
message: "社交链接获取失败",
|
||||
grouping: true,
|
||||
icon: h(Error, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getSocialLinksData();
|
||||
});
|
||||
// 社交链接提示
|
||||
const socialTip = ref("通过这里联系我吧");
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -109,4 +83,4 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -61,13 +61,13 @@ import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 进度条数据
|
||||
let timeData = ref(getTimeCapsule());
|
||||
let startDate = ref(import.meta.env.VITE_SITE_START);
|
||||
let startDateText = ref(null);
|
||||
let timeInterval = null;
|
||||
const timeData = ref(getTimeCapsule());
|
||||
const startDate = ref(import.meta.env.VITE_SITE_START);
|
||||
const startDateText = ref(null);
|
||||
const timeInterval = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
timeInterval = setInterval(() => {
|
||||
timeInterval.value = setInterval(() => {
|
||||
timeData.value = getTimeCapsule();
|
||||
if (startDate.value)
|
||||
startDateText.value = siteDateStatistics(new Date(startDate.value));
|
||||
@ -75,7 +75,7 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timeInterval);
|
||||
clearInterval(timeInterval.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -20,10 +20,10 @@ import { getAdcode, getWeather } from "@/api";
|
||||
import { Error } from "@icon-park/vue-next";
|
||||
|
||||
// 高德开发者 Key
|
||||
let mainKey = import.meta.env.VITE_WEATHER_KEY;
|
||||
const mainKey = import.meta.env.VITE_WEATHER_KEY;
|
||||
|
||||
// 天气数据
|
||||
let weatherData = reactive({
|
||||
const weatherData = reactive({
|
||||
adCode: {
|
||||
city: null, // 城市
|
||||
adcode: null, // 城市编码
|
||||
|
@ -1,75 +1,73 @@
|
||||
import {
|
||||
defineStore
|
||||
} from "pinia";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const mainStore = defineStore("main", {
|
||||
state: () => {
|
||||
return {
|
||||
innerWidth: null, // 当前窗口宽度
|
||||
coverType: "0", // 壁纸种类
|
||||
siteStartShow: true, // 建站日期显示
|
||||
musicIsOk: false, // 音乐是否加载完成
|
||||
musicVolume: 0, // 音乐音量;
|
||||
musicOpenState: false, // 音乐面板开启状态
|
||||
backgroundShow: false, // 壁纸展示状态
|
||||
boxOpenState: false, // 盒子开启状态
|
||||
mobileOpenState: false, // 移动端开启状态
|
||||
mobileFuncState: false, // 移动端功能区开启状态
|
||||
setOpenState: false, // 设置页面开启状态
|
||||
playerState: false, // 当前播放状态
|
||||
playerTitle: null, // 当前播放歌曲名
|
||||
playerArtist: null, // 当前播放歌手名
|
||||
playerLrc: "歌词加载中", // 当前播放歌词
|
||||
}
|
||||
state: () => {
|
||||
return {
|
||||
innerWidth: null, // 当前窗口宽度
|
||||
coverType: "0", // 壁纸种类
|
||||
siteStartShow: true, // 建站日期显示
|
||||
musicIsOk: false, // 音乐是否加载完成
|
||||
musicVolume: 0, // 音乐音量;
|
||||
musicOpenState: false, // 音乐面板开启状态
|
||||
backgroundShow: false, // 壁纸展示状态
|
||||
boxOpenState: false, // 盒子开启状态
|
||||
mobileOpenState: false, // 移动端开启状态
|
||||
mobileFuncState: false, // 移动端功能区开启状态
|
||||
setOpenState: false, // 设置页面开启状态
|
||||
playerState: false, // 当前播放状态
|
||||
playerTitle: null, // 当前播放歌曲名
|
||||
playerArtist: null, // 当前播放歌手名
|
||||
playerLrc: "歌词加载中", // 当前播放歌词
|
||||
musicClick: false, // 音乐链接是否跳转
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
// 获取歌词
|
||||
getPlayerLrc(state) {
|
||||
return state.playerLrc;
|
||||
},
|
||||
getters: {
|
||||
// 获取歌词
|
||||
getPlayerLrc(state) {
|
||||
return state.playerLrc;
|
||||
},
|
||||
// 获取歌曲信息
|
||||
getPlayerData(state) {
|
||||
return {
|
||||
name: state.playerTitle,
|
||||
artist: state.playerArtist,
|
||||
}
|
||||
},
|
||||
// 获取页面宽度
|
||||
getInnerWidth(state) {
|
||||
return state.innerWidth;
|
||||
}
|
||||
// 获取歌曲信息
|
||||
getPlayerData(state) {
|
||||
return {
|
||||
name: state.playerTitle,
|
||||
artist: state.playerArtist,
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
// 更改当前页面宽度
|
||||
setInnerWidth(value) {
|
||||
this.innerWidth = value;
|
||||
if (value >= 720) {
|
||||
this.mobileOpenState = false;
|
||||
this.mobileFuncState = false;
|
||||
}
|
||||
},
|
||||
// 更改播放状态
|
||||
setPlayerState(value) {
|
||||
if (value) {
|
||||
this.playerState = false;
|
||||
} else {
|
||||
this.playerState = true;
|
||||
}
|
||||
|
||||
},
|
||||
// 更改歌词
|
||||
setPlayerLrc(value) {
|
||||
this.playerLrc = value;
|
||||
},
|
||||
// 更改歌曲数据
|
||||
setPlayerData(title, artist) {
|
||||
this.playerTitle = title;
|
||||
this.playerArtist = artist;
|
||||
}
|
||||
// 获取页面宽度
|
||||
getInnerWidth(state) {
|
||||
return state.innerWidth;
|
||||
},
|
||||
persist: {
|
||||
key: 'data',
|
||||
storage: window.localStorage,
|
||||
paths: ['coverType', 'musicVolume', 'siteStartShow'],
|
||||
},
|
||||
actions: {
|
||||
// 更改当前页面宽度
|
||||
setInnerWidth(value) {
|
||||
this.innerWidth = value;
|
||||
if (value >= 720) {
|
||||
this.mobileOpenState = false;
|
||||
this.mobileFuncState = false;
|
||||
}
|
||||
},
|
||||
})
|
||||
// 更改播放状态
|
||||
setPlayerState(value) {
|
||||
if (value) {
|
||||
this.playerState = false;
|
||||
} else {
|
||||
this.playerState = true;
|
||||
}
|
||||
},
|
||||
// 更改歌词
|
||||
setPlayerLrc(value) {
|
||||
this.playerLrc = value;
|
||||
},
|
||||
// 更改歌曲数据
|
||||
setPlayerData(title, artist) {
|
||||
this.playerTitle = title;
|
||||
this.playerArtist = artist;
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
key: "data",
|
||||
storage: window.localStorage,
|
||||
paths: ["coverType", "musicVolume", "siteStartShow", "musicClick"],
|
||||
},
|
||||
});
|
||||
|
@ -1,32 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* 小于1200px时 */
|
||||
@media (max-width: 1380px) {
|
||||
.el-radio-group {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
/* 小于1200px时 */
|
||||
@media (max-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
.sm-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* 小于992px时 */
|
||||
@media (max-width: 992px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
/* 小于720px时 */
|
||||
@media (max-width: 720px) {
|
||||
.xs-hidden {
|
||||
display: none;
|
||||
}
|
||||
}/*# sourceMappingURL=global.css.map */
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["global.css","global.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIZ;EACI,iBAFqB;ADA7B;;ACSA,cAAA;AACA;EACI;IACI,kCAAA;EDNN;AACF;ACSA,cAAA;AACA;EAhBI;IACI,iBAgB2B;EDNjC;ECSE;IACI,aAAA;EDPN;AACF;ACUA,aAAA;AACA;EA1BI;IACI,gBA0B2B;EDPjC;AACF;ACSA,aAAA;AACA;EAGI;IACI,aAAA;EDTN;AACF","file":"global.css"}
|
@ -1,179 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
作者: imsyy
|
||||
主页:https://www.imsyy.top/
|
||||
GitHub:https://github.com/imsyy/home
|
||||
版权所有,请勿删除
|
||||
*/
|
||||
/*全局样式*/
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
*,
|
||||
a,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*:hover,
|
||||
a:hover,
|
||||
p:hover {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pacifico-Regular";
|
||||
src: url("/font/Pacifico-Regular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "UnidreamLED";
|
||||
src: url("/font/UnidreamLED.ttf") format("truetype");
|
||||
}
|
||||
#app {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cards {
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2509803922);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: scale(1);
|
||||
transition: 0.5s;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
}
|
||||
|
||||
.cards:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cards:active {
|
||||
transform: scale(0.98);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
--el-message-bg-color: #00000040 !important;
|
||||
--el-message-text-color: #efefef !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 25px !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.el-message .el-message__badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-progress-bar .el-progress-bar__outer {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(0, 0, 0, 0.1254901961);
|
||||
}
|
||||
.el-progress-bar .el-progress-bar__outer .el-progress-bar__inner {
|
||||
background-color: #efefef;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-family: "UnidreamLED";
|
||||
}
|
||||
.el-progress-bar .el-progress-bar__outer .el-progress-bar__inner span {
|
||||
color: #564d59;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.el-popper.is-dark {
|
||||
background: rgba(255, 255, 255, 0.3764705882) !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-card .el-card__header {
|
||||
font-weight: bold;
|
||||
padding: 16px 20px !important;
|
||||
background-color: rgba(255, 255, 255, 0.1882352941) !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
.el-card .el-card__body {
|
||||
padding: 0 !important;
|
||||
background-color: rgba(255, 255, 255, 0.062745098) !important;
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
-webkit-animation: fade 0.3s ease-in-out;
|
||||
animation: fade 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
animation: fade 0.3s ease-in-out reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#cursor {
|
||||
position: fixed;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 0.25;
|
||||
z-index: 10086;
|
||||
pointer-events: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background, opacity, transform;
|
||||
}
|
||||
#cursor.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
#cursor.active {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #eeeeee;
|
||||
}/*# sourceMappingURL=style.css.map */
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;;;;CAAA;AASA,OAAA;AAEA;;EAEI,WAAA;EACA,YAAA;EACA,sBAAA;EACA,gBAAA;ADFJ;;ACKA;;;EAGI,SAAA;EACA,UAAA;EACA,yBAAA;EACA,uBAAA;EACA,sBAAA;GAAA,qBAAA;OAAA,iBAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,sBAAA;ADFJ;ACII;;;EACI,gBAAA;ADAR;;ACOA;EACI,+BAAA;EACA,yDAAA;ADJJ;ACOA;EACI,0BAAA;EACA,oDAAA;ADLJ;ACUA;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA;ADRJ;;ACYA;EACI,kBAAA;EACA,uCAAA;EACA,mCAAA;EACA,2BAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,4BAAA;ADTJ;;ACYA;EACI,sBAAA;EACA,gBAAA;ADTJ;;ACYA;EACI,sBAAA;EACA,gBAAA;ADTJ;;ACaA;EACI,2CAAA;EACA,2CAAA;EACA,mCAAA;EACA,2BAAA;EACA,8BAAA;EACA,oCAAA;ADVJ;ACYI;EACI,aAAA;ADVR;;ACgBI;EACI,kBAAA;EACA,6CAAA;ADbR;ACeQ;EACI,yBAAA;EACA,kBAAA;EACA,kBAAA;EACA,0BAAA;ADbZ;ACeY;EACI,cAAA;EACA,iBAAA;ADbhB;;ACsBA;EACI,wDAAA;EACA,wCAAA;ADnBJ;;ACuBA;EACI,6BAAA;EACA,wCAAA;EACA,wCAAA;ADpBJ;ACsBI;EACI,iBAAA;EACA,6BAAA;EACA,8DAAA;EACA,+CAAA;ADpBR;ACuBI;EACI,qBAAA;EACA,6DAAA;ADrBR;;AC0BA;EACI,wCAAA;UAAA,gCAAA;ADvBJ;;AC0BA;EACI,wCAAA;ADvBJ;;AC0BA;EACI;IACI,UAAA;EDvBN;EC0BE;IACI,UAAA;EDxBN;AACF;;ACiBA;EACI;IACI,UAAA;EDvBN;EC0BE;IACI,UAAA;EDxBN;AACF;AC4BA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,4BAAA;EACA,mDAAA;AD1BJ;AC4BI;EACI,UAAA;AD1BR;AC6BI;EACI,YAAA;EACA,qBAAA;AD3BR;;ACiCA;EACI,UAAA;EACA,WAAA;EACA,6BAAA;AD9BJ;;ACiCA;EACI,mBAAA;EACA,yBAAA;AD9BJ","file":"style.css"}
|
@ -11,191 +11,189 @@ GitHub:https://github.com/imsyy/home
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
font-family: 'HarmonyOS_Regular', sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
font-family: "HarmonyOS_Regular", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
a,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
transition: .3s;
|
||||
}
|
||||
&:hover {
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 字体文件
|
||||
@font-face {
|
||||
font-family: "Pacifico-Regular";
|
||||
src: url('/font/Pacifico-Regular.ttf') format('truetype');
|
||||
font-family: "Pacifico-Regular";
|
||||
src: url("/font/Pacifico-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "UnidreamLED";
|
||||
src: url('/font/UnidreamLED.ttf') format('truetype');
|
||||
font-family: "UnidreamLED";
|
||||
src: url("/font/UnidreamLED.ttf") format("truetype");
|
||||
}
|
||||
|
||||
|
||||
// 基础样式
|
||||
#app {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// 卡片样式
|
||||
.cards {
|
||||
border-radius: 6px;
|
||||
background: #00000040;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: scale(1);
|
||||
transition: all 0.3s;
|
||||
border-radius: 6px;
|
||||
background: #00000040;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: scale(1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cards:hover {
|
||||
transform: scale(1.01);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.cards:active {
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
// 文字超出
|
||||
.text-hidden {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 弹窗样式
|
||||
.el-message {
|
||||
--el-message-bg-color: #00000040 !important;
|
||||
--el-message-text-color: #efefef !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 25px !important;
|
||||
border-color: transparent !important;
|
||||
--el-message-bg-color: #00000040 !important;
|
||||
--el-message-text-color: #efefef !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 25px !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
.el-message__badge {
|
||||
display: none;
|
||||
}
|
||||
.el-message__badge {
|
||||
display: none;
|
||||
}
|
||||
.el-message__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.el-progress-bar {
|
||||
.el-progress-bar__outer {
|
||||
border-radius: 6px;
|
||||
background-color: #00000020;
|
||||
.el-progress-bar__outer {
|
||||
border-radius: 6px;
|
||||
background-color: #00000020;
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background-color: #efefef;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-family: 'UnidreamLED';
|
||||
.el-progress-bar__inner {
|
||||
background-color: #efefef;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-family: "UnidreamLED";
|
||||
|
||||
span {
|
||||
color: #564d59;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
}
|
||||
span {
|
||||
color: #564d59;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip 样式
|
||||
.el-popper.is-dark {
|
||||
background: #ffffff60 !important;
|
||||
border: 1px solid transparent !important;
|
||||
background: #ffffff60 !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
// 卡片样式
|
||||
.el-card {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid transparent !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid transparent !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
.el-card__header {
|
||||
font-weight: bold;
|
||||
padding: 16px 20px !important;
|
||||
background-color: #ffffff30 !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
.el-card__header {
|
||||
font-weight: bold;
|
||||
padding: 16px 20px !important;
|
||||
background-color: #ffffff30 !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 0 !important;
|
||||
background-color: #ffffff10 !important;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 0 !important;
|
||||
background-color: #ffffff10 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 渐入动画
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏元素
|
||||
@media (min-width: 910px) and (max-width: 1200px) {
|
||||
.sm-hidden {
|
||||
display: none;
|
||||
}
|
||||
.sm-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 自定义鼠标
|
||||
#cursor {
|
||||
position: fixed;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 0.25;
|
||||
z-index: 10086;
|
||||
pointer-events: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background, opacity, transform;
|
||||
position: fixed;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 25px;
|
||||
opacity: 0.25;
|
||||
z-index: 10086;
|
||||
pointer-events: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background, opacity, transform;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
&.active {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar,
|
||||
scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: transparent;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb,
|
||||
scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
border-radius: 10px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
@ -33,11 +33,11 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
|
||||
import TimeCapsule from "@/components/TimeCapsule/index.vue";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
import TimeCapsule from "@/components/TimeCapsule/index.vue";
|
||||
|
||||
let closeShow = ref(false);
|
||||
const store = mainStore();
|
||||
const closeShow = ref(false);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -60,6 +60,7 @@ let closeShow = ref(false);
|
||||
right: 14px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
@ -80,4 +81,4 @@ let closeShow = ref(false);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -43,17 +43,17 @@ import Weather from "@/components/Weather/index.vue";
|
||||
const store = mainStore();
|
||||
|
||||
// 当前时间
|
||||
let currentTime = ref({});
|
||||
let timeInterval = null;
|
||||
const currentTime = ref({});
|
||||
const timeInterval = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
timeInterval = setInterval(() => {
|
||||
timeInterval.value = setInterval(() => {
|
||||
currentTime.value = getCurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timeInterval);
|
||||
clearInterval(timeInterval.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -137,4 +137,4 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -13,14 +13,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { mainStore } from "@/store";
|
||||
import Func from "@/views/Func/index.vue";
|
||||
import Link from "@/components/Links/index.vue";
|
||||
const store = mainStore();
|
||||
|
||||
// 站点链接
|
||||
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
</script>
|
||||
|
||||
|
||||
@ -30,13 +29,13 @@ let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
width: 50%;
|
||||
margin-left: 0.75rem;
|
||||
.logo {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
font-family: "Pacifico-Regular";
|
||||
font-size: 1.75rem;
|
||||
position: fixed;
|
||||
top: 6%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
left: 0;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
|
@ -79,13 +79,13 @@ import Set from "@/components/Set/index.vue";
|
||||
import config from "@/../package.json";
|
||||
const store = mainStore();
|
||||
|
||||
let closeShow = ref(false);
|
||||
const closeShow = ref(false);
|
||||
|
||||
// 站点链接
|
||||
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
|
||||
// 更新日志
|
||||
let upData = reactive({
|
||||
const upData = reactive({
|
||||
new: [
|
||||
"采用 Vue 进行重构",
|
||||
"音乐歌单支持快速自定义",
|
||||
|
14
yarn.lock
14
yarn.lock
@ -3040,6 +3040,11 @@ sourcemap-codec@^1.4.8:
|
||||
resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
|
||||
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
|
||||
|
||||
ssr-window@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
|
||||
integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
|
||||
|
||||
string.prototype.matchall@^4.0.6:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.npmmirror.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
|
||||
@ -3112,6 +3117,13 @@ supports-preserve-symlinks-flag@^1.0.0:
|
||||
resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
|
||||
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
|
||||
|
||||
swiper@^9.3.2:
|
||||
version "9.3.2"
|
||||
resolved "https://registry.npmmirror.com/swiper/-/swiper-9.3.2.tgz#f29eddb17f231221c7727372637c44279174a4e1"
|
||||
integrity sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==
|
||||
dependencies:
|
||||
ssr-window "^4.0.2"
|
||||
|
||||
temp-dir@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
|
||||
@ -3311,7 +3323,7 @@ uri-js@^4.2.2:
|
||||
|
||||
vite-plugin-html@^3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz"
|
||||
resolved "https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz#0d4df9900642a321a139f1c25c05195ba9d0ec79"
|
||||
integrity sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==
|
||||
dependencies:
|
||||
"@rollup/pluginutils" "^4.2.0"
|
||||
|
Loading…
Reference in New Issue
Block a user