mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-20 22:13:37 +08:00
Merge branch 'master' of github.com:qier222/YesPlayMusic
This commit is contained in:
kunkka
commit
2cb62231f2
11
README.md
11
README.md
@ -26,6 +26,8 @@
|
||||
- 🖥️ 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
|
||||
- 🙉 支持显示歌曲和专辑的 Explicit 标志
|
||||
- 📺 MV 播放
|
||||
- ✔️ 每日自动签到（手机端和电脑端同时签到）
|
||||
- 🌚 Light/Dark Mode 自动切换
|
||||
- 🚫🤝 无任何社交功能
|
||||
- 🛠 更多特性开发中
|
||||
|
||||
@ -60,14 +62,9 @@ npm run build
|
||||
|
||||
## ☑️ Todo
|
||||
|
||||
- 中文支持
|
||||
- Dark Mode
|
||||
- 歌词
|
||||
- 私人 FM
|
||||
- 播放记录
|
||||
- 无限播放模式（播放完列表后自动播放相似歌曲）
|
||||
查看 Todo 请访问本项目的 [Projects](https://github.com/qier222/YesPlayMusic/projects/1)
|
||||
|
||||
欢迎提 issue 和 pull request。
|
||||
欢迎提 Issue 和 Pull request。
|
||||
|
||||
## 📜 开源许可
|
||||
|
||||
|
||||
28
src/App.vue
28
src/App.vue
@ -50,11 +50,36 @@ export default {
|
||||
<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");
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
[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);
|
||||
}
|
||||
|
||||
#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%;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
body {
|
||||
background-color: var(--color-body-bg);
|
||||
}
|
||||
|
||||
html {
|
||||
@ -102,12 +127,13 @@ a {
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-left: 1px solid rgba(128, 128, 128, 0.18);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background: rgb(216, 216, 216);
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
|
||||
@ -51,3 +51,14 @@ export function userLikedSongsIDs(uid) {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function dailySignin(type = 0) {
|
||||
//可选参数 : type: 签到类型 , 默认 0, 其中 0 为安卓端签到 ,1 为 web/PC 签到
|
||||
return request({
|
||||
url: "/daily_signin",
|
||||
method: "post",
|
||||
params: {
|
||||
type,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* rail style */
|
||||
.vue-slider-rail {
|
||||
background-color: #eee;
|
||||
background-color: rgba(128, 128, 128, 0.18);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@ -54,7 +54,8 @@
|
||||
|
||||
/* volume style */
|
||||
.volume-control .vue-slider-process {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.8;
|
||||
background-color: var(--color-text);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ button {
|
||||
border-radius: 25%;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
@ -27,7 +27,7 @@ button {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
|
||||
@ -54,8 +54,8 @@ button {
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
margin-right: 12px;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
@ -70,8 +70,8 @@ button {
|
||||
}
|
||||
}
|
||||
button.grey {
|
||||
background-color: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-secondary-bg);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
button.transparent {
|
||||
background-color: transparent;
|
||||
|
||||
@ -163,6 +163,7 @@ export default {
|
||||
filter: blur(16px) opacity(0.6);
|
||||
z-index: -1;
|
||||
height: 208px;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.play-button {
|
||||
opacity: 0;
|
||||
|
||||
@ -129,13 +129,13 @@ export default {
|
||||
|
||||
.item {
|
||||
margin: 12px 12px 24px 12px;
|
||||
color: var(--color-text);
|
||||
.text {
|
||||
width: 208px;
|
||||
margin-top: 8px;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 20px;
|
||||
|
||||
display: -webkit-box;
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -170,7 +170,8 @@ export default {
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
float: right;
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
@ -178,7 +179,8 @@ export default {
|
||||
}
|
||||
|
||||
.lock-icon {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
margin-right: 4px;
|
||||
// float: right;
|
||||
.svg-icon {
|
||||
@ -189,7 +191,8 @@ export default {
|
||||
|
||||
.play-count {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
color: var(--color-text);
|
||||
font-size: 12px;
|
||||
.svg-icon {
|
||||
margin-right: 3px;
|
||||
|
||||
@ -76,11 +76,12 @@ export default {
|
||||
.mv {
|
||||
margin: 12px 12px 24px 12px;
|
||||
width: 204px;
|
||||
color: var(--color-text);
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -88,7 +89,7 @@ export default {
|
||||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<a
|
||||
href="https://github.com/qier222/YesPlayMusic"
|
||||
target="blank"
|
||||
v-if="settings.showGithubIcon"
|
||||
v-if="settings.showGithubIcon !== false"
|
||||
><svg-icon icon-class="github" class="github"
|
||||
/></a>
|
||||
<div class="search-box">
|
||||
@ -103,7 +103,10 @@ nav {
|
||||
left: 10vw;
|
||||
}
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
background-color: rgba(255, 255, 255, 0.86);
|
||||
|
||||
// background: var(--color-body-bg);
|
||||
// background-color: rgba(255, 255, 255, 0.86);
|
||||
background-color: var(--color-navbar-bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -127,15 +130,15 @@ nav {
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: black;
|
||||
color: var(--color-text);
|
||||
transition: 0.2s;
|
||||
margin: {
|
||||
right: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: #eaeffd;
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
@ -143,7 +146,7 @@ nav {
|
||||
}
|
||||
}
|
||||
a.active {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -163,7 +166,7 @@ nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
}
|
||||
@ -171,7 +174,8 @@ nav {
|
||||
.svg-icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
color: #aaaaaa;
|
||||
color: var(--color-text);
|
||||
opacity: 0.28;
|
||||
margin: {
|
||||
left: 8px;
|
||||
right: 4px;
|
||||
@ -185,13 +189,15 @@ nav {
|
||||
width: 96%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
input,
|
||||
.svg-icon {
|
||||
color: #335eea;
|
||||
opacity: 1;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -205,6 +211,7 @@ nav {
|
||||
margin-right: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -294,7 +294,8 @@ export default {
|
||||
justify-content: space-around;
|
||||
height: 64px;
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
background-color: rgba(255, 255, 255, 0.86);
|
||||
// background-color: rgba(255, 255, 255, 0.86);
|
||||
background-color: var(--color-navbar-bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -334,7 +335,8 @@ export default {
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
@ -348,7 +350,8 @@ export default {
|
||||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -394,7 +397,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.active .svg-icon {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.volume-control {
|
||||
margin-left: 4px;
|
||||
|
||||
@ -159,7 +159,7 @@ button {
|
||||
.svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
@ -180,12 +180,16 @@ button {
|
||||
border-radius: 8px;
|
||||
margin: 0 20px 0 10px;
|
||||
width: 12px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
span {
|
||||
opacity: 0.58;
|
||||
}
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
@ -221,7 +225,7 @@ button {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
padding-right: 16px;
|
||||
display: -webkit-box;
|
||||
@ -233,13 +237,14 @@ button {
|
||||
margin-right: 2px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.72);
|
||||
opacity: 0.72;
|
||||
}
|
||||
}
|
||||
.artist {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -247,7 +252,7 @@ button {
|
||||
a {
|
||||
span {
|
||||
margin-right: 3px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -260,7 +265,8 @@ button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -274,10 +280,12 @@ button {
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
}
|
||||
&:hover {
|
||||
transition: all 0.3s;
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
.track.disable {
|
||||
@ -290,7 +298,7 @@ button {
|
||||
.time,
|
||||
.no,
|
||||
.featured {
|
||||
color: rgba(0, 0, 0, 0.28) !important;
|
||||
opacity: 0.28 !important;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
@ -325,24 +333,22 @@ button {
|
||||
}
|
||||
|
||||
.track.playing {
|
||||
background: #eaeffd;
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
.title,
|
||||
.album {
|
||||
color: #335eea;
|
||||
.album,
|
||||
.time {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.title .featured,
|
||||
.artist {
|
||||
color: #335eea;
|
||||
.artist,
|
||||
.explicit-symbol {
|
||||
color: var(--color-primary);
|
||||
opacity: 0.88;
|
||||
}
|
||||
.no span {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.explicit-symbol {
|
||||
color: #335eea;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -108,5 +108,11 @@ export default {
|
||||
high: "High",
|
||||
lossless: "Lossless",
|
||||
},
|
||||
appearance: {
|
||||
text: "Appearance",
|
||||
auto: "Auto",
|
||||
light: "Light",
|
||||
dark: "Dark",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,9 +6,6 @@ export default {
|
||||
library: "资料库",
|
||||
search: "搜索",
|
||||
},
|
||||
footer: {
|
||||
settings: "设置",
|
||||
},
|
||||
home: {
|
||||
recommendPlaylist: "推荐歌单",
|
||||
recommendArtist: "推荐歌手",
|
||||
@ -34,7 +31,7 @@ export default {
|
||||
albums: "专辑",
|
||||
withAlbums: "张专辑",
|
||||
artist: "歌手",
|
||||
videos: "个视频",
|
||||
videos: "个MV",
|
||||
},
|
||||
album: {
|
||||
released: "发行于",
|
||||
@ -103,7 +100,7 @@ export default {
|
||||
songs: "首歌",
|
||||
},
|
||||
settings: {
|
||||
settings: "选项",
|
||||
settings: "设置",
|
||||
logout: "登出",
|
||||
language: "语言",
|
||||
musicQuality: {
|
||||
@ -113,5 +110,11 @@ export default {
|
||||
high: "极高",
|
||||
lossless: "无损",
|
||||
},
|
||||
appearance: {
|
||||
text: "外观",
|
||||
auto: "自动",
|
||||
light: "浅色",
|
||||
dark: "深色",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,7 +24,6 @@ Vue.config.productionTip = false;
|
||||
initMediaSession();
|
||||
|
||||
if (process.env.VUE_APP_ENABLE_SENTRY === "true") {
|
||||
console.log("VUE_APP_ENABLE_SENTRY");
|
||||
Sentry.init({
|
||||
dsn:
|
||||
"https://30aaa25152974f48971912a394ab6bc3@o436528.ingest.sentry.io/5477409",
|
||||
|
||||
@ -5,6 +5,7 @@ import mutations from "./mutations";
|
||||
import actions from "./actions";
|
||||
import initState from "./initState";
|
||||
import { Howl, Howler } from "howler";
|
||||
import { changeAppearance } from "@/utils/common";
|
||||
|
||||
if (localStorage.getItem("appVersion") === null) {
|
||||
localStorage.setItem("player", JSON.stringify(initState.player));
|
||||
@ -45,4 +46,13 @@ if ([undefined, null].includes(store.state.settings.lang)) {
|
||||
localStorage.setItem("settings", JSON.stringify(store.state.settings));
|
||||
}
|
||||
|
||||
changeAppearance(store.state.settings.appearance);
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", () => {
|
||||
if (store.state.settings.appearance === "auto") {
|
||||
changeAppearance(store.state.settings.appearance);
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
const initState = {
|
||||
howler: null,
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
liked: {
|
||||
songs: [],
|
||||
},
|
||||
@ -85,6 +87,7 @@ const initState = {
|
||||
id: 0,
|
||||
},
|
||||
lang: null,
|
||||
appearance: "auto",
|
||||
musicQuality: 320000,
|
||||
showGithubIcon: true,
|
||||
showPlaylistsByAppleMusic: true,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
export default {
|
||||
howler: null,
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
liked: {
|
||||
songs: [],
|
||||
},
|
||||
@ -9,6 +11,4 @@ export default {
|
||||
},
|
||||
player: JSON.parse(localStorage.getItem("player")),
|
||||
settings: JSON.parse(localStorage.getItem("settings")),
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { isAccountLoggedIn } from "./auth";
|
||||
import { refreshCookie } from "@/api/auth";
|
||||
import { dailySignin } from "@/api/user";
|
||||
import dayjs from "dayjs";
|
||||
import store from "@/store";
|
||||
|
||||
@ -79,9 +80,10 @@ export function updateHttps(url) {
|
||||
}
|
||||
|
||||
export function dailyTask() {
|
||||
let lastDate = store.state.settings.lastRefreshCookieDate;
|
||||
if (
|
||||
store.state.settings.lastRefreshCookieDate === undefined ||
|
||||
store.state.settings.lastRefreshCookieDate !== dayjs().date()
|
||||
isAccountLoggedIn() &&
|
||||
(lastDate === undefined || lastDate !== dayjs().date())
|
||||
) {
|
||||
console.log("execute dailyTask");
|
||||
store.commit("updateSettings", {
|
||||
@ -89,5 +91,19 @@ export function dailyTask() {
|
||||
value: dayjs().date(),
|
||||
});
|
||||
refreshCookie();
|
||||
dailySignin(0);
|
||||
dailySignin(1);
|
||||
}
|
||||
}
|
||||
|
||||
export function changeAppearance(appearance) {
|
||||
if (appearance === "auto" || appearance === undefined) {
|
||||
appearance = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
document.body.setAttribute("data-theme", appearance);
|
||||
document
|
||||
.querySelector('meta[name="theme-color"]')
|
||||
.setAttribute("content", appearance === "dark" ? "#222" : "#fff");
|
||||
}
|
||||
|
||||
@ -200,6 +200,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-left: 56px;
|
||||
color: var(--color-text);
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
@ -208,7 +209,7 @@ export default {
|
||||
}
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 24px;
|
||||
a {
|
||||
font-weight: 600;
|
||||
@ -216,13 +217,13 @@ export default {
|
||||
}
|
||||
.date-and-count {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.description {
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -230,8 +231,8 @@ export default {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: color 0.3s;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -281,7 +282,8 @@ export default {
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
margin-right: 4px;
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
@ -292,22 +294,25 @@ export default {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 36px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.48);
|
||||
opacity: 0.48;
|
||||
color: var(--color-text);
|
||||
div {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.album-time {
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
.more-by {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.18);
|
||||
|
||||
padding-top: 22px;
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,6 +195,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 72px;
|
||||
color: var(--color-text);
|
||||
img {
|
||||
height: 192px;
|
||||
width: 192px;
|
||||
@ -209,13 +210,13 @@ export default {
|
||||
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@ -234,12 +235,14 @@ export default {
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.latest-release {
|
||||
color: var(--color-text);
|
||||
.release {
|
||||
display: flex;
|
||||
}
|
||||
@ -258,17 +261,16 @@ export default {
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.date {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.type {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,11 +283,12 @@ export default {
|
||||
margin-top: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.96);
|
||||
opacity: 1;
|
||||
// background: var(--color-primary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,6 +161,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
color: var(--color-text);
|
||||
font-size: 56px;
|
||||
}
|
||||
.buttons {
|
||||
@ -178,19 +179,18 @@ h1 {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
background-color: var(--color-secondary-bg);
|
||||
color: var(--color-secondary);
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.button.active {
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.playlists {
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
:color="'grey'"
|
||||
@click.native="goTo('/settings')"
|
||||
>
|
||||
{{ $t("footer.settings") }}
|
||||
{{ $t("settings.settings") }}
|
||||
</ButtonTwoTone>
|
||||
</footer>
|
||||
</div>
|
||||
@ -161,40 +161,11 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
|
||||
color: var(--color-text);
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 12px 12px 24px 12px;
|
||||
.text {
|
||||
width: 208px;
|
||||
margin-top: 8px;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 20px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -186,6 +186,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
.head {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
@ -220,25 +221,21 @@ h1 {
|
||||
transition: all 0.4s;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #eaeffd;
|
||||
// background: linear-gradient(-30deg, #60a6f7, #4364f7, #0052d4);
|
||||
// color: white;
|
||||
// background: linear-gradient(149.46deg, #450af5, #8e8ee5 99.16%);
|
||||
background: var(--color-primary-bg);
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--color-primary);
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #335eea;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 15px;
|
||||
margin-top: 2px;
|
||||
color: #335eea;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -248,16 +245,14 @@ h1 {
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
// background: rgba(255, 255, 255, 1);
|
||||
background: #335eea;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2);
|
||||
cursor: default;
|
||||
|
||||
.svg-icon {
|
||||
// color: #3f63f5;
|
||||
color: #eaeffd;
|
||||
color: var(--color-primary-bg);
|
||||
margin-left: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@ -277,7 +272,8 @@ h1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: rgba(51, 94, 234, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-primary);
|
||||
p {
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -287,7 +283,8 @@ h1 {
|
||||
.playlists {
|
||||
margin-top: 54px;
|
||||
.title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
margin-bottom: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
||||
@ -206,6 +206,7 @@ export default {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 48px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
@ -216,11 +217,6 @@ export default {
|
||||
height: 64px;
|
||||
margin: 20px;
|
||||
}
|
||||
.svg-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: rgba(82, 82, 82, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
@ -233,12 +229,13 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
}
|
||||
@ -265,7 +262,12 @@ export default {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--color-text);
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
input#countryCode {
|
||||
@ -276,10 +278,10 @@ export default {
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
input,
|
||||
.svg-icon {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -290,8 +292,8 @@ export default {
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
border-radius: 8px;
|
||||
margin-top: 24px;
|
||||
transition: 0.2s;
|
||||
@ -311,17 +313,19 @@ export default {
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
color: var(--color-text);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 300px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.18);
|
||||
border-top: 1px solid rgba(128, 128, 128);
|
||||
margin-top: 48px;
|
||||
padding-top: 12px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.48);
|
||||
color: var(--color-text);
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
@ -346,7 +350,7 @@ button.loading {
|
||||
.loading span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #335eea;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
margin: 0 2px;
|
||||
animation: loading 1.4s infinite both;
|
||||
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
this.$router.push({ path: "/library" });
|
||||
});
|
||||
},
|
||||
throttleSearch: throttle(function () {
|
||||
throttleSearch: throttle(function() {
|
||||
this.search();
|
||||
}, 500),
|
||||
},
|
||||
@ -107,6 +107,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -121,7 +122,7 @@ export default {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,13 +133,13 @@ export default {
|
||||
height: 48px;
|
||||
border-radius: 11px;
|
||||
width: 326px;
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
margin: {
|
||||
left: 12px;
|
||||
right: 8px;
|
||||
@ -153,9 +154,10 @@ export default {
|
||||
width: 115%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
&::placeholder {
|
||||
color: #335eeac4;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -187,15 +189,15 @@ export default {
|
||||
margin-left: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.user.active {
|
||||
transition: 0.2s;
|
||||
background: #eaeffd;
|
||||
.name {
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
.nickname {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -127,19 +127,20 @@ export default {
|
||||
|
||||
.video-info {
|
||||
margin-top: 12px;
|
||||
color: var(--color-text);
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.artist {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@ -149,7 +150,8 @@ export default {
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
},
|
||||
sortedTracks() {
|
||||
function compare(property) {
|
||||
return function (obj1, obj2) {
|
||||
return function(obj1, obj2) {
|
||||
var value1 = obj1[property];
|
||||
var value2 = obj2[property];
|
||||
return value1 - value2;
|
||||
@ -106,5 +106,6 @@ h1 {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 18px;
|
||||
cursor: default;
|
||||
color: var(--color-text);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,9 @@
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="`https://music.163.com/#/user/home?id=${playlist.creator.userId}`"
|
||||
:href="
|
||||
`https://music.163.com/#/user/home?id=${playlist.creator.userId}`
|
||||
"
|
||||
target="blank"
|
||||
>{{ playlist.creator.nickname }}</a
|
||||
>
|
||||
@ -226,20 +228,24 @@ export default {
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-top: 24px;
|
||||
}
|
||||
.date-and-count {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
margin-top: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -247,8 +253,8 @@ export default {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: color 0.3s;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
@ -299,6 +305,7 @@ export default {
|
||||
.user-info {
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
||||
@ -192,15 +192,17 @@ export default {
|
||||
h1 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-text);
|
||||
span {
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
margin-top: 46px;
|
||||
}
|
||||
@ -219,6 +221,7 @@ h1 {
|
||||
padding-right: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
.artist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -236,6 +239,7 @@ h1 {
|
||||
|
||||
.albums-list {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
.album {
|
||||
img {
|
||||
height: 128px;
|
||||
@ -249,7 +253,6 @@ h1 {
|
||||
.name {
|
||||
margin-top: 6px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 14px;
|
||||
width: 128px;
|
||||
display: -webkit-box;
|
||||
@ -259,7 +262,7 @@ h1 {
|
||||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user