src/assets/home/china_music/choose.png | patch | view | raw | blame | history | |
src/assets/home/china_music/ersai.png | patch | view | raw | blame | history | |
src/assets/home/china_music/music_icon.png | patch | view | raw | blame | history | |
src/assets/home/china_music/music_play.png | patch | view | raw | blame | history | |
src/assets/home/china_music/world_title.png | patch | view | raw | blame | history | |
src/views/home/components/ArtMien.vue | ●●●●● patch | view | raw | blame | history | |
src/views/music/music_china.vue | ●●●●● patch | view | raw | blame | history | |
src/views/music/music_word.vue | ●●●●● patch | view | raw | blame | history |
src/assets/home/china_music/choose.pngsrc/assets/home/china_music/ersai.pngsrc/assets/home/china_music/music_icon.pngsrc/assets/home/china_music/music_play.pngsrc/assets/home/china_music/world_title.pngsrc/views/home/components/ArtMien.vue
@@ -47,49 +47,24 @@ }, mounted() { var certifySwiper = new Swiper('#certify .swiper-container', { watchSlidesProgress: true, slidesPerView: 'auto', centeredSlides: true, new Swiper('#certify .swiper-container', { autoplay: { delay: 1000 }, loop: true, loopedSlides:8, autoplay: 3000, prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', pagination: '.swiper-pagination', //paginationClickable :true, onProgress: function(swiper, progress) { for (var i = 0; i < swiper.slides.length; i++) { var slide = swiper.slides.eq(i); var slideProgress = swiper.slides[i].progress; var modify = 1; if (Math.abs(slideProgress) > 1) { modify = (Math.abs(slideProgress) - 1) * 0.3 + 1; } var translate = slideProgress * modify * 110 + 'px'; var scale = 1 - Math.abs(slideProgress) / 8; var zIndex = 999 - Math.abs(Math.round(10 * slideProgress)); slide.transform('translateX(' + translate + ') scale(' + scale + ')'); slide.css('zIndex', zIndex); slide.css('opacity', 1); if (Math.abs(slideProgress) > 2) { slide.css('opacity', 0); } } effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 80, stretch: 0, depth: 200, modifier: 1, slideShadows: true }, onSetTransition: function(swiper, transition) { for (var i = 0; i < swiper.slides.length; i++) { var slide = swiper.slides.eq(i) slide.transition(transition); } }, //处理分页器bug onSlideChangeStart: function(swiper) { if (swiper.activeIndex == 4) { swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active'); console.log(swiper.bullets.length); } pagination: { el: '.swiper-pagination' } }); } src/views/music/music_china.vue
@@ -524,20 +524,19 @@ display: flex; flex-direction: row; align-items: center; .left { margin-left: 40px; flex: 1; .music-icon { width: 16px; height: 18px; margin-right: 30px; background-color: #171717; margin-right: 20px; opacity: 0.6; } } .right { margin-right: 10px; margin-right: 40px; display: flex; flex-direction: row; width: 114px; @@ -556,9 +555,8 @@ } .all-play{ margin-left: 10px; background-color: #171717; width: 22px; height: 28px; width: 11px; height: 14px; } } } @@ -638,10 +636,10 @@ flex-direction: column; // align-items: center; // justify-content: center; margin: 40px auto; margin: 160px auto; .music-title { display: inline-block; // display: inline-block; margin-top: 20px; text-align: center; font-size: 36px; @@ -652,11 +650,14 @@ } .music-content { margin-top: 60px; margin: 60px 30px 120px 30px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 60px; // margin-bottom: 200upx; padding: 30px; // width: 100%; // height: 320px; .music-item { @@ -694,7 +695,6 @@ width: 16px; height: 16px; margin-left: 30px; background-color: #080514; } } .tip { src/views/music/music_word.vue
@@ -31,7 +31,7 @@ </div> <div class="header-divider"></div> <span class="header-location"> 当前位置:首页 > 文艺·世界 当前位置: 首页>文艺·世界 </span> <img class="music-title" src="../../assets/home/china_music/world_title.png" /> <div class="search"> @@ -524,20 +524,19 @@ display: flex; flex-direction: row; align-items: center; .left { margin-left: 40px; flex: 1; .music-icon { width: 16px; height: 18px; margin-right: 30px; background-color: #171717; margin-right: 20px; opacity: 0.6; } } .right { margin-right: 10px; margin-right: 40px; display: flex; flex-direction: row; width: 114px; @@ -556,9 +555,8 @@ } .all-play{ margin-left: 10px; background-color: #171717; width: 22px; height: 28px; width: 11px; height: 14px; } } } @@ -638,10 +636,10 @@ flex-direction: column; // align-items: center; // justify-content: center; margin: 40px auto; margin: 160px auto; .music-title { display: inline-block; // display: inline-block; margin-top: 20px; text-align: center; font-size: 36px; @@ -652,11 +650,14 @@ } .music-content { margin-top: 60px; margin: 60px 30px 120px 30px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 60px; // margin-bottom: 200upx; padding: 30px; // width: 100%; // height: 320px; .music-item { @@ -694,7 +695,6 @@ width: 16px; height: 16px; margin-left: 30px; background-color: #080514; } } .tip {