Vue refactoring
							
								
								
									
										29
									
								
								.env
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,29 @@
 | 
			
		||||
# 站点名称
 | 
			
		||||
VITE_SITE_NAME = "無名の主页"
 | 
			
		||||
 | 
			
		||||
# 简介文本
 | 
			
		||||
VITE_DESC_HELLO = "Hello World !"
 | 
			
		||||
VITE_DESC_TEXT = "一个建立于 21 世纪的小站,存活于互联网的边缘"
 | 
			
		||||
VITE_DESC_HELLO_OTHER = "Oops !"
 | 
			
		||||
VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关闭 )"
 | 
			
		||||
 | 
			
		||||
# 社交链接
 | 
			
		||||
VITE_SOCIAL_GITHUB = "imsyy"
 | 
			
		||||
VITE_SOCIAL_QQ = "1539250352"
 | 
			
		||||
VITE_SOCIAL_EMAIL = "one@imsyy.top"
 | 
			
		||||
VITE_SOCIAL_TELEGRAM = "bottom_user"
 | 
			
		||||
VITE_SOCIAL_TWITTER = "iimmsyy"
 | 
			
		||||
 | 
			
		||||
# 网站链接
 | 
			
		||||
## 请在 src\components\Links\index.vue 中设置
 | 
			
		||||
 | 
			
		||||
# 天气 Key
 | 
			
		||||
## 请前往高德开放平台注册 Web服务 Key
 | 
			
		||||
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
 | 
			
		||||
 | 
			
		||||
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
 | 
			
		||||
VITE_SONG_SERVER = "netease"
 | 
			
		||||
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
 | 
			
		||||
VITE_SONG_TYPE = "playlist"
 | 
			
		||||
# 播放 ID
 | 
			
		||||
VITE_SONG_ID = "7452421335"
 | 
			
		||||
							
								
								
									
										25
									
								
								.gitignore
									
									
									
									
										vendored
									
									
								
							
							
						
						@ -1 +1,24 @@
 | 
			
		||||
/.vscode/*
 | 
			
		||||
# Logs
 | 
			
		||||
logs
 | 
			
		||||
*.log
 | 
			
		||||
npm-debug.log*
 | 
			
		||||
yarn-debug.log*
 | 
			
		||||
yarn-error.log*
 | 
			
		||||
pnpm-debug.log*
 | 
			
		||||
lerna-debug.log*
 | 
			
		||||
 | 
			
		||||
node_modules
 | 
			
		||||
dist
 | 
			
		||||
dist-ssr
 | 
			
		||||
*.local
 | 
			
		||||
 | 
			
		||||
# Editor directories and files
 | 
			
		||||
.vscode/*
 | 
			
		||||
!.vscode/extensions.json
 | 
			
		||||
.idea
 | 
			
		||||
.DS_Store
 | 
			
		||||
*.suo
 | 
			
		||||
*.ntvs*
 | 
			
		||||
*.njsproj
 | 
			
		||||
*.sln
 | 
			
		||||
*.sw?
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										3
									
								
								.vscode/extensions.json
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,3 @@
 | 
			
		||||
{
 | 
			
		||||
  "recommendations": ["Vue.volar"]
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										52
									
								
								README.md
									
									
									
									
									
								
							
							
						
						@ -39,58 +39,10 @@
 | 
			
		||||
 | 
			
		||||
也可自行更换其他方式
 | 
			
		||||
 | 
			
		||||
<!-- ### 配置
 | 
			
		||||
### 配置
 | 
			
		||||
 | 
			
		||||
本项目采用 `json` 文件来配置站点内容,该配置不受版本更新影响,可将自定义配置写入 `setting.json` 以更改页面内容
 | 
			
		||||
嘿嘿
 | 
			
		||||
 | 
			
		||||
<details>
 | 
			
		||||
<summary>配置说明</summary>
 | 
			
		||||
 | 
			
		||||
```json
 | 
			
		||||
{
 | 
			
		||||
    "title": "网页标题",
 | 
			
		||||
    "description": "网页简短介绍",
 | 
			
		||||
    "keywords": "网页关键词",
 | 
			
		||||
    "author": "网页作者",
 | 
			
		||||
    "logo_img": "Logo图片路径",
 | 
			
		||||
    "logo_text_1": "域名前缀",
 | 
			
		||||
    "logo_text_2": "域名后缀",
 | 
			
		||||
    "des_title": [
 | 
			
		||||
        "Hello World !", //站点介绍标题
 | 
			
		||||
        "一个建立于 21 世纪的小站,存活于互联网的边缘" //站点介绍内容
 | 
			
		||||
    ],
 | 
			
		||||
    "des_title_change": [
 | 
			
		||||
        "Oops !", //站点介绍标题点击后文字
 | 
			
		||||
        "哎呀,这都被你发现了 ( 再点击一次可关闭 )" //站点介绍内容点击后文字
 | 
			
		||||
    ],
 | 
			
		||||
    "github": "imsyy", //Github 用户名
 | 
			
		||||
    "qq": "1539250352", //QQ
 | 
			
		||||
    "email": "one@imsyy.top", //Email电子邮件
 | 
			
		||||
    "telegram": "bottom_user", //Telegram 用户名
 | 
			
		||||
    "twitter": "iimmsyy", //Twitter用户名
 | 
			
		||||
    "weather_api": "https://www.yiketianqi.com", //天气 API
 | 
			
		||||
    "link_1": [
 | 
			
		||||
        "https://blog.imsyy.top/", //链接地址
 | 
			
		||||
        "fa-solid fa-blog", //图标类名
 | 
			
		||||
        "博客" //链接文字
 | 
			
		||||
    ],
 | 
			
		||||
    "link_2": [
 | 
			
		||||
        "https://drive.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-cloud",
 | 
			
		||||
        "网盘"
 | 
			
		||||
    ],
 | 
			
		||||
    "wallpaper_api": [
 | 
			
		||||
        [
 | 
			
		||||
            "每日一图", //壁纸设置项名称
 | 
			
		||||
            "https://api.dujin.org/bing/1920.php" //壁纸图片链接
 | 
			
		||||
        ]
 | 
			
		||||
    ],
 | 
			
		||||
    "Copyright_year": "2020", //站点起始年份
 | 
			
		||||
    "Copyright_text": "無名" //版权
 | 
			
		||||
}
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
</details> -->
 | 
			
		||||
 | 
			
		||||
### 音乐
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,89 +0,0 @@
 | 
			
		||||
/*模糊渐入动画*/
 | 
			
		||||
@keyframes fade-in {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
        backdrop-filter: blur(0px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
        backdrop-filter: blur(10px);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-webkit-keyframes fade-in {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
        backdrop-filter: blur(0px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
        backdrop-filter: blur(10px);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-moz-keyframes fade-in {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
        backdrop-filter: blur(0px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
        backdrop-filter: blur(10px);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-o-keyframes fade-in {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
        backdrop-filter: blur(0px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
        backdrop-filter: blur(10px);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*渐入动画*/
 | 
			
		||||
@keyframes fade {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-webkit-keyframes fade {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-moz-keyframes fade {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-o-keyframes fade {
 | 
			
		||||
    0% {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    100% {
 | 
			
		||||
        opacity: 1;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										229
									
								
								css/lantern.css
									
									
									
									
									
								
							
							
						
						@ -1,229 +0,0 @@
 | 
			
		||||
@charset "UTF-8";
 | 
			
		||||
 | 
			
		||||
.lantern__warpper {
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    top: 12px;
 | 
			
		||||
    left: 40px;
 | 
			
		||||
    pointer-events: none;
 | 
			
		||||
    -webkit-user-select: none;
 | 
			
		||||
    -moz-user-select: none;
 | 
			
		||||
    -ms-user-select: none;
 | 
			
		||||
    user-select: none;
 | 
			
		||||
    z-index: 999
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__warpper.lantern__secondary {
 | 
			
		||||
    left: calc(100% - 130px)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__warpper.lantern__secondary .lantern__box {
 | 
			
		||||
    -webkit-animation-duration: 3s;
 | 
			
		||||
    animation-duration: 3s
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__box {
 | 
			
		||||
    position: relative;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 90px;
 | 
			
		||||
    height: 70px;
 | 
			
		||||
    background: rgba(216, 0, 15, .8);
 | 
			
		||||
    border-radius: 50% 50%;
 | 
			
		||||
    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
 | 
			
		||||
    -webkit-transform-origin: 50% -70px;
 | 
			
		||||
    -ms-transform-origin: 50% -70px;
 | 
			
		||||
    transform-origin: 50% -70px;
 | 
			
		||||
    -webkit-box-shadow: -5px 5px 50px 4px #fa6c00;
 | 
			
		||||
    box-shadow: -5px 5px 50px 4px #fa6c00
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__box:after,
 | 
			
		||||
.lantern__box:before {
 | 
			
		||||
    content: "";
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    height: 8px;
 | 
			
		||||
    width: 45px;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    border: 1px solid #dc8f03;
 | 
			
		||||
    background: -webkit-gradient(linear, left top, right top, from(#dc8f03), color-stop(orange), color-stop(#dc8f03), color-stop(orange), to(#dc8f03));
 | 
			
		||||
    background: -o-linear-gradient(left, #dc8f03, orange, #dc8f03, orange, #dc8f03);
 | 
			
		||||
    background: linear-gradient(90deg, #dc8f03, orange, #dc8f03, orange, #dc8f03)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__box:before {
 | 
			
		||||
    top: 0;
 | 
			
		||||
    border-radius: 5px 5px 0 0;
 | 
			
		||||
    -webkit-transform: translate(-50%, -50%);
 | 
			
		||||
    -ms-transform: translate(-50%, -50%);
 | 
			
		||||
    transform: translate(-50%, -50%)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__box:after {
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    border-radius: 0 0 5px 5px;
 | 
			
		||||
    -webkit-transform: translate(-50%, 50%);
 | 
			
		||||
    -ms-transform: translate(-50%, 50%);
 | 
			
		||||
    transform: translate(-50%, 50%)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__line {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    width: 2px;
 | 
			
		||||
    height: 12px;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    -webkit-transform: translate(-50%, -100%);
 | 
			
		||||
    -ms-transform: translate(-50%, -100%);
 | 
			
		||||
    transform: translate(-50%, -100%);
 | 
			
		||||
    background: #dc8f03
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__circle {
 | 
			
		||||
    width: 80%;
 | 
			
		||||
    -webkit-box-sizing: border-box;
 | 
			
		||||
    box-sizing: border-box
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__circle,
 | 
			
		||||
.lantern__circle .lantern__ellipse {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    border-radius: 50%;
 | 
			
		||||
    border: 2px solid #dc8f03
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__circle .lantern__ellipse {
 | 
			
		||||
    width: 50%
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__circle .lantern__text {
 | 
			
		||||
    font-family: 华文行楷, Microsoft YaHei, sans-serif;
 | 
			
		||||
    font-size: 24.3px;
 | 
			
		||||
    color: #dc8f03;
 | 
			
		||||
    font-weight: 700;
 | 
			
		||||
    line-height: 66px;
 | 
			
		||||
    text-align: center
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__tail {
 | 
			
		||||
    position: relative;
 | 
			
		||||
    width: 4px;
 | 
			
		||||
    height: 12px;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
 | 
			
		||||
    background: orange;
 | 
			
		||||
    border-radius: 0 0 5px 5px
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__tail .lantern__junction {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    width: 8px;
 | 
			
		||||
    height: 8px;
 | 
			
		||||
    -webkit-transform: translate(-50%, 8.4px);
 | 
			
		||||
    -ms-transform: translate(-50%, 8.4px);
 | 
			
		||||
    transform: translate(-50%, 8.4px);
 | 
			
		||||
    background: #e69603;
 | 
			
		||||
    border-radius: 50%
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lantern__tail .lantern__rect {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    -webkit-transform: translate(-50%, 10.8px);
 | 
			
		||||
    -ms-transform: translate(-50%, 10.8px);
 | 
			
		||||
    transform: translate(-50%, 10.8px);
 | 
			
		||||
    width: 8px;
 | 
			
		||||
    height: 24px;
 | 
			
		||||
    background: orange;
 | 
			
		||||
    border-radius: 5px 5px 0 5px
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@-webkit-keyframes lantern-swing {
 | 
			
		||||
    0% {
 | 
			
		||||
        -webkit-transform: rotate(-8deg);
 | 
			
		||||
        transform: rotate(-8deg)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    to {
 | 
			
		||||
        -webkit-transform: rotate(8deg);
 | 
			
		||||
        transform: rotate(8deg)
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@keyframes lantern-swing {
 | 
			
		||||
    0% {
 | 
			
		||||
        -webkit-transform: rotate(-8deg);
 | 
			
		||||
        transform: rotate(-8deg)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    to {
 | 
			
		||||
        -webkit-transform: rotate(8deg);
 | 
			
		||||
        transform: rotate(8deg)
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (max-width:460px) {
 | 
			
		||||
    .lantern__warpper {
 | 
			
		||||
        top: 8px;
 | 
			
		||||
        left: 30px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__warpper.lantern__secondary {
 | 
			
		||||
        left: calc(100% - 80px)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__box {
 | 
			
		||||
        width: 50px;
 | 
			
		||||
        height: 40px;
 | 
			
		||||
        -webkit-transform-origin: 50% -40px;
 | 
			
		||||
        -ms-transform-origin: 50% -40px;
 | 
			
		||||
        transform-origin: 50% -40px;
 | 
			
		||||
        -webkit-box-shadow: -5px 5px 50px -1px #fa6c00;
 | 
			
		||||
        box-shadow: -5px 5px 50px -1px #fa6c00
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__box:after,
 | 
			
		||||
    .lantern__box:before {
 | 
			
		||||
        height: 4px;
 | 
			
		||||
        width: 25px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__line {
 | 
			
		||||
        width: 2px;
 | 
			
		||||
        height: 8px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__circle .lantern__text {
 | 
			
		||||
        font-size: 13.5px;
 | 
			
		||||
        line-height: 38px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__tail {
 | 
			
		||||
        width: 4px;
 | 
			
		||||
        height: 8px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__tail .lantern__junction {
 | 
			
		||||
        width: 8px;
 | 
			
		||||
        height: 8px;
 | 
			
		||||
        -webkit-transform: translate(-50%, 5.6px);
 | 
			
		||||
        -ms-transform: translate(-50%, 5.6px);
 | 
			
		||||
        transform: translate(-50%, 5.6px)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .lantern__tail .lantern__rect {
 | 
			
		||||
        -webkit-transform: translate(-50%, 7.2px);
 | 
			
		||||
        -ms-transform: translate(-50%, 7.2px);
 | 
			
		||||
        transform: translate(-50%, 7.2px);
 | 
			
		||||
        width: 8px;
 | 
			
		||||
        height: 16px
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (max-width:720px) {
 | 
			
		||||
    .lantern__warpper {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										392
									
								
								css/mobile.css
									
									
									
									
									
								
							
							
						
						@ -1,392 +0,0 @@
 | 
			
		||||
@charset "utf-8";
 | 
			
		||||
 | 
			
		||||
/*小于1400px时*/
 | 
			
		||||
@media (max-width: 1400px) {}
 | 
			
		||||
 | 
			
		||||
/*小于1200px时*/
 | 
			
		||||
@media (max-width: 1200px) {
 | 
			
		||||
 | 
			
		||||
    /*总布局*/
 | 
			
		||||
    .container,
 | 
			
		||||
    .container-lg,
 | 
			
		||||
    .container-md,
 | 
			
		||||
    .container-sm {
 | 
			
		||||
        max-width: 1000px !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .weekday {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*音乐播放器*/
 | 
			
		||||
    .music-text {
 | 
			
		||||
        max-width: 170px !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于992px时*/
 | 
			
		||||
@media (max-width: 992px) {
 | 
			
		||||
 | 
			
		||||
    /*总布局*/
 | 
			
		||||
    .container,
 | 
			
		||||
    .container-lg,
 | 
			
		||||
    .container-md,
 | 
			
		||||
    .container-sm {
 | 
			
		||||
        max-width: 900px !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .col.left {
 | 
			
		||||
        margin-right: 0.75rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .col.right {
 | 
			
		||||
        margin-left: 0.75rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*一言*/
 | 
			
		||||
    .col.hitokotos {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*时间卡片*/
 | 
			
		||||
    .col.times {
 | 
			
		||||
        margin-left: 0rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*日期显示*/
 | 
			
		||||
    .weekday {
 | 
			
		||||
        display: inline;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*标题文字*/
 | 
			
		||||
    .main-img img {
 | 
			
		||||
        width: 110px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.img-title {
 | 
			
		||||
        font-size: 4.75rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.img-text {
 | 
			
		||||
        font-size: 1.75rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*链接卡片文字*/
 | 
			
		||||
    span.link-name {
 | 
			
		||||
        display: none !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .link-card i {
 | 
			
		||||
        margin-left: 10px !important;
 | 
			
		||||
        margin-right: 10px !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于840px时*/
 | 
			
		||||
@media (max-width: 840px) {
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    /*社交链接*/
 | 
			
		||||
    .social {
 | 
			
		||||
        max-width: 100%;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #link-text {
 | 
			
		||||
        display: none !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .link i {
 | 
			
		||||
        margin: 0px 20px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于789px时*/
 | 
			
		||||
@media (max-width: 789px) {
 | 
			
		||||
 | 
			
		||||
    /*标题文字*/
 | 
			
		||||
    span.img-text {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于768px时*/
 | 
			
		||||
@media (max-width: 768px) {
 | 
			
		||||
 | 
			
		||||
    /*标题文字*/
 | 
			
		||||
    .main-img img {
 | 
			
		||||
        width: 100px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.img-title {
 | 
			
		||||
        font-size: 4.5rem;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于720px时*/
 | 
			
		||||
@media (max-width: 720px) {
 | 
			
		||||
 | 
			
		||||
    /*左侧栏高度*/
 | 
			
		||||
    .main-left {
 | 
			
		||||
        transform: translateY(20px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*左侧栏边距*/
 | 
			
		||||
    .col.left {
 | 
			
		||||
        margin-right: 0rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*右侧栏隐藏*/
 | 
			
		||||
    .col.right {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*右侧栏边距*/
 | 
			
		||||
    .col.right {
 | 
			
		||||
        margin-left: 0rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*标题文字*/
 | 
			
		||||
    span.img-text {
 | 
			
		||||
        display: inline;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*简介*/
 | 
			
		||||
    .message {
 | 
			
		||||
        max-width: 100%;
 | 
			
		||||
        pointer-events: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*
 | 
			
		||||
    .des {
 | 
			
		||||
        justify-content: space-between;
 | 
			
		||||
    }
 | 
			
		||||
    */
 | 
			
		||||
 | 
			
		||||
    /*链接卡片*/
 | 
			
		||||
    .link-card {
 | 
			
		||||
        height: 80px !important;
 | 
			
		||||
        align-items: center !important;
 | 
			
		||||
        flex-direction: column !important;
 | 
			
		||||
        justify-content: center !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .link-card i {
 | 
			
		||||
        font-size: 1.25rem;
 | 
			
		||||
        margin: 4px 0px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    i.iconfont.icon-a-daohangzhiyindingwei-05,
 | 
			
		||||
    i.iconfont.icon-z_shangpinheji {
 | 
			
		||||
        font-size: 1.65rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.link-name {
 | 
			
		||||
        display: block !important;
 | 
			
		||||
        font-size: 0.85rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .link-card:hover span.link-name {
 | 
			
		||||
        font-size: 0.95rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.line-text,
 | 
			
		||||
    i.iconfont.icon-link {
 | 
			
		||||
        font-size: 1.05rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*菜单栏按钮*/
 | 
			
		||||
    .menu {
 | 
			
		||||
        display: flex;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
        position: fixed;
 | 
			
		||||
        top: 84%;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .munu-button {
 | 
			
		||||
        padding: 5px 20px;
 | 
			
		||||
        background: rgb(0 0 0 / 20%);
 | 
			
		||||
        backdrop-filter: blur(10px);
 | 
			
		||||
        border-radius: 6px;
 | 
			
		||||
        font-size: 1.25rem;
 | 
			
		||||
        transition: 0.5s;
 | 
			
		||||
        width: 60px;
 | 
			
		||||
        display: flex;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
        height: 40px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*页脚文字*/
 | 
			
		||||
    footer {
 | 
			
		||||
        font-size: 0.85rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*一言*/
 | 
			
		||||
    .col.hitokotos {
 | 
			
		||||
        margin-right: 0rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .hitokoto-text,
 | 
			
		||||
    .hitokoto-from {
 | 
			
		||||
        font-size: 1.05rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*音乐播放器*/
 | 
			
		||||
    .music-text {
 | 
			
		||||
        max-width: 100% !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #music-name {
 | 
			
		||||
        font-size: 1.05rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #music-open {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /*隐藏鼠标样式*/
 | 
			
		||||
    #cursor {
 | 
			
		||||
        background: transparent !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于512px时*/
 | 
			
		||||
@media (max-width: 512px) {
 | 
			
		||||
    #made {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*小于390px时*/
 | 
			
		||||
@media (max-width: 390px) {
 | 
			
		||||
    .main-img img {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #beian {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 大于568px时 */
 | 
			
		||||
@media (min-width: 568px) {
 | 
			
		||||
    .iziToast {
 | 
			
		||||
        border-radius: 30px !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/* 大于720px时 */
 | 
			
		||||
@media (min-width: 720px) {
 | 
			
		||||
    .menu {
 | 
			
		||||
        display: none !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 大于992px时 */
 | 
			
		||||
@media (min-width: 992px) {
 | 
			
		||||
 | 
			
		||||
    /*时钟显示*/
 | 
			
		||||
    span#win_text,
 | 
			
		||||
    span#win_speed {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 大于1400px时 */
 | 
			
		||||
@media (min-width: 1400px) {
 | 
			
		||||
 | 
			
		||||
    /*时钟显示*/
 | 
			
		||||
    span#win_text,
 | 
			
		||||
    span#win_speed {
 | 
			
		||||
        display: inline !important;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
菜单按钮
 | 
			
		||||
*/
 | 
			
		||||
.menus .col.left {
 | 
			
		||||
    display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.menus .col.right {
 | 
			
		||||
    display: block !important;
 | 
			
		||||
    transition: 0.5s;
 | 
			
		||||
    padding: 0rem 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*功能区调整*/
 | 
			
		||||
.menus .col.hitokotos {
 | 
			
		||||
    display: block;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.menus .col.times {
 | 
			
		||||
    display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*边界布局*/
 | 
			
		||||
.menus .row {
 | 
			
		||||
    --bs-gutter-x: 0rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.menus .col.\32 {
 | 
			
		||||
    margin: 0 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.menus .logo {
 | 
			
		||||
    display: inline !important;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    top: 8%;
 | 
			
		||||
    font-size: 1.75rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*第二屏logo*/
 | 
			
		||||
.logo-text {
 | 
			
		||||
    font-family: 'Pacifico-Regular' !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*切换动画*/
 | 
			
		||||
/*
 | 
			
		||||
.hitokoto,
 | 
			
		||||
.time,
 | 
			
		||||
.link-card,
 | 
			
		||||
.message {
 | 
			
		||||
    animation: fade-in;
 | 
			
		||||
    -webkit-animation: fade-in 0.5s;
 | 
			
		||||
    -moz-animation: fade-in 0.5s;
 | 
			
		||||
    -o-animation: fade-in 0.5s;
 | 
			
		||||
    -ms-animation: fade-in 0.5s;
 | 
			
		||||
}
 | 
			
		||||
*/
 | 
			
		||||
.logo,
 | 
			
		||||
.line,
 | 
			
		||||
.main-img,
 | 
			
		||||
.social,
 | 
			
		||||
.close,
 | 
			
		||||
.hitokoto,
 | 
			
		||||
.time,
 | 
			
		||||
.link-card,
 | 
			
		||||
.message,
 | 
			
		||||
#link-text {
 | 
			
		||||
    animation: fade 0.5;
 | 
			
		||||
    -webkit-animation: fade 0.5s;
 | 
			
		||||
    -moz-animation: fade 0.5s;
 | 
			
		||||
    -o-animation: fade 0.5s;
 | 
			
		||||
    -ms-animation: fade 0.5s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
移动端功能区切换
 | 
			
		||||
*/
 | 
			
		||||
.mobile .col.hitokotos {
 | 
			
		||||
    display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.mobile .col.times {
 | 
			
		||||
    display: block;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										1040
									
								
								css/style.css
									
									
									
									
									
								
							
							
						
						
							
								
								
									
										
											BIN
										
									
								
								favicon.ico
									
									
									
									
									
								
							
							
						
						| 
		 Before Width: | Height: | Size: 4.2 KiB  | 
| 
		 Before Width: | Height: | Size: 127 KiB  | 
							
								
								
									
										543
									
								
								index.html
									
									
									
									
									
								
							
							
						
						@ -2,513 +2,48 @@
 | 
			
		||||
<html lang="zh-CN">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
    <!-- 基础信息 -->
 | 
			
		||||
    <meta charset="utf-8">
 | 
			
		||||
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
 | 
			
		||||
    <!-- 强制 HTTPS,若不需要可删除,但可能出现问题 -->
 | 
			
		||||
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
 | 
			
		||||
    <meta name="renderer" content="webkit" />
 | 
			
		||||
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 | 
			
		||||
    <meta name="force-rendering" content="webkit" />
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
    <meta name="theme-color" content="#424242" />
 | 
			
		||||
    <meta name="description" content="一个默默无闻的主页">
 | 
			
		||||
    <meta name="keywords" content="無名,个人主页">
 | 
			
		||||
    <meta name="author" content="無名">
 | 
			
		||||
    <title>無名の主页</title>
 | 
			
		||||
    <!-- jQuery -->
 | 
			
		||||
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
 | 
			
		||||
    <!-- HarmonyOS Sans -->
 | 
			
		||||
    <!-- 本站 CDN 已开启防盗链,非本站域名不可访问,请更改链接为下方内容,否则自定义字体将失效 -->
 | 
			
		||||
    <!-- 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" />
 | 
			
		||||
    <!-- 引入样式 -->
 | 
			
		||||
    <link rel="stylesheet" type="text/css"
 | 
			
		||||
        href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/style.css">
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/mobile.css">
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/loading.css">
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/animation.css">
 | 
			
		||||
    <link rel="icon" href="./favicon.ico">
 | 
			
		||||
    <link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
 | 
			
		||||
    <!-- Izitoast -->
 | 
			
		||||
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/css/iziToast.min.css">
 | 
			
		||||
    <script type="text/javascript"
 | 
			
		||||
        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
 | 
			
		||||
    </script>
 | 
			
		||||
    <!-- FontAwesome -->
 | 
			
		||||
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css">
 | 
			
		||||
    <!-- Aplayer -->
 | 
			
		||||
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
 | 
			
		||||
        crossorigin="anonymous" referrerpolicy="no-referrer" />
 | 
			
		||||
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
 | 
			
		||||
        referrerpolicy="no-referrer"></script>
 | 
			
		||||
    <!-- <script src="./js/Meting.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
 | 
			
		||||
    <!-- IE Out -->
 | 
			
		||||
    <script>
 | 
			
		||||
        if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href =
 | 
			
		||||
            "/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
 | 
			
		||||
    </script>
 | 
			
		||||
    <!-- PWA -->
 | 
			
		||||
    <link rel="manifest" href="/manifest.json">
 | 
			
		||||
    <!-- 51.LA 统计 -->
 | 
			
		||||
    <script src="./js/51LA.js"></script>
 | 
			
		||||
  <meta charset="UTF-8" />
 | 
			
		||||
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
 | 
			
		||||
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 | 
			
		||||
  <meta name="description" content="一个默默无闻的主页">
 | 
			
		||||
  <meta name="keywords" content="無名,个人主页">
 | 
			
		||||
  <meta name="author" content="無名">
 | 
			
		||||
  <title><%- title %></title>
 | 
			
		||||
  <link rel="icon" href="/images/icon/favicon.ico">
 | 
			
		||||
  <link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
 | 
			
		||||
  <link rel="stylesheet" href="/loading/loading.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="loading-box">
 | 
			
		||||
        <div class="loading-left-bg"></div>
 | 
			
		||||
        <div class="loading-right-bg"></div>
 | 
			
		||||
        <div class="spinner-box">
 | 
			
		||||
            <div class="loader">
 | 
			
		||||
                <div class="inner one"></div>
 | 
			
		||||
                <div class="inner two"></div>
 | 
			
		||||
                <div class="inner three"></div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="loading-word">
 | 
			
		||||
                <p class="loading-title" id="loading-title">無名の主页</p>
 | 
			
		||||
                <span id="loading-text">加载中</span>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
<body class="loading">
 | 
			
		||||
  <!--加载动画-->
 | 
			
		||||
  <div id="loading-box">
 | 
			
		||||
    <div class="loading-left-bg"></div>
 | 
			
		||||
    <div class="loading-right-bg"></div>
 | 
			
		||||
    <div class="spinner-box">
 | 
			
		||||
      <div class="loader">
 | 
			
		||||
        <div class="inner one"></div>
 | 
			
		||||
        <div class="inner two"></div>
 | 
			
		||||
        <div class="inner three"></div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="loading-word">
 | 
			
		||||
        <p class="loading-title" id="loading-title"><%- title %></p>
 | 
			
		||||
        <span id="loading-text">加载中</span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <section id="section" class="section">
 | 
			
		||||
        <!-- 背景图片 -->
 | 
			
		||||
        <div class="bg-all">
 | 
			
		||||
            <img id="bg" onerror="this.classList.add('error');"></img>
 | 
			
		||||
            <div class="cover"></div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <!-- 鼠标指针 -->
 | 
			
		||||
        <div id="g-pointer-1"></div>
 | 
			
		||||
        <div id="g-pointer-2"></div>
 | 
			
		||||
        <!-- 主体内容 -->
 | 
			
		||||
        <main id="main" class="main">
 | 
			
		||||
            <div class="container" id="container">
 | 
			
		||||
                <div class="row" id="row">
 | 
			
		||||
                    <div class="col left">
 | 
			
		||||
                        <!--基本信息-->
 | 
			
		||||
                        <div class="main-left">
 | 
			
		||||
                            <!--Logo-->
 | 
			
		||||
                            <div class="main-img">
 | 
			
		||||
                                <img id="logo-img" src="./img/icon/logo.png" alt="img">
 | 
			
		||||
                                <div class="img-title">
 | 
			
		||||
                                    <span class="img-title-big" id="logo-text-1">imsyy</span>
 | 
			
		||||
                                    <span class="img-text" id="logo-text-2">.top</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <!--介绍信息-->
 | 
			
		||||
                            <div class="message cards" id="switchmore">
 | 
			
		||||
                                <div class="des" id="des">
 | 
			
		||||
                                    <i class="fa-solid fa-quote-left"></i>
 | 
			
		||||
                                    <div class="des-title"><span id="change">Hello World !</span><br /><span
 | 
			
		||||
                                            id="change1">一个建立于 21 世纪的小站,存活于互联网的边缘</span></div>
 | 
			
		||||
                                    <i class="fa-solid fa-quote-right"></i>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <!--社交链接-->
 | 
			
		||||
                            <div class="social" id="social">
 | 
			
		||||
                                <a href="https://github.com/imsyy" class="link" id="github" style="margin-left: 4px"
 | 
			
		||||
                                    target="_blank">
 | 
			
		||||
                                    <i class="fa-brands fa-github"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <a href="https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes" class="link"
 | 
			
		||||
                                    id="qq" target="_blank">
 | 
			
		||||
                                    <i class="fa-brands fa-qq"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <a href="mailto:one@imsyy.top" class="link" id="email">
 | 
			
		||||
                                    <i class="fa-solid fa-envelope"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <a href="https://space.bilibili.com/98544142" class="link" id="bilibili"
 | 
			
		||||
                                    target="_blank">
 | 
			
		||||
                                    <i class="fa-brands fa-bilibili"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <a href="https://t.me/bottom_user" class="link" id="telegram" target="_blank">
 | 
			
		||||
                                    <i class="fa-brands fa-telegram"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <a id="link-text">通过这里联系我</a>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <!--第二屏 Logo-->
 | 
			
		||||
                    <div class="logo cards" style="display: none" id="changemore">
 | 
			
		||||
                        <a class="logo-text" id="logo-text-small">imsyy.top</a>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="col right">
 | 
			
		||||
                        <div class="main-right">
 | 
			
		||||
                            <!--功能区-->
 | 
			
		||||
                            <div class="row rightone" id="rightone">
 | 
			
		||||
                                <div class="col hitokotos">
 | 
			
		||||
                                    <!--一言-->
 | 
			
		||||
                                    <div class="hitokoto cards" id="hitokoto">
 | 
			
		||||
                                        <!--切换音乐-->
 | 
			
		||||
                                        <div class="open-music fixed-top" id="open-music">
 | 
			
		||||
                                            <i class="fa-solid fa-compact-disc"></i>
 | 
			
		||||
                                            <span> 打开音乐播放器</span>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                        <!--切换音乐结束-->
 | 
			
		||||
                                        <div class="hitokoto-all">
 | 
			
		||||
                                            <div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                            <div class="hitokoto-from">-「 <span id="from_text">無名</span> 」
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <!--音乐-->
 | 
			
		||||
                                    <div class="music" id="music">
 | 
			
		||||
                                        <div class="music-all">
 | 
			
		||||
                                            <div class="music-button">
 | 
			
		||||
                                                <div id="music-open">音乐列表</div>
 | 
			
		||||
                                                <div id="music-close">回到一言</div>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                            <div class="music-control">
 | 
			
		||||
                                                <i class="fa-solid fa-backward-step" id="last"></i>
 | 
			
		||||
                                                <div id="play">
 | 
			
		||||
                                                    <i class="fa-solid fa-play"></i>
 | 
			
		||||
                                                </div>
 | 
			
		||||
                                                <i class="fa-solid fa-forward-step" id="next"></i>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                            <div class="music-menu">
 | 
			
		||||
                                                <div class="music-text">
 | 
			
		||||
                                                    <span id="music-name">未播放音乐</span>
 | 
			
		||||
                                                </div>
 | 
			
		||||
                                                <div class="music-volume" style="display: none;">
 | 
			
		||||
                                                    <div id="volume-ico">
 | 
			
		||||
                                                        <i class="fa-solid fa-volume-low"></i>
 | 
			
		||||
                                                    </div>
 | 
			
		||||
                                                    <input type="range" min="0" max="1" step="0.01" id="volume">
 | 
			
		||||
                                                </div>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                                <div class="col times">
 | 
			
		||||
                                    <!--时间-->
 | 
			
		||||
                                    <div class="time cards" id="upWeather">
 | 
			
		||||
                                        <div class="timeshow" id="time">
 | 
			
		||||
                                            2000 年 0 月 00 日 <span
 | 
			
		||||
                                                class="weekday">星期一</span><br><span class="time-text">00:00:00</span>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                        <div class="weather">
 | 
			
		||||
                                            <span id="city_text">天气</span> 
 | 
			
		||||
                                            <span id="wea_text">加载失败</span> 
 | 
			
		||||
                                            <span id="tem_text"></span>
 | 
			
		||||
                                            <span id="win_text">次数</span>
 | 
			
		||||
                                            <span id="win_speed">超限</span>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <!--分隔线-->
 | 
			
		||||
                            <div class="line">
 | 
			
		||||
                                <i class="fa-solid fa-link"></i>
 | 
			
		||||
                                <span class="line-text">网站列表</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <!--网站链接-->
 | 
			
		||||
                            <div class="link">
 | 
			
		||||
                                <!--第一组-->
 | 
			
		||||
                                <div class="row">
 | 
			
		||||
                                    <div class="col">
 | 
			
		||||
                                        <a id="link-url-1" href="https://blog.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-1" class="fa-solid fa-blog"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-1">博客</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <div class="col 2">
 | 
			
		||||
                                        <a id="link-url-2" href="https://pan.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-2" class="fa-solid fa-cloud"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-2">网盘</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <div class="col">
 | 
			
		||||
                                        <a id="link-url-3" href="https://music.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-3" class="fa-solid fa-music"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-3">音乐</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                                <!--第二组-->
 | 
			
		||||
                                <div class="row" style="margin-top: 1.5rem;">
 | 
			
		||||
                                    <div class="col">
 | 
			
		||||
                                        <a id="link-url-4" href="https://nav.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-4" class="fa-solid fa-compass"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-4">起始页</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <div class="col 2">
 | 
			
		||||
                                        <a id="link-url-5" href="https://web.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-5" class="fa-solid fa-book-bookmark"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-5">网址集</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <div class="col">
 | 
			
		||||
                                        <a id="link-url-6" href="https://lab.imsyy.top/" target="_blank">
 | 
			
		||||
                                            <div class="link-card cards">
 | 
			
		||||
                                                <i id="link-icon-6" class="fa-solid fa-flask"></i>
 | 
			
		||||
                                                <span class="link-name" id="link-name-6">实验室</span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <!--展开菜单按钮-->
 | 
			
		||||
                <div class="menu" id="switchmenu">
 | 
			
		||||
                    <a class="munu-button cards" id="menu">
 | 
			
		||||
                        <i class="fa-solid fa-bars"></i>
 | 
			
		||||
                    </a>
 | 
			
		||||
                </div>
 | 
			
		||||
                <!--更多内容-->
 | 
			
		||||
                <div class="more" id="more">
 | 
			
		||||
                    <!--关闭按钮-->
 | 
			
		||||
                    <div class="close fixed-top" id="close">
 | 
			
		||||
                        <i class="fa-solid fa-circle-xmark"></i>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="line" style="margin-top: 1rem;">
 | 
			
		||||
                        <i class="fa-solid fa-angle-left"></i>
 | 
			
		||||
                        <span class="line-text">时间胶囊</span>
 | 
			
		||||
                        <i class="fa-solid fa-angle-right"></i>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="date" id="date">
 | 
			
		||||
                        <div class="item" id="dayProgress">
 | 
			
		||||
                            <div class="date-text" style="margin-top: 0rem;">今日已经度过了 <span></span> 小时</div>
 | 
			
		||||
                            <div class="progress">
 | 
			
		||||
                                <div class="progress-bar"></div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="item" id="weekProgress">
 | 
			
		||||
                            <div class="date-text">本周已经度过了 <span></span> 天</div>
 | 
			
		||||
                            <div class="progress">
 | 
			
		||||
                                <div class="progress-bar"></div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="item" id="monthProgress">
 | 
			
		||||
                            <div class="date-text">本月已经度过了 <span></span> 天</div>
 | 
			
		||||
                            <div class="progress">
 | 
			
		||||
                                <div class="progress-bar"></div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="item" id="yearProgress">
 | 
			
		||||
                            <div class="date-text">今年已经度过了 <span></span> 个月</div>
 | 
			
		||||
                            <div class="progress">
 | 
			
		||||
                                <div class="progress-bar"></div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="line">
 | 
			
		||||
                        <i class="fa-solid fa-angle-left"></i>
 | 
			
		||||
                        <span class="line-text">杂七杂八</span>
 | 
			
		||||
                        <i class="fa-solid fa-angle-right"></i>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <!--网站链接-->
 | 
			
		||||
                    <div class="row">
 | 
			
		||||
                        <div class="col">
 | 
			
		||||
                            <a href="https://status.imsyy.top/" target="_blank">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">站点监测</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="col 2">
 | 
			
		||||
                            <a href="https://player.imsyy.top/" target="_blank">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">播放器</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="col">
 | 
			
		||||
                            <a href="https://write.imsyy.top/" target="_blank">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">编辑器</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="row" style="margin-top: 1.5rem;">
 | 
			
		||||
                        <div class="col">
 | 
			
		||||
                            <a href="https://photo.imsyy.top/" target="_blank">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">时光相册</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="col 2">
 | 
			
		||||
                            <a href="https://share.imsyy.top/" target="_blank">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">文件库</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="col">
 | 
			
		||||
                            <a id="openmore">
 | 
			
		||||
                                <div class="link-card cards">
 | 
			
		||||
                                    <span class="link-name">更多</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </a>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <!--更多页面-->
 | 
			
		||||
                <div class="box" id="box" style="display: none">
 | 
			
		||||
                    <div class="box-wrapper">
 | 
			
		||||
                        <!--关闭按钮-->
 | 
			
		||||
                        <div class="closebox fixed-top" id="closemore">
 | 
			
		||||
                            <i class="fa-solid fa-circle-xmark"></i>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <!--左侧内容-->
 | 
			
		||||
                        <div class="box-left">
 | 
			
		||||
                            <div class="img-title">
 | 
			
		||||
                                <span class="img-title-big" id="logo-title-other">imsyy</span>
 | 
			
		||||
                                <span class="img-text" id="logo-title-other-small">.top</span><br />
 | 
			
		||||
                                <span class="img-text"> v 3.3</span>
 | 
			
		||||
                                <a href="https://github.com/imsyy/home" target="_blank">
 | 
			
		||||
                                    <i class="fa-brands fa-github"></i>
 | 
			
		||||
                                </a>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <!--更多内容-->
 | 
			
		||||
                            <div class="accordion" id="accordion">
 | 
			
		||||
                                <div class="accordion-item">
 | 
			
		||||
                                    <h2 class="accordion-header" id="headingOne">
 | 
			
		||||
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
 | 
			
		||||
                                            data-bs-target="#collapseOne" aria-expanded="true"
 | 
			
		||||
                                            aria-controls="collapseOne">
 | 
			
		||||
                                            壁纸设置
 | 
			
		||||
                                        </button>
 | 
			
		||||
                                    </h2>
 | 
			
		||||
                                    <div id="collapseOne" class="accordion-collapse collapse show"
 | 
			
		||||
                                        aria-labelledby="headingOne" data-bs-parent="#accordion">
 | 
			
		||||
                                        <div class="accordion-body">
 | 
			
		||||
                                            <div class="set">
 | 
			
		||||
                                                <div class="wallpaper" id="wallpaper">
 | 
			
		||||
                                                    <div class="form-radio">
 | 
			
		||||
                                                        <input type="radio" class="set-wallpaper" style="display: none;"
 | 
			
		||||
                                                            id="radio1" value="1" name="wallpaper-type">
 | 
			
		||||
                                                        <label for="radio1">默认壁纸</label>
 | 
			
		||||
                                                    </div>
 | 
			
		||||
                                                    <div class="form-radio">
 | 
			
		||||
                                                        <input type="radio" class="set-wallpaper" style="display: none;"
 | 
			
		||||
                                                            id="radio2" value="2" name="wallpaper-type">
 | 
			
		||||
                                                        <label for="radio2" id="wallpaper_text1">每日一图</label>
 | 
			
		||||
                                                    </div>
 | 
			
		||||
                                                    <div class="form-radio">
 | 
			
		||||
                                                        <input type="radio" class="set-wallpaper" style="display: none;"
 | 
			
		||||
                                                            id="radio3" value="3" name="wallpaper-type">
 | 
			
		||||
                                                        <label for="radio3" id="wallpaper_text2">随机风景</label>
 | 
			
		||||
                                                    </div>
 | 
			
		||||
                                                    <div class="form-radio">
 | 
			
		||||
                                                        <input type="radio" class="set-wallpaper" style="display: none;"
 | 
			
		||||
                                                            id="radio4" value="4" name="wallpaper-type">
 | 
			
		||||
                                                        <label for="radio4" id="wallpaper_text3">随机动漫</label>
 | 
			
		||||
                                                    </div>
 | 
			
		||||
                                                </div>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                                <!--更新日志-->
 | 
			
		||||
                                <div class="accordion-item">
 | 
			
		||||
                                    <h2 class="accordion-header" id="headingTwo">
 | 
			
		||||
                                        <button class="accordion-button collapsed" type="button"
 | 
			
		||||
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo"
 | 
			
		||||
                                            aria-expanded="false" aria-controls="collapseTwo">
 | 
			
		||||
                                            更新日志
 | 
			
		||||
                                        </button>
 | 
			
		||||
                                    </h2>
 | 
			
		||||
                                    <div id="collapseTwo" class="accordion-collapse collapse"
 | 
			
		||||
                                        aria-labelledby="headingTwo" data-bs-parent="#accordion">
 | 
			
		||||
                                        <div class="accordion-body">
 | 
			
		||||
                                            <div class="upnote">
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-circle-plus"></i> 音乐歌单支持快速自定义
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-circle-plus"></i> 壁纸支持个性化设置
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-circle-plus"></i> 音乐播放器支持音量控制
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-screwdriver-wrench"></i> 修复天气 API
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-screwdriver-wrench"></i> 时光胶囊显示错误
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-screwdriver-wrench"></i> 移动端动画及细节
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-screwdriver-wrench"></i> 图标更换为 Font
 | 
			
		||||
                                                    Awesome</span>
 | 
			
		||||
                                                <span class="uptext">
 | 
			
		||||
                                                    <i class="fa-solid fa-rotate-left"></i>
 | 
			
		||||
                                                    <a href="./old/" style="color:#efefef">返回旧版站点</a>
 | 
			
		||||
                                                </span>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <!--Aplayer-->
 | 
			
		||||
                        <div class="box-right">
 | 
			
		||||
                            <div id="aplayer">
 | 
			
		||||
                                <span>音乐播放器加载失败</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </main>
 | 
			
		||||
        <!-- 版权信息 -->
 | 
			
		||||
        <footer id="footer" class="fixed-bottom footer">
 | 
			
		||||
            <div class="power">
 | 
			
		||||
                <span id="power">Copyright ©
 | 
			
		||||
                    <script>
 | 
			
		||||
                        document.write((new Date()).getFullYear());
 | 
			
		||||
                    </script>
 | 
			
		||||
                    <a href="https://imsyy.top" id="power-text">無名</a>
 | 
			
		||||
                </span>
 | 
			
		||||
                <!-- 以下信息请不要修改哦 -->
 | 
			
		||||
                <span id="made">& Made by <a href="https://github.com/imsyy/home"
 | 
			
		||||
                        target="_blank">imsyy</a></span>
 | 
			
		||||
                <!-- 站点备案 -->
 | 
			
		||||
                <a href="https://beian.miit.gov.cn" id="beian" target="_blank">& 豫ICP备2022018134号-1</a>
 | 
			
		||||
            </div>
 | 
			
		||||
            <!-- 歌词显示 -->
 | 
			
		||||
            <div id="lrc"></div>
 | 
			
		||||
        </footer>
 | 
			
		||||
    </section>
 | 
			
		||||
    <!-- sw.js -->
 | 
			
		||||
    <script>
 | 
			
		||||
        if ("serviceWorker" in navigator) {
 | 
			
		||||
            window.addEventListener("load", function () {
 | 
			
		||||
                navigator.serviceWorker.register("sw.js");
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    </script>
 | 
			
		||||
    <!-- noscript -->
 | 
			
		||||
    <noscript>
 | 
			
		||||
        <div class="noscript fixed-top">请开启 JavaScript</div>
 | 
			
		||||
    </noscript>
 | 
			
		||||
    <!-- JS -->
 | 
			
		||||
    <script type="text/javascript" src="./js/main.js"></script>
 | 
			
		||||
    <script type="text/javascript" src="./js/set.js"></script>
 | 
			
		||||
    <script type="text/javascript" src="./js/time.js"></script>
 | 
			
		||||
    <script type="text/javascript" src="./js/js.cookie.js"></script>
 | 
			
		||||
    <script type="text/javascript"
 | 
			
		||||
        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
 | 
			
		||||
    </script>
 | 
			
		||||
  </div>
 | 
			
		||||
  <!-- 主体内容 -->
 | 
			
		||||
  <div id="app"></div>
 | 
			
		||||
  <!-- noscript -->
 | 
			
		||||
  <noscript>
 | 
			
		||||
    <div style="text-align: center">请开启 JavaScript</div>
 | 
			
		||||
  </noscript>
 | 
			
		||||
  <script type="module" src="/src/main.js"></script>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
!function(t){"use strict";!function(e){var n=window,s=document,i=t,r="".concat("https:"===s.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),c=s.createElement("script"),o=s.getElementsByTagName("script")[0];c.type="text/javascript",c.setAttribute("charset","UTF-8"),c.async=!0,c.src=r,c.id="LA_COLLECT",i.d=c;var a=function(){n.LA.ids.push(i)};n.LA?n.LA.ids&&a():(n.LA=t,n.LA.ids=[],a()),o.parentNode.insertBefore(c,o)}()}({id:"JfXLqaE7jjMvnMIm",ck:"JfXLqaE7jjMvnMIm"}),function(t,e,n,s){var i=e.createElement("script"),r=e.getElementsByTagName("script")[0];i.type="text/javascript",i.crossorigin=!0,i.onload=function(){(new t[s].Monitor).init({id:"JjyTlfI2KkqlOVNL"})},r.parentNode.insertBefore(i,r),i.src=n}(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");
 | 
			
		||||
							
								
								
									
										164
									
								
								js/js.cookie.js
									
									
									
									
									
								
							
							
						
						@ -1,164 +0,0 @@
 | 
			
		||||
/*!
 | 
			
		||||
 * JavaScript Cookie v2.2.1
 | 
			
		||||
 * https://github.com/js-cookie/js-cookie
 | 
			
		||||
 *
 | 
			
		||||
 * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
 | 
			
		||||
 * Released under the MIT license
 | 
			
		||||
 */
 | 
			
		||||
;
 | 
			
		||||
(function (factory) {
 | 
			
		||||
	var registeredInModuleLoader;
 | 
			
		||||
	if (typeof define === 'function' && define.amd) {
 | 
			
		||||
		define(factory);
 | 
			
		||||
		registeredInModuleLoader = true;
 | 
			
		||||
	}
 | 
			
		||||
	if (typeof exports === 'object') {
 | 
			
		||||
		module.exports = factory();
 | 
			
		||||
		registeredInModuleLoader = true;
 | 
			
		||||
	}
 | 
			
		||||
	if (!registeredInModuleLoader) {
 | 
			
		||||
		var OldCookies = window.Cookies;
 | 
			
		||||
		var api = window.Cookies = factory();
 | 
			
		||||
		api.noConflict = function () {
 | 
			
		||||
			window.Cookies = OldCookies;
 | 
			
		||||
			return api;
 | 
			
		||||
		};
 | 
			
		||||
	}
 | 
			
		||||
}(function () {
 | 
			
		||||
	function extend() {
 | 
			
		||||
		var i = 0;
 | 
			
		||||
		var result = {};
 | 
			
		||||
		for (; i < arguments.length; i++) {
 | 
			
		||||
			var attributes = arguments[i];
 | 
			
		||||
			for (var key in attributes) {
 | 
			
		||||
				result[key] = attributes[key];
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		return result;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	function decode(s) {
 | 
			
		||||
		return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	function init(converter) {
 | 
			
		||||
		function api() {}
 | 
			
		||||
 | 
			
		||||
		function set(key, value, attributes) {
 | 
			
		||||
			if (typeof document === 'undefined') {
 | 
			
		||||
				return;
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			attributes = extend({
 | 
			
		||||
				path: '/'
 | 
			
		||||
			}, api.defaults, attributes);
 | 
			
		||||
 | 
			
		||||
			if (typeof attributes.expires === 'number') {
 | 
			
		||||
				attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			// We're using "expires" because "max-age" is not supported by IE
 | 
			
		||||
			attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
 | 
			
		||||
 | 
			
		||||
			try {
 | 
			
		||||
				var result = JSON.stringify(value);
 | 
			
		||||
				if (/^[\{\[]/.test(result)) {
 | 
			
		||||
					value = result;
 | 
			
		||||
				}
 | 
			
		||||
			} catch (e) {}
 | 
			
		||||
 | 
			
		||||
			value = converter.write ?
 | 
			
		||||
				converter.write(value, key) :
 | 
			
		||||
				encodeURIComponent(String(value))
 | 
			
		||||
				.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
 | 
			
		||||
 | 
			
		||||
			key = encodeURIComponent(String(key))
 | 
			
		||||
				.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
 | 
			
		||||
				.replace(/[\(\)]/g, escape);
 | 
			
		||||
 | 
			
		||||
			var stringifiedAttributes = '';
 | 
			
		||||
			for (var attributeName in attributes) {
 | 
			
		||||
				if (!attributes[attributeName]) {
 | 
			
		||||
					continue;
 | 
			
		||||
				}
 | 
			
		||||
				stringifiedAttributes += '; ' + attributeName;
 | 
			
		||||
				if (attributes[attributeName] === true) {
 | 
			
		||||
					continue;
 | 
			
		||||
				}
 | 
			
		||||
 | 
			
		||||
				// Considers RFC 6265 section 5.2:
 | 
			
		||||
				// ...
 | 
			
		||||
				// 3.  If the remaining unparsed-attributes contains a %x3B (";")
 | 
			
		||||
				//     character:
 | 
			
		||||
				// Consume the characters of the unparsed-attributes up to,
 | 
			
		||||
				// not including, the first %x3B (";") character.
 | 
			
		||||
				// ...
 | 
			
		||||
				stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			return (document.cookie = key + '=' + value + stringifiedAttributes);
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		function get(key, json) {
 | 
			
		||||
			if (typeof document === 'undefined') {
 | 
			
		||||
				return;
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			var jar = {};
 | 
			
		||||
			// To prevent the for loop in the first place assign an empty array
 | 
			
		||||
			// in case there are no cookies at all.
 | 
			
		||||
			var cookies = document.cookie ? document.cookie.split('; ') : [];
 | 
			
		||||
			var i = 0;
 | 
			
		||||
 | 
			
		||||
			for (; i < cookies.length; i++) {
 | 
			
		||||
				var parts = cookies[i].split('=');
 | 
			
		||||
				var cookie = parts.slice(1).join('=');
 | 
			
		||||
 | 
			
		||||
				if (!json && cookie.charAt(0) === '"') {
 | 
			
		||||
					cookie = cookie.slice(1, -1);
 | 
			
		||||
				}
 | 
			
		||||
 | 
			
		||||
				try {
 | 
			
		||||
					var name = decode(parts[0]);
 | 
			
		||||
					cookie = (converter.read || converter)(cookie, name) ||
 | 
			
		||||
						decode(cookie);
 | 
			
		||||
 | 
			
		||||
					if (json) {
 | 
			
		||||
						try {
 | 
			
		||||
							cookie = JSON.parse(cookie);
 | 
			
		||||
						} catch (e) {}
 | 
			
		||||
					}
 | 
			
		||||
 | 
			
		||||
					jar[name] = cookie;
 | 
			
		||||
 | 
			
		||||
					if (key === name) {
 | 
			
		||||
						break;
 | 
			
		||||
					}
 | 
			
		||||
				} catch (e) {}
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			return key ? jar[key] : jar;
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		api.set = set;
 | 
			
		||||
		api.get = function (key) {
 | 
			
		||||
			return get(key, false /* read as raw */ );
 | 
			
		||||
		};
 | 
			
		||||
		api.getJSON = function (key) {
 | 
			
		||||
			return get(key, true /* read as json */ );
 | 
			
		||||
		};
 | 
			
		||||
		api.remove = function (key, attributes) {
 | 
			
		||||
			set(key, '', extend(attributes, {
 | 
			
		||||
				expires: -1
 | 
			
		||||
			}));
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
		api.defaults = {};
 | 
			
		||||
 | 
			
		||||
		api.withConverter = init;
 | 
			
		||||
 | 
			
		||||
		return api;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	return init(function () {});
 | 
			
		||||
}));
 | 
			
		||||
@ -1,21 +0,0 @@
 | 
			
		||||
/*!
 | 
			
		||||
 * china-lantern v1.6.0
 | 
			
		||||
 * (c) 2020-2021 fz6m
 | 
			
		||||
 * Released under the MIT License.
 | 
			
		||||
 */
 | 
			
		||||
! function (t) {
 | 
			
		||||
    "function" == typeof define && define.amd ? define(t) : t()
 | 
			
		||||
}((function () {
 | 
			
		||||
    "use strict";
 | 
			
		||||
    ! function (t, e) {
 | 
			
		||||
        void 0 === e && (e = {});
 | 
			
		||||
        let n = e.insertAt;
 | 
			
		||||
        if (t && "undefined" != typeof document) {
 | 
			
		||||
            let r = document.head || document.getElementsByTagName("head")[0],
 | 
			
		||||
                a = document.createElement("style");
 | 
			
		||||
            a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
 | 
			
		||||
        }
 | 
			
		||||
    };
 | 
			
		||||
    let t;
 | 
			
		||||
    (t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
 | 
			
		||||
}));
 | 
			
		||||
							
								
								
									
										422
									
								
								js/main.js
									
									
									
									
									
								
							
							
						
						@ -1,422 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
作者: imsyy
 | 
			
		||||
主页:https://www.imsyy.top/
 | 
			
		||||
GitHub:https://github.com/imsyy/home
 | 
			
		||||
版权所有,请勿删除
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
//弹窗样式
 | 
			
		||||
iziToast.settings({
 | 
			
		||||
    timeout: 10000,
 | 
			
		||||
    progressBar: false,
 | 
			
		||||
    close: false,
 | 
			
		||||
    closeOnEscape: true,
 | 
			
		||||
    position: 'topCenter',
 | 
			
		||||
    transitionIn: 'bounceInDown',
 | 
			
		||||
    transitionOut: 'flipOutX',
 | 
			
		||||
    displayMode: 'replace',
 | 
			
		||||
    layout: '1',
 | 
			
		||||
    backgroundColor: '#00000040',
 | 
			
		||||
    titleColor: '#efefef',
 | 
			
		||||
    messageColor: '#efefef',
 | 
			
		||||
    icon: 'Fontawesome',
 | 
			
		||||
    iconColor: '#efefef',
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
/* 鼠标样式 */
 | 
			
		||||
const body = document.querySelector("body");
 | 
			
		||||
const element = document.getElementById("g-pointer-1");
 | 
			
		||||
const element2 = document.getElementById("g-pointer-2");
 | 
			
		||||
const halfAlementWidth = element.offsetWidth / 2;
 | 
			
		||||
const halfAlementWidth2 = element2.offsetWidth / 2;
 | 
			
		||||
 | 
			
		||||
function setPosition(x, y) {
 | 
			
		||||
    element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
body.addEventListener('mousemove', (e) => {
 | 
			
		||||
    window.requestAnimationFrame(function () {
 | 
			
		||||
        setPosition(e.clientX, e.clientY);
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
//加载完成后执行
 | 
			
		||||
window.addEventListener('load', function () {
 | 
			
		||||
 | 
			
		||||
    //载入动画
 | 
			
		||||
    $('#loading-box').attr('class', 'loaded');
 | 
			
		||||
    $('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
 | 
			
		||||
    $('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
 | 
			
		||||
    $('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important");
 | 
			
		||||
 | 
			
		||||
    //用户欢迎
 | 
			
		||||
    setTimeout(function () {
 | 
			
		||||
        iziToast.show({
 | 
			
		||||
            timeout: 2500,
 | 
			
		||||
            icon: false,
 | 
			
		||||
            title: hello,
 | 
			
		||||
            message: '欢迎来到我的主页'
 | 
			
		||||
        });
 | 
			
		||||
    }, 800);
 | 
			
		||||
 | 
			
		||||
    //延迟加载音乐播放器
 | 
			
		||||
    let element = document.createElement("script");
 | 
			
		||||
    element.src = "./js/music.js";
 | 
			
		||||
    document.body.appendChild(element);
 | 
			
		||||
 | 
			
		||||
    //中文字体缓加载-此处写入字体源文件 (暂时弃用)
 | 
			
		||||
    //先行加载简体中文子集,后续补全字集
 | 
			
		||||
    //由于压缩过后的中文字体仍旧过大,可转移至对象存储或 CDN 加载
 | 
			
		||||
    // const font = new FontFace(
 | 
			
		||||
    //     "MiSans",
 | 
			
		||||
    //     "url(" + "./font/MiSans-Regular.woff2" + ")"
 | 
			
		||||
    // );
 | 
			
		||||
    // document.fonts.add(font);
 | 
			
		||||
 | 
			
		||||
    //移动端去除鼠标样式
 | 
			
		||||
    if (Boolean(window.navigator.userAgent.match(/AppWebKit.*Mobile.*/))) {
 | 
			
		||||
        $('#g-pointer-2').css("display", "none");
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
}, false)
 | 
			
		||||
 | 
			
		||||
setTimeout(function () {
 | 
			
		||||
    $('#loading-text').html("字体及文件加载可能需要一定时间")
 | 
			
		||||
}, 3000);
 | 
			
		||||
 | 
			
		||||
// 新春灯笼 ( 需要时可取消注释 )
 | 
			
		||||
// new_element=document.createElement("link");
 | 
			
		||||
// new_element.setAttribute("rel","stylesheet");
 | 
			
		||||
// new_element.setAttribute("type","text/css");
 | 
			
		||||
// new_element.setAttribute("href","./css/lantern.css");
 | 
			
		||||
// document.body.appendChild(new_element);
 | 
			
		||||
 | 
			
		||||
// new_element=document.createElement("script");
 | 
			
		||||
// new_element.setAttribute("type","text/javascript");
 | 
			
		||||
// new_element.setAttribute("src","./js/lantern.js");
 | 
			
		||||
// document.body.appendChild(new_element);
 | 
			
		||||
 | 
			
		||||
//获取一言
 | 
			
		||||
fetch('https://v1.hitokoto.cn?max_length=24')
 | 
			
		||||
    .then(response => response.json())
 | 
			
		||||
    .then(data => {
 | 
			
		||||
        $('#hitokoto_text').html(data.hitokoto)
 | 
			
		||||
        $('#from_text').html(data.from)
 | 
			
		||||
    })
 | 
			
		||||
    .catch(console.error)
 | 
			
		||||
 | 
			
		||||
let times = 0;
 | 
			
		||||
$('#hitokoto').click(function () {
 | 
			
		||||
    if (times == 0) {
 | 
			
		||||
        times = 1;
 | 
			
		||||
        let index = setInterval(function () {
 | 
			
		||||
            times--;
 | 
			
		||||
            if (times == 0) {
 | 
			
		||||
                clearInterval(index);
 | 
			
		||||
            }
 | 
			
		||||
        }, 1000);
 | 
			
		||||
        fetch('https://v1.hitokoto.cn?max_length=24')
 | 
			
		||||
            .then(response => response.json())
 | 
			
		||||
            .then(data => {
 | 
			
		||||
                $('#hitokoto_text').html(data.hitokoto)
 | 
			
		||||
                $('#from_text').html(data.from)
 | 
			
		||||
            })
 | 
			
		||||
            .catch(console.error)
 | 
			
		||||
    } else {
 | 
			
		||||
        iziToast.show({
 | 
			
		||||
            timeout: 1000,
 | 
			
		||||
            icon: "fa-solid fa-circle-exclamation",
 | 
			
		||||
            message: '你点太快了吧'
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//获取天气
 | 
			
		||||
//请前往 https://www.mxnzp.com/doc/list 申请 app_id 和 app_secret
 | 
			
		||||
//请前往 https://dev.qweather.com/ 申请 key
 | 
			
		||||
const add_id = "wrknltonr0foslhs"; // app_id
 | 
			
		||||
const app_secret = "Nlh1c0F6d0ZDU2pDR0J3YVBVbkhudz09"; // app_secret
 | 
			
		||||
const key = "433f0c48615a48dfaf2f2b2444297e79" // key
 | 
			
		||||
function getWeather() {
 | 
			
		||||
    fetch("https://www.mxnzp.com/api/ip/self?app_id=" + add_id + "&app_secret=" + app_secret)
 | 
			
		||||
        .then(response => response.json())
 | 
			
		||||
        .then(data => {
 | 
			
		||||
            let str = data.data.city
 | 
			
		||||
            let city = str.replace(/市/g, '')
 | 
			
		||||
            $('#city_text').html(city);
 | 
			
		||||
            fetch("https://geoapi.qweather.com/v2/city/lookup?location=" + city + "&number=1&key=" + key)
 | 
			
		||||
                .then(response => response.json())
 | 
			
		||||
                .then(location => {
 | 
			
		||||
                    let id = location.location[0].id
 | 
			
		||||
                    fetch("https://devapi.qweather.com/v7/weather/now?location=" + id + "&key=" + key)
 | 
			
		||||
                        .then(response => response.json())
 | 
			
		||||
                        .then(weather => {
 | 
			
		||||
                            $('#wea_text').html(weather.now.text)
 | 
			
		||||
                            $('#tem_text').html(weather.now.temp + "°C ")
 | 
			
		||||
                            $('#win_text').html(weather.now.windDir)
 | 
			
		||||
                            $('#win_speed').html(weather.now.windScale + "级")
 | 
			
		||||
                        })
 | 
			
		||||
                })
 | 
			
		||||
        })
 | 
			
		||||
        .catch(console.error);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
getWeather();
 | 
			
		||||
 | 
			
		||||
let wea = 0;
 | 
			
		||||
$('#upWeather').click(function () {
 | 
			
		||||
    if (wea == 0) {
 | 
			
		||||
        wea = 1;
 | 
			
		||||
        let index = setInterval(function () {
 | 
			
		||||
            wea--;
 | 
			
		||||
            if (wea == 0) {
 | 
			
		||||
                clearInterval(index);
 | 
			
		||||
            }
 | 
			
		||||
        }, 60000);
 | 
			
		||||
        getWeather();
 | 
			
		||||
        iziToast.show({
 | 
			
		||||
            timeout: 2000,
 | 
			
		||||
            icon: "fa-solid fa-cloud-sun",
 | 
			
		||||
            message: '实时天气已更新'
 | 
			
		||||
        });
 | 
			
		||||
    } else {
 | 
			
		||||
        iziToast.show({
 | 
			
		||||
            timeout: 1000,
 | 
			
		||||
            icon: "fa-solid fa-circle-exclamation",
 | 
			
		||||
            message: '请稍后再更新哦'
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//获取时间
 | 
			
		||||
let t = null;
 | 
			
		||||
t = setTimeout(time, 1000);
 | 
			
		||||
 | 
			
		||||
function time() {
 | 
			
		||||
    clearTimeout(t);
 | 
			
		||||
    dt = new Date();
 | 
			
		||||
    let y = dt.getYear() + 1900;
 | 
			
		||||
    let mm = dt.getMonth() + 1;
 | 
			
		||||
    let d = dt.getDate();
 | 
			
		||||
    let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 | 
			
		||||
    let day = dt.getDay();
 | 
			
		||||
    let h = dt.getHours();
 | 
			
		||||
    let m = dt.getMinutes();
 | 
			
		||||
    let s = dt.getSeconds();
 | 
			
		||||
    if (h < 10) {
 | 
			
		||||
        h = "0" + h;
 | 
			
		||||
    }
 | 
			
		||||
    if (m < 10) {
 | 
			
		||||
        m = "0" + m;
 | 
			
		||||
    }
 | 
			
		||||
    if (s < 10) {
 | 
			
		||||
        s = "0" + s;
 | 
			
		||||
    }
 | 
			
		||||
    $("#time").html(y + " 年 " + mm + " 月 " + d + " 日 " + "<span class='weekday'>" + weekday[day] + "</span><br>" + "<span class='time-text'>" + h + ":" + m + ":" + s + "</span>");
 | 
			
		||||
    t = setTimeout(time, 1000);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//链接提示文字
 | 
			
		||||
$("#social").mouseover(function () {
 | 
			
		||||
    $("#social").css({
 | 
			
		||||
        "background": "rgb(0 0 0 / 25%)",
 | 
			
		||||
        'border-radius': '6px',
 | 
			
		||||
        "backdrop-filter": "blur(5px)"
 | 
			
		||||
    });
 | 
			
		||||
    $("#link-text").css({
 | 
			
		||||
        "display": "block",
 | 
			
		||||
    });
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#social").css({
 | 
			
		||||
        "background": "none",
 | 
			
		||||
        "border-radius": "6px",
 | 
			
		||||
        "backdrop-filter": "none"
 | 
			
		||||
    });
 | 
			
		||||
    $("#link-text").css({
 | 
			
		||||
        "display": "none"
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
$("#github").mouseover(function () {
 | 
			
		||||
    $("#link-text").html("去 Github 看看");
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#link-text").html("通过这里联系我");
 | 
			
		||||
});
 | 
			
		||||
$("#qq").mouseover(function () {
 | 
			
		||||
    $("#link-text").html("有什么事吗");
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#link-text").html("通过这里联系我");
 | 
			
		||||
});
 | 
			
		||||
$("#email").mouseover(function () {
 | 
			
		||||
    $("#link-text").html("来封 Email");
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#link-text").html("通过这里联系我");
 | 
			
		||||
});
 | 
			
		||||
$("#bilibili").mouseover(function () {
 | 
			
		||||
    $("#link-text").html("来 B 站看看 ~");
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#link-text").html("通过这里联系我");
 | 
			
		||||
});
 | 
			
		||||
$("#telegram").mouseover(function () {
 | 
			
		||||
    $("#link-text").html("你懂的 ~");
 | 
			
		||||
}).mouseout(function () {
 | 
			
		||||
    $("#link-text").html("通过这里联系我");
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//自动变灰
 | 
			
		||||
let myDate = new Date;
 | 
			
		||||
let mon = myDate.getMonth() + 1;
 | 
			
		||||
let date = myDate.getDate();
 | 
			
		||||
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
 | 
			
		||||
for (let day of days) {
 | 
			
		||||
    let d = day.split('.');
 | 
			
		||||
    if (mon == d[0] && date == d[1]) {
 | 
			
		||||
        document.write(
 | 
			
		||||
            '<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>'
 | 
			
		||||
        );
 | 
			
		||||
        $("#change").html("Silence in silence");
 | 
			
		||||
        $("#change1").html("今天是中国国家纪念日,全站已切换为黑白模式");
 | 
			
		||||
        window.addEventListener('load', function () {
 | 
			
		||||
            setTimeout(function () {
 | 
			
		||||
                iziToast.show({
 | 
			
		||||
                    timeout: 14000,
 | 
			
		||||
                    icon: "fa-solid fa-clock",
 | 
			
		||||
                    message: '今天是中国国家纪念日'
 | 
			
		||||
                });
 | 
			
		||||
            }, 3800);
 | 
			
		||||
        }, false);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//更多页面切换
 | 
			
		||||
let shoemore = false;
 | 
			
		||||
$('#switchmore').on('click', function () {
 | 
			
		||||
    shoemore = !shoemore;
 | 
			
		||||
    if (shoemore && $(document).width() >= 990) {
 | 
			
		||||
        $('#container').attr('class', 'container mores');
 | 
			
		||||
        $("#change").html("Oops !");
 | 
			
		||||
        $("#change1").html("哎呀,这都被你发现了( 再点击一次可关闭 )");
 | 
			
		||||
    } else {
 | 
			
		||||
        $('#container').attr('class', 'container');
 | 
			
		||||
        $("#change").html("Hello World !");
 | 
			
		||||
        $("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//更多页面关闭按钮
 | 
			
		||||
$('#close').on('click', function () {
 | 
			
		||||
    $('#switchmore').click();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//移动端菜单栏切换
 | 
			
		||||
let switchmenu = false;
 | 
			
		||||
$('#switchmenu').on('click', function () {
 | 
			
		||||
    switchmenu = !switchmenu;
 | 
			
		||||
    if (switchmenu) {
 | 
			
		||||
        $('#row').attr('class', 'row menus');
 | 
			
		||||
        $("#menu").html("<i class='fa-solid fa-xmark'></i>");
 | 
			
		||||
    } else {
 | 
			
		||||
        $('#row').attr('class', 'row');
 | 
			
		||||
        $("#menu").html("<i class='fa-solid fa-bars'></i>");
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//更多弹窗页面
 | 
			
		||||
$('#openmore').on('click', function () {
 | 
			
		||||
    $('#box').css("display", "block");
 | 
			
		||||
    $('#row').css("display", "none");
 | 
			
		||||
    $('#more').css("cssText", "display:none !important");
 | 
			
		||||
});
 | 
			
		||||
$('#closemore').on('click', function () {
 | 
			
		||||
    $('#box').css("display", "none");
 | 
			
		||||
    $('#row').css("display", "flex");
 | 
			
		||||
    $('#more').css("display", "flex");
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//监听网页宽度
 | 
			
		||||
window.addEventListener('load', function () {
 | 
			
		||||
    window.addEventListener('resize', function () {
 | 
			
		||||
        //关闭移动端样式
 | 
			
		||||
        if (window.innerWidth >= 600) {
 | 
			
		||||
            $('#row').attr('class', 'row');
 | 
			
		||||
            $("#menu").html("<i class='fa-solid fa-bars'></i>");
 | 
			
		||||
            //移除移动端切换功能区
 | 
			
		||||
            $('#rightone').attr('class', 'row rightone');
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (window.innerWidth <= 990) {
 | 
			
		||||
            //移动端隐藏更多页面
 | 
			
		||||
            $('#container').attr('class', 'container');
 | 
			
		||||
            $("#change").html("Hello World !");
 | 
			
		||||
            $("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
 | 
			
		||||
 | 
			
		||||
            //移动端隐藏弹窗页面
 | 
			
		||||
            $('#box').css("display", "none");
 | 
			
		||||
            $('#row').css("display", "flex");
 | 
			
		||||
            $('#more').css("display", "flex");
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
//移动端切换功能区
 | 
			
		||||
let changemore = false;
 | 
			
		||||
$('#changemore').on('click', function () {
 | 
			
		||||
    changemore = !changemore;
 | 
			
		||||
    if (changemore) {
 | 
			
		||||
        $('#rightone').attr('class', 'row menus mobile');
 | 
			
		||||
    } else {
 | 
			
		||||
        $('#rightone').attr('class', 'row menus');
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//更多页面显示关闭按钮
 | 
			
		||||
$("#more").hover(function () {
 | 
			
		||||
    $('#close').css("display", "block");
 | 
			
		||||
}, function () {
 | 
			
		||||
    $('#close').css("display", "none");
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
//屏蔽右键
 | 
			
		||||
document.oncontextmenu = function () {
 | 
			
		||||
    iziToast.show({
 | 
			
		||||
        timeout: 2000,
 | 
			
		||||
        icon: "fa-solid fa-circle-exclamation",
 | 
			
		||||
        message: '为了浏览体验,本站禁用右键'
 | 
			
		||||
    });
 | 
			
		||||
    return false;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//控制台输出
 | 
			
		||||
//console.clear();
 | 
			
		||||
let styleTitle1 = `
 | 
			
		||||
font-size: 20px;
 | 
			
		||||
font-weight: 600;
 | 
			
		||||
color: rgb(244,167,89);
 | 
			
		||||
`
 | 
			
		||||
let styleTitle2 = `
 | 
			
		||||
font-size:12px;
 | 
			
		||||
color: rgb(244,167,89);
 | 
			
		||||
`
 | 
			
		||||
let styleContent = `
 | 
			
		||||
color: rgb(30,152,255);
 | 
			
		||||
`
 | 
			
		||||
let title1 = '無名の主页'
 | 
			
		||||
let title2 = `
 | 
			
		||||
 _____ __  __  _______     ____     __
 | 
			
		||||
|_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
 | 
			
		||||
  | | | \\  / | (___  \\ \\_/ /  \\ \\_/ / 
 | 
			
		||||
  | | | |\\/| |\\___ \\  \\   /    \\   /  
 | 
			
		||||
 _| |_| |  | |____) |  | |      | |   
 | 
			
		||||
|_____|_|  |_|_____/   |_|      |_|                                                     
 | 
			
		||||
`
 | 
			
		||||
let content = `
 | 
			
		||||
版 本 号:3.4
 | 
			
		||||
更新日期:2022-07-24
 | 
			
		||||
 | 
			
		||||
主页:  https://www.imsyy.top
 | 
			
		||||
Github:  https://github.com/imsyy/home
 | 
			
		||||
`
 | 
			
		||||
console.log(`%c${title1} %c${title2}
 | 
			
		||||
%c${content}`, styleTitle1, styleTitle2, styleContent)
 | 
			
		||||
							
								
								
									
										152
									
								
								js/music.js
									
									
									
									
									
								
							
							
						
						@ -1,152 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
音乐信息
 | 
			
		||||
 | 
			
		||||
感谢 @武恩赐 提供的 MetingAPI
 | 
			
		||||
https://api.wuenci.com/meting/api/
 | 
			
		||||
 | 
			
		||||
作者: imsyy
 | 
			
		||||
主页:https://www.imsyy.top/
 | 
			
		||||
GitHub:https://github.com/imsyy/home
 | 
			
		||||
版权所有,请勿删除
 | 
			
		||||
*/
 | 
			
		||||
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
 | 
			
		||||
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
 | 
			
		||||
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
 | 
			
		||||
 | 
			
		||||
$.ajax({
 | 
			
		||||
    url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
 | 
			
		||||
    type: "GET",
 | 
			
		||||
    dataType: "JSON",
 | 
			
		||||
    success: function (data) {
 | 
			
		||||
        const ap = new APlayer({
 | 
			
		||||
            container: document.getElementById('aplayer'),
 | 
			
		||||
            order: 'random',
 | 
			
		||||
            preload: 'auto',
 | 
			
		||||
            listMaxHeight: '336px',
 | 
			
		||||
            volume: '0.5',
 | 
			
		||||
            mutex: true,
 | 
			
		||||
            lrcType: 3,
 | 
			
		||||
            audio: data,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        /* 底栏歌词 */
 | 
			
		||||
        setInterval(function () {
 | 
			
		||||
            $("#lrc").html("<span class='lrc-show'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg> " + $(".aplayer-lrc-current").text() + " <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg></span>");
 | 
			
		||||
        }, 500);
 | 
			
		||||
 | 
			
		||||
        /* 音乐通知及控制 */
 | 
			
		||||
        ap.on('play', function () {
 | 
			
		||||
            music = $(".aplayer-title").text() + $(".aplayer-author").text();
 | 
			
		||||
            iziToast.info({
 | 
			
		||||
                timeout: 4000,
 | 
			
		||||
                icon: "fa-solid fa-circle-play",
 | 
			
		||||
                displayMode: 'replace',
 | 
			
		||||
                message: music
 | 
			
		||||
            });
 | 
			
		||||
            $("#play").html("<i class='fa-solid fa-pause'>");
 | 
			
		||||
            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
 | 
			
		||||
            if ($(document).width() >= 990) {
 | 
			
		||||
                $('.power').css("cssText", "display:none");
 | 
			
		||||
                $('#lrc').css("cssText", "display:block !important");
 | 
			
		||||
            };
 | 
			
		||||
            // Notification.requestPermission().then(res => {
 | 
			
		||||
            //     console.log(res)
 | 
			
		||||
            // });
 | 
			
		||||
            // new Notification('音乐通知', {
 | 
			
		||||
            //     body: '正在播放:' + music,
 | 
			
		||||
            //     tag: 1
 | 
			
		||||
            // });
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        ap.on('pause', function () {
 | 
			
		||||
            $("#play").html("<i class='fa-solid fa-play'>");
 | 
			
		||||
            if ($(document).width() >= 990) {
 | 
			
		||||
                $('#lrc').css("cssText", "display:none !important");
 | 
			
		||||
                $('.power').css("cssText", "display:block");
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        $("#music").hover(function () {
 | 
			
		||||
            $('.music-text').css("display", "none");
 | 
			
		||||
            $('.music-volume').css("display", "flex");
 | 
			
		||||
        }, function () {
 | 
			
		||||
            $('.music-text').css("display", "block");
 | 
			
		||||
            $('.music-volume').css("display", "none");
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
        /* 一言与音乐切换 */
 | 
			
		||||
        $('#open-music').on('click', function () {
 | 
			
		||||
            $('#hitokoto').css("display", "none");
 | 
			
		||||
            $('#music').css("display", "flex");
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        $("#hitokoto").hover(function () {
 | 
			
		||||
            $('#open-music').css("display", "flex");
 | 
			
		||||
        }, function () {
 | 
			
		||||
            $('#open-music').css("display", "none");
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
        $('#music-close').on('click', function () {
 | 
			
		||||
            $('#music').css("display", "none");
 | 
			
		||||
            $('#hitokoto').css("display", "flex");
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        /* 上下曲 */
 | 
			
		||||
        $('#play').on('click', function () {
 | 
			
		||||
            ap.toggle();
 | 
			
		||||
            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        $('#last').on('click', function () {
 | 
			
		||||
            ap.skipBack();
 | 
			
		||||
            ap.play();
 | 
			
		||||
            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        $('#next').on('click', function () {
 | 
			
		||||
            ap.skipForward();
 | 
			
		||||
            ap.play();
 | 
			
		||||
            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        window.onkeydown = function (e) {
 | 
			
		||||
            if (e.keyCode == 32) {
 | 
			
		||||
                ap.toggle();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        /* 打开音乐列表 */
 | 
			
		||||
        $('#music-open').on('click', function () {
 | 
			
		||||
            if ($(document).width() >= 990) {
 | 
			
		||||
                $('#box').css("display", "block");
 | 
			
		||||
                $('#row').css("display", "none");
 | 
			
		||||
                $('#more').css("cssText", "display:none !important");
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        //音量调节
 | 
			
		||||
        $("#volume").on('input propertychange touchend', function () {
 | 
			
		||||
            let x = $("#volume").val();
 | 
			
		||||
            ap.volume(x, true);
 | 
			
		||||
            if (x == 0) {
 | 
			
		||||
                $("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");
 | 
			
		||||
            } else if (x > 0 && x <= 0.3) {
 | 
			
		||||
                $("#volume-ico").html("<i class='fa-solid fa-volume-off'></i>");
 | 
			
		||||
            } else if (x > 0.3 && x <= 0.6) {
 | 
			
		||||
                $("#volume-ico").html("<i class='fa-solid fa-volume-low'></i>");
 | 
			
		||||
            } else {
 | 
			
		||||
                $("#volume-ico").html("<i class='fa-solid fa-volume-high'></i>");
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
    },
 | 
			
		||||
    error: function () {
 | 
			
		||||
        setTimeout(function () {
 | 
			
		||||
            iziToast.info({
 | 
			
		||||
                timeout: 8000,
 | 
			
		||||
                icon: "fa-solid fa-circle-exclamation",
 | 
			
		||||
                displayMode: 'replace',
 | 
			
		||||
                message: '音乐播放器加载失败'
 | 
			
		||||
            });
 | 
			
		||||
        }, 3800);
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
							
								
								
									
										125
									
								
								js/set.js
									
									
									
									
									
								
							
							
						
						@ -1,125 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
作者: imsyy
 | 
			
		||||
主页:https://www.imsyy.top/
 | 
			
		||||
GitHub:https://github.com/imsyy/home
 | 
			
		||||
版权所有,请勿删除
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
/* 自定义配置 */
 | 
			
		||||
/* 尚未完善 */
 | 
			
		||||
$(function () {
 | 
			
		||||
    let url = "../setting.json"
 | 
			
		||||
    $.getJSON(
 | 
			
		||||
        url,
 | 
			
		||||
        function (data) {
 | 
			
		||||
            /* 页头数据 */
 | 
			
		||||
            $('title').text(data.title);
 | 
			
		||||
            $('#loading-title').html(data.title);
 | 
			
		||||
            $("meta[name='description']").attr('content', data.description);
 | 
			
		||||
            $("meta[name='keywords']").attr('content', data.keywords);
 | 
			
		||||
            $("meta[name='author']").attr('content', data.author);
 | 
			
		||||
            /* 基础信息 */
 | 
			
		||||
            $("#logo-img").attr("src", data.logo_img);
 | 
			
		||||
            $('#logo-text-1').html(data.logo_text_1);
 | 
			
		||||
            $('#logo-text-2').html("." + data.logo_text_2);
 | 
			
		||||
            $('#logo-title-other').html(data.logo_text_1);
 | 
			
		||||
            $('#logo-title-other-small').html("." + data.logo_text_2);
 | 
			
		||||
            $('#logo-text-small').html(data.logo_text_1 + "." + data.logo_text_2);
 | 
			
		||||
            /* 社交链接 */
 | 
			
		||||
            $('#github').attr('href', "https://github.com/" + data.github);
 | 
			
		||||
            $('#qq').attr('href', "https://wpa.qq.com/msgrd?v=3&uin=" + data.qq + "&site=qq&menu=yes");
 | 
			
		||||
            $('#email').attr('href', "mailto:" + data.email);
 | 
			
		||||
            $('#bilibili').attr('href', "https://space.bilibili.com/" + data.bilibili);
 | 
			
		||||
            $('#telegram').attr('href', "https://t.me/" + data.telegram);
 | 
			
		||||
            /* 快捷链接 */
 | 
			
		||||
            $('#link-url-1').attr('href', data.link_1[0]);
 | 
			
		||||
            $('#link-icon-1').attr('class', data.link_1[1]);
 | 
			
		||||
            $('#link-name-1').html(data.link_1[2]);
 | 
			
		||||
            $('#link-url-2').attr('href', data.link_2[0]);
 | 
			
		||||
            $('#link-icon-2').attr('class', data.link_2[1]);
 | 
			
		||||
            $('#link-name-2').html(data.link_2[2]);
 | 
			
		||||
            $('#link-url-3').attr('href', data.link_3[0]);
 | 
			
		||||
            $('#link-icon-3').attr('class', data.link_3[1]);
 | 
			
		||||
            $('#link-name-3').html(data.link_3[2]);
 | 
			
		||||
            $('#link-url-4').attr('href', data.link_4[0]);
 | 
			
		||||
            $('#link-icon-4').attr('class', data.link_4[1]);
 | 
			
		||||
            $('#link-name-4').html(data.link_4[2]);
 | 
			
		||||
            $('#link-url-5').attr('href', data.link_5[0]);
 | 
			
		||||
            $('#link-icon-5').attr('class', data.link_5[1]);
 | 
			
		||||
            $('#link-name-5').html(data.link_5[2]);
 | 
			
		||||
            $('#link-url-6').attr('href', data.link_6[0]);
 | 
			
		||||
            $('#link-icon-6').attr('class', data.link_6[1]);
 | 
			
		||||
            $('#link-name-6').html(data.link_6[2]);
 | 
			
		||||
            //页脚版权
 | 
			
		||||
            $('#power-text').html(data.Copyright_text);
 | 
			
		||||
            $('#beian').html("& " + data.beian);
 | 
			
		||||
        }
 | 
			
		||||
    )
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 背景图片 Cookies 
 | 
			
		||||
function setBgImg(bg_img) {
 | 
			
		||||
    if (bg_img) {
 | 
			
		||||
        Cookies.set('bg_img', bg_img, {
 | 
			
		||||
            expires: 36500
 | 
			
		||||
        });
 | 
			
		||||
        return true;
 | 
			
		||||
    }
 | 
			
		||||
    return false;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 获取背景图片 Cookies
 | 
			
		||||
function getBgImg() {
 | 
			
		||||
    let bg_img_local = Cookies.get('bg_img');
 | 
			
		||||
    if (bg_img_local && bg_img_local !== "{}") {
 | 
			
		||||
        return JSON.parse(bg_img_local);
 | 
			
		||||
    } else {
 | 
			
		||||
        setBgImg(bg_img_preinstall);
 | 
			
		||||
        return bg_img_preinstall;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
let bg_img_preinstall = {
 | 
			
		||||
    "type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
 | 
			
		||||
    "2": "https://api.dujin.org/bing/1920.php", // 每日一图
 | 
			
		||||
    "3": "https://api.ixiaowai.cn/gqapi/gqapi.php", // 随机风景
 | 
			
		||||
    "4": "https://api.ixiaowai.cn/api/api.php" // 随机动漫
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 更改背景图片
 | 
			
		||||
function setBgImgInit() {
 | 
			
		||||
    let bg_img = getBgImg();
 | 
			
		||||
    $("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
 | 
			
		||||
 | 
			
		||||
    switch (bg_img["type"]) {
 | 
			
		||||
        case "1":
 | 
			
		||||
            $('#bg').attr('src', `./img/background${1 + ~~(Math.random() * 10)}.webp`) //随机默认壁纸
 | 
			
		||||
            break;
 | 
			
		||||
        case "2":
 | 
			
		||||
            $('#bg').attr('src', bg_img_preinstall[2]); //必应每日
 | 
			
		||||
            break;
 | 
			
		||||
        case "3":
 | 
			
		||||
            $('#bg').attr('src', bg_img_preinstall[3]); //随机风景
 | 
			
		||||
            break;
 | 
			
		||||
        case "4":
 | 
			
		||||
            $('#bg').attr('src', bg_img_preinstall[4]); //随机动漫
 | 
			
		||||
            break;
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
$(document).ready(function () {
 | 
			
		||||
    // 壁纸数据加载
 | 
			
		||||
    setBgImgInit();
 | 
			
		||||
    // 设置背景图片
 | 
			
		||||
    $("#wallpaper").on("click", ".set-wallpaper", function () {
 | 
			
		||||
        let type = $(this).val();
 | 
			
		||||
        let bg_img = getBgImg();
 | 
			
		||||
        bg_img["type"] = type;
 | 
			
		||||
        iziToast.show({
 | 
			
		||||
            icon: "fa-solid fa-image",
 | 
			
		||||
            timeout: 2500,
 | 
			
		||||
            message: '壁纸设置成功,刷新后生效',
 | 
			
		||||
        });
 | 
			
		||||
        setBgImg(bg_img);
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
							
								
								
									
										68
									
								
								js/time.js
									
									
									
									
									
								
							
							
						
						@ -1,68 +0,0 @@
 | 
			
		||||
function init_life_time() {
 | 
			
		||||
    function getAsideLifeTime() {
 | 
			
		||||
        /* 当前时间戳 */
 | 
			
		||||
        let nowDate = +new Date();
 | 
			
		||||
        /* 今天开始时间戳 */
 | 
			
		||||
        let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
 | 
			
		||||
        /* 今天已经过去的时间 */
 | 
			
		||||
        let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
 | 
			
		||||
        /* 今天已经过去的时间比 */
 | 
			
		||||
        let todayPassHoursPercent = (todayPassHours / 24) * 100;
 | 
			
		||||
        $('#dayProgress .date-text span').html(parseInt(todayPassHours));
 | 
			
		||||
        $('#dayProgress .progress .progress-bar').css('width', parseInt(todayPassHoursPercent) + '%');
 | 
			
		||||
        $('#dayProgress .progress .progress-bar').html(parseInt(todayPassHoursPercent) + '%');
 | 
			
		||||
        /* 当前周几 */
 | 
			
		||||
        let weeks = {
 | 
			
		||||
            0: 7,
 | 
			
		||||
            1: 1,
 | 
			
		||||
            2: 2,
 | 
			
		||||
            3: 3,
 | 
			
		||||
            4: 4,
 | 
			
		||||
            5: 5,
 | 
			
		||||
            6: 6
 | 
			
		||||
        };
 | 
			
		||||
        let weekDay = weeks[new Date().getDay()];
 | 
			
		||||
        let weekDayPassPercent = (weekDay / 7) * 100;
 | 
			
		||||
        $('#weekProgress .date-text span').html(weekDay);
 | 
			
		||||
        $('#weekProgress .progress .progress-bar').css('width', parseInt(weekDayPassPercent) + '%');
 | 
			
		||||
        $('#weekProgress .progress .progress-bar').html(parseInt(weekDayPassPercent) + '%');
 | 
			
		||||
        /* 月 */
 | 
			
		||||
        let year = new Date().getFullYear();
 | 
			
		||||
        let date = new Date().getDate();
 | 
			
		||||
        let month = new Date().getMonth() + 1;
 | 
			
		||||
        let monthAll = new Date(year, month, 0).getDate();
 | 
			
		||||
        let monthPassPercent = (date / monthAll) * 100;
 | 
			
		||||
        $('#monthProgress .date-text span').html(date);
 | 
			
		||||
        $('#monthProgress .progress .progress-bar').css('width', parseInt(monthPassPercent) + '%');
 | 
			
		||||
        $('#monthProgress .progress .progress-bar').html(parseInt(monthPassPercent) + '%');
 | 
			
		||||
        /* 年 */
 | 
			
		||||
        let yearPass = (month / 12) * 100;
 | 
			
		||||
        $('#yearProgress .date-text span').html(month);
 | 
			
		||||
        $('#yearProgress .progress .progress-bar').css('width', parseInt(yearPass) + '%');
 | 
			
		||||
        $('#yearProgress .progress .progress-bar').html(parseInt(yearPass) + '%');
 | 
			
		||||
    }
 | 
			
		||||
    getAsideLifeTime();
 | 
			
		||||
    setInterval(() => {
 | 
			
		||||
        getAsideLifeTime();
 | 
			
		||||
    }, 1000);
 | 
			
		||||
}
 | 
			
		||||
init_life_time()
 | 
			
		||||
 | 
			
		||||
now = new Date(), hour = now.getHours()
 | 
			
		||||
if (hour < 6) {
 | 
			
		||||
    var hello = "凌晨好";
 | 
			
		||||
} else if (hour < 9) {
 | 
			
		||||
    var hello = "早上好";
 | 
			
		||||
} else if (hour < 12) {
 | 
			
		||||
    var hello = "上午好";
 | 
			
		||||
} else if (hour < 14) {
 | 
			
		||||
    var hello = "中午好";
 | 
			
		||||
} else if (hour < 17) {
 | 
			
		||||
    var hello = "下午好";
 | 
			
		||||
} else if (hour < 19) {
 | 
			
		||||
    var hello = "傍晚好";
 | 
			
		||||
} else if (hour < 22) {
 | 
			
		||||
    var hello = "晚上好";
 | 
			
		||||
} else {
 | 
			
		||||
    var hello = "夜深了";
 | 
			
		||||
}
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
{"name":"無名の主页","short_name":"無名の主页","description":"一个默默无闻的主页","display":"standalone","start_url":"/","theme_color":"#424242","background_color":"#424242","icons":[{"src":"img/icon/48.png","sizes":"48x48","type":"image/png"},{"src":"img/icon/72.png","sizes":"72x72","type":"image/png"},{"src":"img/icon/96.png","sizes":"96x96","type":"image/png"},{"src":"img/icon/128.png","sizes":"128x128","type":"image/png"},{"src":"img/icon/144.png","sizes":"144x144","type":"image/png"},{"src":"img/icon/192.png","sizes":"192x192","type":"image/png"},{"src":"img/icon/512.png","sizes":"512x512","type":"image/png"}]}
 | 
			
		||||
@ -1,7 +0,0 @@
 | 
			
		||||
@font-face {
 | 
			
		||||
    font-family:'EngraversOldEnglishBT-Bold';
 | 
			
		||||
    src: url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.gif?r=110901002758');
 | 
			
		||||
    src: url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.gif?r=110901002758?#iefix') format('embedded-opentype'), url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.png?r=110901002758') format('woff2'), url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.bmp?r=110901002758') format('woff');
 | 
			
		||||
    font-weight: normal;
 | 
			
		||||
    font-style: normal;
 | 
			
		||||
}
 | 
			
		||||
@ -1,80 +0,0 @@
 | 
			
		||||
@font-face {font-family: "iconfont";
 | 
			
		||||
  src: url('//at.alicdn.com/t/font_1923666_2o4ez0t5t64.eot?t=1597068283360'); /* IE9 */
 | 
			
		||||
  src: url('//at.alicdn.com/t/font_1923666_2o4ez0t5t64.eot?t=1597068283360#iefix') format('embedded-opentype'), /* IE6-IE8 */
 | 
			
		||||
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAygAAsAAAAAFQgAAAxSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFCgqaDJRUATYCJANECyQABCAFhG0HgUEbYRFRlFBWMtkX2DbsyRi24w5jw9hhxnUCAlAAAADABxRQQMEpHr7f739rH7nfTJMgXvFuFiLTIUHqj+ShUpJn/lr77RfzHZp+USCZJq2cvRVO2dvDMrRMSoQIoTE8bfPf3WHdTUElRIxqdENlsrI50M1eRLCA/W/B1tBmLMtYpK6PY9Ftmg/89wABgM3/fz9X/0OsiUV9mIZCjV+n92OubQlLhEZdSKpveNsa0UITa0TrkVR2SCjgNkZ16IWeTqDTrC2hq6fXdyip0BWBea85VVEyUaNURIf28qbAYRkPfQBm2tM7eBDw3nv8+Cci2klqpp/p5tMTA+3/9LKVdEiqIH8C2XBNYLWRsQ0prPipsPIjKEOOjehcSvEWMKpI/szmZ9Zh2YaRM5/0+Pqy9RA/PWuwk65eGNW1ZhAgHXr0K+jUq02xrhUaWZfuw/jliQal7CZDf4z2Qz9ZeXTwM/Lo4WfiqiGjSh+gQZVOQBuq9ALaoZCFDlQpgGUoDAWbqFIBe1AA3IDCFPAJVboAX1GlG/Afcqj904Lw3JQDjoNFyBZUBhGq95AuvvGU8TW0FBXy5IjZYtFZRkpZneqxeFItFkelaFm7K2a7RzO95JVWibZb6+VCrDvZ7Gkz1lWP+NLJKik9USlnioT25YerZaypGsXMSR3SHkXg1Mmdij5ZwJQuucSm5Zi0x5vaHj9Mbx4vW0E/NQeg61H0cSB9bx533yVKurJR0QmkLaic6AgKgoO3d/rHz+Ye7XMNRVzqArpIVK4P1GggWRcqb6Ers4QieVtOb29Xy2yVvz9uJOjbolrKyoYjgd2+mrclSq1Ux+gZoTFAMjWzq6VUyNrayjrqoddPkktQsUbmTqELUVGX16QeSBk4ShBC2GjEMd1hxVGOteMD3/ZuDmYyiRGSLLCR9zqON/T5Ult72PnaY15TcKGoVGz7Qqiiaw95yduYHV5tRxzVTIMvpmCoOhntOzm67d7t3SyNxvRAxRBrjNmYajujx8RqHnHAp82gAsi6XPQudZBMrCbFB43pJrERbzdhW9BtBGypU02Q1q/Dr8ULV+jBAdBKGYQQlYvUUAsp0pMJyjYJSYrmy9AfaRqLi0ymsrYuWTemadVJtS3iqGO8wruRXDiCNwrfOshkEik6pR1oyxFHw9GSloYt7d4KpmmqSnHOt07vs6ylg7Fc3UafdIxMmKJucSCAsLYHs1X0uUpMRhx07mZ3GoWosiuEELYeZqsYWkK4jwxAO4gYknTUsAxHfUnRtg4mSpoCDXsDJyNbSsFwMWZWgAojUAQrQcViDFKfhDXUYOKwUHWLV8cuh12EA3EVhqqdxdJc9sRwI0DpHQ2AjhEE3aGGECqL/YopWAdNkXsjcZam2QUS+dW7YlDdDuZCIFWiqFwNQfoTPmomTBAigtwT/+GKeESmwTCFCgDpbu/zRsmyllpvPF+331eMtx7lFBt6hZOUdKH0nmtTa1gLNSq65MaTkm5TjaZckozAdm6Kan/0JVIsEJCP8YMDgTX9UYoB35orEilBLIeQqWZBhjqf9rMDgd2u9ZBsT4ChybHtyqZ4nZHz1cyTJvDSNrA7djnXONf6d54/7d3hpLzhXT5tjvpZTkfldKVKxbgxXQzd4f0bm8oCUrqSSeoxYpkpSmE0LjltdG8g+GdIj2aT+NSXmMQkubxO77I85hvtonf49V/A0ijlOVTvGLEnYv7+xBuN4apW7LRJYBKfIdPOmmKPmrgaZ9w52IjXuUgIgtdPAMKIn1YIemoykR685TPkZDAMshaqtHQlgQpFuM4mrbnzqNR7vncH3/q87e/r73crL94VSajUdz7g/IxFC0SJg4mTRyQljZjsN4oWLCI1gNhrdxMaUmNSG+hjkTGRjpxYWZf3h5clNXhawahnjCcKW3k6cphmlwYPTxGTvZEegLZw/gDX9yMmMMMKGawM539eUbujQPdHUIuUuvE/wl0fPi7mJ3PYPhfbB1fbsP5hltX8e5NTktPB2FEVePYHs/S/m8LCwVlQBaXOipw/LwgY11el8aKHNwjAZ/19XnzYxYI5y/jO7pl3PB+I7O6EpYQNUEe+mJzEyj5q5wpicozd48bp2ZFs3dq1UrPTXuHmmbCky8rsHgWVlECCTiitpJh35GhhE0w1V/i6yLIHGUxBvieIoLRo3Ob1jl4B8C40tWHdpkhHf3GQx6bDddRMwtdCTcgYGLuklCh19Wba3ZrlH2TVB2AmjYIMS4CWP9jkcf2LrZQ2GrIv583rYIHwe34pyCqI39z1uYzeMS0Mev5l8Edz3cyqB383yOOn8tP5NiWc9E3jPZLH2RYgQjjXLnFqVJIDH5uUx+fPMPPXL6X8mz5lS++dGy8+fz0N8LjhVHeQbpcFaNnp9mBh3ibziLRzfrmvZmIgg/eCUk7sViO1yKXdSDlS4XxqLZwCP1qS7DorJSx3zfM1tErvKrtr1d8436ofwLEA1h7CSHar+trdDh9Bfl2nNIIJE9S58YHl+vRxtukII/xiKKy6fnrcSof3oe8dNmfGxWdw5sJvgtyD3sDUDT+df60HL0O0TO2x2pXyklg32M2vN6G/gWo4P4HHKwbp+Snn9QCMqQavwKA73X0QALfcorngYCt8wIyZZi2P1wfkmpXo8lzG8iKlmlOVHE6+90igHOfcR++zA6syGRR6czhLn2jm8SJdxubpSswCMuP1G6zTfMwsDxxpBdzjG0c6ZS3LUm/EY/l4XBzj/sm0AS0iRmap6FYB2l2/I2i8AyupoMn/wdNRNl7CzeMRP7ztBc39ZPzVZKgU8DwabcOemLH70GQ6f8bBT9wcfpxHLN2fbdW/O8v35mCm4UCB3b1uWLJu7TbPA1awNw0MXbjloGWg1THLYVTGpf0aqXlKcW4KnAqRdFBpngoabcGLjOX/KUv3r5f9EwoB93FQgmz2DKdlb0eK2eU61xWrPuxe/XFm/e8k2aY9e9ZMtqQpKRYw/65v4SSQpNwxFcTvKUKso7Mow2ZY1McmR6RbtAenjAb5ghV5qSx8KpT9QwL2B7f7pgmE51ZuRdldtstmTK3a/qGKcHXnrZFxQSIkHRVQnrtgbnYK44R6iZWE9Yt6bUd67NiGI8Eeq6Zudxr4f/zh+oI5C+aU/1ilm9k86LR92ioIu9A4Jm5c/SON52mCxgwavm8L5/xnzGpBctyUyPDvY+cWTE6oZNA+HheiS9QnUhhzc3IWBJaDNK7zfO5kZXAyd77zEpN26VAzd7LzfOC51YknEJhRrCy8rDQBnSGL9juhmTMhW5bJyLOYpBkzoUwafxz1sauvRYRVoavSPtOns6BvzoZhY8qniXiuVO6zTzZLOt2nV4Uu4M2yXem27LfnkjHcTBvZfLB1PrKA8fY77Qnc5TVHlhfr9HpoQ/bCyiXDa1xAPOBMDMyzXphkL+CsmQudlJzc4DRwbWAuc4XMfgEqoJhuOORPn5rPWHXewg91u8S7JOtH3W3DCyF+LYSkNEMtEP+M2wbeBrB6SDq9B0mGM73YXnhtbA98V9sv5H8AhhqyRyYRPWtcQ2prRW7C3wEY6rMNKUHKNTuQkEl/AQQMUdovREFiABh65TMyFinXHUeSR7bQIgXJtqdI5J+UIaB+7CwopiZ+tcR+uPpvixf9pphhmtf0ZPo+YAng9yWAv6QqyuMK6o9Ukei1thRpk4VCxOBI1eNiDnuHhpIi/t4dsZWMK86hJO80dvGn1DHob9qKkRdyU2hP8CxO2szgrN0yKqHbuOpyjBvtLuBOW86cdxkiRETpwKYvAod+3zjp9R1n/X5QCf3F1ah/3OiPjDvdj4qHXVbjRfpIgCrBwNo75rrrELNepv35N0ADSxVxiZf8AMLn/XgyHKfHz8ABMYQV/4VOpSSYCNfGp8TZwLJc7An3CXQ5ZFJ6e6MRKbI61F0bpV0hAJV0shswzXtpTudykKOldObhbwAqYFGJim3l0g+A4OPqYxND4wboTOk02nYpS30vqClJNhHYWiu4bNgp2QQsY8SFecX6ngCdNMQ6DHn2jEhVpKlyOL1o33ul27ejTjgQKXKUqNFEW7RHR3RGV7yYvIve6Iv+0EBoECUfONSC7cCLezRdJGpxX6Y0zlr1k2Rwc+KUSxZoiVfgb9yZxJ7YKrfCz8+xD8ZZELMDn+vJO7CACtVOyFcuJYgkC1RNdXZ2Eo8czXKpnwke9Upik8PUe0QIAA==') format('woff2'),
 | 
			
		||||
  url('//at.alicdn.com/t/font_1923666_2o4ez0t5t64.woff?t=1597068283360') format('woff'),
 | 
			
		||||
  url('//at.alicdn.com/t/font_1923666_2o4ez0t5t64.ttf?t=1597068283360') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 | 
			
		||||
  url('//at.alicdn.com/t/font_1923666_2o4ez0t5t64.svg?t=1597068283360#iconfont') format('svg'); /* iOS 4.1- */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.iconfont {
 | 
			
		||||
  font-family: "iconfont" !important;
 | 
			
		||||
  font-size: 16px;
 | 
			
		||||
  font-style: normal;
 | 
			
		||||
  -webkit-font-smoothing: antialiased;
 | 
			
		||||
  -moz-osx-font-smoothing: grayscale;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-angle-up:before {
 | 
			
		||||
  content: "\e9b3";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-ngleup:before {
 | 
			
		||||
  content: "\e624";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-list:before {
 | 
			
		||||
  content: "\e647";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-bilibili1:before {
 | 
			
		||||
  content: "\e609";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-bilibili:before {
 | 
			
		||||
  content: "\e62a";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-github:before {
 | 
			
		||||
  content: "\e62f";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-weixin1:before {
 | 
			
		||||
  content: "\e608";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-email:before {
 | 
			
		||||
  content: "\e6f5";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-qq:before {
 | 
			
		||||
  content: "\e600";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-zhihu:before {
 | 
			
		||||
  content: "\e606";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-music:before {
 | 
			
		||||
  content: "\e6ba";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-Telegram:before {
 | 
			
		||||
  content: "\e6bd";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-twitter:before {
 | 
			
		||||
  content: "\e601";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-huaban88:before {
 | 
			
		||||
  content: "\e607";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-cnblogs:before {
 | 
			
		||||
  content: "\e603";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.icon-u___fm__gp_:before {
 | 
			
		||||
  content: "\e602";
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										10096
									
								
								old/css/style.css
									
									
									
									
									
								
							
							
						
						
							
								
								
									
										
											BIN
										
									
								
								old/favicon.ico
									
									
									
									
									
								
							
							
						
						| 
		 Before Width: | Height: | Size: 264 KiB  | 
| 
		 Before Width: | Height: | Size: 5.1 KiB  | 
| 
		 Before Width: | Height: | Size: 5.1 KiB  | 
| 
		 Before Width: | Height: | Size: 39 KiB  | 
							
								
								
									
										201
									
								
								old/index.html
									
									
									
									
									
								
							
							
						
						@ -1,201 +0,0 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
    <!-- 基础信息 -->
 | 
			
		||||
    <meta charset="utf-8">
 | 
			
		||||
    <meta name="renderer" content="webkit" />
 | 
			
		||||
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 | 
			
		||||
    <meta name="force-rendering" content="webkit" />
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
    <meta name="description" content="無名の主页">
 | 
			
		||||
    <meta name="keywords" content="無名,个人主页">
 | 
			
		||||
    <meta name="author" content="無名">
 | 
			
		||||
    <title>無名の主页</title>
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/style.css">
 | 
			
		||||
    <link rel="stylesheet" type="text/css" href="./css/iconfont.css">
 | 
			
		||||
    <link rel="apple-touch-icon" href="./images/apple-touch-icon.png">
 | 
			
		||||
    <link rel="icon" href="./favicon.ico">
 | 
			
		||||
    <!--引入SweetAlert
 | 
			
		||||
    <script src="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>-->
 | 
			
		||||
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>
 | 
			
		||||
    <!--引入izitoast-->
 | 
			
		||||
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
 | 
			
		||||
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>
 | 
			
		||||
    <!--引入fontawesome-->
 | 
			
		||||
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
 | 
			
		||||
        media="all">
 | 
			
		||||
    <!--百度站长平台-->
 | 
			
		||||
    <script>
 | 
			
		||||
        var _hmt = _hmt || [];
 | 
			
		||||
        (function () {
 | 
			
		||||
            var hm = document.createElement("script");
 | 
			
		||||
            hm.src = "https://hm.baidu.com/hm.js?14e9f35ff8bc67fd4bcb5f07a6e6655a";
 | 
			
		||||
            var s = document.getElementsByTagName("script")[0];
 | 
			
		||||
            s.parentNode.insertBefore(hm, s);
 | 
			
		||||
        })();
 | 
			
		||||
    </script>
 | 
			
		||||
    <!--IE淘汰计划-->
 | 
			
		||||
    <script>if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);</script>
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
 | 
			
		||||
    <!--<span class="mobile btn-mobile-menu">
 | 
			
		||||
        <i class="social iconfont icon-list btn-mobile-menu__icon"></i>
 | 
			
		||||
        <i class="social iconfont icon-ngleup btn-mobile-close__icon hidden"></i>
 | 
			
		||||
    </span>-->
 | 
			
		||||
    <header id="panel" class="panel-cover">
 | 
			
		||||
        <div class="panel-main">
 | 
			
		||||
            <div class="panel-main__inner panel-inverted">
 | 
			
		||||
                <div class="panel-main__content">
 | 
			
		||||
                    <div class="ih-item circle effect right_to_left">
 | 
			
		||||
                        <a class="blog-button">
 | 
			
		||||
                            <div class="img"><img src="./images/logo.png" alt="img" class="js-avatar iUp profilepic">
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="info iUp">
 | 
			
		||||
                                <div class="info-back">
 | 
			
		||||
                                    <h2>Fighting</h2>
 | 
			
		||||
                                    <p>2021 · 努力中</p>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </a>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <h1 class="panel-cover__title panel-title iUp">
 | 
			
		||||
                        <br />hello
 | 
			
		||||
                    </h1>
 | 
			
		||||
                    <p class="panel-cover__subtitle panel-subtitle iUp">Welcome to my website</p>
 | 
			
		||||
                    <hr class="panel-cover__divider iUp" />
 | 
			
		||||
                    <!--一言无法显示时的文字-->
 | 
			
		||||
                    <p id="description" class="panel-cover__description iUp">每一个人都应该明确自己的方向和位置
 | 
			
		||||
                        <br />
 | 
			
		||||
                        <strong>-「無名」</strong>
 | 
			
		||||
                    </p>
 | 
			
		||||
                    <div class="navigation-wrapper iUp">
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <nav class="cover-navigation cover-navigation--primary">
 | 
			
		||||
                                <ul class="navigation">
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://blog.imsyy.top/" target="_blank" class="blog-button">
 | 
			
		||||
                                            <div>博客</div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <!--<a onclick="update()" class="blog-button">-->
 | 
			
		||||
                                        <a href="https://share.imsyy.top" target="_blank" class="blog-button">
 | 
			
		||||
                                            <div>网盘</div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://web.imsyy.top/" target="_blank" class="blog-button">
 | 
			
		||||
                                            <div>导航</div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://music.imsyy.top/" target="_blank" class="blog-button">
 | 
			
		||||
                                            <div>音乐</div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://imsyy.top/" class="blog-button">
 | 
			
		||||
                                            <div>前往新版</div>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                </ul>
 | 
			
		||||
                            </nav>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="iUp">
 | 
			
		||||
                            <nav class="cover-navigation navigation--social">
 | 
			
		||||
                                <ul class="navigation">
 | 
			
		||||
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://github.com/imsyy" title="Github" target="_blank">
 | 
			
		||||
                                            <i class="fas fa-code-branch"></i>
 | 
			
		||||
                                            <span class="label">Github</span>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://t.me/bottom_user" title="Telegram" target="_blank">
 | 
			
		||||
                                            <i class="fab fa-telegram-plane"></i>
 | 
			
		||||
                                            <span class="label">Telegram</span>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="https://twitter.com/woshisunyongyi" title="Twitter" target="_blank">
 | 
			
		||||
                                            <i class="fab fa-twitter"></i>
 | 
			
		||||
                                            <span class="label">Twitter</span>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="http://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes" title="QQ"
 | 
			
		||||
                                            target="_blank">
 | 
			
		||||
                                            <i class="fab fa-qq"></i>
 | 
			
		||||
                                            <span class="label">QQ</span>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a onclick="weixin()" title="微信" target="_blank">
 | 
			
		||||
                                            <i class="fab fa-weixin"></i>
 | 
			
		||||
                                            <script>
 | 
			
		||||
                                                function weixin() {
 | 
			
		||||
                                                    Swal.fire({
 | 
			
		||||
                                                        title: "请扫码",
 | 
			
		||||
                                                        text: "请使用微信扫一扫",
 | 
			
		||||
                                                        confirmButtonText: "好的",
 | 
			
		||||
                                                        imageUrl: "./images/weixin.png",
 | 
			
		||||
                                                        imageWidth: 150,
 | 
			
		||||
                                                        imageHeight: 150
 | 
			
		||||
                                                    })
 | 
			
		||||
                                                }
 | 
			
		||||
                                            </script>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                    <li class="navigation__item">
 | 
			
		||||
                                        <a href="mailto:one@imsyy.top" title="Email">
 | 
			
		||||
                                            <i class="fas fa-envelope"></i>
 | 
			
		||||
                                            <span class="label">Email</span>
 | 
			
		||||
                                        </a>
 | 
			
		||||
                                    </li>
 | 
			
		||||
                                </ul>
 | 
			
		||||
                            </nav>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="panel-cover--overlay cover-slate"></div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="remark iUp">
 | 
			
		||||
            <p class="power">Copyright © 2020
 | 
			
		||||
                <script>document.write(' - ' + (new Date()).getFullYear())</script> 無名
 | 
			
		||||
            </p>
 | 
			
		||||
        </div>
 | 
			
		||||
    </header>
 | 
			
		||||
    <!--izitoast弹窗设置-->
 | 
			
		||||
    <script>
 | 
			
		||||
        iziToast.settings({
 | 
			
		||||
            timeout: 4000,//调试
 | 
			
		||||
            icon: 'Fontawesome',
 | 
			
		||||
            closeOnEscape: 'true',
 | 
			
		||||
            position: 'topRight',
 | 
			
		||||
            transitionOut: 'fadeOutRight',
 | 
			
		||||
            displayMode: '2',
 | 
			
		||||
            layout: '2',
 | 
			
		||||
            transitionIn: 'bounceInLeft',
 | 
			
		||||
        });
 | 
			
		||||
    </script>
 | 
			
		||||
    <!--izitoast内容-->
 | 
			
		||||
    <script>
 | 
			
		||||
        function update() {
 | 
			
		||||
            iziToast.info({
 | 
			
		||||
                icon: 'fad fa-times-octagon',
 | 
			
		||||
                backgroundColor: '#efefef',
 | 
			
		||||
                title: '站点暂时关闭',
 | 
			
		||||
                message: '只是出现了一点小问题 ~'
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    </script>
 | 
			
		||||
    <script type="text/javascript" src="./js/jquery.min.js"></script>
 | 
			
		||||
    <script type="text/javascript" src="./js/fetch.min.js"></script>
 | 
			
		||||
    <script type="text/javascript" src="./js/main.js"></script>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										1
									
								
								old/js/fetch.min.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
							
								
								
									
										2
									
								
								old/js/jquery.min.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
							
								
								
									
										106
									
								
								old/js/main.js
									
									
									
									
									
								
							
							
						
						@ -1,106 +0,0 @@
 | 
			
		||||
var iUp = (function () {
 | 
			
		||||
	var t = 0,
 | 
			
		||||
		d = 150,
 | 
			
		||||
		clean = function () {
 | 
			
		||||
			t = 0;
 | 
			
		||||
		},
 | 
			
		||||
		up = function (e) {
 | 
			
		||||
			setTimeout(function () {
 | 
			
		||||
				$(e).addClass("up")
 | 
			
		||||
			}, t);
 | 
			
		||||
			t += d;
 | 
			
		||||
		},
 | 
			
		||||
		down = function (e) {
 | 
			
		||||
			$(e).removeClass("up");
 | 
			
		||||
		},
 | 
			
		||||
		toggle = function (e) {
 | 
			
		||||
			setTimeout(function () {
 | 
			
		||||
				$(e).toggleClass("up")
 | 
			
		||||
			}, t);
 | 
			
		||||
			t += d;
 | 
			
		||||
		};
 | 
			
		||||
	return {
 | 
			
		||||
		clean: clean,
 | 
			
		||||
		up: up,
 | 
			
		||||
		down: down,
 | 
			
		||||
		toggle: toggle
 | 
			
		||||
	}
 | 
			
		||||
})();
 | 
			
		||||
 | 
			
		||||
$(document).ready(function () {
 | 
			
		||||
 | 
			
		||||
	// 获取一言数据
 | 
			
		||||
	fetch('https://v1.hitokoto.cn').then(function (res) {
 | 
			
		||||
		return res.json();
 | 
			
		||||
	}).then(function (e) {
 | 
			
		||||
		$('#description').html(e.hitokoto + "<br/> -「<strong>" + e.from + "</strong>」")
 | 
			
		||||
	}).catch(function (err) {
 | 
			
		||||
		console.error(err);
 | 
			
		||||
	})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
	// var url = 'https://query.yahooapis.com/v1/public/yql' + 
 | 
			
		||||
	// '?q=' + encodeURIComponent('select * from json where url=@url') +
 | 
			
		||||
	// '&url=' + encodeURIComponent('https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8') +
 | 
			
		||||
	// '&format=json&callback=?';
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * 获取Bing壁纸
 | 
			
		||||
	 * 原先 YQL 已经无法提供服务了
 | 
			
		||||
	 * 改用 JsonBird:https://bird.ioliu.cn/
 | 
			
		||||
	 * 
 | 
			
		||||
	 */
 | 
			
		||||
	var url = 'https://bird.ioliu.cn/v1/?url=https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8';
 | 
			
		||||
	var imgUrls = JSON.parse(sessionStorage.getItem("imgUrls"));
 | 
			
		||||
	var index = sessionStorage.getItem("index");
 | 
			
		||||
	var $panel = $('#panel');
 | 
			
		||||
	if (imgUrls == null) {
 | 
			
		||||
		imgUrls = new Array();
 | 
			
		||||
		index = 0;
 | 
			
		||||
		$.get(url, function (result) {
 | 
			
		||||
			images = result.images;
 | 
			
		||||
			for (let i = 0; i < images.length; i++) {
 | 
			
		||||
				const item = images[i];
 | 
			
		||||
				imgUrls.push(item.url);
 | 
			
		||||
			}
 | 
			
		||||
			var imgUrl = imgUrls[index];
 | 
			
		||||
			var url = "https://www.bing.com" + imgUrl;
 | 
			
		||||
			$panel.css("background", "url('" + url + "') center center no-repeat #666");
 | 
			
		||||
			$panel.css("background-size", "cover");
 | 
			
		||||
			sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls));
 | 
			
		||||
			sessionStorage.setItem("index", index);
 | 
			
		||||
		});
 | 
			
		||||
	} else {
 | 
			
		||||
		if (index == 7)
 | 
			
		||||
			index = 0;
 | 
			
		||||
		else
 | 
			
		||||
			index++;
 | 
			
		||||
		var imgUrl = imgUrls[index];
 | 
			
		||||
		var url = "https://www.bing.com" + imgUrl;
 | 
			
		||||
		$panel.css("background", "url('" + url + "') center center no-repeat #666");
 | 
			
		||||
		$panel.css("background-size", "cover");
 | 
			
		||||
		sessionStorage.setItem("index", index);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	$(".iUp").each(function (i, e) {
 | 
			
		||||
		iUp.up(e);
 | 
			
		||||
	});
 | 
			
		||||
 | 
			
		||||
	$(".js-avatar")[0].onload = function () {
 | 
			
		||||
		$(".js-avatar").addClass("show");
 | 
			
		||||
	}
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
$('.btn-mobile-menu__icon').click(function () {
 | 
			
		||||
	if ($('.navigation-wrapper').css('display') == "block") {
 | 
			
		||||
		$('.navigation-wrapper').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
 | 
			
		||||
			$('.navigation-wrapper').toggleClass('visible animated bounceOutUp');
 | 
			
		||||
			$('.navigation-wrapper').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');
 | 
			
		||||
		});
 | 
			
		||||
		$('.navigation-wrapper').toggleClass('animated bounceInDown animated bounceOutUp');
 | 
			
		||||
 | 
			
		||||
	} else {
 | 
			
		||||
		$('.navigation-wrapper').toggleClass('visible animated bounceInDown');
 | 
			
		||||
	}
 | 
			
		||||
	$('.btn-mobile-menu__icon').toggleClass('social iconfont icon-list social iconfont icon-ngleup animated fadeIn');
 | 
			
		||||
});
 | 
			
		||||
							
								
								
									
										3596
									
								
								package-lock.json
									
									
									
										generated
									
									
									
										Normal file
									
								
							
							
						
						
							
								
								
									
										30
									
								
								package.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,30 @@
 | 
			
		||||
{
 | 
			
		||||
  "name": "home",
 | 
			
		||||
  "private": true,
 | 
			
		||||
  "version": "0.0.0",
 | 
			
		||||
  "type": "module",
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "dev": "vite",
 | 
			
		||||
    "build": "vite build",
 | 
			
		||||
    "preview": "vite preview"
 | 
			
		||||
  },
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "@icon-park/vue-next": "^1.4.2",
 | 
			
		||||
    "aplayer": "^1.10.1",
 | 
			
		||||
    "axios": "^1.1.3",
 | 
			
		||||
    "element-plus": "^2.2.18",
 | 
			
		||||
    "pinia": "^2.0.23",
 | 
			
		||||
    "vue": "^3.2.37"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "@vicons/fa": "^0.12.0",
 | 
			
		||||
    "@vicons/material": "^0.12.0",
 | 
			
		||||
    "@vicons/utils": "^0.1.4",
 | 
			
		||||
    "@vitejs/plugin-vue": "^3.1.0",
 | 
			
		||||
    "sass": "^1.55.0",
 | 
			
		||||
    "unplugin-auto-import": "^0.11.2",
 | 
			
		||||
    "unplugin-vue-components": "^0.22.8",
 | 
			
		||||
    "vite": "^3.1.0",
 | 
			
		||||
    "vite-plugin-html": "^3.2.0"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
		 Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB  | 
| 
		 Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB  | 
| 
		 Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB  | 
| 
		 Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/images/background4.webp
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 109 KiB  | 
| 
		 Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB  | 
| 
		 Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB  | 
| 
		 Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB  | 
| 
		 Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB  | 
| 
		 Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB  | 
| 
		 Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB  | 
| 
		 Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB  | 
| 
		 Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB  | 
| 
		 Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB  | 
| 
		 Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB  | 
| 
		 Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB  | 
| 
		 Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB  | 
| 
		 Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB  | 
| 
		 Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB  | 
| 
		 Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB  | 
| 
		 Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB  | 
| 
		 Before Width: | Height: | Size: 264 KiB After Width: | Height: | Size: 264 KiB  | 
| 
		 Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB  | 
| 
		 Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB  | 
| 
		 Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB  | 
| 
		 Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB  | 
| 
		 Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB  | 
@ -1,11 +1,16 @@
 | 
			
		||||
* {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
    padding: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#loading-box .loading-left-bg,
 | 
			
		||||
#loading-box .loading-right-bg {
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    z-index: 999998;
 | 
			
		||||
    width: 50%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-color: rgb(81 81 81 / 80%);
 | 
			
		||||
    transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
 | 
			
		||||
    background-color: #515151e0;
 | 
			
		||||
    transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
 | 
			
		||||
    backdrop-filter: blur(10px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -31,7 +36,7 @@
 | 
			
		||||
    text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
p.loading-title {
 | 
			
		||||
.loading-title {
 | 
			
		||||
    font-size: 1.25rem;
 | 
			
		||||
    margin: 20px 10px 4px 10px;
 | 
			
		||||
}
 | 
			
		||||
@ -42,15 +47,16 @@ p.loading-title {
 | 
			
		||||
    background-color: #37474f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
div.loaded div.loading-left-bg {
 | 
			
		||||
/* 加载完成 */
 | 
			
		||||
.loaded .loading-left-bg {
 | 
			
		||||
    transform: translate(-100%, 0);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
div.loaded div.loading-right-bg {
 | 
			
		||||
.loaded .loading-right-bg {
 | 
			
		||||
    transform: translate(100%, 0);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
div.loaded div.spinner-box {
 | 
			
		||||
.loaded .spinner-box {
 | 
			
		||||
    display: none !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										1
									
								
								public/loading/loading.min.css
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1 @@
 | 
			
		||||
*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999998;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
 | 
			
		||||
							
								
								
									
										46
									
								
								setting.json
									
									
									
									
									
								
							
							
						
						@ -1,46 +0,0 @@
 | 
			
		||||
{
 | 
			
		||||
    "title": "無名の主页",
 | 
			
		||||
    "description": "一个默默无闻的主页",
 | 
			
		||||
    "keywords": "無名,个人主页",
 | 
			
		||||
    "author": "無名",
 | 
			
		||||
    "logo_img": "./img/icon/logo.png",
 | 
			
		||||
    "logo_text_1": "imsyy",
 | 
			
		||||
    "logo_text_2": "top",
 | 
			
		||||
    "github": "imsyy",
 | 
			
		||||
    "qq": "1539250352",
 | 
			
		||||
    "email": "one@imsyy.top",
 | 
			
		||||
    "bilibili": "98544142",
 | 
			
		||||
    "telegram": "bottom_user",
 | 
			
		||||
    "link_1": [
 | 
			
		||||
        "https://blog.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-blog",
 | 
			
		||||
        "博客"
 | 
			
		||||
    ],
 | 
			
		||||
    "link_2": [
 | 
			
		||||
        "https://drive.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-cloud",
 | 
			
		||||
        "网盘"
 | 
			
		||||
    ],
 | 
			
		||||
    "link_3": [
 | 
			
		||||
        "https://music.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-music",
 | 
			
		||||
        "音乐"
 | 
			
		||||
    ],
 | 
			
		||||
    "link_4": [
 | 
			
		||||
        "https://nav.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-compass",
 | 
			
		||||
        "起始页"
 | 
			
		||||
    ],
 | 
			
		||||
    "link_5": [
 | 
			
		||||
        "https://web.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-book-bookmark",
 | 
			
		||||
        "网址集"
 | 
			
		||||
    ],
 | 
			
		||||
    "link_6": [
 | 
			
		||||
        "https://lab.imsyy.top/",
 | 
			
		||||
        "fa-solid fa-flask",
 | 
			
		||||
        "实验室"
 | 
			
		||||
    ],
 | 
			
		||||
    "Copyright_text": "無名",
 | 
			
		||||
    "beian": "豫ICP备2022018134号-1"
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										85
									
								
								src/App.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,85 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="animate">
 | 
			
		||||
    <Background />
 | 
			
		||||
    <main>
 | 
			
		||||
      <div class="container">
 | 
			
		||||
        <MainLeft />
 | 
			
		||||
        <MainRight v-show="!store.boxOpenState" />
 | 
			
		||||
        <Box v-show="store.boxOpenState" />
 | 
			
		||||
        <!-- {{ store.getInnerWidth }} -->
 | 
			
		||||
      </div>
 | 
			
		||||
    </main>
 | 
			
		||||
    <Footer />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { onMounted, onBeforeUnmount } from "vue";
 | 
			
		||||
import MainLeft from "@/views/Main/Left.vue";
 | 
			
		||||
import MainRight from "@/views/Main/Right.vue";
 | 
			
		||||
import Background from "@/components/Background/index.vue";
 | 
			
		||||
import Footer from "@/components/Footer/index.vue";
 | 
			
		||||
import Box from "@/views/Box/index.vue";
 | 
			
		||||
import cursorInit from "@/utils/cursor.js";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
// 页面宽度
 | 
			
		||||
const getWidth = () => {
 | 
			
		||||
  store.setInnerWidth(window.innerWidth);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  // 自定义鼠标
 | 
			
		||||
  cursorInit();
 | 
			
		||||
  // 加载完成事件
 | 
			
		||||
  window.addEventListener("load", () => {
 | 
			
		||||
    console.log("加载完成");
 | 
			
		||||
    // 去除加载标记
 | 
			
		||||
    document.getElementsByTagName("body")[0].className = "";
 | 
			
		||||
    // 给加载动画添加结束标记
 | 
			
		||||
    let loadingBox = document.getElementById("loading-box");
 | 
			
		||||
    loadingBox.classList.add("loaded");
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // 监听当前页面宽度
 | 
			
		||||
  getWidth();
 | 
			
		||||
  window.addEventListener("resize", getWidth());
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
onBeforeUnmount(() => {
 | 
			
		||||
  window.removeEventListener("resize", getWidth());
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
main {
 | 
			
		||||
  .container {
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    padding: 0 0.75rem;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100vh;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 加载动画层
 | 
			
		||||
.animate {
 | 
			
		||||
  transform: scale(1);
 | 
			
		||||
  transition: all ease 1.25s;
 | 
			
		||||
  opacity: 1;
 | 
			
		||||
  filter: blur(0);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.loading {
 | 
			
		||||
  .animate {
 | 
			
		||||
    transform: scale(1.2);
 | 
			
		||||
    transition: all ease 1.25s;
 | 
			
		||||
    opacity: 0;
 | 
			
		||||
    filter: blur(10px);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										38
									
								
								src/api/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,38 @@
 | 
			
		||||
// import axios from "axios";
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 音乐播放器
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
// 获取音乐播放列表
 | 
			
		||||
export const getPlayerList = async (server, type, id) => {
 | 
			
		||||
    const res = await fetch(`https://api-meting.imsyy.top/?server=${server}&type=${type}&id=${id}`);
 | 
			
		||||
    return await res.json();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 一言
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
// 获取一言数据
 | 
			
		||||
export const getHitokoto = async () => {
 | 
			
		||||
    const res = await fetch("https://v1.hitokoto.cn");
 | 
			
		||||
    return await res.json();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 天气
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 获取高德地理位置信息
 | 
			
		||||
export const getAdcode = async (key) => {
 | 
			
		||||
    const res = await fetch(`https://restapi.amap.com/v3/ip?key=${key}`);
 | 
			
		||||
    return await res.json();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获取高德地理天气信息
 | 
			
		||||
export const getWeather = async (key, city) => {
 | 
			
		||||
    const res = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`);
 | 
			
		||||
    return await res.json();
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										1
									
								
								src/assets/vue.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1 @@
 | 
			
		||||
<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>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 496 B  | 
							
								
								
									
										316
									
								
								src/components/APlayer/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,316 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div ref="playerRef"></div>
 | 
			
		||||
</template>
 | 
			
		||||
 
 | 
			
		||||
<script setup>
 | 
			
		||||
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
 | 
			
		||||
import APlayer from "APlayer";
 | 
			
		||||
import "APlayer/dist/APlayer.min.css";
 | 
			
		||||
import {
 | 
			
		||||
  h,
 | 
			
		||||
  ref,
 | 
			
		||||
  reactive,
 | 
			
		||||
  nextTick,
 | 
			
		||||
  onMounted,
 | 
			
		||||
  onBeforeUnmount,
 | 
			
		||||
  watch,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import { getPlayerList } from "@/api";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
const playerRef = ref();
 | 
			
		||||
const state = reactive({
 | 
			
		||||
  instance: null,
 | 
			
		||||
});
 | 
			
		||||
const playerData = reactive({
 | 
			
		||||
  name: null,
 | 
			
		||||
  artist: null,
 | 
			
		||||
  lrc: null,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// APlayer歌曲信息
 | 
			
		||||
class Audio {
 | 
			
		||||
  // 音频艺术家
 | 
			
		||||
  // artist: String;
 | 
			
		||||
  // 音频名称
 | 
			
		||||
  // name: String;
 | 
			
		||||
  // 音频链接
 | 
			
		||||
  // url: String;
 | 
			
		||||
  // 音频封面
 | 
			
		||||
  // cover: String;
 | 
			
		||||
  // 歌词
 | 
			
		||||
  // lrc: String;
 | 
			
		||||
 | 
			
		||||
  constructor(artist, name, url, cover, lrc) {
 | 
			
		||||
    this.artist = artist;
 | 
			
		||||
    this.name = name;
 | 
			
		||||
    this.url = url;
 | 
			
		||||
    this.cover = cover;
 | 
			
		||||
    this.lrc = lrc;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = defineProps({
 | 
			
		||||
  // 开启吸底模式
 | 
			
		||||
  fixed: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  // 开启迷你模式
 | 
			
		||||
  mini: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  // 音频自动播放
 | 
			
		||||
  autoplay: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  // 主题色
 | 
			
		||||
  theme: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "#efefef",
 | 
			
		||||
  },
 | 
			
		||||
  // 音频循环播放
 | 
			
		||||
  loop: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "all", //'all' | 'one' | 'none'
 | 
			
		||||
  },
 | 
			
		||||
  // 音频循环顺序
 | 
			
		||||
  order: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "random", //'list' | 'random'
 | 
			
		||||
  },
 | 
			
		||||
  // 预加载
 | 
			
		||||
  preload: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "auto", //'auto' | 'metadata' | 'none'
 | 
			
		||||
  },
 | 
			
		||||
  // 默认音量
 | 
			
		||||
  volume: {
 | 
			
		||||
    type: Number,
 | 
			
		||||
    default: 0.7,
 | 
			
		||||
    validator: (value) => {
 | 
			
		||||
      return value >= 0 && value <= 1;
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  // 歌曲服务器 ( netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐 )
 | 
			
		||||
  songServer: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "netease", //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
 | 
			
		||||
  },
 | 
			
		||||
  // 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
 | 
			
		||||
  songType: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "playlist",
 | 
			
		||||
  },
 | 
			
		||||
  // id
 | 
			
		||||
  songId: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "7452421335",
 | 
			
		||||
  },
 | 
			
		||||
  // 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
 | 
			
		||||
  mutex: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: true,
 | 
			
		||||
  },
 | 
			
		||||
  // 传递歌词方式
 | 
			
		||||
  lrcType: {
 | 
			
		||||
    type: Number,
 | 
			
		||||
    default: 3,
 | 
			
		||||
  },
 | 
			
		||||
  // 列表是否默认折叠
 | 
			
		||||
  listFolded: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  // 列表最大高度
 | 
			
		||||
  listMaxHeight: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "420px",
 | 
			
		||||
  },
 | 
			
		||||
  // 存储播放器设置的 localStorage key
 | 
			
		||||
  storageName: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: "aplayer-setting",
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 初始化播放器
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    getPlayerList(props.songServer, props.songType, props.songId)
 | 
			
		||||
      .then((res) => {
 | 
			
		||||
        // console.log(res);
 | 
			
		||||
        // 更改播放器加载状态
 | 
			
		||||
        store.musicIsOk = true;
 | 
			
		||||
        console.log("音乐加载完成");
 | 
			
		||||
        let audioList = res.map(
 | 
			
		||||
          (value) =>
 | 
			
		||||
            new Audio(value.artist, value.name, value.url, value.pic, value.lrc)
 | 
			
		||||
        );
 | 
			
		||||
        state.instance = new APlayer({
 | 
			
		||||
          container: playerRef.value,
 | 
			
		||||
          fixed: props.fixed,
 | 
			
		||||
          mini: props.mini,
 | 
			
		||||
          autoplay: props.autoplay,
 | 
			
		||||
          theme: props.theme,
 | 
			
		||||
          loop: props.loop,
 | 
			
		||||
          order: props.order,
 | 
			
		||||
          preload: props.preload,
 | 
			
		||||
          volume: props.volume,
 | 
			
		||||
          mutex: props.mutex,
 | 
			
		||||
          lrcType: props.lrcType,
 | 
			
		||||
          listFolded: props.listFolded,
 | 
			
		||||
          listMaxHeight: props.listMaxHeight,
 | 
			
		||||
          storageName: props.storageName,
 | 
			
		||||
          audio: audioList,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        state.instance.on("play", () => {
 | 
			
		||||
          // 播放状态
 | 
			
		||||
          store.setPlayerState(state.instance.audio.paused);
 | 
			
		||||
          // 储存播放器信息
 | 
			
		||||
          store.setPlayerData(
 | 
			
		||||
            playerRef.value.getElementsByClassName("aplayer-title")[0]
 | 
			
		||||
              .innerHTML,
 | 
			
		||||
            playerRef.value
 | 
			
		||||
              .getElementsByClassName("aplayer-author")[0]
 | 
			
		||||
              .innerHTML.split("-")[1]
 | 
			
		||||
              .trim()
 | 
			
		||||
          );
 | 
			
		||||
          ElMessage({
 | 
			
		||||
            message:
 | 
			
		||||
              store.getPlayerData.name + " - " + store.getPlayerData.artist,
 | 
			
		||||
            grouping: true,
 | 
			
		||||
            icon: h(MusicOne, {
 | 
			
		||||
              theme: "filled",
 | 
			
		||||
              fill: "#efefef",
 | 
			
		||||
            }),
 | 
			
		||||
          });
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        state.instance.on("pause", () => {
 | 
			
		||||
          // 播放状态
 | 
			
		||||
          store.setPlayerState(state.instance.audio.paused);
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        state.instance.on("timeupdate", () => {
 | 
			
		||||
          playerData.lrc = playerRef.value.getElementsByClassName(
 | 
			
		||||
            "aplayer-lrc-current"
 | 
			
		||||
          )[0].innerHTML;
 | 
			
		||||
        });
 | 
			
		||||
      })
 | 
			
		||||
      .catch(() => {
 | 
			
		||||
        ElMessage({
 | 
			
		||||
          message: "播放器加载失败",
 | 
			
		||||
          grouping: true,
 | 
			
		||||
          icon: h(PlayWrong, {
 | 
			
		||||
            theme: "filled",
 | 
			
		||||
            fill: "#efefef",
 | 
			
		||||
          }),
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 销毁播放器
 | 
			
		||||
onBeforeUnmount(() => {
 | 
			
		||||
  state.instance.destroy();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 切换播放暂停事件
 | 
			
		||||
const playToggle = () => {
 | 
			
		||||
  state.instance.toggle();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 切换音量事件
 | 
			
		||||
const changeVolume = (value) => {
 | 
			
		||||
  state.instance.volume(value);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 切换上下曲
 | 
			
		||||
const changeSongPrev = () => {
 | 
			
		||||
  state.instance.skipBack();
 | 
			
		||||
};
 | 
			
		||||
const changeSongNext = () => {
 | 
			
		||||
  state.instance.skipForward();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 暴露子组件方法
 | 
			
		||||
defineExpose({ playToggle, changeVolume, changeSongPrev, changeSongNext });
 | 
			
		||||
 | 
			
		||||
// 监听歌词变化
 | 
			
		||||
watch(
 | 
			
		||||
  () => playerData.lrc,
 | 
			
		||||
  (value) => {
 | 
			
		||||
    console.log(value);
 | 
			
		||||
    // 储存至 pinia
 | 
			
		||||
    store.setPlayerLrc(value);
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
<style lang='scss' scoped>
 | 
			
		||||
.aplayer {
 | 
			
		||||
  width: 80%;
 | 
			
		||||
  background: transparent;
 | 
			
		||||
  border-radius: 6px;
 | 
			
		||||
  :deep(.aplayer-body) {
 | 
			
		||||
    .aplayer-pic {
 | 
			
		||||
      display: none;
 | 
			
		||||
    }
 | 
			
		||||
    .aplayer-info {
 | 
			
		||||
      margin-left: 0;
 | 
			
		||||
      background-color: #ffffff40;
 | 
			
		||||
      border-color: transparent;
 | 
			
		||||
      .aplayer-title {
 | 
			
		||||
        font-size: 16px;
 | 
			
		||||
      }
 | 
			
		||||
      .aplayer-author {
 | 
			
		||||
        color: #efefef;
 | 
			
		||||
      }
 | 
			
		||||
      .aplayer-lrc {
 | 
			
		||||
        text-align: left;
 | 
			
		||||
        margin: 4px 0 0 6px;
 | 
			
		||||
        height: 38px;
 | 
			
		||||
        &::before,
 | 
			
		||||
        &::after {
 | 
			
		||||
          display: none;
 | 
			
		||||
        }
 | 
			
		||||
        p {
 | 
			
		||||
          color: #efefef;
 | 
			
		||||
        }
 | 
			
		||||
        .aplayer-lrc-current {
 | 
			
		||||
          font-size: 0.95rem;
 | 
			
		||||
          margin-bottom: 4px !important;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      .aplayer-controller {
 | 
			
		||||
        display: none;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  :deep(.aplayer-list) {
 | 
			
		||||
    margin-top: 6px;
 | 
			
		||||
    ol {
 | 
			
		||||
      li {
 | 
			
		||||
        border-color: transparent;
 | 
			
		||||
        &.aplayer-list-light {
 | 
			
		||||
          background: #ffffff40;
 | 
			
		||||
          border-radius: 6px;
 | 
			
		||||
        }
 | 
			
		||||
        &:hover {
 | 
			
		||||
          background: #ffffff26 !important;
 | 
			
		||||
          border-radius: 6px !important;
 | 
			
		||||
        }
 | 
			
		||||
        .aplayer-list-index,
 | 
			
		||||
        .aplayer-list-author {
 | 
			
		||||
          color: #efefef;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										77
									
								
								src/components/Background/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,77 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="cover">
 | 
			
		||||
    <img class="bg" :src="bgUrl" alt="cover" />
 | 
			
		||||
    <div class="gray"></div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { onMounted, ref } from "vue";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
let bgUrl = ref(null); // 壁纸链接
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  // 加载壁纸
 | 
			
		||||
  if (store.coverType == 0) {
 | 
			
		||||
    bgUrl.value = `/images/background${Math.floor(
 | 
			
		||||
      Math.random() * 10 + 1
 | 
			
		||||
    )}.webp`;
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.cover {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  transition: 0.25s;
 | 
			
		||||
  z-index: -1;
 | 
			
		||||
  .bg {
 | 
			
		||||
    transform: scale(1);
 | 
			
		||||
    filter: blur(0);
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    object-fit: cover;
 | 
			
		||||
    transition: all 1.5s ease 0s;
 | 
			
		||||
    backface-visibility: hidden;
 | 
			
		||||
  }
 | 
			
		||||
  .gray {
 | 
			
		||||
    opacity: 1;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-image: radial-gradient(
 | 
			
		||||
        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%);
 | 
			
		||||
 | 
			
		||||
    transition: 1.5s;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 加载时动画
 | 
			
		||||
.loading {
 | 
			
		||||
  .cover {
 | 
			
		||||
    .bg {
 | 
			
		||||
      transition: 1.5s;
 | 
			
		||||
      transform: scale(1.1);
 | 
			
		||||
      filter: blur(10px);
 | 
			
		||||
    }
 | 
			
		||||
    .gray {
 | 
			
		||||
      transition: 1.5s;
 | 
			
		||||
      opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										68
									
								
								src/components/Footer/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,68 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <footer>
 | 
			
		||||
    <Transition name="fade">
 | 
			
		||||
      <div class="power" v-show="!store.playerState">
 | 
			
		||||
        <span
 | 
			
		||||
          >Copyright © {{ fullYear }}
 | 
			
		||||
          <a href="https://imsyy.top">無名</a>
 | 
			
		||||
        </span>
 | 
			
		||||
        <!-- 以下信息请不要修改哦 -->
 | 
			
		||||
        <span
 | 
			
		||||
          > & Made by <a
 | 
			
		||||
            href="https://github.com/imsyy/home"
 | 
			
		||||
            target="_blank"
 | 
			
		||||
            >imsyy</a
 | 
			
		||||
          > </span
 | 
			
		||||
        > &
 | 
			
		||||
        <!-- 站点备案 -->
 | 
			
		||||
        <a href="https://beian.miit.gov.cn" target="_blank"
 | 
			
		||||
          >豫ICP备2022018134号-1</a
 | 
			
		||||
        >
 | 
			
		||||
      </div>
 | 
			
		||||
    </Transition>
 | 
			
		||||
    <Transition name="fade">
 | 
			
		||||
      <div class="lrc" v-show="store.playerState">
 | 
			
		||||
        <music-one theme="filled" size="18" fill="#efefef" />
 | 
			
		||||
        <span class="lrc-text">{{ store.getPlayerLrc }}</span>
 | 
			
		||||
        <music-one theme="filled" size="18" fill="#efefef" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </Transition>
 | 
			
		||||
  </footer>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { MusicOne } from "@icon-park/vue-next";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
let fullYear = new Date().getFullYear();
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
footer {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  bottom: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  height: 46px;
 | 
			
		||||
  line-height: 46px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  backdrop-filter: blur(10px);
 | 
			
		||||
  background: rgb(0 0 0 / 25%);
 | 
			
		||||
  z-index: 0;
 | 
			
		||||
  .lrc {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    .lrc-text {
 | 
			
		||||
      margin: 0 8px;
 | 
			
		||||
    }
 | 
			
		||||
    .i-icon {
 | 
			
		||||
      width: 18px;
 | 
			
		||||
      height: 18px;
 | 
			
		||||
      display: inherit;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										131
									
								
								src/components/Hitokoto/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,131 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div
 | 
			
		||||
    class="hitokoto cards"
 | 
			
		||||
    v-show="!store.musicOpenState"
 | 
			
		||||
    @mouseenter="openMusicShow = true"
 | 
			
		||||
    @mouseleave="openMusicShow = false"
 | 
			
		||||
    @click.stop
 | 
			
		||||
  >
 | 
			
		||||
    <!-- 打开音乐面板 -->
 | 
			
		||||
    <Transition name="fade">
 | 
			
		||||
      <div
 | 
			
		||||
        class="open-music"
 | 
			
		||||
        v-show="openMusicShow && store.musicIsOk"
 | 
			
		||||
        @click="store.musicOpenState = true"
 | 
			
		||||
      >
 | 
			
		||||
        <music-menu theme="filled" size="18" fill="#efefef" />
 | 
			
		||||
        <span>打开音乐播放器</span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </Transition>
 | 
			
		||||
    <!-- 一言内容 -->
 | 
			
		||||
    <div class="content" @click="updateHitokoto">
 | 
			
		||||
      <span class="text">{{ hitokotoData.text }}</span>
 | 
			
		||||
      <span class="from">-「 {{ hitokotoData.from }} 」</span>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { reactive, ref, onMounted, h } from "vue";
 | 
			
		||||
import { MusicMenu, Error } from "@icon-park/vue-next";
 | 
			
		||||
import { getHitokoto } from "@/api";
 | 
			
		||||
import debounce from "@/utils/debounce.js";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
// 开启音乐面板按钮显隐
 | 
			
		||||
let openMusicShow = ref(false);
 | 
			
		||||
 | 
			
		||||
// 一言数据
 | 
			
		||||
let hitokotoData = reactive({
 | 
			
		||||
  text: "这里应该显示一句话",
 | 
			
		||||
  from: "無名",
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 打开音乐面板
 | 
			
		||||
const openMusic = () => {};
 | 
			
		||||
 | 
			
		||||
// 获取一言数据
 | 
			
		||||
const getHitokotoData = () => {
 | 
			
		||||
  getHitokoto()
 | 
			
		||||
    .then((res) => {
 | 
			
		||||
      hitokotoData.text = res.hitokoto;
 | 
			
		||||
      hitokotoData.from = res.from;
 | 
			
		||||
    })
 | 
			
		||||
    .catch(() => {
 | 
			
		||||
      ElMessage({
 | 
			
		||||
        message: "一言获取失败",
 | 
			
		||||
        icon: h(Error, {
 | 
			
		||||
          theme: "filled",
 | 
			
		||||
          fill: "#efefef",
 | 
			
		||||
        }),
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 更新一言数据
 | 
			
		||||
const updateHitokoto = () => {
 | 
			
		||||
  hitokotoData.text = "新的一言正在赶来的路上";
 | 
			
		||||
  hitokotoData.from = "来源加载中";
 | 
			
		||||
  // 防抖
 | 
			
		||||
  debounce(() => {
 | 
			
		||||
    getHitokotoData();
 | 
			
		||||
  }, 500);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  getHitokotoData();
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.hitokoto {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  padding: 20px;
 | 
			
		||||
  animation: fade;
 | 
			
		||||
  -webkit-animation: fade 0.5s;
 | 
			
		||||
  .open-music {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    background: #00000026;
 | 
			
		||||
    padding: 4px 0;
 | 
			
		||||
    border-radius: 8px 8px 0 0;
 | 
			
		||||
    .i-icon {
 | 
			
		||||
      width: 18px;
 | 
			
		||||
      height: 18px;
 | 
			
		||||
      display: block;
 | 
			
		||||
      margin-right: 8px;
 | 
			
		||||
    }
 | 
			
		||||
    span {
 | 
			
		||||
      font-size: 0.95rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .content {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    justify-content: space-evenly;
 | 
			
		||||
    .text {
 | 
			
		||||
      font-size: 1.1rem;
 | 
			
		||||
      word-break: break-all;
 | 
			
		||||
      text-overflow: ellipsis;
 | 
			
		||||
      overflow: hidden;
 | 
			
		||||
      display: -webkit-box;
 | 
			
		||||
      -webkit-line-clamp: 3;
 | 
			
		||||
      -webkit-box-orient: vertical;
 | 
			
		||||
    }
 | 
			
		||||
    .from {
 | 
			
		||||
      margin-top: 10px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
      align-self: flex-end;
 | 
			
		||||
      font-size: 1.1rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										115
									
								
								src/components/Links/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,115 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="links">
 | 
			
		||||
    <div class="line">
 | 
			
		||||
      <Icon size="20">
 | 
			
		||||
        <Link />
 | 
			
		||||
      </Icon>
 | 
			
		||||
      <span class="title">网站列表</span>
 | 
			
		||||
    </div>
 | 
			
		||||
    <el-row class="link-all" :gutter="20">
 | 
			
		||||
      <el-col
 | 
			
		||||
        :span="8"
 | 
			
		||||
        v-for="item in linksData"
 | 
			
		||||
        :key="item"
 | 
			
		||||
        @click="jumpLink(item.link)"
 | 
			
		||||
      >
 | 
			
		||||
        <div class="item cards">
 | 
			
		||||
          <Icon size="26">
 | 
			
		||||
            <component :is="item.icon" />
 | 
			
		||||
          </Icon>
 | 
			
		||||
          <span class="name">{{ item.name }}</span>
 | 
			
		||||
        </div>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref } from "vue";
 | 
			
		||||
import { Icon } from "@vicons/utils";
 | 
			
		||||
import {
 | 
			
		||||
  Link,
 | 
			
		||||
  Blog,
 | 
			
		||||
  CompactDisc,
 | 
			
		||||
  Cloud,
 | 
			
		||||
  Compass,
 | 
			
		||||
  Book,
 | 
			
		||||
  Flask,
 | 
			
		||||
} from "@vicons/fa";
 | 
			
		||||
 | 
			
		||||
// 网站链接数据
 | 
			
		||||
let linksData = [
 | 
			
		||||
  {
 | 
			
		||||
    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: Flask,
 | 
			
		||||
    name: "实验室",
 | 
			
		||||
    link: "https://lab.imsyy.top/",
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
// 链接跳转
 | 
			
		||||
const jumpLink = (url) => {
 | 
			
		||||
  window.open(url, "_blank");
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.links {
 | 
			
		||||
  .line {
 | 
			
		||||
    margin: 2rem 0.25rem 1rem;
 | 
			
		||||
    font-size: 1.1rem;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    animation: fade;
 | 
			
		||||
    -webkit-animation: fade 0.5s;
 | 
			
		||||
    .title {
 | 
			
		||||
      margin-left: 8px;
 | 
			
		||||
      font-size: 1.15rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .link-all {
 | 
			
		||||
    .item {
 | 
			
		||||
      height: 100px;
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin-bottom: 20px;
 | 
			
		||||
      display: flex;
 | 
			
		||||
      align-items: center;
 | 
			
		||||
      flex-direction: row;
 | 
			
		||||
      justify-content: center;
 | 
			
		||||
      .name {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        margin-left: 8px;
 | 
			
		||||
      }
 | 
			
		||||
      &:hover {
 | 
			
		||||
        transform: scale(1.02);
 | 
			
		||||
        background: rgb(0 0 0 / 40%);
 | 
			
		||||
        transition: 0.3s;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										110
									
								
								src/components/Message/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,110 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <!-- 基本信息 -->
 | 
			
		||||
  <div class="message">
 | 
			
		||||
    <!-- Logo -->
 | 
			
		||||
    <div class="logo">
 | 
			
		||||
      <img class="logo-img" src="/images/icon/logo.png" alt="logo" />
 | 
			
		||||
      <div class="name">
 | 
			
		||||
        <span class="bg">imsyy</span>
 | 
			
		||||
        <span class="sm">.top</span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <!-- 简介 -->
 | 
			
		||||
    <div class="description cards" @click="changeBox">
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <Icon size="16">
 | 
			
		||||
          <QuoteLeft />
 | 
			
		||||
        </Icon>
 | 
			
		||||
        <div class="text">
 | 
			
		||||
          <p>{{ descriptionText.hello }}</p>
 | 
			
		||||
          <p>{{ descriptionText.text }}</p>
 | 
			
		||||
        </div>
 | 
			
		||||
        <Icon size="16">
 | 
			
		||||
          <QuoteRight />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { reactive, watch } from "vue";
 | 
			
		||||
import { Icon } from "@vicons/utils";
 | 
			
		||||
import { QuoteLeft, QuoteRight } from "@vicons/fa";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
// 简介区域文字
 | 
			
		||||
let descriptionText = reactive({
 | 
			
		||||
  hello: import.meta.env.VITE_DESC_HELLO,
 | 
			
		||||
  text: import.meta.env.VITE_DESC_TEXT,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 切换右侧功能区
 | 
			
		||||
const changeBox = () => {
 | 
			
		||||
  store.boxOpenState = !store.boxOpenState;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 监听状态变化
 | 
			
		||||
watch(
 | 
			
		||||
  () => store.boxOpenState,
 | 
			
		||||
  (value) => {
 | 
			
		||||
    if (value) {
 | 
			
		||||
      descriptionText.hello = import.meta.env.VITE_DESC_HELLO_OTHER;
 | 
			
		||||
      descriptionText.text = import.meta.env.VITE_DESC_TEXT_OTHER;
 | 
			
		||||
    } else {
 | 
			
		||||
      descriptionText.hello = import.meta.env.VITE_DESC_HELLO;
 | 
			
		||||
      descriptionText.text = import.meta.env.VITE_DESC_TEXT;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.message {
 | 
			
		||||
  .logo {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    .logo-img {
 | 
			
		||||
      border-radius: 50%;
 | 
			
		||||
      width: 120px;
 | 
			
		||||
    }
 | 
			
		||||
    .name {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      margin-left: 12px;
 | 
			
		||||
      transform: translateY(-8px);
 | 
			
		||||
      font-family: "Pacifico-Regular";
 | 
			
		||||
      .bg {
 | 
			
		||||
        font-size: 5rem;
 | 
			
		||||
      }
 | 
			
		||||
      .sm {
 | 
			
		||||
        margin-left: 6px;
 | 
			
		||||
        font-size: 2rem;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .description {
 | 
			
		||||
    padding: 1rem;
 | 
			
		||||
    margin-top: 3.5rem;
 | 
			
		||||
    max-width: 460px;
 | 
			
		||||
    .content {
 | 
			
		||||
      display: flex;
 | 
			
		||||
      justify-content: space-between;
 | 
			
		||||
      .text {
 | 
			
		||||
        margin: 0.75rem auto;
 | 
			
		||||
        line-height: 2rem;
 | 
			
		||||
        margin-right: auto;
 | 
			
		||||
        p {
 | 
			
		||||
          &:nth-of-type(1) {
 | 
			
		||||
            font-family: "Pacifico-Regular";
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      .xicon:nth-of-type(2) {
 | 
			
		||||
        align-self: flex-end;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										334
									
								
								src/components/Music/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,334 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <!-- 音乐控制面板 -->
 | 
			
		||||
  <div
 | 
			
		||||
    class="music"
 | 
			
		||||
    @mouseenter="volumeShow = true"
 | 
			
		||||
    @mouseleave="volumeShow = false"
 | 
			
		||||
    v-show="store.musicOpenState"
 | 
			
		||||
  >
 | 
			
		||||
    <div class="btns">
 | 
			
		||||
      <span @click="musicListShow = true">音乐列表</span>
 | 
			
		||||
      <span @click="store.musicOpenState = false">回到一言</span>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="control">
 | 
			
		||||
      <go-start
 | 
			
		||||
        theme="filled"
 | 
			
		||||
        size="30"
 | 
			
		||||
        fill="#efefef"
 | 
			
		||||
        @click="changeMusicIndex(0)"
 | 
			
		||||
      />
 | 
			
		||||
      <div class="state" @click="changePlayState">
 | 
			
		||||
        <play-one
 | 
			
		||||
          theme="filled"
 | 
			
		||||
          size="50"
 | 
			
		||||
          fill="#efefef"
 | 
			
		||||
          v-show="!store.playerState"
 | 
			
		||||
        />
 | 
			
		||||
        <pause
 | 
			
		||||
          theme="filled"
 | 
			
		||||
          size="50"
 | 
			
		||||
          fill="#efefef"
 | 
			
		||||
          v-show="store.playerState"
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
      <go-end
 | 
			
		||||
        theme="filled"
 | 
			
		||||
        size="30"
 | 
			
		||||
        fill="#efefef"
 | 
			
		||||
        @click="changeMusicIndex(1)"
 | 
			
		||||
      />
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="menu">
 | 
			
		||||
      <Transition name="fade">
 | 
			
		||||
        <div class="name" v-show="!volumeShow">
 | 
			
		||||
          <span>{{
 | 
			
		||||
            store.getPlayerData.name
 | 
			
		||||
              ? store.getPlayerData.name + " - " + store.getPlayerData.artist
 | 
			
		||||
              : "未播放音乐"
 | 
			
		||||
          }}</span>
 | 
			
		||||
        </div>
 | 
			
		||||
      </Transition>
 | 
			
		||||
      <Transition name="fade">
 | 
			
		||||
        <div class="volume" v-show="volumeShow">
 | 
			
		||||
          <div class="icon">
 | 
			
		||||
            <volume-mute
 | 
			
		||||
              theme="filled"
 | 
			
		||||
              size="24"
 | 
			
		||||
              fill="#efefef"
 | 
			
		||||
              v-if="volumeNum == 0"
 | 
			
		||||
            />
 | 
			
		||||
            <volume-small
 | 
			
		||||
              theme="filled"
 | 
			
		||||
              size="24"
 | 
			
		||||
              fill="#efefef"
 | 
			
		||||
              v-else-if="volumeNum > 0 && volumeNum < 0.7"
 | 
			
		||||
            />
 | 
			
		||||
            <volume-notice theme="filled" size="24" fill="#efefef" v-else />
 | 
			
		||||
          </div>
 | 
			
		||||
          <el-slider
 | 
			
		||||
            v-model="volumeNum"
 | 
			
		||||
            :show-tooltip="false"
 | 
			
		||||
            :min="0"
 | 
			
		||||
            :max="1"
 | 
			
		||||
            :step="0.01"
 | 
			
		||||
          />
 | 
			
		||||
        </div>
 | 
			
		||||
      </Transition>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <!-- 音乐列表弹窗 -->
 | 
			
		||||
  <Transition name="fade">
 | 
			
		||||
    <div
 | 
			
		||||
      class="music-list"
 | 
			
		||||
      v-show="musicListShow"
 | 
			
		||||
      @click="musicListShow = false"
 | 
			
		||||
    >
 | 
			
		||||
      <Transition name="zoom">
 | 
			
		||||
        <div class="list" v-show="musicListShow" @click.stop>
 | 
			
		||||
          <close-one
 | 
			
		||||
            class="close"
 | 
			
		||||
            theme="filled"
 | 
			
		||||
            size="28"
 | 
			
		||||
            fill="#ffffff60"
 | 
			
		||||
            @click="musicListShow = false"
 | 
			
		||||
          />
 | 
			
		||||
          <Aplayer
 | 
			
		||||
            :songServer="playerData.server"
 | 
			
		||||
            :songType="playerData.type"
 | 
			
		||||
            :songId="playerData.id"
 | 
			
		||||
            ref="playerRef"
 | 
			
		||||
          />
 | 
			
		||||
        </div>
 | 
			
		||||
      </Transition>
 | 
			
		||||
    </div>
 | 
			
		||||
  </Transition>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, reactive, watch, onMounted } from "vue";
 | 
			
		||||
import {
 | 
			
		||||
  GoStart,
 | 
			
		||||
  PlayOne,
 | 
			
		||||
  Pause,
 | 
			
		||||
  GoEnd,
 | 
			
		||||
  CloseOne,
 | 
			
		||||
  VolumeMute,
 | 
			
		||||
  VolumeSmall,
 | 
			
		||||
  VolumeNotice,
 | 
			
		||||
} from "@icon-park/vue-next";
 | 
			
		||||
import Aplayer from "@/components/APlayer/index.vue";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
// 音量条数据
 | 
			
		||||
let volumeShow = ref(false);
 | 
			
		||||
let volumeNum = ref(
 | 
			
		||||
  localStorage.getItem("aplayer-setting")
 | 
			
		||||
    ? JSON.parse(localStorage.getItem("aplayer-setting")).volume
 | 
			
		||||
    : 0.7
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
// 播放列表数据
 | 
			
		||||
let 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 changePlayState = () => {
 | 
			
		||||
  playerRef.value.playToggle();
 | 
			
		||||
};
 | 
			
		||||
// 音乐上下曲
 | 
			
		||||
const changeMusicIndex = (type) => {
 | 
			
		||||
  if (type) {
 | 
			
		||||
    playerRef.value.changeSongPrev();
 | 
			
		||||
  } else {
 | 
			
		||||
    playerRef.value.changeSongNext();
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  // 空格键事件
 | 
			
		||||
  window.addEventListener("keydown", (e) => {
 | 
			
		||||
    if (e.code == "Space") {
 | 
			
		||||
      changePlayState();
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 监听音量变化
 | 
			
		||||
watch(
 | 
			
		||||
  () => volumeNum.value,
 | 
			
		||||
  (value) => {
 | 
			
		||||
    console.log(value);
 | 
			
		||||
    playerRef.value.changeVolume(value);
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.music {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  background: #00000040;
 | 
			
		||||
  backdrop-filter: blur(10px);
 | 
			
		||||
  border-radius: 6px;
 | 
			
		||||
  padding: 20px;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  animation: fade;
 | 
			
		||||
  -webkit-animation: fade 0.5s;
 | 
			
		||||
  .btns {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    margin-bottom: 6px;
 | 
			
		||||
    span {
 | 
			
		||||
      background: #ffffff26;
 | 
			
		||||
      padding: 2px 8px;
 | 
			
		||||
      border-radius: 6px;
 | 
			
		||||
      margin: 0px 6px;
 | 
			
		||||
      text-overflow: ellipsis;
 | 
			
		||||
      overflow-x: hidden;
 | 
			
		||||
      white-space: nowrap;
 | 
			
		||||
      &:hover {
 | 
			
		||||
        background: #ffffff4d;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .control {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: space-evenly;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    .state {
 | 
			
		||||
      .i-icon {
 | 
			
		||||
        width: 50px;
 | 
			
		||||
        height: 50px;
 | 
			
		||||
        display: block;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    .i-icon {
 | 
			
		||||
      width: 36px;
 | 
			
		||||
      height: 36px;
 | 
			
		||||
      display: flex;
 | 
			
		||||
      border-radius: 6px;
 | 
			
		||||
      align-items: center;
 | 
			
		||||
      justify-content: center;
 | 
			
		||||
      border-radius: 6px;
 | 
			
		||||
      transform: scale(1);
 | 
			
		||||
      &:hover {
 | 
			
		||||
        background: #ffffff33;
 | 
			
		||||
      }
 | 
			
		||||
      &:active {
 | 
			
		||||
        transform: scale(0.95);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .menu {
 | 
			
		||||
    height: 26px;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    line-height: 26px;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    .name {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      text-align: center;
 | 
			
		||||
      text-overflow: ellipsis;
 | 
			
		||||
      overflow-x: hidden;
 | 
			
		||||
      white-space: nowrap;
 | 
			
		||||
      // font-size: 1.1rem;
 | 
			
		||||
    }
 | 
			
		||||
    .volume {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      padding: 0 12px;
 | 
			
		||||
      display: flex;
 | 
			
		||||
      align-items: center;
 | 
			
		||||
      flex-direction: row;
 | 
			
		||||
      .icon {
 | 
			
		||||
        margin-right: 12px;
 | 
			
		||||
        span {
 | 
			
		||||
          width: 24px;
 | 
			
		||||
          height: 24px;
 | 
			
		||||
          display: block;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      :deep(*) {
 | 
			
		||||
        transition: none;
 | 
			
		||||
      }
 | 
			
		||||
      :deep(.el-slider__button) {
 | 
			
		||||
        transition: 0.3s;
 | 
			
		||||
      }
 | 
			
		||||
      .el-slider {
 | 
			
		||||
        margin-right: 12px;
 | 
			
		||||
        --el-slider-main-bg-color: #efefef;
 | 
			
		||||
        --el-slider-runway-bg-color: #ffffff40;
 | 
			
		||||
        --el-slider-button-size: 16px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.music-list {
 | 
			
		||||
  position: fixed;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  margin: auto;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  background-color: #00000080;
 | 
			
		||||
  backdrop-filter: blur(20px);
 | 
			
		||||
  z-index: 1;
 | 
			
		||||
  .list {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    top: calc(50% - 300px);
 | 
			
		||||
    left: calc(50% - 320px);
 | 
			
		||||
    width: 640px;
 | 
			
		||||
    height: 600px;
 | 
			
		||||
    background-color: #ffffff66;
 | 
			
		||||
    border-radius: 6px;
 | 
			
		||||
    z-index: 999;
 | 
			
		||||
    .close {
 | 
			
		||||
      position: absolute;
 | 
			
		||||
      top: 12px;
 | 
			
		||||
      right: 12px;
 | 
			
		||||
      width: 28px;
 | 
			
		||||
      height: 28px;
 | 
			
		||||
      display: block;
 | 
			
		||||
      &:hover {
 | 
			
		||||
        transform: scale(1.2);
 | 
			
		||||
      }
 | 
			
		||||
      &:active {
 | 
			
		||||
        transform: scale(0.95);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 弹窗动画
 | 
			
		||||
.zoom-enter-active {
 | 
			
		||||
  animation: zoom 0.4s ease-in-out;
 | 
			
		||||
}
 | 
			
		||||
.zoom-leave-active {
 | 
			
		||||
  animation: zoom 0.3s ease-in-out reverse;
 | 
			
		||||
}
 | 
			
		||||
@keyframes zoom {
 | 
			
		||||
  0% {
 | 
			
		||||
    opacity: 0;
 | 
			
		||||
    transform: scale(0) translateY(-600px);
 | 
			
		||||
  }
 | 
			
		||||
  100% {
 | 
			
		||||
    opacity: 1;
 | 
			
		||||
    transform: scale(1) translateY(0);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										157
									
								
								src/components/SocialLinks/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,157 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <!-- 社交链接 -->
 | 
			
		||||
  <div class="social">
 | 
			
		||||
    <div class="link">
 | 
			
		||||
      <a
 | 
			
		||||
        id="github"
 | 
			
		||||
        :href="socialLinks.github"
 | 
			
		||||
        target="_blank"
 | 
			
		||||
        @mouseenter="changeTip"
 | 
			
		||||
        @mouseleave="leaveTip"
 | 
			
		||||
      >
 | 
			
		||||
        <Icon size="24">
 | 
			
		||||
          <Github />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </a>
 | 
			
		||||
      <a
 | 
			
		||||
        id="qq"
 | 
			
		||||
        :href="socialLinks.qq"
 | 
			
		||||
        target="_blank"
 | 
			
		||||
        @mouseenter="changeTip"
 | 
			
		||||
        @mouseleave="leaveTip"
 | 
			
		||||
      >
 | 
			
		||||
        <Icon size="24">
 | 
			
		||||
          <Qq />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </a>
 | 
			
		||||
      <a
 | 
			
		||||
        id="email"
 | 
			
		||||
        :href="socialLinks.email"
 | 
			
		||||
        @mouseenter="changeTip"
 | 
			
		||||
        @mouseleave="leaveTip"
 | 
			
		||||
      >
 | 
			
		||||
        <Icon size="28">
 | 
			
		||||
          <EmailRound />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </a>
 | 
			
		||||
      <a
 | 
			
		||||
        id="telegram"
 | 
			
		||||
        :href="socialLinks.telegram"
 | 
			
		||||
        target="_blank"
 | 
			
		||||
        @mouseenter="changeTip"
 | 
			
		||||
        @mouseleave="leaveTip"
 | 
			
		||||
      >
 | 
			
		||||
        <Icon size="24">
 | 
			
		||||
          <Telegram />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </a>
 | 
			
		||||
      <a
 | 
			
		||||
        id="twitter"
 | 
			
		||||
        :href="socialLinks.twitter"
 | 
			
		||||
        target="_blank"
 | 
			
		||||
        @mouseenter="changeTip"
 | 
			
		||||
        @mouseleave="leaveTip"
 | 
			
		||||
      >
 | 
			
		||||
        <Icon size="24">
 | 
			
		||||
          <Twitter />
 | 
			
		||||
        </Icon>
 | 
			
		||||
      </a>
 | 
			
		||||
    </div>
 | 
			
		||||
    <span class="tip">{{ socialTip }}</span>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, reactive } from "vue";
 | 
			
		||||
import { Github, Qq, Telegram, Twitter } from "@vicons/fa";
 | 
			
		||||
import { EmailRound } from "@vicons/material";
 | 
			
		||||
import { Icon } from "@vicons/utils";
 | 
			
		||||
 | 
			
		||||
// 社交链接数据
 | 
			
		||||
let socialHover = ref(false);
 | 
			
		||||
let socialTip = ref("通过这里联系我吧");
 | 
			
		||||
let socialTipData = {
 | 
			
		||||
  github: "去 Github 看看",
 | 
			
		||||
  qq: "有什么事吗",
 | 
			
		||||
  email: "来封 Email",
 | 
			
		||||
  telegram: "你懂的 ~",
 | 
			
		||||
  twitter: "你懂的 ~",
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 社交链接地址
 | 
			
		||||
const socialLinks = reactive({
 | 
			
		||||
  github: "https://github.com/" + import.meta.env.VITE_SOCIAL_GITHUB,
 | 
			
		||||
  qq:
 | 
			
		||||
    "https://wpa.qq.com/msgrd?v=3&uin=" +
 | 
			
		||||
    import.meta.env.VITE_SOCIAL_QQ +
 | 
			
		||||
    "&site=qq&menu=yes",
 | 
			
		||||
  email: "mailto:" + import.meta.env.VITE_SOCIAL_EMAIL,
 | 
			
		||||
  telegram: "https://t.me/" + import.meta.env.VITE_SOCIAL_TELEGRAM,
 | 
			
		||||
  twitter: "https://twitter.com/" + import.meta.env.VITE_SOCIAL_TWITTER,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 鼠标移入移出事件
 | 
			
		||||
const changeTip = (e) => {
 | 
			
		||||
  let tipKey = e.target.id;
 | 
			
		||||
  switch (tipKey) {
 | 
			
		||||
    case "github":
 | 
			
		||||
      socialTip.value = socialTipData.github;
 | 
			
		||||
      return true;
 | 
			
		||||
    case "qq":
 | 
			
		||||
      socialTip.value = socialTipData.qq;
 | 
			
		||||
      return true;
 | 
			
		||||
    case "email":
 | 
			
		||||
      socialTip.value = socialTipData.email;
 | 
			
		||||
      return true;
 | 
			
		||||
    case "telegram":
 | 
			
		||||
      socialTip.value = socialTipData.telegram;
 | 
			
		||||
      return true;
 | 
			
		||||
    case "twitter":
 | 
			
		||||
      socialTip.value = socialTipData.twitter;
 | 
			
		||||
      return true;
 | 
			
		||||
    default:
 | 
			
		||||
      return true;
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const leaveTip = () => {
 | 
			
		||||
  socialTip.value = "通过这里联系我吧";
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.social {
 | 
			
		||||
  margin-top: 1rem;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  max-width: 460px;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 42px;
 | 
			
		||||
  background-color: transparent;
 | 
			
		||||
  border-radius: 6px;
 | 
			
		||||
  backdrop-filter: blur(0);
 | 
			
		||||
  .link {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    a {
 | 
			
		||||
      display: inherit;
 | 
			
		||||
      span {
 | 
			
		||||
        margin: 0 12px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .tip {
 | 
			
		||||
    display: none;
 | 
			
		||||
    margin-right: 12px;
 | 
			
		||||
  }
 | 
			
		||||
  &:hover {
 | 
			
		||||
    background-color: #00000040;
 | 
			
		||||
    backdrop-filter: blur(5px);
 | 
			
		||||
    .tip {
 | 
			
		||||
      display: block;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										92
									
								
								src/components/Weather/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,92 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div
 | 
			
		||||
    class="weather"
 | 
			
		||||
    v-if="weatherData.adCode.city && weatherData.weather.weather"
 | 
			
		||||
  >
 | 
			
		||||
    <span>{{ weatherData.adCode.city }} </span>
 | 
			
		||||
    <span>{{ weatherData.weather.weather }} </span>
 | 
			
		||||
    <span>{{ weatherData.weather.temperature }}℃</span>
 | 
			
		||||
    <span class="sm-hidden"> {{ weatherData.weather.winddirection }}风 </span>
 | 
			
		||||
    <span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="weather" v-else>
 | 
			
		||||
    <span>天气获取失败</span>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { onMounted, reactive, h } from "vue";
 | 
			
		||||
import { getAdcode, getWeather } from "@/api";
 | 
			
		||||
import { Error } from "@icon-park/vue-next";
 | 
			
		||||
 | 
			
		||||
// 高德开发者 Key
 | 
			
		||||
let mainKey = import.meta.env.VITE_WEATHER_KEY;
 | 
			
		||||
 | 
			
		||||
// 天气数据
 | 
			
		||||
let weatherData = reactive({
 | 
			
		||||
  adCode: {
 | 
			
		||||
    city: null, // 城市
 | 
			
		||||
    adcode: null, // 城市编码
 | 
			
		||||
  },
 | 
			
		||||
  weather: {
 | 
			
		||||
    weather: null, // 天气现象
 | 
			
		||||
    temperature: null, // 实时气温
 | 
			
		||||
    winddirection: null, // 风向描述
 | 
			
		||||
    windpower: null, // 风力级别
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 获取天气数据
 | 
			
		||||
const getWeatherData = () => {
 | 
			
		||||
  // 获取地理位置信息
 | 
			
		||||
  if (!mainKey) return onError("请配置天气 Key");
 | 
			
		||||
  getAdcode(mainKey)
 | 
			
		||||
    .then((res) => {
 | 
			
		||||
      if (res.status) {
 | 
			
		||||
        weatherData.adCode = {
 | 
			
		||||
          city: res.city,
 | 
			
		||||
          adcode: res.adcode,
 | 
			
		||||
        };
 | 
			
		||||
        // 获取天气信息
 | 
			
		||||
        getWeather(mainKey, weatherData.adCode.adcode)
 | 
			
		||||
          .then((res) => {
 | 
			
		||||
            if (res.status) {
 | 
			
		||||
              weatherData.weather = {
 | 
			
		||||
                weather: res.lives[0].weather,
 | 
			
		||||
                temperature: res.lives[0].temperature,
 | 
			
		||||
                winddirection: res.lives[0].winddirection,
 | 
			
		||||
                windpower: res.lives[0].windpower,
 | 
			
		||||
              };
 | 
			
		||||
            } else {
 | 
			
		||||
              onError("天气信息获取失败");
 | 
			
		||||
            }
 | 
			
		||||
          })
 | 
			
		||||
          .catch(() => {
 | 
			
		||||
            onError("天气信息获取失败");
 | 
			
		||||
          });
 | 
			
		||||
      } else {
 | 
			
		||||
        onError("地理位置获取失败");
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
    .catch(() => {
 | 
			
		||||
      onError("地理位置获取失败");
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 报错信息
 | 
			
		||||
const onError = (message) => {
 | 
			
		||||
  ElMessage({
 | 
			
		||||
    message: message,
 | 
			
		||||
    icon: h(Error, {
 | 
			
		||||
      theme: "filled",
 | 
			
		||||
      fill: "#efefef",
 | 
			
		||||
    }),
 | 
			
		||||
  });
 | 
			
		||||
  console.error(message);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  // 调用获取天气
 | 
			
		||||
  getWeatherData();
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										15
									
								
								src/main.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,15 @@
 | 
			
		||||
import {
 | 
			
		||||
    createApp
 | 
			
		||||
} from 'vue';
 | 
			
		||||
import '@/style/style.scss';
 | 
			
		||||
import App from '@/App.vue';
 | 
			
		||||
// 引入 pinia
 | 
			
		||||
import {
 | 
			
		||||
    createPinia
 | 
			
		||||
} from 'pinia'
 | 
			
		||||
 | 
			
		||||
const app = createApp(App);
 | 
			
		||||
const pinia = createPinia();
 | 
			
		||||
 | 
			
		||||
app.use(pinia);
 | 
			
		||||
app.mount('#app')
 | 
			
		||||
							
								
								
									
										60
									
								
								src/store/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,60 @@
 | 
			
		||||
import {
 | 
			
		||||
    defineStore
 | 
			
		||||
} from "pinia";
 | 
			
		||||
 | 
			
		||||
export const mainStore = defineStore("main", {
 | 
			
		||||
    state: () => {
 | 
			
		||||
        return {
 | 
			
		||||
            innerWidth: null, // 当前窗口宽度
 | 
			
		||||
            coverType: 0, // 壁纸种类
 | 
			
		||||
            musicIsOk: false, // 音乐是否加载完成
 | 
			
		||||
            musicOpenState: false, // 音乐面板开启状态
 | 
			
		||||
            boxOpenState: false, // 更多页面开启状态
 | 
			
		||||
            playerState: false, // 当前播放状态
 | 
			
		||||
            playerTitle: null, // 当前播放歌曲名
 | 
			
		||||
            playerArtist: null, // 当前播放歌手名
 | 
			
		||||
            playerLrc: "歌词加载中", // 当前播放歌词
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
    getters: {
 | 
			
		||||
        // 获取歌词
 | 
			
		||||
        getPlayerLrc(state) {
 | 
			
		||||
            return state.playerLrc;
 | 
			
		||||
        },
 | 
			
		||||
        // 获取歌曲信息
 | 
			
		||||
        getPlayerData(state) {
 | 
			
		||||
            return {
 | 
			
		||||
                name: state.playerTitle,
 | 
			
		||||
                artist: state.playerArtist,
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        // 获取页面宽度
 | 
			
		||||
        getInnerWidth(state) {
 | 
			
		||||
            return state.innerWidth;
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
    actions: {
 | 
			
		||||
        // 更改当前页面宽度
 | 
			
		||||
        setInnerWidth(value) {
 | 
			
		||||
            this.innerWidth = value;
 | 
			
		||||
        },
 | 
			
		||||
        // 更改播放状态
 | 
			
		||||
        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;
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
})
 | 
			
		||||
							
								
								
									
										35
									
								
								src/style/global.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,35 @@
 | 
			
		||||
// scss 全局变量
 | 
			
		||||
 | 
			
		||||
// 响应式布局
 | 
			
		||||
@mixin changeWidth($maxWidth:1200px) {
 | 
			
		||||
    .container {
 | 
			
		||||
        max-width: $maxWidth;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 首次调用
 | 
			
		||||
@include changeWidth;
 | 
			
		||||
 | 
			
		||||
/* 小于1200px时 */
 | 
			
		||||
@media (max-width: 1200px) {
 | 
			
		||||
    @include changeWidth($maxWidth:1000px);
 | 
			
		||||
 | 
			
		||||
    // 隐藏元素
 | 
			
		||||
    .sm-hidden {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 小于992px时 */
 | 
			
		||||
@media (max-width: 992px) {
 | 
			
		||||
    @include changeWidth($maxWidth:900px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 小于720px时 */
 | 
			
		||||
@media (max-width: 720px) {
 | 
			
		||||
 | 
			
		||||
    // 隐藏元素
 | 
			
		||||
    .xs-hidden {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										143
									
								
								src/style/style.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,143 @@
 | 
			
		||||
/*
 | 
			
		||||
作者: imsyy
 | 
			
		||||
主页:https://www.imsyy.top/
 | 
			
		||||
GitHub:https://github.com/imsyy/home
 | 
			
		||||
版权所有,请勿删除
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
@charset "utf-8";
 | 
			
		||||
 | 
			
		||||
/*全局样式*/
 | 
			
		||||
 | 
			
		||||
html,
 | 
			
		||||
body {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-color: #333;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
*,
 | 
			
		||||
a,
 | 
			
		||||
p {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
    padding: 0;
 | 
			
		||||
    -webkit-user-select: none;
 | 
			
		||||
    user-select: none;
 | 
			
		||||
    text-decoration: none;
 | 
			
		||||
    transition: .3s;
 | 
			
		||||
    color: #fff;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
 | 
			
		||||
    &:hover {
 | 
			
		||||
        transition: .3s;
 | 
			
		||||
        // color: #ffffff90;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 字体文件
 | 
			
		||||
@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: #00000040;
 | 
			
		||||
    -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__badge {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 渐入动画
 | 
			
		||||
.fade-enter-active {
 | 
			
		||||
    animation: fade 0.3s ease-in-out;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.fade-leave-active {
 | 
			
		||||
    animation: fade 0.3s ease-in-out reverse;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@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;
 | 
			
		||||
 | 
			
		||||
    &.hidden {
 | 
			
		||||
        opacity: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.hover {
 | 
			
		||||
        opacity: 0.1;
 | 
			
		||||
        transform: scale(2.5);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.active {
 | 
			
		||||
        opacity: 0.5;
 | 
			
		||||
        transform: scale(0.5);
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										97
									
								
								src/utils/cursor.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,97 @@
 | 
			
		||||
var CURSOR;
 | 
			
		||||
 | 
			
		||||
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
 | 
			
		||||
 | 
			
		||||
const getStyle = (el, attr) => {
 | 
			
		||||
    try {
 | 
			
		||||
        return window.getComputedStyle ?
 | 
			
		||||
            window.getComputedStyle(el)[attr] :
 | 
			
		||||
            el.currentStyle[attr];
 | 
			
		||||
    } catch (e) {}
 | 
			
		||||
    return "";
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
class Cursor {
 | 
			
		||||
    constructor() {
 | 
			
		||||
        this.pos = {
 | 
			
		||||
            curr: null,
 | 
			
		||||
            prev: null
 | 
			
		||||
        };
 | 
			
		||||
        this.pt = [];
 | 
			
		||||
        this.create();
 | 
			
		||||
        this.init();
 | 
			
		||||
        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);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        var el = document.getElementsByTagName('*');
 | 
			
		||||
        for (let i = 0; i < el.length; i++)
 | 
			
		||||
            if (getStyle(el[i], "cursor") == "pointer")
 | 
			
		||||
                this.pt.push(el[i].outerHTML);
 | 
			
		||||
 | 
			
		||||
        document.body.appendChild((this.scr = document.createElement("style")));
 | 
			
		||||
        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}`;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    refresh() {
 | 
			
		||||
        this.scr.remove();
 | 
			
		||||
        this.cursor.classList.remove("hover");
 | 
			
		||||
        this.cursor.classList.remove("active");
 | 
			
		||||
        this.pos = {
 | 
			
		||||
            curr: null,
 | 
			
		||||
            prev: null
 | 
			
		||||
        };
 | 
			
		||||
        this.pt = [];
 | 
			
		||||
 | 
			
		||||
        this.create();
 | 
			
		||||
        this.init();
 | 
			
		||||
        this.render();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    init() {
 | 
			
		||||
        document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
 | 
			
		||||
        document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
 | 
			
		||||
        document.onmousemove = e => {
 | 
			
		||||
            (this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
 | 
			
		||||
            this.pos.curr = {
 | 
			
		||||
                x: e.clientX - 8,
 | 
			
		||||
                y: e.clientY - 8
 | 
			
		||||
            };
 | 
			
		||||
            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());
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const cursorInit = () => {
 | 
			
		||||
    CURSOR = new Cursor();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default cursorInit;
 | 
			
		||||
							
								
								
									
										23
									
								
								src/utils/debounce.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,23 @@
 | 
			
		||||
// 防抖
 | 
			
		||||
let timeout;
 | 
			
		||||
 | 
			
		||||
function debounce(func, wait = 300, immediate = false) {
 | 
			
		||||
    // 清除定时器
 | 
			
		||||
    if (timeout !== null) {
 | 
			
		||||
        clearTimeout(timeout);
 | 
			
		||||
    }
 | 
			
		||||
    // 立即执行
 | 
			
		||||
    if (immediate) {
 | 
			
		||||
        var callNow = !timeout;
 | 
			
		||||
        timeout = setTimeout(function () {
 | 
			
		||||
            timeout = null;
 | 
			
		||||
        }, wait);
 | 
			
		||||
        if (callNow) typeof func === 'function' && func();
 | 
			
		||||
    } else {
 | 
			
		||||
        timeout = setTimeout(function () {
 | 
			
		||||
            typeof func === 'function' && func();
 | 
			
		||||
        }, wait);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default debounce;
 | 
			
		||||
							
								
								
									
										20
									
								
								src/utils/getTime.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,20 @@
 | 
			
		||||
export const getCurrentTime = () => {
 | 
			
		||||
    let time = new Date();
 | 
			
		||||
    let year = time.getFullYear();
 | 
			
		||||
    let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
 | 
			
		||||
    let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
 | 
			
		||||
    let hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
 | 
			
		||||
    let minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
 | 
			
		||||
    let second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
 | 
			
		||||
    let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 | 
			
		||||
    let currentTime = {
 | 
			
		||||
        year,
 | 
			
		||||
        month,
 | 
			
		||||
        day,
 | 
			
		||||
        hour,
 | 
			
		||||
        minute,
 | 
			
		||||
        second,
 | 
			
		||||
        weekday:weekday[time.getDay()],
 | 
			
		||||
    }
 | 
			
		||||
    return currentTime;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										53
									
								
								src/views/Box/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,53 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div
 | 
			
		||||
    class="box cards"
 | 
			
		||||
    @mouseenter="closeShow = true"
 | 
			
		||||
    @mouseleave="closeShow = false"
 | 
			
		||||
  >
 | 
			
		||||
    <transition name="el-fade-in-linear">
 | 
			
		||||
      <close-one
 | 
			
		||||
        class="close"
 | 
			
		||||
        theme="filled"
 | 
			
		||||
        size="28"
 | 
			
		||||
        fill="#ffffff60"
 | 
			
		||||
        v-show="closeShow"
 | 
			
		||||
        @click="store.boxOpenState = false"
 | 
			
		||||
      />
 | 
			
		||||
    </transition>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref } from "vue";
 | 
			
		||||
import { CloseOne } from "@icon-park/vue-next";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
 | 
			
		||||
let closeShow = ref(false);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.box {
 | 
			
		||||
  flex: 1 0 0%;
 | 
			
		||||
  margin-left: 0.75rem;
 | 
			
		||||
  height: 80%;
 | 
			
		||||
  padding: 20px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  &:hover {
 | 
			
		||||
    transform: scale(1);
 | 
			
		||||
  }
 | 
			
		||||
  .close {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 14px;
 | 
			
		||||
    right: 14px;
 | 
			
		||||
    width: 28px;
 | 
			
		||||
    height: 28px;
 | 
			
		||||
    &:hover {
 | 
			
		||||
      transform: scale(1.2);
 | 
			
		||||
    }
 | 
			
		||||
    &:active {
 | 
			
		||||
      transform: scale(1);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										112
									
								
								src/views/Func/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,112 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <!-- 功能区域 -->
 | 
			
		||||
  <div class="function">
 | 
			
		||||
    <el-row :gutter="20">
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <div class="left">
 | 
			
		||||
          <Hitokoto />
 | 
			
		||||
          <Music />
 | 
			
		||||
        </div>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="12">
 | 
			
		||||
        <div class="right cards">
 | 
			
		||||
          <div class="time">
 | 
			
		||||
            <div class="date">
 | 
			
		||||
              <span>{{ currentTime.year }} 年 </span>
 | 
			
		||||
              <span>{{ currentTime.month }} 月 </span>
 | 
			
		||||
              <span>{{ currentTime.day }} 日 </span>
 | 
			
		||||
              <span class="sm-hidden">{{ currentTime.weekday }}</span>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="text">
 | 
			
		||||
              <span>
 | 
			
		||||
                {{ currentTime.hour }}:{{ currentTime.minute }}:{{
 | 
			
		||||
                  currentTime.second
 | 
			
		||||
                }}</span
 | 
			
		||||
              >
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          <Weather />
 | 
			
		||||
        </div>
 | 
			
		||||
      </el-col>
 | 
			
		||||
    </el-row>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, onMounted, onBeforeUnmount } from "vue";
 | 
			
		||||
import Music from "@/components/Music/index.vue";
 | 
			
		||||
import Hitokoto from "@/components/Hitokoto/index.vue";
 | 
			
		||||
import Weather from "@/components/Weather/index.vue";
 | 
			
		||||
import { getCurrentTime } from "@/utils/getTime";
 | 
			
		||||
 | 
			
		||||
// 当前时间
 | 
			
		||||
let currentTime = ref({});
 | 
			
		||||
let timeInterval = null;
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  timeInterval = setInterval(() => {
 | 
			
		||||
    currentTime.value = getCurrentTime();
 | 
			
		||||
  }, 1000);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
onBeforeUnmount(() => {
 | 
			
		||||
  clearInterval(timeInterval);
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.function {
 | 
			
		||||
  height: 165px;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: row;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  .el-row {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    margin: 0 !important;
 | 
			
		||||
    .el-col {
 | 
			
		||||
      &:nth-of-type(1) {
 | 
			
		||||
        padding-left: 0 !important;
 | 
			
		||||
      }
 | 
			
		||||
      &:nth-of-type(2) {
 | 
			
		||||
        padding-right: 0 !important;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    .left,
 | 
			
		||||
    .right {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      height: 100%;
 | 
			
		||||
    }
 | 
			
		||||
    .right {
 | 
			
		||||
      padding: 20px;
 | 
			
		||||
      display: flex;
 | 
			
		||||
      flex-direction: column;
 | 
			
		||||
      align-items: center;
 | 
			
		||||
      justify-content: space-between;
 | 
			
		||||
      .time {
 | 
			
		||||
        font-size: 1.1rem;
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        .date {
 | 
			
		||||
          text-overflow: ellipsis;
 | 
			
		||||
          overflow-x: hidden;
 | 
			
		||||
          white-space: nowrap;
 | 
			
		||||
        }
 | 
			
		||||
        .text {
 | 
			
		||||
          margin-top: 10px;
 | 
			
		||||
          font-size: 3.25rem;
 | 
			
		||||
          letter-spacing: 2px;
 | 
			
		||||
          font-family: "UnidreamLED";
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      .weather {
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        text-overflow: ellipsis;
 | 
			
		||||
        overflow-x: hidden;
 | 
			
		||||
        white-space: nowrap;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										19
									
								
								src/views/Main/Left.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,19 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="left">
 | 
			
		||||
    <Message />
 | 
			
		||||
    <SocialLinks />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import Message from "@/components/Message/index.vue";
 | 
			
		||||
import SocialLinks from "@/components/SocialLinks/index.vue";
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.left {
 | 
			
		||||
  flex: 1 0 0%;
 | 
			
		||||
  margin-right: 10px;
 | 
			
		||||
  transform: translateY(20px);
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										24
									
								
								src/views/Main/Right.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,24 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="right">
 | 
			
		||||
    <!-- 功能区 -->
 | 
			
		||||
    <Func />
 | 
			
		||||
    <!-- 网站链接 -->
 | 
			
		||||
    <Link />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { reactive, ref, onMounted } from "vue";
 | 
			
		||||
import Func from "@/views/Func/index.vue";
 | 
			
		||||
import Link from "@/components/Links/index.vue";
 | 
			
		||||
import { mainStore } from "@/store";
 | 
			
		||||
const store = mainStore();
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.right {
 | 
			
		||||
  flex: 1 0 0%;
 | 
			
		||||
  margin-left: 0.75rem;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										0
									
								
								src/views/More/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
							
								
								
									
										1
									
								
								sw.js
									
									
									
									
									
								
							
							
						
						@ -1 +0,0 @@
 | 
			
		||||
self.addEventListener("error",function(e){self.clients.matchAll().then(function(t){t&&t.length&&t[0].postMessage({type:"ERROR",msg:e.message||null,stack:e.error?e.error.stack:null})})}),self.addEventListener("unhandledrejection",function(e){self.clients.matchAll().then(function(t){t&&t.length&&t[0].postMessage({type:"REJECTION",msg:e.reason?e.reason.message:null,stack:e.reason?e.reason.stack:null})})}),importScripts("https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js"),workbox.setConfig({debug:!1,modulePathPrefix:"https://g.alicdn.com/kg/workbox/3.3.0/"}),workbox.skipWaiting(),workbox.clientsClaim();var cacheList=["/","/index.html"];workbox.routing.registerRoute(new RegExp(/\.(?:html|css)$/),workbox.strategies.networkFirst({cacheName:"ql:html",plugins:[new workbox.expiration.Plugin({maxEntries:10})]})),workbox.routing.registerRoute(new RegExp(/\.(?:js|css)$/),workbox.strategies.staleWhileRevalidate({cacheName:"ql:static",plugins:[new workbox.expiration.Plugin({maxEntries:20})]})),workbox.routing.registerRoute(new RegExp(/\.(?:png|gif|jpg|jpeg|webp|svg|cur|ttf|woff2|woff)$/),workbox.strategies.cacheFirst({cacheName:"ql:img",plugins:[new workbox.cacheableResponse.Plugin({statuses:[0,200]}),new workbox.expiration.Plugin({maxEntries:20,maxAgeSeconds:43200})]}));
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}a{text-decoration:none;color:#0072c6}a:hover{text-decoration:none;color:#004d8c}body{text-align:center;font-size:14px;line-height:24px;font-family:Microsoft YaHei,'宋体',sans-serif;color:#454545;overflow-y:scroll}.page{width:960px;margin:0 auto;padding:10px;text-align:left}h2,h3{font-family:Microsoft YaHei}h1{font-size:40px;line-height:60px;font-weight:100;margin:20px 0 15px}h2{font-size:20px;line-height:25px;font-weight:100;margin:10px 0}h3{font-weight:700}code{padding:2px 4px;font-size:95%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre code{white-space:pre-wrap;word-break:break-word;display:inline-block;word-break:break-all}ul{padding:0 1em}ul li{list-style-type:disc;list-style-position:inside}b,strong{font-weight:700}em{color:red}p{margin-bottom:10px}.hr,hr{margin:20px 0;border:0;width:100%;height:1px;overflow:hidden;background-color:#ccc}.text-right{text-align:right}.clearboth{clear:both;width:100%;content:""}.clearleft{clear:left;width:100%;content:""}.clearright{clear:right;width:100%;content:""}.browser-list{margin:16px 0 10px;padding:0;height:42px}.browser{display:block;width:155px;height:34px;line-height:22px;float:left;list-style:none}.browser.clearleft{height:1px}.browser span{display:block;font-size:12px;line-height:1.2}.browser img{width:34px;height:34px;border:0;float:left;margin-right:10px}.browser.firefox{width:150px}.browser.edge{width:150px}.browser.safari{width:150px}.browser.se360{width:160px}.browser.qqbrowser{width:140px}.small-alert{font-size:12px;margin:15px 0 8px;color:#90949c}.small-alert:not(.hide)+hr{margin-top:0}.hide{display:none}.alert-danger{display:block;color:#777;background-color:#f1f1f1;padding:6px 12px;clear:both}.alert-info{color:#000;background-color:#f1f6fc;margin-top:12px}.alert-info img{vertical-align:text-top}#win-danger{margin-top:12px;position:relative}#win-danger .arrow{background:url(/images/arrow.png) no-repeat;border:0;position:absolute;display:block;width:20px;height:12px;left:325px;top:-12px}#referrer a,.targetline{word-break:break-all}.top-alert{background:#f2f2f2}.top-alert-content{font-size:14px}@media only screen and (max-width:959px){.page{max-width:100%;padding:20px;font-size:16px;line-height:26px}h1{font-size:26px;line-height:1.8;font-weight:700;margin-top:0}.browser-list{height:auto}.browser{margin:0 20px 20px 0}code{word-break:break-word}}
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}a{text-decoration:none;color:#0072c6}a:hover{text-decoration:none;color:#004d8c}body{text-align:center;font-size:14px;line-height:24px;font-family:Microsoft YaHei,'宋体',sans-serif;color:#454545;overflow-y:scroll}.page{width:960px;margin:0 auto;padding:10px;text-align:left}h2,h3{font-family:Microsoft YaHei}h1{font-size:40px;line-height:60px;font-weight:100;margin:20px 0 15px}h2{font-size:20px;line-height:25px;font-weight:100;margin:10px 0}h3{font-weight:700}code{padding:2px 4px;font-size:95%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre code{white-space:pre-wrap;word-break:break-word;display:inline-block;word-break:break-all}ul{padding:0 1em}ul li{list-style-type:disc;list-style-position:inside}b,strong{font-weight:700}em{color:red}p{margin-bottom:10px}.hr,hr{margin:20px 0;border:0;width:100%;height:1px;overflow:hidden;background-color:#ccc}.text-right{text-align:right}.clearboth{clear:both;width:100%;content:""}.clearleft{clear:left;width:100%;content:""}.clearright{clear:right;width:100%;content:""}.browser-list{margin:16px 0 10px;padding:0;height:42px}.browser{display:block;width:155px;height:34px;line-height:22px;float:left;list-style:none}.browser.clearleft{height:1px}.browser span{display:block;font-size:12px;line-height:1.2}.browser img{width:34px;height:34px;border:0;float:left;margin-right:10px}.browser.firefox{width:150px}.browser.edge{width:150px}.browser.safari{width:150px}.browser.se360{width:160px}.browser.qqbrowser{width:140px}.small-alert{font-size:12px;margin:15px 0 8px;color:#90949c}.small-alert:not(.hide)+hr{margin-top:0}.hide{display:none}.alert-danger{display:block;color:#777;background-color:#f1f1f1;padding:6px 12px;clear:both}.alert-info{color:#000;background-color:#f1f6fc;margin-top:12px}.alert-info img{vertical-align:text-top}#win-danger{margin-top:12px;position:relative}#win-danger .arrow{background:url(/images/arrow.png) no-repeat;border:0;position:absolute;display:block;width:20px;height:12px;left:325px;top:-12px}#referrer a,.targetline{word-break:break-all}.top-alert{background:#f2f2f2}.top-alert-content{font-size:14px}@media only screen and (max-width:959px){.page{max-width:100%;padding:20px;font-size:16px;line-height:26px}h1{font-size:26px;line-height:1.8;font-weight:700;margin-top:0}.browser-list{height:auto}.browser{margin:0 20px 20px 0}code{word-break:break-word}}
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="robots" content="noindex,nofollow,noarchive"><title>对旧版 Internet Explorer 的支持服务已终止</title><meta name="description" content="从 2016 年 1 月 12 日开始,仅面向受支持操作系统的最新版 Internet Explorer 将收到技术支持和安全更新。Internet Explorer 11 是最新版的 Internet Explorer,将继续在 Windows 7、Windows 8.1 和 Windows 10 上收到安全更新、兼容性修复程序和技术支持。"><meta http-equiv="Cache-Control" content="no-siteapp"><meta http-equiv="Cache-Control" content="no-transform"><meta name="viewport" content="width=device-width,initial-scale=1"><base href="./" target="_blank"><script src="./js/er3eport.min.js"></script><link rel="icon" type="image/png" href="../favicon.ico"><link type="text/css" rel="stylesheet" href="./css/support.style.min.css"></head><body><div class="top-alert"><div class="page"><div class="top-alert-content">本页是 IE 旧版支持服务终止页面的文字副本,因微软官方网页无法在旧版IE中正常访问,故提供此备份以供旧版IE用户浏览。<a href="https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support" target="_blank" rel="nofollow">查看原网页</a></div></div></div><div class="page"><h1>对旧版 Internet Explorer 的支持服务已终止</h1><p>从 2016 年 1 月 12 日开始,仅面向受支持操作系统的最新版 Internet Explorer 将收到技术支持和安全更新。Internet Explorer 11 是最新版的 Internet Explorer,将继续在 Windows 7、Windows 8.1 和 Windows 10 上收到安全更新、兼容性修复程序和技术支持。</p><div class="hr"></div><h2>这意味着什么?</h2><p>这意味着您应该采取行动。2016 年 1 月 12 日之后,Microsoft 将不再为 Internet Explorer 早期版本提供安全更新或技术支持。安全更新用于修补可能被恶意软件利用的漏洞,从而为提高用户及其数据的安全性提供帮助。定期安全更新帮助保护计算机不受恶意攻击,因此升级和保持最新很重要。</p><div class="hr"></div><h2>我如何升级 Internet Explorer?</h2><p><strong>中小型企业:</strong>对于考虑浏览器升级的中小型企业,选择有很多。没有 Web 应用程序的中小型组织(员工在 500 人以下)可使用自动更新进行自动更新。对于依赖现有 Web 应用程序的中小型企业,可以寻找 Microsoft 认证合作伙伴以了解符合其业务需要的最佳方案。</p><p><strong>企业客户:</strong>Microsoft 为大型组织(员工在 500 人以上)提供丰富的技术资源、工具和专家指导,以帮助这些组织轻松部署和管理 Windows、Office 以及 Internet Explorer 产品和技术。通过联系您的 Microsoft 销售代表、Microsoft Services 部门或 Microsoft 认证合作伙伴,详细了解迁移和部署计划。了解如何通过访问 TechNet 自行试用和部署最新版本的 Edge。</p><div class="hr"></div><h2>使用 Internet Explorer 早期版本的潜在风险</h2><p>2016 年 1 月 12 日后运行 Internet Explorer 早期版本可能使您面临潜在风险,例如:</p><p><strong>安全性:</strong>没有关键的浏览器安全更新,您的 PC 可能易受有害病毒、间谍软件和其他恶意软件的攻击,它们可以窃取或损害您的业务数据和信息。</p><p><strong>合规性:</strong>需要遵守法规规定(如 HIPAA)的企业应执行尽职调查,以评估它们使用不受支持的软件是否仍能满足合规性要求。</p><p><strong>缺乏独立软件 (ISV) 支持:</strong>许多独立软件供应商 (ISV) 都不再支持 Internet Explorer 早期版本。例如,Office 365 采用现代 Web 标准,而且与最新浏览器一起使用时运行最出色。</p><div class="hr"></div><p>Copyright © 2020<script>document.write(' - ' + (new Date()).getFullYear())</script><a href="https://www.imsyy.top/">無名</a> . All Rights Reserved</p></div></body></html>
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
var _hmt=_hmt||[],er3eport={};er3eport.start=(new Date).getTime(),er3eport.codetime=function(){return(new Date).getTime()-er3eport.start},er3eport.dodnt=function(){window.dnt=1,"function"==typeof window.dodnt&&window.dodnt()},er3eport.jqdefined=function(){_hmt.push(["_setCustomVar",2,"JSERROR","jQueryDefined # "+er3eport.codetime(),3]),er3eport.dodnt()},er3eport.listener=function(e){var t,r=!1,n="JSERROR";"string"==typeof e?r=e:(e.error?r=e.error.stack:e.message&&(r=e.message),e.srcElement&&e.srcElement.src?t=e.srcElement.src:e.target&&e.target.src&&(t=e.target.src),r||(t?(r="FileError: "+t,n="FILEERROR"):e.type&&(r=e.type)));return r="string"!=typeof r?"empty_error_string":r.replace(/\n/g,"").replace(/\s+/g," "),_hmt.push(["_trackEvent",n,window.location.pathname,r+" #UA# "+navigator.userAgent+" # "+er3eport.codetime()]),!0},"function"==typeof jQuery&&er3eport.jqdefined(),Object.defineProperty&&Object.defineProperty(window,"jQuery",{set:er3eport.jqdefined}),window.addEventListener?window.addEventListener("error",er3eport.listener,!0):window.attachEvent&&window.attachEvent("onerror",er3eport.listener);
 | 
			
		||||
| 
		 Before Width: | Height: | Size: 66 KiB  | 
| 
		 Before Width: | Height: | Size: 1.5 KiB  | 
| 
		 Before Width: | Height: | Size: 3.0 KiB  | 
| 
		 Before Width: | Height: | Size: 1.7 KiB  |