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"
|
2020-10-17 00:18:24 +08:00
|
|
|
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,
|
2020-10-22 21:44:34 +08:00
|
|
|
GlobalEvents,
|
2020-12-09 16:00:38 +08:00
|
|
|
Toast,
|
2020-10-10 19:54:44 +08:00
|
|
|
},
|
2020-10-31 14:03:23 +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-31 14:03:23 +08:00
|
|
|
},
|
2020-10-30 10:59:26 +08:00
|
|
|
created() {
|
2020-10-31 14:03:23 +08:00
|
|
|
if (this.isElectron) {
|
2020-11-23 16:04:45 +08:00
|
|
|
ipcRenderer(this);
|
2020-10-31 14:03:23 +08:00
|
|
|
}
|
2020-10-29 18:46:54 +08:00
|
|
|
},
|
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-22 21:44:34 +08:00
|
|
|
},
|
|
|
|
},
|
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-17 00:18:24 +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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-23 00:00:17 +08:00
|
|
|
select,
|
2020-10-10 19:54:44 +08:00
|
|
|
button {
|
2020-10-20 21:40:01 +08:00
|
|
|
font-family: inherit;
|
2020-10-23 00:00:17 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-31 14:03:23 +08:00
|
|
|
// 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>
|