fix: songer page button bug

* mv page add button * Detach CSS Style

fix: songer page button bug
* mv page add button * Detach CSS Style
d4ffd1a5 · Zachary · 0bbf3629 · d4ffd1a5 · d4ffd1a5 · d4ffd1a5
4 changed file
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -12,3 +12,8 @@ a {
 li {
  list-style: none;
 }
+img {
+  border: 0 none;
+  image-rendering: optimizeQuality;
+}
--- a/src/assets/css/coustom.css
+++ b/src/assets/css/coustom.css
-.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;
 }
+.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;
 }
+.slide_action--right,
-.arrow-btn-right {
+.slide_action__btn--right {
  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;
  background-position: -20px -120px;
 }
+.slide_action__arrow--right {
-.el-icon-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%;
+  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);
 }
--- a/src/views/musicLibrary/MV.vue
+++ b/src/views/musicLibrary/MV.vue
 <template>
-<div class="main" v-loading="mvLoading">
+<div class="mod_slide_box" style="position: relative;">
+  <div class="main" style="z-index: 2" v-loading="mvLoading">
    <TypeSelectBar>
      <TypeSelectSubBar
        :selectId="selectArea"
@@ -60,7 +61,30 @@
      </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,8 +135,20 @@ 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,
    TypeSelectSubBar
@@ -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;
-}
-.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>
--- a/src/views/musicLibrary/Songers.vue
+++ b/src/views/musicLibrary/Songers.vue
 <template>
-<div class='main' v-loading='loading'>
+<div class="mod_slide_box" style="position: relative;">
+  <div class='main' v-loading='loading'>
    <TypeSelectBar>
      <TypeSelectSubBar
@@ -22,17 +23,33 @@
        <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>
+           :title="item.name">{{item.name}}</router-link>
      </li>
    </ul>
+  </div>
-  <div class='arrow-btn arrow-btn-left' >
+  <div class="mod_slide_action">
-    <a href="javascript:;" @click="prevPage()" ><i class='el-icon-arrow-left el-icon-arrow'></i></a>
+    <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 class='arrow-btn arrow-btn-right' >
-    <a href="javascript:;" @click="nextPage()" ><i class='el-icon-arrow-right el-icon-arrow'></i></a>
  </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>