mirror of
https://github.com/RhenCloud/Cloud-Home.git
synced 2026-01-22 17:39:07 +08:00
style(app): 使用 NuxtImg 替代 img 标签
在多个组件中将 `img` 标签替换为 `NuxtImg` 标签,提升图片加载的性能和优化。例如,在 `AboutSection.vue`、`FriendsSection.vue`、`HeroSection.vue`、`ProjectsSection.vue`、`SitesSection.vue` 和 `SkillsSection.vue` 中的图片标签。 refactor(app): 扩展 `nuxt.config.ts` 配置 扩展了 `nuxt.config.ts` 配置文件中的模块配置,添加了 `@nuxt/image` 和 `@nuxt/eslint` 模块。同时,优化了 `routeRules` 配置,以支持预渲染和增量静态生成。
This commit is contained in:
@@ -3,8 +3,11 @@
|
||||
<h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
|
||||
<p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
|
||||
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
|
||||
<article v-for="p in projects" :key="p.url"
|
||||
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col">
|
||||
<article
|
||||
v-for="p in projects"
|
||||
:key="p.url"
|
||||
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<h3 class="font-medium truncate">
|
||||
{{ p.name }}
|
||||
@@ -17,10 +20,12 @@
|
||||
{{ p.desc }}
|
||||
</p>
|
||||
|
||||
<a :href="p.url" target="_blank" rel="noreferrer"
|
||||
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-yellow-300 hover:text-yellow-400 transition-all duration-200 hover:gap-2">
|
||||
<NuxtLink
|
||||
:to="p.url"
|
||||
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-yellow-300 hover:text-yellow-400 transition-all duration-200 hover:gap-2"
|
||||
>
|
||||
查看仓库 →
|
||||
</a>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@@ -28,6 +33,9 @@
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
projects: Array,
|
||||
projects: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user