Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

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

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

fix: songer page button bug 

* mv page add button
* Detach CSS Style
上级 0bbf3629
隐藏空白更改
内联 并排
Showing with 380 addition and 269 deletion
src/assets/css/base.css
浏览文件 @ d4ffd1a5
......@@ -12,3 +12,8 @@ a {
li {
list-style: none;
}
img {
border: 0 none;
image-rendering: optimizeQuality;
}
src/assets/css/coustom.css
浏览文件 @ d4ffd1a5
.arrow-btn {
/* 歌手列表 css */
.singer_list_txt {
margin-right: -20px;
overflow: hidden;
margin-bottom: 60px;
}
.singer_list_txt__item {
float: left;
width: 20%;
}
.singer_list_txt__link {
float: left;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 36px;
}
/* 伸缩按钮 */
.mod_slide_action {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_action {
position: absolute;
top: 0;
width: 50%;
height: 100%;
}
.slide_action__btn {
position: absolute;
bottom: 10%;
top: 50%;
margin-top: -54px;
width: 79px;
height: 108px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#14000000', endColorstr='#14000000');
background: url(#);
background: rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: none;
transition-property: opacity, transform;
transition-duration: 0.5s;
z-index: 2;
}
.arrow-btn-left {
.slide_action__btn--left {
transform: translateX(-100%);
}
.slide_action__btn--right {
transform: translateX(100%);
}
.mod_slide_box:hover .slide_action__btn {
opacity: 1;
visibility: none;
transform: translateX(0);
transition-property: opacity, transform, background, width;
transition-duration: 0.5s;
}
.slide_action--left,
.slide_action__btn--left {
left: 0;
}
.arrow-btn-right {
.slide_action--right,
.slide_action__btn--right {
right: 0;
}
.el-icon-arrow-left {
.slide_action__arrow {
position: absolute;
top: 50%;
margin-top: -20px;
width: 20px;
height: 39px;
}
.slide_action__arrow--left {
left: 29px;
background-position: -20px -120px;
}
.el-icon-arrow-right {
.slide_action__arrow--right {
right: 29px;
background-position: 0 -120px;
}
.slide_action__btn:hover {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#19000000', endColorstr='#19000000');
background: url(#);
background: rgba(0, 0, 0, 0.1);
}
.icon_txt {
font: 0/0 a;
}
/* mv 顶头标题 css */
.mod_part,
.mod_part_detail {
position: relative;
margin-bottom: 30px;
}
.part__hd,
.part_detail__hd {
overflow: hidden;
height: 60px;
}
.part__tit,
.part_detail__tit {
float: left;
font-size: 24px;
font-weight: 400;
line-height: 58px;
}
.el-icon-arrow {
/* mv 切换按钮 css */
.part_switch {
position: absolute;
top: 50%;
margin-top: -20px;
width: 20px;
height: 39px;
top: 7px;
right: 0;
height: 40px;
line-height: 40px;
border-radius: 2px;
font-size: 0;
}
.part_switch__item {
display: inline-block;
padding: 0 16px;
height: 38px;
position: relative;
font-size: 14px;
border-width: 1px;
border-style: solid;
}
.part_switch__item--left {
right: -1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-color: #c9c9c9;
}
.part_switch__item--right {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-color: #c9c9c9;
}
.part_switch__item--select,
.part_switch__item--select:hover {
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
z-index: 2;
}
.part_switch__item {
position: relative;
display: inline-block;
padding: 0 16px;
height: 38px;
position: relative;
font-size: 14px;
border-width: 1px;
border-style: solid;
}
/* MV 列表 css */
.mv_list__list {
margin-right: -20px;
zoom: 1;
}
.mv_list__item {
float: left;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
.mv_list__item_box {
position: relative;
margin-right: 20px;
}
.mv_list__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 56.5476%;
margin-bottom: 15px;
}
.mv_list__pic {
transform: scale(1);
transition: transform 0.75s;
}
.mv_list__pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mv_list__desc,
.mv_list__singer,
.mv_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mv_list__title {
font-weight: 400;
zoom: 1;
}
.mv_list__desc,
.mv_list__info,
.mv_list__singer,
.mv_list__singer a {
color: #999;
}
.mv_list__singer {
height: 24px;
line-height: 1.5;
}
.mv_list__desc,
.mv_list__singer,
.mv_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 1.5;
font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
}
.mv_list__desc,
.mv_list__info,
.mv_list__singer,
.mv_list__singer a {
color: #999;
}
.mv_list__info {
line-height: 18px;
height: 20px;
}
.mv_list__listen {
margin-right: 10px;
}
.mv_list__listen_icon {
display: inline-block;
width: 19px;
height: 12px;
background-position: -180px -20px;
margin-right: 5px;
vertical-align: -1px;
}
/* 图标背景 */
.sprite,
.sprite_before::before {
background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=85678e8f28c7b4bcad5c209b21b7e3b3);
}
src/views/musicLibrary/MV.vue
浏览文件 @ d4ffd1a5
<template>
<div class="main" v-loading="mvLoading">
<TypeSelectBar>
<TypeSelectSubBar
:selectId="selectArea"
:items="areas"
@selectId="areaSelect"/>
<TypeSelectSubBar
:selectId="selectType"
:items="types"
@selectId="typeSelect"/>
</TypeSelectBar>
<div class="mod_slide_box" style="position: relative;">
<div class="main" style="z-index: 2" v-loading="mvLoading">
<TypeSelectBar>
<TypeSelectSubBar
:selectId="selectArea"
:items="areas"
@selectId="areaSelect"/>
<TypeSelectSubBar
:selectId="selectType"
:items="types"
@selectId="typeSelect"/>
</TypeSelectBar>
<div class="mod_part_detail">
<div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2>
<div class="part_switch" aria-label="排列方式">
<a
href="javascript:;"
class="part_switch__item part_switch__item--left"
:class="order == orders.NEW.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.NEW.dataId)">{{orders.NEW.name}}</a>
<a
href="javascript:;"
class="part_switch__item part_switch__item--right"
:class="order == orders.HOT.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.HOT.dataId)">{{orders.HOT.name}}</a>
<div class="mod_part_detail">
<div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2>
<div class="part_switch" aria-label="排列方式">
<a
href="javascript:;"
class="part_switch__item part_switch__item--left"
:class="order == orders.NEW.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.NEW.dataId)">{{orders.NEW.name}}</a>
<a
href="javascript:;"
class="part_switch__item part_switch__item--right"
:class="order == orders.HOT.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.HOT.dataId)">{{orders.HOT.name}}</a>
</div>
</div>
</div>
<div class="mod_mv">
<ul class="mv_list__list" id="mv_list">
<div class="mod_mv">
<ul class="mv_list__list" id="mv_list">
<li
class="mv_list__item"
v-for="item in mvs" :key='item.id'>
<div class="mv_list__item_box" style="visibility: visible;">
<a href="javascript:;" class="mv_list__cover mod_cover js_mv" :title="item.name" hidefocus="true">
<img
style="display: block; visibility: visible;"
class="mv_list__pic"
:src="item.cover"
:alt="item.name">
<i class="mod_cover__icon_play"></i>
</a>
<h3 class="mv_list__title">
<a href="javascript:;" class="js_mv" :title="item.name">{{item.name}}</a>
</h3>
<div class="mv_list__singer" title="5AM">
<a href="javascript:;" class="js_singer" :title="item.artistName">{{item.artistName}}</a>
</div>
<div class="mv_list__info">
<span class="mv_list__listen">
<i class="mv_list__listen_icon sprite"></i>{{processCount(item.playCount)}}
</span>
<li
class="mv_list__item"
v-for="item in mvs" :key='item.id'>
<div class="mv_list__item_box" style="visibility: visible;">
<a href="javascript:;" class="mv_list__cover mod_cover js_mv" :title="item.name" hidefocus="true">
<img
style="display: block; visibility: visible;"
class="mv_list__pic"
:src="item.cover"
:alt="item.name">
<i class="mod_cover__icon_play"></i>
</a>
<h3 class="mv_list__title">
<a href="javascript:;" class="js_mv" :title="item.name">{{item.name}}</a>
</h3>
<div class="mv_list__singer" title="5AM">
<a href="javascript:;" class="js_singer" :title="item.artistName">{{item.artistName}}</a>
</div>
<div class="mv_list__info">
<span class="mv_list__listen">
<i class="mv_list__listen_icon sprite"></i>{{processCount(item.playCount)}}
</span>
</div>
</div>
</div>
</li>
</li>
</ul>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="mod_slide_action">
<div class="slide_action slide_action--left">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--left js_jump"
data-p="prev"
tabindex="-1"
@click="prevPage()">
<i class="icon_txt">上一页</i><i class="slide_action__arrow slide_action__arrow--left sprite"></i>
</a>
</div>
<div class="slide_action slide_action--right">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--right js_jump"
data-p="next"
tabindex="-1"
@click="nextPage()">
<i class="icon_txt">下一页</i><i class="slide_action__arrow slide_action__arrow--right sprite"></i>
</a>
</div>
</div>
</div>
</template>
......@@ -75,6 +99,7 @@ export default {
return {
mvLoading: true,
page: 1,
more: true,
order: mvOrder.NEW.dataId,
orders: mvOrder,
selectArea: mvArea.ALL.dataId,
......@@ -110,7 +135,19 @@ export default {
},
processCount(count) {
return processCount(count)
}
},
nextPage() {
if (this.more == true) {
this.page++;
this.updateMv();
}
},
prevPage() {
if (this.page > 1){
this.page--;
this.updateMv();
}
},
},
components: {
TypeSelectBar,
......@@ -135,149 +172,7 @@ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr
padding: 0;
}
.mod_part, .mod_part_detail {
position: relative;
margin-bottom: 30px;
}
.part__hd, .part_detail__hd {
overflow: hidden;
height: 60px;
}
.part__tit, .part_detail__tit {
float: left;
font-size: 24px;
font-weight: 400;
line-height: 58px;
}
.part_switch {
position: absolute;
top: 7px;
right: 0;
height: 40px;
line-height: 40px;
border-radius: 2px;
font-size: 0;
}
.part_switch__item {
display: inline-block;
padding: 0 16px;
height: 38px;
position: relative;
font-size: 14px;
border-width: 1px;
border-style: solid;
}
.part_switch__item--left {
right: -1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-color: #c9c9c9;
}
.part_switch__item--right {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-color: #c9c9c9;
}
.part_switch__item--select, .part_switch__item--select:hover {
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
z-index: 2;
}
.part_switch__item {
position: relative;
display: inline-block;
padding: 0 16px;
height: 38px;
position: relative;
font-size: 14px;
border-width: 1px;
border-style: solid;
}
.mv_list__list {
margin-right: -20px;
zoom: 1;
}
.mv_list__item {
float: left;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
.mv_list__item_box {
position: relative;
margin-right: 20px;
}
.mv_list__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 56.5476%;
margin-bottom: 15px;
}
.mv_list__pic {
transform: scale(1);
transition: transform .75s;
}
.mv_list__pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
border: 0 none;
image-rendering: optimizeQuality;
}
.mv_list__desc, .mv_list__singer, .mv_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mv_list__title {
font-weight: 400;
zoom: 1;
padding-bottom: 44px;
}
.mv_list__desc, .mv_list__info, .mv_list__singer, .mv_list__singer a {
color: #999;
}
.mv_list__singer {
height: 24px;
line-height: 1.5;
}
.mv_list__desc, .mv_list__singer, .mv_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 1.5;
font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;
}
.mv_list__desc, .mv_list__info, .mv_list__singer, .mv_list__singer a {
color: #999;
}
.mv_list__info {
line-height: 18px;
height: 20px;
}
.mv_list__listen {
margin-right: 10px;
}
.mv_list__listen_icon {
display: inline-block;
width: 19px;
height: 12px;
background-position: -180px -20px;
margin-right: 5px;
vertical-align: -1px;
}
.sprite, .sprite_before::before {
background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=85678e8f28c7b4bcad5c209b21b7e3b3);
}
</style>
src/views/musicLibrary/Songers.vue
浏览文件 @ d4ffd1a5
<template>
<div class='main' v-loading='loading'>
<div class="mod_slide_box" style="position: relative;">
<div class='main' v-loading='loading'>
<TypeSelectBar>
<TypeSelectSubBar
:selectId="initial"
:items="initials"
@selectId="initialClick"/>
<TypeSelectSubBar
:selectId="type"
:items="types"
@selectId="typeClick"/>
<TypeSelectSubBar
:selectId="area"
:items="areas"
@selectId="areaClick"/>
</TypeSelectBar>
<TypeSelectBar>
<TypeSelectSubBar
:selectId="initial"
:items="initials"
@selectId="initialClick"/>
<TypeSelectSubBar
:selectId="type"
:items="types"
@selectId="typeClick"/>
<TypeSelectSubBar
:selectId="area"
:items="areas"
@selectId="areaClick"/>
</TypeSelectBar>
<ul class="singer_list_txt" v-loading='loading'>
<li class="singer_list_txt__item" v-for="item in artists" :key="item.id">
<router-link href="javascript:;"
class="singer_list_txt__link js_singer"
:to="{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}"
title="item.name">{{item.name}}</router-link>
</li>
</ul>
<div class='arrow-btn arrow-btn-left' >
<a href="javascript:;" @click="prevPage()" ><i class='el-icon-arrow-left el-icon-arrow'></i></a>
</div>
<div class='arrow-btn arrow-btn-right' >
<a href="javascript:;" @click="nextPage()" ><i class='el-icon-arrow-right el-icon-arrow'></i></a>
<ul class="singer_list_txt" v-loading='loading'>
<li class="singer_list_txt__item" v-for="item in artists" :key="item.id">
<router-link href="javascript:;"
class="singer_list_txt__link js_singer"
:to="{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}"
:title="item.name">{{item.name}}</router-link>
</li>
</ul>
</div>
<div class="mod_slide_action">
<div class="slide_action slide_action--left">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--left js_jump"
data-p="prev"
tabindex="-1"
@click="prevPage()">
<i class="icon_txt">上一页</i><i class="slide_action__arrow slide_action__arrow--left sprite"></i>
</a>
</div>
<div class="slide_action slide_action--right">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--right js_jump"
data-p="next"
tabindex="-1"
@click="nextPage()">
<i class="icon_txt">下一页</i><i class="slide_action__arrow slide_action__arrow--right sprite"></i>
</a>
</div>
</div>
</div>
</template>
......@@ -112,39 +129,14 @@ export default {
</script>
<style scoped>
.el-icon-arrow {
top: 20%;
}
.main {
z-index: 2;
}
.main,
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.singer_list_txt {
margin-right: -20px;
overflow: hidden;
margin-bottom: 60px;
}
.singer_list_txt__item {
float: left;
width: 20%;
}
.singer_list_txt__link {
float: left;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 36px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或