YesPlayMusic/src/App.vue

171 lines
3.6 KiB
Vue
Raw Normal View History

2020-10-10 19:54:44 +08:00
<template>
<div id="app">
2020-11-23 16:04:45 +08:00
<Navbar ref="navbar" />
2020-10-10 19:54:44 +08:00
<main>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</main>
<transition name="slide-up">
2020-10-14 21:10:45 +08:00
<Player
2020-10-14 15:39:41 +08:00
v-if="this.$store.state.player.enable"
ref="player"
v-show="
['mv', 'loginUsername', 'login', 'loginAccount'].includes(
this.$route.name
) === false
"
2020-10-10 19:54:44 +08:00
/></transition>
2020-12-09 16:00:38 +08:00
<Toast />
2020-10-14 21:10:45 +08:00
<GlobalEvents :filter="globalEventFilter" @keydown.space="play" />
2020-10-10 19:54:44 +08:00
</div>
</template>
<script>
import Navbar from "./components/Navbar.vue";
2020-10-14 21:10:45 +08:00
import Player from "./components/Player.vue";
2020-12-09 16:00:38 +08:00
import Toast from "./components/Toast.vue";
2020-10-10 19:54:44 +08:00
import GlobalEvents from "vue-global-events";
2020-11-23 16:04:45 +08:00
import { ipcRenderer } from "./electron/ipcRenderer";
2020-10-10 19:54:44 +08:00
export default {
name: "App",
components: {
Navbar,
2020-10-14 21:10:45 +08:00
Player,
GlobalEvents,
2020-12-09 16:00:38 +08:00
Toast,
2020-10-10 19:54:44 +08:00
},
data() {
return {
2020-11-23 16:44:17 +08:00
isElectron: process.env.IS_ELECTRON, // true || undefined
2020-10-31 14:03:41 +08:00
};
},
2020-10-30 10:59:26 +08:00
created() {
if (this.isElectron) {
2020-11-23 16:04:45 +08:00
ipcRenderer(this);
}
},
2020-10-10 19:54:44 +08:00
methods: {
play(e) {
e.preventDefault();
this.$refs.player.play();
},
2020-10-14 21:10:45 +08:00
globalEventFilter(event) {
if (event.target.tagName === "INPUT") return false;
if (this.$route.name === "mv") return false;
return true;
},
},
2020-10-10 19:54:44 +08:00
};
</script>
<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
2020-10-25 21:04:33 +08:00
:root {
--color-body-bg: #ffffff;
--color-text: #000;
--color-primary: #335eea;
--color-primary-bg: #eaeffd;
--color-secondary: #7a7a7b;
--color-secondary-bg: #f5f5f7;
--color-navbar-bg: rgba(255, 255, 255, 0.86);
2020-12-09 16:55:13 +08:00
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
2020-10-25 21:04:33 +08:00
}
[data-theme="dark"] {
--color-body-bg: #222222;
--color-text: #ffffff;
--color-primary: #335eea;
--color-primary-bg: #bbcdff;
--color-secondary: #7a7a7b;
--color-secondary-bg: #323232;
--color-navbar-bg: #335eea;
--color-navbar-bg: rgba(34, 34, 34, 0.86);
2020-12-09 16:55:13 +08:00
--color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
--color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
2020-10-25 21:04:33 +08:00
}
2020-10-10 19:54:44 +08:00
#app {
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
WenQuanYi Micro Hei, sans-serif;
width: 100%;
2020-10-25 21:04:33 +08:00
transition: all 0.4s;
}
body {
background-color: var(--color-body-bg);
2020-10-10 19:54:44 +08:00
}
2020-10-10 19:54:44 +08:00
html {
overflow-y: overlay;
min-width: 1000px;
}
main {
margin-top: 96px;
margin-bottom: 96px;
padding: {
right: 10vw;
left: 10vw;
}
}
select,
2020-10-10 19:54:44 +08:00
button {
2020-10-20 21:40:01 +08:00
font-family: inherit;
}
button {
2020-10-10 19:54:44 +08:00
background: none;
border: none;
cursor: pointer;
}
input,
button {
&:focus {
outline: none;
}
}
a {
color: inherit;
text-decoration: none;
2020-10-31 12:05:28 +08:00
cursor: pointer;
2020-10-10 19:54:44 +08:00
&:hover {
text-decoration: underline;
}
}
// for electron
body.is-electron::-webkit-scrollbar {
width: 0;
}
2020-10-10 19:54:44 +08:00
/* Let's get this party started */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
2020-10-25 21:04:33 +08:00
border-left: 1px solid rgba(128, 128, 128, 0.18);
2020-10-10 19:54:44 +08:00
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
2020-10-25 21:04:33 +08:00
background: var(--color-secondary-bg);
2020-10-10 19:54:44 +08:00
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.4s;
}
.slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateY(100%);
}
</style>