From 4c9f32f5c5fc8d79bcd143916e43eca533520ded Mon Sep 17 00:00:00 2001
From: Hui Yu <huiyu@HuideMacBook-Pro-2.local>
Date: Mon, 22 Mar 2021 20:04:49 +0800
Subject: [PATCH] 音乐部分
---
src/views/music/music_china.vue | 705 ++++++++++++++++++++++++++++++++++++++++++++
src/assets/home/china_music/ersai.png | 0
src/assets/home/china_music/music_5.png | 0
src/assets/home/china_music/title.png | 0
src/views/home/components/ArtChina.vue | 20
src/assets/home/china_music/music_3.png | 0
src/assets/home/china_music/music_1.png | 0
src/router/index.js | 5
src/assets/home/china_music/music_item_1.png | 0
src/assets/home/china_music/search.png | 0
src/assets/home/china_music/choose.png | 0
src/assets/home/china_music/previous.png | 0
src/assets/home/china_music/banner_1.png | 0
src/components/Pagination/pagination.vue | 227 ++++++++++++++
src/assets/home/china_music/minLogo.png | 0
src/assets/home/china_music/next.png | 0
src/assets/home/china_music/music_4.png | 0
src/assets/home/china_music/allplay.png | 0
src/assets/home/china_music/music_2.png | 0
src/assets/home/china_music/music_item_2.png | 0
20 files changed, 951 insertions(+), 6 deletions(-)
diff --git a/src/assets/home/china_music/allplay.png b/src/assets/home/china_music/allplay.png
new file mode 100755
index 0000000..3e05592
--- /dev/null
+++ b/src/assets/home/china_music/allplay.png
Binary files differ
diff --git a/src/assets/home/china_music/banner_1.png b/src/assets/home/china_music/banner_1.png
new file mode 100644
index 0000000..693d110
--- /dev/null
+++ b/src/assets/home/china_music/banner_1.png
Binary files differ
diff --git a/src/assets/home/china_music/choose.png b/src/assets/home/china_music/choose.png
new file mode 100644
index 0000000..9ee438a
--- /dev/null
+++ b/src/assets/home/china_music/choose.png
Binary files differ
diff --git a/src/assets/home/china_music/ersai.png b/src/assets/home/china_music/ersai.png
new file mode 100644
index 0000000..0736644
--- /dev/null
+++ b/src/assets/home/china_music/ersai.png
Binary files differ
diff --git a/src/assets/home/china_music/minLogo.png b/src/assets/home/china_music/minLogo.png
new file mode 100644
index 0000000..f2b4ef0
--- /dev/null
+++ b/src/assets/home/china_music/minLogo.png
Binary files differ
diff --git a/src/assets/home/china_music/music_1.png b/src/assets/home/china_music/music_1.png
new file mode 100644
index 0000000..fb3b2ef
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f9bfddb
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b484288
--- /dev/null
+++ 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
new file mode 100644
index 0000000..681c696
--- /dev/null
+++ 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
new file mode 100644
index 0000000..4066549
--- /dev/null
+++ b/src/assets/home/china_music/music_5.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
new file mode 100644
index 0000000..d6aeea4
--- /dev/null
+++ 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
new file mode 100644
index 0000000..01bcc24
--- /dev/null
+++ b/src/assets/home/china_music/music_item_2.png
Binary files differ
diff --git a/src/assets/home/china_music/next.png b/src/assets/home/china_music/next.png
new file mode 100644
index 0000000..199b1de
--- /dev/null
+++ b/src/assets/home/china_music/next.png
Binary files differ
diff --git a/src/assets/home/china_music/previous.png b/src/assets/home/china_music/previous.png
new file mode 100644
index 0000000..1f031de
--- /dev/null
+++ b/src/assets/home/china_music/previous.png
Binary files differ
diff --git a/src/assets/home/china_music/search.png b/src/assets/home/china_music/search.png
new file mode 100644
index 0000000..b5aa438
--- /dev/null
+++ b/src/assets/home/china_music/search.png
Binary files differ
diff --git a/src/assets/home/china_music/title.png b/src/assets/home/china_music/title.png
new file mode 100644
index 0000000..db9ef21
--- /dev/null
+++ b/src/assets/home/china_music/title.png
Binary files differ
diff --git a/src/components/Pagination/pagination.vue b/src/components/Pagination/pagination.vue
new file mode 100644
index 0000000..7152cdb
--- /dev/null
+++ b/src/components/Pagination/pagination.vue
@@ -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>
diff --git a/src/router/index.js b/src/router/index.js
index 203e22d..0d00530 100644
--- a/src/router/index.js
+++ b/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: '强军网-首页' }
diff --git a/src/views/home/components/ArtChina.vue b/src/views/home/components/ArtChina.vue
index 222bfb4..3c5e86b 100644
--- a/src/views/home/components/ArtChina.vue
+++ b/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>
diff --git a/src/views/music/music_china.vue b/src/views/music/music_china.vue
new file mode 100644
index 0000000..722bea5
--- /dev/null
+++ b/src/views/music/music_china.vue
@@ -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>
--
Gitblit v1.8.0