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 { ArrowRightBold } from "@element-plus/icons-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";
import { useData, withBase, useRouter } from "vitepress";
import path from "path-browserify";

const { localeIndex } = useData();
const router = useRouter();
const withLink = (href: string) => {
  return withBase(
    path.join(localeIndex.value === "root" ? "" : localeIndex.value, "docs", href)
  );
};
</script>

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

    <HomeSection title="新手入门">
      <HomeSectionContent :span="12">
        <HomeCard
          color="skyblue"
          :backgroundStyle="{
            right: '16px',
            bottom: '24px',
            width: '268px',
            height: '148px',
          }"
        >
          <template #background>
            <img src="@/assets/images/card1.png" />
          </template>
          <template #title>
            <HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
          </template>
          <HomeCardContent>
            <ul>
              <li>什么是可可智慧教育平台？</li>
              <li>功能概览</li>
            </ul>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
      <HomeSectionContent :span="12">
        <HomeCard
          :backgroundStyle="{
            right: '40px',
            bottom: '24px',
            width: '128px',
            height: '128px',
          }"
        >
          <template #background>
            <img src="@/assets/images/card2.png" />
          </template>
          <template #title>
            <HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
          </template>
          <HomeCardContent>
            <ul>
              <li>如何获取账户？</li>
              <li>如何登录？</li>
            </ul>
          </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>
                教师通过个人、协同的方式创建多种模式下的平台数字化课程。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconBook color="#FF822B" />
                  实施课程
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                开展数字化课程教学与学习，在实施中进行学习证据采集。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconDirectory color="#34CEAE" />
                  创建项目
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                以项目式学习探究创建项目、记录项目、管理项目。
              </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>
                师生以协同建构（CocoNote）开展计算机支持下的协作问题解决。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconAiZhuShou />
                  AI助手
                </HomeCard.Title>
              </template>
              <HomeCardContent> 使用生成式人工智能技术提供对话式工具。 </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard color="white">
              <template #title>
                <HomeCard.Title>
                  <IconAiChuangJian />
                  教师管理
                </HomeCard.Title>
              </template>
              <HomeCardContent>
                创建可重复使用的表单，组织团队资料收集与汇总。
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>
    </HomeSection>

    <HomeSection title="更多资源">
      <HomeSectionContent :span="12">
        <HomeCard title="课程案例">
          <HomeCardContent :span="24">
            <ul class="fancy-list">
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li @click="router.go(withLink('TODO'))">
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
            </ul>
          </HomeCardContent>
          <HomeCardContent :span="24">
            <el-button round size="large"
              >查看更多<el-icon class="el-icon--right"><ArrowRightBold /></el-icon
            ></el-button>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent :span="12">
        <HomeCard title="项目案例" :span="12">
          <HomeCardContent :span="24">
            <ul class="fancy-list">
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
              <li>
                <el-text class="flex-1" size="large" truncated>
                  Self element set wadslfkjsa;ldkjf;lsdkjf;lsdajf;lasdkjf;ladskjfidth
                  100px
                </el-text>
                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
              </li>
            </ul>
          </HomeCardContent>
          <HomeCardContent :span="24">
            <el-button round size="large"
              >查看更多<el-icon class="el-icon--right"><ArrowRightBold /></el-icon
            ></el-button>
          </HomeCardContent>
        </HomeCard>
      </HomeSectionContent>

      <HomeSectionContent>
        <HomeCard>
          <HomeCardContent :span="8">
            <HomeCard
              title="常见问题"
              color="white"
              :backgroundStyle="{
                right: '10px',
                bottom: '0',
                width: '122px',
                height: '128px',
              }"
            >
              <template #background>
                <img src="@/assets/images/card3.png" />
              </template>
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard
              title="更新日志"
              color="white"
              :backgroundStyle="{
                right: '0',
                bottom: '0',
                width: '160px',
                height: '128px',
              }"
            >
              <template #background>
                <img src="@/assets/images/card4.png" />
              </template>
              <HomeCardContent>
                <!-- TODO -->
              </HomeCardContent>
            </HomeCard>
          </HomeCardContent>
          <HomeCardContent :span="8">
            <HomeCard
              title="如何与AI对话"
              color="white"
              :backgroundStyle="{
                right: '17px',
                bottom: '0',
                width: '167px',
                height: '92px',
              }"
            >
              <template #background>
                <img src="@/assets/images/card5.png" />
              </template>
              <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;
}
.fancy-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  li {
    display: flex;
    height: 38px;
    align-items: center;
    transition: all 0.2s;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 4px;
    margin: 0;
    cursor: pointer;
    &::before {
      content: "•";
      margin: 0 8px;
    }
    &:hover {
      // border: 1px solid #3681fc;
      border-color: #3681fc;
      background: #ffffff;
    }
    span {
      flex: 1;
    }
  }
}
.el-button:not(:hover) {
  background-color: transparent;
  border: 1px solid #aeccfe;
}
</style>