pvb3xqpfw
/
YepMusic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of github.com:qier222/YesPlayMusic

Browse Source
master
kunkka 4 years ago
parent 9f03beb1cd 81ec2fe6b9
commit 2cb62231f2
31 changed files with 319 additions and 192 deletions
Show Stats Download Patch File Download Diff File

11
README.md
Unescape View File

@ -26,6 +26,8 @@
- 🖥️ 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑 - 🖥️ 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
- 🙉 支持显示歌曲和专辑的 Explicit 标志 - 🙉 支持显示歌曲和专辑的 Explicit 标志
- 📺 MV 播放 - 📺 MV 播放
- ✔️ 每日自动签到（手机端和电脑端同时签到）
- 🌚 Light/Dark Mode 自动切换
- 🚫🤝 无任何社交功能 - 🚫🤝 无任何社交功能
- 🛠 更多特性开发中 - 🛠 更多特性开发中
@ -60,14 +62,9 @@ npm run build
## ☑️ Todo ## ☑️ Todo
- 中文支持 查看 Todo 请访问本项目的 [Projects](https://github.com/qier222/YesPlayMusic/projects/1)
- Dark Mode
- 歌词
- 私人 FM
- 播放记录
- 无限播放模式（播放完列表后自动播放相似歌曲）
欢迎提 issue 和 pull request。 欢迎提 Issue 和 Pull request。
## 📜 开源许可 ## 📜 开源许可

28
src/App.vue
Unescape View File

@ -50,11 +50,36 @@ export default {
<style lang="scss"> <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"); @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 { #app {
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue, font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
WenQuanYi Micro Hei, sans-serif; WenQuanYi Micro Hei, sans-serif;
width: 100%; width: 100%;
transition: all 0.4s;
}
body {
background-color: var(--color-body-bg);
} }
html { html {
@ -102,12 +127,13 @@ a {
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
border-left: 1px solid rgba(128, 128, 128, 0.18);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
background: rgb(216, 216, 216); background: var(--color-secondary-bg);
} }
.slide-up-enter-active, .slide-up-enter-active,

11
src/api/user.js
Unescape View File

@ -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,
},
});
}

5
src/assets/css/slider.css
Unescape View File

@ -1,6 +1,6 @@
/* rail style */ /* rail style */
.vue-slider-rail { .vue-slider-rail {
background-color: #eee; background-color: rgba(128, 128, 128, 0.18);
border-radius: 15px; border-radius: 15px;
} }
@ -54,7 +54,8 @@
/* volume style */ /* volume style */
.volume-control .vue-slider-process { .volume-control .vue-slider-process {
background-color: rgba(0, 0, 0, 0.8); opacity: 0.8;
background-color: var(--color-text);
border-radius: 15px; border-radius: 15px;
} }

4
src/components/ButtonIcon.vue
Unescape View File

@ -19,7 +19,7 @@ button {
border-radius: 25%; border-radius: 25%;
transition: 0.2s; transition: 0.2s;
.svg-icon { .svg-icon {
color: rgba(0, 0, 0, 0.88); color: var(--color-text);
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
@ -27,7 +27,7 @@ button {
margin-left: 0; margin-left: 0;
} }
&:hover { &:hover {
background: #f5f5f7; background: var(--color-secondary-bg);
} }
&:active { &:active {
transform: scale(0.92); transform: scale(0.92);

8
src/components/ButtonTwoTone.vue
Unescape View File

@ -54,8 +54,8 @@ button {
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
background-color: rgba(51, 94, 234, 0.1); background-color: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
margin-right: 12px; margin-right: 12px;
transition: 0.2s; transition: 0.2s;
.svg-icon { .svg-icon {
@ -70,8 +70,8 @@ button {
} }
} }
button.grey { button.grey {
background-color: #f5f5f7; background-color: var(--color-secondary-bg);
color: rgba(0, 0, 0, 0.5); color: var(--color-secondary);
} }
button.transparent { button.transparent {
background-color: transparent; background-color: transparent;

1
src/components/Cover.vue
Unescape View File

@ -163,6 +163,7 @@ export default {
filter: blur(16px) opacity(0.6); filter: blur(16px) opacity(0.6);
z-index: -1; z-index: -1;
height: 208px; height: 208px;
transform: scale(0.98);
} }
.play-button { .play-button {
opacity: 0; opacity: 0;

13
src/components/CoverRow.vue
Unescape View File

@ -129,13 +129,13 @@ export default {
.item { .item {
margin: 12px 12px 24px 12px; margin: 12px 12px 24px 12px;
color: var(--color-text);
.text { .text {
width: 208px; width: 208px;
margin-top: 8px; margin-top: 8px;
.name { .name {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88);
line-height: 20px; line-height: 20px;
display: -webkit-box; display: -webkit-box;
@ -145,7 +145,7 @@ export default {
} }
.info { .info {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
line-height: 18px; line-height: 18px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -170,7 +170,8 @@ export default {
} }
.explicit-symbol { .explicit-symbol {
color: rgba(0, 0, 0, 0.28); opacity: 0.28;
color: var(--color-text);
float: right; float: right;
.svg-icon { .svg-icon {
margin-bottom: -3px; margin-bottom: -3px;
@ -178,7 +179,8 @@ export default {
} }
.lock-icon { .lock-icon {
color: rgba(0, 0, 0, 0.28); opacity: 0.28;
color: var(--color-text);
margin-right: 4px; margin-right: 4px;
// float: right; // float: right;
.svg-icon { .svg-icon {
@ -189,7 +191,8 @@ export default {
.play-count { .play-count {
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.58); opacity: 0.58;
color: var(--color-text);
font-size: 12px; font-size: 12px;
.svg-icon { .svg-icon {
margin-right: 3px; margin-right: 3px;

5
src/components/MvRow.vue
Unescape View File

@ -76,11 +76,12 @@ export default {
.mv { .mv {
margin: 12px 12px 24px 12px; margin: 12px 12px 24px 12px;
width: 204px; width: 204px;
color: var(--color-text);
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -88,7 +89,7 @@ export default {
} }
.artist { .artist {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;

27
src/components/Navbar.vue
Unescape View File

@ -27,7 +27,7 @@
<a <a
href="https://github.com/qier222/YesPlayMusic" href="https://github.com/qier222/YesPlayMusic"
target="blank" target="blank"
v-if="settings.showGithubIcon" v-if="settings.showGithubIcon !== false"
><svg-icon icon-class="github" class="github" ><svg-icon icon-class="github" class="github"
/></a> /></a>
<div class="search-box"> <div class="search-box">
@ -103,7 +103,10 @@ nav {
left: 10vw; left: 10vw;
} }
backdrop-filter: saturate(180%) blur(30px); 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; z-index: 100;
} }
@ -127,15 +130,15 @@ nav {
text-decoration: none; text-decoration: none;
border-radius: 6px; border-radius: 6px;
padding: 6px 10px; padding: 6px 10px;
color: black; color: var(--color-text);
transition: 0.2s; transition: 0.2s;
margin: { margin: {
right: 12px; right: 12px;
left: 12px; left: 12px;
} }
&:hover { &:hover {
background: #eaeffd; background: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
} }
&:active { &:active {
transform: scale(0.92); transform: scale(0.92);
@ -143,7 +146,7 @@ nav {
} }
} }
a.active { a.active {
color: #335eea; color: var(--color-primary);
} }
} }
@ -163,7 +166,7 @@ nav {
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: 32px;
background: rgba(0, 0, 0, 0.06); background: var(--color-secondary-bg);
border-radius: 8px; border-radius: 8px;
width: 200px; width: 200px;
} }
@ -171,7 +174,8 @@ nav {
.svg-icon { .svg-icon {
height: 15px; height: 15px;
width: 15px; width: 15px;
color: #aaaaaa; color: var(--color-text);
opacity: 0.28;
margin: { margin: {
left: 8px; left: 8px;
right: 4px; right: 4px;
@ -185,13 +189,15 @@ nav {
width: 96%; width: 96%;
font-weight: 600; font-weight: 600;
margin-top: -1px; margin-top: -1px;
color: var(--color-text);
} }
.active { .active {
background: #eaeffd; background: var(--color-primary-bg);
input, input,
.svg-icon { .svg-icon {
color: #335eea; opacity: 1;
color: var(--color-primary);
} }
} }
} }
@ -205,6 +211,7 @@ nav {
margin-right: 16px; margin-right: 16px;
height: 24px; height: 24px;
width: 24px; width: 24px;
color: var(--color-text);
} }
} }
</style> </style>

11
src/components/Player.vue
Unescape View File

@ -294,7 +294,8 @@ export default {
justify-content: space-around; justify-content: space-around;
height: 64px; height: 64px;
backdrop-filter: saturate(180%) blur(30px); 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; z-index: 100;
} }
@ -334,7 +335,8 @@ export default {
.name { .name {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer; cursor: pointer;
display: -webkit-box; display: -webkit-box;
@ -348,7 +350,8 @@ export default {
} }
.artist { .artist {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.58); opacity: 0.58;
color: var(--color-text);
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
@ -394,7 +397,7 @@ export default {
} }
} }
.active .svg-icon { .active .svg-icon {
color: #335eea; color: var(--color-primary);
} }
.volume-control { .volume-control {
margin-left: 4px; margin-left: 4px;

48
src/components/TrackListItem.vue
Unescape View File

@ -159,7 +159,7 @@ button {
.svg-icon { .svg-icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
color: #335eea; color: var(--color-primary);
} }
&:active { &:active {
transform: scale(0.92); transform: scale(0.92);
@ -180,12 +180,16 @@ button {
border-radius: 8px; border-radius: 8px;
margin: 0 20px 0 10px; margin: 0 20px 0 10px;
width: 12px; width: 12px;
color: rgba(0, 0, 0, 0.58); color: var(--color-text);
cursor: default; cursor: default;
span {
opacity: 0.58;
}
} }
.explicit-symbol { .explicit-symbol {
color: rgba(0, 0, 0, 0.28); opacity: 0.28;
color: var(--color-text);
.svg-icon { .svg-icon {
margin-bottom: -3px; margin-bottom: -3px;
} }
@ -221,7 +225,7 @@ button {
.title { .title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88); color: var(--color-text);
cursor: default; cursor: default;
padding-right: 16px; padding-right: 16px;
display: -webkit-box; display: -webkit-box;
@ -233,13 +237,14 @@ button {
margin-right: 2px; margin-right: 2px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.72); opacity: 0.72;
} }
} }
.artist { .artist {
margin-top: 2px; margin-top: 2px;
font-size: 13px; font-size: 13px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
color: var(--color-text);
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
@ -247,7 +252,7 @@ button {
a { a {
span { span {
margin-right: 3px; margin-right: 3px;
color: rgba(0, 0, 0, 0.8); opacity: 0.8;
} }
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -260,7 +265,8 @@ button {
flex: 1; flex: 1;
display: flex; display: flex;
font-size: 16px; font-size: 16px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -274,10 +280,12 @@ button {
justify-content: flex-end; justify-content: flex-end;
margin-right: 10px; margin-right: 10px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
opacity: 0.88;
color: var(--color-text);
} }
&:hover { &:hover {
transition: all 0.3s; transition: all 0.3s;
background: #f5f5f7; background: var(--color-secondary-bg);
} }
} }
.track.disable { .track.disable {
@ -290,7 +298,7 @@ button {
.time, .time,
.no, .no,
.featured { .featured {
color: rgba(0, 0, 0, 0.28) !important; opacity: 0.28 !important;
} }
&:hover { &:hover {
background: none; background: none;
@ -325,24 +333,22 @@ button {
} }
.track.playing { .track.playing {
background: #eaeffd; background: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
.title, .title,
.album { .album,
color: #335eea; .time {
color: var(--color-primary);
} }
.title .featured, .title .featured,
.artist { .artist,
color: #335eea; .explicit-symbol {
color: var(--color-primary);
opacity: 0.88; opacity: 0.88;
} }
.no span { .no span {
color: #335eea; color: var(--color-primary);
opacity: 0.78; opacity: 0.78;
} }
.explicit-symbol {
color: #335eea;
opacity: 0.88;
}
} }
</style> </style>

6
src/locale/lang/en.js
Unescape View File

@ -108,5 +108,11 @@ export default {
high: "High", high: "High",
lossless: "Lossless", lossless: "Lossless",
}, },
appearance: {
text: "Appearance",
auto: "Auto",
light: "Light",
dark: "Dark",
},
}, },
}; };

13
src/locale/lang/zh-CN.js
Unescape View File

@ -6,9 +6,6 @@ export default {
library: "资料库", library: "资料库",
search: "搜索", search: "搜索",
}, },
footer: {
settings: "设置",
},
home: { home: {
recommendPlaylist: "推荐歌单", recommendPlaylist: "推荐歌单",
recommendArtist: "推荐歌手", recommendArtist: "推荐歌手",
@ -34,7 +31,7 @@ export default {
albums: "专辑", albums: "专辑",
withAlbums: "张专辑", withAlbums: "张专辑",
artist: "歌手", artist: "歌手",
videos: "个视频", videos: "个MV",
}, },
album: { album: {
released: "发行于", released: "发行于",
@ -103,7 +100,7 @@ export default {
songs: "首歌", songs: "首歌",
}, },
settings: { settings: {
settings: "选项", settings: "设置",
logout: "登出", logout: "登出",
language: "语言", language: "语言",
musicQuality: { musicQuality: {
@ -113,5 +110,11 @@ export default {
high: "极高", high: "极高",
lossless: "无损", lossless: "无损",
}, },
appearance: {
text: "外观",
auto: "自动",
light: "浅色",
dark: "深色",
},
}, },
}; };

1
src/main.js
Unescape View File

@ -24,7 +24,6 @@ Vue.config.productionTip = false;
initMediaSession(); initMediaSession();
if (process.env.VUE_APP_ENABLE_SENTRY === "true") { if (process.env.VUE_APP_ENABLE_SENTRY === "true") {
console.log("VUE_APP_ENABLE_SENTRY");
Sentry.init({ Sentry.init({
dsn: dsn:
"https://30aaa25152974f48971912a394ab6bc3@o436528.ingest.sentry.io/5477409", "https://30aaa25152974f48971912a394ab6bc3@o436528.ingest.sentry.io/5477409",

10
src/store/index.js
Unescape View File

@ -5,6 +5,7 @@ import mutations from "./mutations";
import actions from "./actions"; import actions from "./actions";
import initState from "./initState"; import initState from "./initState";
import { Howl, Howler } from "howler"; import { Howl, Howler } from "howler";
import { changeAppearance } from "@/utils/common";
if (localStorage.getItem("appVersion") === null) { if (localStorage.getItem("appVersion") === null) {
localStorage.setItem("player", JSON.stringify(initState.player)); 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)); 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; export default store;

3
src/store/initState.js
Unescape View File

@ -1,5 +1,7 @@
const initState = { const initState = {
howler: null, howler: null,
accountLogin: false,
usernameLogin: false,
liked: { liked: {
songs: [], songs: [],
}, },
@ -85,6 +87,7 @@ const initState = {
id: 0, id: 0,
}, },
lang: null, lang: null,
appearance: "auto",
musicQuality: 320000, musicQuality: 320000,
showGithubIcon: true, showGithubIcon: true,
showPlaylistsByAppleMusic: true, showPlaylistsByAppleMusic: true,

4
src/store/state.js
Unescape View File

@ -1,5 +1,7 @@
export default { export default {
howler: null, howler: null,
accountLogin: false,
usernameLogin: false,
liked: { liked: {
songs: [], songs: [],
}, },
@ -9,6 +11,4 @@ export default {
}, },
player: JSON.parse(localStorage.getItem("player")), player: JSON.parse(localStorage.getItem("player")),
settings: JSON.parse(localStorage.getItem("settings")), settings: JSON.parse(localStorage.getItem("settings")),
accountLogin: false,
usernameLogin: false,
}; };

20
src/utils/common.js
Unescape View File

@ -1,5 +1,6 @@
import { isAccountLoggedIn } from "./auth"; import { isAccountLoggedIn } from "./auth";
import { refreshCookie } from "@/api/auth"; import { refreshCookie } from "@/api/auth";
import { dailySignin } from "@/api/user";
import dayjs from "dayjs"; import dayjs from "dayjs";
import store from "@/store"; import store from "@/store";
@ -79,9 +80,10 @@ export function updateHttps(url) {
} }
export function dailyTask() { export function dailyTask() {
let lastDate = store.state.settings.lastRefreshCookieDate;
if ( if (
store.state.settings.lastRefreshCookieDate === undefined || isAccountLoggedIn() &&
store.state.settings.lastRefreshCookieDate !== dayjs().date() (lastDate === undefined || lastDate !== dayjs().date())
) { ) {
console.log("execute dailyTask"); console.log("execute dailyTask");
store.commit("updateSettings", { store.commit("updateSettings", {
@ -89,5 +91,19 @@ export function dailyTask() {
value: dayjs().date(), value: dayjs().date(),
}); });
refreshCookie(); 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");
}

27
src/views/album.vue
Unescape View File

@ -200,6 +200,7 @@ export default {
justify-content: center; justify-content: center;
flex: 1; flex: 1;
margin-left: 56px; margin-left: 56px;
color: var(--color-text);
.title { .title {
font-size: 56px; font-size: 56px;
font-weight: 700; font-weight: 700;
@ -208,7 +209,7 @@ export default {
} }
.artist { .artist {
font-size: 18px; font-size: 18px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
margin-top: 24px; margin-top: 24px;
a { a {
font-weight: 600; font-weight: 600;
@ -216,13 +217,13 @@ export default {
} }
.date-and-count { .date-and-count {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
margin-top: 2px; margin-top: 2px;
} }
.description { .description {
user-select: none; user-select: none;
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
margin-top: 24px; margin-top: 24px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -230,8 +231,8 @@ export default {
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transition: color 0.3s; transition: opacity 0.3s;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
} }
} }
} }
@ -281,7 +282,8 @@ export default {
} }
.explicit-symbol { .explicit-symbol {
color: rgba(0, 0, 0, 0.28); opacity: 0.28;
color: var(--color-text);
margin-right: 4px; margin-right: 4px;
.svg-icon { .svg-icon {
margin-bottom: -3px; margin-bottom: -3px;
@ -292,22 +294,25 @@ export default {
margin-top: 36px; margin-top: 36px;
margin-bottom: 36px; margin-bottom: 36px;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.48); opacity: 0.48;
color: var(--color-text);
div { div {
margin-bottom: 8px; margin-bottom: 4px;
} }
.album-time { .album-time {
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
} }
} }
.more-by { .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; padding-top: 22px;
.section-title { .section-title {
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
margin-bottom: 8px; margin-bottom: 8px;
} }
} }

21
src/views/artist.vue
Unescape View File

@ -195,6 +195,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 72px; margin-bottom: 72px;
color: var(--color-text);
img { img {
height: 192px; height: 192px;
width: 192px; width: 192px;
@ -209,13 +210,13 @@ export default {
.artist { .artist {
font-size: 18px; font-size: 18px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
margin-top: 24px; margin-top: 24px;
} }
.statistics { .statistics {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
margin-top: 2px; margin-top: 2px;
} }
@ -234,12 +235,14 @@ export default {
.section-title { .section-title {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
margin-bottom: 16px; margin-bottom: 16px;
margin-top: 46px; margin-top: 46px;
} }
.latest-release { .latest-release {
color: var(--color-text);
.release { .release {
display: flex; display: flex;
} }
@ -258,17 +261,16 @@ export default {
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88);
margin-bottom: 8px; margin-bottom: 8px;
} }
.date { .date {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.78); opacity: 0.78;
} }
.type { .type {
margin-top: 2px; margin-top: 2px;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
} }
} }
@ -281,11 +283,12 @@ export default {
margin-top: 8px; margin-top: 8px;
border-radius: 6px; border-radius: 6px;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.78); opacity: 0.78;
color: var(--color-secondary);
font-weight: 600; font-weight: 600;
&:hover { &:hover {
background: #f5f5f7; opacity: 1;
color: rgba(0, 0, 0, 0.96); // background: var(--color-primary-bg);
} }
} }
} }

14
src/views/explore.vue
Unescape View File

@ -161,6 +161,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
h1 { h1 {
color: var(--color-text);
font-size: 56px; font-size: 56px;
} }
.buttons { .buttons {
@ -178,19 +179,18 @@ h1 {
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
border-radius: 10px; border-radius: 10px;
color: rgb(0, 0, 0); background-color: var(--color-secondary-bg);
background-color: #f5f5f7; color: var(--color-secondary);
color: rgba(0, 0, 0, 0.68);
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background-color: rgba(51, 94, 234, 0.1); background-color: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
} }
} }
.button.active { .button.active {
background-color: rgba(51, 94, 234, 0.1); background-color: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
} }
.playlists { .playlists {

35
src/views/home.vue
Unescape View File

@ -54,7 +54,7 @@
:color="'grey'" :color="'grey'"
@click.native="goTo('/settings')" @click.native="goTo('/settings')"
> >
{{ $t("footer.settings") }} {{ $t("settings.settings") }}
</ButtonTwoTone> </ButtonTwoTone>
</footer> </footer>
</div> </div>
@ -161,40 +161,11 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: var(--color-text);
a { a {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.68); opacity: 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;
}
} }
} }

21
src/views/library.vue
Unescape View File

@ -186,6 +186,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
h1 { h1 {
font-size: 42px; font-size: 42px;
color: var(--color-text);
.head { .head {
height: 44px; height: 44px;
margin-right: 12px; margin-right: 12px;
@ -220,25 +221,21 @@ h1 {
transition: all 0.4s; transition: all 0.4s;
box-sizing: border-box; box-sizing: border-box;
background: #eaeffd; background: var(--color-primary-bg);
// background: linear-gradient(-30deg, #60a6f7, #4364f7, #0052d4);
// color: white;
// background: linear-gradient(149.46deg, #450af5, #8e8ee5 99.16%);
.bottom { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: var(--color-primary);
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #335eea;
} }
.sub-title { .sub-title {
font-size: 15px; font-size: 15px;
margin-top: 2px; margin-top: 2px;
color: #335eea;
} }
button { button {
@ -248,16 +245,14 @@ h1 {
align-items: center; align-items: center;
height: 44px; height: 44px;
width: 44px; width: 44px;
// background: rgba(255, 255, 255, 1); background: var(--color-primary);
background: #335eea;
border-radius: 50%; border-radius: 50%;
transition: 0.2s; transition: 0.2s;
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2);
cursor: default; cursor: default;
.svg-icon { .svg-icon {
// color: #3f63f5; color: var(--color-primary-bg);
color: #eaeffd;
margin-left: 4px; margin-left: 4px;
height: 16px; height: 16px;
width: 16px; width: 16px;
@ -277,7 +272,8 @@ h1 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px; font-size: 14px;
color: rgba(51, 94, 234, 0.88); opacity: 0.88;
color: var(--color-primary);
p { p {
margin-top: 2px; margin-top: 2px;
} }
@ -287,7 +283,8 @@ h1 {
.playlists { .playlists {
margin-top: 54px; margin-top: 54px;
.title { .title {
color: rgba(0, 0, 0, 0.88); color: var(--color-text);
opacity: 0.88;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;

34
src/views/loginAccount.vue
Unescape View File

@ -206,6 +206,7 @@ export default {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
margin-bottom: 48px; margin-bottom: 48px;
color: var(--color-text);
} }
.section-1 { .section-1 {
@ -216,11 +217,6 @@ export default {
height: 64px; height: 64px;
margin: 20px; margin: 20px;
} }
.svg-icon {
height: 24px;
width: 24px;
color: rgba(82, 82, 82, 0.28);
}
} }
.section-2 { .section-2 {
@ -233,12 +229,13 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--color-text);
.container { .container {
display: flex; display: flex;
align-items: center; align-items: center;
height: 46px; height: 46px;
background: rgba(0, 0, 0, 0.06); background: var(--color-secondary-bg);
border-radius: 8px; border-radius: 8px;
width: 300px; width: 300px;
} }
@ -265,7 +262,12 @@ export default {
width: 100%; width: 100%;
font-weight: 600; font-weight: 600;
margin-top: -1px; 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 { input#countryCode {
@ -276,10 +278,10 @@ export default {
} }
.active { .active {
background: #eaeffd; background: var(--color-primary-bg);
input, input,
.svg-icon { .svg-icon {
color: #335eea; color: var(--color-primary);
} }
} }
} }
@ -290,8 +292,8 @@ export default {
justify-content: center; justify-content: center;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
background-color: rgba(51, 94, 234, 0.1); background-color: var(--color-primary-bg);
color: #335eea; color: var(--color-primary);
border-radius: 8px; border-radius: 8px;
margin-top: 24px; margin-top: 24px;
transition: 0.2s; transition: 0.2s;
@ -311,17 +313,19 @@ export default {
a { a {
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: rgba(0, 0, 0, 0.68); color: var(--color-text);
opacity: 0.68;
} }
} }
.notice { .notice {
width: 300px; width: 300px;
border-top: 1px solid rgba(0, 0, 0, 0.18); border-top: 1px solid rgba(128, 128, 128);
margin-top: 48px; margin-top: 48px;
padding-top: 12px; padding-top: 12px;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.48); color: var(--color-text);
opacity: 0.48;
} }
@keyframes loading { @keyframes loading {
@ -346,7 +350,7 @@ button.loading {
.loading span { .loading span {
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: #335eea; background-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
margin: 0 2px; margin: 0 2px;
animation: loading 1.4s infinite both; animation: loading 1.4s infinite both;

20
src/views/loginUsername.vue
Unescape View File

@ -107,6 +107,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.login { .login {
display: flex; display: flex;
color: var(--color-text);
} }
.title { .title {
@ -121,7 +122,7 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 8px; margin-bottom: 8px;
color: rgba(0, 0, 0, 0.78); opacity: 0.78;
} }
} }
@ -132,13 +133,13 @@ export default {
height: 48px; height: 48px;
border-radius: 11px; border-radius: 11px;
width: 326px; width: 326px;
background: #eaeffd; background: var(--color-primary-bg);
} }
.svg-icon { .svg-icon {
height: 22px; height: 22px;
width: 22px; width: 22px;
color: #335eea; color: var(--color-primary);
margin: { margin: {
left: 12px; left: 12px;
right: 8px; right: 8px;
@ -153,9 +154,10 @@ export default {
width: 115%; width: 115%;
font-weight: 600; font-weight: 600;
margin-top: -1px; margin-top: -1px;
color: #335eea; color: var(--color-primary);
&::placeholder { &::placeholder {
color: #335eeac4; color: var(--color-primary);
opacity: 0.78;
} }
} }
} }
@ -187,15 +189,15 @@ export default {
margin-left: 12px; margin-left: 12px;
} }
&:hover { &:hover {
background: #f5f5f7; background: var(--color-secondary-bg);
} }
} }
.user.active { .user.active {
transition: 0.2s; transition: 0.2s;
background: #eaeffd; background: var(--color-primary-bg);
.name { .nickname {
color: #335eea; color: var(--color-primary);
} }
} }
</style> </style>

8
src/views/mv.vue
Unescape View File

@ -127,19 +127,20 @@ export default {
.video-info { .video-info {
margin-top: 12px; margin-top: 12px;
color: var(--color-text);
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
} }
.artist { .artist {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
margin-top: 2px; margin-top: 2px;
font-weight: 600; font-weight: 600;
} }
.info { .info {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
margin-top: 12px; margin-top: 12px;
} }
} }
@ -149,7 +150,8 @@ export default {
.section-title { .section-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88); color: var(--color-text);
opacity: 0.88;
} }
} }
</style> </style>

1
src/views/next.vue
Unescape View File

@ -106,5 +106,6 @@ h1 {
margin-top: 36px; margin-top: 36px;
margin-bottom: 18px; margin-bottom: 18px;
cursor: default; cursor: default;
color: var(--color-text);
} }
</style> </style>

19
src/views/playlist.vue
Unescape View File

@ -27,7 +27,9 @@
> >
<a <a
v-else 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" target="blank"
>{{ playlist.creator.nickname }}</a >{{ playlist.creator.nickname }}</a
> >
@ -226,20 +228,24 @@ export default {
.title { .title {
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
color: var(--color-text);
} }
.artist { .artist {
font-size: 18px; font-size: 18px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
margin-top: 24px; margin-top: 24px;
} }
.date-and-count { .date-and-count {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
color: var(--color-text);
margin-top: 2px; margin-top: 2px;
} }
.description { .description {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
color: var(--color-text);
margin-top: 24px; margin-top: 24px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -247,8 +253,8 @@ export default {
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transition: color 0.3s; transition: opacity 0.3s;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
} }
} }
.buttons { .buttons {
@ -299,6 +305,7 @@ export default {
.user-info { .user-info {
h1 { h1 {
font-size: 42px; font-size: 42px;
color: var(--color-text);
.avatar { .avatar {
height: 44px; height: 44px;
margin-right: 12px; margin-right: 12px;

11
src/views/search.vue
Unescape View File

@ -192,15 +192,17 @@ export default {
h1 { h1 {
margin-top: -10px; margin-top: -10px;
margin-bottom: 0; margin-bottom: 0;
color: var(--color-text);
span { span {
color: rgba(0, 0, 0, 0.58); opacity: 0.58;
} }
} }
.section-title { .section-title {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
color: rgba(0, 0, 0, 0.88); opacity: 0.88;
color: var(--color-text);
margin-bottom: 16px; margin-bottom: 16px;
margin-top: 46px; margin-top: 46px;
} }
@ -219,6 +221,7 @@ h1 {
padding-right: 48px; padding-right: 48px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--color-text);
.artist { .artist {
display: flex; display: flex;
align-items: center; align-items: center;
@ -236,6 +239,7 @@ h1 {
.albums-list { .albums-list {
display: flex; display: flex;
color: var(--color-text);
.album { .album {
img { img {
height: 128px; height: 128px;
@ -249,7 +253,6 @@ h1 {
.name { .name {
margin-top: 6px; margin-top: 6px;
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.88);
font-size: 14px; font-size: 14px;
width: 128px; width: 128px;
display: -webkit-box; display: -webkit-box;
@ -259,7 +262,7 @@ h1 {
} }
.artist { .artist {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.68); opacity: 0.68;
} }
} }
} }

67
src/views/settings.vue
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save