音乐部分

Hui Yu

2021-03-22 4c9f32f5c5fc8d79bcd143916e43eca533520ded

音乐部分

 src/assets/home/china_music/allplay.png

 src/assets/home/china_music/banner_1.png

 src/assets/home/china_music/choose.png

 src/assets/home/china_music/ersai.png

 src/assets/home/china_music/minLogo.png

 src/assets/home/china_music/music_1.png

 src/assets/home/china_music/music_2.png

 src/assets/home/china_music/music_3.png

 src/assets/home/china_music/music_4.png

 src/assets/home/china_music/music_5.png

 src/assets/home/china_music/music_item_1.png

 src/assets/home/china_music/music_item_2.png

 src/assets/home/china_music/next.png

 src/assets/home/china_music/previous.png

 src/assets/home/china_music/search.png

 src/assets/home/china_music/title.png

 src/components/Pagination/pagination.vue

New file
@@ -0,0 +1,227 @@
<template>
    <div class="pagination-wrap" v-cloak v-if="totalPage!=0">
          <ul class="pagination">
            <li :class="currentPage==1?'disabled':''"><a href="javascript:;" @click="turnToPage(1)">首页</a></li>
            <li :class="currentPage==1?'disabled':''"><a @click="turnToPage(currentPage-1)" href="javascript:;">上一页</a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage-3)" v-text="currentPage-3" v-if="currentPage-3>0"></a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage-2)" v-text="currentPage-2" v-if="currentPage-2>0"></a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage-1)" v-text="currentPage-1" v-if="currentPage-1>0"></a></li>
            <li class="active"><a href="javascript:;" @click="turnToPage(currentPage)" v-text="currentPage">3</a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage+1)" v-text="currentPage+1" v-if="currentPage+1<totalPage"></a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage+2)" v-text="currentPage+2" v-if="currentPage+2<totalPage"></a></li>
            <li><a href="javascript:;" @click="turnToPage(currentPage+3)" v-text="currentPage+3" v-if="currentPage+3<totalPage"></a></li>
            <li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(currentPage+1)" >下一页</a></li>
            <li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(totalPage)">尾页</a></li>
           </ul>
        <small class="small nowrap"> 当前第 <span class="text-primary" v-text="currentPage"></span> 页，共有 <span class="text-primary" v-text="totalPage"></span> 页</small>
        <div class="go">
          <div :class="isPageNumberError?'input-group error':'input-group'">
            <input class="form-control" type="number" v-model="goToPage"><a href="javascript:;" class="input-group-addon" @click="turnToPage(goToPage)">Go</a>
          </div>
        </div>
      </div>
</template>

<script type="text/javascript">
    export default {
        props: {
                //传入总页数，默认100
                totalPage: {
                    type: Number,
                      default: 1,
                      required: true,
                    validator(value) {
                        return value >= 0
                    }
                }, 
		
                //传入当前页，默认1
                currentPage:{
                    type: Number,
                      default: 1,
                    validator(value) {
                        return value >= 0
                    }
                },
		
                //传入页面改变时的回调，用于更新你的数据
                //回调默认是打印当前页
                //请根据需要在传入的回调函数里更改函数体
                changeCallback: {
                    type: Function,
                    default(cPage) {
                        console.log("默认回调，显示页码：" + cPage);
                    }
                 }
            },
            data(){
                return {
                    myCurrentPage : 1,
                    isPageNumberError: false
                }
            },
            computed:{
                // prop不应该在组件内部做改变
                // 所以我们这里设置一个内部计算属性myCurrentPage来代替props中的currentPage
                // 为什么要这么做？参考：https://cn.vuejs.org/v2/guide/components.html#单向数据流
                currentPage(){ 
                    return this.myCurrentPage;
                }
            },
            methods:{
                //turnToPage为跳转到某页
                //传入参数pageNum为要跳转的页数
                turnToPage( pageNum ){
                    var ts = this;
                    var pageNum = parseInt(pageNum);
		
                    //页数不合法则退出
                    if (!pageNum || pageNum > ts.totalPage || pageNum < 1) {
                        console.log('页码输入有误！');
                        ts.isPageNumberError = true;
                        return false;		
                    }else{
                        ts.isPageNumberError = false;
                    }
		
                    //更新当前页
                    ts.myCurrentPage = pageNum;
		
                    //页数变化时的回调
                    ts.changeCallback(pageNum); 
                }
            }
    }
</script>

<style type="text/css">
    .pagination-wrap{
        margin: 0 auto;
        text-align: center;
    }
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
    }
    .small {
        margin: 0 10px;
        position: relative;
        top: -32px;
    }
    .nowrap {
        white-space: nowrap;
    }
    .input-group {
        position: relative;
        display: table;
        border-collapse: separate;
    }
    .input-group-addon {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        text-align: center;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 0 4px 4px 0;
    }
	
    .input-group-addon, .input-group-btn {
        width: 1%;
        white-space: nowrap;
        vertical-align: middle;
    }
    .input-group-addon, .input-group-btn, .input-group .form-control {
        box-sizing: border-box;
        display: table-cell;
    }
    .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .input-group-addon, .input-group-btn, .input-group .form-control {
        display: table-cell;
    }
    .input-group .form-control {
        position: relative;
        z-index: 2;
        float: left;
        width: 100%;
        margin-bottom: 0;
    }
    .go .error .form-control{
        border: 1px solid #d95656;
    }
    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .text-primary {
        color: #428bca;
    }
    .pagination>li:first-child>a, .pagination>li:first-child>span {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .go {
        display: inline-block;
        max-width: 140px;
        top: -21px;
        position: relative;
    }
    .input-group-addon:last-child {
        display: table-cell;
        text-decoration: none;
        border-left: 0;
    }
    .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
    .pagination>li:last-child>a, .pagination>li:last-child>span {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #428bca;
        border-color: #428bca;
    }
    .pagination>li>a, .pagination>li>span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #428bca;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
    }
    .pagination>li {
        display: inline;
    }
</style>

 src/router/index.js

@@ -22,6 +22,11 @@
    meta: { title: '网站建设中...' }
  },
  {
      path: '/music_cn',
      component: () => import('@/views/music/music_china'),
      meta: { title: '中国音乐...'}
  },
  {
    path: '/',
    component: () => import('@/views/home/index'),
    meta: { title: '强军网-首页' }

 src/views/home/components/ArtChina.vue

@@ -12,11 +12,14 @@
          <span class="font-bold">中国影视</span>
        </div>
      </div>
      <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img2.png`)})`}">
        <div class="info-title">
          <span class="font-bold">中国音乐</span>
        </div>
      </div>
      <div class="info-view" @click="go_music" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img2.png`)})`}">
	    
        <div class="info-title">
          <span class="font-bold">中国音乐</span>
        </div>
      </div>
	  
     
      <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img3.png`)})`}">
        <div class="info-title">
          <span class="font-bold">中国舞蹈</span>
@@ -51,7 +54,12 @@
<script>

export default {
  name: 'ArtChina'
  name: 'ArtChina',
  methods:{
      go_music(){
          this.$router.push('/music_cn');
      }
  }
}
</script>


 src/views/music/music_china.vue

New file
@@ -0,0 +1,705 @@
<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/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/ersai.png" />
                </div>
                <div class="right">
                    <img class="all-play" src="../../assets/home/china_music/allplay.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_1.png'),
                        title: '回忆',
                        tip: '小时候听妈妈说'
                    },
                    {
                        imgsrc:require('@/assets/home/china_music/music_item_2.png'),
                        title: '时光',
                        tip: '往事只能回味'
                    },
                    {
                        imgsrc:require('@/assets/home/china_music/music_item_1.png'),
                        title: '回忆',
                        tip: '小时候听妈妈说'
                    },
                    {
                        imgsrc:require('@/assets/home/china_music/music_item_2.png'),
                        title: '时光',
                        tip: '往事只能回味'
                    }
                ]

            }

        },

        mounted() {

            var mySwiper = new Swiper('.swiper1', {

                // direction: 'vertical',

                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', {
                // direction: 'vertical',
                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 {

        position: relative;

        height: 100%;

        // width: 100%;

        min-width: $appWidth;

        min-height: 681px;
        display: flex;
        flex-direction: column;
        margin: 0;
        // justify-content: center;



        // background-image: url("../../../assets/home/first_video/first-video-bg.png");

        // background-size: 100% 100%;

        // overflow: hidden;

        .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;
                background-color: red;
				
                .left {
                    flex: 1;
                    .music-icon {
                        width: 16px;
                        height: 18px;
                        margin-right: 30px;
                    }
                }
				
                .right {
                    margin-right: 10px;
                    width: 80px;
                    height: 22px;
                    img{
                        width: 66px;
                        height: 17px;
                    }
                }
            }
            .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>