|
@@ -25,7 +25,16 @@
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<div class="typeTools">
|
|
|
- <div class="typeTabCon"></div>
|
|
|
+ <div class="typeTabCon">
|
|
|
+ <div
|
|
|
+ v-for="item in resourcesTypeOption"
|
|
|
+ :key="item.value"
|
|
|
+ @click="handleTypeChange(item.value)"
|
|
|
+ :class="['queryTip', queryData.type === item.value && 'active']"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="query">
|
|
|
<Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
|
|
|
<template #prefix>
|
|
@@ -39,33 +48,7 @@
|
|
|
</div>
|
|
|
<div class="musicListCon">
|
|
|
<div class="queryFrom" :class="{ isExpandAct: !isExpand }">
|
|
|
- <div v-show="queryData.sourceType === 2" class="queryFromList">
|
|
|
- <div class="tit">教程:</div>
|
|
|
- <div class="queryFromCon">
|
|
|
- <div
|
|
|
- v-for="item in musicTagList"
|
|
|
- :key="item.id"
|
|
|
- @click="handleMusicTagChange(item.id)"
|
|
|
- :class="['queryTip', queryData.bookVersionId === item.id && 'active']"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-show="queryData.sourceType !== 3" class="queryFromList">
|
|
|
- <div class="tit">场景:</div>
|
|
|
- <div class="queryFromCon">
|
|
|
- <div
|
|
|
- v-for="item in audioPlayTypesOption"
|
|
|
- :key="item.value"
|
|
|
- @click="handleAudioPlayTypesChange(item.value)"
|
|
|
- :class="['queryTip', queryData.audioPlayTypes === item.value && 'active']"
|
|
|
- >
|
|
|
- {{ item.text }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-show="queryData.audioPlayTypes !== 'SING'" class="queryFromList">
|
|
|
+ <div class="queryFromList">
|
|
|
<div class="tit">乐器:</div>
|
|
|
<div class="queryFromCon">
|
|
|
<template v-for="item in subjectList">
|
|
@@ -100,44 +83,49 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="queryFromList">
|
|
|
+ <div class="tit">标签:</div>
|
|
|
+ <div class="queryFromCon">
|
|
|
+ <div
|
|
|
+ v-for="item in materialTagList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleMaterialTagChange(item.id)"
|
|
|
+ :class="['queryTip', queryData.materialTagId === item.id && 'active']"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-show="queryData.sourceType === 2" @click="isExpand = !isExpand" class="isExpand" :class="{ active: isExpand }">
|
|
|
+ <!-- <div v-show="queryData.sourceType === 2" @click="isExpand = !isExpand" class="isExpand" :class="{ active: isExpand }">
|
|
|
<div>{{ isExpand ? "收起" : "展开" }}</div>
|
|
|
<img src="../../cloudCoachElement/cloudCoachList/imgs/jiao.png" alt="" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="musicListConBox" v-loading="loading">
|
|
|
<div class="musicList" :class="{ empty: !musicList.length && !loading }">
|
|
|
<div class="musicListBox" v-if="musicList.length && !loading">
|
|
|
<div class="musicCon" v-for="item in musicList" :key="item.id">
|
|
|
- <div class="musicLeft">
|
|
|
- <div class="iconCon">
|
|
|
- <img class="icon" :src="item.titleImg" alt="" />
|
|
|
- <img v-if="item.sourceFrom === 'PLATFORM'" class="jxImg" src="../../cloudCoachElement/cloudCoachList/imgs/jx.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="musicInfo">
|
|
|
- <EllipsisScroll class="musicTit" :title="item.highName || ''" />
|
|
|
- <div class="info">
|
|
|
- <div class="hotInfo" v-if="item.usedNum">
|
|
|
- <img src="../../cloudCoachElement/cloudCoachList/imgs/hot.png" alt="" />
|
|
|
- <div>{{ formatNumber(item.usedNum) }}</div>
|
|
|
- </div>
|
|
|
- <div class="play" v-if="item.audioPlayTypes?.includes('SING')">演唱</div>
|
|
|
- <div class="sing" v-if="item.audioPlayTypes?.includes('PLAY')">演奏</div>
|
|
|
- <div class="musicUserName">
|
|
|
- <EllipsisScroll :title="item.composer || ''" />
|
|
|
- </div>
|
|
|
+ <div class="coverImgCon">
|
|
|
+ <img v-if="item.sourceFrom === 'PLATFORM'" class="jxImg" src="./imgs/jxImg.png" alt="" />
|
|
|
+ <div class="addBtn" @click="handleAddResources(item)">添加</div>
|
|
|
+ <img class="coverImg" :src="item.coverImg" />
|
|
|
+ </div>
|
|
|
+ <div class="musicDetails">
|
|
|
+ <div class="musLeft">
|
|
|
+ <img class="labelImg" :src="item.type === 'IMG' ? imgImg : item.type === 'SONG' ? audioImg : videoImg" />
|
|
|
+ <div class="musicTitCon">
|
|
|
+ <EllipsisScroll class="musicTit" :title="item.highName || ''" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="musicRight">
|
|
|
- <img
|
|
|
- v-if="queryParams.fromType !== 'PLATFORM'"
|
|
|
- class="sc"
|
|
|
- @click="handleFavorite(item)"
|
|
|
- :src="item.favoriteFlag ? scActImg : scImg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="addBtn" @click="handleAddMusic(item.id, item.name)">添加</div>
|
|
|
+ <div class="musRight">
|
|
|
+ <img
|
|
|
+ v-if="queryParams.fromType !== 'PLATFORM'"
|
|
|
+ class="sc"
|
|
|
+ @click="handleFavorite(item)"
|
|
|
+ :src="item.favoriteFlag ? scActImg : scImg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -160,20 +148,23 @@ import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
|
|
|
import Empty from "@/components/Empty"
|
|
|
import EllipsisScroll from "@/components/ellipsisScroll"
|
|
|
import { reactive, ref } from "vue"
|
|
|
-import { getMaterialQueryPage, getSubjectListApi, getMusicTagTreeApi, favoriteApi } from "@/api/pptOperate"
|
|
|
+import { getMaterialQueryPage, getSubjectListApi, favoriteApi, getMaterialTagApi } from "@/api/pptOperate"
|
|
|
import { httpAjax } from "@/plugins/httpAjax"
|
|
|
import queryParams from "@/queryParams"
|
|
|
import scActImg from "../../cloudCoachElement/cloudCoachList/imgs/scAct.png"
|
|
|
import scImg from "../../cloudCoachElement/cloudCoachList/imgs/sc.png"
|
|
|
+import audioImg from "./imgs/audio.png"
|
|
|
+import imgImg from "./imgs/img.png"
|
|
|
+import videoImg from "./imgs/video.png"
|
|
|
import { CODE_ERR_CANCELED } from "@/libs/auth"
|
|
|
|
|
|
const emits = defineEmits<{
|
|
|
- (event: "update", id: string, name: string): void
|
|
|
+ (event: "update", item: Record<string, any>): void
|
|
|
(event: "close"): void
|
|
|
}>()
|
|
|
|
|
|
-function handleAddMusic(id: string, name: string) {
|
|
|
- emits("update", id, name)
|
|
|
+function handleAddResources(item: Record<string, any>) {
|
|
|
+ emits("update", item)
|
|
|
emits("close")
|
|
|
}
|
|
|
|
|
@@ -203,15 +194,14 @@ const tabData =
|
|
|
value: 4
|
|
|
}
|
|
|
]
|
|
|
-// 场景
|
|
|
-const audioPlayTypesOption = [
|
|
|
- { text: "全部", value: "" },
|
|
|
- { text: "演唱", value: "SING" },
|
|
|
- { text: "演奏", value: "PLAY" },
|
|
|
- { text: "演唱+演奏", value: "PLAY,SING" }
|
|
|
+// 资源类型
|
|
|
+const resourcesTypeOption = [
|
|
|
+ { text: "图片", value: "IMG" },
|
|
|
+ { text: "音频", value: "SONG" },
|
|
|
+ { text: "视频", value: "VIDEO" }
|
|
|
]
|
|
|
-// 教程
|
|
|
-const musicTagList = ref<any[]>([])
|
|
|
+// 标签
|
|
|
+const materialTagList = ref<any[]>([])
|
|
|
// 乐器
|
|
|
const subjectList = ref<any[]>([])
|
|
|
|
|
@@ -219,10 +209,10 @@ const queryData = reactive({
|
|
|
page: 1,
|
|
|
rows: 21,
|
|
|
total: 0,
|
|
|
+ type: "SONG",
|
|
|
+ materialTagId: "",
|
|
|
sourceType: tabData[0].value,
|
|
|
name: "",
|
|
|
- bookVersionId: "",
|
|
|
- audioPlayTypes: "",
|
|
|
subject: {
|
|
|
id: "",
|
|
|
name: ""
|
|
@@ -236,8 +226,8 @@ const isExpand = ref(true)
|
|
|
|
|
|
getQueryList()
|
|
|
function getQueryList() {
|
|
|
- Promise.all([httpAjax(getSubjectListApi), httpAjax(getMusicTagTreeApi)]).then(res => {
|
|
|
- const [subjectListRes, musicTagTreeRes] = res
|
|
|
+ Promise.all([httpAjax(getSubjectListApi), httpAjax(getMaterialTagApi)]).then(res => {
|
|
|
+ const [subjectListRes, materialTagRes] = res
|
|
|
if (subjectListRes.code === 200) {
|
|
|
subjectList.value = subjectListRes.data.map((item: any) => {
|
|
|
return item.instruments.length > 1 ? Object.assign(item, { isExpand: ref(false) }) : item
|
|
@@ -245,16 +235,8 @@ function getQueryList() {
|
|
|
// 赋默认值
|
|
|
handleSubjectDefault()
|
|
|
}
|
|
|
- if (musicTagTreeRes.code === 200) {
|
|
|
- musicTagList.value = [
|
|
|
- { id: "", name: "全部" },
|
|
|
- ...musicTagTreeRes.data.map((item: any) => {
|
|
|
- return {
|
|
|
- id: item.id,
|
|
|
- name: item.name
|
|
|
- }
|
|
|
- })
|
|
|
- ]
|
|
|
+ if (materialTagRes.code === 200) {
|
|
|
+ materialTagList.value = [{ id: "", name: "全部" }, ...(materialTagRes.data?.rows || [])]
|
|
|
}
|
|
|
handleQuery()
|
|
|
})
|
|
@@ -284,8 +266,8 @@ function clearQueryData() {
|
|
|
queryData.total = 0
|
|
|
queryData.sourceType = 5
|
|
|
queryData.name = ""
|
|
|
- queryData.bookVersionId = ""
|
|
|
- queryData.audioPlayTypes = ""
|
|
|
+ queryData.type = "SONG"
|
|
|
+ queryData.materialTagId = ""
|
|
|
queryData.subject = {
|
|
|
id: "",
|
|
|
name: ""
|
|
@@ -298,17 +280,17 @@ function handleTabChange(sourceType: number) {
|
|
|
queryData.sourceType = sourceType
|
|
|
handleQuery()
|
|
|
}
|
|
|
-function handleMusicTagChange(id: string) {
|
|
|
- queryData.bookVersionId = id
|
|
|
+function handleSubjectChange(item: any) {
|
|
|
+ queryData.subject.id = item.id
|
|
|
+ queryData.subject.name = item.name
|
|
|
handleQuery()
|
|
|
}
|
|
|
-function handleAudioPlayTypesChange(value: string) {
|
|
|
- queryData.audioPlayTypes = value
|
|
|
+function handleMaterialTagChange(id: string) {
|
|
|
+ queryData.materialTagId = id
|
|
|
handleQuery()
|
|
|
}
|
|
|
-function handleSubjectChange(item: any) {
|
|
|
- queryData.subject.id = item.id
|
|
|
- queryData.subject.name = item.name
|
|
|
+function handleTypeChange(type: string) {
|
|
|
+ queryData.type = type
|
|
|
handleQuery()
|
|
|
}
|
|
|
function isActiveSubjectPop(item: any) {
|
|
@@ -330,69 +312,18 @@ function handleQuery() {
|
|
|
let controller: AbortController
|
|
|
function handleGetQuery() {
|
|
|
loading.value = true
|
|
|
- let { sourceType, subject, audioPlayTypes, name, page, rows, bookVersionId } = queryData
|
|
|
+ let { sourceType, subject, type, materialTagId, name, page, rows } = queryData
|
|
|
let musicalInstrumentId = subject.id
|
|
|
- const audioPlayTypesParams = audioPlayTypes ? audioPlayTypes.split(",") : []
|
|
|
- let params: any
|
|
|
- // 相关资源
|
|
|
- if (sourceType === 5) {
|
|
|
- if (audioPlayTypesParams[0] === "SING") {
|
|
|
- musicalInstrumentId = ""
|
|
|
- }
|
|
|
- params = {
|
|
|
- name,
|
|
|
- type: "MUSIC",
|
|
|
- sourceType,
|
|
|
- musicalInstrumentId,
|
|
|
- enableFlag: true,
|
|
|
- page,
|
|
|
- rows,
|
|
|
- audioPlayTypes: audioPlayTypesParams,
|
|
|
- lessonCoursewareKnowledgeId: queryParams.lessonCoursewareKnowledgeId
|
|
|
- }
|
|
|
- }
|
|
|
- if (sourceType === 2) {
|
|
|
- if (audioPlayTypesParams[0] === "SING") {
|
|
|
- musicalInstrumentId = ""
|
|
|
- }
|
|
|
- params = {
|
|
|
- name,
|
|
|
- type: "MUSIC",
|
|
|
- sourceType,
|
|
|
- musicalInstrumentId,
|
|
|
- enableFlag: true,
|
|
|
- page,
|
|
|
- rows,
|
|
|
- audioPlayTypes: audioPlayTypesParams,
|
|
|
- lessonCoursewareKnowledgeId: queryParams.lessonCoursewareKnowledgeId,
|
|
|
- bookVersionId
|
|
|
- }
|
|
|
- }
|
|
|
- if (sourceType === 3) {
|
|
|
- params = {
|
|
|
- name,
|
|
|
- type: "MUSIC",
|
|
|
- sourceType,
|
|
|
- musicalInstrumentId,
|
|
|
- enableFlag: true,
|
|
|
- page,
|
|
|
- rows
|
|
|
- }
|
|
|
- }
|
|
|
- if (sourceType === 4) {
|
|
|
- if (audioPlayTypesParams[0] === "SING") {
|
|
|
- musicalInstrumentId = ""
|
|
|
- }
|
|
|
- params = {
|
|
|
- name,
|
|
|
- type: "MUSIC",
|
|
|
- sourceType,
|
|
|
- musicalInstrumentId,
|
|
|
- enableFlag: true,
|
|
|
- page,
|
|
|
- rows,
|
|
|
- audioPlayTypes: audioPlayTypesParams
|
|
|
- }
|
|
|
+ const params = {
|
|
|
+ name,
|
|
|
+ type,
|
|
|
+ sourceType,
|
|
|
+ musicalInstrumentId,
|
|
|
+ enableFlag: true,
|
|
|
+ page,
|
|
|
+ rows,
|
|
|
+ materialTagId,
|
|
|
+ lessonCoursewareKnowledgeId: [2, 5].includes(sourceType) ? queryParams.lessonCoursewareKnowledgeId : "" // 相关资源和共享资源需要这个
|
|
|
}
|
|
|
if (controller) {
|
|
|
controller.abort()
|
|
@@ -418,16 +349,13 @@ function handleFavorite(item: any) {
|
|
|
httpAjax(favoriteApi, {
|
|
|
favoriteFlag: item.favoriteFlag ? 0 : 1,
|
|
|
materialId: item.id,
|
|
|
- type: "MUSIC"
|
|
|
+ type: item.type
|
|
|
}).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
item.favoriteFlag = !item.favoriteFlag
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-function formatNumber(num: number) {
|
|
|
- return num >= 10000 ? (num / 10000).toFixed(1).replace(/\.0$/, "") + "万" : num.toString()
|
|
|
-}
|
|
|
const highlightedText = (text: string, query: string) => {
|
|
|
if (!text) {
|
|
|
return ""
|
|
@@ -483,10 +411,12 @@ const highlightedText = (text: string, query: string) => {
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 64px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
.tabTools {
|
|
|
- height: 72px;
|
|
|
+ flex-shrink: 0;
|
|
|
width: 100%;
|
|
|
- padding: 18px 30px;
|
|
|
+ padding: 24px 30px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
@@ -524,11 +454,32 @@ const highlightedText = (text: string, query: string) => {
|
|
|
}
|
|
|
}
|
|
|
.typeTools {
|
|
|
+ flex-shrink: 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- .typeTabCon{
|
|
|
-
|
|
|
+ margin: 0 30px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ .typeTabCon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .queryTip {
|
|
|
+ margin-right: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 6px 20px;
|
|
|
+ background: #f5f6fa;
|
|
|
+ border-radius: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active,
|
|
|
+ &:hover {
|
|
|
+ background: #d2ecff;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.query {
|
|
|
width: 400px;
|
|
@@ -575,8 +526,10 @@ const highlightedText = (text: string, query: string) => {
|
|
|
}
|
|
|
}
|
|
|
.musicListCon {
|
|
|
+ padding-top: 16px;
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 72px);
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.queryFrom {
|
|
@@ -677,129 +630,43 @@ const highlightedText = (text: string, query: string) => {
|
|
|
padding: 0 30px;
|
|
|
.musicCon {
|
|
|
margin-bottom: 24px;
|
|
|
- width: calc(33.3333% - 24px);
|
|
|
+ width: calc(25% - 24px);
|
|
|
margin-left: 24px;
|
|
|
- padding: 16px;
|
|
|
- background: #f5f6fa;
|
|
|
border-radius: 12px;
|
|
|
+ background: linear-gradient(0, #dbf1ff 0%, #e7f9ff 100%);
|
|
|
+ outline: 1.5px solid #d3eef1;
|
|
|
+ height: 213px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 102px;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
&:nth-last-child(-n + 3) {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
&:hover {
|
|
|
outline: 2px solid #198cfe;
|
|
|
}
|
|
|
- .musicLeft {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 14px;
|
|
|
- overflow: hidden;
|
|
|
- .iconCon {
|
|
|
- position: relative;
|
|
|
- .icon {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- .jxImg {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 34px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- .musicInfo {
|
|
|
- margin-left: 12px;
|
|
|
- overflow: hidden;
|
|
|
- .musicTit {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #131415;
|
|
|
- line-height: 21px;
|
|
|
- &::v-deep(.highlighted) {
|
|
|
- color: $themeColor;
|
|
|
- }
|
|
|
- }
|
|
|
- .info {
|
|
|
- margin-top: 13px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .hotInfo {
|
|
|
- margin-right: 4px;
|
|
|
- padding: 0 4px;
|
|
|
- background: #fff3f3;
|
|
|
- border-radius: 3px;
|
|
|
- border: 1px solid rgba(254, 67, 67, 0.5);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-shrink: 0;
|
|
|
- line-height: 16px;
|
|
|
- & > img {
|
|
|
- width: 10px;
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
- & > div {
|
|
|
- margin-left: 2px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #fe4343;
|
|
|
- }
|
|
|
- }
|
|
|
- .play {
|
|
|
- margin-right: 4px;
|
|
|
- flex-shrink: 0;
|
|
|
- padding: 0 4px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 3px;
|
|
|
- border: 1px solid rgba(243, 130, 26, 0.5);
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #f3821a;
|
|
|
- line-height: 16px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .sing {
|
|
|
- margin-right: 4px;
|
|
|
- flex-shrink: 0;
|
|
|
- padding: 0 4px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 3px;
|
|
|
- border: 1px solid rgba(21, 178, 253, 0.5);
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #00adff;
|
|
|
- line-height: 16px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .musicUserName {
|
|
|
- overflow: hidden;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- color: #777777;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .musicRight {
|
|
|
+ .coverImgCon {
|
|
|
flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .sc {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 170px;
|
|
|
+ position: relative;
|
|
|
+ .coverImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: top;
|
|
|
+ }
|
|
|
+ .jxImg {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 50px;
|
|
|
+ height: 27px;
|
|
|
}
|
|
|
.addBtn {
|
|
|
- margin-left: 12px;
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 12px;
|
|
|
width: 54px;
|
|
|
height: 26px;
|
|
|
background: #198cfe;
|
|
@@ -815,6 +682,48 @@ const highlightedText = (text: string, query: string) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .musicDetails {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 0 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .musLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ .labelImg {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .musicTitCon {
|
|
|
+ margin-left: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ .musicTit {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #131415;
|
|
|
+ line-height: 20px;
|
|
|
+ &::v-deep(.highlighted) {
|
|
|
+ color: $themeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .musRight {
|
|
|
+ flex-shrink: 0;
|
|
|
+ .sc {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|