CocoClassHelpDocs/components/HomeContent.vue

<script setup lang="ts">
import Search from "./Search/index.vue";
import HomeCard, { HomeCardContent } from "./HomeCard";
import HomeSection, { HomeSectionContent } from "./HomeSection";
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="您好，需要提供什么帮助？">
      <HomeSectionContent>
        <Search />
      </HomeSectionContent>
    </HomeSection>

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

    <HomeSection title="平台使用">
      <HomeSectionContent :span="24">
        <HomeCard title="基础使用">
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconNotebook color="#3681FC" />
                  创建课程
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconBook color="#FF822B" />
                  实施课程
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconDirectory color="#34CEAE" />
                  创建项目
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent :span="24">
        <HomeCard title="进阶使用">
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconXieTongJianGou />
                  协同建构
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconAiZhuShou />
                  AI助手
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconAiChuangJian />
                  AI创建
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                <span class="content">TODO</span>
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>

    <HomeSection title="更多资源">
      <HomeSectionContent :span="12">
        <HomeCard title="课程案例">
          <HomeCardContent :span="12">
            <!-- TODO -->
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent :span="12">
        <HomeCard title="项目案例" :span="12">
          <HomeCardContent :span="12">
            <!-- TODO -->
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent>
        <HomeCard>
          <HomeCardContent :span="8">
            <HomeCard title="常见问题" color="white">
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard title="更新日志" color="white">
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard title="如何与AI对话" color="white">
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>
  </div>
</template>

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