feat(ui): enhance homepage with dynamic background images and improved locale selection

This commit is contained in:
xiaomai
2025-11-05 08:13:18 +08:00
parent 5c8baf14c3
commit 113ebabb94
6 changed files with 57 additions and 14 deletions

View File

@@ -4,6 +4,12 @@
<UPageHero
title="Tootaio Studio"
:description="$t('index.heroDescription')"
:ui="{
root: 'relative before:absolute before:inset-0 before:bg-[image:var(--bg-image)] before:bg-cover before:bg-center before:-z-10 before:opacity-40',
}"
:style="{
'--bg-image': `url('${currentBgImage}')`,
}"
/>
<UPageSection
@@ -75,6 +81,32 @@ useSeoMeta({
const colorMode = useColorMode();
const backgroundImages = [
"http://img.tootaio.com/i/2025/11/05/avc5ld.png",
"http://img.tootaio.com/i/2025/11/05/avcaff.png",
"http://img.tootaio.com/i/2025/11/05/avcjbw.png",
"http://img.tootaio.com/i/2025/11/05/avcp16.png",
"http://img.tootaio.com/i/2025/11/05/avcv1q.png",
"http://img.tootaio.com/i/2025/11/05/avd47a.png",
"http://img.tootaio.com/i/2025/11/05/avdx6a.png",
"http://img.tootaio.com/i/2025/11/05/avegxy.png",
"http://img.tootaio.com/i/2025/11/05/avemgn.png",
"http://img.tootaio.com/i/2025/11/05/avf3wl.png",
];
const currentBgImage = ref("");
// 随机选择背景
const randomBg = () => {
const randomIndex = Math.floor(Math.random() * backgroundImages.length);
currentBgImage.value = backgroundImages[randomIndex];
};
// 轮播背景
onMounted(() => {
randomBg();
});
const capabilitiesFeatures = computed<PageFeatureProps[]>(() => [
{
title: $t("index.capabilities.features[0].title"),
@@ -113,14 +145,14 @@ const featuredProjects = ref([
title: "永中校友会官方网站",
description:
"永平中学校友会官方网站的设计与开发项目,整体价值 RM28,000由本工作室创办人无偿捐赠予校友会永久使用。",
image: "/images/project-showcases/yphs-alumni-website.png",
image: "http://img.tootaio.com/i/2025/11/05/d9kurl.png",
demoLink: "https://yphsalumni.org",
},
{
title: "留华生来华资料汇总",
description:
"2022 年疫情期间,为马来西亚留学生开发的返校攻略网站。帮助 5000+ 名留学生顺利返校。并获得马来西亚外交部推荐。",
image: "/images/project-showcases/malaysia-student-return.png",
image: "http://img.tootaio.com/i/2025/11/05/d9kcma.png",
demoLink: "https://tootaio.github.io",
},
{