landjj321
2021-03-23 12a0b08dd957dfc6ca02f708ca67588e64efc225
src/views/music/music_china.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/title.png" />
            <div class="search">
@@ -60,10 +60,11 @@
         <span class="title">新歌首发</span>
         <div class="header">
            <div class="left">
               <img v-for="item in 3" class="music-icon" src="../../assets/home/china_music/ersai.png" />
               <img v-for="item in 3" class="music-icon" src="../../assets/home/china_music/music_icon.png" />
            </div>
            <div class="right">
               <img class="all-play" src="../../assets/home/china_music/allplay.png"
               <span>全部播放</span>
               <img class="all-play" src="../../assets/home/china_music/music_play.png" />
            </div>
         </div>
         <div class="swiper-container swiper2">
@@ -78,8 +79,8 @@
               </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-pre"></div>
            <div class="swiper-button-next"></div>
            <!-- <div class="swiper-button-pre"></div>
            <div class="swiper-button-next"></div> -->
         </div>
      </div>
      
@@ -138,21 +139,21 @@
                  },
                  {
                     imgsrc:require('@/assets/home/china_music/music_4.png'),
                     tip: '明天,你好'
                     tip: '乍暖还寒'
                  },
                  {
                     imgsrc: require('@/assets/home/china_music/music_5.png'),
                     tip: '理想三巡'
                     tip: '不一样的烟火'
                  }
               ],
               [
                  {
                     imgsrc:require('@/assets/home/china_music/music_4.png'),
                     tip: '明天,你好'
                     tip: '乍暖还寒'
                  },
                  {
                     imgsrc: require('@/assets/home/china_music/music_5.png'),
                     tip: '理想三巡'
                     tip: '不一样的烟火'
                  }
               ]
            ],
@@ -168,31 +169,30 @@
                  tip: '往事只能回味'
               },
               {
                  imgsrc:require('@/assets/home/china_music/music_item_1.png'),
                  title: '回忆',
                  tip: '小时候听妈妈说'
                  imgsrc:require('@/assets/home/china_music/music_item_3.png'),
                  title: '自然',
                  tip: '风从海边吹来'
               },
               {
                  imgsrc:require('@/assets/home/china_music/music_item_2.png'),
                  title: '时光',
                  tip: '往事只能回味'
                  imgsrc:require('@/assets/home/china_music/music_item_4.png'),
                  title: '山',
                  tip: '我跨过山和大海'
               },
               {
                  imgsrc:require('@/assets/home/china_music/music_item_1.png'),
                  title: '回忆',
                  tip: '小时候听妈妈说'
                  imgsrc:require('@/assets/home/china_music/music_item_5.png'),
                  title: '在路上',
                  tip: '行走的诗人'
               },
               {
                  imgsrc:require('@/assets/home/china_music/music_item_2.png'),
                  title: '时光',
                  tip: '往事只能回味'
                  imgsrc:require('@/assets/home/china_music/music_item_6.png'),
                  title: '蝶恋花',
                  tip: '山内 惠见'
               }
            ]
         }
      },
      mounted() {
         var mySwiper = new Swiper('.swiper1', {
            // direction: 'vertical',
            loop: true,
            centeredSlides: true,
            pagination: {
@@ -209,7 +209,6 @@
            }
         });
         var NewMusicSwiper = new Swiper('.swiper2', {
            // direction: 'vertical',
            loop: true,
            centeredSlides: true,
            pagination: {
@@ -525,7 +524,6 @@
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: red;
            
            .left {
               flex: 1;
@@ -533,16 +531,34 @@
                  width: 16px;
                  height: 18px;
                  margin-right: 30px;
                  background-color: #171717;
                  opacity: 0.6;
               }
            }
            
            .right {
               margin-right: 10px;
               width: 80px;
               height: 22px;
               img{
                  width: 66px;
                  height: 17px;
               display: flex;
               flex-direction: row;
               width: 114px;
               height: 34px;
               border: 1px solid #636363;
               opacity: 0.6;
               align-items: center;
               padding-left: 10px;
               span{
                  font-size: 17px;
                  font-family: Source Han Sans CN;
                  font-weight: 300;
                  color: #171717;
                  line-height: 2px;
                  opacity: 0.6;
               }
               .all-play{
                  margin-left: 10px;
                  background-color: #171717;
                  width: 22px;
                  height: 28px;
               }
            }
         }