renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add horizontal style in VideoCard

Browse Source 
* fix: 修正滑動到影片卡片hover效果有時會出現被裁切問題
This commit is contained in:
Hakadao
2023-10-13 18:45:28 +08:00
parent 7720eeb29b
commit e7a47cf2df
1 changed files with 73 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/VideoCard.vue
View File

@@ -7,6 +7,7 @@ const props = defineProps<{
duration?: number
durationStr?: string
title: string
desc?: string
cover: string
author?: string
authorFace?: string
@@ -20,6 +21,7 @@ const props = defineProps<{
bvid?: string
aid?: number
isFollowed?: boolean
horizontal?: boolean
}>()
const videoUrl = computed(() => {
@@ -134,9 +136,8 @@ function handelMouseLeave() {
<div
class="video-card group"
:class="isDislike ? 'is-dislike' : ''"
m="b-8" pos="absolute top-0 left-0" w-full h-full
rounded="$bew-radius"
:style="{ contentVisibility }"
p-20px m--20px w="[calc(100%+40px)]" pos="absolute top-0 left-0"
rounded="$bew-radius" content-visibility-auto
@mousemove="handleMouseMove"
@mouseleave="handelMouseLeave"
>
@@ -176,9 +177,12 @@ function handelMouseLeave() {
</div>
</div>
<div>
<div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
<!-- Cover -->
<div
w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
:style="{ width: horizontal ? '250px' : '100%' }"
shrink-0
w="full" h-fit relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
group-hover:transform="translate--4px"
style="--un-shadow:
0 0 0 4px var(--bew-theme-color),
@@ -233,8 +237,16 @@ function handelMouseLeave() {
>
</div>
<div flex="~" m="t-4">
<div class="flex">
<!-- Other Information -->
<div
:style="{
width: horizontal ? '100%' : 'unset',
marginTop: horizontal ? '0' : '1rem'
}"
flex="~"
>
<!-- Author Avatar -->
<div :style="{ display: horizontal ? 'none' : 'flex' }">
<a
v-if="authorFace"
m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
@@ -328,24 +340,50 @@ function handelMouseLeave() {
</div> -->
</template>
</div>
<div
v-if="author"
class="channel-name"
text="base $bew-text-2"
m="t-2" cursor-pointer
@click="gotoChannel(mid ?? 0)"
>
{{ author }}
</div>
<div class="video-info" text="base $bew-text-2">
<span v-if="view || viewStr">{{
view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
}}</span>
<template v-if="danmaku || danmakuStr">
<span text-xs font-light mx-1>•</span>
<span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
<div text="base $bew-text-2" w-fit m="t-2">
<span
v-if="author"
class="channel-name"
text="hover:$bew-text-1"
cursor-pointer mr-4
@click="gotoChannel(mid ?? 0)"
>
{{ author }}
</span>
<template v-if="horizontal">
<span v-if="view || viewStr">{{
view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
}}</span>
<template v-if="danmaku || danmakuStr">
<span text-xs font-light mx-1>•</span>
<span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
</template>
</template>
<br>
</div>
<!-- Video Description -->
<div
v-if="desc"
mt-2 text="base $bew-text-2" w-full max-h-12 overflow-y-scroll
style="white-space: pre-line;"
>
{{ desc }}
</div>
<div text="base $bew-text-2">
<!-- View & Danmaku Count -->
<template v-if="!horizontal">
<span v-if="view || viewStr">{{
view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
}}</span>
<template v-if="danmaku || danmakuStr">
<span text-xs font-light mx-1>•</span>
<span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
</template>
<br>
</template>
<!-- Capsule -->
<span v-if="publishedTimestamp || capsuleText" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
{{ publishedTimestamp ? calcTimeSince(publishedTimestamp * 1000) : capsuleText }}
</span>
@@ -357,11 +395,20 @@ function handelMouseLeave() {
<!-- skeleton -->
<div
:style="{ display: horizontal ? 'flex' : 'block' }"
mb-10 pointer-events-none select-none invisible
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<!-- Cover -->
<div :style="{ width: horizontal ? '250px' : '100%' }" aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<!-- Other Information -->
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div
:style="{
width: horizontal ? '100%' : 'unset',
marginTop: horizontal ? '0' : '1rem'
}"
w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0
/>
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />