41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<template>
|
|
<div class="relative w-full h-64 md:h-80 lg:h-96 overflow-hidden rounded-xl">
|
|
<!-- 背景图片 -->
|
|
<NuxtImg
|
|
src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/%E8%83%8C%E6%99%AF.jpg"
|
|
alt="Blog Hero"
|
|
class="w-full h-full object-cover"
|
|
placeholder
|
|
loading="lazy"
|
|
sizes="100vw sm:50vw md:33vw"
|
|
/>
|
|
|
|
<!-- 渐变遮罩 -->
|
|
<!-- <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-transparent"></div> -->
|
|
|
|
<!-- 内容区域 -->
|
|
<!-- <div class="absolute inset-0 flex items-center justify-start p-8">
|
|
<div class="max-w-2xl">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
|
|
博客文章
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-200 mb-6">
|
|
分享技术见解和心得体会
|
|
</p>
|
|
<div class="flex items-center gap-4 text-white/80">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="lucide-pen-tool" size="20" />
|
|
<span class="text-sm">技术分享</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="lucide-calendar" size="20" />
|
|
<span class="text-sm">持续更新</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
|