feat

components/HomeCard/HomeCard.vue

@@ -6,9 +6,11 @@ const props = withDefaults(
   defineProps<{
     title?: string;
     color?: "info" | "skyblue" | "white";
+    backgroundStyle?: Record<string, string>;
   }>(),
   {
     color: "info",
+    backgroundStyle: { right: "16px", bottom: "24px" },
   }
 );
 const { title, color } = toRefs(props);
@@ -33,16 +35,19 @@ const styles = computed(() => {
 });
 </script>
 <template>
-    <div class="card" :style="styles">
-      <slot name="title">
-        <h2 v-if="title">
-          {{ title }}
-        </h2>
-      </slot>
-      <el-row :gutter="20" tag="section">
-        <slot></slot>
-      </el-row>
+  <div class="card" :style="styles">
+    <div v-if="$slots.background" class="background" :style="props.backgroundStyle">
+      <slot name="background"> </slot>
     </div>
+    <slot name="title">
+      <h2 v-if="title">
+        {{ title }}
+      </h2>
+    </slot>
+    <el-row :gutter="20" tag="section">
+      <slot></slot>
+    </el-row>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -52,6 +57,7 @@ h2 {
   padding: 0;
 }
 .card {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -64,6 +70,9 @@ h2 {
   :deep(.card) {
     min-height: 162px;
   }
+  .background {
+    position: absolute;
+  }
   h2 {
     display: flex;
     align-items: center;

components/HomeContent.vue

@@ -2,12 +2,23 @@
 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>
@@ -20,22 +31,49 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
 
     <HomeSection title="新手入门">
       <HomeSectionContent :span="12">
-        <HomeCard color="skyblue">
+        <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>
-            <span class="content">TODO</span>
+            <ul>
+              <li>什么是可可智慧教育平台？</li>
+              <li>功能概览</li>
+            </ul>
           </HomeCardContent>
         </HomeCard>
       </HomeSectionContent>
       <HomeSectionContent :span="12">
-        <HomeCard showArrow>
+        <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>
-            <span class="content">TODO</span>
+            <ul>
+              <li>如何获取账户？</li>
+              <li>如何登录？</li>
+            </ul>
           </HomeCardContent>
         </HomeCard>
       </HomeSectionContent>
@@ -53,7 +91,7 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                <span class="content">TODO</span>
+                教师通过个人、协同的方式创建多种模式下的平台数字化课程。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -66,7 +104,7 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                <span class="content">TODO</span>
+                开展数字化课程教学与学习，在实施中进行学习证据采集。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -79,7 +117,7 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                <span class="content">TODO</span>
+                以项目式学习探究创建项目、记录项目、管理项目。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -97,7 +135,7 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                <span class="content">TODO</span>
+                师生以协同建构（CocoNote）开展计算机支持下的协作问题解决。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -109,9 +147,7 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
                   AI助手
                 </HomeCard.Title>
               </template>
-              <HomeCardContent>
-                <span class="content">TODO</span>
-              </HomeCardContent>
+              <HomeCardContent> 使用生成式人工智能技术提供对话式工具。 </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
@@ -119,11 +155,11 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
               <template #title>
                 <HomeCard.Title>
                   <IconAiChuangJian />
-                  AI创建
+                  教师管理
                 </HomeCard.Title>
               </template>
               <HomeCardContent>
-                <span class="content">TODO</span>
+                创建可重复使用的表单，组织团队资料收集与汇总。
               </HomeCardContent>
             </HomeCard>
           </HomeCardContent>
@@ -134,16 +170,70 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
     <HomeSection title="更多资源">
       <HomeSectionContent :span="12">
         <HomeCard title="课程案例">
-          <HomeCardContent :span="12">
-            <!-- TODO -->
+          <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="12">
-            <!-- TODO -->
+          <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>
@@ -151,21 +241,57 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
       <HomeSectionContent>
         <HomeCard>
           <HomeCardContent :span="8">
-            <HomeCard title="常见问题" color="white">
+            <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">
+            <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">
+            <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>
@@ -185,4 +311,40 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
   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>