CocoClassHelpDocs/components/HomeContent.vue

<script setup lang="ts">
import { ref } from "vue";
import Search from "./Search/index.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
const count = ref(0);
</script>
<template>
  <div class="home-content">
    <h1>您好，需要提供什么帮助？</h1>
    <Search />
    <h1>新手入门</h1>
    <section>
      <div class="card type1">
        <h2>
          平台概览<el-icon><ArrowRightBold /></el-icon>
        </h2>
        <span class="content">TODO</span>
      </div>

      <div class="card">
        <h2>
          平台概览<el-icon><ArrowRightBold /></el-icon>
        </h2>
        <span class="content">TODO</span>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
h2 {
  border: none;
  margin: 0;
  padding: 0;
}
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  section {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    gap: 20px;
  }
  .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 20px;
    padding: 32px;
    background: #f5f9ff;
    border: 1px solid #e2eeff;
    min-height: 240px;
    &.type1 {
      background-color: #f6fdff;
      border: 1px solid #e3f8f4;
    }
    h2 {
      display: flex;
      align-items: center;
      .el-icon {
        width: 24px;
        height: 24px;
        margin-left: 8px;
        color: #00000042;
      }
    }
    .content {
      font-size: 14px;
      font-weight: 400;
    }
  }
}
</style>