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(video-card): revert to a five-column video card grid layout

Browse Source
This commit is contained in:
Hakadao
2025-01-08 01:21:46 +08:00
parent 2d6bf74bdc
commit 2fc30aaa71
9 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/VideoCard/VideoCard.vue
View File

@@ -416,7 +416,7 @@ provide('getVideoType', () => props.type!)
<div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
<h3
class="keep-two-lines"
text="overflow-ellipsis $bew-text-1"
text="overflow-ellipsis $bew-text-1 lg"
cursor="pointer"
>
<a :href="videoUrl" target="_blank" :title="video.title">
@@ -429,7 +429,7 @@ provide('getVideoType', () => props.type!)
ref="moreBtnRef"
:class="{ 'more-active': showVideoOptions }"
bg="hover:$bew-fill-2 active:$bew-fill-3"
shrink-0 w-30px h-30px m="t--3px r--4px"
shrink-0 w-32px h-32px m="t--3px r--4px"
grid place-items-center cursor-pointer rounded="50%" duration-300
@click.stop.prevent="handleMoreBtnClick"
>
@@ -471,7 +471,7 @@ provide('getVideoType', () => props.type!)
<br>
</div>
</div>
<div mt-2 flex="~ gap-1 wrap" text="xs">
<div mt-2 flex="~ gap-1 wrap" text="sm">
<!-- Tag -->
<span
v-if="video.tag"

10
src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
View File

@@ -24,10 +24,10 @@ const displayedAvatars = computed(() => {
<template>
<div
:style="{
width: Array.isArray(author) && author.length > 1 ? `${28 + (displayedAvatars?.length) * 6}px` : '30px',
height: Array.isArray(author) && author.length > 1 ? '28px' : '30px',
width: Array.isArray(author) && author.length > 1 ? `${28 + (displayedAvatars?.length) * 6}px` : '34px',
height: Array.isArray(author) && author.length > 1 ? '28px' : '34px',
}"
mr-2
mr-4
pos="relative"
shrink-0
>
@@ -41,8 +41,8 @@ const displayedAvatars = computed(() => {
:style="{
zIndex: displayedAvatars.length - index,
left: `${index * 6}px`,
width: displayedAvatars.length > 1 ? `28px` : '30px',
height: displayedAvatars.length > 1 ? `28px` : '30px',
width: displayedAvatars.length > 1 ? `28px` : '34px',
height: displayedAvatars.length > 1 ? `28px` : '34px',
}"
@click.stop=""
>

4
src/components/VideoCard/VideoCardSkeleton.vue
View File

@@ -13,10 +13,10 @@ defineProps<{
<div aspect-video bg="$bew-skeleton" rounded="$bew-radius" />
<div flex mt-5>
<div
m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-skeleton"
m="r-4" w="34px" h="34px" rounded="1/2" bg="$bew-skeleton"
shrink-0
/>
<div w="[calc(100%-30px)]">
<div w="[calc(100%-34px)]">
<div flex="~ col gap-2" mb-4 w-inherit>
<div w-full h-5 bg="$bew-skeleton" rounded-4px />
<div w="3/4" h-5 bg="$bew-skeleton" rounded-4px />