mirror of
https://github.com/RhenCloud/Cloud-Home.git
synced 2026-01-22 17:39:07 +08:00
RhenCloud
ba95a16f21
- 改进项目页面、网站页面、友链页面 - 从 styles.css 中移除全局样式。 - 添加 tailwind.config.ts 以配置 Tailwind CSS。 - 更新 tsconfig.json，加入 Vue 组件的新路径映射。
35 lines
1.7 KiB
Vue
35 lines
1.7 KiB
Vue
<template>
|
|
<section class="card flex flex-col gap-2.5">
|
|
<h2 class="m-0 mb-1 gradient-text">我的网站</h2>
|
|
<p class="text-text-muted text-sm m-0 mb-3 block">正在运行的站点 · Websites</p>
|
|
<div class="w-full -mx-[1.125rem] -mb-[1.125rem]">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-[1.125rem] pb-[1.125rem]">
|
|
<article
|
|
v-for="site in sites"
|
|
:key="site.url"
|
|
class="bg-gradient-to-br from-white/5 to-white/1 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/60 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-yellow-500/6"
|
|
>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<h3 class="m-0 font-semibold text-base">{{ site.name }}</h3>
|
|
<span class="px-2.5 py-1 rounded-full bg-green-500/14 text-green-300 text-xs font-medium"
|
|
>在线</span
|
|
>
|
|
</div>
|
|
<p class="text-text-muted text-sm m-0 mb-2.5">{{ site.desc }}</p>
|
|
<a
|
|
:href="site.url"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
class="inline-flex items-center gap-1.5 mt-2.5 text-blue-400 font-semibold text-sm hover:text-blue-300 transition-all duration-200 hover:gap-2"
|
|
>查看 →</a
|
|
>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({ sites: Array });
|
|
</script>
|