CocoClassHelpDocs/components/HomeContent.vue

<script setup lang="ts">
import { ref } from "vue";
import Search from "./Search/index.vue";
import HomeCard from "./HomeCard";
import HomeSection from "./HomeSection.vue";
import IconNotebook from "~icons/ccrbi-plain/notebook";
import IconBook from "~icons/ccrbi-plain/book";
import IconDirectory from "~icons/ccrbi-plain/directory";
import IconXieTongJianGou from "~icons/ccrbi-colored/xie-tong-jian-gou";
import IconAiZhuShou from "~icons/ccrbi-colored/ai-zhu-shou";
import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
</script>

<template>
  <div class="home-content">
    <HomeSection title="您好，需要提供什么帮助？">
      <Search />
    </HomeSection>

    <HomeSection title="新手入门">
      <HomeCard color="skyblue" :span="12">
        <template #title>
          <HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
        </template>
        <HomeCard.Content>
          <span class="content">TODO</span>
        </HomeCard.Content>
      </HomeCard>
      <HomeCard showArrow :span="12">
        <template #title>
          <HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
        </template>
        <HomeCard.Content>
          <span class="content">TODO</span>
        </HomeCard.Content>
      </HomeCard>
    </HomeSection>

    <HomeSection title="平台使用">
      <HomeCard title="基础使用" :span="24">
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconNotebook color="#3681FC" />
              创建课程
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconBook color="#FF822B" />
              实施课程
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconDirectory color="#34CEAE" />
              创建项目
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
      </HomeCard>
      <HomeCard title="进阶使用" :span="24">
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconXieTongJianGou />
              协同建构
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconAiZhuShou />
              AI助手
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
        <HomeCard :span="8" color="white">
          <template #title>
            <HomeCard.Title>
              <IconAiChuangJian />
              AI创建
            </HomeCard.Title>
          </template>
          <HomeCard.Content>
            <span class="content">TODO</span>
          </HomeCard.Content>
        </HomeCard>
      </HomeCard>
    </HomeSection>

    <HomeSection title="更多资源">
      <HomeCard title="课程案例" :span="12">
        <!-- TODO -->
      </HomeCard>
      <HomeCard title="项目案例" :span="12">
        <!-- TODO -->
      </HomeCard>
      <HomeCard>
        <HomeCard title="常见问题" :span="8" color="white">
          <!-- TODO -->
        </HomeCard>
        <HomeCard title="更新日志" :span="8" color="white">
          <!-- TODO -->
        </HomeCard>
        <HomeCard title="如何与AI对话" :span="8" color="white">
          <!-- TODO -->
        </HomeCard>
      </HomeCard>
    </HomeSection>
  </div>
</template>

<style lang="scss" scoped>
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: 80px;
}
</style>