动态页面等

components/Footer.vue

@@ -17,13 +17,11 @@ const footer = useFoot()
       </h5>
 
       <LocaleNuxtLink v-for="(item, i) in col.child" :key="i" :href="item.link.href">
-        <ABtn v-if="item.icon === 'i-ic-sharp-wechat'" variant="text" color="slate-200" class="dark:!text-light/50" :icon="item.icon">
+        <ABtn v-if="item.img" variant="text" color="slate-200" class="dark:!text-light/50" :icon="item.icon">
           {{ $t(item.link.name) }}
-          <ATooltip class="[&_.a-tooltip]-bg-green-600" placement="left">
+          <ATooltip class="[&_.a-tooltip]-bg-dark-600" placement="left">
             <span class="a-tooltip-text">
-              <i class="i-ic-sharp-wechat me-1" />
+              <img :src="item.img" class="h-40 rounded">
-              <span>{{ $t('wechat') }}</span>
-              <img src="/wechat.png" class="h-40 rounded">
             </span>
           </ATooltip>
         </ABtn>
@@ -45,6 +43,7 @@ const footer = useFoot()
       {{ $t(footer.release) }}
     </p>
     <p v-for="(record, i) in footer.record" :key="i">
+      <img v-if="i === footer.record.length - 1" src="https://pic3.zhimg.com/80/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png" class="inline scale-90 px-1">
       {{ $t(record) }}
     </p>
   </div>

config/pages/release/use-article.ts

@@ -0,0 +1,36 @@
+export function useArticle() {
+  return [
+    {
+      title: 'Decor',
+      subtitle: 'Fine Art, Dining',
+      img: '/imgs/Home-Stories/Circulus.jpg',
+      tags: ['Web 3.0'],
+      href: '/release/bar-symphony',
+      createTime: '2023/6/5',
+    },
+    {
+      title: 'Decor',
+      subtitle: 'Fine Art, Dining',
+      img: '/imgs/Home-Stories/Circulus.jpg',
+      tags: ['Web 3.0', 'Digital Twins'],
+      href: '#',
+      createTime: '2023/6/5',
+    },
+    {
+      title: 'Decor',
+      subtitle: 'Fine Art, Dining',
+      img: '/imgs/Home-Stories/Circulus.jpg',
+      tags: ['Web 3.0', 'Digital Twins'],
+      href: '#',
+      createTime: '2023/6/5',
+    },
+    {
+      title: 'Decor',
+      subtitle: 'Fine Art, Dining',
+      img: '/imgs/Home-Stories/Circulus.jpg',
+      tags: ['Web 3.0', 'Digital Twins'],
+      href: '#',
+      createTime: '2023/6/5',
+    },
+  ]
+}

config/pages/release/use-tag.ts

@@ -0,0 +1,20 @@
+export function useTag() {
+  return [
+    {
+      label: 'nav.solutions.child.land.service[0]',
+      value: 'Web 3.0',
+    },
+    {
+      label: 'nav.solutions.child.land.service[1]',
+      value: 'Digital Twins',
+    },
+    {
+      label: 'nav.solutions.child.land.service[2]',
+      value: 'Mixed Reality',
+    },
+    {
+      label: 'nav.solutions.child.land.service[3]',
+      value: 'AIGC',
+    },
+  ]
+}

config/use-foot.ts

@@ -59,6 +59,15 @@ export function useFoot() {
               name: 'foot.links[2].link[0]',
               href: '#',
             },
+            img: '/wechat.png',
+          },
+          {
+            icon: 'i-material-symbols-shelf-auto-hide',
+            link: {
+              name: 'foot.links[2].link[2]',
+              href: '#',
+            },
+            img: '/xiaohongshu.png',
           },
           {
             icon: 'i-ri-twitter-fill',
@@ -67,12 +76,6 @@ export function useFoot() {
               href: 'https://twitter.com/Topverse_Studio',
             },
           },
-          {
-            link: {
-              name: 'foot.links[2].link[2]',
-              href: '#',
-            },
-          },
         ],
       },
     ],

config/use-nav.ts

@@ -39,6 +39,13 @@ export function useNav(): NavMenu[] {
           icon: 'i-tabler-3d-cube-sphere',
           iconColor: 'amber',
         },
+        {
+          title: 'nav.solutions.child.land.service[3]',
+          subtitle: 'nav.solutions.child.land.description[3]',
+          href: '/solutions',
+          icon: 'i-iconoir-brain-electricity',
+          iconColor: 'amber',
+        },
       ],
     },
     {

locales/en-UK.json

@@ -15,7 +15,7 @@
       "t": "Solutions",
       "child": {
         "land": {
-          "service": ["Web 3.0", "Digital Twins", "Mixed Reality"],
+          "service": ["Web 3.0", "Digital Twins", "Mixed Reality", "AIGC"],
           "description": ["The quick brown fox jumps over the lazy dog.", "IRL World in Digital", "Immersive Creations"]
         }
       }
@@ -175,7 +175,7 @@
   "foot": {
     "copyright": "TOPVERSE LAB © Copyright 2019-2023 All rights reserved",
     "release": "London I Beijing I Shanghai I Hongkong",
-    "record": ["沪ICP备2023010651号-1", ""],
+    "record": ["沪ICP备2023010651号-1", "沪ICP备2023010651号-1"],
     "links": [
       {
         "group": "PRODUCT",
@@ -193,5 +193,6 @@
   },
   "wechat": "微信公众号:ttsetset",
   "waiting": "waiting...",
-  "notfound": "not found"
+  "notfound": "not found",
+  "copylink": "Copy share link"
 }

locales/zh-CN.json

@@ -15,7 +15,7 @@
       "t": "解决方案",
       "child": {
         "land": {
-          "service": ["互联网 3.0", "数字孪生", "混合现实"],
+          "service": ["互联网 3.0", "数字孪生", "混合现实", "生成式人工智能"],
           "description": ["区块链及元宇宙空间板块", "智慧城市及工业元宇宙解决方案", "虚拟、混合现实内容开发"]
         }
       }
@@ -170,7 +170,7 @@
   "foot": {
     "copyright": "TOPVERSE LAB 奇点拓界 © 版权所有 2019-2023 All rights reserved",
     "release": "伦敦 I 北京 I 上海 I 香港",
-    "record": ["沪ICP备2023010651号-1", ""],
+    "record": ["沪ICP备2023010651号-1", "沪ICP备2023010651号-1"],
     "links": [
       {
         "group": "产品",
@@ -188,5 +188,6 @@
   },
   "wechat": "微信公众号",
   "waiting": "建设中...",
-  "notfound": "未知区域"
+  "notfound": "未知区域",
+  "copylink": "复制分享链接"
 }

pages/release/index.vue

@@ -1,42 +1,21 @@
-<script lang="ts" setup>
+<script setup>
-const items = [
+import { useArticle } from '~/config/pages/release/use-article'
-  {
+import { useTag } from '~/config/pages/release/use-tag'
-    icon: 'i-bx-link-external text-sm cursor-pointer',
+
-    title: 'Electronics',
+const items = useArticle()
-    subtitle: 'Mobile, Earbuds, TV',
+const tags = useTag()
-    avatarProps: { icon: 'i-bx-mobile-alt' },
+const data = ref([])
-  },
+
-  {
+const { text, copy, copied, isSupported } = useClipboard()
-    icon: 'i-bx-link-external text-sm cursor-pointer',
+
-    title: 'Fashion',
+const list = computed(() => {
-    subtitle: 'T-shirt, Jeans, Shoes',
+  if (!data.value.length)
-    avatarProps: { icon: 'i-bx-closet' },
+    return items
-  },
+
-  {
+  return items.filter((i) => {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
+    return i.tags.some(j => data.value.includes(j))
-    title: 'Decor',
+  })
-    subtitle: 'Fine Art, Dining',
+})
-    avatarProps: { icon: 'i-bx-home' },
-  },
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    title: 'Sports',
-    subtitle: 'Football, Cricket Kit',
-    avatarProps: { icon: 'i-bx-football' },
-  },
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    title: 'Sports',
-    subtitle: 'Football, Cricket Kit',
-    avatarProps: { icon: 'i-bx-football' },
-  },
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    title: 'Sports',
-    subtitle: 'Football, Cricket Kit',
-    avatarProps: { icon: 'i-bx-football' },
-  },
-]
 </script>
 
 <template>
@@ -45,8 +24,8 @@ const items = [
       <div>
         <ACard
           shadow="none"
-          title="搜索"
+          title="筛选"
-          subtitle="根据条件查询"
+          subtitle="根据条件过滤"
           class="w-full md:w-300px"
         >
           <!-- <img
@@ -55,24 +34,59 @@ const items = [
           > -->
 
           <div class="a-card-body a-card-spacer">
-            <p class="text-sm">
+            <div class="grid grid-rows-2 gap-y-3">
-              Macaroon cake powder pie cake cake gingerbread oat cake chocolate cake.
+              <ACheckbox
-            </p>
+                v-for="tag in tags"
-            <ABtn>Read more</ABtn>
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
           </div>
         </ACard>
       </div>
 
       <ACard w-full shadow="none">
         <AList
-          :items="items"
+          :items="list"
           icon-append
-          class="[--a-list-item-gap:1rem]"
+          class="[--a-list-item-gap:1rem] gap-2 divide-y-1 divide-dark-50/10"
         >
-          <template #item-prepend>
+          <div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
-            <div class="h-150px w-300px overflow-hidden rounded bg-light-50/10" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
+            EMPTY
-              <ImageLoading class="h-full w-full" src="/imgs/Home-Stories/Circulus.jpg" />
           </div>
+          <template #item-prepend="{ attrs }">
+            <LocaleNuxtLink :href="attrs.href" class="h-150px w-300px overflow-hidden rounded bg-light-50/10" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
+              <ImageLoading class="h-full w-full" :src="attrs.img" />
+            </LocaleNuxtLink>
+          </template>
+          <template #item-content="{ item, attrs }">
+            <LocaleNuxtLink :href="attrs.href" class="h-full flex flex-grow flex-col justify-between py-2">
+              <div>
+                <div class="text-title">
+                  {{ item.title }}
+                </div>
+                <div class="text-description text-opacity-80">
+                  {{ item.subtitle }}
+                </div>
+              </div>
+              <small>
+                {{ attrs.createTime }}
+              </small>
+            </LocaleNuxtLink>
+          </template>
+          <template #item-append="{ attrs }">
+            <ABtn
+              variant="text" icon="i-bx-link-external" icon-only @click="copy(`http://www.topverse.world${attrs.href}`)"
+            >
+              <ATooltip
+                transition="fade"
+                :text="$t('copylink')"
+              />
+            </ABtn>
           </template>
         </AList>
       </ACard>

uno.config.ts

@@ -70,6 +70,8 @@ export default defineConfig({
     'i-academicons-archive',
     'i-ic-sharp-wechat',
     'i-ri-twitter-fill',
+    'i-iconoir-brain-electricity',
+    'i-material-symbols-shelf-auto-hide',
   ],
   presets: [
     presetAnu(),