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