commit
392dbf84e3
4
.env
4
.env
@ -3,7 +3,7 @@ VITE_SITE_NAME = "無名の主页" # 名称
|
||||
VITE_SITE_ANTHOR = "無名" # 作者
|
||||
VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
|
||||
VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
|
||||
VITE_SITE_URL = "imsyy.top" # 站点地址
|
||||
VITE_SITE_URL = "jmsyy.top" # 站点地址
|
||||
VITE_SITE_LOGO = "/images/icon/favicon.ico" # 站点主图标
|
||||
VITE_SITE_MAIN_LOGO = "/images/icon/logo.png" # 主页图标
|
||||
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标
|
||||
@ -47,5 +47,5 @@ VITE_SONG_API = "https://api-meting.imsyy.top/api"
|
||||
VITE_SONG_SERVER = "netease"
|
||||
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
||||
VITE_SONG_TYPE = "playlist"
|
||||
# 播放 ID
|
||||
# 播放 ID ( 若无需播放器,请设为空即可 )
|
||||
VITE_SONG_ID = "7452421335"
|
@ -207,7 +207,7 @@ if (type == 0) {
|
||||
* [高德开放平台](https://lbs.amap.com/)
|
||||
* [Hitokoto 一言](https://hitokoto.cn/)
|
||||
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
|
||||
*
|
||||
|
||||
## Star History
|
||||
|
||||
[![Star History Chart](https://api.star-history.com/svg?repos=imsyy/home&type=Date)](https://star-history.com/#imsyy/home&Date)
|
||||
|
@ -4,7 +4,7 @@
|
||||
"github": "https://github.com/imsyy/home",
|
||||
"home": "https://imsyy.top",
|
||||
"private": true,
|
||||
"version": "4.1.2",
|
||||
"version": "4.1.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
|
BIN
public/font/Pacifico-Regular-all.ttf
Normal file
BIN
public/font/Pacifico-Regular-all.ttf
Normal file
Binary file not shown.
3
public/font/README.md
Normal file
3
public/font/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
## Logo 字体替换
|
||||
|
||||
可将该文件夹下的 `Pacifico-Regular-all.ttf` 替换原来的 `Pacifico-Regular.ttf`
|
@ -17,7 +17,12 @@
|
||||
</section>
|
||||
</div>
|
||||
<!-- 移动端菜单按钮 -->
|
||||
<Icon class="menu" size="24" @click="store.mobileOpenState = !store.mobileOpenState">
|
||||
<Icon
|
||||
class="menu"
|
||||
size="24"
|
||||
v-show="!store.backgroundShow"
|
||||
@click="store.mobileOpenState = !store.mobileOpenState"
|
||||
>
|
||||
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
|
||||
</Icon>
|
||||
<!-- 页脚 -->
|
||||
@ -178,7 +183,7 @@ onBeforeUnmount(() => {
|
||||
.i-icon {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
@media (min-width: 721px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cover">
|
||||
<div :class="store.backgroundShow ? 'cover show' : 'cover'">
|
||||
<img
|
||||
v-show="store.imgLoadStatus"
|
||||
class="bg"
|
||||
@ -99,6 +99,10 @@ onBeforeUnmount(() => {
|
||||
transition: 0.25s;
|
||||
z-index: -1;
|
||||
|
||||
&.show {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
@ -18,10 +18,12 @@
|
||||
</div>
|
||||
</Transition>
|
||||
<!-- 一言内容 -->
|
||||
<div class="content" @click="updateHitokoto">
|
||||
<span class="text">{{ hitokotoData.text }}</span>
|
||||
<span class="from">-「 {{ hitokotoData.from }} 」</span>
|
||||
</div>
|
||||
<Transition name="el-fade-in-linear" mode="out-in">
|
||||
<div :key="hitokotoData.text" class="content" @click="updateHitokoto">
|
||||
<span class="text">{{ hitokotoData.text }}</span>
|
||||
<span class="from">-「 {{ hitokotoData.from }} 」</span>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -57,13 +59,13 @@ const getHitokotoData = () => {
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
hitokotoData.text = "这里应该显示一句话";
|
||||
hitokotoData.from = "無名";
|
||||
});
|
||||
};
|
||||
|
||||
// 更新一言数据
|
||||
const updateHitokoto = () => {
|
||||
hitokotoData.text = "新的一言正在赶来的路上";
|
||||
hitokotoData.from = "来源加载中";
|
||||
// 防抖
|
||||
debounce(() => {
|
||||
getHitokotoData();
|
||||
|
@ -4,7 +4,7 @@
|
||||
<!-- Logo -->
|
||||
<div class="logo">
|
||||
<img class="logo-img" :src="siteLogo" alt="logo" />
|
||||
<div class="name text-hidden">
|
||||
<div :class="{ name: true, 'text-hidden': true, long: siteUrl[0].length >= 6 }">
|
||||
<span class="bg">{{ siteUrl[0] }}</span>
|
||||
<span class="sm">.{{ siteUrl[1] }}</span>
|
||||
</div>
|
||||
@ -97,9 +97,8 @@ watch(
|
||||
width: 120px;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 142px;
|
||||
margin-left: 12px;
|
||||
width: calc(460px - 120px);
|
||||
padding-left: 22px;
|
||||
transform: translateY(-8px);
|
||||
font-family: "Pacifico-Regular";
|
||||
|
||||
|
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 音乐列表弹窗 -->
|
||||
<Transition name="fade">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div class="music-list" v-show="musicListShow" @click="musicListShow = false">
|
||||
<Transition name="zoom">
|
||||
<div class="list" v-show="musicListShow" @click.stop>
|
||||
@ -281,12 +281,6 @@ watch(
|
||||
}
|
||||
|
||||
// 弹窗动画
|
||||
.fade-enter-active {
|
||||
animation: fade 0.3s ease-in-out;
|
||||
}
|
||||
.fade-leave-active {
|
||||
animation: fade 0.3s ease-in-out reverse;
|
||||
}
|
||||
.zoom-enter-active {
|
||||
animation: zoom 0.4s ease-in-out;
|
||||
}
|
||||
|
@ -16,6 +16,7 @@
|
||||
@pause="onPause"
|
||||
@timeupdate="onTimeUp"
|
||||
@onSelectSong="onSelectSong"
|
||||
@error="loadMusicError"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -37,6 +38,8 @@ const playList = ref([]);
|
||||
const playIndex = ref(0);
|
||||
const playListCount = ref(0);
|
||||
|
||||
const skipTimeout = ref(null);
|
||||
|
||||
// 配置项
|
||||
const props = defineProps({
|
||||
// 音频自动播放
|
||||
@ -202,8 +205,39 @@ const changeSong = (type) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 加载音频错误
|
||||
const loadMusicError = () => {
|
||||
let notice = "";
|
||||
if (playList.value.length > 1) {
|
||||
notice = "播放歌曲出现错误,播放器将在 2s 后进行下一首";
|
||||
// 播放下一首
|
||||
skipTimeout.value = setTimeout(() => {
|
||||
changeSong(1);
|
||||
if (!player.value.audio.paused) {
|
||||
onPlay();
|
||||
}
|
||||
}, 2000);
|
||||
} else {
|
||||
notice = "播放歌曲出现错误";
|
||||
}
|
||||
ElMessage({
|
||||
message: notice,
|
||||
grouping: true,
|
||||
icon: h(PlayWrong, {
|
||||
theme: "filled",
|
||||
fill: "#EFEFEF",
|
||||
duration: 2000,
|
||||
}),
|
||||
});
|
||||
console.error("播放歌曲: " + player.value.currentMusic.title + " 出现错误");
|
||||
};
|
||||
|
||||
// 暴露子组件方法
|
||||
defineExpose({ playToggle, changeVolume, changeSong });
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(skipTimeout.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<el-col :span="12">
|
||||
<div class="left">
|
||||
<Hitokoto />
|
||||
<Music />
|
||||
<Music v-if="playerHasId" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@ -41,6 +41,9 @@ const store = mainStore();
|
||||
const currentTime = ref({});
|
||||
const timeInterval = ref(null);
|
||||
|
||||
// 播放器 id
|
||||
const playerHasId = import.meta.env.VITE_SONG_ID;
|
||||
|
||||
// 更新时间
|
||||
const updateTimeData = () => {
|
||||
currentTime.value = getCurrentTime();
|
||||
|
@ -133,7 +133,7 @@ const jumpTo = (url) => {
|
||||
.logo {
|
||||
transform: translateY(-8%);
|
||||
font-family: "Pacifico-Regular";
|
||||
// line-height: 5rem;
|
||||
padding-left: 22px;
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user