update: 优化3D场景TOPOLAND页面
This commit is contained in:
parent
27ab620362
commit
9f81b0a012
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import { useImage } from '@vueuse/core'
|
||||
|
||||
const props = $defineProps<{
|
||||
src:string
|
||||
errSrc?:string
|
||||
src: string
|
||||
errSrc?: string
|
||||
}>()
|
||||
// const isGIF =
|
||||
// const isGIF =
|
||||
const avatarUrl = props.src
|
||||
const { isLoading,error } = useImage({ src: avatarUrl })
|
||||
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 class="i-line-md-loading-twotone-loop"/>
|
||||
<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;">
|
||||
|
||||
<img v-else :src="error ? errSrc : avatarUrl" style="object-fit: cover;">
|
||||
</template>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
$defineProps<{
|
||||
title?: string
|
||||
titleClass?:string
|
||||
titleClass?: string
|
||||
topic?: string
|
||||
topicClass?: string
|
||||
description?: string
|
||||
|
|
@ -15,22 +15,22 @@ $defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center ">
|
||||
<p v-if="title" class="text-title" :class="[`text-${textColor}`,titleClass]" drop-shadow>
|
||||
<div class="text-center">
|
||||
<p v-if="title" class="text-title" :class="[`text-${textColor}`, titleClass]" drop-shadow>
|
||||
{{ title }}
|
||||
</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 }}
|
||||
</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
|
||||
}}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const flag: any = {
|
|||
|
||||
<template>
|
||||
<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">
|
||||
<AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="" z-1000 mt-5 placement="bottom">
|
||||
<AList
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
export function useFoot() {
|
||||
const { locale } = useI18n()
|
||||
|
||||
const path = locale.value === 'zh' ? '/' : `/${locale.value}`
|
||||
|
||||
return {
|
||||
copyright: 'foot.copyright',
|
||||
release: 'foot.release',
|
||||
|
|
|
|||
|
|
@ -37,23 +37,4 @@ 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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,23 +29,4 @@ 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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,21 +8,4 @@ resume: "TOPVERSE® Lab 创始人"
|
|||
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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -7,23 +7,6 @@ author: "Greyson"
|
|||
resume: "TOPVERSE® Lab 创始人"
|
||||
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
|
||||
|
|
|
|||
|
|
@ -116,22 +116,4 @@ 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -31,24 +31,4 @@ publish: "07/10/2022"
|
|||
此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
|
||||
|
||||
: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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -10,21 +10,4 @@ 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">
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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的元宇宙盛宴。
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -70,21 +70,4 @@ PC端平台含污水处理站数据采集和显示支撑系统，全方位采集
|
|||
用数字孪生技术对污水处理厂的施工方法、结构和工艺流程进行可视化展示，可以清晰地看明白污水处理厂的全貌，点击交互还可以看到箱体上层、工艺管线、暖通、自控电器、箱体下层、基坑等具体结构。该应用场景可以极大地提升水务工作站工业项目的可视化及信息的直观程度。通过数字孪生集成水务工作站信息可以极大降低管理成本，缩短预警反应时间，为水务处理工业的信息分析及后续工艺流程的更新升级提供更为宏观的数据基础。
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -100,18 +100,4 @@ 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,8 +4,8 @@ import { appDescription } from './constants/index'
|
|||
import { hex2hsl } from './utils/colors'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
ssr:false,
|
||||
|
||||
ssr: false,
|
||||
|
||||
modules: [
|
||||
'@vueuse/nuxt',
|
||||
'@anu-vue/nuxt',
|
||||
|
|
@ -22,13 +22,13 @@ export default defineNuxtConfig({
|
|||
// '@nuxt/image-edge',
|
||||
'@nuxt/devtools',
|
||||
],
|
||||
|
||||
|
||||
// content: {
|
||||
// experimental: {
|
||||
// clientDB: true
|
||||
// }
|
||||
// },
|
||||
image:{
|
||||
image: {
|
||||
// provider:"static"
|
||||
},
|
||||
// optimizedImages: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}]"
|
||||
|
|
@ -50,7 +50,7 @@ const sectionNine = useSectionNine()
|
|||
:title="$t(img.title)"
|
||||
>
|
||||
<!-- <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>
|
||||
</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 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,15 +202,15 @@ const sectionNine = useSectionNine()
|
|||
</div>
|
||||
</div> -->
|
||||
</Section>
|
||||
<Divider />
|
||||
<!-- <Divider /> -->
|
||||
|
||||
<!-- Section Nine -->
|
||||
<Section class="my-10 flex bg-gradient-pink">
|
||||
<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>
|
||||
<Divider />
|
||||
<!-- <Divider /> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"types": ["anu-vue/volar","@nuxt/types", "@nuxt/image"]
|
||||
"types": ["anu-vue/volar", "@nuxt/types", "@nuxt/image"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ',
|
||||
|
|
|
|||
Loading…
Reference in New Issue