Vue 重构 & 新年快乐
This commit is contained in:
底层用户
parent
9da5e50040
commit
5b15716092
34
.env
Normal file
34
.env
Normal 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
25
.gitignore
vendored
@ -1 +1,24 @@
|
||||
/.vscode/*
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"liveServer.settings.port": 8080
|
||||
}
|
||||
103
README.md
103
README.md
@ -7,7 +7,7 @@
|
||||
|
||||
|
||||
|
||||
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
|
||||
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)
|
||||
|
||||
### Demo
|
||||
|
||||
@ -27,82 +27,41 @@
|
||||
- [x] 音乐播放器
|
||||
- [x] 移动端适配
|
||||
|
||||
* [ ] 去除 jQuery 依赖
|
||||
* [ ] VUE 重构
|
||||
* [ ] 播放器取消使用 Aplayer
|
||||
|
||||
### 部署
|
||||
|
||||
```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://dev.qweather.com/) 获取 key，用于获取天气信息
|
||||
- 前往 [高德开放平台控制台](https://console.amap.com/dev/index) 创建一个 `Web 服务` 类型的 `Key`，并将 `Key` 填入 `.env` 中的 `VITE_WEATHER_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` 音乐播放器，可实现快速自定义歌单
|
||||
>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用
|
||||
>*仅支持 **中国大陆地区**
|
||||
|
||||
更改 `music.js` 的参数即可实现自定义歌单列表
|
||||
请在 `.env` 文件中更改歌曲相关参数即可实现自定义歌单列表
|
||||
|
||||
```js
|
||||
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
||||
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
||||
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
||||
```bash
|
||||
# 歌曲 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"
|
||||
```
|
||||
|
||||
### 字体
|
||||
@ -148,20 +107,20 @@ make clean all
|
||||
|
||||
</details>
|
||||
|
||||
### 插件
|
||||
### 技术栈
|
||||
|
||||
* [Bootstrap](https://getbootstrap.com/)
|
||||
* [iziToast](https://izitoast.marcelodolza.com/)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [jQuery](https://jquery.com/)
|
||||
* [Vue](https://cn.vuejs.org/)
|
||||
* [Vite](https://vitejs.cn/vite3-cn/)
|
||||
* [Pinia](https://pinia.vuejs.org/zh/)
|
||||
* [IconPark](https://iconpark.oceanengine.com/official)
|
||||
* [xicons](https://xicons.org/)
|
||||
* [Aplayer](https://aplayer.js.org/)
|
||||
|
||||
### API
|
||||
|
||||
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
|
||||
* [小歪 API](https://api.ixiaowai.cn/)
|
||||
* [和风天气](https://dev.qweather.com/)
|
||||
* [ROLL](https://www.mxnzp.com/doc/list)
|
||||
* [高德开放平台](https://lbs.amap.com/)
|
||||
* [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> <a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a> <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> <a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a> <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
108
README_EN.md
@ -7,7 +7,7 @@ Simple little homepage, had enough of the original one and made a new one
|
||||
|
||||
|
||||
|
||||
>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
|
||||
|
||||
@ -27,83 +27,41 @@ Simple little homepage, had enough of the original one and made a new one
|
||||
- [x] Music player
|
||||
- [x] Mobile adaptation
|
||||
|
||||
* [ ] Remove jQuery dependency
|
||||
* [ ] VUE refactoring
|
||||
* [ ] Player cancels using Aplayer
|
||||
|
||||
### 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
|
||||
|
||||
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
|
||||
|
||||
- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information
|
||||
- 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`
|
||||
|
||||
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
|
||||
|
||||
>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
|
||||
let server = "netease"; //netease; tencent; kugou; xiami; kuwo;
|
||||
let type = "playlist"; //song; playlist; album;
|
||||
let id = "7452421335"; //album ID; song ID; playlist ID;
|
||||
```bash
|
||||
# Songs API address
|
||||
VITE_SONG_API = "https://api-meting.imsyy.top"
|
||||
# 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
|
||||
@ -149,20 +107,20 @@ make clean all
|
||||
|
||||
</details>
|
||||
|
||||
### Plugins
|
||||
### Technology Stack
|
||||
|
||||
* [Bootstrap](https://getbootstrap.com/)
|
||||
* [iziToast](https://izitoast.marcelodolza.com/)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [jQuery](https://jquery.com/)
|
||||
* [Vue](https://cn.vuejs.org/)
|
||||
* [Vite](https://vitejs.cn/vite3-cn/)
|
||||
* [Pinia](https://pinia.vuejs.org/zh/)
|
||||
* [IconPark](https://iconpark.oceanengine.com/official)
|
||||
* [xicons](https://xicons.org/)
|
||||
* [Aplayer](https://aplayer.js.org/)
|
||||
|
||||
### API
|
||||
|
||||
* [MetingAPI By wuenci](https://api.wuenci.com/meting/api/)
|
||||
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
|
||||
* [小歪 API](https://api.ixiaowai.cn/)
|
||||
* [和风天气](https://dev.qweather.com/)
|
||||
* [ROLL](https://www.mxnzp.com/doc/list)
|
||||
* [高德开放平台](https://lbs.amap.com/)
|
||||
* [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> <a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a> <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> <a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a> <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>
|
||||
|
||||
@ -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
229
css/lantern.css
@ -1,229 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.lantern__warpper {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 40px;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.lantern__warpper.lantern__secondary {
|
||||
left: calc(100% - 130px)
|
||||
}
|
||||
|
||||
.lantern__warpper.lantern__secondary .lantern__box {
|
||||
-webkit-animation-duration: 3s;
|
||||
animation-duration: 3s
|
||||
}
|
||||
|
||||
.lantern__box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
height: 70px;
|
||||
background: rgba(216, 0, 15, .8);
|
||||
border-radius: 50% 50%;
|
||||
animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
|
||||
-webkit-transform-origin: 50% -70px;
|
||||
-ms-transform-origin: 50% -70px;
|
||||
transform-origin: 50% -70px;
|
||||
-webkit-box-shadow: -5px 5px 50px 4px #fa6c00;
|
||||
box-shadow: -5px 5px 50px 4px #fa6c00
|
||||
}
|
||||
|
||||
.lantern__box:after,
|
||||
.lantern__box:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 45px;
|
||||
left: 50%;
|
||||
border: 1px solid #dc8f03;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#dc8f03), color-stop(orange), color-stop(#dc8f03), color-stop(orange), to(#dc8f03));
|
||||
background: -o-linear-gradient(left, #dc8f03, orange, #dc8f03, orange, #dc8f03);
|
||||
background: linear-gradient(90deg, #dc8f03, orange, #dc8f03, orange, #dc8f03)
|
||||
}
|
||||
|
||||
.lantern__box:before {
|
||||
top: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.lantern__box:after {
|
||||
bottom: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
-ms-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%)
|
||||
}
|
||||
|
||||
.lantern__line {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -100%);
|
||||
-ms-transform: translate(-50%, -100%);
|
||||
transform: translate(-50%, -100%);
|
||||
background: #dc8f03
|
||||
}
|
||||
|
||||
.lantern__circle {
|
||||
width: 80%;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.lantern__circle,
|
||||
.lantern__circle .lantern__ellipse {
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #dc8f03
|
||||
}
|
||||
|
||||
.lantern__circle .lantern__ellipse {
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.lantern__circle .lantern__text {
|
||||
font-family: 华文行楷, Microsoft YaHei, sans-serif;
|
||||
font-size: 24.3px;
|
||||
color: #dc8f03;
|
||||
font-weight: 700;
|
||||
line-height: 66px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.lantern__tail {
|
||||
position: relative;
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
margin: 0 auto;
|
||||
animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
|
||||
background: orange;
|
||||
border-radius: 0 0 5px 5px
|
||||
}
|
||||
|
||||
.lantern__tail .lantern__junction {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
-webkit-transform: translate(-50%, 8.4px);
|
||||
-ms-transform: translate(-50%, 8.4px);
|
||||
transform: translate(-50%, 8.4px);
|
||||
background: #e69603;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.lantern__tail .lantern__rect {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 10.8px);
|
||||
-ms-transform: translate(-50%, 10.8px);
|
||||
transform: translate(-50%, 10.8px);
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
background: orange;
|
||||
border-radius: 5px 5px 0 5px
|
||||
}
|
||||
|
||||
@-webkit-keyframes lantern-swing {
|
||||
0% {
|
||||
-webkit-transform: rotate(-8deg);
|
||||
transform: rotate(-8deg)
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(8deg);
|
||||
transform: rotate(8deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lantern-swing {
|
||||
0% {
|
||||
-webkit-transform: rotate(-8deg);
|
||||
transform: rotate(-8deg)
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(8deg);
|
||||
transform: rotate(8deg)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:460px) {
|
||||
.lantern__warpper {
|
||||
top: 8px;
|
||||
left: 30px
|
||||
}
|
||||
|
||||
.lantern__warpper.lantern__secondary {
|
||||
left: calc(100% - 80px)
|
||||
}
|
||||
|
||||
.lantern__box {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
-webkit-transform-origin: 50% -40px;
|
||||
-ms-transform-origin: 50% -40px;
|
||||
transform-origin: 50% -40px;
|
||||
-webkit-box-shadow: -5px 5px 50px -1px #fa6c00;
|
||||
box-shadow: -5px 5px 50px -1px #fa6c00
|
||||
}
|
||||
|
||||
.lantern__box:after,
|
||||
.lantern__box:before {
|
||||
height: 4px;
|
||||
width: 25px
|
||||
}
|
||||
|
||||
.lantern__line {
|
||||
width: 2px;
|
||||
height: 8px
|
||||
}
|
||||
|
||||
.lantern__circle .lantern__text {
|
||||
font-size: 13.5px;
|
||||
line-height: 38px
|
||||
}
|
||||
|
||||
.lantern__tail {
|
||||
width: 4px;
|
||||
height: 8px
|
||||
}
|
||||
|
||||
.lantern__tail .lantern__junction {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
-webkit-transform: translate(-50%, 5.6px);
|
||||
-ms-transform: translate(-50%, 5.6px);
|
||||
transform: translate(-50%, 5.6px)
|
||||
}
|
||||
|
||||
.lantern__tail .lantern__rect {
|
||||
-webkit-transform: translate(-50%, 7.2px);
|
||||
-ms-transform: translate(-50%, 7.2px);
|
||||
transform: translate(-50%, 7.2px);
|
||||
width: 8px;
|
||||
height: 16px
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:720px) {
|
||||
.lantern__warpper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
392
css/mobile.css
392
css/mobile.css
@ -1,392 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/*小于1400px时*/
|
||||
@media (max-width: 1400px) {}
|
||||
|
||||
/*小于1200px时*/
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
/*总布局*/
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*音乐播放器*/
|
||||
.music-text {
|
||||
max-width: 170px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于992px时*/
|
||||
@media (max-width: 992px) {
|
||||
|
||||
/*总布局*/
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 900px !important;
|
||||
}
|
||||
|
||||
.col.left {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.col.right {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
/*一言*/
|
||||
.col.hitokotos {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*时间卡片*/
|
||||
.col.times {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
/*日期显示*/
|
||||
.weekday {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*标题文字*/
|
||||
.main-img img {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
span.img-title {
|
||||
font-size: 4.75rem;
|
||||
}
|
||||
|
||||
span.img-text {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
/*链接卡片文字*/
|
||||
span.link-name {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.link-card i {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于840px时*/
|
||||
@media (max-width: 840px) {
|
||||
|
||||
|
||||
/*社交链接*/
|
||||
.social {
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#link-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.link i {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于789px时*/
|
||||
@media (max-width: 789px) {
|
||||
|
||||
/*标题文字*/
|
||||
span.img-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于768px时*/
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/*标题文字*/
|
||||
.main-img img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
span.img-title {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于720px时*/
|
||||
@media (max-width: 720px) {
|
||||
|
||||
/*左侧栏高度*/
|
||||
.main-left {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/*左侧栏边距*/
|
||||
.col.left {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
/*右侧栏隐藏*/
|
||||
.col.right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*右侧栏边距*/
|
||||
.col.right {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
/*标题文字*/
|
||||
span.img-text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*简介*/
|
||||
.message {
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.des {
|
||||
justify-content: space-between;
|
||||
}
|
||||
*/
|
||||
|
||||
/*链接卡片*/
|
||||
.link-card {
|
||||
height: 80px !important;
|
||||
align-items: center !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.link-card i {
|
||||
font-size: 1.25rem;
|
||||
margin: 4px 0px;
|
||||
}
|
||||
|
||||
i.iconfont.icon-a-daohangzhiyindingwei-05,
|
||||
i.iconfont.icon-z_shangpinheji {
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
span.link-name {
|
||||
display: block !important;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.link-card:hover span.link-name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
span.line-text,
|
||||
i.iconfont.icon-link {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/*菜单栏按钮*/
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 84%;
|
||||
}
|
||||
|
||||
.munu-button {
|
||||
padding: 5px 20px;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 6px;
|
||||
font-size: 1.25rem;
|
||||
transition: 0.5s;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/*页脚文字*/
|
||||
footer {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/*一言*/
|
||||
.col.hitokotos {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.hitokoto-text,
|
||||
.hitokoto-from {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/*音乐播放器*/
|
||||
.music-text {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
#music-name {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
#music-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*隐藏鼠标样式*/
|
||||
#cursor {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*小于512px时*/
|
||||
@media (max-width: 512px) {
|
||||
#made {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于390px时*/
|
||||
@media (max-width: 390px) {
|
||||
.main-img img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#beian {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大于568px时 */
|
||||
@media (min-width: 568px) {
|
||||
.iziToast {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 大于720px时 */
|
||||
@media (min-width: 720px) {
|
||||
.menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大于992px时 */
|
||||
@media (min-width: 992px) {
|
||||
|
||||
/*时钟显示*/
|
||||
span#win_text,
|
||||
span#win_speed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大于1400px时 */
|
||||
@media (min-width: 1400px) {
|
||||
|
||||
/*时钟显示*/
|
||||
span#win_text,
|
||||
span#win_speed {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
菜单按钮
|
||||
*/
|
||||
.menus .col.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menus .col.right {
|
||||
display: block !important;
|
||||
transition: 0.5s;
|
||||
padding: 0rem 0.75rem;
|
||||
}
|
||||
|
||||
/*功能区调整*/
|
||||
.menus .col.hitokotos {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menus .col.times {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*边界布局*/
|
||||
.menus .row {
|
||||
--bs-gutter-x: 0rem;
|
||||
}
|
||||
|
||||
.menus .col.\32 {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.menus .logo {
|
||||
display: inline !important;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 8%;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
/*第二屏logo*/
|
||||
.logo-text {
|
||||
font-family: 'Pacifico-Regular' !important;
|
||||
}
|
||||
|
||||
/*切换动画*/
|
||||
/*
|
||||
.hitokoto,
|
||||
.time,
|
||||
.link-card,
|
||||
.message {
|
||||
animation: fade-in;
|
||||
-webkit-animation: fade-in 0.5s;
|
||||
-moz-animation: fade-in 0.5s;
|
||||
-o-animation: fade-in 0.5s;
|
||||
-ms-animation: fade-in 0.5s;
|
||||
}
|
||||
*/
|
||||
.logo,
|
||||
.line,
|
||||
.main-img,
|
||||
.social,
|
||||
.close,
|
||||
.hitokoto,
|
||||
.time,
|
||||
.link-card,
|
||||
.message,
|
||||
#link-text {
|
||||
animation: fade 0.5;
|
||||
-webkit-animation: fade 0.5s;
|
||||
-moz-animation: fade 0.5s;
|
||||
-o-animation: fade 0.5s;
|
||||
-ms-animation: fade 0.5s;
|
||||
}
|
||||
|
||||
/*
|
||||
移动端功能区切换
|
||||
*/
|
||||
.mobile .col.hitokotos {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile .col.times {
|
||||
display: block;
|
||||
}
|
||||
1040
css/style.css
1040
css/style.css
File diff suppressed because it is too large
Load Diff
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
489
index.html
489
index.html
@ -2,60 +2,29 @@
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<!-- 基础信息 -->
|
||||
<meta charset="utf-8">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||
<!-- 强制 HTTPS，若不需要可删除，但可能出现问题 -->
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="force-rendering" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#424242" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="一个默默无闻的主页">
|
||||
<meta name="keywords" content="無名,个人主页">
|
||||
<meta name="author" content="無名">
|
||||
<title>無名の主页</title>
|
||||
<!-- jQuery -->
|
||||
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
|
||||
<title><%- title %></title>
|
||||
<!-- HarmonyOS Sans -->
|
||||
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
|
||||
<!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
|
||||
<link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/loading.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/animation.css">
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
|
||||
<!-- Izitoast -->
|
||||
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/css/iziToast.min.css">
|
||||
<script type="text/javascript"
|
||||
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
|
||||
</script>
|
||||
<!-- FontAwesome -->
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css">
|
||||
<!-- Aplayer -->
|
||||
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
<!-- <script src="./js/Meting.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
|
||||
<link rel="icon" href="/images/icon/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
|
||||
<link rel="stylesheet" href="/loading/loading.min.css">
|
||||
<!-- IE Out -->
|
||||
<script>
|
||||
if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href =
|
||||
"/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
|
||||
if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
|
||||
window.location.href =
|
||||
"https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
|
||||
</script>
|
||||
<!-- PWA -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<!-- 51.LA 统计 -->
|
||||
<script src="./js/51LA.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="loading">
|
||||
<!--加载动画-->
|
||||
<div id="loading-box">
|
||||
<div class="loading-left-bg"></div>
|
||||
@ -67,448 +36,18 @@
|
||||
<div class="inner three"></div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="section" class="section">
|
||||
<!-- 背景图片 -->
|
||||
<div class="bg-all">
|
||||
<img id="bg" onerror="this.classList.add('error');"></img>
|
||||
<div class="cover"></div>
|
||||
</div>
|
||||
<!-- 鼠标指针 -->
|
||||
<div id="g-pointer-1"></div>
|
||||
<div id="g-pointer-2"></div>
|
||||
<!-- 主体内容 -->
|
||||
<main id="main" class="main">
|
||||
<div class="container" id="container">
|
||||
<div class="row" id="row">
|
||||
<div class="col left">
|
||||
<!--基本信息-->
|
||||
<div class="main-left">
|
||||
<!--Logo-->
|
||||
<div class="main-img">
|
||||
<img id="logo-img" src="./img/icon/logo.png" alt="img">
|
||||
<div class="img-title">
|
||||
<span class="img-title-big" id="logo-text-1">imsyy</span>
|
||||
<span class="img-text" id="logo-text-2">.top</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--介绍信息-->
|
||||
<div class="message cards" id="switchmore">
|
||||
<div class="des" id="des">
|
||||
<i class="fa-solid fa-quote-left"></i>
|
||||
<div class="des-title"><span id="change">Hello World !</span><br /><span
|
||||
id="change1">一个建立于 21 世纪的小站，存活于互联网的边缘</span></div>
|
||||
<i class="fa-solid fa-quote-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--社交链接-->
|
||||
<div class="social" id="social">
|
||||
<a href="https://github.com/imsyy" class="link" id="github" style="margin-left: 4px"
|
||||
target="_blank">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</a>
|
||||
<a href="https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes" class="link"
|
||||
id="qq" target="_blank">
|
||||
<i class="fa-brands fa-qq"></i>
|
||||
</a>
|
||||
<a href="mailto:one@imsyy.top" class="link" id="email">
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
</a>
|
||||
<a href="https://space.bilibili.com/98544142" class="link" id="bilibili"
|
||||
target="_blank">
|
||||
<i class="fa-brands fa-bilibili"></i>
|
||||
</a>
|
||||
<a href="https://t.me/bottom_user" class="link" id="telegram" target="_blank">
|
||||
<i class="fa-brands fa-telegram"></i>
|
||||
</a>
|
||||
<a id="link-text">通过这里联系我</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二屏 Logo-->
|
||||
<div class="logo cards" style="display: none" id="changemore">
|
||||
<a class="logo-text" id="logo-text-small">imsyy.top</a>
|
||||
</div>
|
||||
<div class="col right">
|
||||
<div class="main-right">
|
||||
<!--功能区-->
|
||||
<div class="row rightone" id="rightone">
|
||||
<div class="col hitokotos">
|
||||
<!--一言-->
|
||||
<div class="hitokoto cards" id="hitokoto">
|
||||
<!--切换音乐-->
|
||||
<div class="open-music fixed-top" id="open-music">
|
||||
<i class="fa-solid fa-compact-disc"></i>
|
||||
<span> 打开音乐播放器</span>
|
||||
</div>
|
||||
<!--切换音乐结束-->
|
||||
<div class="hitokoto-all">
|
||||
<div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
|
||||
</div>
|
||||
<div class="hitokoto-from">-「 <span id="from_text">無名</span> 」
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--音乐-->
|
||||
<div class="music" id="music">
|
||||
<div class="music-all">
|
||||
<div class="music-button">
|
||||
<div id="music-open">音乐列表</div>
|
||||
<div id="music-close">回到一言</div>
|
||||
</div>
|
||||
<div class="music-control">
|
||||
<i class="fa-solid fa-backward-step" id="last"></i>
|
||||
<div id="play">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
<i class="fa-solid fa-forward-step" id="next"></i>
|
||||
</div>
|
||||
<div class="music-menu">
|
||||
<div class="music-text">
|
||||
<span id="music-name">未播放音乐</span>
|
||||
</div>
|
||||
<div class="music-volume" style="display: none;">
|
||||
<div id="volume-ico">
|
||||
<i class="fa-solid fa-volume-low"></i>
|
||||
</div>
|
||||
<input type="range" min="0" max="1" step="0.01" id="volume">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col times">
|
||||
<!--时间-->
|
||||
<div class="time cards" id="upWeather">
|
||||
<div class="timeshow" id="time">
|
||||
2000 年 0 月 00 日 <span
|
||||
class="weekday">星期一</span><br><span class="time-text">00:00:00</span>
|
||||
</div>
|
||||
<div class="weather">
|
||||
<span id="city_text">天气</span>
|
||||
<span id="wea_text">加载失败</span>
|
||||
<span id="tem_text"></span>
|
||||
<span id="win_text">次数</span>
|
||||
<span id="win_speed">超限</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--分隔线-->
|
||||
<div class="line">
|
||||
<i class="fa-solid fa-link"></i>
|
||||
<span class="line-text">网站列表</span>
|
||||
</div>
|
||||
<!--网站链接-->
|
||||
<div class="link">
|
||||
<!--第一组-->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a id="link-url-1" href="https://blog.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-1" class="fa-solid fa-blog"></i>
|
||||
<span class="link-name" id="link-name-1">博客</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col 2">
|
||||
<a id="link-url-2" href="https://pan.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-2" class="fa-solid fa-cloud"></i>
|
||||
<span class="link-name" id="link-name-2">网盘</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a id="link-url-3" href="https://music.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-3" class="fa-solid fa-music"></i>
|
||||
<span class="link-name" id="link-name-3">音乐</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二组-->
|
||||
<div class="row" style="margin-top: 1.5rem;">
|
||||
<div class="col">
|
||||
<a id="link-url-4" href="https://nav.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-4" class="fa-solid fa-compass"></i>
|
||||
<span class="link-name" id="link-name-4">起始页</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col 2">
|
||||
<a id="link-url-5" href="https://web.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-5" class="fa-solid fa-book-bookmark"></i>
|
||||
<span class="link-name" id="link-name-5">网址集</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a id="link-url-6" href="https://lab.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<i id="link-icon-6" class="fa-solid fa-flask"></i>
|
||||
<span class="link-name" id="link-name-6">实验室</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--展开菜单按钮-->
|
||||
<div class="menu" id="switchmenu">
|
||||
<a class="munu-button cards" id="menu">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!--更多内容-->
|
||||
<div class="more" id="more">
|
||||
<!--关闭按钮-->
|
||||
<div class="close fixed-top" id="close">
|
||||
<i class="fa-solid fa-circle-xmark"></i>
|
||||
</div>
|
||||
<div class="line" style="margin-top: 1rem;">
|
||||
<i class="fa-solid fa-angle-left"></i>
|
||||
<span class="line-text">时间胶囊</span>
|
||||
<i class="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
<div class="date" id="date">
|
||||
<div class="item" id="dayProgress">
|
||||
<div class="date-text" style="margin-top: 0rem;">今日已经度过了 <span></span> 小时</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="weekProgress">
|
||||
<div class="date-text">本周已经度过了 <span></span> 天</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="monthProgress">
|
||||
<div class="date-text">本月已经度过了 <span></span> 天</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="yearProgress">
|
||||
<div class="date-text">今年已经度过了 <span></span> 个月</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<i class="fa-solid fa-angle-left"></i>
|
||||
<span class="line-text">杂七杂八</span>
|
||||
<i class="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
<!--网站链接-->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="https://status.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">站点监测</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col 2">
|
||||
<a href="https://player.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">播放器</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a href="https://write.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">编辑器</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 1.5rem;">
|
||||
<div class="col">
|
||||
<a href="https://photo.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">时光相册</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col 2">
|
||||
<a href="https://share.imsyy.top/" target="_blank">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">文件库</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a id="openmore">
|
||||
<div class="link-card cards">
|
||||
<span class="link-name">更多</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--更多页面-->
|
||||
<div class="box" id="box" style="display: none">
|
||||
<div class="box-wrapper">
|
||||
<!--关闭按钮-->
|
||||
<div class="closebox fixed-top" id="closemore">
|
||||
<i class="fa-solid fa-circle-xmark"></i>
|
||||
</div>
|
||||
<!--左侧内容-->
|
||||
<div class="box-left">
|
||||
<div class="img-title">
|
||||
<span class="img-title-big" id="logo-title-other">imsyy</span>
|
||||
<span class="img-text" id="logo-title-other-small">.top</span><br />
|
||||
<span class="img-text"> v 3.3</span>
|
||||
<a href="https://github.com/imsyy/home" target="_blank">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!--更多内容-->
|
||||
<div class="accordion" id="accordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne" aria-expanded="true"
|
||||
aria-controls="collapseOne">
|
||||
壁纸设置
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="headingOne" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
<div class="set">
|
||||
<div class="wallpaper" id="wallpaper">
|
||||
<div class="form-radio">
|
||||
<input type="radio" class="set-wallpaper" style="display: none;"
|
||||
id="radio1" value="1" name="wallpaper-type">
|
||||
<label for="radio1">默认壁纸</label>
|
||||
</div>
|
||||
<div class="form-radio">
|
||||
<input type="radio" class="set-wallpaper" style="display: none;"
|
||||
id="radio2" value="2" name="wallpaper-type">
|
||||
<label for="radio2" id="wallpaper_text1">每日一图</label>
|
||||
</div>
|
||||
<div class="form-radio">
|
||||
<input type="radio" class="set-wallpaper" style="display: none;"
|
||||
id="radio3" value="3" name="wallpaper-type">
|
||||
<label for="radio3" id="wallpaper_text2">随机风景</label>
|
||||
</div>
|
||||
<div class="form-radio">
|
||||
<input type="radio" class="set-wallpaper" style="display: none;"
|
||||
id="radio4" value="4" name="wallpaper-type">
|
||||
<label for="radio4" id="wallpaper_text3">随机动漫</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--更新日志-->
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
|
||||
aria-expanded="false" aria-controls="collapseTwo">
|
||||
更新日志
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse"
|
||||
aria-labelledby="headingTwo" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
<div class="upnote">
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-circle-plus"></i> 音乐歌单支持快速自定义
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-circle-plus"></i> 壁纸支持个性化设置
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-circle-plus"></i> 音乐播放器支持音量控制
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i> 修复天气 API
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i> 时光胶囊显示错误
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i> 移动端动画及细节
|
||||
</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i> 图标更换为 Font
|
||||
Awesome</span>
|
||||
<span class="uptext">
|
||||
<i class="fa-solid fa-rotate-left"></i>
|
||||
<a href="./old/" style="color:#efefef">返回旧版站点</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Aplayer-->
|
||||
<div class="box-right">
|
||||
<div id="aplayer">
|
||||
<span>音乐播放器加载失败</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 版权信息 -->
|
||||
<footer id="footer" class="fixed-bottom footer">
|
||||
<div class="power">
|
||||
<span id="power">Copyright ©
|
||||
<script>
|
||||
document.write((new Date()).getFullYear());
|
||||
</script>
|
||||
<a href="https://imsyy.top" id="power-text">無名</a>
|
||||
</span>
|
||||
<!-- 以下信息请不要修改哦 -->
|
||||
<span id="made">& Made by <a href="https://github.com/imsyy/home"
|
||||
target="_blank">imsyy</a></span>
|
||||
<!-- 站点备案 -->
|
||||
<a href="https://beian.miit.gov.cn" id="beian" target="_blank">& 豫ICP备2022018134号-1</a>
|
||||
</div>
|
||||
<!-- 歌词显示 -->
|
||||
<div id="lrc"></div>
|
||||
</footer>
|
||||
</section>
|
||||
<!-- sw.js -->
|
||||
<script>
|
||||
if ("serviceWorker" in navigator) {
|
||||
window.addEventListener("load", function () {
|
||||
navigator.serviceWorker.register("sw.js");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<!-- noscript -->
|
||||
<noscript>
|
||||
<div class="noscript fixed-top">请开启 JavaScript</div>
|
||||
<div style="text-align: center">请开启 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>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
!function(t){"use strict";!function(e){var n=window,s=document,i=t,r="".concat("https:"===s.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),c=s.createElement("script"),o=s.getElementsByTagName("script")[0];c.type="text/javascript",c.setAttribute("charset","UTF-8"),c.async=!0,c.src=r,c.id="LA_COLLECT",i.d=c;var a=function(){n.LA.ids.push(i)};n.LA?n.LA.ids&&a():(n.LA=t,n.LA.ids=[],a()),o.parentNode.insertBefore(c,o)}()}({id:"JfXLqaE7jjMvnMIm",ck:"JfXLqaE7jjMvnMIm"}),function(t,e,n,s){var i=e.createElement("script"),r=e.getElementsByTagName("script")[0];i.type="text/javascript",i.crossorigin=!0,i.onload=function(){(new t[s].Monitor).init({id:"JjyTlfI2KkqlOVNL"})},r.parentNode.insertBefore(i,r),i.src=n}(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");
|
||||
164
js/js.cookie.js
164
js/js.cookie.js
@ -1,164 +0,0 @@
|
||||
/*!
|
||||
* JavaScript Cookie v2.2.1
|
||||
* https://github.com/js-cookie/js-cookie
|
||||
*
|
||||
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
||||
* Released under the MIT license
|
||||
*/
|
||||
;
|
||||
(function (factory) {
|
||||
var registeredInModuleLoader;
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (!registeredInModuleLoader) {
|
||||
var OldCookies = window.Cookies;
|
||||
var api = window.Cookies = factory();
|
||||
api.noConflict = function () {
|
||||
window.Cookies = OldCookies;
|
||||
return api;
|
||||
};
|
||||
}
|
||||
}(function () {
|
||||
function extend() {
|
||||
var i = 0;
|
||||
var result = {};
|
||||
for (; i < arguments.length; i++) {
|
||||
var attributes = arguments[i];
|
||||
for (var key in attributes) {
|
||||
result[key] = attributes[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function decode(s) {
|
||||
return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
|
||||
}
|
||||
|
||||
function init(converter) {
|
||||
function api() {}
|
||||
|
||||
function set(key, value, attributes) {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
attributes = extend({
|
||||
path: '/'
|
||||
}, api.defaults, attributes);
|
||||
|
||||
if (typeof attributes.expires === 'number') {
|
||||
attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
|
||||
}
|
||||
|
||||
// We're using "expires" because "max-age" is not supported by IE
|
||||
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
||||
|
||||
try {
|
||||
var result = JSON.stringify(value);
|
||||
if (/^[\{\[]/.test(result)) {
|
||||
value = result;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
value = converter.write ?
|
||||
converter.write(value, key) :
|
||||
encodeURIComponent(String(value))
|
||||
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
||||
|
||||
key = encodeURIComponent(String(key))
|
||||
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
|
||||
.replace(/[\(\)]/g, escape);
|
||||
|
||||
var stringifiedAttributes = '';
|
||||
for (var attributeName in attributes) {
|
||||
if (!attributes[attributeName]) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '; ' + attributeName;
|
||||
if (attributes[attributeName] === true) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Considers RFC 6265 section 5.2:
|
||||
// ...
|
||||
// 3. If the remaining unparsed-attributes contains a %x3B (";")
|
||||
// character:
|
||||
// Consume the characters of the unparsed-attributes up to,
|
||||
// not including, the first %x3B (";") character.
|
||||
// ...
|
||||
stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
|
||||
}
|
||||
|
||||
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
||||
}
|
||||
|
||||
function get(key, json) {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
var jar = {};
|
||||
// To prevent the for loop in the first place assign an empty array
|
||||
// in case there are no cookies at all.
|
||||
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||
var i = 0;
|
||||
|
||||
for (; i < cookies.length; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var cookie = parts.slice(1).join('=');
|
||||
|
||||
if (!json && cookie.charAt(0) === '"') {
|
||||
cookie = cookie.slice(1, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
var name = decode(parts[0]);
|
||||
cookie = (converter.read || converter)(cookie, name) ||
|
||||
decode(cookie);
|
||||
|
||||
if (json) {
|
||||
try {
|
||||
cookie = JSON.parse(cookie);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
jar[name] = cookie;
|
||||
|
||||
if (key === name) {
|
||||
break;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return key ? jar[key] : jar;
|
||||
}
|
||||
|
||||
api.set = set;
|
||||
api.get = function (key) {
|
||||
return get(key, false /* read as raw */ );
|
||||
};
|
||||
api.getJSON = function (key) {
|
||||
return get(key, true /* read as json */ );
|
||||
};
|
||||
api.remove = function (key, attributes) {
|
||||
set(key, '', extend(attributes, {
|
||||
expires: -1
|
||||
}));
|
||||
};
|
||||
|
||||
api.defaults = {};
|
||||
|
||||
api.withConverter = init;
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
return init(function () {});
|
||||
}));
|
||||
@ -1,21 +0,0 @@
|
||||
/*!
|
||||
* china-lantern v1.6.0
|
||||
* (c) 2020-2021 fz6m
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
! function (t) {
|
||||
"function" == typeof define && define.amd ? define(t) : t()
|
||||
}((function () {
|
||||
"use strict";
|
||||
! function (t, e) {
|
||||
void 0 === e && (e = {});
|
||||
let n = e.insertAt;
|
||||
if (t && "undefined" != typeof document) {
|
||||
let r = document.head || document.getElementsByTagName("head")[0],
|
||||
a = document.createElement("style");
|
||||
a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
|
||||
}
|
||||
};
|
||||
let t;
|
||||
(t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
|
||||
}));
|
||||
422
js/main.js
422
js/main.js
@ -1,422 +0,0 @@
|
||||
/*
|
||||
作者: imsyy
|
||||
主页：https://www.imsyy.top/
|
||||
GitHub：https://github.com/imsyy/home
|
||||
版权所有，请勿删除
|
||||
*/
|
||||
|
||||
//弹窗样式
|
||||
iziToast.settings({
|
||||
timeout: 10000,
|
||||
progressBar: false,
|
||||
close: false,
|
||||
closeOnEscape: true,
|
||||
position: 'topCenter',
|
||||
transitionIn: 'bounceInDown',
|
||||
transitionOut: 'flipOutX',
|
||||
displayMode: 'replace',
|
||||
layout: '1',
|
||||
backgroundColor: '#00000040',
|
||||
titleColor: '#efefef',
|
||||
messageColor: '#efefef',
|
||||
icon: 'Fontawesome',
|
||||
iconColor: '#efefef',
|
||||
});
|
||||
|
||||
/* 鼠标样式 */
|
||||
const body = document.querySelector("body");
|
||||
const element = document.getElementById("g-pointer-1");
|
||||
const element2 = document.getElementById("g-pointer-2");
|
||||
const halfAlementWidth = element.offsetWidth / 2;
|
||||
const halfAlementWidth2 = element2.offsetWidth / 2;
|
||||
|
||||
function setPosition(x, y) {
|
||||
element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)`;
|
||||
}
|
||||
|
||||
body.addEventListener('mousemove', (e) => {
|
||||
window.requestAnimationFrame(function () {
|
||||
setPosition(e.clientX, e.clientY);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
//加载完成后执行
|
||||
window.addEventListener('load', function () {
|
||||
|
||||
//载入动画
|
||||
$('#loading-box').attr('class', 'loaded');
|
||||
$('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
|
||||
$('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
|
||||
$('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important");
|
||||
|
||||
//用户欢迎
|
||||
setTimeout(function () {
|
||||
iziToast.show({
|
||||
timeout: 2500,
|
||||
icon: false,
|
||||
title: hello,
|
||||
message: '欢迎来到我的主页'
|
||||
});
|
||||
}, 800);
|
||||
|
||||
//延迟加载音乐播放器
|
||||
let element = document.createElement("script");
|
||||
element.src = "./js/music.js";
|
||||
document.body.appendChild(element);
|
||||
|
||||
//中文字体缓加载-此处写入字体源文件 （暂时弃用）
|
||||
//先行加载简体中文子集，后续补全字集
|
||||
//由于压缩过后的中文字体仍旧过大，可转移至对象存储或 CDN 加载
|
||||
// const font = new FontFace(
|
||||
// "MiSans",
|
||||
// "url(" + "./font/MiSans-Regular.woff2" + ")"
|
||||
// );
|
||||
// document.fonts.add(font);
|
||||
|
||||
//移动端去除鼠标样式
|
||||
if (Boolean(window.navigator.userAgent.match(/AppWebKit.*Mobile.*/))) {
|
||||
$('#g-pointer-2').css("display", "none");
|
||||
}
|
||||
|
||||
}, false)
|
||||
|
||||
setTimeout(function () {
|
||||
$('#loading-text').html("字体及文件加载可能需要一定时间")
|
||||
}, 3000);
|
||||
|
||||
// 新春灯笼 （ 需要时可取消注释 ）
|
||||
// new_element=document.createElement("link");
|
||||
// new_element.setAttribute("rel","stylesheet");
|
||||
// new_element.setAttribute("type","text/css");
|
||||
// new_element.setAttribute("href","./css/lantern.css");
|
||||
// document.body.appendChild(new_element);
|
||||
|
||||
// new_element=document.createElement("script");
|
||||
// new_element.setAttribute("type","text/javascript");
|
||||
// new_element.setAttribute("src","./js/lantern.js");
|
||||
// document.body.appendChild(new_element);
|
||||
|
||||
//获取一言
|
||||
fetch('https://v1.hitokoto.cn?max_length=24')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
$('#hitokoto_text').html(data.hitokoto)
|
||||
$('#from_text').html(data.from)
|
||||
})
|
||||
.catch(console.error)
|
||||
|
||||
let times = 0;
|
||||
$('#hitokoto').click(function () {
|
||||
if (times == 0) {
|
||||
times = 1;
|
||||
let index = setInterval(function () {
|
||||
times--;
|
||||
if (times == 0) {
|
||||
clearInterval(index);
|
||||
}
|
||||
}, 1000);
|
||||
fetch('https://v1.hitokoto.cn?max_length=24')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
$('#hitokoto_text').html(data.hitokoto)
|
||||
$('#from_text').html(data.from)
|
||||
})
|
||||
.catch(console.error)
|
||||
} else {
|
||||
iziToast.show({
|
||||
timeout: 1000,
|
||||
icon: "fa-solid fa-circle-exclamation",
|
||||
message: '你点太快了吧'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//获取天气
|
||||
//请前往 https://www.mxnzp.com/doc/list 申请 app_id 和 app_secret
|
||||
//请前往 https://dev.qweather.com/ 申请 key
|
||||
const add_id = "wrknltonr0foslhs"; // app_id
|
||||
const app_secret = "Nlh1c0F6d0ZDU2pDR0J3YVBVbkhudz09"; // app_secret
|
||||
const key = "433f0c48615a48dfaf2f2b2444297e79" // key
|
||||
function getWeather() {
|
||||
fetch("https://www.mxnzp.com/api/ip/self?app_id=" + add_id + "&app_secret=" + app_secret)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let str = data.data.city
|
||||
let city = str.replace(/市/g, '')
|
||||
$('#city_text').html(city);
|
||||
fetch("https://geoapi.qweather.com/v2/city/lookup?location=" + city + "&number=1&key=" + key)
|
||||
.then(response => response.json())
|
||||
.then(location => {
|
||||
let id = location.location[0].id
|
||||
fetch("https://devapi.qweather.com/v7/weather/now?location=" + id + "&key=" + key)
|
||||
.then(response => response.json())
|
||||
.then(weather => {
|
||||
$('#wea_text').html(weather.now.text)
|
||||
$('#tem_text').html(weather.now.temp + "°C ")
|
||||
$('#win_text').html(weather.now.windDir)
|
||||
$('#win_speed').html(weather.now.windScale + "级")
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
getWeather();
|
||||
|
||||
let wea = 0;
|
||||
$('#upWeather').click(function () {
|
||||
if (wea == 0) {
|
||||
wea = 1;
|
||||
let index = setInterval(function () {
|
||||
wea--;
|
||||
if (wea == 0) {
|
||||
clearInterval(index);
|
||||
}
|
||||
}, 60000);
|
||||
getWeather();
|
||||
iziToast.show({
|
||||
timeout: 2000,
|
||||
icon: "fa-solid fa-cloud-sun",
|
||||
message: '实时天气已更新'
|
||||
});
|
||||
} else {
|
||||
iziToast.show({
|
||||
timeout: 1000,
|
||||
icon: "fa-solid fa-circle-exclamation",
|
||||
message: '请稍后再更新哦'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//获取时间
|
||||
let t = null;
|
||||
t = setTimeout(time, 1000);
|
||||
|
||||
function time() {
|
||||
clearTimeout(t);
|
||||
dt = new Date();
|
||||
let y = dt.getYear() + 1900;
|
||||
let mm = dt.getMonth() + 1;
|
||||
let d = dt.getDate();
|
||||
let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||
let day = dt.getDay();
|
||||
let h = dt.getHours();
|
||||
let m = dt.getMinutes();
|
||||
let s = dt.getSeconds();
|
||||
if (h < 10) {
|
||||
h = "0" + h;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = "0" + m;
|
||||
}
|
||||
if (s < 10) {
|
||||
s = "0" + s;
|
||||
}
|
||||
$("#time").html(y + " 年 " + mm + " 月 " + d + " 日 " + "<span class='weekday'>" + weekday[day] + "</span><br>" + "<span class='time-text'>" + h + ":" + m + ":" + s + "</span>");
|
||||
t = setTimeout(time, 1000);
|
||||
}
|
||||
|
||||
//链接提示文字
|
||||
$("#social").mouseover(function () {
|
||||
$("#social").css({
|
||||
"background": "rgb(0 0 0 / 25%)",
|
||||
'border-radius': '6px',
|
||||
"backdrop-filter": "blur(5px)"
|
||||
});
|
||||
$("#link-text").css({
|
||||
"display": "block",
|
||||
});
|
||||
}).mouseout(function () {
|
||||
$("#social").css({
|
||||
"background": "none",
|
||||
"border-radius": "6px",
|
||||
"backdrop-filter": "none"
|
||||
});
|
||||
$("#link-text").css({
|
||||
"display": "none"
|
||||
});
|
||||
});
|
||||
|
||||
$("#github").mouseover(function () {
|
||||
$("#link-text").html("去 Github 看看");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#qq").mouseover(function () {
|
||||
$("#link-text").html("有什么事吗");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#email").mouseover(function () {
|
||||
$("#link-text").html("来封 Email");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#bilibili").mouseover(function () {
|
||||
$("#link-text").html("来 B 站看看 ~");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
$("#telegram").mouseover(function () {
|
||||
$("#link-text").html("你懂的 ~");
|
||||
}).mouseout(function () {
|
||||
$("#link-text").html("通过这里联系我");
|
||||
});
|
||||
|
||||
//自动变灰
|
||||
let myDate = new Date;
|
||||
let mon = myDate.getMonth() + 1;
|
||||
let date = myDate.getDate();
|
||||
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
|
||||
for (let day of days) {
|
||||
let d = day.split('.');
|
||||
if (mon == d[0] && date == d[1]) {
|
||||
document.write(
|
||||
'<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>'
|
||||
);
|
||||
$("#change").html("Silence in silence");
|
||||
$("#change1").html("今天是中国国家纪念日，全站已切换为黑白模式");
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(function () {
|
||||
iziToast.show({
|
||||
timeout: 14000,
|
||||
icon: "fa-solid fa-clock",
|
||||
message: '今天是中国国家纪念日'
|
||||
});
|
||||
}, 3800);
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
|
||||
//更多页面切换
|
||||
let shoemore = false;
|
||||
$('#switchmore').on('click', function () {
|
||||
shoemore = !shoemore;
|
||||
if (shoemore && $(document).width() >= 990) {
|
||||
$('#container').attr('class', 'container mores');
|
||||
$("#change").html("Oops !");
|
||||
$("#change1").html("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
|
||||
} else {
|
||||
$('#container').attr('class', 'container');
|
||||
$("#change").html("Hello World !");
|
||||
$("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
|
||||
}
|
||||
});
|
||||
|
||||
//更多页面关闭按钮
|
||||
$('#close').on('click', function () {
|
||||
$('#switchmore').click();
|
||||
});
|
||||
|
||||
//移动端菜单栏切换
|
||||
let switchmenu = false;
|
||||
$('#switchmenu').on('click', function () {
|
||||
switchmenu = !switchmenu;
|
||||
if (switchmenu) {
|
||||
$('#row').attr('class', 'row menus');
|
||||
$("#menu").html("<i class='fa-solid fa-xmark'></i>");
|
||||
} else {
|
||||
$('#row').attr('class', 'row');
|
||||
$("#menu").html("<i class='fa-solid fa-bars'></i>");
|
||||
}
|
||||
});
|
||||
|
||||
//更多弹窗页面
|
||||
$('#openmore').on('click', function () {
|
||||
$('#box').css("display", "block");
|
||||
$('#row').css("display", "none");
|
||||
$('#more').css("cssText", "display:none !important");
|
||||
});
|
||||
$('#closemore').on('click', function () {
|
||||
$('#box').css("display", "none");
|
||||
$('#row').css("display", "flex");
|
||||
$('#more').css("display", "flex");
|
||||
});
|
||||
|
||||
//监听网页宽度
|
||||
window.addEventListener('load', function () {
|
||||
window.addEventListener('resize', function () {
|
||||
//关闭移动端样式
|
||||
if (window.innerWidth >= 600) {
|
||||
$('#row').attr('class', 'row');
|
||||
$("#menu").html("<i class='fa-solid fa-bars'></i>");
|
||||
//移除移动端切换功能区
|
||||
$('#rightone').attr('class', 'row rightone');
|
||||
}
|
||||
|
||||
if (window.innerWidth <= 990) {
|
||||
//移动端隐藏更多页面
|
||||
$('#container').attr('class', 'container');
|
||||
$("#change").html("Hello World !");
|
||||
$("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
|
||||
|
||||
//移动端隐藏弹窗页面
|
||||
$('#box').css("display", "none");
|
||||
$('#row').css("display", "flex");
|
||||
$('#more').css("display", "flex");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//移动端切换功能区
|
||||
let changemore = false;
|
||||
$('#changemore').on('click', function () {
|
||||
changemore = !changemore;
|
||||
if (changemore) {
|
||||
$('#rightone').attr('class', 'row menus mobile');
|
||||
} else {
|
||||
$('#rightone').attr('class', 'row menus');
|
||||
}
|
||||
});
|
||||
|
||||
//更多页面显示关闭按钮
|
||||
$("#more").hover(function () {
|
||||
$('#close').css("display", "block");
|
||||
}, function () {
|
||||
$('#close').css("display", "none");
|
||||
})
|
||||
|
||||
//屏蔽右键
|
||||
document.oncontextmenu = function () {
|
||||
iziToast.show({
|
||||
timeout: 2000,
|
||||
icon: "fa-solid fa-circle-exclamation",
|
||||
message: '为了浏览体验，本站禁用右键'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
//控制台输出
|
||||
//console.clear();
|
||||
let styleTitle1 = `
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgb(244,167,89);
|
||||
`
|
||||
let styleTitle2 = `
|
||||
font-size:12px;
|
||||
color: rgb(244,167,89);
|
||||
`
|
||||
let styleContent = `
|
||||
color: rgb(30,152,255);
|
||||
`
|
||||
let title1 = '無名の主页'
|
||||
let title2 = `
|
||||
_____ __ __ _______ ____ __
|
||||
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
||||
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
|
||||
| | | |\\/| |\\___ \\ \\ / \\ /
|
||||
_| |_| | | |____) | | | | |
|
||||
|_____|_| |_|_____/ |_| |_|
|
||||
`
|
||||
let content = `
|
||||
版 本 号：3.4
|
||||
更新日期：2022-07-24
|
||||
|
||||
主页: https://www.imsyy.top
|
||||
Github: https://github.com/imsyy/home
|
||||
`
|
||||
console.log(`%c${title1} %c${title2}
|
||||
%c${content}`, styleTitle1, styleTitle2, styleContent)
|
||||
152
js/music.js
152
js/music.js
@ -1,152 +0,0 @@
|
||||
/*
|
||||
音乐信息
|
||||
|
||||
感谢 @武恩赐 提供的 MetingAPI
|
||||
https://api.wuenci.com/meting/api/
|
||||
|
||||
作者: imsyy
|
||||
主页：https://www.imsyy.top/
|
||||
GitHub：https://github.com/imsyy/home
|
||||
版权所有，请勿删除
|
||||
*/
|
||||
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
||||
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
||||
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
||||
|
||||
$.ajax({
|
||||
url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
|
||||
type: "GET",
|
||||
dataType: "JSON",
|
||||
success: function (data) {
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
order: 'random',
|
||||
preload: 'auto',
|
||||
listMaxHeight: '336px',
|
||||
volume: '0.5',
|
||||
mutex: true,
|
||||
lrcType: 3,
|
||||
audio: data,
|
||||
});
|
||||
|
||||
/* 底栏歌词 */
|
||||
setInterval(function () {
|
||||
$("#lrc").html("<span class='lrc-show'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg> " + $(".aplayer-lrc-current").text() + " <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg></span>");
|
||||
}, 500);
|
||||
|
||||
/* 音乐通知及控制 */
|
||||
ap.on('play', function () {
|
||||
music = $(".aplayer-title").text() + $(".aplayer-author").text();
|
||||
iziToast.info({
|
||||
timeout: 4000,
|
||||
icon: "fa-solid fa-circle-play",
|
||||
displayMode: 'replace',
|
||||
message: music
|
||||
});
|
||||
$("#play").html("<i class='fa-solid fa-pause'>");
|
||||
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
|
||||
if ($(document).width() >= 990) {
|
||||
$('.power').css("cssText", "display:none");
|
||||
$('#lrc').css("cssText", "display:block !important");
|
||||
};
|
||||
// Notification.requestPermission().then(res => {
|
||||
// console.log(res)
|
||||
// });
|
||||
// new Notification('音乐通知', {
|
||||
// body: '正在播放：' + music,
|
||||
// tag: 1
|
||||
// });
|
||||
});
|
||||
|
||||
ap.on('pause', function () {
|
||||
$("#play").html("<i class='fa-solid fa-play'>");
|
||||
if ($(document).width() >= 990) {
|
||||
$('#lrc').css("cssText", "display:none !important");
|
||||
$('.power').css("cssText", "display:block");
|
||||
}
|
||||
});
|
||||
|
||||
$("#music").hover(function () {
|
||||
$('.music-text').css("display", "none");
|
||||
$('.music-volume').css("display", "flex");
|
||||
}, function () {
|
||||
$('.music-text').css("display", "block");
|
||||
$('.music-volume').css("display", "none");
|
||||
})
|
||||
|
||||
/* 一言与音乐切换 */
|
||||
$('#open-music').on('click', function () {
|
||||
$('#hitokoto').css("display", "none");
|
||||
$('#music').css("display", "flex");
|
||||
});
|
||||
|
||||
$("#hitokoto").hover(function () {
|
||||
$('#open-music').css("display", "flex");
|
||||
}, function () {
|
||||
$('#open-music').css("display", "none");
|
||||
})
|
||||
|
||||
$('#music-close').on('click', function () {
|
||||
$('#music').css("display", "none");
|
||||
$('#hitokoto').css("display", "flex");
|
||||
});
|
||||
|
||||
/* 上下曲 */
|
||||
$('#play').on('click', function () {
|
||||
ap.toggle();
|
||||
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
|
||||
});
|
||||
|
||||
$('#last').on('click', function () {
|
||||
ap.skipBack();
|
||||
ap.play();
|
||||
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
|
||||
});
|
||||
|
||||
$('#next').on('click', function () {
|
||||
ap.skipForward();
|
||||
ap.play();
|
||||
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
|
||||
});
|
||||
|
||||
window.onkeydown = function (e) {
|
||||
if (e.keyCode == 32) {
|
||||
ap.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
/* 打开音乐列表 */
|
||||
$('#music-open').on('click', function () {
|
||||
if ($(document).width() >= 990) {
|
||||
$('#box').css("display", "block");
|
||||
$('#row').css("display", "none");
|
||||
$('#more').css("cssText", "display:none !important");
|
||||
}
|
||||
});
|
||||
|
||||
//音量调节
|
||||
$("#volume").on('input propertychange touchend', function () {
|
||||
let x = $("#volume").val();
|
||||
ap.volume(x, true);
|
||||
if (x == 0) {
|
||||
$("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");
|
||||
} else if (x > 0 && x <= 0.3) {
|
||||
$("#volume-ico").html("<i class='fa-solid fa-volume-off'></i>");
|
||||
} else if (x > 0.3 && x <= 0.6) {
|
||||
$("#volume-ico").html("<i class='fa-solid fa-volume-low'></i>");
|
||||
} else {
|
||||
$("#volume-ico").html("<i class='fa-solid fa-volume-high'></i>");
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function () {
|
||||
setTimeout(function () {
|
||||
iziToast.info({
|
||||
timeout: 8000,
|
||||
icon: "fa-solid fa-circle-exclamation",
|
||||
displayMode: 'replace',
|
||||
message: '音乐播放器加载失败'
|
||||
});
|
||||
}, 3800);
|
||||
}
|
||||
})
|
||||
73
js/set.js
73
js/set.js
@ -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
68
js/time.js
@ -1,68 +0,0 @@
|
||||
function init_life_time() {
|
||||
function getAsideLifeTime() {
|
||||
/* 当前时间戳 */
|
||||
let nowDate = +new Date();
|
||||
/* 今天开始时间戳 */
|
||||
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
|
||||
/* 今天已经过去的时间 */
|
||||
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
|
||||
/* 今天已经过去的时间比 */
|
||||
let todayPassHoursPercent = (todayPassHours / 24) * 100;
|
||||
$('#dayProgress .date-text span').html(parseInt(todayPassHours));
|
||||
$('#dayProgress .progress .progress-bar').css('width', parseInt(todayPassHoursPercent) + '%');
|
||||
$('#dayProgress .progress .progress-bar').html(parseInt(todayPassHoursPercent) + '%');
|
||||
/* 当前周几 */
|
||||
let weeks = {
|
||||
0: 7,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6
|
||||
};
|
||||
let weekDay = weeks[new Date().getDay()];
|
||||
let weekDayPassPercent = (weekDay / 7) * 100;
|
||||
$('#weekProgress .date-text span').html(weekDay);
|
||||
$('#weekProgress .progress .progress-bar').css('width', parseInt(weekDayPassPercent) + '%');
|
||||
$('#weekProgress .progress .progress-bar').html(parseInt(weekDayPassPercent) + '%');
|
||||
/* 月 */
|
||||
let year = new Date().getFullYear();
|
||||
let date = new Date().getDate();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let monthAll = new Date(year, month, 0).getDate();
|
||||
let monthPassPercent = (date / monthAll) * 100;
|
||||
$('#monthProgress .date-text span').html(date);
|
||||
$('#monthProgress .progress .progress-bar').css('width', parseInt(monthPassPercent) + '%');
|
||||
$('#monthProgress .progress .progress-bar').html(parseInt(monthPassPercent) + '%');
|
||||
/* 年 */
|
||||
let yearPass = (month / 12) * 100;
|
||||
$('#yearProgress .date-text span').html(month);
|
||||
$('#yearProgress .progress .progress-bar').css('width', parseInt(yearPass) + '%');
|
||||
$('#yearProgress .progress .progress-bar').html(parseInt(yearPass) + '%');
|
||||
}
|
||||
getAsideLifeTime();
|
||||
setInterval(() => {
|
||||
getAsideLifeTime();
|
||||
}, 1000);
|
||||
}
|
||||
init_life_time()
|
||||
|
||||
now = new Date(), hour = now.getHours()
|
||||
if (hour < 6) {
|
||||
var hello = "凌晨好";
|
||||
} else if (hour < 9) {
|
||||
var hello = "早上好";
|
||||
} else if (hour < 12) {
|
||||
var hello = "上午好";
|
||||
} else if (hour < 14) {
|
||||
var hello = "中午好";
|
||||
} else if (hour < 17) {
|
||||
var hello = "下午好";
|
||||
} else if (hour < 19) {
|
||||
var hello = "傍晚好";
|
||||
} else if (hour < 22) {
|
||||
var hello = "晚上好";
|
||||
} else {
|
||||
var hello = "夜深了";
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
{"name":"無名の主页","short_name":"無名の主页","description":"一个默默无闻的主页","display":"standalone","start_url":"/","theme_color":"#424242","background_color":"#424242","icons":[{"src":"img/icon/48.png","sizes":"48x48","type":"image/png"},{"src":"img/icon/72.png","sizes":"72x72","type":"image/png"},{"src":"img/icon/96.png","sizes":"96x96","type":"image/png"},{"src":"img/icon/128.png","sizes":"128x128","type":"image/png"},{"src":"img/icon/144.png","sizes":"144x144","type":"image/png"},{"src":"img/icon/192.png","sizes":"192x192","type":"image/png"},{"src":"img/icon/512.png","sizes":"512x512","type":"image/png"}]}
|
||||
3691
package-lock.json
generated
Normal file
3691
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
36
package.json
Normal file
36
package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
BIN
public/images/background4.webp
Normal file
BIN
public/images/background4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 264 KiB After Width: | Height: | Size: 264 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
@ -1,11 +1,16 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#loading-box .loading-left-bg,
|
||||
#loading-box .loading-right-bg {
|
||||
position: fixed;
|
||||
z-index: 999998;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: rgb(81 81 81 / 80%);
|
||||
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
|
||||
background-color: #515151e0;
|
||||
transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@ -31,7 +36,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.loading-title {
|
||||
.loading-title {
|
||||
font-size: 1.25rem;
|
||||
margin: 20px 10px 4px 10px;
|
||||
}
|
||||
@ -42,15 +47,16 @@ p.loading-title {
|
||||
background-color: #37474f;
|
||||
}
|
||||
|
||||
div.loaded div.loading-left-bg {
|
||||
/* 加载完成 */
|
||||
.loaded .loading-left-bg {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
div.loaded div.loading-right-bg {
|
||||
.loaded .loading-right-bg {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
div.loaded div.spinner-box {
|
||||
.loaded .spinner-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
1
public/loading/loading.min.css
vendored
Normal file
1
public/loading/loading.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999998;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
|
||||
210
src/App.vue
Normal file
210
src/App.vue
Normal 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
38
src/api/index.js
Normal file
@ -0,0 +1,38 @@
|
||||
// import axios from "axios";
|
||||
|
||||
/**
|
||||
* 音乐播放器
|
||||
*/
|
||||
|
||||
// 获取音乐播放列表
|
||||
export const getPlayerList = async (server, type, id) => {
|
||||
const res = await fetch(`${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
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
143
src/components/Background/index.vue
Normal file
143
src/components/Background/index.vue
Normal 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
84
src/components/Footer/index.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<footer>
|
||||
<div class="power" v-show="!store.playerState">
|
||||
<span
|
||||
>Copyright © {{ fullYear }}
|
||||
<a href="https://imsyy.top">無名</a>
|
||||
</span>
|
||||
<!-- 以下信息请不要修改哦 -->
|
||||
<span class="hidden"
|
||||
> & Made by <a
|
||||
:href="config.github"
|
||||
target="_blank"
|
||||
>
|
||||
{{ config.author }}
|
||||
</a></span
|
||||
> &
|
||||
<!-- 站点备案 -->
|
||||
<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
131
src/components/Hitokoto/index.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div
|
||||
class="hitokoto cards"
|
||||
v-show="!store.musicOpenState"
|
||||
@mouseenter="openMusicShow = true"
|
||||
@mouseleave="openMusicShow = false"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 打开音乐面板 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
class="open-music"
|
||||
v-show="openMusicShow && store.musicIsOk"
|
||||
@click="store.musicOpenState = true"
|
||||
>
|
||||
<music-menu theme="filled" size="18" fill="#efefef" />
|
||||
<span>打开音乐播放器</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<!-- 一言内容 -->
|
||||
<div class="content" @click="updateHitokoto">
|
||||
<span class="text">{{ hitokotoData.text }}</span>
|
||||
<span class="from">-「 {{ hitokotoData.from }} 」</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, h } from "vue";
|
||||
import { MusicMenu, Error } from "@icon-park/vue-next";
|
||||
import { getHitokoto } from "@/api";
|
||||
import debounce from "@/utils/debounce.js";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 开启音乐面板按钮显隐
|
||||
let openMusicShow = ref(false);
|
||||
|
||||
// 一言数据
|
||||
let hitokotoData = reactive({
|
||||
text: "这里应该显示一句话",
|
||||
from: "無名",
|
||||
});
|
||||
|
||||
// 打开音乐面板
|
||||
const openMusic = () => {};
|
||||
|
||||
// 获取一言数据
|
||||
const getHitokotoData = () => {
|
||||
getHitokoto()
|
||||
.then((res) => {
|
||||
hitokotoData.text = res.hitokoto;
|
||||
hitokotoData.from = res.from;
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: "一言获取失败",
|
||||
icon: h(Error, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 更新一言数据
|
||||
const updateHitokoto = () => {
|
||||
hitokotoData.text = "新的一言正在赶来的路上";
|
||||
hitokotoData.from = "来源加载中";
|
||||
// 防抖
|
||||
debounce(() => {
|
||||
getHitokotoData();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getHitokotoData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hitokoto {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
.open-music {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #00000026;
|
||||
padding: 4px 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
.i-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
span {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
.text {
|
||||
font-size: 1.1rem;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.from {
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
align-self: flex-end;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
src/components/Links/index.vue
Normal file
137
src/components/Links/index.vue
Normal 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
153
src/components/Message/index.vue
Normal 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
339
src/components/Music/index.vue
Normal 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
375
src/components/Music/test.vue
Normal 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
299
src/components/Player/index.vue
Normal 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
319
src/components/Player/old.vue
Normal 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
112
src/components/Set/index.vue
Normal 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
171
src/components/SocialLinks/index.vue
Normal 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
88
src/components/TimeCapsule/index.vue
Normal 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"
|
||||
>今日已经度过了 {{ timeData.day.start }} 小时</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.day.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>本周已经度过了 {{ timeData.week.start }} 天</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.week.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>本月已经度过了 {{ timeData.month.start }} 天</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.month.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>今年已经度过了 {{ timeData.year.start }} 个月</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
92
src/components/Weather/index.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div
|
||||
class="weather"
|
||||
v-if="weatherData.adCode.city && weatherData.weather.weather"
|
||||
>
|
||||
<span>{{ weatherData.adCode.city }} </span>
|
||||
<span>{{ weatherData.weather.weather }} </span>
|
||||
<span>{{ weatherData.weather.temperature }}℃</span>
|
||||
<span class="sm-hidden"> {{ weatherData.weather.winddirection }}风 </span>
|
||||
<span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
|
||||
</div>
|
||||
<div class="weather" v-else>
|
||||
<span>天气数据获取失败</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, h } from "vue";
|
||||
import { getAdcode, getWeather } from "@/api";
|
||||
import { Error } from "@icon-park/vue-next";
|
||||
|
||||
// 高德开发者 Key
|
||||
let mainKey = import.meta.env.VITE_WEATHER_KEY;
|
||||
|
||||
// 天气数据
|
||||
let weatherData = reactive({
|
||||
adCode: {
|
||||
city: null, // 城市
|
||||
adcode: null, // 城市编码
|
||||
},
|
||||
weather: {
|
||||
weather: null, // 天气现象
|
||||
temperature: null, // 实时气温
|
||||
winddirection: null, // 风向描述
|
||||
windpower: null, // 风力级别
|
||||
},
|
||||
});
|
||||
|
||||
// 获取天气数据
|
||||
const getWeatherData = () => {
|
||||
// 获取地理位置信息
|
||||
if (!mainKey) return onError("请配置天气 Key");
|
||||
getAdcode(mainKey)
|
||||
.then((res) => {
|
||||
if (res.status) {
|
||||
weatherData.adCode = {
|
||||
city: res.city,
|
||||
adcode: res.adcode,
|
||||
};
|
||||
// 获取天气信息
|
||||
getWeather(mainKey, weatherData.adCode.adcode)
|
||||
.then((res) => {
|
||||
if (res.status) {
|
||||
weatherData.weather = {
|
||||
weather: res.lives[0].weather,
|
||||
temperature: res.lives[0].temperature,
|
||||
winddirection: res.lives[0].winddirection,
|
||||
windpower: res.lives[0].windpower,
|
||||
};
|
||||
} else {
|
||||
onError("天气信息获取失败");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
onError("天气信息获取失败");
|
||||
});
|
||||
} else {
|
||||
onError("地理位置获取失败");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
onError("地理位置获取失败");
|
||||
});
|
||||
};
|
||||
|
||||
// 报错信息
|
||||
const onError = (message) => {
|
||||
ElMessage({
|
||||
message: message,
|
||||
icon: h(Error, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
console.error(message);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 调用获取天气
|
||||
getWeatherData();
|
||||
});
|
||||
</script>
|
||||
17
src/main.js
Normal file
17
src/main.js
Normal 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
74
src/store/index.js
Normal 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
32
src/style/global.css
Normal 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
1
src/style/global.css.map
Normal 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
37
src/style/global.scss
Normal 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
179
src/style/style.css
Normal 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
1
src/style/style.css.map
Normal 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
194
src/style/style.scss
Normal 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
94
src/utils/cursor.js
Normal 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
23
src/utils/debounce.js
Normal file
@ -0,0 +1,23 @@
|
||||
// 防抖
|
||||
let timeout;
|
||||
|
||||
function debounce(func, wait = 300, immediate = false) {
|
||||
// 清除定时器
|
||||
if (timeout !== null) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
// 立即执行
|
||||
if (immediate) {
|
||||
var callNow = !timeout;
|
||||
timeout = setTimeout(function () {
|
||||
timeout = null;
|
||||
}, wait);
|
||||
if (callNow) typeof func === 'function' && func();
|
||||
} else {
|
||||
timeout = setTimeout(function () {
|
||||
typeof func === 'function' && func();
|
||||
}, wait);
|
||||
}
|
||||
}
|
||||
|
||||
export default debounce;
|
||||
118
src/utils/getTime.js
Normal file
118
src/utils/getTime.js
Normal 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
6
src/utils/lantern.js
Normal file
File diff suppressed because one or more lines are too long
83
src/views/Box/index.vue
Normal file
83
src/views/Box/index.vue
Normal 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
140
src/views/Func/index.vue
Normal 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 }} 年 </span>
|
||||
<span>{{ currentTime.month }} 月 </span>
|
||||
<span>{{ currentTime.day }} 日 </span>
|
||||
<span class="sm-hidden">{{ currentTime.weekday }}</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>
|
||||
{{ currentTime.hour }}:{{ currentTime.minute }}:{{
|
||||
currentTime.second
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<Weather />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { 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
27
src/views/Main/Left.vue
Normal 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
56
src/views/Main/Right.vue
Normal 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
207
src/views/MoreSet/index.vue
Normal 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 {{ 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
1
sw.js
@ -1 +0,0 @@
|
||||
self.addEventListener("error",function(e){self.clients.matchAll().then(function(t){t&&t.length&&t[0].postMessage({type:"ERROR",msg:e.message||null,stack:e.error?e.error.stack:null})})}),self.addEventListener("unhandledrejection",function(e){self.clients.matchAll().then(function(t){t&&t.length&&t[0].postMessage({type:"REJECTION",msg:e.reason?e.reason.message:null,stack:e.reason?e.reason.stack:null})})}),importScripts("https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js"),workbox.setConfig({debug:!1,modulePathPrefix:"https://g.alicdn.com/kg/workbox/3.3.0/"}),workbox.skipWaiting(),workbox.clientsClaim();var cacheList=["/","/index.html"];workbox.routing.registerRoute(new RegExp(/\.(?:html|css)$/),workbox.strategies.networkFirst({cacheName:"ql:html",plugins:[new workbox.expiration.Plugin({maxEntries:10})]})),workbox.routing.registerRoute(new RegExp(/\.(?:js|css)$/),workbox.strategies.staleWhileRevalidate({cacheName:"ql:static",plugins:[new workbox.expiration.Plugin({maxEntries:20})]})),workbox.routing.registerRoute(new RegExp(/\.(?:png|gif|jpg|jpeg|webp|svg|cur|ttf|woff2|woff)$/),workbox.strategies.cacheFirst({cacheName:"ql:img",plugins:[new workbox.cacheableResponse.Plugin({statuses:[0,200]}),new workbox.expiration.Plugin({maxEntries:20,maxAgeSeconds:43200})]}));
|
||||
@ -1 +0,0 @@
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}a{text-decoration:none;color:#0072c6}a:hover{text-decoration:none;color:#004d8c}body{text-align:center;font-size:14px;line-height:24px;font-family:Microsoft YaHei,'宋体',sans-serif;color:#454545;overflow-y:scroll}.page{width:960px;margin:0 auto;padding:10px;text-align:left}h2,h3{font-family:Microsoft YaHei}h1{font-size:40px;line-height:60px;font-weight:100;margin:20px 0 15px}h2{font-size:20px;line-height:25px;font-weight:100;margin:10px 0}h3{font-weight:700}code{padding:2px 4px;font-size:95%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre code{white-space:pre-wrap;word-break:break-word;display:inline-block;word-break:break-all}ul{padding:0 1em}ul li{list-style-type:disc;list-style-position:inside}b,strong{font-weight:700}em{color:red}p{margin-bottom:10px}.hr,hr{margin:20px 0;border:0;width:100%;height:1px;overflow:hidden;background-color:#ccc}.text-right{text-align:right}.clearboth{clear:both;width:100%;content:""}.clearleft{clear:left;width:100%;content:""}.clearright{clear:right;width:100%;content:""}.browser-list{margin:16px 0 10px;padding:0;height:42px}.browser{display:block;width:155px;height:34px;line-height:22px;float:left;list-style:none}.browser.clearleft{height:1px}.browser span{display:block;font-size:12px;line-height:1.2}.browser img{width:34px;height:34px;border:0;float:left;margin-right:10px}.browser.firefox{width:150px}.browser.edge{width:150px}.browser.safari{width:150px}.browser.se360{width:160px}.browser.qqbrowser{width:140px}.small-alert{font-size:12px;margin:15px 0 8px;color:#90949c}.small-alert:not(.hide)+hr{margin-top:0}.hide{display:none}.alert-danger{display:block;color:#777;background-color:#f1f1f1;padding:6px 12px;clear:both}.alert-info{color:#000;background-color:#f1f6fc;margin-top:12px}.alert-info img{vertical-align:text-top}#win-danger{margin-top:12px;position:relative}#win-danger .arrow{background:url(/images/arrow.png) no-repeat;border:0;position:absolute;display:block;width:20px;height:12px;left:325px;top:-12px}#referrer a,.targetline{word-break:break-all}.top-alert{background:#f2f2f2}.top-alert-content{font-size:14px}@media only screen and (max-width:959px){.page{max-width:100%;padding:20px;font-size:16px;line-height:26px}h1{font-size:26px;line-height:1.8;font-weight:700;margin-top:0}.browser-list{height:auto}.browser{margin:0 20px 20px 0}code{word-break:break-word}}
|
||||
@ -1 +0,0 @@
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}a{text-decoration:none;color:#0072c6}a:hover{text-decoration:none;color:#004d8c}body{text-align:center;font-size:14px;line-height:24px;font-family:Microsoft YaHei,'宋体',sans-serif;color:#454545;overflow-y:scroll}.page{width:960px;margin:0 auto;padding:10px;text-align:left}h2,h3{font-family:Microsoft YaHei}h1{font-size:40px;line-height:60px;font-weight:100;margin:20px 0 15px}h2{font-size:20px;line-height:25px;font-weight:100;margin:10px 0}h3{font-weight:700}code{padding:2px 4px;font-size:95%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre code{white-space:pre-wrap;word-break:break-word;display:inline-block;word-break:break-all}ul{padding:0 1em}ul li{list-style-type:disc;list-style-position:inside}b,strong{font-weight:700}em{color:red}p{margin-bottom:10px}.hr,hr{margin:20px 0;border:0;width:100%;height:1px;overflow:hidden;background-color:#ccc}.text-right{text-align:right}.clearboth{clear:both;width:100%;content:""}.clearleft{clear:left;width:100%;content:""}.clearright{clear:right;width:100%;content:""}.browser-list{margin:16px 0 10px;padding:0;height:42px}.browser{display:block;width:155px;height:34px;line-height:22px;float:left;list-style:none}.browser.clearleft{height:1px}.browser span{display:block;font-size:12px;line-height:1.2}.browser img{width:34px;height:34px;border:0;float:left;margin-right:10px}.browser.firefox{width:150px}.browser.edge{width:150px}.browser.safari{width:150px}.browser.se360{width:160px}.browser.qqbrowser{width:140px}.small-alert{font-size:12px;margin:15px 0 8px;color:#90949c}.small-alert:not(.hide)+hr{margin-top:0}.hide{display:none}.alert-danger{display:block;color:#777;background-color:#f1f1f1;padding:6px 12px;clear:both}.alert-info{color:#000;background-color:#f1f6fc;margin-top:12px}.alert-info img{vertical-align:text-top}#win-danger{margin-top:12px;position:relative}#win-danger .arrow{background:url(/images/arrow.png) no-repeat;border:0;position:absolute;display:block;width:20px;height:12px;left:325px;top:-12px}#referrer a,.targetline{word-break:break-all}.top-alert{background:#f2f2f2}.top-alert-content{font-size:14px}@media only screen and (max-width:959px){.page{max-width:100%;padding:20px;font-size:16px;line-height:26px}h1{font-size:26px;line-height:1.8;font-weight:700;margin-top:0}.browser-list{height:auto}.browser{margin:0 20px 20px 0}code{word-break:break-word}}
|
||||
@ -1 +0,0 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="robots" content="noindex,nofollow,noarchive"><title>对旧版 Internet Explorer 的支持服务已终止</title><meta name="description" content="从 2016 年 1 月 12 日开始，仅面向受支持操作系统的最新版 Internet Explorer 将收到技术支持和安全更新。Internet Explorer 11 是最新版的 Internet Explorer，将继续在 Windows 7、Windows 8.1 和 Windows 10 上收到安全更新、兼容性修复程序和技术支持。"><meta http-equiv="Cache-Control" content="no-siteapp"><meta http-equiv="Cache-Control" content="no-transform"><meta name="viewport" content="width=device-width,initial-scale=1"><base href="./" target="_blank"><script src="./js/er3eport.min.js"></script><link rel="icon" type="image/png" href="../favicon.ico"><link type="text/css" rel="stylesheet" href="./css/support.style.min.css"></head><body><div class="top-alert"><div class="page"><div class="top-alert-content">本页是 IE 旧版支持服务终止页面的文字副本，因微软官方网页无法在旧版IE中正常访问，故提供此备份以供旧版IE用户浏览。<a href="https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support" target="_blank" rel="nofollow">查看原网页</a></div></div></div><div class="page"><h1>对旧版 Internet Explorer 的支持服务已终止</h1><p>从 2016 年 1 月 12 日开始，仅面向受支持操作系统的最新版 Internet Explorer 将收到技术支持和安全更新。Internet Explorer 11 是最新版的 Internet Explorer，将继续在 Windows 7、Windows 8.1 和 Windows 10 上收到安全更新、兼容性修复程序和技术支持。</p><div class="hr"></div><h2>这意味着什么？</h2><p>这意味着您应该采取行动。2016 年 1 月 12 日之后，Microsoft 将不再为 Internet Explorer 早期版本提供安全更新或技术支持。安全更新用于修补可能被恶意软件利用的漏洞，从而为提高用户及其数据的安全性提供帮助。定期安全更新帮助保护计算机不受恶意攻击，因此升级和保持最新很重要。</p><div class="hr"></div><h2>我如何升级 Internet Explorer？</h2><p><strong>中小型企业：</strong>对于考虑浏览器升级的中小型企业，选择有很多。没有 Web 应用程序的中小型组织（员工在 500 人以下）可使用自动更新进行自动更新。对于依赖现有 Web 应用程序的中小型企业，可以寻找 Microsoft 认证合作伙伴以了解符合其业务需要的最佳方案。</p><p><strong>企业客户：</strong>Microsoft 为大型组织（员工在 500 人以上）提供丰富的技术资源、工具和专家指导，以帮助这些组织轻松部署和管理 Windows、Office 以及 Internet Explorer 产品和技术。通过联系您的 Microsoft 销售代表、Microsoft Services 部门或 Microsoft 认证合作伙伴，详细了解迁移和部署计划。了解如何通过访问 TechNet 自行试用和部署最新版本的 Edge。</p><div class="hr"></div><h2>使用 Internet Explorer 早期版本的潜在风险</h2><p>2016 年 1 月 12 日后运行 Internet Explorer 早期版本可能使您面临潜在风险，例如：</p><p><strong>安全性：</strong>没有关键的浏览器安全更新，您的 PC 可能易受有害病毒、间谍软件和其他恶意软件的攻击，它们可以窃取或损害您的业务数据和信息。</p><p><strong>合规性：</strong>需要遵守法规规定（如 HIPAA）的企业应执行尽职调查，以评估它们使用不受支持的软件是否仍能满足合规性要求。</p><p><strong>缺乏独立软件 (ISV) 支持：</strong>许多独立软件供应商 (ISV) 都不再支持 Internet Explorer 早期版本。例如，Office 365 采用现代 Web 标准，而且与最新浏览器一起使用时运行最出色。</p><div class="hr"></div><p>Copyright © 2020<script>document.write(' - ' + (new Date()).getFullYear())</script><a href="https://www.imsyy.top/">無名</a> . All Rights Reserved</p></div></body></html>
|
||||
@ -1 +0,0 @@
|
||||
var _hmt=_hmt||[],er3eport={};er3eport.start=(new Date).getTime(),er3eport.codetime=function(){return(new Date).getTime()-er3eport.start},er3eport.dodnt=function(){window.dnt=1,"function"==typeof window.dodnt&&window.dodnt()},er3eport.jqdefined=function(){_hmt.push(["_setCustomVar",2,"JSERROR","jQueryDefined # "+er3eport.codetime(),3]),er3eport.dodnt()},er3eport.listener=function(e){var t,r=!1,n="JSERROR";"string"==typeof e?r=e:(e.error?r=e.error.stack:e.message&&(r=e.message),e.srcElement&&e.srcElement.src?t=e.srcElement.src:e.target&&e.target.src&&(t=e.target.src),r||(t?(r="FileError: "+t,n="FILEERROR"):e.type&&(r=e.type)));return r="string"!=typeof r?"empty_error_string":r.replace(/\n/g,"").replace(/\s+/g," "),_hmt.push(["_trackEvent",n,window.location.pathname,r+" #UA# "+navigator.userAgent+" # "+er3eport.codetime()]),!0},"function"==typeof jQuery&&er3eport.jqdefined(),Object.defineProperty&&Object.defineProperty(window,"jQuery",{set:er3eport.jqdefined}),window.addEventListener?window.addEventListener("error",er3eport.listener,!0):window.attachEvent&&window.attachEvent("onerror",er3eport.listener);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user