修改动态样式
This commit is contained in:
parent
536dee50af
commit
0bda04aa7e
|
|
@ -0,0 +1,58 @@
|
|||
<script setup lang="ts">
|
||||
$defineProps<{
|
||||
href: string
|
||||
img: string
|
||||
title: string
|
||||
avatar: string
|
||||
author: string
|
||||
description?: string
|
||||
profession: string
|
||||
createTime: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="w-full overflow-hidden rounded-lg bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))] animated animated-fade-in-up animated-faster"
|
||||
>
|
||||
<ImageHover
|
||||
:href="href"
|
||||
:description="description"
|
||||
:img="img"
|
||||
:topic="title"
|
||||
img-class="h-250px w-full "
|
||||
class="rounded-b-3xl"
|
||||
/>
|
||||
<!-- <ImageLoading style="-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);" :src="item.img" class="h-250px w-full rounded-b-3xl" fit="cover" loading="lazy" />
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-70px">
|
||||
<h3 class="w-200px truncate text-h4 font-bold" :title="item.title">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex items-center justify-between gap-2 p-3 pt-5">
|
||||
<AAvatar :src="avatar" class="flex-shrink-0" />
|
||||
<div class="flex-grow pl-2">
|
||||
<div
|
||||
class="h-80px flex items-center"
|
||||
>
|
||||
<h4 class="line-clamp-3" :title="author">
|
||||
{{ author }}
|
||||
</h4>
|
||||
</div>
|
||||
<p>
|
||||
<small class="truncate">
|
||||
{{ profession }}
|
||||
</small>
|
||||
</p>
|
||||
<p>
|
||||
<small>
|
||||
{{ createTime }}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -2,22 +2,27 @@
|
|||
$defineProps<{
|
||||
img: string
|
||||
topic: string
|
||||
description?: string
|
||||
href: string
|
||||
imgClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LocaleNuxtLink
|
||||
:href="href"
|
||||
class="group h-min-200px relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
class="group h-min-200px relative block h-full w-full overflow-hidden overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
|
||||
>
|
||||
<!-- <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" /> -->
|
||||
<ImageLoading :src="img" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
|
||||
<ImageLoading :src="img" :class="imgClass" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
|
||||
<div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
|
||||
<div class="text-h6 flex-grow">
|
||||
<div class="flex-grow text-h6">
|
||||
<p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">
|
||||
{{ $t(topic) }}
|
||||
</p>
|
||||
<small v-if="description" class="hidden group-hover:block">
|
||||
{{ description }}
|
||||
</small>
|
||||
</div>
|
||||
<div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ export function useArticle() {
|
|||
img: '/imgs/release/vamxlaunch/008.png',
|
||||
tags: ['Mixed Reality'],
|
||||
href: '/release/vamxlaunch',
|
||||
author: 'Xin Lu',
|
||||
profession: 'UCL Bartlett RC9',
|
||||
avatar: '/imgs/Community/Avatar/caadria.png',
|
||||
createTime: '2023/6/6',
|
||||
},
|
||||
{
|
||||
|
|
@ -14,6 +17,9 @@ export function useArticle() {
|
|||
img: '/imgs/release/sakuracity/20230607-135223.jpg',
|
||||
tags: ['Web 3.0', 'Mixed Reality'],
|
||||
href: '/release/sakuracity',
|
||||
author: 'Xin Lu',
|
||||
profession: 'UCL Bartlett RC9',
|
||||
avatar: '/imgs/Community/Avatar/caadria.png',
|
||||
createTime: '2023/6/6',
|
||||
},
|
||||
{
|
||||
|
|
@ -22,6 +28,9 @@ export function useArticle() {
|
|||
img: '/imgs/release/dcic2023/001.png',
|
||||
tags: ['Web 3.0', 'Digital Twins'],
|
||||
href: '/release/dcic2023',
|
||||
author: 'Xin Lu',
|
||||
profession: 'UCL Bartlett RC9',
|
||||
avatar: '/imgs/Community/Avatar/caadria.png',
|
||||
createTime: '2023/04/21',
|
||||
},
|
||||
{
|
||||
|
|
@ -30,6 +39,9 @@ export function useArticle() {
|
|||
img: '/imgs/Release/2023annualreview/s00.jpg',
|
||||
tags: ['Web 3.0', 'Digital Twins'],
|
||||
href: '/release/annualreview2023',
|
||||
author: 'Xin Lu',
|
||||
profession: 'UCL Bartlett RC9',
|
||||
avatar: '/imgs/Community/Avatar/caadria.png',
|
||||
createTime: '2022/1/18',
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -64,47 +64,26 @@ const status = [
|
|||
|
||||
<div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
|
||||
<!-- 👉 2nd card -->
|
||||
<LocaleNuxtLink
|
||||
<Card
|
||||
v-for="(item, i) in list"
|
||||
:key="i"
|
||||
:class="[`animated-delay-${i * 100}ms`]"
|
||||
:title="item.title"
|
||||
:href="item.href"
|
||||
class="w-full overflow-hidden rounded bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
|
||||
:description="item.subtitle"
|
||||
:img="item.img"
|
||||
:avatar="item.avatar"
|
||||
:author="item.author"
|
||||
:profession="item.profession"
|
||||
:create-time="item.createTime"
|
||||
>
|
||||
<ImageLoading style="-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);" :src="item.img" class="h-250px w-full rounded-b-3xl" fit="cover" loading="lazy" />
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-70px">
|
||||
<h3 class="w-200px truncate text-h4 font-bold" :title="item.title">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2 p-3 pt-5">
|
||||
<AAvatar :src="item.avatar" class="flex-shrink-0" />
|
||||
<div class="flex-grow pl-2">
|
||||
<div
|
||||
class="h-80px flex items-center"
|
||||
>
|
||||
<h4 class="line-clamp-3" :title="item.author">
|
||||
{{ item.author }}
|
||||
</h4>
|
||||
</div>
|
||||
<p>
|
||||
<small class="truncate">
|
||||
{{ item.profession }}
|
||||
</small>
|
||||
</p>
|
||||
<p>
|
||||
<small>
|
||||
{{ item.createTime }}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex flex-shrink-0 items-center gap-2">
|
||||
<div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
|
||||
{{ $t(status[item.level].text) }}
|
||||
</div>
|
||||
</div>
|
||||
</LocaleNuxtLink>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,35 @@ const list = computed(() => {
|
|||
</ACard>
|
||||
</div>
|
||||
|
||||
<div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
|
||||
<!-- 👉 2nd card -->
|
||||
<Card
|
||||
v-for="(item, i) in list"
|
||||
:key="i"
|
||||
:class="[`animated-delay-${i * 100}ms`]"
|
||||
:title="item.title"
|
||||
:description="item.subtitle"
|
||||
:img="item.img"
|
||||
:href="item.href"
|
||||
:avatar="item?.avatar"
|
||||
:author="item?.author"
|
||||
:profession="item?.profession"
|
||||
:create-time="item?.createTime"
|
||||
>
|
||||
<template #footer>
|
||||
<ABtn
|
||||
variant="text" icon="i-bx-link-external" icon-only class="h-50px w-20px"
|
||||
@click.prevent="copy(`http://www.topverse.world${item.href}`)"
|
||||
>
|
||||
<ATooltip
|
||||
transition="fade"
|
||||
:text="$t('copylink')"
|
||||
/>
|
||||
</ABtn>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
<!--
|
||||
<ACard w-full shadow="none" class="divide-y divide-dark-50/10">
|
||||
<LocaleNuxtLink v-for="(item, i) in list" :key="i" class="group relative m-4 h-150px w-full flex items-center justify-start" :href="item.href">
|
||||
<div :href="item.href" class="absolute h-full w-1/3 overflow-hidden rounded bg-light-50/10 transition-all group-hover:(w-full opacity-50) md:w-1/2" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
|
||||
|
|
@ -81,7 +110,7 @@ const list = computed(() => {
|
|||
<div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
|
||||
EMPTY
|
||||
</div>
|
||||
</ACard>
|
||||
</ACard> -->
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue