huangge1199/home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vue 重构 & 新年快乐

Browse Source
This commit is contained in:
底层用户 2023-01-15 13:22:30 +08:00
parent 9da5e50040
commit 5b15716092
107 changed files with 9403 additions and 3333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.env Normal file
View File

@ -0,0 +1,34 @@
# 站点名称
VITE_SITE_NAME = "無名の主页"
VITE_SITE_URL = "imsyy.top"
# 简介文本
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"
# 歌曲 API 地址
## 备用：https://api.wuenci.com/meting/api/
VITE_SONG_API = "https://api-meting.imsyy.top"
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
VITE_SONG_SERVER = "netease"
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
VITE_SONG_TYPE = "playlist"
# 播放 ID
VITE_SONG_ID = "7452421335"

25
.gitignore vendored
View File

@ -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/settings.json vendored
View File

@ -1,3 +0,0 @@
{
"liveServer.settings.port": 8080
}

103
README.md
View File

@ -7,7 +7,7 @@
![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp) ![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf) >主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)
### Demo ### Demo
@ -27,82 +27,41 @@
- [x] 音乐播放器 - [x] 音乐播放器
- [x] 移动端适配 - [x] 移动端适配
* [ ] 去除 jQuery 依赖 * [ ] 播放器取消使用 Aplayer
* [ ] VUE 重构
### 部署
```bash
yarn install
yarn dev
yarn build
```
> 构建完成后，可将 `dist` 文件夹下的文件上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
### 天气 ### 天气
由于原天气 API 不稳定，已更换天气 API，现需要前往以下网站获取 key 天气及地区获取需要 `高德开放平台` 相关 API
- 前往 [ROLL](https://www.mxnzp.com/doc/list) 获取 app_id 和 app_secret，用于获取城市信息 - 前往 [高德开放平台控制台](https://console.amap.com/dev/index) 创建一个 `Web 服务` 类型的 `Key`，并将 `Key` 填入 `.env` 中的 `VITE_WEATHER_KEY` 中
- 前往 [和风天气](https://dev.qweather.com/) 获取 key，用于获取天气信息
也可自行更换其他方式 也可自行更换其他方式
<!-- ### 配置
本项目采用 `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> -->
### 音乐 ### 音乐
>本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单 >本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单
>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用 >*仅支持 **中国大陆地区**
更改 `music.js` 的参数即可实现自定义歌单列表 请在 `.env` 文件中更改歌曲相关参数即可实现自定义歌单列表
```js ```bash
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我 # 歌曲 API 地址
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片 VITE_SONG_API = "https://api-meting.imsyy.top"
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID # 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
VITE_SONG_SERVER = "netease"
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
VITE_SONG_TYPE = "playlist"
# 播放 ID
VITE_SONG_ID = "7452421335"
``` ```
### 字体 ### 字体
@ -148,20 +107,20 @@ make clean all
</details> </details>
### 插件 ### 技术栈
* [Bootstrap](https://getbootstrap.com/) * [Vue](https://cn.vuejs.org/)
* [iziToast](https://izitoast.marcelodolza.com/) * [Vite](https://vitejs.cn/vite3-cn/)
* [Font Awesome](https://fontawesome.com/) * [Pinia](https://pinia.vuejs.org/zh/)
* [jQuery](https://jquery.com/) * [IconPark](https://iconpark.oceanengine.com/official)
* [xicons](https://xicons.org/)
* [Aplayer](https://aplayer.js.org/) * [Aplayer](https://aplayer.js.org/)
### API ### API
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/) * [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
* [小歪 API](https://api.ixiaowai.cn/) * [小歪 API](https://api.ixiaowai.cn/)
* [和风天气](https://dev.qweather.com/) * [高德开放平台](https://lbs.amap.com/)
* [ROLL](https://www.mxnzp.com/doc/list)
* [Hitokoto 一言](https://hitokoto.cn/) * [Hitokoto 一言](https://hitokoto.cn/)
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a> <a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>

108
README_EN.md
View File

@ -7,7 +7,7 @@ Simple little homepage, had enough of the original one and made a new one
![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp) ![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
>The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.imsyy.top/font/Pacifico-Regular.ttf) >The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)
### Demo ### Demo
@ -27,83 +27,41 @@ Simple little homepage, had enough of the original one and made a new one
- [x] Music player - [x] Music player
- [x] Mobile adaptation - [x] Mobile adaptation
* [ ] Remove jQuery dependency * [ ] Player cancels using Aplayer
* [ ] VUE refactoring
### Deployment
```bash
yarn install
yarn dev
yarn build
```
> Once the build is complete, the files in the `dist` folder can be uploaded to the server or imported and automatically deployed with one click using a hosting platform such as `Vercel`.
### Weather ### Weather
Because the original weather API is unstable, the weather API has been replaced. Now you need to go to the following website to obtain the key Weather and area access requires `高德开放平台` related API
- to [ROLL] (https://www.mxnzp.com/doc/list) for app_id and app_secret, used to capture the city - Go to [高德开放平台控制台](https://console.amap.com/dev/index) to create a `Key` of type `Web Service` and fill the `Key` into `VITE_WEATHER_KEY` in `.env`
- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information
It can also be replaced by other methods It can also be replaced by other methods
<!-- ### Configuration
This project uses `json` file to configure the site content, the configuration is not affected by version updates, you can write custom configuration to `setting.json` to change the page content
<details>
<summary>Configuration instructions</summary>
```json
{
"title": "Title of the page",
"description": "Short description of the page",
"keywords": "Keyword(s)",
"author": "author of the page",
"logo_img": "Logo image path",
"logo_text_1": "Domain Prefix",
"logo_text_2": "Domain_suffix",
"des_title": [
"Hello World !" , // site description title
"A small site built in the 21st century, living on the edge of the Internet" // site description content
],
"des_title_change": [
"Oops !" , //text after clicking on the site's title
"Oops, you found this ( click once more to close )" //text after click on site content
],
"github": "imsyy", //Github username
"qq": "1539250352", //QQ
"email": "one@imsyy.top", //email email
"telegram": "bottom_user", //Telegram user name
"twitter": "iimmsyy", //Twitter username
"weather_api": "https://www.yiketianqi.com", //Weather API
"link_1": [
"https://blog.imsyy.top/", //link_address
"fa-solid fa-blog", //icon class name
"blog" //link text
],
"link_2": [
"https://drive.imsyy.top/",
"fa-solid fa-cloud",
"netdisk"
],
"wallpaper_api": [
[
"picture of the day", //name of wallpaper setting item
"https://api.dujin.org/bing/1920.php" //link to wallpaper image
]
],
"Copyright_year": "2020", //site start year
"Copyright_text": "No name" //Copyright
}
```
</details> -->
### Music ### Music
>This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization >This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization
>*Only supported in **Mainland China**, please replace `music.js` with [the following](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) in other regions to enable the music player to work properly >*Only supported in **Mainland China**
Change the parameters of `music.js` to achieve a custom song list Please change the song related parameters in the `.env` file to customize the song list
```js ```bash
let server = "netease"; //netease; tencent; kugou; xiami; kuwo; # Songs API address
let type = "playlist"; //song; playlist; album; VITE_SONG_API = "https://api-meting.imsyy.top"
let id = "7452421335"; //album ID; song ID; playlist ID; # Song server ( netease-netease, tencent-qq music )
VITE_SONG_SERVER = "netease"
# Playback type ( song-song, playlist-playlist, album-album, search-search, artist-artist )
VITE_SONG_TYPE = "playlist"
# Playback ID
VITE_SONG_ID = "7452421335"
``` ```
### Fonts ### Fonts
@ -149,20 +107,20 @@ make clean all
</details> </details>
### Plugins ### Technology Stack
* [Bootstrap](https://getbootstrap.com/) * [Vue](https://cn.vuejs.org/)
* [iziToast](https://izitoast.marcelodolza.com/) * [Vite](https://vitejs.cn/vite3-cn/)
* [Font Awesome](https://fontawesome.com/) * [Pinia](https://pinia.vuejs.org/zh/)
* [jQuery](https://jquery.com/) * [IconPark](https://iconpark.oceanengine.com/official)
* [xicons](https://xicons.org/)
* [Aplayer](https://aplayer.js.org/) * [Aplayer](https://aplayer.js.org/)
### API ### API
* [MetingAPI By wuenci](https://api.wuenci.com/meting/api/) * [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
* [小歪 API](https://api.ixiaowai.cn/) * [小歪 API](https://api.ixiaowai.cn/)
* [和风天气](https://dev.qweather.com/) * [高德开放平台](https://lbs.amap.com/)
* [ROLL](https://www.mxnzp.com/doc/list)
* [Hitokoto 一言](https://hitokoto.cn/) * [Hitokoto 一言](https://hitokoto.cn/)
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a> <a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>

89
css/animation.css
View File

@ -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
View File

@ -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
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
font/MiSans-Regular.subset.ttf
View File

Binary file not shown.

BIN
font/MiSans-Regular.subset.woff2
View File

Binary file not shown.

BIN
font/MiSans-Regular.woff2
View File

Binary file not shown.

BIN
img/background4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

547
index.html
View File

@ -2,513 +2,52 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<!-- 基础信息 --> <meta charset="UTF-8" />
<meta charset="utf-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 强制 HTTPS，若不需要可删除，但可能出现问题 --> <meta name="description" content="一个默默无闻的主页">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <meta name="keywords" content="無名,个人主页">
<meta name="renderer" content="webkit" /> <meta name="author" content="無名">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title><%- title %></title>
<meta name="force-rendering" content="webkit" /> <!-- HarmonyOS Sans -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<meta name="theme-color" content="#424242" /> <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
<meta name="description" content="一个默默无闻的主页"> <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
<meta name="keywords" content="無名,个人主页"> <link rel="icon" href="/images/icon/favicon.ico">
<meta name="author" content="無名"> <link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
<title>無名の主页</title> <link rel="stylesheet" href="/loading/loading.min.css">
<!-- jQuery --> <!-- IE Out -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script> <script>
<!-- HarmonyOS Sans --> if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 --> window.location.href =
<!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css --> "https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
<link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> </script>
<!-- 引入样式 -->
<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>
</head> </head>
<body> <body class="loading">
<!--加载动画--> <!--加载动画-->
<div id="loading-box"> <div id="loading-box">
<div class="loading-left-bg"></div> <div class="loading-left-bg"></div>
<div class="loading-right-bg"></div> <div class="loading-right-bg"></div>
<div class="spinner-box"> <div class="spinner-box">
<div class="loader"> <div class="loader">
<div class="inner one"></div> <div class="inner one"></div>
<div class="inner two"></div> <div class="inner two"></div>
<div class="inner three"></div> <div class="inner three"></div>
</div> </div>
<div class="loading-word"> <div class="loading-word">
<p class="loading-title" id="loading-title">無名の主页</p> <p class="loading-title" id="loading-title"><%- title %></p>
<span id="loading-text">加载中</span> <span id="loading-text">加载中</span>
</div> </div>
</div>
</div> </div>
<section id="section" class="section"> </div>
<!-- 背景图片 --> <!-- 主体内容 -->
<div class="bg-all"> <div id="app"></div>
<img id="bg" onerror="this.classList.add('error');"></img> <!-- noscript -->
<div class="cover"></div> <noscript>
</div> <div style="text-align: center">请开启 JavaScript</div>
<!-- 鼠标指针 --> </noscript>
<div id="g-pointer-1"></div> <script type="module" src="/src/main.js"></script>
<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&nbsp;World&nbsp;!</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>&nbsp;打开音乐播放器</span>
</div>
<!--切换音乐结束-->
<div class="hitokoto-all">
<div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
</div>
<div class="hitokoto-from">-「&nbsp;<span id="from_text">無名</span>&nbsp;」
</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&nbsp;年&nbsp;0&nbsp;月&nbsp;00&nbsp;日&nbsp;<span
class="weekday">星期一</span><br><span class="time-text">00:00:00</span>
</div>
<div class="weather">
<span id="city_text">天气</span>&nbsp;
<span id="wea_text">加载失败</span>&nbsp;
<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;">今日已经度过了&nbsp;<span></span>&nbsp;小时</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="item" id="weekProgress">
<div class="date-text">本周已经度过了&nbsp;<span></span>&nbsp;天</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="item" id="monthProgress">
<div class="date-text">本月已经度过了&nbsp;<span></span>&nbsp;天</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="item" id="yearProgress">
<div class="date-text">今年已经度过了&nbsp;<span></span>&nbsp;个月</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">&nbsp;v&nbsp;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>&nbsp;音乐歌单支持快速自定义
</span>
<span class="uptext">
<i class="fa-solid fa-circle-plus"></i>&nbsp;壁纸支持个性化设置
</span>
<span class="uptext">
<i class="fa-solid fa-circle-plus"></i>&nbsp;音乐播放器支持音量控制
</span>
<span class="uptext">
<i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;修复天气 API
</span>
<span class="uptext">
<i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;时光胶囊显示错误
</span>
<span class="uptext">
<i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;移动端动画及细节
</span>
<span class="uptext">
<i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;图标更换为 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&nbsp;&copy;
<script>
document.write((new Date()).getFullYear());
</script>
<a href="https://imsyy.top" id="power-text">無名</a>
</span>
<!-- 以下信息请不要修改哦 -->
<span id="made">&amp;&nbsp;Made&nbsp;by&nbsp;<a href="https://github.com/imsyy/home"
target="_blank">imsyy</a></span>
<!-- 站点备案 -->
<a href="https://beian.miit.gov.cn" id="beian" target="_blank">&amp;&nbsp;豫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>
</body> </body>
</html> </html>

1
js/51LA.js
View File

@ -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
View File

@ -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 () {});
}));

21
js/lantern.js
View File

@ -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
View File

@ -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&nbsp;")
$('#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 + "&nbsp;年&nbsp;" + mm + "&nbsp;月&nbsp;" + d + "&nbsp;日&nbsp;" + "<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&nbsp;in&nbsp;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&nbsp;!");
$("#change1").html("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
} else {
$('#container').attr('class', 'container');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#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&nbsp;World&nbsp;!");
$("#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
View File

@ -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>&nbsp;" + $(".aplayer-lrc-current").text() + "&nbsp;<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);
}
})

73
js/set.js
View File

@ -1,73 +0,0 @@
/*
作者: imsyy
主页：https://www.imsyy.top/
GitHub：https://github.com/imsyy/home
版权所有，请勿删除
*/
// 背景图片 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
View File

@ -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
manifest.json
View File

@ -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"}]}

3691
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

36
package.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "home",
"author": "imsyy",
"github": "https://github.com/imsyy/home",
"home": "https://imsyy.top",
"private": true,
"version": "4.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",
"pinia-plugin-persistedstate": "^3.0.0",
"terser": "^5.16.1",
"vue": "^3.2.37",
"vue3-aplayer": "^1.7.3"
},
"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"
}
}

0
font/Pacifico-Regular.ttf → public/font/Pacifico-Regular.ttf
View File

0
font/UnidreamLED.ttf → public/font/UnidreamLED.ttf
View File

0
img/background1.webp → public/images/background1.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

0
img/background10.webp → public/images/background10.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
img/background2.webp → public/images/background2.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 96 KiB

0
img/background3.webp → public/images/background3.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/background4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

0
img/background5.webp → public/images/background5.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 147 KiB

0
img/background6.webp → public/images/background6.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

0
img/background7.webp → public/images/background7.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
img/background8.webp → public/images/background8.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

0
img/background9.webp → public/images/background9.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

0
img/icon/128.png → public/images/icon/128.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
img/icon/144.png → public/images/icon/144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
img/icon/180.png → public/images/icon/180.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
img/icon/192.png → public/images/icon/192.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

0
img/icon/32.png → public/images/icon/32.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
img/icon/48.png → public/images/icon/48.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
img/icon/512.png → public/images/icon/512.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

0
img/icon/72.png → public/images/icon/72.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

0
img/icon/96.png → public/images/icon/96.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
img/icon/apple-touch-icon.png → public/images/icon/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

0
img/icon/candle.png → public/images/icon/candle.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

0
img/icon/favicon.ico → public/images/icon/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 264 KiB

After

Width:  |  Height:  |  Size: 264 KiB

0
img/icon/logo.png → public/images/icon/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

0
img/icon/music.png → public/images/icon/music.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
img/icon/pause.png → public/images/icon/pause.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

0
img/icon/play.png → public/images/icon/play.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

0
img/icon/warn.png → public/images/icon/warn.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

18
css/loading.css → public/loading/loading.css
View File

@ -1,11 +1,16 @@
* {
margin: 0;
padding: 0;
}
#loading-box .loading-left-bg, #loading-box .loading-left-bg,
#loading-box .loading-right-bg { #loading-box .loading-right-bg {
position: fixed; position: fixed;
z-index: 999998; z-index: 999998;
width: 50%; width: 50%;
height: 100%; height: 100%;
background-color: rgb(81 81 81 / 80%); background-color: #515151e0;
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01); transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -31,7 +36,7 @@
text-align: center; text-align: center;
} }
p.loading-title { .loading-title {
font-size: 1.25rem; font-size: 1.25rem;
margin: 20px 10px 4px 10px; margin: 20px 10px 4px 10px;
} }
@ -42,15 +47,16 @@ p.loading-title {
background-color: #37474f; background-color: #37474f;
} }
div.loaded div.loading-left-bg { /* 加载完成 */
.loaded .loading-left-bg {
transform: translate(-100%, 0); transform: translate(-100%, 0);
} }
div.loaded div.loading-right-bg { .loaded .loading-right-bg {
transform: translate(100%, 0); transform: translate(100%, 0);
} }
div.loaded div.spinner-box { .loaded .spinner-box {
display: none !important; display: none !important;
} }

1
public/loading/loading.min.css vendored Normal file
View 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)}}

210
src/App.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<div class="animate">
<Background />
<main>
<div class="container" v-show="!store.backgroundShow">
<section class="main" v-show="!store.setOpenState">
<MainLeft />
<MainRight v-show="!store.boxOpenState" />
<Box v-show="store.boxOpenState" />
</section>
<section
class="more"
v-show="store.setOpenState"
@click="store.setOpenState = false"
>
<MoreSet />
</section>
</div>
<!-- 移动端菜单按钮 -->
<Icon
class="menu"
size="24"
@click="store.mobileOpenState = !store.mobileOpenState"
>
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
</Icon>
</main>
<Footer v-show="!store.backgroundShow && !store.setOpenState" />
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, watch } from "vue";
import { helloInit, checkDays } from "@/utils/getTime.js";
import { mainStore } from "@/store";
import { Icon } from "@vicons/utils";
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
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 MoreSet from "@/views/MoreSet/index.vue";
import cursorInit from "@/utils/cursor.js";
import config from "@/../package.json";
// 新春灯笼
import "@/utils/lantern.js";
const store = mainStore();
// 页面宽度
const getWidth = () => {
store.setInnerWidth(window.innerWidth);
};
onMounted(() => {
// 自定义鼠标
cursorInit();
// 欢迎提示
helloInit();
// 默哀模式
checkDays();
// 加载完成事件
window.addEventListener("load", () => {
console.log("加载完成");
// 去除加载标记
document.getElementsByTagName("body")[0].className = "";
// 给加载动画添加结束标记
let loadingBox = document.getElementById("loading-box");
loadingBox.classList.add("loaded");
});
// 屏蔽右键
document.oncontextmenu = () => {
ElMessage({
message: "为了浏览体验，本站禁用右键",
grouping: true,
duration: 2000,
});
return false;
};
// 鼠标中键事件
window.addEventListener("mousedown", (event) => {
if (event.button == 1) {
store.backgroundShow = !store.backgroundShow;
if (store.backgroundShow) {
ElMessage("已开启壁纸展示状态");
} else {
ElMessage("已退出壁纸展示状态");
}
}
});
// 监听当前页面宽度
getWidth();
window.addEventListener("resize", getWidth);
// 控制台输出
let styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
let styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
let styleContent = "color: rgb(30,152,255);";
let title1 = "無名の主页";
let title2 = `
_____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
| | | |\\/| |\\___ \\ \\ / \\ /
_| |_| | | |____) | | | | |
|_____|_| |_|_____/ |_| |_|`;
let content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
console.info(
`%c${title1} %c${title2} %c${content}`,
styleTitle1,
styleTitle2,
styleContent
);
});
// 监听宽度变化
watch(
() => store.innerWidth,
(value) => {
if (value < 990) {
store.boxOpenState = false;
}
}
);
onBeforeUnmount(() => {
window.removeEventListener("resize", getWidth);
});
</script>
<style lang="scss" scoped>
main {
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
@media (max-width: 1200px) {
padding: 0 2vw;
}
.main {
width: 100%;
height: 100%;
padding: 0 0.75rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.more {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000080;
backdrop-filter: blur(20px);
z-index: 2;
animation: fade;
-webkit-animation: fade 0.5s;
}
}
.menu {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 84%;
left: calc(50% - 28px);
width: 56px;
height: 34px;
background: rgb(0 0 0 / 20%);
backdrop-filter: blur(10px);
border-radius: 6px;
transition: all 0.3s;
animation: fade;
-webkit-animation: fade 0.5s;
&:active {
transform: scale(0.95);
}
.i-icon {
transform: translateY(2px);
}
@media (min-width: 720px) {
display: none;
}
}
}
// 加载动画层
.animate {
transform: scale(1);
transition: all ease 1.25s;
opacity: 1;
filter: blur(0);
width: 100%;
height: 100%;
}
.loading {
.animate {
transform: scale(1.2);
transition: all ease 1.25s;
opacity: 0;
filter: blur(10px);
}
}
</style>

38
src/api/index.js Normal file
View File

@ -0,0 +1,38 @@
// import axios from "axios";
/**
* 音乐播放器
*/
// 获取音乐播放列表
export const getPlayerList = async (server, type, id) => {
const res = await fetch(`${import.meta.env.VITE_SONG_API}/?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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

143
src/components/Background/index.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div class="cover">
<img class="bg" :src="bgUrl" alt="cover" />
<div :class="store.backgroundShow ? 'gray sm' : 'gray'" />
<transition name="el-fade-in-linear">
<a
class="down"
:href="bgUrl"
target="_blank"
v-show="store.backgroundShow && store.coverType != '3'"
>下载壁纸</a
>
</transition>
</div>
</template>
<script setup>
import { onMounted, ref, watch, h } from "vue";
import { SuccessPicture } from "@icon-park/vue-next";
import { mainStore } from "@/store";
const store = mainStore();
let bgUrl = ref(null); // 壁纸链接
const changeBg = (type) => {
if (type == 0) {
bgUrl.value = `/images/background${Math.floor(
Math.random() * 10 + 1
)}.webp`;
} else if (type == 1) {
bgUrl.value = "https://api.dujin.org/bing/1920.php";
} else if (type == 2) {
bgUrl.value = "https://api.ixiaowai.cn/gqapi/gqapi.php";
} else if (type == 3) {
bgUrl.value = "https://api.ixiaowai.cn/api/api.php";
}
};
onMounted(() => {
// 加载壁纸
changeBg(store.coverType);
});
// 监听壁纸种类变化
watch(
() => store.coverType,
(value) => {
changeBg(value);
ElMessage({
message: "壁纸设置成功",
icon: h(SuccessPicture, {
theme: "filled",
fill: "#efefef",
}),
});
}
);
</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;
&.sm {
opacity: 0;
transition: 1.5s;
}
}
.down {
font-size: 16px;
color: white;
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
padding: 20px 26px;
border-radius: 8px;
background-color: #00000030;
width: 120px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
transform: scale(1.05);
background-color: #00000060;
}
&:active {
transform: scale(1);
}
}
}
// 加载时动画
.loading {
.cover {
.bg {
transition: 1.5s;
transform: scale(1.1);
filter: blur(10px);
}
.gray {
transition: 1.5s;
opacity: 0;
}
}
}
</style>

84
src/components/Footer/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<footer>
<div class="power" v-show="!store.playerState">
<span
>Copyright&nbsp;&copy;&nbsp;{{ fullYear }}
<a href="https://imsyy.top">無名</a>
</span>
<!-- 以下信息请不要修改哦 -->
<span class="hidden"
>&nbsp;&amp;&nbsp;Made&nbsp;by&nbsp;<a
:href="config.github"
target="_blank"
>
{{ config.author }}
</a></span
>&nbsp;&amp;
<!-- 站点备案 -->
<a href="https://beian.miit.gov.cn" target="_blank"
>豫ICP备2022018134号-1</a
>
</div>
<div class="lrc" v-show="store.playerState">
<music-one theme="filled" size="18" fill="#efefef" />
<span class="lrc-text">
{{ store.getPlayerLrc ? store.getPlayerLrc : "这句没有歌词" }}
</span>
<music-one theme="filled" size="18" fill="#efefef" />
</div>
</footer>
</template>
<script setup>
import { MusicOne } from "@icon-park/vue-next";
import { mainStore } from "@/store";
import config from "@/../package.json";
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;
animation: fade;
-webkit-animation: fade 0.5s;
@media (max-width: 720px) {
font-size: 0.85rem;
}
@media (max-width: 480px) {
.hidden {
display: none;
}
}
.power {
animation: fade;
-webkit-animation: fade 0.3s;
}
.lrc {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
animation: fade;
-webkit-animation: fade 0.3s;
.lrc-text {
margin: 0 8px;
}
.i-icon {
width: 18px;
height: 18px;
display: inherit;
}
}
}
</style>

131
src/components/Hitokoto/index.vue Normal file
View 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">-「&nbsp;{{ hitokotoData.from }}&nbsp;」</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>

137
src/components/Links/index.vue Normal file
View File

@ -0,0 +1,137 @@
<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, index) in linksData"
:key="item"
@click="jumpLink(item.link)"
>
<div
class="item cards"
:style="index < 3 ? 'margin-bottom: 20px' : null"
>
<Icon size="26">
<component :is="item.icon" />
</Icon>
<span class="name">{{ item.name }}</span>
</div>
</el-col>
</el-row>
</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;
text-shadow: 0 0 5px #00000050;
}
}
.link-all {
.item {
height: 100px;
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
animation: fade;
-webkit-animation: fade 0.5s;
&:hover {
transform: scale(1.02);
background: rgb(0 0 0 / 40%);
transition: 0.3s;
}
.name {
font-size: 1.1rem;
margin-left: 8px;
}
@media (min-width: 720px) and (max-width: 820px) {
.name {
display: none;
}
}
@media (max-width: 720px) {
height: 80px;
}
@media (max-width: 460px) {
flex-direction: column;
.name {
font-size: 1rem;
margin-left: 0;
margin-top: 8px;
}
}
}
}
}
</style>

153
src/components/Message/index.vue Normal file
View File

@ -0,0 +1,153 @@
<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">{{ siteUrl[0] }}</span>
<span class="sm">.{{ siteUrl[1] }}</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, h } from "vue";
import { Icon } from "@vicons/utils";
import { QuoteLeft, QuoteRight } from "@vicons/fa";
import { Error } from "@icon-park/vue-next";
import { mainStore } from "@/store";
const store = mainStore();
// 站点链接
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
// 简介区域文字
let descriptionText = reactive({
hello: import.meta.env.VITE_DESC_HELLO,
text: import.meta.env.VITE_DESC_TEXT,
});
// 切换右侧功能区
const changeBox = () => {
if (store.getInnerWidth >= 990) {
store.boxOpenState = !store.boxOpenState;
} else {
ElMessage({
message: "当前页面宽度不足以开启盒子",
grouping: true,
icon: h(Error, {
theme: "filled",
fill: "#efefef",
}),
});
}
};
// 监听状态变化
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;
animation: fade;
-webkit-animation: fade 0.5s;
.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;
@media (min-width: 720px) and (max-width: 789px) {
display: none;
}
}
}
@media (max-width: 768px) {
.logo-img {
width: 100px;
}
.name {
.bg {
font-size: 4.5rem;
}
}
}
}
.description {
padding: 1rem;
margin-top: 3.5rem;
max-width: 460px;
animation: fade;
-webkit-animation: fade 0.5s;
.content {
display: flex;
justify-content: space-between;
.text {
margin: 0.75rem 1rem;
line-height: 2rem;
margin-right: auto;
p {
&:nth-of-type(1) {
font-family: "Pacifico-Regular";
}
}
}
.xicon:nth-of-type(2) {
align-self: flex-end;
}
}
@media (max-width: 720px) {
max-width: 100%;
pointer-events: none;
}
}
}
</style>

339
src/components/Music/index.vue Normal file
View File

@ -0,0 +1,339 @@
<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">
<div class="name" v-show="!volumeShow">
<span>{{
store.getPlayerData.name
? store.getPlayerData.name + " - " + store.getPlayerData.artist
: "未播放音乐"
}}</span>
</div>
<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>
</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"
/>
<Player
:songServer="playerData.server"
:songType="playerData.type"
:songId="playerData.id"
:volume="volumeNum"
:shuffle="true"
ref="playerRef"
/>
</div>
</Transition>
</div>
</Transition>
</template>
<script setup>
import { ref, reactive, watch, onMounted, nextTick } from "vue";
import {
GoStart,
PlayOne,
Pause,
GoEnd,
CloseOne,
VolumeMute,
VolumeSmall,
VolumeNotice,
} from "@icon-park/vue-next";
import Player from "@/components/Player/index.vue";
import { mainStore } from "@/store";
const store = mainStore();
// 音量条数据
let volumeShow = ref(false);
let volumeNum = ref(store.musicVolume ? store.musicVolume : 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) => {
playerRef.value.changeSong(type);
};
onMounted(() => {
// 空格键事件
window.addEventListener("keydown", (e) => {
if (e.code == "Space") {
changePlayState();
}
});
});
// 监听音量变化
watch(
() => volumeNum.value,
(value) => {
store.musicVolume = value;
playerRef.value.changeVolume(store.musicVolume);
}
);
</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;
animation: fade;
-webkit-animation: fade 0.3s;
}
.volume {
width: 100%;
padding: 0 12px;
display: flex;
align-items: center;
flex-direction: row;
animation: fade;
-webkit-animation: fade 0.3s;
.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;
@media (max-width: 720px) {
left: calc(50% - 45%);
width: 90%;
}
.close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: block;
&:hover {
transform: scale(1.2);
}
&:active {
transform: scale(0.95);
}
}
}
}
// 弹窗动画
.fade-enter-active {
animation: fade 0.3s ease-in-out;
}
.fade-leave-active {
animation: fade 0.3s ease-in-out reverse;
}
.zoom-enter-active {
animation: zoom 0.4s ease-in-out;
}
.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>

375
src/components/Music/test.vue Normal file
View File

@ -0,0 +1,375 @@
<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">
<div class="name" v-show="!volumeShow">
<span>{{
store.getPlayerData.name
? store.getPlayerData.name + " - " + store.getPlayerData.artist
: "未播放音乐"
}}</span>
</div>
<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>
</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"
/>
<Player
:songServer="playerData.server"
:songType="playerData.type"
:songId="playerData.id"
ref="playerRef"
/>
<div class="error" v-if="!store.musicIsOk">
<play-wrong theme="outline" size="60" />
<span>音乐播放器加载失败</span>
</div>
</div>
</Transition>
</div>
</Transition>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import {
GoStart,
PlayOne,
Pause,
GoEnd,
CloseOne,
VolumeMute,
VolumeSmall,
VolumeNotice,
PlayWrong,
} from "@icon-park/vue-next";
import Player from "@/components/Player/old.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" && store.musicIsOk) {
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;
animation: fade;
-webkit-animation: fade 0.3s;
}
.volume {
width: 100%;
padding: 0 12px;
display: flex;
align-items: center;
flex-direction: row;
animation: fade;
-webkit-animation: fade 0.3s;
.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);
}
}
.error {
display: flex;
flex-direction: column;
align-items: center;
.i-icon {
margin-bottom: 20px;
}
}
}
}
// 弹窗动画
.fade-enter-active {
animation: fade 0.3s ease-in-out;
}
.fade-leave-active {
animation: fade 0.3s ease-in-out reverse;
}
.zoom-enter-active {
animation: zoom 0.4s ease-in-out;
}
.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>

299
src/components/Player/index.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<aplayer
showLrc
ref="player"
v-if="playList[0]"
:music="playList[playIndex]"
:list="playList"
:autoplay="autoplay"
:theme="theme"
:repeat="repeat"
:shuffle="shuffle"
:listMaxHeight="listMaxHeight"
:listFolded="listFolded"
:volume="volume"
@play="onPlay"
@pause="onPause"
@timeupdate="onTimeUp"
@onSelectSong="onSelectSong"
/>
</template>
<script setup>
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
import aplayer from "vue3-aplayer";
import {
h,
ref,
reactive,
nextTick,
onMounted,
onBeforeUnmount,
watch,
} from "vue";
import { getPlayerList } from "@/api";
import { mainStore } from "@/store";
const store = mainStore();
// 获取播放器 DOM
const player = ref(null);
// 歌曲播放列表
let playList = ref([]);
let playerLrc = ref("");
// 歌曲播放项
let playIndex = ref(0);
let playListCount = ref(0);
// 配置项
const props = defineProps({
// 音频自动播放
autoplay: {
type: Boolean,
default: false,
},
// 主题色
theme: {
type: String,
default: "#efefef",
},
// 音频循环播放
repeat: {
type: String,
default: "list", //'list' | 'music' | 'none'
},
// 随机播放
shuffle: {
type: Boolean,
default: false,
},
// 默认音量
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",
},
// 列表是否默认折叠
listFolded: {
type: Boolean,
default: false,
},
// 列表最大高度
listMaxHeight: {
type: String,
default: "420px",
},
});
// 初始化播放器
onMounted(() => {
nextTick(() => {
getPlayerList(props.songServer, props.songType, props.songId)
.then((res) => {
// 生成歌单信息
playIndex.value = Math.floor(Math.random() * res.length);
playListCount.value = res.length;
// 更改播放器加载状态
store.musicIsOk = true;
console.log(
"音乐加载完成",
res,
playIndex.value,
playListCount.value,
props.volume
);
// 生成歌单
res.forEach((v) => {
playList.value.push({
title: v.name,
artist: v.artist,
src: v.url,
pic: v.pic,
lrc: v.lrc,
});
});
})
.catch(() => {
store.musicIsOk = false;
ElMessage({
message: "播放器加载失败",
grouping: true,
icon: h(PlayWrong, {
theme: "filled",
fill: "#efefef",
}),
});
});
});
});
// 播放暂停事件
const onPlay = () => {
console.log("播放");
// 播放状态
store.setPlayerState(player.value.audio.paused);
// 储存播放器信息
store.setPlayerData(
player.value.currentMusic.title,
player.value.currentMusic.artist
);
ElMessage({
message: store.getPlayerData.name + " - " + store.getPlayerData.artist,
grouping: true,
icon: h(MusicOne, {
theme: "filled",
fill: "#efefef",
}),
});
};
const onPause = () => {
store.setPlayerState(player.value.audio.paused);
};
// 音频时间更新事件
const onTimeUp = () => {
let playerRef = player.value.$.vnode.el;
if (playerRef) {
playerLrc.value = playerRef.getElementsByClassName(
"aplayer-lrc-current"
)[0].innerHTML;
store.setPlayerLrc(playerLrc.value);
}
};
// 切换播放暂停事件
const playToggle = () => {
player.value.toggle();
};
// 切换音量事件
const changeVolume = (value) => {
player.value.audio.volume = value;
};
const onSelectSong = (val) => {
console.log(val);
};
// 切换上下曲
const changeSong = (type) => {
playIndex.value = player.value.playIndex;
playIndex.value += type ? 1 : -1;
// 判断是否处于最后/第一首
if (playIndex.value < 0) {
playIndex.value = playListCount.value - 1;
} else if (playIndex.value >= playListCount.value) {
playIndex.value = 0;
}
// console.log(playIndex.value, playList.value[playIndex.value]);
nextTick(() => {
player.value.play();
});
};
// 暴露子组件方法
defineExpose({ playToggle, changeVolume, changeSong });
</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-music {
flex-grow: initial;
margin-bottom: 2px;
overflow: initial;
.aplayer-title {
font-size: 16px;
margin-right: 6px;
}
.aplayer-author {
color: #efefef;
}
}
.aplayer-lrc {
text-align: left;
margin: 4px 0 6px 6px;
height: 100%;
mask: linear-gradient(
#fff 15%,
#fff 85%,
hsla(0deg, 0%, 100%, 0.6) 90%,
hsla(0deg, 0%, 100%, 0)
);
-webkit-mask: linear-gradient(
#fff 15%,
#fff 85%,
hsla(0deg, 0%, 100%, 0.6) 90%,
hsla(0deg, 0%, 100%, 0)
);
&::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 {
&::-webkit-scrollbar-track {
background-color: transparent;
}
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>

319
src/components/Player/old.vue Normal file
View File

@ -0,0 +1,319 @@
<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", () => {
if (playerRef.value) {
playerData.lrc = playerRef.value.getElementsByClassName(
"aplayer-lrc-current"
)[0].innerHTML;
}
});
})
.catch(() => {
store.musicIsOk = false;
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>

112
src/components/Set/index.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div class="setting">
<el-collapse class="collapse" v-model="activeName" accordion>
<el-collapse-item title="壁纸设置" name="1">
<div class="bg-set">
<el-radio-group v-model="bgSet" text-color="#ffffff">
<el-radio label="0" size="large" border>默认壁纸</el-radio>
<el-radio label="1" size="large" border>每日一图</el-radio>
<el-radio label="2" size="large" border>随机风景</el-radio>
<el-radio label="3" size="large" border>随机动漫</el-radio>
</el-radio-group>
</div>
</el-collapse-item>
<el-collapse-item title="其他设置" name="2">
<div>设置内容待增加</div>
</el-collapse-item>
<el-collapse-item title="其他设置" name="3">
<div>设置内容待增加</div>
</el-collapse-item>
<el-collapse-item title="其他设置" name="4">
<div>设置内容待增加</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { mainStore } from "@/store";
const store = mainStore();
// 默认选中项
let activeName = ref("1");
let bgSet = ref("0");
onMounted(() => {
bgSet.value = store.coverType.toString();
});
// 壁纸选中项
watch(
() => bgSet.value,
(value) => {
store.coverType = value;
}
);
</script>
<style lang="scss" scoped>
.setting {
.collapse {
border-radius: 8px;
--el-collapse-content-bg-color: #ffffff10;
border-color: transparent;
overflow: hidden;
:deep(.el-collapse-item__header) {
background-color: #ffffff30;
color: #fff;
font-size: 15px;
padding-left: 18px;
border-color: transparent;
}
:deep(.el-collapse-item__wrap) {
border-color: transparent;
.el-collapse-item__content {
padding: 20px;
.bg-set {
.el-radio-group {
justify-content: space-between;
.el-radio {
margin: 10px 16px;
background: #ffffff26;
border: 2px solid transparent;
border-radius: 8px;
.el-radio__label {
color: #fff;
}
.el-radio__inner {
background: #ffffff06 !important;
border: 2px solid #eeeeee !important;
}
&.is-checked {
background: #ffffff06 !important;
border: 2px solid #eeeeee !important;
}
.is-checked {
.el-radio__inner {
background-color: #ffffff30 !important;
border-color: #fff !important;
}
& + .el-radio__label {
color: #fff !important;
}
}
}
}
}
}
}
}
}
</style>

171
src/components/SocialLinks/index.vue Normal file
View File

@ -0,0 +1,171 @@
<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);
animation: fade;
-webkit-animation: fade 0.5s;
@media (max-width: 840px) {
max-width: 100%;
justify-content: center;
.link {
justify-content: space-evenly !important;
width: 90%;
}
.tip {
display: none !important;
}
}
.link {
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>

88
src/components/TimeCapsule/index.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="time-capsule">
<div class="title">
<hourglass-full
theme="two-tone"
size="24"
:fill="['#efefef', '#00000020']"
/>
<span>时光胶囊</span>
</div>
<span class="text"
>今日已经度过了&nbsp;{{ timeData.day.start }}&nbsp;小时</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.day.pass"
/>
<span class="text"
>本周已经度过了&nbsp;{{ timeData.week.start }}&nbsp;天</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.week.pass"
/>
<span class="text"
>本月已经度过了&nbsp;{{ timeData.month.start }}&nbsp;天</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.month.pass"
/>
<span class="text"
>今年已经度过了&nbsp;{{ timeData.year.start }}&nbsp;个月</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.year.pass"
/>
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import { HourglassFull } from "@icon-park/vue-next";
import { getTimeCapsule } from "@/utils/getTime.js";
// 进度条数据
let timeData = ref(getTimeCapsule());
let timeInterval = null;
onMounted(() => {
timeInterval = setInterval(() => {
timeData.value = getTimeCapsule();
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(timeInterval);
});
</script>
<style lang="scss" scoped>
.time-capsule {
width: 100%;
.title {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.2rem 0 1.5rem;
font-size: 1.1rem;
.i-icon {
display: flex;
justify-content: center;
align-items: center;
margin-right: 6px;
}
}
.text {
display: block;
margin: 1rem 0rem 0.5rem 0rem;
font-size: 0.95rem;
}
}
</style>

92
src/components/Weather/index.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div
class="weather"
v-if="weatherData.adCode.city && weatherData.weather.weather"
>
<span>{{ weatherData.adCode.city }}&nbsp;</span>
<span>{{ weatherData.weather.weather }}&nbsp;</span>
<span>{{ weatherData.weather.temperature }}℃</span>
<span class="sm-hidden">&nbsp;{{ weatherData.weather.winddirection }}风&nbsp;</span>
<span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</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>

17
src/main.js Normal file
View File

@ -0,0 +1,17 @@
import {
createApp
} from 'vue';
import '@/style/style.scss';
import App from '@/App.vue';
// 引入 pinia
import {
createPinia
} from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount('#app')

74
src/store/index.js Normal file
View File

@ -0,0 +1,74 @@
import {
defineStore
} from "pinia";
export const mainStore = defineStore("main", {
state: () => {
return {
innerWidth: null, // 当前窗口宽度
coverType: "0", // 壁纸种类
musicIsOk: false, // 音乐是否加载完成
musicVolume: 0, // 音乐音量;
musicOpenState: false, // 音乐面板开启状态
backgroundShow: false, // 壁纸展示状态
boxOpenState: false, // 盒子开启状态
mobileOpenState: false, // 移动端开启状态
mobileFuncState: false, // 移动端功能区开启状态
setOpenState: 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;
if (value >= 720) {
this.mobileOpenState = false;
this.mobileFuncState = false;
}
},
// 更改播放状态
setPlayerState(value) {
if (value) {
this.playerState = false;
} else {
this.playerState = true;
}
},
// 更改歌词
setPlayerLrc(value) {
this.playerLrc = value;
},
// 更改歌曲数据
setPlayerData(title, artist) {
this.playerTitle = title;
this.playerArtist = artist;
}
},
persist: {
key: 'data',
storage: window.localStorage,
paths: ['coverType', 'musicVolume'],
},
})

32
src/style/global.css Normal file
View File

@ -0,0 +1,32 @@
@charset "UTF-8";
.container {
max-width: 1200px;
}
/* 小于1200px时 */
@media (max-width: 1380px) {
.el-radio-group {
justify-content: center !important;
}
}
/* 小于1200px时 */
@media (max-width: 1200px) {
.container {
max-width: 1000px;
}
.sm-hidden {
display: none;
}
}
/* 小于992px时 */
@media (max-width: 992px) {
.container {
max-width: 900px;
}
}
/* 小于720px时 */
@media (max-width: 720px) {
.xs-hidden {
display: none;
}
}/*# sourceMappingURL=global.css.map */

1
src/style/global.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["global.css","global.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIZ;EACI,iBAFqB;ADA7B;;ACSA,cAAA;AACA;EACI;IACI,kCAAA;EDNN;AACF;ACSA,cAAA;AACA;EAhBI;IACI,iBAgB2B;EDNjC;ECSE;IACI,aAAA;EDPN;AACF;ACUA,aAAA;AACA;EA1BI;IACI,gBA0B2B;EDPjC;AACF;ACSA,aAAA;AACA;EAGI;IACI,aAAA;EDTN;AACF","file":"global.css"}

37
src/style/global.scss Normal file
View File

@ -0,0 +1,37 @@
// scss 全局变量
// 响应式布局
@mixin changeWidth($maxWidth:1200px) {
.container {
max-width: $maxWidth;
}
}
// 首次调用
@include changeWidth;
/* 小于1380px时 */
@media (max-width: 1380px) {
.el-radio-group {
justify-content: center !important;
}
}
/* 小于1200px时 */
@media (max-width: 1200px) {
@include changeWidth($maxWidth:1000px);
}
/* 小于992px时 */
@media (max-width: 992px) {
@include changeWidth($maxWidth:900px);
}
/* 小于720px时 */
@media (max-width: 720px) {
// 隐藏元素
.xs-hidden {
display: none;
}
}

179
src/style/style.css Normal file
View File

@ -0,0 +1,179 @@
@charset "UTF-8";
/*
作者: imsyy
主页：https://www.imsyy.top/
GitHub：https://github.com/imsyy/home
版权所有，请勿删除
*/
/*全局样式*/
html,
body {
width: 100%;
height: 100%;
background-color: #333;
overflow: hidden;
}
*,
a,
p {
margin: 0;
padding: 0;
-webkit-user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
transition: 0.3s;
color: #fff;
box-sizing: border-box;
}
*:hover,
a:hover,
p:hover {
transition: 0.3s;
}
@font-face {
font-family: "Pacifico-Regular";
src: url("/font/Pacifico-Regular.ttf") format("truetype");
}
@font-face {
font-family: "UnidreamLED";
src: url("/font/UnidreamLED.ttf") format("truetype");
}
#app {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
.cards {
border-radius: 6px;
background: rgba(0, 0, 0, 0.2509803922);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transform: scale(1);
transition: 0.5s;
animation: fade;
-webkit-animation: fade 0.5s;
}
.cards:hover {
transform: scale(1.01);
transition: 0.5s;
}
.cards:active {
transform: scale(0.98);
transition: 0.5s;
}
.el-message {
--el-message-bg-color: #00000040 !important;
--el-message-text-color: #efefef !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 25px !important;
border-color: transparent !important;
}
.el-message .el-message__badge {
display: none;
}
.el-progress-bar .el-progress-bar__outer {
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.1254901961);
}
.el-progress-bar .el-progress-bar__outer .el-progress-bar__inner {
background-color: #efefef;
border-radius: 6px;
text-align: center;
font-family: "UnidreamLED";
}
.el-progress-bar .el-progress-bar__outer .el-progress-bar__inner span {
color: #564d59;
font-size: 0.9rem;
}
.el-popper.is-dark {
background: rgba(255, 255, 255, 0.3764705882) !important;
border: 1px solid transparent !important;
}
.el-card {
border-radius: 8px !important;
border: 1px solid transparent !important;
background-color: transparent !important;
}
.el-card .el-card__header {
font-weight: bold;
padding: 16px 20px !important;
background-color: rgba(255, 255, 255, 0.1882352941) !important;
border-bottom: 1px solid transparent !important;
}
.el-card .el-card__body {
padding: 0 !important;
background-color: rgba(255, 255, 255, 0.062745098) !important;
}
.fade-enter-active {
-webkit-animation: fade 0.3s ease-in-out;
animation: fade 0.3s ease-in-out;
}
.fade-leave-active {
animation: fade 0.3s ease-in-out reverse;
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cursor {
position: fixed;
width: 18px;
height: 18px;
background: #fff;
border-radius: 25px;
opacity: 0.25;
z-index: 10086;
pointer-events: none;
transition: 0.2s ease-in-out;
transition-property: background, opacity, transform;
}
#cursor.hidden {
opacity: 0;
}
#cursor.active {
opacity: 0.5;
transform: scale(0.5);
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #eeeeee;
}/*# sourceMappingURL=style.css.map */

1
src/style/style.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;;;;CAAA;AASA,OAAA;AAEA;;EAEI,WAAA;EACA,YAAA;EACA,sBAAA;EACA,gBAAA;ADFJ;;ACKA;;;EAGI,SAAA;EACA,UAAA;EACA,yBAAA;EACA,uBAAA;EACA,sBAAA;GAAA,qBAAA;OAAA,iBAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,sBAAA;ADFJ;ACII;;;EACI,gBAAA;ADAR;;ACOA;EACI,+BAAA;EACA,yDAAA;ADJJ;ACOA;EACI,0BAAA;EACA,oDAAA;ADLJ;ACUA;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA;ADRJ;;ACYA;EACI,kBAAA;EACA,uCAAA;EACA,mCAAA;EACA,2BAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,4BAAA;ADTJ;;ACYA;EACI,sBAAA;EACA,gBAAA;ADTJ;;ACYA;EACI,sBAAA;EACA,gBAAA;ADTJ;;ACaA;EACI,2CAAA;EACA,2CAAA;EACA,mCAAA;EACA,2BAAA;EACA,8BAAA;EACA,oCAAA;ADVJ;ACYI;EACI,aAAA;ADVR;;ACgBI;EACI,kBAAA;EACA,6CAAA;ADbR;ACeQ;EACI,yBAAA;EACA,kBAAA;EACA,kBAAA;EACA,0BAAA;ADbZ;ACeY;EACI,cAAA;EACA,iBAAA;ADbhB;;ACsBA;EACI,wDAAA;EACA,wCAAA;ADnBJ;;ACuBA;EACI,6BAAA;EACA,wCAAA;EACA,wCAAA;ADpBJ;ACsBI;EACI,iBAAA;EACA,6BAAA;EACA,8DAAA;EACA,+CAAA;ADpBR;ACuBI;EACI,qBAAA;EACA,6DAAA;ADrBR;;AC0BA;EACI,wCAAA;UAAA,gCAAA;ADvBJ;;AC0BA;EACI,wCAAA;ADvBJ;;AC0BA;EACI;IACI,UAAA;EDvBN;EC0BE;IACI,UAAA;EDxBN;AACF;;ACiBA;EACI;IACI,UAAA;EDvBN;EC0BE;IACI,UAAA;EDxBN;AACF;AC4BA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,4BAAA;EACA,mDAAA;AD1BJ;AC4BI;EACI,UAAA;AD1BR;AC6BI;EACI,YAAA;EACA,qBAAA;AD3BR;;ACiCA;EACI,UAAA;EACA,WAAA;EACA,6BAAA;AD9BJ;;ACiCA;EACI,mBAAA;EACA,yBAAA;AD9BJ","file":"style.css"}

194
src/style/style.scss Normal file
View File

@ -0,0 +1,194 @@
/*
作者: 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;
font-family: 'HarmonyOS_Regular', sans-serif;
}
*,
a,
p {
margin: 0;
padding: 0;
-webkit-user-select: none;
-webkit-user-drag: none;
user-select: none;
text-decoration: none;
color: #fff;
box-sizing: border-box;
&:hover {
transition: .3s;
}
}
// 字体文件
@font-face {
font-family: "Pacifico-Regular";
src: url('/font/Pacifico-Regular.ttf') format('truetype');
}
@font-face {
font-family: "UnidreamLED";
src: url('/font/UnidreamLED.ttf') format('truetype');
}
// 基础样式
#app {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
// 卡片样式
.cards {
border-radius: 6px;
background: #00000040;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transform: scale(1);
transition: all 0.3s;
}
.cards:hover {
transform: scale(1.01);
}
.cards:active {
transform: scale(0.98);
}
// 弹窗样式
.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;
}
}
// 进度条样式
.el-progress-bar {
.el-progress-bar__outer {
border-radius: 6px;
background-color: #00000020;
.el-progress-bar__inner {
background-color: #efefef;
border-radius: 6px;
text-align: center;
font-family: 'UnidreamLED';
span {
color: #564d59;
font-size: .9rem;
}
}
}
}
// Tooltip 样式
.el-popper.is-dark {
background: #ffffff60 !important;
border: 1px solid transparent !important;
}
// 卡片样式
.el-card {
border-radius: 8px !important;
border: 1px solid transparent !important;
background-color: transparent !important;
.el-card__header {
font-weight: bold;
padding: 16px 20px !important;
background-color: #ffffff30 !important;
border-bottom: 1px solid transparent !important;
}
.el-card__body {
padding: 0 !important;
background-color: #ffffff10 !important;
}
}
// 渐入动画
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// 隐藏元素
@media (min-width: 910px) and (max-width: 1200px) {
.sm-hidden {
display: none;
}
}
// 自定义鼠标
#cursor {
position: fixed;
width: 18px;
height: 18px;
background: #fff;
border-radius: 25px;
opacity: 0.25;
z-index: 10086;
pointer-events: none;
transition: 0.2s ease-in-out;
transition-property: background, opacity, transform;
&.hidden {
opacity: 0;
}
&.active {
opacity: 0.5;
transform: scale(0.5);
}
}
// 滚动条样式
::-webkit-scrollbar,
scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb,
scrollbar-thumb {
border-radius: 10px;
background-color: #eeeeee;
}

94
src/utils/cursor.js Normal file
View File

@ -0,0 +1,94 @@
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("active");
this.pos = {
curr: null,
prev: null
};
this.pt = [];
this.create();
this.init();
this.render();
}
init() {
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
View 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;

118
src/utils/getTime.js Normal file
View File

@ -0,0 +1,118 @@
import {
h
} from "vue";
import {
SpaCandle
} from "@icon-park/vue-next";
// 时钟
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;
}
// 时光胶囊
export const getTimeCapsule = () => {
// 日进度
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
let todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60;
let todayPassHoursPercent = (todayPassHours / 24) * 100;
// 周进度
let weeks = [7, 1, 2, 3, 4, 5, 6];
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
// 月进度
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;
// 年进度
let yearPass = (month / 12) * 100;
return {
day: {
start: parseInt(todayPassHours),
pass: parseInt(todayPassHoursPercent),
},
week: {
start: weekDay,
pass: parseInt(weekDayPassPercent),
},
month: {
start: date,
pass: parseInt(monthPassPercent),
},
year: {
start: month == 0 ? month : month - 1,
pass: parseInt(yearPass),
}
}
}
// 欢迎提示
export const helloInit = () => {
let hour = new Date().getHours();
let hello = null;
if (hour < 6) {
hello = "凌晨好";
} else if (hour < 9) {
hello = "早上好";
} else if (hour < 12) {
hello = "上午好";
} else if (hour < 14) {
hello = "中午好";
} else if (hour < 17) {
hello = "下午好";
} else if (hour < 19) {
hello = "傍晚好";
} else if (hour < 22) {
hello = "晚上好";
} else {
hello = "夜深了";
}
ElMessage({
dangerouslyUseHTMLString: true,
message: `<strong>${hello}</strong> 欢迎来到我的主页`,
});
}
// 默哀模式
export const checkDays = () => {
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]) {
console.log("今天是纪念日");
let gray = document.createElement("style");
document.body.appendChild(gray);
gray.innerHTML = "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}";
ElMessage({
message: "今天是中国国家纪念日",
duration: 14000,
icon: h(SpaCandle, {
theme: "filled",
fill: "#efefef",
}),
});
}
}
}

6
src/utils/lantern.js Normal file
View File

File diff suppressed because one or more lines are too long

83
src/views/Box/index.vue Normal file
View File

@ -0,0 +1,83 @@
<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>
<transition name="el-fade-in-linear">
<setting-two
class="setting"
theme="filled"
size="28"
fill="#ffffff60"
v-show="closeShow"
@click="store.setOpenState = true"
/>
</transition>
<div class="content">
<TimeCapsule />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
import TimeCapsule from "@/components/TimeCapsule/index.vue";
import { mainStore } from "@/store";
const store = mainStore();
let closeShow = ref(false);
</script>
<style lang="scss" scoped>
.box {
flex: 1 0 0%;
margin-left: 0.75rem;
height: 80%;
position: relative;
animation: fade;
-webkit-animation: fade 0.5s;
&:hover {
transform: scale(1);
}
.close,
.setting {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
&:hover {
transform: scale(1.2);
}
&:active {
transform: scale(1);
}
}
.setting {
right: 56px;
}
.content {
padding: 30px;
width: 100%;
height: 100%;
}
}
</style>

140
src/views/Func/index.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<!-- 功能区域 -->
<div :class="store.mobileFuncState ? 'function mobile' : '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 }}&nbsp;年&nbsp;</span>
<span>{{ currentTime.month }}&nbsp;月&nbsp;</span>
<span>{{ currentTime.day }}&nbsp;日&nbsp;</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 { getCurrentTime } from "@/utils/getTime";
import { mainStore } from "@/store";
import Music from "@/components/Music/index.vue";
import Hitokoto from "@/components/Hitokoto/index.vue";
import Weather from "@/components/Weather/index.vue";
const store = mainStore();
// 当前时间
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;
&.mobile {
.el-row {
.el-col {
&:nth-of-type(1) {
display: contents;
}
&:nth-of-type(2) {
display: none;
}
}
}
}
.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;
}
@media (max-width: 910px) {
&:nth-of-type(1) {
display: none;
}
&:nth-of-type(2) {
padding: 0 !important;
flex: none;
max-width: none;
width: 100%;
}
}
}
.left,
.right {
width: 100%;
height: 100%;
}
.right {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
animation: fade;
-webkit-animation: fade 0.5s;
.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>

27
src/views/Main/Left.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div :class="store.mobileOpenState ? 'left hidden' : 'left'">
<Message />
<SocialLinks />
</div>
</template>
<script setup>
import { mainStore } from "@/store";
import Message from "@/components/Message/index.vue";
import SocialLinks from "@/components/SocialLinks/index.vue";
const store = mainStore();
</script>
<style lang="scss" scoped>
.left {
flex: 1 0 0%;
margin-right: 10px;
transform: translateY(20px);
&.hidden {
display: none;
}
@media (max-width: 720px) {
margin-right: 0;
}
}
</style>

56
src/views/Main/Right.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div :class="store.mobileOpenState ? 'right' : 'right hidden'">
<!-- 移动端 Logo -->
<div class="logo" @click="store.mobileFuncState = !store.mobileFuncState">
<span class="bg">{{ siteUrl[0] }}</span>
<span class="sm">.{{ siteUrl[1] }}</span>
</div>
<!-- 功能区 -->
<Func />
<!-- 网站链接 -->
<Link />
</div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { mainStore } from "@/store";
import Func from "@/views/Func/index.vue";
import Link from "@/components/Links/index.vue";
const store = mainStore();
// 站点链接
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
</script>
<style lang="scss" scoped>
.right {
flex: 1 0 0%;
margin-left: 0.75rem;
.logo {
font-family: "Pacifico-Regular";
font-size: 1.75rem;
position: fixed;
width: 140px;
text-align: center;
top: 8%;
left: calc(50% - 70px);
transition: all 0.3s;
animation: fade;
-webkit-animation: fade 0.5s;
&:active {
transform: scale(0.95);
}
@media (min-width: 720px) {
display: none;
}
}
@media (max-width: 720px) {
margin-left: 0;
&.hidden {
display: none;
}
}
}
</style>

207
src/views/MoreSet/index.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
<transition name="el-fade-in-linear">
<close-one class="close" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
@click="store.setOpenState = false" />
</transition>
<el-row :gutter="40">
<el-col :span="12" class="left">
<div class="logo">
<span class="bg">{{ siteUrl[0] }}</span>
<span class="sm">.{{ siteUrl[1] }}</span>
</div>
<div class="version">
<div class="num">v&nbsp;{{ config.version }}</div>
<el-tooltip content="Github 源代码仓库" placement="right" :show-arrow="false">
<github-one class="github" theme="outline" size="24" @click="jumpTo(config.github)" />
</el-tooltip>
</div>
<el-card class="update">
<template #header>
<div class="card-header">
<span>更新日志</span>
</div>
</template>
<div class="upnote">
<div v-for="item in upData.new" :key="item" class="uptext">
<add-one theme="outline" size="22" />
{{ item }}
</div>
<div v-for="item in upData.fix" :key="item" class="uptext">
<bug theme="outline" size="22" />
{{ item }}
</div>
</div>
</el-card>
</el-col>
<el-col :span="12" class="right">
<div class="title">
<setting-two theme="filled" size="28" fill="#ffffff60" />
<span class="name">全局设置</span>
</div>
<Set />
</el-col>
</el-row>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { CloseOne, SettingTwo, GithubOne, AddOne, Bug } from "@icon-park/vue-next";
import { mainStore } from "@/store";
import Set from "@/components/Set/index.vue";
import config from '@/../package.json';
const store = mainStore();
let closeShow = ref(false);
// 站点链接
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
// 更新日志
let upData = reactive({
new: ["采用 Vue 进行重构", "音乐歌单支持快速自定义", "壁纸支持个性化设置", "音乐播放器支持音量控制"],
fix: ["修复天气 API", "时光胶囊显示错误", "移动端动画及细节", "图标更换为 IconPark"],
})
// 跳转源代码仓库
const jumpTo = (url) => {
window.open(url);
};
</script>
<style lang="scss" scoped>
.set {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: rgb(255 255 255 / 40%);
border-radius: 6px;
padding: 40px;
.close {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
&:hover {
transform: scale(1.2);
}
&:active {
transform: scale(1);
}
}
.el-row {
height: 100%;
flex-wrap: nowrap;
.left {
height: 100%;
padding-left: 40px !important;
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.logo {
transform: translateY(-8%);
font-family: "Pacifico-Regular";
// line-height: 5rem;
.bg {
font-size: 5rem;
}
.sm {
margin-left: 6px;
font-size: 2rem;
}
}
.version {
display: flex;
flex-direction: row;
align-items: center;
.num {
font-size: 2rem;
font-family: 'Pacifico-Regular';
}
.github {
width: 24px;
height: 24px;
margin-left: 12px;
margin-top: 6px;
&:hover {
transform: scale(1.2);
}
}
}
.update {
margin-top: 30px;
height: 100%;
:deep(.el-card__body) {
height: 100%;
.upnote {
padding: 20px;
height: calc(100% - 56px);
overflow-y: auto;
.uptext {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 16px;
&:nth-last-of-type(1) {
padding: 0;
}
.i-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
}
}
}
}
.right {
height: 100%;
padding-right: 40px !important;
display: flex;
flex-direction: column;
justify-content: center;
.title {
display: flex;
align-items: center;
flex-direction: row;
font-size: 18px;
margin-bottom: 16px;
.i-icon {
width: 28px;
height: 28px;
margin-right: 6px;
}
}
}
}
}
</style>

1
sw.js
View File

@ -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
upgrade-your-browser/css/support.style.min.css vendored
View File

@ -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
upgrade-your-browser/end-of-ie-support/css/support.style.min.css vendored
View File

@ -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
upgrade-your-browser/end-of-ie-support/index.html
View File

@ -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
upgrade-your-browser/end-of-ie-support/js/er3eport.min.js vendored
View File

@ -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);

BIN
upgrade-your-browser/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
upgrade-your-browser/images/chrome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
upgrade-your-browser/images/edge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
upgrade-your-browser/images/firefox.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
upgrade-your-browser/images/qqbrowser.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
upgrade-your-browser/images/safari.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

Some files were not shown because too many files have changed in this diff Show More