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 { ...@@ -12,3 +12,8 @@ a {
li { li {
list-style: none; 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; position: absolute;
bottom: 10%; top: 50%;
margin-top: -54px; margin-top: -54px;
width: 79px; width: 79px;
height: 108px; height: 108px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#14000000', endColorstr='#14000000');
background: url(#);
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: none;
transition-property: opacity, transform; transition-property: opacity, transform;
transition-duration: 0.5s; transition-duration: 0.5s;
z-index: 2; z-index: 2;
} }
.slide_action__btn--left {
.arrow-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; left: 0;
} }
.slide_action--right,
.arrow-btn-right { .slide_action__btn--right {
right: 0; right: 0;
} }
.slide_action__arrow {
.el-icon-arrow-left { position: absolute;
top: 50%;
margin-top: -20px;
width: 20px;
height: 39px;
}
.slide_action__arrow--left {
left: 29px; left: 29px;
background-position: -20px -120px; background-position: -20px -120px;
} }
.slide_action__arrow--right {
.el-icon-arrow-right {
right: 29px; right: 29px;
background-position: 0 -120px; 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; position: absolute;
top: 50%; top: 7px;
margin-top: -20px; right: 0;
width: 20px; height: 40px;
height: 39px; 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> <template>
<div class="main" v-loading="mvLoading"> <div class="mod_slide_box" style="position: relative;">
<TypeSelectBar> <div class="main" style="z-index: 2" v-loading="mvLoading">
<TypeSelectSubBar <TypeSelectBar>
:selectId="selectArea" <TypeSelectSubBar
:items="areas" :selectId="selectArea"
@selectId="areaSelect"/> :items="areas"
<TypeSelectSubBar @selectId="areaSelect"/>
:selectId="selectType" <TypeSelectSubBar
:items="types" :selectId="selectType"
@selectId="typeSelect"/> :items="types"
</TypeSelectBar> @selectId="typeSelect"/>
</TypeSelectBar>
<div class="mod_part_detail"> <div class="mod_part_detail">
<div class="part_detail__hd"> <div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2> <h2 class="part_detail__tit js_lib_title">全部MV</h2>
<div class="part_switch" aria-label="排列方式"> <div class="part_switch" aria-label="排列方式">
<a <a
href="javascript:;" href="javascript:;"
class="part_switch__item part_switch__item--left" class="part_switch__item part_switch__item--left"
:class="order == orders.NEW.dataId ? 'part_switch__item--select':''" :class="order == orders.NEW.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.NEW.dataId)">{{orders.NEW.name}}</a> @click="switchOrder(orders.NEW.dataId)">{{orders.NEW.name}}</a>
<a <a
href="javascript:;" href="javascript:;"
class="part_switch__item part_switch__item--right" class="part_switch__item part_switch__item--right"
:class="order == orders.HOT.dataId ? 'part_switch__item--select':''" :class="order == orders.HOT.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.HOT.dataId)">{{orders.HOT.name}}</a> @click="switchOrder(orders.HOT.dataId)">{{orders.HOT.name}}</a>
</div>
</div> </div>
</div> <div class="mod_mv">
<div class="mod_mv"> <ul class="mv_list__list" id="mv_list">
<ul class="mv_list__list" id="mv_list">
<li <li
class="mv_list__item" class="mv_list__item"
v-for="item in mvs" :key='item.id'> v-for="item in mvs" :key='item.id'>
<div class="mv_list__item_box" style="visibility: visible;"> <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"> <a href="javascript:;" class="mv_list__cover mod_cover js_mv" :title="item.name" hidefocus="true">
<img <img
style="display: block; visibility: visible;" style="display: block; visibility: visible;"
class="mv_list__pic" class="mv_list__pic"
:src="item.cover" :src="item.cover"
:alt="item.name"> :alt="item.name">
<i class="mod_cover__icon_play"></i> <i class="mod_cover__icon_play"></i>
</a> </a>
<h3 class="mv_list__title"> <h3 class="mv_list__title">
<a href="javascript:;" class="js_mv" :title="item.name">{{item.name}}</a> <a href="javascript:;" class="js_mv" :title="item.name">{{item.name}}</a>
</h3> </h3>
<div class="mv_list__singer" title="5AM"> <div class="mv_list__singer" title="5AM">
<a href="javascript:;" class="js_singer" :title="item.artistName">{{item.artistName}}</a> <a href="javascript:;" class="js_singer" :title="item.artistName">{{item.artistName}}</a>
</div> </div>
<div class="mv_list__info"> <div class="mv_list__info">
<span class="mv_list__listen"> <span class="mv_list__listen">
<i class="mv_list__listen_icon sprite"></i>{{processCount(item.playCount)}} <i class="mv_list__listen_icon sprite"></i>{{processCount(item.playCount)}}
</span> </span>
</div>
</div> </div>
</div> </li>
</li>
</ul> </ul>
</div> </div>
</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> </div>
</template> </template>
...@@ -75,6 +99,7 @@ export default { ...@@ -75,6 +99,7 @@ export default {
return { return {
mvLoading: true, mvLoading: true,
page: 1, page: 1,
more: true,
order: mvOrder.NEW.dataId, order: mvOrder.NEW.dataId,
orders: mvOrder, orders: mvOrder,
selectArea: mvArea.ALL.dataId, selectArea: mvArea.ALL.dataId,
...@@ -110,7 +135,19 @@ export default { ...@@ -110,7 +135,19 @@ export default {
}, },
processCount(count) { processCount(count) {
return processCount(count) return processCount(count)
} },
nextPage() {
if (this.more == true) {
this.page++;
this.updateMv();
}
},
prevPage() {
if (this.page > 1){
this.page--;
this.updateMv();
}
},
}, },
components: { components: {
TypeSelectBar, TypeSelectBar,
...@@ -135,149 +172,7 @@ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr ...@@ -135,149 +172,7 @@ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr
padding: 0; 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 { .mv_list__item {
float: left; padding-bottom: 44px;
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;
} }
.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> </style>
src/views/musicLibrary/Songers.vue
浏览文件 @ d4ffd1a5
<template> <template>
<div class='main' v-loading='loading'> <div class="mod_slide_box" style="position: relative;">
<div class='main' v-loading='loading'>
<TypeSelectBar> <TypeSelectBar>
<TypeSelectSubBar <TypeSelectSubBar
:selectId="initial" :selectId="initial"
:items="initials" :items="initials"
@selectId="initialClick"/> @selectId="initialClick"/>
<TypeSelectSubBar <TypeSelectSubBar
:selectId="type" :selectId="type"
:items="types" :items="types"
@selectId="typeClick"/> @selectId="typeClick"/>
<TypeSelectSubBar <TypeSelectSubBar
:selectId="area" :selectId="area"
:items="areas" :items="areas"
@selectId="areaClick"/> @selectId="areaClick"/>
</TypeSelectBar> </TypeSelectBar>
<ul class="singer_list_txt" v-loading='loading'> <ul class="singer_list_txt" v-loading='loading'>
<li class="singer_list_txt__item" v-for="item in artists" :key="item.id"> <li class="singer_list_txt__item" v-for="item in artists" :key="item.id">
<router-link href="javascript:;" <router-link href="javascript:;"
class="singer_list_txt__link js_singer" class="singer_list_txt__link js_singer"
:to="{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}" :to="{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}"
title="item.name">{{item.name}}</router-link> :title="item.name">{{item.name}}</router-link>
</li> </li>
</ul> </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>
</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> </div>
</template> </template>
...@@ -112,39 +129,14 @@ export default { ...@@ -112,39 +129,14 @@ export default {
</script> </script>
<style scoped> <style scoped>
.el-icon-arrow {
top: 20%;
}
.main { .main {
z-index: 2; z-index: 2;
} }
.main, .main,
.section_inner { .section_inner {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
position: relative; 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> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或