```

feat(layout): 固定头部并优化样式

- 将 `.el-header` 设置为固定定位，并添加背景图片替换原有背景色
- 添加占位 div 以避免内容被固定头部遮挡
- 引入多个新图标资源用于页面展示
- 新增课程卡片列表模块，包含标题、平台、日期及简介等信息
- 扩展全局样式类，如 margin、字体大小、行高及多行文本省略等
```

src/App.vue

@@ -36,7 +36,8 @@
           </div>
         </div>
       </el-header>
-      
+      <!-- 固定头部占位 -->
+      <div style="height: 60px;"></div>
       <el-main >
         <router-view />
       </el-main>
@@ -92,10 +93,17 @@ const activeIndex = computed(() => {
 }
 
 .el-header {
-  background-color: rgba(255, 255, 255, 0.5);
+  // background-color: rgba(255, 255, 255, 0.5);
+  background: url('@/assets/imgs/bg-header.png') no-repeat;
+  background-size: 100% 100%;
   color: #333;
   line-height: 60px;
-  border-bottom: 1px solid #eee;
+  // border-bottom: 1px solid #eee;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
   
   .header-content {
     max-width: 1520px;

src/pages/Home.vue

@@ -61,6 +61,39 @@
         </button>
       </div>
     </div>
+    <!-- 工作流列表 -->
+    <div class="course-list">
+      <div class="course-grid">
+        <div class="course-card" v-for="item in 4" :key="item">
+          <div class="flex-center-between">
+            <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
+            <div class="line2 font_size14 line_height22 font_weight400">
+              【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
+            </div>
+          </div>
+          <div class="mt16 gap10">
+            <img :src="yunIcon" alt="" style="width: 16px; height: 16px;">
+            <div class="font_size13">n8n平台</div>
+            <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
+            <div class="font_size13">2023-10-15</div>
+          </div>
+          <div class="mt16 line3 gray font_size13">
+            - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
+          </div>
+          <div class="gap10 mt16">
+            <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" size="large">
+              <el-icon class="mr10"><VideoPlay /></el-icon>
+              开始使用
+            </el-button>
+          </div>
+        </div>
+        
+      </div>
+    </div>
     
   </div>
 </template>
@@ -73,6 +106,9 @@ import n8Icon from '@/assets/imgs/8n8.png'
 import cozeIcon from '@/assets/imgs/coze.png'
 import difyIcon from '@/assets/imgs/dify.png'
 import fastgptIcon from '@/assets/imgs/FastGPT.png'
+import yunIcon from '@/assets/imgs/yun.png'
+import riliIcon from '@/assets/imgs/rili.png'
+import detailIcon from '@/assets/imgs/detail.png'
 
 
 import { onMounted,ref } from 'vue'
@@ -282,4 +318,27 @@ $height-btn: 50px;
     }
   }
 }
+.home-page{
+  .course-list{
+    .course-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(362px, 1fr));
+      gap: 20px;
+    }
+    .course-card {
+      border: 1px solid #ffffff;
+      background-color: rgba(255, 255, 255, 0.5);
+      border-radius: 8px;
+      padding: 16px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: transform 0.3s;
+      
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      }
+    }
+  }
+}
 </style>

src/styles/index.scss

@@ -129,6 +129,9 @@ wx-image{
 .mb30 {
 	margin-bottom: 30px;
 }
+.mr10 {
+	margin-right: 10px;
+}
 .mr20 {
 	margin-right: 20px;
 }
@@ -144,6 +147,9 @@ wx-image{
 .ml20 {
 	margin-left: 20px;
 }
+.mt16 {
+	margin-top: 16px;
+}
 .mt20 {
 	margin-top: 20px;
 }
@@ -184,6 +190,16 @@ wx-image{
 	overflow: hidden;
 	/* height: 84px; */
 }
+.line3 {
+	word-break: break-all;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	/* height: 84px; */
+}
+
+
 
 .mask {
 	position: fixed;
@@ -359,6 +375,13 @@ wx-image{
   align-items: center;
    flex-wrap:wrap ;
 }
+.gap10{
+	//水平垂直居中-首部对齐 间隙10px
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 10px;
+}
 .order_btn{
 	font-size: 25px;
 	color: #ffffff;
@@ -418,6 +441,9 @@ wx-image{
 .bold{
 	font-weight: bold;
 }
+.font_weight400{
+	font-weight: 400;
+}
 .font_size40{
 	font-size: 40px;
 }
@@ -445,6 +471,15 @@ wx-image{
 .font_size24{
 	font-size: 24px;
 }
+.font_size14{
+	font-size: 14px;
+}
+.font_size13{
+	font-size: 13px;
+}
+.line_height22{
+	line-height: 22px;
+}
 .line_vertical{
 	width: 8px;
 	height: 30px;