动态页面等

2023-06-05 15:36:30 +08:00 · 2023-06-05 15:36:30 +08:00 · 18f50ea185
parent e74e789030
commit 18f50ea185
9 changed files with 151 additions and 68 deletions
--- a/components/Footer.vue
+++ b/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" />
-              <span>{{ $t('wechat') }}</span>
-              <img src="/wechat.png" class="h-40 rounded">
+              <img :src="item.img" 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>
--- a/config/pages/release/use-article.ts
+++ b/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',
+    },
+  ]
+}
--- a/config/pages/release/use-tag.ts
+++ b/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',
+    },
+  ]
+}
--- a/config/use-foot.ts
+++ b/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: '#',
-            },
-          },
        ],
      },
    ],
--- a/config/use-nav.ts
+++ b/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',
+        },
      ],
    },
    {
--- a/locales/en-UK.json
+++ b/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"
 }
--- a/locales/zh-CN.json
+++ b/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": "复制分享链接"
 }
--- a/pages/release/index.vue
+++ b/pages/release/index.vue
@ -1,42 +1,21 @@
-<script lang="ts" setup>
-const items = [
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    title: 'Electronics',
-    subtitle: 'Mobile, Earbuds, TV',
-    avatarProps: { icon: 'i-bx-mobile-alt' },
-  },
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    title: 'Fashion',
-    subtitle: 'T-shirt, Jeans, Shoes',
-    avatarProps: { icon: 'i-bx-closet' },
-  },
-  {
-    icon: 'i-bx-link-external text-sm cursor-pointer',
-    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 setup>
+import { useArticle } from '~/config/pages/release/use-article'
+import { useTag } from '~/config/pages/release/use-tag'
+
+const items = useArticle()
+const tags = useTag()
+const data = ref([])
+
+const { text, copy, copied, isSupported } = useClipboard()
+
+const list = computed(() => {
+  if (!data.value.length)
+    return items
+
+  return items.filter((i) => {
+    return i.tags.some(j => data.value.includes(j))
+  })
+})
 </script>

 <template>
@ -45,8 +24,8 @@ const items = [
      <div>
        <ACard
          shadow="none"
-          title="搜索"
-          subtitle="根据条件查询"
+          title="筛选"
+          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">
-              Macaroon cake powder pie cake cake gingerbread oat cake chocolate cake.
-            </p>
-            <ABtn>Read more</ABtn>
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :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 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="/imgs/Home-Stories/Circulus.jpg" />
-            </div>
+          <div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
+            EMPTY
+          </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>
--- a/uno.config.ts
+++ b/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(),