feat(ui): enhance homepage with dynamic background images and improved locale selection
This commit is contained in:
@@ -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",
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user