From a29c03573714444aac22d975bd5f99ea89fe9d2f Mon Sep 17 00:00:00 2001
From: Hui Yu <huiyu@HuideMacBook-Pro-2.local>
Date: Mon, 22 Mar 2021 23:40:00 +0800
Subject: [PATCH] 世界音乐
---
src/assets/home/china_music/world_title.png | 0
src/views/music/music_china.vue | 74 +++--
src/assets/home/china_music/music_item_4.png | 0
src/views/music/music_word.vue | 714 +++++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/home/china_music/music_5.png | 0
src/views/home/components/ArtGlobal.vue | 14
src/assets/home/china_music/music_3.png | 0
src/assets/home/china_music/music_1.png | 0
src/assets/home/china_music/music_item_3.png | 0
src/assets/home/china_music/music_icon.png | 0
src/router/index.js | 6
src/assets/home/china_music/music_item_1.png | 0
src/assets/home/china_music/music_play.png | 0
/dev/null | 0
src/assets/home/china_music/music_item_5.png | 0
src/assets/home/china_music/music_4.png | 0
src/assets/home/china_music/music_item_6.png | 0
src/assets/home/china_music/music_2.png | 0
src/assets/home/china_music/music_item_2.png | 0
19 files changed, 774 insertions(+), 34 deletions(-)
diff --git a/src/assets/home/china_music/allplay.png b/src/assets/home/china_music/allplay.png
deleted file mode 100755
index 3e05592..0000000
--- a/src/assets/home/china_music/allplay.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/home/china_music/music_1.png b/src/assets/home/china_music/music_1.png
old mode 100644
new mode 100755
index fb3b2ef..6a2fdbf
--- a/src/assets/home/china_music/music_1.png
+++ b/src/assets/home/china_music/music_1.png
Binary files differ
diff --git a/src/assets/home/china_music/music_2.png b/src/assets/home/china_music/music_2.png
old mode 100644
new mode 100755
index f9bfddb..a253887
--- a/src/assets/home/china_music/music_2.png
+++ b/src/assets/home/china_music/music_2.png
Binary files differ
diff --git a/src/assets/home/china_music/music_3.png b/src/assets/home/china_music/music_3.png
old mode 100644
new mode 100755
index b484288..3d7b4a5
--- a/src/assets/home/china_music/music_3.png
+++ b/src/assets/home/china_music/music_3.png
Binary files differ
diff --git a/src/assets/home/china_music/music_4.png b/src/assets/home/china_music/music_4.png
old mode 100644
new mode 100755
index 681c696..30c9d62
--- a/src/assets/home/china_music/music_4.png
+++ b/src/assets/home/china_music/music_4.png
Binary files differ
diff --git a/src/assets/home/china_music/music_5.png b/src/assets/home/china_music/music_5.png
old mode 100644
new mode 100755
index 4066549..01cfe56
--- a/src/assets/home/china_music/music_5.png
+++ b/src/assets/home/china_music/music_5.png
Binary files differ
diff --git a/src/assets/home/china_music/music_icon.png b/src/assets/home/china_music/music_icon.png
new file mode 100755
index 0000000..22a5dcb
--- /dev/null
+++ b/src/assets/home/china_music/music_icon.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_1.png b/src/assets/home/china_music/music_item_1.png
old mode 100644
new mode 100755
index d6aeea4..a0411ce
--- a/src/assets/home/china_music/music_item_1.png
+++ b/src/assets/home/china_music/music_item_1.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_2.png b/src/assets/home/china_music/music_item_2.png
old mode 100644
new mode 100755
index 01bcc24..10f217e
--- a/src/assets/home/china_music/music_item_2.png
+++ b/src/assets/home/china_music/music_item_2.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_3.png b/src/assets/home/china_music/music_item_3.png
new file mode 100755
index 0000000..281ca6c
--- /dev/null
+++ b/src/assets/home/china_music/music_item_3.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_4.png b/src/assets/home/china_music/music_item_4.png
new file mode 100755
index 0000000..3ad5254
--- /dev/null
+++ b/src/assets/home/china_music/music_item_4.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_5.png b/src/assets/home/china_music/music_item_5.png
new file mode 100755
index 0000000..818a994
--- /dev/null
+++ b/src/assets/home/china_music/music_item_5.png
Binary files differ
diff --git a/src/assets/home/china_music/music_item_6.png b/src/assets/home/china_music/music_item_6.png
new file mode 100755
index 0000000..7e4aabb
--- /dev/null
+++ b/src/assets/home/china_music/music_item_6.png
Binary files differ
diff --git a/src/assets/home/china_music/music_play.png b/src/assets/home/china_music/music_play.png
new file mode 100755
index 0000000..08c1bbe
--- /dev/null
+++ 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
new file mode 100644
index 0000000..6f9357b
--- /dev/null
+++ b/src/assets/home/china_music/world_title.png
Binary files differ
diff --git a/src/router/index.js b/src/router/index.js
index 0d00530..36231ba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,6 +27,12 @@
meta: { title: '中国音乐...'}
},
{
+ path: '/music_world',
+ component: () => import('@/views/music/music_word'),
+ meta: { title: '世界音乐...'}
+ },
+
+ {
path: '/',
component: () => import('@/views/home/index'),
meta: { title: '强军网-首页' }
diff --git a/src/views/home/components/ArtGlobal.vue b/src/views/home/components/ArtGlobal.vue
index 7deb4c2..5d65266 100644
--- a/src/views/home/components/ArtGlobal.vue
+++ b/src/views/home/components/ArtGlobal.vue
@@ -20,6 +20,7 @@
<p class="font-bold">戏剧 STAGE</p>
</div>
</div>
+
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img3.png`)})`}">
<div class="info-title">
<p class="font-bold">美术 ARTS</p>
@@ -30,11 +31,14 @@
<p class="font-bold">文学 LITERATURE</p>
</div>
</div>
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img5.png`)})`}">
- <div class="info-title">
- <p class="font-bold">音乐 MUSIC</p>
- </div>
- </div>
+
+ <router-link to="/music_world" class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img5.png`)})`}">
+ <div class="info-title">
+ <p class="font-bold">音乐 MUSIC</p>
+ </div>
+ </router-link>
+
+
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img6.png`)})`}">
<div class="info-title">
<p class="font-bold">动漫 ANIME</p>
diff --git a/src/views/music/music_china.vue b/src/views/music/music_china.vue
index de53e37..7912f50 100644
--- a/src/views/music/music_china.vue
+++ b/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;
}
}
}
diff --git a/src/views/music/music_word.vue b/src/views/music/music_word.vue
new file mode 100644
index 0000000..eeba43d
--- /dev/null
+++ b/src/views/music/music_word.vue
@@ -0,0 +1,714 @@
+<template>
+ <div class="container">
+ <div class="header">
+ <div class="swiper-container swiper1">
+ <div class="swiper-wrapper">
+ <div v-for="(item,index) in banner" class="swiper-slide">
+ <img :src="item" />
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-pre"></div>
+ <div class="swiper-button-next"></div>
+ </div>
+ <div class="header-container">
+ <div class="header-info">
+ <div class="left">
+ <img class="icon" src="../../assets/home/china_music/minLogo.png" />
+ </div>
+ <div class="right">
+ <span class="header-title">首页</span>
+ <div class="right-search">
+ <input type="text" />
+ <svg-icon icon-class="search" />
+ </div>
+ <div class="login_or_register">
+ <span class="login">登录</span>
+ <span>/</span>
+ <span class="register">注册</span>
+ </div>
+ </div>
+ </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">
+ <input class="search_input" type="text" />
+ <img class="search_icon" src="../../assets/home/china_music/search.png" />
+ </div>
+ </div>
+ </div>
+ <div class="nav">
+ <div class="nav-bar">
+ <span class="navbar__item" :class="{'active': navbarActive===0}" @click="navbarActive=0">流行</span>
+ <span class="navbar__item" :class="{'active': navbarActive===1}" @click="navbarActive=1">民谣</span>
+ <span class="navbar__item" :class="{'active': navbarActive===2}" @click="navbarActive=2">电子</span>
+ <span class="navbar__item" :class="{'active': navbarActive===3}" @click="navbarActive=3">轻音乐</span>
+ <span class="navbar__item" :class="{'active': navbarActive===4}" @click="navbarActive=4">影视原声</span>
+ <span class="navbar__item" :class="{'active': navbarActive===5}" @click="navbarActive=5">新世纪</span>
+ <span class="navbar__item" :class="{'active': navbarActive===6}" @click="navbarActive=6">爵士</span>
+ <span class="navbar__item" :class="{'active': navbarActive===7}" @click="navbarActive=7">古典</span>
+ <span class="navbar__item" :class="{'active': navbarActive===8}" @click="navbarActive=8">乡村</span>
+ </div>
+ <div class="nav-choose">
+ <img src="../../assets/home/china_music/choose.png"/>
+ </div>
+ </div>
+ <div class="new-music-release">
+ <span class="title">新歌首发</span>
+ <div class="header">
+ <div class="left">
+ <img v-for="item in 3" class="music-icon" src="../../assets/home/china_music/music_icon.png" />
+ </div>
+ <div class="right">
+ <span>全部播放</span>
+ <img class="all-play" src="../../assets/home/china_music/music_play.png" />
+ </div>
+ </div>
+ <div class="swiper-container swiper2">
+ <div class="swiper-wrapper">
+ <div v-for="(item,index) in music_banner" class="swiper-slide">
+ <div v-for="(item,index) in item" class="music-item">
+ <img :src="item.imgsrc" class="music-swiper-img" />
+ <p class="tip">
+ {{item.tip}}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <!-- <div class="swiper-button-pre"></div>
+ <div class="swiper-button-next"></div> -->
+ </div>
+ </div>
+
+ <div class="hot-music">
+ <span class="music-title">热门专辑</span>
+ <div class="music-content">
+ <div class="music-item" v-for="(item,index) in music_data">
+ <img class="cover" :src="item.imgsrc" />
+ <div class="music-detail">
+ <div class="title">
+ <span>{{item.title}}</span>
+ <img src="../../assets/home/china_music/ersai.png" />
+ </div>
+ <span class="tip">{{item.tip}}</span>
+ </div>
+ </div>
+ </div>
+ <pagination :totalPage="parentTotalPage" :currentPage="parentCurrentpage" :changeCallback="parentCallback">
+ </pagination>
+ </div>
+ </div>
+</template>
+
+<script>
+ import Swiper from 'swiper/swiper-bundle.js'
+ import 'swiper/swiper-bundle.css'
+ import pagination from '../../components/Pagination/pagination.vue'
+
+ export default {
+ name: 'music_china',
+ components: {
+ pagination
+ },
+ data() {
+ return {
+ navbarActive: 0,
+ parentTotalPage: 100,
+ parentCurrentpage: 1,
+ banner: [
+ require('@/assets/home/china_music/banner_1.png'),
+ require('@/assets/home/china_music/banner_1.png')
+ ],
+ music_banner:[
+ [
+ {
+ imgsrc:require('@/assets/home/china_music/music_1.png'),
+ tip: '一杯咖啡的午后'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_2.png'),
+ tip: '明天,你好'
+ },
+ {
+ imgsrc: require('@/assets/home/china_music/music_3.png'),
+ tip: '理想三巡'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_4.png'),
+ tip: '乍暖还寒'
+ },
+ {
+ imgsrc: require('@/assets/home/china_music/music_5.png'),
+ tip: '不一样的烟火'
+ }
+ ],
+ [
+ {
+ imgsrc:require('@/assets/home/china_music/music_4.png'),
+ tip: '乍暖还寒'
+ },
+ {
+ imgsrc: require('@/assets/home/china_music/music_5.png'),
+ tip: '不一样的烟火'
+ }
+ ]
+ ],
+ music_data: [
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_1.png'),
+ title: '回忆',
+ tip: '小时候听妈妈说'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_2.png'),
+ title: '时光',
+ tip: '往事只能回味'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_3.png'),
+ title: '自然',
+ tip: '风从海边吹来'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_4.png'),
+ title: '山',
+ tip: '我跨过山和大海'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_5.png'),
+ title: '在路上',
+ tip: '行走的诗人'
+ },
+ {
+ imgsrc:require('@/assets/home/china_music/music_item_6.png'),
+ title: '蝶恋花',
+ tip: '山内 惠见'
+ }
+ ]
+ }
+ },
+ mounted() {
+ var mySwiper = new Swiper('.swiper1', {
+ loop: true,
+ centeredSlides: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true
+ },
+ autoplay: {
+ delay: 4000,
+ disableOnInteraction: false
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev'
+ }
+ });
+ var NewMusicSwiper = new Swiper('.swiper2', {
+ loop: true,
+ centeredSlides: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true
+ },
+ autoplay: {
+ delay: 4000,
+ disableOnInteraction: false
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev'
+ }
+ });
+ },
+ methods: {
+ parentCallback(cPage){
+
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "~@/styles/variables.scss";
+
+ .container {
+
+ min-width: $appWidth;
+ min-height: 681px;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ .header {
+ display: flex;
+ flex-direction: column;
+
+ .swiper-container {
+ width: 100%;
+ height: 600px;
+ // padding: 60px;
+ background-color: #802629;
+
+ .swiper-slide {
+ background-position: center;
+ background-size: cover;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .swiper-button-prev {
+ left: 30px;
+ width: 45px;
+ height: 45px;
+ background: url(../../assets/home/art_mien/wm_button_icon.png) no-repeat;
+ background-position: 0 0;
+ background-size: 100%;
+ }
+
+ .swiper-button-prev:hover {
+ background-position: 0 46px;
+ background-size: 100%
+ }
+
+ .swiper-button-next {
+ right: 30px;
+ width: 45px;
+ height: 45px;
+ background: url(../../assets/home/art_mien/wm_button_icon.png) no-repeat;
+ background-position: 0 93px;
+ background-size: 100%;
+ }
+
+ .swiper-button-next:hover {
+ background-position: 0 139px;
+ background-size: 100%
+ }
+ }
+
+ .header-container{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 20;
+
+ .header-info {
+ display: flex;
+ flex-direction: row;
+
+ .left {
+ margin-top: 22px;
+ margin-left: 104px;
+ flex: 1;
+ .icon {
+ display: inline-block;
+ width: 336px;
+ height: 55px;
+ }
+ }
+
+ .right {
+ margin-top: 22px;
+ margin-right: 104px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 56px;
+
+ .header-title {
+ font-family: SourceHanSansCN-Regular;
+ font-size: 19px;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: 3px;
+ letter-spacing: 0px;
+ color: #ffe0b8;
+ }
+
+ .right-search {
+ display: inline-block;
+ width: 150px;
+ height: 22px;
+ border-radius: 10px;
+ border: solid 1px #FFE0B8;
+ margin-left: 24px;
+ vertical-align: -3px;
+ color: #FFE0B8;
+ input {
+ border: none;
+ outline: none;
+ background: transparent;
+ width: 115px;
+ height: 22px;
+ padding-left: 10px;
+ vertical-align: 2.5px;
+ color: #FFE0B8;
+ }
+
+ svg {
+ margin-left: 8px;
+ width: 13px;
+ height: 13px;
+ vertical-align: 0.5px;
+ }
+ }
+
+ .login_or_register {
+ display: inline-block;
+ width: 80px;
+ margin-left: 10px;
+ color: #FFE0B8;
+
+ .login {
+ margin-right: 5px;
+ }
+
+ .register {
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+
+ .header-divider {
+ display: inline-block;
+ margin-top: 10px;
+ width: 100%;
+ height: 7px;
+ background-image: linear-gradient(90deg,
+ #ca2226 28%,
+ #e57d5c 68%,
+ #ffd791 100%);
+ opacity: 0.4;
+ }
+
+ .header-location {
+ margin-top: 20px;
+ margin-left: 98px;
+ font-family: SourceHanSansCN-Regular;
+ font-size: 20px;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: 3px;
+ letter-spacing: 0px;
+ color: #ffffff;
+ opacity: 0.45;
+ }
+ .music-title {
+ margin-top: 130px;
+ margin-left: 106px;
+ width: 114px;
+ height: 54px;
+ }
+
+ .search {
+ display: flex;
+ flex-direction: row;
+ margin-top: 130px;
+ margin-left: 260px;
+ height: 38px;
+ width: 780px;
+ border-radius: 5px;
+ // opacity: 0.25;
+
+ .search_input {
+ margin-left: 20px;
+ width: 700px;
+ font-family: SourceHanSansCN-Regular;
+ font-size: 16px;
+ font-weight: normal;
+ font-stretch: normal;
+ letter-spacing: 6px;
+ color: #c9c1c1;
+ }
+
+ .search_icon {
+ margin-left: 12px;
+ font-size: 16px;
+ font-weight: normal;
+ font-stretch: normal;
+ letter-spacing: 6px;
+ color: #c9c1c1;
+ }
+ }
+ }
+ }
+
+ .nav {
+ width: $appWidth;
+ height: 80px;
+ margin: 60px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .nav-bar{
+ // display: inline-block;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ flex: 1;
+ justify-content: space-around;
+ .navbar__item {
+ // display: inline-block;
+ display: flex;
+ position: relative;
+ cursor: pointer;
+ margin-left: 40px;
+ &:first-child {
+ margin-left: 0;
+ }
+ &.active {
+ font-weight: 500;
+ &::after {
+ content: '';
+ width: 100%;
+ height: 1px;
+ background: #F01;
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ }
+ }
+ }
+ }
+
+ .nav-choose{
+ margin-right: 30px;
+ width: 40px;
+ display: flex;
+ justify-content: center;
+ img {
+ width: 16px;
+ height: 19px;
+ }
+ }
+ }
+
+ .new-music-release{
+ width: $appWidth;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto;
+
+ .title {
+ font-family: SourceHanSansCN-Normal;
+ font-size: 36px;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: 3px;
+ letter-spacing: 14px;
+ color: #171717;
+ }
+
+ .header {
+ margin-top: 60px;
+ width: 100%;
+ height: 40px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .left {
+ flex: 1;
+ .music-icon {
+ width: 16px;
+ height: 18px;
+ margin-right: 30px;
+ background-color: #171717;
+ opacity: 0.6;
+ }
+ }
+
+ .right {
+ margin-right: 10px;
+ 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;
+ }
+ }
+ }
+ .swiper-container {
+ width: $appWidth;
+ height: 360px;
+ // padding: 60px;
+ margin-top: 40px;
+
+ .swiper-slide {
+
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ border-radius: 5px;
+ img {
+
+ width: 160px;
+ height: 160px;
+ }
+ .tip {
+ margin-top: 20px;
+ display: flex;
+ height: 60px;
+ width: 160px;
+ // white-space: nowrap; /*强制span不换行*/
+ // display: inline-block; /*将span当做块级元素对待*/
+ // overflow: hidden; /*超出宽度部分隐藏*/
+ // text-overflow: ellipsis; /*超出部分以点号代替*/
+ text-align: left;
+ font-family: SourceHanSerifCN-Regular;
+ font-size: 16px;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: 3px;
+ letter-spacing: 0px;
+ color: #000000;
+ }
+ }
+
+ .swiper-button-prev {
+ left: 30px;
+ width: 45px;
+ height: 45px;
+ background: url(../../assets/home/art_mien/wm_button_icon.png) no-repeat;
+ background-position: 0 0;
+ background-size: 100%;
+ }
+
+ .swiper-button-prev:hover {
+ background-position: 0 46px;
+ background-size: 100%
+ }
+
+ .swiper-button-next {
+ right: 30px;
+ width: 45px;
+ height: 45px;
+ background: url(../../assets/home/art_mien/wm_button_icon.png) no-repeat;
+ background-position: 0 93px;
+ background-size: 100%;
+ }
+
+ .swiper-button-next:hover {
+ background-position: 0 139px;
+ background-size: 100%
+ }
+ }
+ }
+
+ .hot-music {
+ width: $appWidth;
+ display: flex;
+ flex-direction: column;
+ // align-items: center;
+ // justify-content: center;
+ margin: 40px auto;
+
+ .music-title {
+ display: inline-block;
+ margin-top: 20px;
+ text-align: center;
+ font-size: 36px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #080514;
+ line-height: 3px;
+ }
+
+ .music-content {
+ margin-top: 60px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding-bottom: 60px;
+ // height: 320px;
+
+ .music-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 33%;
+ height: 160px;
+ margin-top: 30px;
+
+ img {
+ width: 140px;
+ height: 140px;
+ border-radius: 70px;
+ }
+
+ .music-detail {
+ display: flex;
+ flex-direction: column;
+ margin-left: 30px;
+
+ .title {
+ display: flex;
+ flex-direction: row;
+
+ span {
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #080514;
+ line-height: 18px;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ margin-left: 30px;
+ background-color: #080514;
+ }
+ }
+ .tip {
+ margin-top: 20px;
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #080514;
+ line-height: 18px;
+ opacity: 0.55;
+ }
+ }
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.8.0