89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
||
import type { WxMusicProps } from './types';
|
||
|
||
import { computed } from 'vue';
|
||
|
||
/** 微信消息 - 音乐 */
|
||
defineOptions({ name: 'WxMusic' });
|
||
|
||
const props = withDefaults(defineProps<WxMusicProps>(), {
|
||
title: '',
|
||
description: '',
|
||
musicUrl: '',
|
||
hqMusicUrl: '',
|
||
thumbMediaUrl: '',
|
||
});
|
||
|
||
const href = computed(() => props.hqMusicUrl || props.musicUrl);
|
||
|
||
defineExpose({
|
||
musicUrl: props.musicUrl,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- TODO @hw：是不是用 antd link 更好？ -->
|
||
<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>
|
||
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
|
||
|
||
.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>
|