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>

16
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

@ -38,22 +38,3 @@ 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

@ -30,22 +30,3 @@ 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>

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 ```bash
git clone https://github.com/TOPVERSE/TOPVERSE_Official.git git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
cd TOPVERSE_Official 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 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'} :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) ![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) ![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个工作日内进行处理。 如对本网站存在任何疑问或建议，请通过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
nuxt.config.ts
View File

@ -4,7 +4,7 @@ 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',
@ -28,7 +28,7 @@ export default defineNuxtConfig({
// 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 ',