From 22371ac7271a00c7dcd0aed47dcc6d856faaeec9 Mon Sep 17 00:00:00 2001
From: Hui Yu <huiyu@HuideMacBook-Pro-2.local>
Date: Wed, 24 Mar 2021 22:58:02 +0800
Subject: [PATCH] 界面完善
---
src/assets/home/china_music/choose.png | 0
src/assets/home/china_music/music_play.png | 0
src/assets/home/china_music/world_title.png | 0
src/views/music/music_china.vue | 24 ++++++------
src/assets/home/china_music/ersai.png | 0
src/views/music/music_word.vue | 26 ++++++------
src/assets/home/china_music/music_icon.png | 0
src/views/home/components/ArtMien.vue | 57 ++++++++--------------------
8 files changed, 41 insertions(+), 66 deletions(-)
diff --git a/src/assets/home/china_music/choose.png b/src/assets/home/china_music/choose.png
old mode 100644
new mode 100755
index 9ee438a..e87fb32
--- a/src/assets/home/china_music/choose.png
+++ b/src/assets/home/china_music/choose.png
Binary files differ
diff --git a/src/assets/home/china_music/ersai.png b/src/assets/home/china_music/ersai.png
old mode 100644
new mode 100755
index 0736644..63932f7
--- a/src/assets/home/china_music/ersai.png
+++ b/src/assets/home/china_music/ersai.png
Binary files differ
diff --git a/src/assets/home/china_music/music_icon.png b/src/assets/home/china_music/music_icon.png
index 22a5dcb..ab89678 100755
--- a/src/assets/home/china_music/music_icon.png
+++ b/src/assets/home/china_music/music_icon.png
Binary files differ
diff --git a/src/assets/home/china_music/music_play.png b/src/assets/home/china_music/music_play.png
index 08c1bbe..80dfee4 100755
--- a/src/assets/home/china_music/music_play.png
+++ b/src/assets/home/china_music/music_play.png
Binary files differ
diff --git a/src/assets/home/china_music/world_title.png b/src/assets/home/china_music/world_title.png
old mode 100644
new mode 100755
index 6f9357b..2bd6649
--- a/src/assets/home/china_music/world_title.png
+++ b/src/assets/home/china_music/world_title.png
Binary files differ
diff --git a/src/views/home/components/ArtMien.vue b/src/views/home/components/ArtMien.vue
index 06c377f..b4b533c 100644
--- a/src/views/home/components/ArtMien.vue
+++ b/src/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'
}
});
}
diff --git a/src/views/music/music_china.vue b/src/views/music/music_china.vue
index 7912f50..605e1d4 100644
--- a/src/views/music/music_china.vue
+++ b/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 {
diff --git a/src/views/music/music_word.vue b/src/views/music/music_word.vue
index eeba43d..cfec670 100644
--- a/src/views/music/music_word.vue
+++ b/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 {
--
Gitblit v1.8.0