|
|
@@ -1,340 +1,31 @@
|
|
|
<template>
|
|
|
- <n-el
|
|
|
- class="page h-full flex flex-col bg-cover bg-center overflow-auto"
|
|
|
- :style="{ backgroundImage: `url(${isMobile ? h5Bg : pcBg})` }"
|
|
|
- >
|
|
|
- <NConfigProvider
|
|
|
- :theme-overrides="{
|
|
|
- Button: {
|
|
|
- heightSmall: '24px'
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <n-page-header>
|
|
|
- <template #title>
|
|
|
- <div
|
|
|
- class="flex items-center py-3 lg:py-8 pl-4 md:pl-10 lg:pl-15 2xl:pl-52"
|
|
|
- @click="showConsoleEve"
|
|
|
- >
|
|
|
- <!-- <n-avatar :size="isMobile ? 'small' : 'medium'" :src="logo"></n-avatar> -->
|
|
|
- <!-- <span class="ml-[6px] lg:ml-3 text-white text-base lg:text-lg alimamaShuHeiTi">走马AI助手 </span> -->
|
|
|
- <img src="@/assets/logo-text.png" class="h-[28px] md:h-[40px]" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #extra>
|
|
|
- <div class="flex items-center py-3 lg:py-[30px] pr-4 lg:pr-15 2xl:pr-52">
|
|
|
- <!-- <n-button text class="!p-[8px] !mr-[8px] lg:!p-[12px] lg:!mr-[12px]" @click="showDesc = true">
|
|
|
- <img
|
|
|
- class="w-[20px] h-[20px] lg:w-[24px] lg:h-[24px]"
|
|
|
- src="@/assets/icon_jieshao.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span class="text-white ml-[4px] lg:ml-[6px] text-xs lg:text-sm">介绍</span>
|
|
|
- </n-button> -->
|
|
|
- <template v-if="isLogin">
|
|
|
- <n-button text v-if="isMobile" @click="goMine">
|
|
|
- <user-avatar avatarType="small" onlyAvatar />
|
|
|
- </n-button>
|
|
|
- <n-popover placement="bottom" trigger="click" v-else>
|
|
|
- <template #trigger>
|
|
|
- <n-button text>
|
|
|
- <user-avatar :avatarType="isMobile ? 'small' : 'medium'" onlyAvatar />
|
|
|
- </n-button>
|
|
|
- </template>
|
|
|
- <n-button size="small" @click="logout" text>退出登录</n-button>
|
|
|
- </n-popover>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-else>
|
|
|
- <n-button v-if="!isMobile" type="primary" round @click="showLogin = true"> 登录 </n-button>
|
|
|
- <n-button v-else round @click="$router.push('/login')" type="primary" size="small"
|
|
|
- >登录</n-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </n-page-header>
|
|
|
- </NConfigProvider>
|
|
|
-
|
|
|
- <div
|
|
|
- class="flex flex-col items-center content-center pl-4 md:pl-10 lg:pl-15 2xl:pl-52 md:items-start flex-1 pt-4 pb-24 page-content md:pb-4 md:justify-center"
|
|
|
- >
|
|
|
- <img src="@/assets/brand.png" class="w-3/4 max-w-[510px] md:translate-x-[-10px]" alt="" />
|
|
|
-
|
|
|
- <div class="text-xs leading-6 md:text-base text-white opacity-80 text-center md:text-left mt-4 w-[90%] max-w-[705px]">
|
|
|
- 走马AI助手是人工智能技术驱动的自然语言处理工具，它能够通过理解和学习人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，并能完成撰写邮件、视频脚本、文案、翻译、代码，写论文等任务。后续更新：向量数据库应用，AI助手角色赋予，AI助手私有化，FileChat等。
|
|
|
- </div>
|
|
|
-
|
|
|
- <NConfigProvider
|
|
|
- class="w-[90%] max-w-[426px] mt-8"
|
|
|
- :theme-overrides="{
|
|
|
- common: { cardColor: 'transparent' },
|
|
|
- Card: {
|
|
|
- paddingMedium: '0',
|
|
|
- borderRadius: '12px',
|
|
|
- borderColor: 'rgba(255, 255, 255, 0.2)'
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <n-card
|
|
|
- class="vip rounded-xl overflow-hidden backdrop-blur-sm"
|
|
|
- :content-style="{
|
|
|
- padding: 0
|
|
|
- }"
|
|
|
- :bordered="isMobile"
|
|
|
- >
|
|
|
- <n-grid cols="4" responsive="screen">
|
|
|
- <n-grid-item v-for="(item, index) in items" :key="item.name">
|
|
|
- <div class="flex flex-col items-center h-[120px] md:h-[108px] justify-center md:items-start">
|
|
|
- <div class="flex flex-col items-center relative" :class="{ 'pb-[44px]': index === 1 }">
|
|
|
- <img class="w-[60px] h-[60px]" :src="item.img" alt="" />
|
|
|
- <div
|
|
|
- class="text text-xs text-gray-50 mt-2 text-center"
|
|
|
- :class="{ 'absolute bottom-0': index === 1 }"
|
|
|
- >
|
|
|
- <div class="whitespace-nowrap">{{ item.name }}</div>
|
|
|
- <div class="mt-1 text-[10px] text-neutral-400 whitespace-nowrap">
|
|
|
- {{ item.desc }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </n-grid-item>
|
|
|
- </n-grid>
|
|
|
- </n-card>
|
|
|
- </NConfigProvider>
|
|
|
-
|
|
|
- <div class="flex-1" v-if="isMobile"></div>
|
|
|
-
|
|
|
- <NConfigProvider
|
|
|
- :theme-overrides="{
|
|
|
- Button: {
|
|
|
- heightMedium: '44px',
|
|
|
- heightLarge: isMobile ? '44px' : '60px',
|
|
|
- fontSizeLarge: isMobile ? '16px' : '24px'
|
|
|
- }
|
|
|
- }"
|
|
|
- class="mt-16 w-[300px] sm:w-80"
|
|
|
- >
|
|
|
- <n-button
|
|
|
- type="primary"
|
|
|
- class="alimamaShuHeiTi max-w-[300px] !border-white"
|
|
|
- block
|
|
|
- round
|
|
|
- size="large"
|
|
|
- @click="goChat"
|
|
|
- :loading="loading"
|
|
|
- >
|
|
|
- 立即体验
|
|
|
- </n-button>
|
|
|
- </NConfigProvider>
|
|
|
- </div>
|
|
|
-
|
|
|
- <NConfigProvider
|
|
|
- :theme="darkTheme"
|
|
|
- :theme-overrides="{
|
|
|
- Card: {
|
|
|
- colorModal: '#20223c'
|
|
|
- },
|
|
|
- Input: {
|
|
|
- border: '1px solid #2B3038'
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <n-modal v-model:show="showLogin" transform-origin="center">
|
|
|
- <n-card class="!max-w-xl !rounded-xl">
|
|
|
- <div class="text-white text-2xl text-center font-bold py-8">登录</div>
|
|
|
- <div class="max-w-sm my-5 mx-auto pb-16">
|
|
|
- <login-form @success="onLogin" theme="dark"></login-form>
|
|
|
- </div>
|
|
|
- </n-card>
|
|
|
- </n-modal>
|
|
|
- </NConfigProvider>
|
|
|
-
|
|
|
- <NConfigProvider
|
|
|
- :theme="lightTheme"
|
|
|
- :theme-overrides="{
|
|
|
- Card: {
|
|
|
- colorModal: 'linear-gradient(180deg, rgba(196, 218, 255, 1), #fbf1ff)'
|
|
|
- },
|
|
|
- Input: {
|
|
|
- border: '1px solid #2B3038'
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <n-modal v-model:show="showDesc" class="!max-w-xl !w-[85%] !rounded-[12px]">
|
|
|
- <n-card content-style="padding:2px">
|
|
|
- <div
|
|
|
- class="pt-[20px] rounded-[12px]"
|
|
|
- style="background: linear-gradient(180deg, #e8f2ff 0%, #fbf1ff 100%)"
|
|
|
- >
|
|
|
- <img class="w-[180px] block mx-[auto]" src="@/assets/png-wenzi.png" alt="" />
|
|
|
- <div class="text-center text-[10px] text-[#2900D499] uppercase">走马AI助手 introduce</div>
|
|
|
- <div class="text-black text-sm px-4 pb-[22px] pt-[10px]">
|
|
|
- <p>
|
|
|
- 为维持高速稳定的客户体验，走马AI助手采用微软Microsoft
|
|
|
- Azure云服务器，微软Azure是业界第一名的智能AI、物联网、混合云，集机器学习、数据分析与信息系统服务集大成，是唯一在中国正式商用的国际公有云。OpenAi公司的ChatGPT即部署于微软Azure，确保了两者的同源与互通。
|
|
|
- </p>
|
|
|
- <p class="mt-[10px]">
|
|
|
- 针对国内用户的使用习惯，走马AI助手专门对微信生态进行了全面优化，用户不用跳转到外部浏览器，将走马AI助手保存到“收藏”内，即可完成一键登录、使用，复制、分享等功能，在微信上的响应速度、使用体验远超同类产品。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </n-card>
|
|
|
- </n-modal>
|
|
|
- </NConfigProvider>
|
|
|
- </n-el>
|
|
|
+ <div class="h-full bg-[#090A20]">
|
|
|
+ <game />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
<script setup lang="ts">
|
|
|
-import {
|
|
|
- NAvatar,
|
|
|
- NButton,
|
|
|
- NPageHeader,
|
|
|
- NCard,
|
|
|
- NGrid,
|
|
|
- NGridItem,
|
|
|
- NModal,
|
|
|
- NConfigProvider,
|
|
|
- darkTheme,
|
|
|
- lightTheme,
|
|
|
- NEl,
|
|
|
- NPopover,
|
|
|
- useMessage,
|
|
|
- useDialog
|
|
|
-} from 'naive-ui'
|
|
|
-import h5Bg from '@/assets/bg_mobile.jpg'
|
|
|
-import pcBg from '@/assets/bg_desktop1.jpg'
|
|
|
-import logo from '@/assets/logo.png'
|
|
|
-import { useUserStore } from '@/store'
|
|
|
-import { useRouter, useRoute } from 'vue-router'
|
|
|
-import { ref, computed } from 'vue'
|
|
|
-import { UserAvatar, LoginForm } from '@/components/common'
|
|
|
-import { useBasicLayout } from '@/hooks/useBasicLayout'
|
|
|
-import imgItem01 from '@/assets/png-01.png'
|
|
|
-import imgQiye from '@/assets/qiye.png'
|
|
|
-import imgHuihua from '@/assets/huihua.png'
|
|
|
-import imgItem02 from '@/assets/png-02.png'
|
|
|
-import imgItem03 from '@/assets/png-03.png'
|
|
|
-import imgItem05 from '@/assets/png-05.png'
|
|
|
-import imgItem06 from '@/assets/png-06.png'
|
|
|
-import imgItem07 from '@/assets/png-07.png'
|
|
|
-import { init as initEruda } from '@/utils/console'
|
|
|
-import { useStorage } from '@vueuse/core'
|
|
|
-import borderImg from '@/assets/png-biankuang.png'
|
|
|
-
|
|
|
-const { isMobile } = useBasicLayout()
|
|
|
-
|
|
|
-const router = useRouter()
|
|
|
-const route = useRoute()
|
|
|
-const userStore = useUserStore()
|
|
|
-const showLogin = ref(false)
|
|
|
-const items = [
|
|
|
- {
|
|
|
- name: '基础问答',
|
|
|
- desc: '快速检索',
|
|
|
- img: imgItem01
|
|
|
- },
|
|
|
- {
|
|
|
- name: '独立会话',
|
|
|
- desc: '上下文精准约束',
|
|
|
- img: imgQiye
|
|
|
- },
|
|
|
- {
|
|
|
- name: '企业链路',
|
|
|
- desc: '高效稳定',
|
|
|
- img: imgHuihua
|
|
|
- },
|
|
|
- {
|
|
|
- name: '后续权益',
|
|
|
- desc: '免费开放',
|
|
|
- img: imgItem06
|
|
|
+import robot1Img from '@/assets/robot1.gif'
|
|
|
+import Game from '@/components/game/Game.vue'
|
|
|
+import { onMounted } from 'vue'
|
|
|
+onMounted(() => {
|
|
|
+ const splash = document.getElementById('splash-screen')
|
|
|
+ if (splash) {
|
|
|
+ splash.setAttribute('isHold', 'true')
|
|
|
+ splash.style.opacity = '1'
|
|
|
+ splash.style.display = 'block'
|
|
|
}
|
|
|
-]
|
|
|
-
|
|
|
-const isLogin = computed(() => {
|
|
|
- return !!userStore.userInfo.id
|
|
|
})
|
|
|
-
|
|
|
-const onLogin = () => {
|
|
|
- showLogin.value = false
|
|
|
- loading.value = true
|
|
|
- router.replace({ name: 'moments' })
|
|
|
-}
|
|
|
-
|
|
|
-const loading = ref(false)
|
|
|
-function goChat() {
|
|
|
- if (!userStore.userInfo.id) {
|
|
|
- if (!isMobile.value) {
|
|
|
- showLogin.value = true
|
|
|
- } else {
|
|
|
- router.push({ name: 'login' })
|
|
|
- }
|
|
|
- } else {
|
|
|
- loading.value = true
|
|
|
- router.push({ name: 'moments' })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function goMine() {
|
|
|
- router.push({
|
|
|
- name: 'mine'
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const dialog = useDialog()
|
|
|
-const message = useMessage()
|
|
|
-function logout() {
|
|
|
- dialog.create({
|
|
|
- title: '提示',
|
|
|
- content: '确认要退出登录吗？',
|
|
|
- positiveText: '退出登录',
|
|
|
- negativeText: '取消',
|
|
|
- maskClosable: false,
|
|
|
- onPositiveClick: () => {
|
|
|
- userStore.logout()
|
|
|
- message.success('退出登录成功')
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-let clickNum = 0
|
|
|
-let to: any = null
|
|
|
-function showConsoleEve() {
|
|
|
- clickNum++
|
|
|
- if (clickNum >= 10) {
|
|
|
- initEruda()
|
|
|
- useStorage('showConsole', 0).value = new Date().getTime() + 60 * 60 * 1000
|
|
|
- clickNum = 0
|
|
|
- return
|
|
|
- } else {
|
|
|
- if (to) {
|
|
|
- clearTimeout(to)
|
|
|
- }
|
|
|
- to = setTimeout(() => {
|
|
|
- clickNum = 0
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-setTimeout(() => {
|
|
|
- if (route.query.login && !isMobile.value) {
|
|
|
- showLogin.value = true
|
|
|
- router.replace({ query: {} }).catch(() => {})
|
|
|
- }
|
|
|
-}, 300)
|
|
|
-
|
|
|
-//介绍
|
|
|
-const showDesc = ref(false)
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-:deep(.n-page-header-wrapper) {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- z-index: 20;
|
|
|
+.page {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-:deep(.n-avatar) {
|
|
|
- --n-merged-color: transparent;
|
|
|
+#robot1 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
</style>
|
