| | |
| | | </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"> |
| | |
| | | <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"> |
| | |
| | | </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> |
| | | |
| | |
| | | }, |
| | | { |
| | | 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: '不一样的烟火' |
| | | } |
| | | ] |
| | | ], |
| | |
| | | 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: {
|
| | |
| | | }
|
| | | }); |
| | | var NewMusicSwiper = new Swiper('.swiper2', { |
| | | // direction: 'vertical', |
| | | loop: true, |
| | | centeredSlides: true, |
| | | pagination: { |
| | |
| | | display: flex; |
| | | flex-direction: row; |
| | | align-items: center; |
| | | background-color: red; |
| | | |
| | | .left { |
| | | flex: 1; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |