Merge remote-tracking branch 'origin/master' into master

landjj321

2021-03-23 12a0b08dd957dfc6ca02f708ca67588e64efc225

Merge remote-tracking branch 'origin/master' into master

 src/assets/home/china_music/allplay.png

Binary files differ

 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_icon.png

 src/assets/home/china_music/music_item_1.png

 src/assets/home/china_music/music_item_2.png

 src/assets/home/china_music/music_item_3.png

 src/assets/home/china_music/music_item_4.png

 src/assets/home/china_music/music_item_5.png

 src/assets/home/china_music/music_item_6.png

 src/assets/home/china_music/music_play.png

 src/assets/home/china_music/world_title.png

 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: '强军网-首页' }

 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>

 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;
                    }
                }
            }

 src/views/music/music_word.vue

New file
@@ -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>