topverse
/
TOPVERSE_Official
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 优化3D场景TOPOLAND页面

This commit is contained in:
胡鑫 2023-06-01 15:36:34 +08:00
parent 27ab620362
commit 9f81b0a012
25 changed files with 141 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Footer.vue
View File

@ -5,8 +5,8 @@ const footer = useFoot()
</script> </script>
<template> <template>
<Divider /> <!-- <Divider /> -->
<div class="grid-row p-20 pt-30 lg:(grid-cols-3) grid-cols-2 md:(px-30) xl:px-60"> <div class="grid-row grid-cols-2 p-20 pt-30 lg:(grid-cols-3) md:(px-30) xl:px-60">
<div <div
v-for="(col, i) in footer.links" v-for="(col, i) in footer.links"
:key="i" :key="i"

10
components/ImageHover.vue
View File

@ -7,12 +7,12 @@ $defineProps<{
</script> </script>
<template> <template>
<NuxtLink <LocaleNuxtLink
:href="href" :href="href"
class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg" class="group h-min-200px relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
> >
<!-- <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" /> --> <!-- <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" /> -->
<ImageLoading :src="img" class="h-full w-full" /> <ImageLoading :src="img" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
<div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)"> <div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
<div class="text-h6 flex-grow"> <div class="text-h6 flex-grow">
<p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)"> <p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">
@ -21,12 +21,12 @@ $defineProps<{
</div> </div>
<div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white /> <div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
</div> </div>
</NuxtLink> </LocaleNuxtLink>
</template> </template>
<style scoped> <style scoped>
.mask-img{ .mask-img{
--uno:'absolute bottom-0 left-0 z-1 flex w-full items-center justify-center border-t-2px border-dark-50/10 p-2 px-10 backdrop-blur-md transition '; --uno:'absolute bottom-0 left-0 z-1 flex w-full items-center justify-center border-t-2px border-dark-50/10 p-2 px-10 transition ';
box-shadow: 0 -5px 25px rgba(0,0,0,0.4); box-shadow: 0 -5px 25px rgba(0,0,0,0.4);
} }
</style> </style>

18
components/ImageLoading.vue
View File

@ -1,25 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { useImage } from '@vueuse/core' import { useImage } from '@vueuse/core'
const props = $defineProps<{ const props = $defineProps<{
src:string src: string
errSrc?:string errSrc?: string
}>() }>()
// const isGIF = // const isGIF =
const avatarUrl = props.src const avatarUrl = props.src
const { isLoading,error } = useImage({ src: avatarUrl }) const { isLoading, error } = useImage({ src: avatarUrl })
</script> </script>
<template> <template>
<div v-if="isLoading" class="animate-pulse w-full h-full bg-slate/10 flex items-center justify-center"> <div v-if="isLoading" class="h-full w-full flex animate-pulse items-center justify-center bg-slate/10">
<div class="i-line-md-loading-twotone-loop"/> <div class="i-line-md-loading-twotone-loop" />
</div> </div>
<!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center"> <!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
Error Error
</div> --> </div> -->
<img v-else :src="error?errSrc:avatarUrl" style="object-fit: cover;"> <img v-else :src="error ? errSrc : avatarUrl" style="object-fit: cover;">
</template> </template>

11
components/LocaleNuxtLink.vue
View File

@ -1,13 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
$defineProps<{ const props = $defineProps<{
href?: string href?: string
}>() }>()
const localePath = useLocalePath() const localePath = useLocalePath()
const { locale, locales, setLocale, defaultDirection } = useI18n()
function getPath() {
return locale.value === 'zh' ? props.href : `/en${props.href}`
}
</script> </script>
<template> <template>
<NuxtLink :href="href && localePath(href)"> <NuxtLink :href="getPath()">
<!-- <NuxtLink :href="href && localePath(href)"> -->
<slot /> <slot />
</NuxtLink> </NuxtLink>
</template> </template>

14
components/Typography.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
$defineProps<{ $defineProps<{
title?: string title?: string
titleClass?:string titleClass?: string
topic?: string topic?: string
topicClass?: string topicClass?: string
description?: string description?: string
@ -15,22 +15,22 @@ $defineProps<{
</script> </script>
<template> <template>
<div class="text-center "> <div class="text-center">
<p v-if="title" class="text-title" :class="[`text-${textColor}`,titleClass]" drop-shadow> <p v-if="title" class="text-title" :class="[`text-${textColor}`, titleClass]" drop-shadow>
{{ title }} {{ title }}
</p> </p>
<h2 v-if="topic" class="md:text-h2 text-h4 font-bold" :class="[`text-${textColor}`,topicClass]" drop-shadow> <h2 v-if="topic" class="md:text-h2 text-h4 font-bold" :class="[`text-${textColor}`, topicClass]" drop-shadow>
{{ topic }} {{ topic }}
</h2> </h2>
<p v-if="description" :class="[`text-${textColor}`,descriptionClass]" text-h6 pb-5 drop-shadow> <p v-if="description" :class="[`text-${textColor}`, descriptionClass]" text-h6 pb-5 drop-shadow>
{{ {{
description description
}} }}
</p> </p>
<NuxtLink v-if="link" :href="link?.href"> <LocaleNuxtLink v-if="link" :href="link?.href">
<ABtn variant="light" class="group" color="white" icon="i-solar-arrow-right-linear transition-all group-hover:px-4"> <ABtn variant="light" class="group" color="white" icon="i-solar-arrow-right-linear transition-all group-hover:px-4">
{{ link?.name }} {{ link?.name }}
</ABtn> </ABtn>
</NuxtLink> </LocaleNuxtLink>
</div> </div>
</template> </template>

4
components/header/header.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute z-100 top-0"> <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute z-100 top-0">
<NuxtLink to="/" class="w-35 flex items-center gap-5"> <LocaleNuxtLink href="/" class="w-35 flex items-center gap-5">
<BrandLogo /> <BrandLogo />
</NuxtLink> </LocaleNuxtLink>
<nav h-full flex items-center> <nav h-full flex items-center>
<HeaderNav /> <HeaderNav />
</nav> </nav>

6
components/header/nav.vue
View File

@ -24,7 +24,7 @@ const flag: any = {
<template> <template>
<nav class="flex flex-wrap"> <nav class="flex flex-wrap">
<LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class=" mx-2 border-primary p-1 pb-5 transition-all" :href="nav.href" active-class="border-b-3px"> <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :href="nav.href" active-class="border-b-3px">
<ABtn variant="text"> <ABtn variant="text">
<AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="" z-1000 mt-5 placement="bottom"> <AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="" z-1000 mt-5 placement="bottom">
<AList <AList
@ -52,13 +52,13 @@ const flag: any = {
</ABtn> </ABtn>
</LocaleNuxtLink> </LocaleNuxtLink>
<LocaleNuxtLink <LocaleNuxtLink
v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)" v-for="l in availableLocales" :key="l.code" :to="switchLocalePath(l.code)"
class="mx-2 border-primary p-1 pb-5 transition-all" class="mx-2 border-primary p-1 pb-5 transition-all"
> >
<ABtn <ABtn
variant="text" variant="text"
> >
<span :class="flag[locale.code]" /> <span :class="flag[l.code]" />
<!-- {{ flag[locale.code] }} --> <!-- {{ flag[locale.code] }} -->
</ABtn> </ABtn>
</LocaleNuxtLink> </LocaleNuxtLink>

6
config/pages/home/use-section-three.ts
View File

@ -11,12 +11,12 @@ export function useSectionThree() {
{ {
topic: 'home.sectionThree.contentPrimary.topic[0]', topic: 'home.sectionThree.contentPrimary.topic[0]',
img: '/imgs/Home-Stories/ParcelCreatorverse.jpg', img: '/imgs/Home-Stories/ParcelCreatorverse.jpg',
href: 'release/creatorpartyverse', href: '/release/creatorpartyverse',
}, },
{ {
topic: 'home.sectionThree.contentPrimary.topic[1]', topic: 'home.sectionThree.contentPrimary.topic[1]',
img: '/imgs/Home-Stories/HoloWater.jpg', img: '/imgs/Home-Stories/HoloWater.jpg',
href: 'release/holowater', href: '/release/holowater',
}, },
], ],
contentSecondary: [ contentSecondary: [
@ -24,7 +24,7 @@ export function useSectionThree() {
{ {
topic: 'home.sectionThree.contentSecondary.topic[0]', topic: 'home.sectionThree.contentSecondary.topic[0]',
img: '/imgs/Home-Stories/NeverDrinkAlone.jpg', img: '/imgs/Home-Stories/NeverDrinkAlone.jpg',
href: 'release/bar-symphony', href: '/release/bar-symphony',
}, { }, {
topic: 'home.sectionThree.contentSecondary.topic[1]', topic: 'home.sectionThree.contentSecondary.topic[1]',
img: '/imgs/Home-Stories/RIBAChangan.jpg', img: '/imgs/Home-Stories/RIBAChangan.jpg',

4
config/use-foot.ts
View File

@ -1,8 +1,4 @@
export function useFoot() { export function useFoot() {
const { locale } = useI18n()
const path = locale.value === 'zh' ? '/' : `/${locale.value}`
return { return {
copyright: 'foot.copyright', copyright: 'foot.copyright',
release: 'foot.release', release: 'foot.release',

19
content/en/bar-symphony.md
View File

@ -37,23 +37,4 @@ publish: "07/10/2022"
:model-content{src='/model/house/scene.gltf'} :model-content{src='/model/house/scene.gltf'}
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

19
content/en/changannostalgia.md
View File

@ -29,23 +29,4 @@ Publish: "07/10/2022"
</p> </p>
此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。 此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

19
content/en/creatorpartyverse.md
View File

@ -8,21 +8,4 @@ resume: "TOPVERSE® Lab 创始人"
publish: "07/10/2022" publish: "07/10/2022"
--- ---
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
🧪 Working in Progress
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

17
content/en/holowater.md
View File

@ -7,23 +7,6 @@ author: "Greyson"
resume: "TOPVERSE® Lab 创始人" resume: "TOPVERSE® Lab 创始人"
publish: "07/10/2022" publish: "07/10/2022"
--- ---
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
🧪 Working in Progress
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>
```bash ```bash

20
content/en/terms-of-use.md
View File

@ -116,22 +116,4 @@ These Terms and any dispute or claim arising out of or in connection with them o
=== ===
Email: pr@topverse.world Email: pr@topverse.world
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

22
content/zh/bar-symphony.md
View File

@ -31,24 +31,4 @@ publish: "07/10/2022"
此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。 此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
:model-content{src='/model/house/scene.gltf'} :model-content{src='/model/house/scene.gltf'}
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

19
content/zh/changannostalgia.md
View File

@ -10,21 +10,4 @@ Publish: "07/10/2022"
![Img](/imgs/News/BarSymphony/20230524175132.jpg) ![Img](/imgs/News/BarSymphony/20230524175132.jpg)
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">

20
content/zh/creatorpartyverse.md
View File

@ -36,22 +36,4 @@ publish: "07/10/2022"
由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。 由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

19
content/zh/holowater.md
View File

@ -70,21 +70,4 @@ PC端平台含污水处理站数据采集和显示支撑系统，全方位采集
用数字孪生技术对污水处理厂的施工方法、结构和工艺流程进行可视化展示，可以清晰地看明白污水处理厂的全貌，点击交互还可以看到箱体上层、工艺管线、暖通、自控电器、箱体下层、基坑等具体结构。该应用场景可以极大地提升水务工作站工业项目的可视化及信息的直观程度。通过数字孪生集成水务工作站信息可以极大降低管理成本，缩短预警反应时间，为水务处理工业的信息分析及后续工艺流程的更新升级提供更为宏观的数据基础。 用数字孪生技术对污水处理厂的施工方法、结构和工艺流程进行可视化展示，可以清晰地看明白污水处理厂的全貌，点击交互还可以看到箱体上层、工艺管线、暖通、自控电器、箱体下层、基坑等具体结构。该应用场景可以极大地提升水务工作站工业项目的可视化及信息的直观程度。通过数字孪生集成水务工作站信息可以极大降低管理成本，缩短预警反应时间，为水务处理工业的信息分析及后续工艺流程的更新升级提供更为宏观的数据基础。
![Img](/imgs/News/HoloWater/20230524163506.jpg) ![Img](/imgs/News/HoloWater/20230524163506.jpg)
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>
<p align="center">
<br>
<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
<br><br>

16
content/zh/terms-of-use.md
View File

@ -100,18 +100,4 @@ TOPVERSE®禁止未经授权的指向本网站的超文本链接，以及擅自
   
如对本网站存在任何疑问或建议，请通过pr@topverse.world与我们联系，我们将在15个工作日内进行处理。 如对本网站存在任何疑问或建议，请通过pr@topverse.world与我们联系，我们将在15个工作日内进行处理。
<p align="center">
<img src="./public/topverse.svg" width="600"/>
</p>
<h2 align="center">
</h2><br>
<pre align="center">
</pre>

8
nuxt.config.ts
View File

@ -4,8 +4,8 @@ import { appDescription } from './constants/index'
import { hex2hsl } from './utils/colors' import { hex2hsl } from './utils/colors'
export default defineNuxtConfig({ export default defineNuxtConfig({
ssr:false, ssr: false,
modules: [ modules: [
'@vueuse/nuxt', '@vueuse/nuxt',
'@anu-vue/nuxt', '@anu-vue/nuxt',
@ -22,13 +22,13 @@ export default defineNuxtConfig({
// '@nuxt/image-edge', // '@nuxt/image-edge',
'@nuxt/devtools', '@nuxt/devtools',
], ],
// content: { // content: {
// experimental: { // experimental: {
// clientDB: true // clientDB: true
// } // }
// }, // },
image:{ image: {
// provider:"static" // provider:"static"
}, },
// optimizedImages: { // optimizedImages: {

22
pages/index.vue
View File

@ -27,7 +27,7 @@ const sectionNine = useSectionNine()
</script> </script>
<template> <template>
<Carousel class="mb-5" /> <Carousel class="mb-25" />
<Divider /> <Divider />
<!-- Section One --> <!-- Section One -->
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" /> <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
@ -42,7 +42,7 @@ const sectionNine = useSectionNine()
<a <a
v-for="(img, j) in item.imgs" v-for="(img, j) in item.imgs"
:key="j" :key="j"
class="h-100px md:h-200px w-full flex justify-center" class="h-100px w-full flex justify-center md:h-200px"
:class="[`animated-delay-${j * 100}ms`, { :class="[`animated-delay-${j * 100}ms`, {
'animated animated-fade-in-up animated-faster': sectionTwoVis, 'animated animated-fade-in-up animated-faster': sectionTwoVis,
}]" }]"
@ -50,7 +50,7 @@ const sectionNine = useSectionNine()
:title="$t(img.title)" :title="$t(img.title)"
> >
<!-- <NuxtImg :src="img.img" height="200" fit="cover" loading="lazy"/> --> <!-- <NuxtImg :src="img.img" height="200" fit="cover" loading="lazy"/> -->
<ImageLoading :src="img.img" height="200" fit="cover" loading="lazy"/> <ImageLoading :src="img.img" height="200" fit="cover" loading="lazy" />
</a> </a>
</div> </div>
</div> </div>
@ -135,7 +135,7 @@ const sectionNine = useSectionNine()
<div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }"> <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
<div class="w-45% flex-grow"> <div class="w-45% flex-grow">
<div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);"> <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
<ImageLoading quality="20" :src="item.img" :errSrc="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> <ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
<!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> --> <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
</div> </div>
</div> </div>
@ -148,10 +148,10 @@ const sectionNine = useSectionNine()
<h4 class="text-h4 font-bold"> <h4 class="text-h4 font-bold">
{{ $t(item.topic) }} {{ $t(item.topic) }}
</h4> </h4>
<p class="text-h6 md:text-left"> <p class="text-h6 text-center md:text-left">
{{ $t(item.description) }} {{ $t(item.description) }}
</p> </p>
<div v-if="item.link" w-full py-10> <div v-if="item.link" class="w-full py-10 text-center md:text-left">
<LocaleNuxtLink :href="item.link.href"> <LocaleNuxtLink :href="item.link.href">
<ABtn variant="light" class="group"> <ABtn variant="light" class="group">
{{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" /> {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
@ -174,8 +174,8 @@ const sectionNine = useSectionNine()
:key="i" :key="i"
class="w-full text-center" class="w-full text-center"
> >
<div :class="content.icon" h-60px w-full /> <div :class="content.icon" mb-5 h-60px w-full />
<h4 text-h4 font-bold> <h4 text-h4 mb-1 font-bold>
{{ $t(content.title) }} {{ $t(content.title) }}
</h4> </h4>
<p text-h7> <p text-h7>
@ -202,15 +202,15 @@ const sectionNine = useSectionNine()
</div> </div>
</div> --> </div> -->
</Section> </Section>
<Divider /> <!-- <Divider /> -->
<!-- Section Nine --> <!-- Section Nine -->
<Section class="my-10 flex bg-gradient-pink"> <Section class="my-10 flex bg-gradient-pink">
<Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" /> <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
<ModelContent src="/model/house/Night-City.gltf" :width="300" /> <ModelContent src="/model/house/Night-City.gltf" :width="300" />
</Section> </Section>
<Divider /> <!-- <Divider /> -->
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

75
pages/land.vue
View File

@ -28,7 +28,78 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<div class="h-screen w-screen"> <div flex flex-col items-center justify-center pt-30>
<canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" /> <Typography title="在线体验" topic="3D场景实时交互" description="鼠标移动到画面中，点击即可进入到场景内部，巴拉巴拉巴拉巴拉" />
<div class="relative mt-20 h-600px w-1000px border-5px border-stone rounded shadow md:h-800px md:w-1500px">
<div class="absolute w-full flex items-center justify-between pb-3 -translate-y-full">
<div class="flex gap-4">
<!-- 👉 Sales -->
<div class="flex items-center gap-x-3">
<AAvatar
icon="i-emojione-monotone-letter-w"
color="success"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
:title="['键盘W键', 'text-sm font-normal !text-medium-emphasis']"
:subtitle="['前进', 'font-semibold !text-high-emphasis']"
/>
</div>
<!-- 👉 Revenue -->
<div class="flex items-center gap-x-3">
<AAvatar
icon="i-emojione-monotone-letter-a"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
:title="['键盘A键', 'text-sm !text-medium-emphasis font-normal']"
:subtitle="['左走', 'font-semibold !text-high-emphasis']"
/>
</div>
<!-- 👉 Customer -->
<div class="flex items-center gap-x-3">
<AAvatar
icon="i-emojione-monotone-letter-s"
color="info"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
:title="['键盘S键', 'text-sm !text-medium-emphasis font-normal']"
:subtitle="['右走', 'font-semibold !text-high-emphasis']"
/>
</div>
<!-- 👉 Returns -->
<div class="flex items-center gap-x-3">
<AAvatar
icon="i-emojione-monotone-letter-d"
color="danger"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
:title="['键盘D键', 'text-sm !text-medium-emphasis font-normal']"
:subtitle="['后退', 'font-semibold !text-high-emphasis']"
/>
</div>
</div>
<div>
<div class="flex items-center gap-x-3">
<AAvatar
icon="i-ic-baseline-mouse"
color="orange"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
:title="['鼠标拖动', 'text-sm !text-medium-emphasis font-normal']"
:subtitle="['转换视角', 'font-semibold !text-high-emphasis']"
/>
</div>
</div>
</div>
<canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" class="rounded-sm" />
</div>
</div> </div>
</template> </template>

2
pages/release/[id].vue
View File

@ -14,7 +14,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
<main class="m-auto prose xl:max-w-900px"> <main class="m-auto prose xl:max-w-900px">
<ContentRenderer v-if="data" :value="data" /> <ContentRenderer v-if="data" :value="data" />
</main> </main>
<div class="m-auto mb-20 flex flex-col text-right text-right prose xl:max-w-900px"> <div class="m-auto my-30 flex flex-col text-right text-right prose xl:max-w-900px">
<span class="text-lg font-bold"> <span class="text-lg font-bold">
{{ data?.author }} {{ data?.author }}
</span> </span>

2
tsconfig.json
View File

@ -2,6 +2,6 @@
"extends": "./.nuxt/tsconfig.json", "extends": "./.nuxt/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"strict": true, "strict": true,
"types": ["anu-vue/volar","@nuxt/types", "@nuxt/image"] "types": ["anu-vue/volar", "@nuxt/types", "@nuxt/image"]
} }
} }

12
uno.config.ts
View File

@ -22,12 +22,12 @@ export default defineConfig({
'text-title': ' font-bold opacity-90 uppercase break-words', 'text-title': ' font-bold opacity-90 uppercase break-words',
'text-body': 'text-base tracking-normal break-words', 'text-body': 'text-base tracking-normal break-words',
'text-description': 'text-md text-stone break-words', 'text-description': 'text-md text-stone break-words',
'text-h2': 'line-clamp-2 text-5xl leading-20 break-words font-bold', 'text-h2': ' text-5xl leading-16 break-words font-bold',
'text-h3': 'line-clamp-2 text-4xl leading-13 break-words', 'text-h3': ' text-4xl leading-13 break-words',
'text-h4': 'line-clamp-2 text-2xl leading-10 break-words', 'text-h4': ' text-2xl leading-10 break-words',
'text-h5': 'line-clamp-3 text-xl leading-8 break-words', 'text-h5': ' text-xl leading-8 break-words',
'text-h6': 'line-clamp-3 text-lg leading-6 break-words', 'text-h6': ' text-lg leading-6 break-words',
'text-h7': 'line-clamp-3 text-base break-words', 'text-h7': ' text-base break-words',
'bg-gradient-pink': 'from-pink to-violet bg-gradient-to-r ', 'bg-gradient-pink': 'from-pink to-violet bg-gradient-to-r ',
'bg-gradient-blue': 'from-sky to-indigo bg-gradient-to-r ', 'bg-gradient-blue': 'from-sky to-indigo bg-gradient-to-r ',
'bg-gradient-green': 'from-lime to-green bg-gradient-to-r ', 'bg-gradient-green': 'from-lime to-green bg-gradient-to-r ',