|
|
@@ -1,16 +1,30 @@
|
|
|
<template>
|
|
|
<div class="tab4-3" v-if="musicList.length !== 0">
|
|
|
- <div class="right">
|
|
|
+ <div
|
|
|
+ class="audioBox"
|
|
|
+ v-for="(item, index) in musicList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="musicInfo(item.id, index)"
|
|
|
+ >
|
|
|
+ <span>{{ index + 1 }}</span
|
|
|
+ > 
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 音乐详情 -->
|
|
|
+ <div class="musicinfoBox" v-if="musicInfoShow">
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <div class="musicBack el-icon-arrow-left" @click="musicInfoShow=false"></div>
|
|
|
<!-- 唱片 -->
|
|
|
<div class="right_img" :class="{ musciPlay: musicCdShow }">
|
|
|
- <img class="cd" src="../../assets/img/musicC.png" alt=""/>
|
|
|
- <img class="hk" src="../../assets/img/musicH.png" alt="" />
|
|
|
+ <img class="cd" src="../../assets/imgM/musicC.png" alt="" />
|
|
|
+ <img class="hk" src="../../assets/imgM/musicH.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="right_top">
|
|
|
- <!-- 歌词 -->
|
|
|
+ <!-- 歌词 -->
|
|
|
+ <div class="lyric">
|
|
|
<div class="title">{{ myObj.name }}</div>
|
|
|
<div class="txt" v-html="myObj.description"></div>
|
|
|
</div>
|
|
|
+ <!-- 底部菜单 -->
|
|
|
<div class="right_bottom">
|
|
|
<Audio
|
|
|
:audioSrc="baseURL + myObj.filePath"
|
|
|
@@ -20,69 +34,48 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="left">
|
|
|
- <div class="title">歌单列表</div>
|
|
|
- <div class="listCon">
|
|
|
- <p
|
|
|
- :title="item.name"
|
|
|
- v-for="(item, index) in musicList"
|
|
|
- :key="item.id"
|
|
|
- :class="{ active: audioInd === index }"
|
|
|
- @click="cutMusic(item.id, index)"
|
|
|
- >
|
|
|
- <span
|
|
|
- class="triangle"
|
|
|
- :class="{ triangleShow: audioInd === index }"
|
|
|
- ></span>
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
-  {{ item.name }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
|
|
|
</div>
|
|
|
<div class="tab4-3 conNull" v-else>暂 无 数 据</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Audio from "./audio.vue";
|
|
|
-import axios from "@/utils/request";
|
|
|
+
|
|
|
import { musicList, webVisit } from "@/utils/api";
|
|
|
+import axios from "@/utils/request";
|
|
|
+
|
|
|
export default {
|
|
|
name: "tab4-3",
|
|
|
components: { Audio },
|
|
|
data() {
|
|
|
- // 这里存放数据
|
|
|
+ //这里存放数据
|
|
|
return {
|
|
|
audioInd: 0,
|
|
|
baseURL: "",
|
|
|
musicList: [],
|
|
|
- myObj: {},
|
|
|
// 控制唱片的样式
|
|
|
musicCdShow: true,
|
|
|
+ myObj: {},
|
|
|
+ musicInfoShow:false
|
|
|
};
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
+ //监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
+ //监控data中的数据变化
|
|
|
watch: {
|
|
|
audioInd(index) {
|
|
|
this.myObj = this.musicList[index];
|
|
|
- //控制被选中的音乐滚动在中间
|
|
|
- const gundong = document.querySelector(".listCon");
|
|
|
- gundong.scrollTo({ top: index * 40, behavior: "smooth" });
|
|
|
},
|
|
|
},
|
|
|
- // 方法集合
|
|
|
+ //方法集合
|
|
|
methods: {
|
|
|
- // 点击左侧音乐
|
|
|
- async cutMusic(id, index) {
|
|
|
+ // 点击音乐列表
|
|
|
+ async musicInfo(id, index) {
|
|
|
+ this.musicInfoShow=true
|
|
|
this.audioInd = index;
|
|
|
- // 记录访问量
|
|
|
- await webVisit("music", id);
|
|
|
+ await webVisit("video", id);
|
|
|
// 唱片播放
|
|
|
- this.musicCdShow=true
|
|
|
+ this.musicCdShow = true;
|
|
|
},
|
|
|
//子组件传过来的上一首下一首方法
|
|
|
sonCutMu(val) {
|
|
|
@@ -99,123 +92,82 @@ export default {
|
|
|
this.musicCdShow = val;
|
|
|
},
|
|
|
},
|
|
|
- // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
// 获取服务器前缀地址
|
|
|
this.baseURL = axios.defaults.baseURL;
|
|
|
},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
async mounted() {
|
|
|
let res = await musicList({ pageNum: 1, pageSize: 999 });
|
|
|
this.musicList = res.data.records;
|
|
|
this.myObj = this.musicList[0];
|
|
|
- // 进页面为第一个视频添加访问量
|
|
|
- if (res.data.records[0]) await webVisit("music", res.data.records[0].id);
|
|
|
- // this.videoSrc=this.musicList[0].filePath
|
|
|
- // console.log(998, res);
|
|
|
},
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.conNull {
|
|
|
+ display: flex;
|
|
|
+ height: calc(100vh - 54px);
|
|
|
font-size: 30px;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
color: #b9412e;
|
|
|
-}
|
|
|
-/deep/::-webkit-scrollbar-thumb {
|
|
|
- background-color: #d8b581 !important;
|
|
|
- outline: 1px solid #d8b581 !important;
|
|
|
- outline-offset: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.tab4-3 {
|
|
|
- padding: 30px 200px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 595px;
|
|
|
- .left {
|
|
|
- margin-left: 30px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px 0;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- width: 300px;
|
|
|
- height: 100%;
|
|
|
- .title {
|
|
|
- font-weight: 700;
|
|
|
- text-align: left;
|
|
|
- padding-left: 72px;
|
|
|
- font-size: 22px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .listCon {
|
|
|
+ padding: 10px 30px 30px;
|
|
|
+ .audioBox {
|
|
|
+ padding: 20px 0;
|
|
|
+ background: url("../../assets/imgM/tab4_3play.png") no-repeat center right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #d8b581;
|
|
|
+ color: #c19a5f;
|
|
|
+ & > p {
|
|
|
padding-right: 30px;
|
|
|
- height: 485px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- p {
|
|
|
- .triangle {
|
|
|
- margin-right: 10px;
|
|
|
- display: inline-block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 8px solid transparent;
|
|
|
- border-left: 15px solid transparent;
|
|
|
- border-bottom: 8px solid transparent;
|
|
|
- }
|
|
|
- .triangleShow {
|
|
|
- border-top: 8px solid transparent;
|
|
|
- border-left: 15px solid #b9412e;
|
|
|
- border-bottom: 8px solid transparent;
|
|
|
- }
|
|
|
- text-align: left;
|
|
|
- padding: 0 20px 0 50px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 20px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- margin: 10px 0;
|
|
|
- & > img {
|
|
|
- margin-top: -5px;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- color: #b9412e;
|
|
|
- }
|
|
|
- &:first-child {
|
|
|
- margin-top: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- .active {
|
|
|
- color: #b9412e;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
+ // 音乐详情盒子
|
|
|
+ .musicinfoBox {
|
|
|
+ z-index: 9999;
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: url("../../assets/imgM/bigBac.png") #ede7db center center;
|
|
|
+ .musicBack{
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
.right_img {
|
|
|
position: relative;
|
|
|
- width: 270px;
|
|
|
+ width: 188px;
|
|
|
+ margin: 50px auto 20px;
|
|
|
.cd {
|
|
|
display: block;
|
|
|
- margin: 172px auto 0;
|
|
|
}
|
|
|
.hk {
|
|
|
position: absolute;
|
|
|
- left: 26px;
|
|
|
- top: 150px;
|
|
|
- transition: all .3s;
|
|
|
- transform: rotate(-30deg);
|
|
|
+ left: 0px;
|
|
|
+ top: -15px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: rotate(-24deg);
|
|
|
transform-origin: left;
|
|
|
}
|
|
|
}
|
|
|
@@ -240,27 +192,24 @@ export default {
|
|
|
-o-animation: rotation 1.4s linear infinite;
|
|
|
}
|
|
|
}
|
|
|
- .right_top {
|
|
|
+ /deep/.lyric::-webkit-scrollbar-thumb {
|
|
|
+ outline: 2px solid #e4dcca;
|
|
|
+ }
|
|
|
+ .lyric {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 322px);
|
|
|
overflow-y: auto;
|
|
|
- padding: 15px 50px;
|
|
|
- padding-top: 0;
|
|
|
- flex: 1;
|
|
|
- & > div {
|
|
|
- margin: 10px 0;
|
|
|
+ padding: 10px 15px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ .title {
|
|
|
text-align: center;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- font-size: 22px;
|
|
|
- /deep/p {
|
|
|
- margin: 10px 0;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
+ color: #a1a1a1;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- .title {
|
|
|
- margin-top: 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
+ .txt{
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.right_bottom {
|
|
|
@@ -268,9 +217,9 @@ export default {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- height: 70px;
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ height: 50px;
|
|
|
+ background-color: rgba(216, 181, 129, 0.8);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
