1768 lines
58 KiB
Vue
1768 lines
58 KiB
Vue
<script setup>
|
||
import { RouterLink, RouterView } from "vue-router"
|
||
import { nextTick, onMounted, ref } from "vue"
|
||
|
||
import { getQrcode, getList, monitorState, Generate, monitorMusic, getDetails, lyricsGenerateHttp, lyricsMonitorHttp, quitLoginHttp, likeDetailsHttp } from "./utils/api"
|
||
import { ElMessage } from "element-plus"
|
||
import triangleIcon from "@/components/triangle-icon.vue"
|
||
|
||
onMounted(() => {
|
||
// getLoginQrcode()
|
||
getListData()
|
||
})
|
||
|
||
let list = ref([])
|
||
let listIndex = ref(null) // 列表选中的 Index
|
||
|
||
const getListData = () => {
|
||
getList().then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
|
||
if (res.code != 200) return
|
||
const data = res.data || []
|
||
let isNeedMonitor = false
|
||
data.forEach(element => {
|
||
if (element.status != "complete") {
|
||
isNeedMonitor = true
|
||
}
|
||
})
|
||
|
||
if (isNeedMonitor) {
|
||
monitorMusicState()
|
||
}
|
||
|
||
// data[0].audio_url = "./21be5d73-221f-4e7b-82f0-26c7c71b797e.mp3"
|
||
|
||
islogin.value = true
|
||
list.value = data || []
|
||
})
|
||
}
|
||
|
||
let wxloginVisible = ref(false) // 登录弹窗显示状态
|
||
let wxloginQrcodeLose = ref(false) // 登录二维码失效状态
|
||
let islogin = ref(false) // 登录状态
|
||
let token = ""
|
||
let qrcode = ref("")
|
||
|
||
// 获取二维码
|
||
const getLoginQrcode = () => {
|
||
getQrcode().then(res => {
|
||
if (res.code != 200) return
|
||
|
||
const data = res.data || {}
|
||
token = data.token || ""
|
||
qrcode.value = data.qrcode || ""
|
||
wxloginVisible.value = true
|
||
|
||
monitorLogin()
|
||
})
|
||
}
|
||
|
||
// 监听扫码状态
|
||
let monitorTimer = null
|
||
const monitorLogin = () => {
|
||
monitorTimer = setInterval(() => {
|
||
monitorState({ token: token }).then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
|
||
// code 200 为登录成功 400 是等待 201 是失效
|
||
if (res.code == 400) return
|
||
|
||
clearInterval(monitorTimer)
|
||
|
||
if (res.code == 201) {
|
||
wxloginQrcodeLose.value = true
|
||
}
|
||
|
||
if (res.code == 200) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "success",
|
||
})
|
||
wxloginVisible.value = false
|
||
getListData()
|
||
localStorage.setItem("token", res.data?.token)
|
||
}
|
||
})
|
||
}, 3000)
|
||
}
|
||
|
||
const handleClose = () => {
|
||
wxloginVisible.value = false
|
||
wxloginQrcodeLose.value = false
|
||
clearInterval(monitorTimer)
|
||
}
|
||
|
||
let options = ref([
|
||
{
|
||
label: "V2 (老款模型，最长生成1分钟左右)",
|
||
value: "chirp-v2-xxl-alpha",
|
||
},
|
||
{
|
||
label: "V3 (广泛、多才多艺，最多生成2分钟)",
|
||
value: "chirp-v3-0",
|
||
},
|
||
{
|
||
label: "V3.5 (最新模型，更好的歌曲结构，最长生成4分钟）",
|
||
value: "chirp-v3-5",
|
||
},
|
||
])
|
||
|
||
let type = ref("inspiration") // inspiration 灵感 custom 自定义
|
||
|
||
const cutType = key => {
|
||
// 恢复默认值
|
||
obj.value = Object.assign({}, obj.value, {
|
||
"has_vocal": true,
|
||
"prompt": "",
|
||
"gpt_description_prompt": "",
|
||
"mv": "chirp-v3-5",
|
||
"tags": "",
|
||
})
|
||
|
||
// console.log(obj.value)
|
||
type.value = key
|
||
}
|
||
|
||
let obj = ref({
|
||
"gpt_description_prompt": "", // 描述
|
||
"mv": "chirp-v3-5",
|
||
"make_instrumental": false,
|
||
"tags": "", // 标签
|
||
"prompt": "", // 提示
|
||
"history": null,
|
||
"concat_history": null,
|
||
"type": "gen",
|
||
"duration": null, // 持续时间
|
||
"refund_credits": null, // 优惠
|
||
"stream": true, // 流派
|
||
"infill": null, // 填充物
|
||
"has_vocal": true, // 是否有声音
|
||
"error_type": null,
|
||
"error_message": null,
|
||
})
|
||
|
||
// 点击创建音乐
|
||
const creativeMusic = () => {
|
||
Generate({ ...obj.value }).then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
if (res.code != 200) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
})
|
||
return
|
||
}
|
||
const data = res.data || {}
|
||
list.value = data.list.concat(list.value)
|
||
// list.value = list.value.unshift()
|
||
|
||
monitorMusicState(data.metadataid)
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "提交成功",
|
||
type: "success",
|
||
})
|
||
})
|
||
}
|
||
|
||
// let styleVisible = ref(true) // 风格弹窗状态
|
||
// bass, drum, guitar, rock, pop, electro, electronic, metal, heavy metal, heavy metal, heavy metal, heavy metal
|
||
let stylelist = ["bass", "drum", "guitar", "rock", "pop", "electro", "electronic", "metal", "heavy metal", "Subscribe", "heavy metal", "beat", "synth", "hard rock", "rap", "catchy", "powerful", "indie pop"]
|
||
|
||
const addStyle = item => {
|
||
obj.value.tags = obj.value.tags.trim()
|
||
if (obj.value.tags) obj.value.tags += ","
|
||
|
||
obj.value.tags += item
|
||
}
|
||
|
||
const handleMusicList = index => {
|
||
let targetlist = list.value || []
|
||
let target = targetlist[index]
|
||
listIndex.value = index
|
||
|
||
// console.log(target.metadataid)
|
||
if (target.status !== "complete") {
|
||
monitorMusicState(target.metadataid || "没有metadataid")
|
||
}
|
||
getMusicDetails(target.id)
|
||
}
|
||
|
||
let monitorMusicTimer = null
|
||
// 监听音乐的生成状态
|
||
const monitorMusicState = metadataid => {
|
||
clearTimeout(monitorMusicTimer)
|
||
monitorMusicTimer = setTimeout(() => {
|
||
monitorMusic({ metadataid }).then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
if (res.code != 200) return
|
||
const data = res.data || {}
|
||
const dataList = data.list || []
|
||
|
||
if (data.status != "complete") {
|
||
monitorMusicState(metadataid)
|
||
}
|
||
|
||
let obj = {}
|
||
// let isnoneed = 0 // isnoneed > 0 需要继续监听的意思 submitted streaming 代表生产中
|
||
dataList.forEach((element, index) => {
|
||
// if (element.status != "complete") isnoneed++
|
||
// 打开详情并且 已经生成成功后刷新详情
|
||
if (element.status == "complete" && songInfo.value.sid == element.sid) {
|
||
getMusicDetails(element.id)
|
||
}
|
||
obj[element.sid] = index
|
||
})
|
||
|
||
// if (isnoneed > 0) {
|
||
// monitorMusicState(metadataid)
|
||
// }
|
||
|
||
let targetlist = list.value || []
|
||
targetlist.forEach((element, index) => {
|
||
if (obj[element.sid] >= 0) {
|
||
targetlist[index] = dataList[obj[element.sid]]
|
||
delete obj[element.sid]
|
||
}
|
||
})
|
||
|
||
for (const key in obj) {
|
||
targetlist.unshift(dataList[obj[key]])
|
||
}
|
||
list.value = targetlist
|
||
})
|
||
}, 10000)
|
||
}
|
||
|
||
let songInfo = ref({}) // 歌详情
|
||
|
||
const getMusicDetails = id => {
|
||
getDetails({ id }).then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
if (res.code != 200) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
})
|
||
return
|
||
}
|
||
|
||
songInfo.value = res.data
|
||
|
||
previewState.value = true
|
||
})
|
||
}
|
||
|
||
const audio = ref(null)
|
||
const isPlaying = ref(false)
|
||
let audioSrc = ref("")
|
||
|
||
let previewState = ref(false)
|
||
const closeInfo = () => {
|
||
// previewState.value = false
|
||
songInfo.value = {}
|
||
}
|
||
|
||
const playAudio = index => {
|
||
if (index == undefined) {
|
||
index = listIndex.value || 0
|
||
}
|
||
let targetlist = list.value || []
|
||
let target = targetlist[index] || {}
|
||
const url = target.audio_url || ""
|
||
if (audioSrc.value != url) {
|
||
audio.value.src = url
|
||
currentTime.value = 0
|
||
}
|
||
audio.value.play()
|
||
listIndex.value = index
|
||
}
|
||
|
||
const togglePlayPause = () => {
|
||
if (isPlaying.value) {
|
||
pauseAudio()
|
||
} else {
|
||
playAudio()
|
||
}
|
||
}
|
||
|
||
const updatePlayStatus = () => {
|
||
isPlaying.value = !audio.value.paused
|
||
audioSrc.value = audio.value.src || ""
|
||
}
|
||
|
||
const pauseAudio = () => {
|
||
audio.value.pause()
|
||
}
|
||
|
||
const nextAudio = () => {
|
||
if (listIndex.value == null) return
|
||
let targetlist = list.value || []
|
||
let index = listIndex.value
|
||
index = (index + 1) % targetlist.length
|
||
let target = targetlist[index]
|
||
audio.value.src = target.audio_url
|
||
audio.value.play()
|
||
|
||
listIndex.value = index
|
||
}
|
||
|
||
const prevAudio = () => {
|
||
if (listIndex.value == null) return
|
||
|
||
let targetlist = list.value || []
|
||
let index = listIndex.value
|
||
index = (index - 1 + targetlist.length) % targetlist.length
|
||
|
||
let target = targetlist[index]
|
||
audio.value.src = target.audio_url
|
||
audio.value.play()
|
||
|
||
listIndex.value = index
|
||
}
|
||
|
||
const currentTime = ref(0)
|
||
const duration = ref(0)
|
||
|
||
const updateCurrentTime = () => {
|
||
// console.log("4454545")
|
||
currentTime.value = audio.value.currentTime
|
||
}
|
||
|
||
const updateDuration = () => {
|
||
duration.value = audio.value.duration
|
||
}
|
||
|
||
const seekAudio = value => {
|
||
if (value >= 0) {
|
||
audio.value.currentTime = value
|
||
}
|
||
// console.log(value)
|
||
|
||
if (isNaN(value)) {
|
||
currentTime.value = 0
|
||
// console.log(currentTime.value)
|
||
}
|
||
}
|
||
|
||
const formatTime = time => {
|
||
if (isNaN(time)) return "0:00"
|
||
if (time == Infinity) {
|
||
return "-- : --"
|
||
}
|
||
const minutes = Math.floor(time / 60)
|
||
const seconds = Math.floor(time % 60)
|
||
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`
|
||
}
|
||
|
||
// 生成类似
|
||
const generatingSimilar = index => {
|
||
let target = list.value[index]
|
||
|
||
// 判断是显示哪个模式
|
||
if (target.metadata.prompt) {
|
||
cutType("custom")
|
||
} else {
|
||
cutType("inspiration")
|
||
}
|
||
|
||
// console.log("target", target)
|
||
|
||
nextTick(() => {
|
||
// console.log("target.model_name", target.model_name)
|
||
obj.value = { ...target.metadata, mv: target.model_name, title: target.title }
|
||
})
|
||
}
|
||
|
||
// 判断风格是否已经在输入框了
|
||
const judgingExistence = item => {
|
||
const tags = obj.value?.tags || ""
|
||
return !tags.includes(item)
|
||
}
|
||
|
||
// 生成歌词
|
||
const lyricsGenerating = () => {
|
||
if (lyricsMonitorState.value) return
|
||
const prompt = obj.value.prompt || ""
|
||
lyricsMonitorState.value = true
|
||
lyricsGenerateHttp({ prompt })
|
||
.then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
lyricsMonitorState.value = false
|
||
return
|
||
}
|
||
|
||
if (res.code != 200) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
})
|
||
lyricsMonitorState.value = false
|
||
return
|
||
}
|
||
const data = res.data
|
||
// console.log("data", data)
|
||
lyricsMonitor(data.id)
|
||
})
|
||
.catch(() => {
|
||
lyricsMonitorState.value = false
|
||
})
|
||
}
|
||
|
||
let lyricsMonitorTimer = null
|
||
let lyricsMonitorState = ref(false) // 生成状态
|
||
// 监听歌词生成
|
||
const lyricsMonitor = id => {
|
||
setTimeout(() => {
|
||
lyricsMonitorHttp({ id })
|
||
.then(res => {
|
||
if (res.code == 401) {
|
||
getLoginQrcode()
|
||
return
|
||
}
|
||
|
||
const data = res.data
|
||
|
||
if (data.status == "complete") {
|
||
obj.value.prompt = data.text
|
||
obj.value.title = data.title
|
||
lyricsMonitorState.value = false
|
||
} else {
|
||
lyricsMonitor(id)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log("err", err)
|
||
lyricsMonitor(id)
|
||
})
|
||
}, 3000)
|
||
}
|
||
|
||
// 退出登录
|
||
const logOut = () => {
|
||
localStorage.setItem("token", "")
|
||
islogin.value = false
|
||
quitLoginHttp()
|
||
songInfo.value = {}
|
||
list.value = []
|
||
}
|
||
|
||
// 登录
|
||
const register = () => {
|
||
getLoginQrcode()
|
||
}
|
||
|
||
// 点击列表 点赞
|
||
const handlelike = index => {
|
||
let targetlist = list.value || []
|
||
let target = targetlist[index] || {}
|
||
|
||
likeDetailsHttp({ id: target.id }).then(res => {
|
||
if (res.code != 200) {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
})
|
||
return
|
||
}
|
||
const data = res.data || {}
|
||
list.value[index]["is_upvote"] = data.is_upvote || 0
|
||
// 判断 详情预览和点赞的是不是同一首
|
||
if (target.sid == songInfo.value.sid) {
|
||
songInfo.value["is_upvote"] = data.is_upvote || 0
|
||
}
|
||
})
|
||
|
||
// target.is_liked = 1
|
||
}
|
||
|
||
// 切换纯音乐
|
||
const switchchange = value => {
|
||
// 当切换到纯音乐时去掉歌词
|
||
if (!value) {
|
||
obj.value.prompt = ""
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- <div class="flexflex" style="height: calc(100vh - 69px); overflow: auto;"> -->
|
||
<div class="flexflex">
|
||
<div class="left-box">
|
||
<img class="left-bj left-bj1" src="./assets/img/left-bj1.png" />
|
||
<img class="left-bj left-bj2" src="./assets/img/left-bj2.png" />
|
||
<img class="left-bj left-bj3" src="./assets/img/left-bj1.png" />
|
||
<img class="hemisphere-icon" src="./assets/img/hemisphere-icon.png" />
|
||
<img class="logo" src="./assets/img/logo-icon.png" />
|
||
<img class="star" src="./assets/img/star-icon.png" />
|
||
|
||
<div class="tab-box">
|
||
<div class="tab-item" :class="{ 'sel': type == 'inspiration' }" @click="cutType('inspiration')">灵感模式</div>
|
||
<div class="tab-item" :class="{ 'sel': type == 'custom' }" @click="cutType('custom')">自定义模式</div>
|
||
</div>
|
||
<template v-if="type == 'inspiration'">
|
||
<div class="description">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
歌曲描述
|
||
<el-popover placement="right" :width="300" trigger="click" content='描述你想要的音乐风格和主题（例如"关于假日"）。使用流派和氛围，而不是特定的艺术家和歌曲。' popper-class="popper-description">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
<el-input v-model="obj.gpt_description_prompt" class="description-input" style="width: 100%;" type="textarea" placeholder="请输入您的歌曲描述，例如：一首关于青春的冷酷的电子歌曲" maxlength="200" show-word-limit autosize resize="none" />
|
||
</div>
|
||
<div class="toggle-switch title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
<el-switch v-model="obj.has_vocal" class="ml-2" style="--el-switch-on-color: #fbd38d; --el-switch-off-color: #ffffff3d;" :active-value="false" :inactive-value="true" />
|
||
纯音乐
|
||
<el-popover placement="right" :width="150" trigger="click" content="没有歌词的音乐。">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div class="section model">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
音乐模型
|
||
<el-popover placement="right" :width="150" trigger="click" content="官方suno音乐模型">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
|
||
<el-select v-model="obj.mv" placeholder="选择模型" size="large" popper-class="model-select" :popper-append-to-body="false" :suffix-icon="triangleIcon">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="toggle-switch title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
<el-switch v-model="obj.has_vocal" style="--el-switch-on-color: #fbd38d; --el-switch-off-color: #ffffff3d;" :active-value="false" :inactive-value="true" @change="switchchange" />
|
||
纯音乐
|
||
<el-popover placement="right" :width="150" trigger="click" content="没有歌词的音乐。">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lyric" v-if="obj.has_vocal">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
歌词
|
||
<el-popover placement="right" :width="300" trigger="click" content="随机生成歌词，自己写，或者从Al那里得到一些帮助。使用两首诗（8行）获得最佳效果。">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
<div class="title-right flexacenter">
|
||
<!-- <el-popover popper-class="type-popover" placement="right" :width="280" trigger="click" :teleported="false">
|
||
<div class="lyric-type flexflex">
|
||
<div class="lyric-type-item flexcenter" v-for="item in 7" :key="item">主歌</div>
|
||
</div>
|
||
<template #reference>
|
||
<div class="meta-tags flexcenter">添加元标签</div>
|
||
</template>
|
||
</el-popover> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lyric-content">
|
||
<el-input v-model="obj.prompt" class="lyric-input" maxlength="3000" style="width: 100%;" :rows="4" type="textarea" placeholder="请输入你的歌词" autosize resize="none" />
|
||
<div class="random-btn flexcenter" @click="lyricsGenerating()">
|
||
<img v-if="lyricsMonitorState" class="loading-icon" src="./assets/img/loading-icon.svg" />
|
||
<template v-else>{{ obj.prompt ? "AI优化歌词" : "生成歌词" }}</template>
|
||
</div>
|
||
<div class="numberwords">{{ obj.prompt.length }}/3000</div>
|
||
</div>
|
||
</div>
|
||
<div class="style">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
音乐风格
|
||
<el-popover placement="right" :width="300" trigger="click" content="描述你想要的音乐风格 例如：流行、摇滚、史诗。Suno的模型无法识别具体的艺人名称，但能理解音乐类型和氛围。">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div class="style-content">
|
||
<el-input v-model="obj.tags" class="style-input" maxlength="2000" style="width: 100%;" :rows="4" type="textarea" placeholder="输入音乐风格（英文）" autosize resize="none" />
|
||
<!-- <div class="random-btn flexcenter">选择音乐风格</div> -->
|
||
<div class="style-list">
|
||
<template v-for="item in stylelist">
|
||
<div :key="item" class="style-item" v-if="judgingExistence(item)" @click="addStyle(item)">{{ item }}</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="name">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
歌曲名称
|
||
<el-popover placement="right" trigger="click" content="为你的歌曲命名">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
|
||
<el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="50" placeholder="请输入歌曲名称" />
|
||
</div>
|
||
<div class="section model">
|
||
<div class="title-box flexacenter">
|
||
<div class="title-left flexacenter">
|
||
音乐模型
|
||
<el-popover placement="right" :width="150" trigger="click" content="官方suno音乐模型">
|
||
<template #reference>
|
||
<img class="question-icon" src="./assets/img/question-icon.svg" />
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
|
||
<el-select v-model="obj.mv" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select" :suffix-icon="triangleIcon">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
|
||
</template>
|
||
<!-- <div class="flex1"></div> -->
|
||
<!-- <div class="user-box" v-if="islogin"> -->
|
||
<div class="user-box" v-if="false">
|
||
<img class="user-img" src="https://cdn1.suno.ai/defaultPink.jpg" />
|
||
<div class="user-text flex1">微信用户</div>
|
||
|
||
<el-popover popper-class="user-popover" placement="top" :width="300" trigger="click">
|
||
<div class="user-btn flexcenter" @click.stop="logOut()">退出登录</div>
|
||
<template #reference>
|
||
<div class="user-dot flexcenter">
|
||
<img class="user-dot-icon" src="./assets/img/dot.svg" />
|
||
</div>
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<div class="middle-box flex1">
|
||
<template v-if="list.length == 0">
|
||
<div class="nodata">暂无数据</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="list">
|
||
<div class="item flexflex" :class="{ 'sel': listIndex == index, 'playing': audioSrc == item.audio_url }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
|
||
<div class="progress-bar" v-if="item.status != 'complete'">生成中...</div>
|
||
<div class="img-box" @click="isPlaying && audioSrc == item.audio_url ? pauseAudio() : playAudio(index)">
|
||
<img v-if="item.image_url" class="img" :src="item.image_url" />
|
||
<img v-else class="img" src="https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xG7avCGHpt5oNTyM1Nwws44-UqaPEyOpLewjBmkLTe6SsJ5o8oxYDW_C7QrwtE0o7mQElMUC3lm6UrpsPr3ey21qvjUeOOPrNv6_QpsEVrOxyJ36niqc_cWN6UYoEk7POhf2DtewNDQyOQ~~" />
|
||
<div class="play flexcenter">
|
||
<img v-if="audioSrc == item.audio_url && isPlaying" class="suspend-btn" src="./assets/img/suspend.png" />
|
||
<img v-else class="play-btn" src="./assets/img/play-icon.png" />
|
||
</div>
|
||
</div>
|
||
<div class="content flexflex flex1">
|
||
<div class="name">{{ item.title }}</div>
|
||
<div class="desc">{{ item.tags || item?.metadata?.tags }}</div>
|
||
</div>
|
||
|
||
<div class="like-box flexcenter" @click.stop="handlelike(index)">
|
||
<img v-if="item.is_upvote == 1" class="like-icon" src="./assets/img/like-c-icon.png" />
|
||
<img v-else class="like-icon" src="./assets/img/like-icon.png" />
|
||
</div>
|
||
|
||
<el-popover popper-class="dot-popover" placement="bottom" :width="220" trigger="click" :teleported="false">
|
||
<div class="dot-list" @click.stop="">
|
||
<!-- <a class="dot-item" target="_parent" v-if="item.audio_url" :href="item.audio_url" :download="item.title + '.mp3'">下载MP3</a> -->
|
||
<a class="dot-item" target="_blank" v-if="item.audio_url" :href="item.audio_url">下载MP3</a>
|
||
<a class="dot-item" target="_blank" v-if="item.video_url" :href="item.video_url">下载视频</a>
|
||
<div class="dot-item" @click="generatingSimilar(index)">生成类似</div>
|
||
</div>
|
||
<template #reference>
|
||
<div class="dot flexcenter" @click.stop="">
|
||
<img class="dot-icon" src="./assets/img/dot.svg" />
|
||
</div>
|
||
</template>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<!-- <div class="right-box" v-if="previewState"> -->
|
||
<div class="right-box flexflex">
|
||
<template v-if="JSON.stringify(songInfo) === '{}'">
|
||
<div class="nosong">选择要预览的歌曲。</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="song-info-box">
|
||
<div class="close flexcenter" @click="closeInfo()">
|
||
<img class="close-icon" src="./assets/img/icon12.svg" />
|
||
</div>
|
||
<img class="song-picture" :src="songInfo.image_large_url" />
|
||
<div class="song-info">
|
||
<div class="name">{{ songInfo.title }}</div>
|
||
<div class="desc" v-html="songInfo?.metadata?.tags"></div>
|
||
<div class="like-box flexcenter" @click.stop="handlelike(listIndex)">
|
||
<img v-if="songInfo.is_upvote == 0" class="like-icon" src="./assets/img/like-icon.png" />
|
||
<img v-else class="like-icon" src="./assets/img/like-c-icon.png" />
|
||
</div>
|
||
<div class="desc" v-html="songInfo?.metadata?.prompt"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="register-box flexacenter" v-if="islogin">
|
||
<div class="register-text">Welcome！</div>
|
||
<div class="register-btn" @click.stop="logOut()">[退出登录]</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="base-bottom flexflex">
|
||
<div class="base-middle flexflex">
|
||
<div class="btn flexacenter">
|
||
<div class="btn-item btn-left flexcenter" @click="prevAudio()">
|
||
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
|
||
</div>
|
||
<div class="btn-item btn-centre flexcenter" @click="togglePlayPause()">
|
||
<img v-if="isPlaying" class="suspend" src="./assets/img/suspend-icon.svg" />
|
||
<img v-else class="suspend" src="./assets/img/play-icon.svg" />
|
||
</div>
|
||
<div class="btn-item btn-right flexcenter" @click="nextAudio()">
|
||
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
|
||
</div>
|
||
</div>
|
||
<div class="audio-box flexacenter">
|
||
<div class="time">{{ formatTime(currentTime) }}</div>
|
||
<el-slider class="progress-box" :show-tooltip="false" v-model="currentTime" :min="0" :max="duration" @change="seekAudio" />
|
||
<div class="time time-right">{{ formatTime(duration) }}</div>
|
||
</div>
|
||
<!-- <img class="cyclical-icon" src="./assets/img/loop.png" />
|
||
<img class="cyclical-icon" src="./assets/img/single.png" /> -->
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog class="wxlogin" v-model="wxloginVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
|
||
<div class="wxlogin-box">
|
||
<div class="close-box">
|
||
<img class="close-icon" src="" />
|
||
</div>
|
||
<div class="wxlogin-title">微信登录</div>
|
||
<div class="qrcode-box flexcenter">
|
||
<img class="qrcode-img" :src="qrcode" />
|
||
<div class="lose-box flexcenter" v-if="wxloginQrcodeLose" @click="getLoginQrcode()">
|
||
二维码失效，点击重新获取
|
||
</div>
|
||
</div>
|
||
<div class="hint">扫码关注【SunoAI音乐创作工具】即可登录</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<audio ref="audio" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" @ended="nextAudio" @play="updatePlayStatus" @pause="updatePlayStatus"></audio>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
audio {
|
||
display: none;
|
||
}
|
||
body {
|
||
background-color: #000;
|
||
}
|
||
|
||
.left-box {
|
||
width: 320px;
|
||
// height: calc(100vh - 69px);
|
||
height: 100vh;
|
||
overflow: auto;
|
||
padding: 10px;
|
||
background-color: #000;
|
||
// background-image: url("./assets/img/left-bj.svg");
|
||
background: -webkit-linear-gradient(289.179008025811deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||
background: -moz-linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||
background: linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||
// border-right: 1px solid #252323;
|
||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||
// height: calc(100vh - 69px);
|
||
position: relative;
|
||
z-index: 1;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
|
||
.left-bj {
|
||
&.left-bj1 {
|
||
top: 0;
|
||
height: 341px;
|
||
}
|
||
&.left-bj2 {
|
||
top: 341px;
|
||
height: 551px;
|
||
transform: rotate(180deg);
|
||
}
|
||
&.left-bj3 {
|
||
top: 892px;
|
||
}
|
||
position: fixed;
|
||
left: 0;
|
||
width: 319px;
|
||
// height: 440px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.hemisphere-icon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 80px;
|
||
height: 83px;
|
||
}
|
||
.logo {
|
||
width: 131px;
|
||
height: 32px;
|
||
margin: 20px auto 44px;
|
||
display: block;
|
||
}
|
||
.star {
|
||
z-index: -1;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 0;
|
||
width: 154px;
|
||
height: 158px;
|
||
left: 34px;
|
||
bottom: 63px;
|
||
}
|
||
.user-box {
|
||
display: flex;
|
||
align-items: center;
|
||
// padding: 4px;
|
||
padding-left: 10px;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
.user-img {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
}
|
||
.user-text {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
padding-left: 7px;
|
||
}
|
||
|
||
.user-dot {
|
||
padding: 0 12px;
|
||
min-width: 32px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
.user-dot-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-box {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 5px;
|
||
height: 46px;
|
||
border: 1px solid rgba(255, 255, 255, 0.196078);
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
border-radius: 10px;
|
||
color: #adadad;
|
||
margin-bottom: 24px;
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
&:first-of-type {
|
||
margin-right: 5px;
|
||
}
|
||
&.sel {
|
||
color: #000;
|
||
background: -webkit-linear-gradient(344.577838681261deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
background: -moz-linear-gradient(105.422161318739deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
background: linear-gradient(105.422161318739deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
border: none;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.description {
|
||
margin-bottom: 24px;
|
||
.title {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.description-input {
|
||
/deep/ .el-textarea__inner {
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
border-radius: 10px;
|
||
|
||
color: #fff;
|
||
min-height: 180px !important;
|
||
// max-height: 300px;
|
||
padding: 16px 13px;
|
||
}
|
||
/deep/ .el-input__count {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.498039215686275);
|
||
background: transparent;
|
||
}
|
||
// min-height: 31px;
|
||
min-height: 94px;
|
||
width: 100%;
|
||
color: #ffffffeb;
|
||
line-height: 1.5;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.toggle-switch {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
.el-switch {
|
||
margin-right: 10px;
|
||
}
|
||
margin-bottom: 24px !important;
|
||
}
|
||
|
||
.title-box {
|
||
margin-bottom: 10px;
|
||
justify-content: space-between;
|
||
|
||
.title-left {
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
.question-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/deep/ .el-popper {
|
||
font-size: 12px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.title-right {
|
||
.meta-tags {
|
||
width: 80px;
|
||
height: 28px;
|
||
color: rgb(204 204 204);
|
||
background-color: rgb(26 26 26);
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.model {
|
||
margin-bottom: 24px;
|
||
.title {
|
||
margin-bottom: 10px;
|
||
}
|
||
/deep/ .el-select__wrapper {
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border-radius: 10px;
|
||
|
||
.el-select__selected-item {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
// /deep/ .el-popper {
|
||
// .el-select-dropdown.model-select {
|
||
// .el-select-dropdown__item {
|
||
// color: #606266;
|
||
// &.is-selected {
|
||
// color: #fff;
|
||
// }
|
||
// &.is-hovering {
|
||
// background: #232426 !important;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
|
||
.creation-btn {
|
||
padding: 0 16px;
|
||
cursor: pointer;
|
||
min-height: 44px;
|
||
height: 50px;
|
||
background: -webkit-linear-gradient(350.537677791974deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
background: -moz-linear-gradient(99.4623222080256deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
background: linear-gradient(99.4623222080256deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-weight: 650;
|
||
font-size: 24px;
|
||
color: #000000;
|
||
}
|
||
|
||
.lyric {
|
||
.title-box {
|
||
.el-popper.type-popover {
|
||
.lyric-type {
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
.lyric-type-item {
|
||
width: 72px;
|
||
height: 24px;
|
||
color: rgb(170 170 170);
|
||
cursor: pointer;
|
||
border-radius: 9999px;
|
||
border: 1px solid #aaa;
|
||
&:hover {
|
||
border-color: #ddd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.lyric-content {
|
||
/deep/ .lyric-input {
|
||
.el-textarea__inner {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
color: #fff;
|
||
min-height: 107px !important;
|
||
max-height: 300px;
|
||
padding: 16px 13px;
|
||
}
|
||
|
||
.el-input__count {
|
||
background: transparent;
|
||
}
|
||
}
|
||
padding-bottom: 7px;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
||
// border: 1px solid rgba(255, 255, 255, 0.196078);
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
|
||
border-radius: 10px;
|
||
color: #adadad;
|
||
margin-bottom: 24px;
|
||
|
||
position: relative;
|
||
.numberwords {
|
||
position: absolute;
|
||
bottom: 6px;
|
||
right: 13px;
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.498039215686275);
|
||
}
|
||
}
|
||
}
|
||
|
||
.style {
|
||
.style-content {
|
||
/deep/ .style-input {
|
||
.el-textarea__inner {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
min-height: 100px !important;
|
||
color: #fff;
|
||
max-height: 300px;
|
||
padding: 16px 13px;
|
||
}
|
||
}
|
||
padding-bottom: 5px;
|
||
// box-shadow: 0 0 0 1px #252323 inset !important;
|
||
// margin-bottom: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.196078);
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
margin-bottom: 24px;
|
||
border-radius: 10px;
|
||
|
||
.style-list {
|
||
width: calc(100% - 12px);
|
||
display: flex;
|
||
overflow: auto;
|
||
white-space: pre;
|
||
margin: 0 6px;
|
||
box-sizing: border-box;
|
||
|
||
.style-item {
|
||
padding: 0 8px;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
cursor: pointer;
|
||
border-radius: 10px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
margin-bottom: 8px;
|
||
|
||
&:not(:last-of-type) {
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 13px;
|
||
height: 13px;
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.random-btn {
|
||
// background: rgba(255, 255, 255, 0.16);
|
||
// width: 120px;
|
||
margin-left: 7px;
|
||
cursor: pointer;
|
||
// padding: 0 12px;
|
||
// min-width: 32px;
|
||
// height: 32px;
|
||
// border-radius: 6px;
|
||
// color: #fff;
|
||
// font-size: 12px;
|
||
width: 109px;
|
||
height: 36px;
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
// border: none;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
.loading-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
animation: rotate 1s linear infinite;
|
||
@keyframes rotate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.name {
|
||
margin-bottom: 24px;
|
||
|
||
.name-input {
|
||
/deep/ .el-input__wrapper {
|
||
// background: none;
|
||
// box-shadow: 0 0 0 1px #252323 inset !important;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
||
background: rgba(255, 255, 255, 0.0980392);
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/deep/ .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .el-popper {
|
||
background: rgb(25, 25, 26) !important;
|
||
border: none !important;
|
||
box-shadow: 0 0 0 1px #252323 inset !important;
|
||
|
||
&.is-light .el-popper__arrow:before {
|
||
border-color: #252323 !important;
|
||
background: rgb(25, 25, 26) !important;
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
width: 294px;
|
||
height: 100vh;
|
||
overflow: auto;
|
||
// height: calc(100vh - 69px);
|
||
overflow: auto;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.song-info-box {
|
||
height: calc(100vh - 40px);
|
||
overflow: auto;
|
||
}
|
||
.nosong {
|
||
color: #a0aec0;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
padding-top: 40px;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background-color: #fff3;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.song-picture {
|
||
width: 100%;
|
||
}
|
||
.song-info {
|
||
font-size: 14px;
|
||
padding: 10px;
|
||
color: #fff;
|
||
overflow: auto;
|
||
|
||
.name {
|
||
line-height: 24px;
|
||
font-size: 14px;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.desc {
|
||
white-space: pre-line;
|
||
line-height: 24px;
|
||
// margin-bottom: 40px;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.like-box {
|
||
padding: 0 10px;
|
||
width: fit-content;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
margin-bottom: 20px;
|
||
|
||
&:hover {
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.like-icon {
|
||
width: 17px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.register-box {
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 40px;
|
||
padding: 0 15px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
background-color: rgba(51, 51, 51, 1);
|
||
|
||
.register-text {
|
||
font-weight: 650;
|
||
font-size: 20px;
|
||
color: #8080ff;
|
||
}
|
||
|
||
.register-btn {
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.498039215686275);
|
||
}
|
||
}
|
||
}
|
||
|
||
.middle-box {
|
||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||
// height: calc(100vh - 69px);
|
||
height: 100vh;
|
||
overflow: auto;
|
||
padding-top: 10px;
|
||
padding-bottom: 120px;
|
||
.nodata {
|
||
color: #a0aec0;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
padding-top: 40px;
|
||
}
|
||
|
||
.list {
|
||
.item {
|
||
padding-left: 30px;
|
||
padding-right: 30px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
&.sel,
|
||
&:hover {
|
||
background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%) !important;
|
||
}
|
||
|
||
&.playing {
|
||
.img-box {
|
||
.play {
|
||
display: flex;
|
||
}
|
||
}
|
||
.content {
|
||
.name {
|
||
color: #e7c25b;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img-box {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-right: 20px;
|
||
border-radius: 6px;
|
||
|
||
.img {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 6px;
|
||
}
|
||
&:hover {
|
||
.play {
|
||
display: flex;
|
||
}
|
||
}
|
||
.suspend-box,
|
||
.play {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
.play-btn {
|
||
width: 36px;
|
||
}
|
||
|
||
.suspend-btn {
|
||
width: 46px;
|
||
}
|
||
}
|
||
|
||
.play {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
position: relative;
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
|
||
background-size: 300% 100%;
|
||
animation: gradientAnimation 5s linear infinite;
|
||
}
|
||
|
||
@keyframes gradientAnimation {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 14px;
|
||
line-height: 21px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
.name {
|
||
font-weight: 700;
|
||
color: #fff;
|
||
word-break: break-word;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 6px;
|
||
}
|
||
.desc {
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.like-box {
|
||
padding: 0 10px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
&:hover {
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.like-icon {
|
||
width: 17px;
|
||
}
|
||
}
|
||
|
||
.dot {
|
||
padding: 0 10px;
|
||
min-width: 32px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
&:hover {
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.dot-icon {
|
||
widows: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
|
||
/deep/ .dot-popover {
|
||
padding: 0;
|
||
|
||
.dot-list {
|
||
padding: 5px 0;
|
||
.dot-item {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
display: block;
|
||
text-decoration: none;
|
||
&:hover {
|
||
background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.base-bottom {
|
||
background-color: rgb(22 22 22);
|
||
border: 1px solid rgba(255, 255, 255, 0.19);
|
||
// border-top: 1px solid #222222;
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
// padding-top: 24px;
|
||
height: 68px;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
position: fixed;
|
||
bottom: 10px;
|
||
width: 540px;
|
||
height: 96px;
|
||
border-radius: 10px;
|
||
z-index: 10;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
.base-middle {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 18px;
|
||
margin-bottom: 6px;
|
||
.btn {
|
||
// margin-right: 24px;
|
||
|
||
.btn-item {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
border: none;
|
||
border-radius: 18px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
// &:hover {
|
||
// .el-icon {
|
||
// font-size: 30px;
|
||
// }
|
||
// }
|
||
|
||
.btn-icon {
|
||
width: 15px;
|
||
height: 16px;
|
||
}
|
||
|
||
&.btn-left {
|
||
.btn-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
&.btn-centre {
|
||
margin-left: 20px;
|
||
margin-right: 20px;
|
||
// background-color: #fbd38d;
|
||
background: transparent;
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
// width: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.audio-box {
|
||
position: relative;
|
||
margin-left: 16px;
|
||
margin-right: 16px;
|
||
.time {
|
||
top: -17px;
|
||
left: 0;
|
||
position: absolute;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 14px;
|
||
&.time-right {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
}
|
||
|
||
.progress-box {
|
||
width: 500px;
|
||
|
||
/deep/ .el-slider__runway {
|
||
height: 6px;
|
||
background-color: rgba(255, 255, 255, 0.803921568627451);
|
||
.el-slider__bar {
|
||
background: rgba(128, 128, 255, 1);
|
||
height: 6px;
|
||
}
|
||
}
|
||
/deep/ .el-slider__button {
|
||
border: none;
|
||
height: 16px;
|
||
width: 16px;
|
||
background: rgba(128, 128, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
.cyclical-icon {
|
||
height: 14px;
|
||
margin-right: 5px;
|
||
margin: 0 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .el-dialog {
|
||
border-radius: 10px;
|
||
color: #fff !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||
background: rgb(25, 25, 26) !important;
|
||
padding: 16px;
|
||
.el-dialog__header {
|
||
display: none;
|
||
}
|
||
|
||
&.wxlogin {
|
||
.el-dialog__body {
|
||
.wxlogin-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.close-box {
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
}
|
||
|
||
.wxlogin-title {
|
||
color: #969595;
|
||
padding: 0 20px;
|
||
height: 40px;
|
||
margin-bottom: 10px;
|
||
line-height: 40px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.qrcode-box {
|
||
width: 300px;
|
||
height: 300px;
|
||
position: relative;
|
||
.qrcode-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.lose-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
color: rgb(204 204 204);
|
||
text-align: center;
|
||
}
|
||
|
||
.remark {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: rgb(180 185 191);
|
||
a {
|
||
color: rgb(88 101 242);
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="less">
|
||
.el-popper {
|
||
background: rgb(25, 25, 26) !important;
|
||
border: none !important;
|
||
box-shadow: 0 0 0 1px #252323 inset !important;
|
||
font-size: 12px !important;
|
||
color: #fff !important;
|
||
|
||
&.is-light .el-popper__arrow:before {
|
||
border-color: #252323 !important;
|
||
background: rgb(25, 25, 26) !important;
|
||
border-left-color: transparent !important;
|
||
border-top-color: transparent !important;
|
||
}
|
||
}
|
||
|
||
.el-popper.model-select {
|
||
.el-select-dropdown__item {
|
||
color: #606266;
|
||
&.is-selected {
|
||
color: #fff;
|
||
}
|
||
&.is-hovering {
|
||
background: #232426 !important;
|
||
}
|
||
}
|
||
}
|
||
.user-popover {
|
||
.user-btn {
|
||
width: 100%;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
margin-top: 12px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.el-switch {
|
||
.el-switch__core {
|
||
height: 24px;
|
||
min-width: 48px;
|
||
border-radius: 48px;
|
||
.el-switch__action {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
|
||
&.is-checked .el-switch__core {
|
||
background: -webkit-linear-gradient(350.53767779deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||
background: -moz-linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||
background: linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||
border: none;
|
||
.el-switch__action {
|
||
left: calc(100% - 21px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|