|
|
@@ -12,7 +12,10 @@
|
|
|
>
|
|
|
<n-page-header>
|
|
|
<template #title>
|
|
|
- <div class="flex items-center py-3 lg:py-8 pl-4 lg:pl-15 2xl:pl-52" @click="showConsoleEve">
|
|
|
+ <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="" />
|
|
|
@@ -53,16 +56,18 @@
|
|
|
</n-page-header>
|
|
|
</NConfigProvider>
|
|
|
|
|
|
- <div class="flex flex-col items-center content-center flex-1 pt-4 pb-24 lg:py-32 page-content">
|
|
|
- <img src="@/assets/brand.png" class="w-3/4 max-w-[510px]" alt="" />
|
|
|
+ <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 lg:text-lg text-white text-center mt-4 w-[90%] max-w-4xl">
|
|
|
+ <div class="text-xs leading-6 md:text-lg text-white text-center md:text-left mt-4 w-[90%] max-w-[705px]">
|
|
|
走马AI助手
|
|
|
是人工智能技术驱动的自然语言处理工具，它能够通过理解和学习人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，甚至能完成撰写邮件、视频脚本、文案、翻译、代码，写论文等任务。
|
|
|
</div>
|
|
|
|
|
|
<NConfigProvider
|
|
|
- class="w-[90%] max-w-[426px] mt-8"
|
|
|
+ class="w-[90%] max-w-[426px] mt-8 md:mt-10"
|
|
|
:theme-overrides="{
|
|
|
common: { cardColor: 'transparent' },
|
|
|
Card: {
|
|
|
@@ -73,18 +78,26 @@
|
|
|
}"
|
|
|
>
|
|
|
<n-card
|
|
|
- class="vip rounded-xl border overflow-hidden backdrop-blur-sm"
|
|
|
+ class="vip rounded-xl overflow-hidden backdrop-blur-sm"
|
|
|
:content-style="{
|
|
|
padding: 0
|
|
|
}"
|
|
|
+ :bordered="isMobile"
|
|
|
>
|
|
|
- <n-grid cols="4" responsive="screen" class="px-5">
|
|
|
- <n-grid-item v-for="item in items" :key="item.name">
|
|
|
- <div class="flex flex-col items-center h-[120px] justify-center">
|
|
|
- <img class="w-11 h-11" :src="item.img" alt="" />
|
|
|
- <div class="text text-xs text-gray-50 mt-2 text-center">
|
|
|
- <div class="whitespace-nowrap">{{ item.name }}</div>
|
|
|
- <div class="mt-1 text-[10px] text-neutral-400">{{ item.desc }}</div>
|
|
|
+ <n-grid cols="4" responsive="screen" class="px-5 md:px-0">
|
|
|
+ <n-grid-item v-for="(item, index) in items" :key="item.name">
|
|
|
+ <div class="flex flex-col items-center h-[120px] md:h-[82px] justify-center md:items-start">
|
|
|
+ <div class="flex flex-col items-center relative" :class="{ 'pb-[44px]': index === 1 }">
|
|
|
+ <img class="w-11 h-11" :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>
|
|
|
@@ -92,19 +105,21 @@
|
|
|
</n-card>
|
|
|
</NConfigProvider>
|
|
|
|
|
|
- <div class="flex-1"></div>
|
|
|
+ <div class="flex-1" v-if="isMobile"></div>
|
|
|
|
|
|
<NConfigProvider
|
|
|
:theme-overrides="{
|
|
|
Button: {
|
|
|
- heightMedium: '44px'
|
|
|
+ heightMedium: '44px',
|
|
|
+ heightLarge: isMobile ? '44px' : '60px',
|
|
|
+ fontSizeLarge: isMobile ? '16px' : '24px'
|
|
|
}
|
|
|
}"
|
|
|
- class="mt-16 w-5/6 sm:w-80"
|
|
|
+ class="mt-16 w-[300px] sm:w-80"
|
|
|
>
|
|
|
<n-button
|
|
|
type="primary"
|
|
|
- class="alimamaShuHeiTi"
|
|
|
+ class="alimamaShuHeiTi max-w-[300px] !border-white"
|
|
|
block
|
|
|
round
|
|
|
size="large"
|
