This commit is contained in:
jxxghp
2024-05-09 15:21:46 +08:00
parent 2065992b17
commit d005252f13
4 changed files with 56 additions and 64 deletions

View File

@@ -18,8 +18,7 @@ function imageLoadHandler() {
// 跳转播放
function goPlay() {
if (props.media?.link)
window.open(props.media?.link, '_blank')
if (props.media?.link) window.open(props.media?.link, '_blank')
}
// 计算图片地址
@@ -30,11 +29,7 @@ const getImgUrl = computed(() => {
</script>
<template>
<VHover
v-bind="props"
:height="props.height"
:width="props.width"
>
<VHover v-bind="props">
<template #default="hover">
<VCard
v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
@click="goPlay"
>
<template #image>
<VImg
:src="getImgUrl"
aspect-ratio="2/3"
cover
@load="imageLoadHandler"
>
<VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -62,7 +52,9 @@ const getImgUrl = computed(() => {
<VCardText
class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
>
<h1 class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
<h1
class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
>
{{ props.media?.title }}
</h1>
<span class="text-shadow">{{ props.media?.subtitle }}</span>
@@ -83,7 +75,7 @@ const getImgUrl = computed(() => {
</template>
<style lang="scss">
.text-shadow{
text-shadow:1px 1px #777;
.text-shadow {
text-shadow: 1px 1px #777;
}
</style>

View File

@@ -18,26 +18,21 @@ const imageLoadError = ref(false)
// 角标颜色
function getChipColor(type: string) {
if (type === '电影')
return 'border-blue-500 bg-blue-600'
else if (type === '电视剧')
return ' bg-indigo-500 border-indigo-600'
else
return 'border-purple-600 bg-purple-600'
if (type === '电影') return 'border-blue-500 bg-blue-600'
else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
else return 'border-purple-600 bg-purple-600'
}
// 计算图片地址
const getImgUrl = computed(() => {
if (imageLoadError.value)
return noImage
if (imageLoadError.value) return noImage
const image = props.media?.image || ''
return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
})
// 跳转播放
function goPlay(isHovering = false) {
if (props.media?.link && isHovering)
window.open(props.media?.link, '_blank')
if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
}
</script>
@@ -72,24 +67,24 @@ function goPlay(isHovering = false) {
</VImg>
<!-- 类型角标 -->
<VChip
v-show="isImageLoaded"
variant="elevated"
size="small"
:class="getChipColor(props.media?.type || '')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
>
{{ props.media?.type }}
</VChip>
<!-- 详情 -->
<VCardText
v-show="hover.isHovering || imageLoadError"
class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
>
<span class="font-bold">{{ props.media?.subtitle }}</span>
<h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
</VCardText>
v-show="isImageLoaded"
variant="elevated"
size="small"
:class="getChipColor(props.media?.type || '')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
>
{{ props.media?.type }}
</VChip>
<!-- 详情 -->
<VCardText
v-show="hover.isHovering || imageLoadError"
class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
>
<span class="font-bold">{{ props.media?.subtitle }}</span>
<h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
</VCardText>
</VCard>
</template>
</VHover>

View File

@@ -17,8 +17,6 @@ const props = defineProps({
// 仪表板配置
config: Object as PropType<DashboardItem>,
})
console.log(props.config)
</script>
<template>
<!-- 系统内置的仪表板 -->