From 34630843393c542a3be039a464b5e17b25bb4e07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Sun, 27 Nov 2022 14:44:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=BE=E7=BD=AE=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/App.vue | 24 +++- src/components/Background/index.vue | 59 +++++++- src/components/Music/index.vue | 40 +++++- src/components/Set/index.vue | 203 ++++++++++++---------------- src/main.js | 4 +- src/store/index.js | 6 + src/style/global.css | 32 +++++ src/style/global.css.map | 1 + src/style/global.scss | 7 + src/style/style.css | 179 ++++++++++++++++++++++++ src/style/style.css.map | 1 + src/views/MoreSet/index.vue | 11 +- yarn.lock | 5 + 14 files changed, 445 insertions(+), 128 deletions(-) create mode 100644 src/style/global.css create mode 100644 src/style/global.css.map create mode 100644 src/style/style.css create mode 100644 src/style/style.css.map diff --git a/package.json b/package.json index ee88557..46f99ac 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "axios": "^1.1.3", "element-plus": "^2.2.18", "pinia": "^2.0.23", + "pinia-plugin-persistedstate": "^3.0.0", "vue": "^3.2.37", "vue3-aplayer": "^1.7.3" }, diff --git a/src/App.vue b/src/App.vue index 6d584cb..355555b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@
-
+
@@ -11,13 +11,17 @@
-
+
-
+
@@ -57,6 +61,18 @@ onMounted(() => { loadingBox.classList.add("loaded"); }); + // 鼠标中键事件 + window.addEventListener("mousedown", (event) => { + if (event.button == 1) { + store.backgroundShow = !store.backgroundShow; + if (store.backgroundShow) { + ElMessage("已开启壁纸展示状态"); + } else { + ElMessage("已退出壁纸展示状态"); + } + } + }); + // 监听当前页面宽度 getWidth(); window.addEventListener("resize", getWidth); @@ -103,6 +119,8 @@ main { transition: all ease 1.25s; opacity: 1; filter: blur(0); + width: 100%; + height: 100%; } .loading { diff --git a/src/components/Background/index.vue b/src/components/Background/index.vue index b3c42d8..76306a5 100644 --- a/src/components/Background/index.vue +++ b/src/components/Background/index.vue @@ -1,12 +1,22 @@ @@ -62,7 +79,6 @@ watch( transition: all 1.5s ease 0s; backface-visibility: hidden; } - .gray { opacity: 1; position: absolute; @@ -70,11 +86,42 @@ watch( top: 0; width: 100%; height: 100%; - background-image: radial-gradient(rgba(0, 0, 0, 0) 0, - rgba(0, 0, 0, 0.5) 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); + } } } diff --git a/src/components/Music/index.vue b/src/components/Music/index.vue index 3f263f5..eba314f 100644 --- a/src/components/Music/index.vue +++ b/src/components/Music/index.vue @@ -98,6 +98,10 @@ :songId="playerData.id" ref="playerRef" /> +
+ + 音乐播放器加载失败 +
@@ -115,6 +119,7 @@ import { VolumeMute, VolumeSmall, VolumeNotice, + PlayWrong, } from "@icon-park/vue-next"; import Player from "@/components/Player/index.vue"; import { mainStore } from "@/store"; @@ -153,7 +158,7 @@ const changeMusicIndex = (type) => { onMounted(() => { // 空格键事件 window.addEventListener("keydown", (e) => { - if (e.code == "Space") { + if (e.code == "Space" && store.musicIsOk) { changePlayState(); } }); @@ -183,10 +188,12 @@ watch( 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; @@ -195,17 +202,20 @@ watch( 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; @@ -213,6 +223,7 @@ watch( display: block; } } + .i-icon { width: 36px; height: 36px; @@ -222,14 +233,17 @@ watch( justify-content: center; border-radius: 6px; transform: scale(1); + &:hover { background: #ffffff33; } + &:active { transform: scale(0.95); } } } + .menu { height: 26px; width: 100%; @@ -238,6 +252,7 @@ watch( flex-direction: column; align-items: center; justify-content: center; + .name { width: 100%; text-align: center; @@ -246,26 +261,32 @@ watch( white-space: nowrap; // font-size: 1.1rem; } + .volume { width: 100%; padding: 0 12px; display: flex; align-items: center; flex-direction: row; + .icon { margin-right: 12px; + span { width: 24px; height: 24px; display: block; } } + :deep(*) { transition: none; } + :deep(.el-slider__button) { transition: 0.3s; } + .el-slider { margin-right: 12px; --el-slider-main-bg-color: #efefef; @@ -275,6 +296,7 @@ watch( } } } + .music-list { position: fixed; top: 0; @@ -285,6 +307,7 @@ watch( background-color: #00000080; backdrop-filter: blur(20px); z-index: 1; + .list { position: absolute; display: flex; @@ -297,6 +320,7 @@ watch( background-color: #ffffff66; border-radius: 6px; z-index: 999; + .close { position: absolute; top: 12px; @@ -304,13 +328,24 @@ watch( 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; + } + } } } @@ -318,14 +353,17 @@ watch( .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); diff --git a/src/components/Set/index.vue b/src/components/Set/index.vue index e0f0a37..1416a0f 100644 --- a/src/components/Set/index.vue +++ b/src/components/Set/index.vue @@ -1,52 +1,27 @@ \ No newline at end of file diff --git a/src/main.js b/src/main.js index edc412e..6782128 100644 --- a/src/main.js +++ b/src/main.js @@ -6,10 +6,12 @@ import App from '@/App.vue'; // 引入 pinia import { createPinia -} from 'pinia' +} from 'pinia'; +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; const app = createApp(App); const pinia = createPinia(); +pinia.use(piniaPluginPersistedstate); app.use(pinia); app.mount('#app') \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 793b5e3..1699608 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -9,6 +9,7 @@ export const mainStore = defineStore("main", { coverType: "0", // 壁纸种类 musicIsOk: false, // 音乐是否加载完成 musicOpenState: false, // 音乐面板开启状态 + backgroundShow: false, // 壁纸展示状态 boxOpenState: false, // 盒子开启状态 setOpenState: false, // 设置页面开启状态 playerState: false, // 当前播放状态 @@ -58,4 +59,9 @@ export const mainStore = defineStore("main", { this.playerArtist = artist; } }, + persist: { + key: 'data', + storage: window.localStorage, + paths: ['coverType'], + }, }) \ No newline at end of file diff --git a/src/style/global.css b/src/style/global.css new file mode 100644 index 0000000..0d7a3d5 --- /dev/null +++ b/src/style/global.css @@ -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 */ \ No newline at end of file diff --git a/src/style/global.css.map b/src/style/global.css.map new file mode 100644 index 0000000..de0f57a --- /dev/null +++ b/src/style/global.css.map @@ -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"} \ No newline at end of file diff --git a/src/style/global.scss b/src/style/global.scss index 6f92ad7..fc6173b 100644 --- a/src/style/global.scss +++ b/src/style/global.scss @@ -10,6 +10,13 @@ // 首次调用 @include changeWidth; +/* 小于1200px时 */ +@media (max-width: 1380px) { + .el-radio-group { + justify-content: center !important; + } +} + /* 小于1200px时 */ @media (max-width: 1200px) { @include changeWidth($maxWidth:1000px); diff --git a/src/style/style.css b/src/style/style.css new file mode 100644 index 0000000..3c7aee2 --- /dev/null +++ b/src/style/style.css @@ -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 */ \ No newline at end of file diff --git a/src/style/style.css.map b/src/style/style.css.map new file mode 100644 index 0000000..f354fb7 --- /dev/null +++ b/src/style/style.css.map @@ -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"} \ No newline at end of file diff --git a/src/views/MoreSet/index.vue b/src/views/MoreSet/index.vue index c1eca50..713dcd3 100644 --- a/src/views/MoreSet/index.vue +++ b/src/views/MoreSet/index.vue @@ -4,7 +4,7 @@ - +