Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 e1f478c7 编写于 作者: Z Zachary
浏览文件
操作

fix: home page top text display 

* change css -> scss
上级 a511243d
隐藏空白更改
内联 并排
Showing with 260 addition and 271 deletion
src/App.vue
浏览文件 @ e1f478c7
...@@ -19,9 +19,6 @@ export default { ...@@ -19,9 +19,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./assets/css/base.css";
@import "./assets/css/fakeqqmusic.css";
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
......
src/api/toplist.js
浏览文件 @ e1f478c7
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
import { requset } from "./base"; import { requset } from "./base";
export const toplistTypes = { export const toplistTypes = {
NEW: 3779629, 0: { name: "新歌榜", id: 3779629 },
SOAR: 19723756, 1: { name: "飙升榜", id: 19723756 },
ORIGINAL: 2884035, 2: { name: "原创榜", id: 2884035 },
HOT: 3778678, 3: { name: "热歌榜", id: 3778678 },
RB: 991319590 4: { name: "R&B榜", id: 991319590 }
}; };
export const getTopList = toplistType => export const getTopList = toplistType =>
......
src/assets/css/fakeqqmusic.css → src/assets/css/fakeqqmusic.scss
浏览文件 @ e1f478c7
$green: #31c27c;
$deepgreen: #2caf6f;
$white: #fff;
$black: #000;
.mod_btn { .mod_btn {
border: 1px solid #c9c9c9; border: 1px solid #c9c9c9;
color: #000; color: $black;
} }
.mod_btn_green { .mod_btn_green {
border: 1px solid #31c27c; border: 1px solid $green;
background-color: #31c27c; background-color: $green;
color: #fff; color: $white;
} }
.mod_btn_green:hover { .mod_btn_green:hover {
background-color: #2caf6f; background-color: $deepgreen;
border-color: #2caf6f; border-color: $deepgreen;
color: #fff; color: $white;
} }
.mod_btn, .mod_btn,
.mod_btn_green { .mod_btn_green {
...@@ -145,29 +150,32 @@ ...@@ -145,29 +150,32 @@
.list_menu__icon_delete { .list_menu__icon_delete {
background-position: 0 -160px; background-position: 0 -160px;
} }
.list_menu__item:hover .list_menu__icon_play {
background-position: -40px 0; .list_menu__item:hover {
} .list_menu__icon_play {
.list_menu__item:hover .list_menu__icon_pause { background-position: -40px 0;
background-position: -40px -200px; }
} .list_menu__icon_pause {
.list_menu__item:hover .list_menu__icon_share { background-position: -40px -200px;
background-position: -40px -40px; }
} .list_menu__icon_share {
.list_menu__item:hover .list_menu__icon_add { background-position: -40px -40px;
background-position: -40px -80px; }
} .list_menu__icon_add {
.list_menu__item:hover .list_menu__icon_down { background-position: -40px -80px;
background-position: -40px -120px; }
} .list_menu__icon_down {
.list_menu__item:hover .list_menu__icon_down_vip { background-position: -40px -120px;
background-position: -40px -280px; }
} .list_menu__icon_down_vip {
.list_menu__item:hover .list_menu__icon_edit { background-position: -40px -280px;
background-position: -40px -240px; }
} .list_menu__icon_edit {
.list_menu__item:hover .list_menu__icon_delete { background-position: -40px -240px;
background-position: -40px -160px; }
.list_menu__icon_delete {
background-position: -40px -160px;
}
} }
/* ************** /* **************
...@@ -230,12 +238,14 @@ ...@@ -230,12 +238,14 @@
.slide_action__btn--right { .slide_action__btn--right {
transform: translateX(100%); transform: translateX(100%);
} }
.mod_slide_box:hover .slide_action__btn { .mod_slide_box:hover {
opacity: 1; .slide_action__btn {
visibility: none; opacity: 1;
transform: translateX(0); visibility: none;
transition-property: opacity, transform, background, width; transform: translateX(0);
transition-duration: 0.5s; transition-property: opacity, transform, background, width;
transition-duration: 0.5s;
}
} }
.slide_action--left, .slide_action--left,
.slide_action__btn--left { .slide_action__btn--left {
...@@ -265,9 +275,6 @@ ...@@ -265,9 +275,6 @@
background: url(#); background: url(#);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
.icon_txt {
font: 0/0 a;
}
/* 切换小圆点 */ /* 切换小圆点 */
.mod_slide_switch { .mod_slide_switch {
...@@ -359,9 +366,9 @@ ...@@ -359,9 +366,9 @@
} }
.part_switch__item--select, .part_switch__item--select,
.part_switch__item--select:hover { .part_switch__item--select:hover {
background-color: #31c27c; background-color: $green;
color: #fff; color: $white;
border-color: #31c27c; border-color: $green;
z-index: 2; z-index: 2;
} }
.part_switch__item { .part_switch__item {
...@@ -468,6 +475,83 @@ ...@@ -468,6 +475,83 @@
background-image: url(../img/icon_sprite.png); background-image: url(../img/icon_sprite.png);
} }
/*
*
*
* 首页 top 榜 */
.toplist_main {
margin: 0 auto;
text-align: center;
max-width: 1400px;
}
.toplist__list {
font-size: 0;
margin-right: -20px;
color: $white;
font-size: 14px;
}
.toplist__item {
display: inline-block;
width: 18%;
.mod_cover__icon_play {
top: 114px;
margin-top: 0;
margin-bottom: 0;
z-index: 2;
}
}
.toplist__box {
position: relative;
margin-right: 20px;
height: 500px;
overflow: hidden;
}
#toplist__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 600px;
}
.toplist__item .toplist__bg {
transform: scale(1);
transition: transform 0.75s;
}
.toplist__hd {
position: absolute;
top: 50px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
font-size: 100%;
color: $black;
}
.toplist__hd::before {
content: "";
display: block;
width: 66px;
height: 22px;
margin: 0 auto 9px;
}
.toplist__tit {
height: 36px;
line-height: 1;
font-size: 26px;
color: $white;
font-weight: 400;
}
.toplist__line {
position: absolute;
left: 50%;
top: 148px;
margin-left: -18px;
width: 36px;
height: 2px;
background: $white;
}
/* /*
********** **********
* Ranking page */ * Ranking page */
...@@ -501,8 +585,8 @@ ...@@ -501,8 +585,8 @@
} }
.toplist_nav__link--current, .toplist_nav__link--current,
.toplist_nav__link--current:hover { .toplist_nav__link--current:hover {
background-color: #31c27c; background-color: $green;
color: #fff; color: $white;
} }
/*左上*/ /*左上*/
...@@ -584,6 +668,18 @@ ...@@ -584,6 +668,18 @@
clear: both; clear: both;
font-size: 0; font-size: 0;
overflow: hidden; overflow: hidden;
.mod_list_menu {
pointer-events: none;
}
.mod_list_menu {
position: absolute;
right: -10px;
right: -9999px\9;
top: 50%;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
} }
.songlist__item--even { .songlist__item--even {
background-color: rgba(0, 0, 0, 0.01); background-color: rgba(0, 0, 0, 0.01);
...@@ -648,6 +744,9 @@ ...@@ -648,6 +744,9 @@
margin-right: auto; margin-right: auto;
background-image: url(../img/icon_rank.png); background-image: url(../img/icon_rank.png);
} }
.icon_txt {
font: 0/0 a;
}
.songlist__songname { .songlist__songname {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -668,9 +767,6 @@ ...@@ -668,9 +767,6 @@
vertical-align: middle; vertical-align: middle;
margin-right: 6px; margin-right: 6px;
} }
.icon_txt {
font: 0/0 a;
}
.songlist__item .songlist__icon:nth-child(2) + .songlist__songname_txt { .songlist__item .songlist__icon:nth-child(2) + .songlist__songname_txt {
max-width: 62%; max-width: 62%;
box-sizing: border-box; box-sizing: border-box;
...@@ -694,19 +790,7 @@ ...@@ -694,19 +790,7 @@
margin-right: 20px; margin-right: 20px;
margin-top: 5px; margin-top: 5px;
} }
.songlist__item .mod_list_menu {
pointer-events: none;
}
.songlist__item .mod_list_menu {
position: absolute;
right: -10px;
right: -9999px\9;
top: 50%;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.songlist__item--current .mod_list_menu, .songlist__item--current .mod_list_menu,
.songlist__item:hover .mod_list_menu { .songlist__item:hover .mod_list_menu {
opacity: 1; opacity: 1;
...@@ -736,42 +820,67 @@ ...@@ -736,42 +820,67 @@
.mod_playlist { .mod_playlist {
overflow: hidden; overflow: hidden;
font-size: 0; font-size: 0;
} .playlist__list {
.mod_playlist .playlist__list { margin-right: -20px;
margin-right: -20px; }
.playlist__item {
display: inline-block;
width: 20%;
padding-bottom: 44px;
overflow: hidden;
font-size: 14px;
vertical-align: top;
}
.playlist__item_box {
position: relative;
margin-right: 20px;
text-align: left;
}
.playlist__title {
overflow: hidden;
}
.playlist__title_txt {
float: left;
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
max-height: 44px;
}
.playlist__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 100%;
margin-bottom: 15px;
}
.playlist__pic {
height: 100%;
object-fit: cover;
}
.playlist__pic {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.playlist__pic {
transform: scale(1) translateZ(0);
transition: transform 0.75s;
}
.playlist__author,
.playlist__author a,
.playlist__other {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
}
} }
.mod_playlist .playlist__item {
display: inline-block;
width: 20%;
padding-bottom: 44px;
overflow: hidden;
font-size: 14px;
vertical-align: top;
}
.mod_playlist .playlist__item_box {
position: relative;
margin-right: 20px;
text-align: left;
}
.mod_playlist .playlist__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 100%;
margin-bottom: 15px;
}
.mod_playlist .playlist__pic {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.mod_playlist .playlist__pic {
transform: scale(1) translateZ(0);
transition: transform 0.75s;
}
.mod_playlist .playlist__cover:hover .playlist__pic { .mod_playlist .playlist__cover:hover .playlist__pic {
transform: scale(1.07) translateZ(0); transform: scale(1.07) translateZ(0);
transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1); transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
...@@ -804,19 +913,6 @@ img .playlist__pic { ...@@ -804,19 +913,6 @@ img .playlist__pic {
width: 250px; width: 250px;
} }
.mod_playlist .playlist__title {
overflow: hidden;
}
.mod_playlist .playlist__author,
.mod_playlist .playlist__author a,
.mod_playlist .playlist__other {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
}
/* /*
* *
* *
...@@ -896,14 +992,13 @@ img .playlist__pic { ...@@ -896,14 +992,13 @@ img .playlist__pic {
position: absolute; position: absolute;
bottom: 23px; bottom: 23px;
font-size: 0; font-size: 0;
} .mod_btn,
.mod_btn_green {
.data__actions .mod_btn, min-width: 122px;
.data__actions .mod_btn_green { text-align: center;
min-width: 122px; padding: 0 18px;
text-align: center; font-family: 微软雅黑;
padding: 0 18px; }
font-family: 微软雅黑;
} }
.detail_layout { .detail_layout {
...@@ -921,6 +1016,31 @@ img .playlist__pic { ...@@ -921,6 +1016,31 @@ img .playlist__pic {
width: 290px; width: 290px;
margin-right: -343px; margin-right: -343px;
padding-bottom: 20px; padding-bottom: 20px;
.playlist__item {
width: 33.333333%;
padding-bottom: 14px;
}
.mv_list__item_box {
margin-right: 0;
}
.mv_list__cover,
.playlist__cover {
margin-bottom: 4px;
}
.playlist__cover:hover .playlist__pic,
.playlist__pic {
-webkit-transform: none;
-webkit-transition: none;
transform: none;
transition: none;
}
.mv_list__singer,
.mv_list__title,
.playlist__title,
.playlist__title_txt {
line-height: 1.5;
margin-bottom: 0;
}
} }
.other_part { .other_part {
overflow: hidden; overflow: hidden;
...@@ -931,32 +1051,6 @@ img .playlist__pic { ...@@ -931,32 +1051,6 @@ img .playlist__pic {
font-weight: 400; font-weight: 400;
line-height: 46px; line-height: 46px;
} }
.mod_playlist {
overflow: hidden;
font-size: 0;
}
.mod_playlist .playlist__list {
margin-right: -20px;
}
.mod_playlist .playlist__item {
display: inline-block;
width: 20%;
padding-bottom: 44px;
overflow: hidden;
font-size: 14px;
vertical-align: top;
}
.mod_playlist .playlist__item_box {
position: relative;
margin-right: 20px;
}
.mod_playlist .playlist__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 100%;
margin-bottom: 15px;
}
.data__cover_mask { .data__cover_mask {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -967,65 +1061,9 @@ img .playlist__pic { ...@@ -967,65 +1061,9 @@ img .playlist__pic {
0 0 no-repeat; 0 0 no-repeat;
pointer-events: none; pointer-events: none;
} }
.mod_playlist .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist .playlist__pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mod_playlist .playlist__title {
overflow: hidden;
}
.mod_playlist .playlist__title_txt {
float: left;
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
max-height: 44px;
}
.mod_playlist .playlist__author,
.mod_playlist .playlist__author a,
.mod_playlist .playlist__other {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
}
.mod_mv_list { .mod_mv_list {
overflow: hidden; overflow: hidden;
} }
.detail_layout__other .playlist__item {
width: 33.333333%;
padding-bottom: 14px;
}
.detail_layout__other .mv_list__item_box {
margin-right: 0;
}
.detail_layout__other .mv_list__cover,
.detail_layout__other .playlist__cover {
margin-bottom: 4px;
}
.detail_layout__other .playlist__cover:hover .playlist__pic,
.detail_layout__other .playlist__pic {
-webkit-transform: none;
-webkit-transition: none;
transform: none;
transition: none;
}
.detail_layout__other .mv_list__singer,
.detail_layout__other .mv_list__title,
.detail_layout__other .playlist__title,
.detail_layout__other .playlist__title_txt {
line-height: 1.5;
margin-bottom: 0;
}
.mod_popup_tips { .mod_popup_tips {
position: fixed; position: fixed;
...@@ -1048,7 +1086,7 @@ img .playlist__pic { ...@@ -1048,7 +1086,7 @@ img .playlist__pic {
} }
.popup_tips__tit { .popup_tips__tit {
font-size: 14px; font-size: 14px;
color: #fff; color: $white;
font-weight: 400; font-weight: 400;
} }
...@@ -1145,7 +1183,7 @@ img .playlist__pic { ...@@ -1145,7 +1183,7 @@ img .playlist__pic {
top: 364px; top: 364px;
right: 303px; right: 303px;
width: 580px; width: 580px;
background: #fff; background: $white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
......
src/components/common/HomeTop.vue
浏览文件 @ e1f478c7
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<i class="toplist__line"></i> <i class="toplist__line"></i>
<h3 class="toplist__hd"> <h3 class="toplist__hd">
<a href="javascript:;" class="toplist__tit" <a href="javascript:;" class="toplist__tit"
>{{ toplist.name }} >{{ toplistTypes[idx].name }}
</a> </a>
</h3> </h3>
...@@ -65,11 +65,12 @@ export default { ...@@ -65,11 +65,12 @@ export default {
data() { data() {
return { return {
toplists: [], toplists: [],
toplistTypes,
}; };
}, },
mounted() { mounted() {
for (let key in toplistTypes) { for (let key in toplistTypes) {
this.updateTopList(toplistTypes[key]); this.updateTopList(toplistTypes[key].id);
} }
}, },
methods: { methods: {
...@@ -91,41 +92,13 @@ export default { ...@@ -91,41 +92,13 @@ export default {
</script> </script>
<style scoped> <style scoped>
.list { ul,
font-size: 31px;
}
.toplist_main {
margin: 0 auto;
text-align: center;
max-width: 1400px;
}
.toplist__list {
font-size: 0;
margin-right: -20px;
color: #fff;
font-size: 14px;
}
.toplist__item {
display: inline-block;
width: 18%;
}
.toplist__box {
position: relative;
margin-right: 20px;
height: 500px;
overflow: hidden;
}
li { li {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#toplist__bg { .list {
position: absolute; font-size: 31px;
top: 0;
left: 0;
right: 0;
height: 600px;
} }
.toplist__bg0 { .toplist__bg0 {
background-image: linear-gradient(#e66754, #8888e5); background-image: linear-gradient(#e66754, #8888e5);
...@@ -143,42 +116,13 @@ li { ...@@ -143,42 +116,13 @@ li {
background-image: linear-gradient(#985632, #369852); background-image: linear-gradient(#985632, #369852);
} }
.toplist__item .toplist__bg {
transform: scale(1);
transition: transform 0.75s;
}
.toplist__hd {
position: absolute;
top: 50px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
font-size: 100%;
color: #000;
}
.toplist__tit {
height: 36px;
line-height: 1;
font-size: 26px;
color: #fff;
font-weight: 400;
}
.toplist__hd::before {
content: "";
display: block;
width: 66px;
height: 22px;
margin: 0 auto 9px;
background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=c7310a1eb12fc9fce032314be79ad579);
background-position: 0 -300px;
}
.toplist__songlist { .toplist__songlist {
position: absolute; position: absolute;
top: 188px; top: 188px;
left: 0px; left: 30px;
right: 300px; right: 30px;
white-space: nowrap; white-space: nowrap;
text-align: left;
} }
.toplist__songlist a { .toplist__songlist a {
color: #fff; color: #fff;
...@@ -194,6 +138,14 @@ li { ...@@ -194,6 +138,14 @@ li {
top: 0; top: 0;
left: 0; left: 0;
} }
.toplist__songname {
overflow: hidden;
text-overflow: ellipsis;
}
.toplist__artist {
overflow: hidden;
text-overflow: ellipsis;
}
.target-list:hover .arrow-btn { .target-list:hover .arrow-btn {
opacity: 1; opacity: 1;
......
src/main.js
浏览文件 @ e1f478c7
...@@ -6,6 +6,8 @@ import store from "./store"; ...@@ -6,6 +6,8 @@ import store from "./store";
import ElementPlus from "element-plus"; import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css"; import "element-plus/lib/theme-chalk/index.css";
import "@/assets/css/base.css";
import "@/assets/css/fakeqqmusic.scss";
createApp(App) createApp(App)
.use(store) .use(store)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或