|
@@ -19,9 +19,13 @@
|
|
|
|
|
|
<el-row class="pagin_class">
|
|
|
<el-col :span="1"> </el-col>
|
|
|
- <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 10px">
|
|
|
+ <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 60px">
|
|
|
<el-table
|
|
|
- :header-cell-style="{ background: '#E8F1F3', color: '#606266' }"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#66B497',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ 'letter-spacing': '4px',
|
|
|
+ }"
|
|
|
ref="filterTable"
|
|
|
:data="tableData"
|
|
|
style="width: 100%"
|
|
@@ -34,35 +38,31 @@
|
|
|
width="180px"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="musicLength"
|
|
|
- label="时长"
|
|
|
- align="center"
|
|
|
- width="80px"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="mood" label="情绪" align="center">
|
|
|
+ <el-table-column prop="mood" label="情绪" align="center" width="160">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag
|
|
|
- size="mini"
|
|
|
- class="moodStyle"
|
|
|
+ <span
|
|
|
+ class="tag"
|
|
|
v-for="item in scope.row.mood"
|
|
|
:key="item.index"
|
|
|
>
|
|
|
{{ item }}
|
|
|
- </el-tag>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="musicStyle" label="曲风" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="musicStyle"
|
|
|
+ label="曲风"
|
|
|
+ align="center"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag
|
|
|
- size="mini"
|
|
|
- class="moodStyle"
|
|
|
+ <span
|
|
|
+ class="tag"
|
|
|
v-for="item in scope.row.musicStyle"
|
|
|
:key="item.index"
|
|
|
>
|
|
|
{{ item }}
|
|
|
- </el-tag>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="keywords" label="关键词" align="center">
|
|
@@ -73,46 +73,53 @@
|
|
|
width="200"
|
|
|
transition="fade-in-linear"
|
|
|
>
|
|
|
- <el-tag
|
|
|
- size="mini"
|
|
|
- class="moodStyle"
|
|
|
+ <span
|
|
|
+ class="tag"
|
|
|
v-for="item in scope.row.keywords"
|
|
|
:key="item.index"
|
|
|
>
|
|
|
<!-- {{ index }} -->
|
|
|
{{ item }}
|
|
|
- </el-tag>
|
|
|
+ </span>
|
|
|
<div slot="reference" class="name-wrapper">
|
|
|
- <el-tag
|
|
|
- size="mini"
|
|
|
- class="moodStyle"
|
|
|
+ <span
|
|
|
+ class="tag"
|
|
|
v-for="(item, index) in scope.row.keywords"
|
|
|
:key="item.index"
|
|
|
v-show="index < 4"
|
|
|
>
|
|
|
<!-- {{ index }} -->
|
|
|
{{ item }}
|
|
|
- </el-tag>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="musicLength"
|
|
|
+ label="时长"
|
|
|
+ align="center"
|
|
|
+ width="80"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="操作" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <div v-show="scope.row.musicFlag" class="change-icon">
|
|
|
- <i
|
|
|
- @click="musicPlay(scope.$index, scope.row)"
|
|
|
- class="el-icon-video-pause icon-pointer-music"
|
|
|
- ></i>
|
|
|
+ <div
|
|
|
+ v-show="scope.row.musicFlag"
|
|
|
+ class="change-icon"
|
|
|
+ @click="musicPlay(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ <img src="../assets/play2.png" alt="" />
|
|
|
</div>
|
|
|
- <div v-show="!scope.row.musicFlag" class="change-icon">
|
|
|
- <i
|
|
|
- @click="musicPlay(scope.$index, scope.row)"
|
|
|
- class="el-icon-video-play icon-pointer-music"
|
|
|
- ></i>
|
|
|
+ <div
|
|
|
+ v-show="!scope.row.musicFlag"
|
|
|
+ class="change-icon"
|
|
|
+ @click="musicPlay(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ <img src="../assets/play1.png" alt="" />
|
|
|
</div>
|
|
|
<p v-show="scope.row.musicFlag">
|
|
|
- {{timeCo}}
|
|
|
+ {{ timeCo }}
|
|
|
<el-progress
|
|
|
:text-inside="true"
|
|
|
:percentage="progressValue"
|
|
@@ -132,8 +139,8 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- timeCo:'00:00',
|
|
|
- indexFlag:0,
|
|
|
+ timeCo: "00:00",
|
|
|
+ indexFlag: 0,
|
|
|
progressValue: 0,
|
|
|
progressValueFlag: null,
|
|
|
tableData: [
|
|
@@ -454,9 +461,9 @@ export default {
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
- destroyed(){
|
|
|
- this.tableData[this.indexFlag].audio.pause();
|
|
|
- clearInterval(this.progressValueFlag)
|
|
|
+ destroyed() {
|
|
|
+ this.tableData[this.indexFlag].audio.pause();
|
|
|
+ clearInterval(this.progressValueFlag);
|
|
|
},
|
|
|
methods: {
|
|
|
goBack() {
|
|
@@ -471,7 +478,7 @@ export default {
|
|
|
this.$router.go(-1);
|
|
|
},
|
|
|
musicPlay(index, row) {
|
|
|
- this.indexFlag=index;
|
|
|
+ this.indexFlag = index;
|
|
|
this.tableData[index].musicFlag = !row.musicFlag;
|
|
|
let mp3 = __static + row.path;
|
|
|
|
|
@@ -524,19 +531,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computerProcess(i) {
|
|
|
- this.timeCo='00:00'
|
|
|
- this.progressValue=0;
|
|
|
+ this.timeCo = "00:00";
|
|
|
+ this.progressValue = 0;
|
|
|
clearInterval(this.progressValueFlag);
|
|
|
this.progressValueFlag = setInterval(() => {
|
|
|
let a = this.tableData[i].audio.currentTime;
|
|
|
let b = this.tableData[i].audio.duration;
|
|
|
-
|
|
|
- this.timeCo= this.formatterTimeFun(Math.ceil(a))
|
|
|
+
|
|
|
+ this.timeCo = this.formatterTimeFun(Math.ceil(a));
|
|
|
this.progressValue = (a / b) * 100;
|
|
|
console.log(this.progressValue);
|
|
|
- if( this.progressValue==100){
|
|
|
+ if (this.progressValue == 100) {
|
|
|
this.tableData[i].musicFlag = false;
|
|
|
- clearInterval(this.progressValueFlag);
|
|
|
+ clearInterval(this.progressValueFlag);
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
@@ -566,11 +573,20 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
-.warning-row {
|
|
|
- background: #142e51;
|
|
|
+.el-table .warning-row {
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .success-row {
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
-.success-row {
|
|
|
- background: #f7fafb !important;
|
|
|
+
|
|
|
+.el-table--enable-row-hover
|
|
|
+ /deep/
|
|
|
+ .el-table__body
|
|
|
+ tr:hover
|
|
|
+ > td.el-table__cell {
|
|
|
+ background: rgba(223, 246, 237, 1) !important;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
@@ -592,6 +608,12 @@ export default {
|
|
|
text-align: center;
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
+
|
|
|
+.change-icon img {
|
|
|
+ width: 44px;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
.moodStyle {
|
|
|
margin-bottom: 10px;
|
|
|
margin-right: 10px;
|
|
@@ -607,4 +629,27 @@ export default {
|
|
|
display: block !important;
|
|
|
overflow-y: auto !important;
|
|
|
}
|
|
|
+
|
|
|
+.el-table {
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .el-table__cell {
|
|
|
+ padding: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag {
|
|
|
+ display: inline-block;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 40px 40px 40px 40px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #0fb577;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0fb577;
|
|
|
+ padding: 2px 8px;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
</style>
|