67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { ElLink } from 'element-plus';
|
|
/** 微信消息 - 音乐 */
|
|
defineOptions({ name: 'Music' });
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
required: false,
|
|
type: String,
|
|
default: '',
|
|
},
|
|
description: {
|
|
required: false,
|
|
type: String,
|
|
default: '',
|
|
},
|
|
musicUrl: {
|
|
required: false,
|
|
type: String,
|
|
default: '',
|
|
},
|
|
hqMusicUrl: {
|
|
required: false,
|
|
type: String,
|
|
default: '',
|
|
},
|
|
thumbMediaUrl: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
defineExpose({
|
|
musicUrl: props.musicUrl,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ElLink
|
|
type="success"
|
|
:underline="false"
|
|
target="_blank"
|
|
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
|
|
class="block"
|
|
>
|
|
<div
|
|
class="flex items-center rounded-sm border border-[#e8e8e8] bg-background p-4 transition hover:border-black/10 hover:shadow-sm"
|
|
>
|
|
<div
|
|
class="mr-3 h-12 w-12 overflow-hidden rounded-full border border-transparent"
|
|
>
|
|
<img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="mb-3 text-base font-medium text-[#000000d9]">
|
|
{{ title }}
|
|
</div>
|
|
<div class="line-clamp-3 h-16 overflow-hidden text-sm text-black/45">
|
|
{{ description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ElLink>
|
|
</div>
|
|
</template>
|