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>
<template>
<Divider />
<div class="grid-row p-20 pt-30 lg:(grid-cols-3) grid-cols-2 md:(px-30) xl:px-60">
<!-- <Divider /> -->
<div class="grid-row grid-cols-2 p-20 pt-30 lg:(grid-cols-3) md:(px-30) xl:px-60">
<div
v-for="(col, i) in footer.links"
:key="i"

10
components/ImageHover.vue
View File

@ -7,12 +7,12 @@ $defineProps<{
</script>
<template>
<NuxtLink
<LocaleNuxtLink
: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" /> -->
<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="text-h6 flex-grow">
<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 i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
</div>
</NuxtLink>
</LocaleNuxtLink>
</template>
<style scoped>
.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);
}
</style>

6
components/ImageLoading.vue
View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import { useImage } from '@vueuse/core'
const props = $defineProps<{
@ -13,13 +11,11 @@ const { isLoading,error } = useImage({ src: avatarUrl })
</script>
<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>
<!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
Error
</div> -->
<img v-else :src="error ? errSrc : avatarUrl" style="object-fit: cover;">
</template>

11
components/LocaleNuxtLink.vue
View File

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

4
components/Typography.vue
View File

@ -27,10 +27,10 @@ $defineProps<{
description
}}
</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">
{{ link?.name }}
</ABtn>
</NuxtLink>
</LocaleNuxtLink>
</div>
</template>

4
components/header/header.vue
View File

@ -1,8 +1,8 @@
<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">
<NuxtLink to="/" class="w-35 flex items-center gap-5">
<LocaleNuxtLink href="/" class="w-35 flex items-center gap-5">
<BrandLogo />
</NuxtLink>
</LocaleNuxtLink>
<nav h-full flex items-center>
<HeaderNav />
</nav>

4
components/header/nav.vue
View File

@ -52,13 +52,13 @@ const flag: any = {
</ABtn>
</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"
>
<ABtn
variant="text"
>
<span :class="flag[locale.code]" />
<span :class="flag[l.code]" />
<!-- {{ flag[locale.code] }} -->
</ABtn>
</LocaleNuxtLink>

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

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

4
config/use-foot.ts
View File

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

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

@ -38,22 +38,3 @@ publish: "07/10/2022"
: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

@ -30,22 +30,3 @@ Publish: "07/10/2022"
</p>
此外，我们为这个独一无二的元宇宙酒吧特别设计了一个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>

17
content/en/creatorpartyverse.md
View File

@ -9,20 +9,3 @@ 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

@ -9,23 +9,6 @@ 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
git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
cd TOPVERSE_Official

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

@ -117,21 +117,3 @@ These Terms and any dispute or claim arising out of or in connection with them o
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>

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

@ -32,23 +32,3 @@ publish: "07/10/2022"
: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>

17
content/zh/changannostalgia.md
View File

@ -11,20 +11,3 @@ Publish: "07/10/2022"
![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">

18
content/zh/creatorpartyverse.md
View File

@ -37,21 +37,3 @@ publish: "07/10/2022"
<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>

17
content/zh/holowater.md
View File

@ -71,20 +71,3 @@ PC端平台含污水处理站数据采集和显示支撑系统，全方位采集
![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>

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

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

18
pages/index.vue
View File

@ -27,7 +27,7 @@ const sectionNine = useSectionNine()
</script>
<template>
<Carousel class="mb-5" />
<Carousel class="mb-25" />
<Divider />
<!-- Section One -->
<SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
@ -42,7 +42,7 @@ const sectionNine = useSectionNine()
<a
v-for="(img, j) in item.imgs"
: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`, {
'animated animated-fade-in-up animated-faster': sectionTwoVis,
}]"
@ -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 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%);">
<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"/> -->
</div>
</div>
@ -148,10 +148,10 @@ const sectionNine = useSectionNine()
<h4 class="text-h4 font-bold">
{{ $t(item.topic) }}
</h4>
<p class="text-h6 md:text-left">
<p class="text-h6 text-center md:text-left">
{{ $t(item.description) }}
</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">
<ABtn variant="light" class="group">
{{ $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"
class="w-full text-center"
>
<div :class="content.icon" h-60px w-full />
<h4 text-h4 font-bold>
<div :class="content.icon" mb-5 h-60px w-full />
<h4 text-h4 mb-1 font-bold>
{{ $t(content.title) }}
</h4>
<p text-h7>
@ -202,7 +202,7 @@ const sectionNine = useSectionNine()
</div>
</div> -->
</Section>
<Divider />
<!-- <Divider /> -->
<!-- Section Nine -->
<Section class="my-10 flex bg-gradient-pink">
@ -210,7 +210,7 @@ const sectionNine = useSectionNine()
<ModelContent src="/model/house/Night-City.gltf" :width="300" />
</Section>
<Divider />
<!-- <Divider /> -->
</template>
<style scoped lang="scss">

75
pages/land.vue
View File

@ -28,7 +28,78 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="h-screen w-screen">
<canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" />
<div flex flex-col items-center justify-center pt-30>
<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>
</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">
<ContentRenderer v-if="data" :value="data" />
</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">
{{ data?.author }}
</span>

12
uno.config.ts
View File

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