首页

src/router/index.ts

@@ -12,7 +12,7 @@ const routes = [
     name: 'root',
     path: '/',
     component: () => import('@/layout/index.vue'),
-    redirect: '/knowledge',
+    redirect: '/home',
     children: [...bigModelRouter],
   },
   {

src/views/manage/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="size-full overflow-y-auto">
+  <div class="_main size-full overflow-y-auto">
     <div
       class="flex h-[21.88rem] w-full rounded-lg bg-[url('@/assets/images/home/head.png')] bg-[length:auto_100%] bg-center bg-no-repeat"
     >
@@ -23,14 +23,16 @@
         </div>
       </div>
     </div>
-    <div class="mt-2 flex w-full flex-col items-center rounded-lg bg-[#ffffff]">
+    <div
+      class="mt-2 flex w-full flex-col items-center rounded-lg bg-[#ffffff] py-8"
+    >
       <div style="font-family: Alimama" class="mt-10 text-4xl">
         <span style="font-family: Alimama" class="text-[#2F82FF]"
           >热门应用</span
         >
         当下最火 AI 实用场景集合
       </div>
-      <div class="mt-4 text-lg text-[#303133]">
+      <div class="mt-6 text-lg text-[#303133]">
         覆盖生活办公全需求，让前沿技术即刻落地你的日常
       </div>
       <div class="mt-10 flex gap-4.5" v-loading="state.hot.loading">
@@ -42,22 +44,178 @@
               src="@/assets/images/app/app-default-logo.png"
               class="size-13"
             />
-            <div class="flex justify-between">
-              <div>智慧口岸智能咨询</div>
-              <div class="flex items-center">
-                <SvgIcon name="hot" color="#ffffff" /> 2333
+            <div class="mt-2 flex justify-between">
+              <div class="text-lg font-bold" v-title>
+                智慧口岸智能咨询智慧口岸智能咨询智慧口岸智能咨询
+              </div>
+              <div
+                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
+              >
+                <SvgIcon name="hot" color="#ffffff" size="12" /> 0
+              </div>
+            </div>
+            <div class="mt-2 text-xs" v-title>
+              太极计算机股份有限公司太极计算机股份有限公司太极计算机股份有限公司
+            </div>
+            <div
+              class="mt-4 text-xs"
+              v-title="{ lines: 5 }"
+              style="line-height: 1.1rem"
+            >
+              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+            </div>
+            <div class="mt-auto flex items-center gap-4">
+              <div class="grid flex-1 grid-cols-2 gap-4">
+                <div
+                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
+                >
+                  立即体验
+                </div>
+                <div
+                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
+                >
+                  了解详情
+                </div>
               </div>
+              <el-tooltip placement="top" content="收藏">
+                <SvgIcon name="star" class="__hover" />
+              </el-tooltip>
             </div>
           </div>
         </template>
       </div>
+      <div
+        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+      >
+        查看更多<span class="mb-1 ml-1">></span>
+      </div>
+      <div style="font-family: Alimama" class="mt-10 text-4xl">
+        <span style="font-family: Alimama" class="text-[#2F82FF]"
+          >部门应用</span
+        >
+        企业全部门场景化 AI 解决方案库
+      </div>
+      <div class="mt-6 text-lg text-[#303133]">
+        针对职能痛点定制能力，让每个岗位都能高效借力智能工具
+      </div>
+      <div class="mt-10 flex gap-4.5" v-loading="state.app.loading">
+        <template v-for="item in state.app.data">
+          <div
+            class="relative flex h-[27.25rem] w-[18rem] flex-col overflow-hidden rounded-lg bg-[url('@/assets/images/home/app-bg.png')] bg-[length:100%_100%] bg-no-repeat px-7 py-8"
+          >
+            <div class="mt-2 flex justify-between">
+              <div class="text-lg font-bold" v-title>咨询智能问数</div>
+              <div
+                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
+              >
+                <SvgIcon name="hot" color="#ffffff" size="12" /> 0
+              </div>
+            </div>
+            <div class="mt-2 text-xs" v-title>太极计算机股份有限公司</div>
+            <div
+              class="mt-4 text-xs"
+              v-title="{ lines: 5 }"
+              style="line-height: 1.1rem"
+            >
+              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+            </div>
+            <div
+              class="absolute bottom-50 z-1 flex w-full items-center gap-4 pr-14"
+            >
+              <div class="grid flex-1 grid-cols-2 gap-4">
+                <div
+                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
+                  @click="
+                    $router.push({
+                      name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
+                      params: { id: item.id },
+                    })
+                  "
+                >
+                  立即体验
+                </div>
+              </div>
+              <el-tooltip placement="top" content="收藏">
+                <SvgIcon name="star" class="__hover" />
+              </el-tooltip>
+            </div>
+            <img
+              src="@/assets/images/home/app-bg-icon.png"
+              class="absolute bottom-0 left-0 z-0 w-full"
+            />
+          </div>
+        </template>
+      </div>
+      <div
+        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+        @click="$router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })"
+      >
+        查看更多<span class="mb-1 ml-1">></span>
+      </div>
+      <div style="font-family: Alimama" class="mt-10 text-4xl">
+        <span style="font-family: Alimama" class="text-[#2F82FF]">
+          模型广场
+        </span>
+        海量优质 AI 模型资源聚合平台
+      </div>
+      <div class="mt-6 text-lg text-[#303133]">
+        从通用基础到垂直专精，一站式匹配你的创新开发与场景落地需求
+      </div>
+      <div class="mt-32 flex gap-4.5" v-loading="state.model.loading">
+        <template v-for="item in state.model.data">
+          <div
+            class="relative flex h-[16.25rem] w-[18rem] flex-col rounded-lg bg-[url('@/assets/images/home/model-bg.png')] bg-[length:100%_100%] bg-no-repeat p-7"
+          >
+            <img
+              src="@/assets/images/home/mode-bg-icon.png"
+              class="absolute -top-18 left-20 z-1 h-[7.75rem] w-[8.5rem]"
+            />
+            <div class="mt-7 text-lg font-bold" v-title>咨询智能问数</div>
+            <div class="mt-2 flex items-center justify-between">
+              <div class="flex-1 text-xs" v-title>
+                太极计算机股份有限公司太极计算机股份有限公司
+              </div>
+              <div
+                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
+              >
+                <SvgIcon name="hot" color="#ffffff" size="12" /> 大模型语言
+              </div>
+            </div>
+            <div
+              class="mt-4 text-xs"
+              v-title="{ lines: 4 }"
+              style="line-height: 1.1rem"
+            >
+              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+            </div>
+            <div class="mt-auto flex w-full items-center gap-4">
+              <div class="grid flex-1 grid-cols-2 gap-4">
+                <div
+                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
+                >
+                  了解详情
+                </div>
+              </div>
+              <el-tooltip placement="top" content="收藏">
+                <SvgIcon name="star" class="__hover" />
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div
+        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+        @click="$router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })"
+      >
+        查看更多<span class="mb-1 ml-1">></span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
-import paramsTextarea from '@/views/workflow/instance/component/params-textarea/index.vue'
 
 const emit = defineEmits([])
 const props = defineProps({})
@@ -67,21 +225,33 @@ const state: any = reactive({
     loading: false,
     data: [{}, {}, {}, {}],
   },
-  model: {
+  app: {
     loading: false,
-    data: [],
+    data: [{}, {}, {}, {}],
   },
-  app: {
+  model: {
     loading: false,
-    data: [],
+    data: [{}, {}, {}],
   },
 })
 const titleCpt = computed(() => import.meta.env.VITE_TITLE)
 const initHot = () => {}
-const initModel = () => {
-  state.model.loading = true
+const initModel = () => {}
+const initApp = () => {
+  // state.app.loading = true
+  // appSearch({
+  //   page: 1,
+  //   size: 4,
+  //   // status: 1
+  // })
+  //   .then(({ data }: any) => {
+  //     state.app.data = data.records
+  //   })
+  //   .catch(() => {})
+  //   .finally(() => {
+  //     state.app.loading = false
+  //   })
 }
-const initApp = () => {}
 onMounted(() => {
   initHot()
   initModel()
@@ -89,4 +259,8 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+._main::-webkit-scrollbar {
+  display: none;
+}
+</style>