92 lines
1.6 KiB
Vue
92 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
|
|
defineOptions({ name: 'WxMusic' });
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
description?: string;
|
|
hqMusicUrl?: string;
|
|
musicUrl?: string;
|
|
thumbMediaUrl: string;
|
|
title?: string;
|
|
}>(),
|
|
{
|
|
title: '',
|
|
description: '',
|
|
musicUrl: '',
|
|
hqMusicUrl: '',
|
|
},
|
|
);
|
|
|
|
const href = computed(() => props.hqMusicUrl || props.musicUrl);
|
|
|
|
defineExpose({
|
|
musicUrl: props.musicUrl,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 微信消息 - 音乐 -->
|
|
<div>
|
|
<a :href="href" target="_blank" class="text-success no-underline">
|
|
<div class="music-card">
|
|
<div class="music-avatar">
|
|
<img :src="thumbMediaUrl" alt="音乐封面" />
|
|
</div>
|
|
<div class="music-detail">
|
|
<div class="music-title">{{ title }}</div>
|
|
<div class="music-description">{{ description }}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.music-card {
|
|
display: flex;
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.music-avatar {
|
|
flex-shrink: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 12px;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.music-detail {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.music-title {
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.music-description {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
color: #666;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|