|
@@ -11,6 +11,9 @@ import IconAiZhuShou from "~icons/ccrbi-colored/ai-zhu-shou";
|
|
|
import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
|
|
|
import { useData, withBase, useRouter } from "vitepress";
|
|
|
import path from "path-browserify";
|
|
|
+import { useBreakpoints } from "@vueuse/core";
|
|
|
+import { computed } from 'vue'
|
|
|
+
|
|
|
|
|
|
const { localeIndex } = useData();
|
|
|
const router = useRouter();
|
|
@@ -19,11 +22,96 @@ const withLink = (href: string) => {
|
|
|
path.join("/", localeIndex.value === "root" ? "" : localeIndex.value, "docs", href)
|
|
|
);
|
|
|
};
|
|
|
+const breakpoints = useBreakpoints({
|
|
|
+ tablet: 640,
|
|
|
+ laptop: 1024,
|
|
|
+ desktop: 1280,
|
|
|
+})
|
|
|
+const isMobile = computed(() => breakpoints.isSmaller('tablet'))
|
|
|
+
|
|
|
+const cardNewerbgStyle = computed(() => {
|
|
|
+ if (isMobile.value) {
|
|
|
+ return {
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: '8px',
|
|
|
+ margin: 'auto',
|
|
|
+ width: '134px',
|
|
|
+ height: '74px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ right: '16px',
|
|
|
+ bottom: '24px',
|
|
|
+ width: '268px',
|
|
|
+ height: '148px',
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const cardLoginbgStyle = computed(() => {
|
|
|
+ if (isMobile.value) {
|
|
|
+ return {
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: '8px',
|
|
|
+ margin: 'auto',
|
|
|
+ width: '64px',
|
|
|
+ height: '64px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ right: '40px',
|
|
|
+ bottom: '24px',
|
|
|
+ width: '128px',
|
|
|
+ height: '128px',
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const cardUsualQuestionbgStyle = computed(() => {
|
|
|
+ if (isMobile.value) {
|
|
|
+ return {
|
|
|
+ right: '24px',
|
|
|
+ top: 0,
|
|
|
+ bottom: 0,
|
|
|
+ margin: 'auto',
|
|
|
+ width: '102px',
|
|
|
+ height: '102px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ right: '10px',
|
|
|
+ bottom: '0',
|
|
|
+ width: '122px',
|
|
|
+ height: '128px',
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const cardAIHowbgStyle = computed(() => {
|
|
|
+ if (isMobile.value) {
|
|
|
+ return {
|
|
|
+ right: '24px',
|
|
|
+ top: 0,
|
|
|
+ bottom: 0,
|
|
|
+ margin: 'auto',
|
|
|
+ width: '133px',
|
|
|
+ height: '74px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ right: '17px',
|
|
|
+ bottom: '0',
|
|
|
+ width: '167px',
|
|
|
+ height: '92px',
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="home-content">
|
|
|
- <HomeSection title="您好,需要提供什么帮助?">
|
|
|
+ <HomeSection>
|
|
|
+ <template #title>
|
|
|
+ <h1 :style="{ fontSize: isMobile ? '24px' : undefined }">您好,需要提供什么帮助?</h1>
|
|
|
+ </template>
|
|
|
<HomeSectionContent>
|
|
|
<Search />
|
|
|
</HomeSectionContent>
|
|
@@ -31,19 +119,14 @@ const withLink = (href: string) => {
|
|
|
|
|
|
<HomeSection title="新手入门">
|
|
|
<HomeSectionContent :span="12">
|
|
|
- <HomeCard color="skyblue" :backgroundStyle="{
|
|
|
- right: '16px',
|
|
|
- bottom: '24px',
|
|
|
- width: '268px',
|
|
|
- height: '148px',
|
|
|
- }" :link="withLink('')">
|
|
|
+ <HomeCard color="skyblue" :backgroundStyle="cardNewerbgStyle" :link="withLink('')">
|
|
|
<template #background>
|
|
|
<img src="@/assets/images/card1.png" />
|
|
|
</template>
|
|
|
<template #title>
|
|
|
<HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
|
|
|
</template>
|
|
|
- <HomeCardContent>
|
|
|
+ <HomeCardContent v-if="!isMobile">
|
|
|
<ul>
|
|
|
<li>什么是可可智慧教育平台?</li>
|
|
|
<li>功能概览</li>
|
|
@@ -52,19 +135,14 @@ const withLink = (href: string) => {
|
|
|
</HomeCard>
|
|
|
</HomeSectionContent>
|
|
|
<HomeSectionContent :span="12">
|
|
|
- <HomeCard :backgroundStyle="{
|
|
|
- right: '40px',
|
|
|
- bottom: '24px',
|
|
|
- width: '128px',
|
|
|
- height: '128px',
|
|
|
- }" :link="withLink('#登录')">
|
|
|
+ <HomeCard color="primary" :backgroundStyle="cardLoginbgStyle" :link="withLink('#登录')">
|
|
|
<template #background>
|
|
|
<img src="@/assets/images/card2.png" />
|
|
|
</template>
|
|
|
<template #title>
|
|
|
<HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
|
|
|
</template>
|
|
|
- <HomeCardContent>
|
|
|
+ <HomeCardContent v-if="!isMobile">
|
|
|
<ul>
|
|
|
<li>如何获取账户?</li>
|
|
|
<li>如何登录?</li>
|
|
@@ -77,7 +155,7 @@ const withLink = (href: string) => {
|
|
|
<HomeSection title="平台使用">
|
|
|
<HomeSectionContent :span="24">
|
|
|
<HomeCard title="基础使用">
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="withLink('课程创建')">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -90,7 +168,7 @@ const withLink = (href: string) => {
|
|
|
</HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent>
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="withLink('课程授课')">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -103,7 +181,7 @@ const withLink = (href: string) => {
|
|
|
</HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent>
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="undefined">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -134,7 +212,7 @@ const withLink = (href: string) => {
|
|
|
</HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent> -->
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="withLink('教师管理')">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -147,7 +225,7 @@ const withLink = (href: string) => {
|
|
|
</HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent>
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="withLink('AI工具')">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -158,7 +236,7 @@ const withLink = (href: string) => {
|
|
|
<HomeCardContent> 使用生成式人工智能技术提供对话式工具。 </HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent>
|
|
|
- <HomeCardContent :span="8">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 8">
|
|
|
<HomeCard color="white" :link="withLink('综合看板')">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
@@ -248,13 +326,8 @@ const withLink = (href: string) => {
|
|
|
|
|
|
<HomeSectionContent>
|
|
|
<HomeCard>
|
|
|
- <HomeCardContent :span="12">
|
|
|
- <HomeCard title="常见问题" color="white" :backgroundStyle="{
|
|
|
- right: '10px',
|
|
|
- bottom: '0',
|
|
|
- width: '122px',
|
|
|
- height: '128px',
|
|
|
- }" :link="undefined">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 12">
|
|
|
+ <HomeCard title="常见问题" color="white" :backgroundStyle="cardUsualQuestionbgStyle" :link="undefined">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
|
<el-badge value="即将上线"> 常见问题 </el-badge>
|
|
@@ -288,13 +361,8 @@ const withLink = (href: string) => {
|
|
|
</HomeCardContent>
|
|
|
</HomeCard>
|
|
|
</HomeCardContent> -->
|
|
|
- <HomeCardContent :span="12">
|
|
|
- <HomeCard title="如何与AI对话" color="white" :backgroundStyle="{
|
|
|
- right: '17px',
|
|
|
- bottom: '0',
|
|
|
- width: '167px',
|
|
|
- height: '92px',
|
|
|
- }" :link="undefined">
|
|
|
+ <HomeCardContent :span="isMobile ? 24 : 12">
|
|
|
+ <HomeCard title="如何与AI对话" color="white" :backgroundStyle="cardAIHowbgStyle" :link="undefined">
|
|
|
<template #title>
|
|
|
<HomeCard.Title>
|
|
|
<el-badge value="即将上线"> 如何与AI对话 </el-badge>
|
|
@@ -315,12 +383,19 @@ const withLink = (href: string) => {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+@use '@/.vitepress/theme/screen' as *;
|
|
|
+
|
|
|
.home-content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
gap: 80px;
|
|
|
padding-top: 80px;
|
|
|
+
|
|
|
+ @include breakpoint(mobile) {
|
|
|
+ gap: 32px;
|
|
|
+ padding-top: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.fancy-list {
|