```

feat(course-card): 重构课程卡片组件样式和布局

- 添加封面图片区域和底部内容区域
- 实现悬停时底部内容滑入效果
- 集成日历图标、用户头像和联系信息
- 添加详情和开始使用按钮
- 调整课程网格间距从20px到16px
- 新增圆角4px样式类
- 使用appStore获取用户头像信息
```

src/components/course-card.vue

@@ -1,6 +1,40 @@
 <template>
   <div class="course-card list_item_animation">
-    <div class="flex-center-between">
+    <div class="bg_color_f5 coverImg"></div>
+    <div class="course-card-bottom-height"></div>
+    <div class="padding16 course-card-bottom">
+      <div class="gap10">
+        <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
+        <div class="font_size13">2023-10-15</div>
+      </div>
+      <div class="line2 font_size18 line_height22 bold mt10">
+        【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
+      </div>
+      <div class="mt10 line1 gray font_size13">
+        - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
+      </div>
+      <div class="mt10 flex-center-between">
+        <div class="gap10">
+          <el-avatar :size="24" :src="appStore.avatar" />
+          <div class="font_size14">张三</div>
+        </div>
+        <div class="gap10 contactInfo_bg border_radius_4">
+          <img :src="yunIcon" alt="" style="width: 16px; height: 16px;">
+          <div class="font_size13">n8n平台</div>
+        </div>
+      </div>
+      <div class="gap10 mt16 button-container">
+        <el-button type="primary" class="flex_1" size="large" plain>
+          <el-icon class="mr10"><Document /></el-icon>
+          查看详情
+        </el-button>
+        <el-button type="primary" class="flex_1 gradient" size="large">
+          <el-icon class="mr10"><VideoPlay /></el-icon>
+          开始使用
+        </el-button>
+      </div>
+    </div>
+    <!-- <div class="flex-center-between">
       <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
       <div class="line2 font_size18 line_height22 font_weight400">
         【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
@@ -24,15 +58,17 @@
         <el-icon class="mr10"><VideoPlay /></el-icon>
         开始使用
       </el-button>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup>
 import n8Icon from '@/assets/imgs/8n8.png'
 import yunIcon from '@/assets/imgs/yun.png'
 import riliIcon from '@/assets/imgs/rili.png'
+import { useAppStore } from '@/pinia/appStore'
+const appStore = useAppStore();
+
 const props = defineProps({
-  // 视频地址
   info: {
     type: Object,
     default: () => ({})
@@ -42,13 +78,14 @@ const props = defineProps({
 
 <style scoped lang="scss">
 .course-card {
+  width: 368px;
   border: 1px solid #ffffff;
   // background-color: rgba(255, 255, 255, 0.5);
   background-color: #ffffff;
   border-radius: 8px;
-  padding: 16px;
   overflow: hidden;
   cursor: pointer;
+  position: relative; // 添加相对定位
   // transition: transform 0.3s;
   
   // &:hover {
@@ -62,5 +99,28 @@ const props = defineProps({
       text-decoration: underline;
     }
   }
+  .coverImg{
+    width: 100%;
+    height: 204px;
+  }
+  .course-card-bottom {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 16px;
+    background: white; // 确保背景色
+    transform: translateY(60px); // 初始完全在下方隐藏
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover {
+    .course-card-bottom {
+      transform: translateY(0); // 悬浮时上移显示
+    }
+  }
+  .course-card-bottom-height{
+    height: 204px;
+  }
 }
 </style>

src/styles/index.scss

@@ -451,7 +451,7 @@ wx-image{
 .course-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-	gap: 20px;
+	gap: 16px;
 }
 
 .order_btn{
@@ -504,6 +504,9 @@ wx-image{
 	//从左到右渐变色
   background: linear-gradient(to right, rgba(73, 171, 255, 1), rgba(0, 137, 255, 1));
 }
+.border_radius_4{
+	border-radius: 4px;
+}
 .border_radius_10{
 	border-radius: 10px;
 }