init

pc/pages/information/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div class="text-4xl mb-5">资讯中心</div>
+        <div class="flex flex-wrap gap-4">
+            <InformationCard
+                v-for="item in newsLists"
+                style="width: calc(50% - 8px)"
+                :key="item.id"
+                :header="item.name"
+                :data="item.article"
+                :link="`/information/search?cid=${item.id}&name=${item.name}`"
+            >
+                <template #content="{ data }">
+                    <div class="px-4 py-5">
+                        <div class="flex gap-2.5">
+                            <div
+                                class="w-[180px] bg-page rounded overflow-hidden"
+                                v-for="(item, index) in splitData(data)
+                                    .topThree"
+                                :key="item.id"
+                            >
+                                <InformationItems
+                                    :index="index"
+                                    :id="item.id"
+                                    :title="item.title"
+                                    :author="item.author"
+                                    :create-time="item.createTime"
+                                    :image="item.image || placeholder"
+                                    :only-title="false"
+                                    :border="false"
+                                    :show-author="false"
+                                    :show-desc="false"
+                                    :show-time="false"
+                                    :show-click="false"
+                                    :is-horizontal="true"
+                                >
+                                    <template #title="{ title }">
+                                        <span class="line-clamp-2">{{
+                                            title
+                                        }}</span>
+                                    </template>
+                                </InformationItems>
+                            </div>
+                        </div>
+                        <div
+                            v-for="item in splitData(data).remain"
+                            :key="item.id"
+                        >
+                            <InformationItems
+                                :id="item.id"
+                                :title="item.title"
+                                :author="item.author"
+                                :create-time="item.createTime"
+                                :image="item.image"
+                                :only-title="true"
+                                :show-time="false"
+                            >
+                                <template #title="{ title }">
+                                    <span class="line-clamp-1">{{
+                                        title
+                                    }}</span>
+                                </template>
+                            </InformationItems>
+                        </div>
+                    </div>
+                </template>
+            </InformationCard>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { getArticleCenter } from '~~/api/news'
+import placeholder from '@/assets/images/placeholder.png'
+const { data: newsLists } = await useAsyncData(() => getArticleCenter())
+const splitData = (data) => {
+    const size = 3
+    return {
+        topThree: data.slice(0, size),
+        remain: data.slice(size)
+    }
+}
+</script>
+<style lang="scss" scoped></style>