功能：首页热门课程

src/api/index.ts

 import { CommonAPI } from './modules/common';
+import { FlyerAPI } from './modules/flyer';
 import { HomeAPI } from './modules/home';
 import { UserAPI } from './modules/user';
 import { WalletAPI } from './modules/wallet';
 
-export { CommonAPI, HomeAPI, UserAPI, WalletAPI };
+export { CommonAPI, HomeAPI, UserAPI, WalletAPI, FlyerAPI };

src/api/interface/flyer.ts

+import { InterItemFunction, InterListFunction } from '@/api/interface';
+
+// V1.0.1课程视频列表
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type queryCurriculumInfoListType = InterListFunction<
+  {
+    courseAttribute?: number;
+    curriculumName?: string;
+    oneCourseId?: number;
+    twoCourseId?: number;
+    isHot?: number;
+  },
+  {
+    id: number;
+    oneCourseId: number;
+    twoCourseId: number;
+    curriculumName: string;
+    curriculumDesc: string;
+    surfaceUrl: string;
+    videoUrl: string;
+    courseAttribute: number;
+    requireAmout: number;
+    requireIntegral: number;
+    isHot: number;
+    detailContent: string;
+    createTime: string;
+    updateTime: string;
+  }
+>;
+
+// 课程列表
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type courseVideoListType = InterItemFunction<
+  {
+    flightSkillsId?: number;
+    licenseId?: number;
+    regionId?: number;
+    curriculumName?: string;
+  },
+  {
+    id: number;
+    videoUrl: string;
+    supplierName: string;
+    curriculumDesc: string;
+    curriculumName: string;
+    price: string;
+    free: number;
+    peopleCount: number;
+    surfaceUrl: string;
+  }[]
+>;

src/api/modules/flyer.ts

+import {
+  courseVideoListType,
+  queryCurriculumInfoListType,
+} from '@/api/interface/flyer';
+import request from '@/api/request';
+
+export class FlyerAPI {
+  // 课程列表
+  static getCourseVideoList: courseVideoListType = (data) => {
+    return request.post('/release/curriculum/queryCurriculumInfoList', data);
+  };
+
+  // V1.0.1课程视频列表
+  static queryCurriculumInfoList: queryCurriculumInfoListType = (params) =>
+    request.post('/release/curriculum/queryCurriculumInfoList', params);
+}

src/components/home-comp/home-course/index.tsx

+import React, { useEffect, useState } from 'react';
+import { FlyerAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { queryCurriculumInfoListType } from '@/api/interface/flyer';
+
+// 列表类型
+type ListType = InterListType<queryCurriculumInfoListType>;
+// 课程类型列表
+const courseAttributeList: { label: string; value: number; color: string }[] = [
+  { label: '免费', value: 0, color: 'bg-[#f99a0b]' },
+  { label: '积分', value: 1, color: 'bg-[#00AD53]' },
+  { label: '付费', value: 2, color: 'bg-[#FF4600]' },
+];
+
+const HomeCourseView = () => {
+  // 课程列表
+  const [courseList, setCourseList] = useState<ListType>([]);
+  // 获取热门课程
+  const getCurriculumInfoList = async () => {
+    const res = await FlyerAPI.queryCurriculumInfoList({
+      pageSize: 5,
+      pageNo: 1,
+      isHot: 1,
+    });
+    if (res && res.code === '200') {
+      const list = res.result?.list || [];
+      setCourseList(list);
+    }
+  };
+  // 获取当前课程属性
+  const getCourseAttribute = (item: ListType[0]) => {
+    return courseAttributeList?.find((i) => i.value === item?.courseAttribute);
+  };
+  // 组件挂载
+  useEffect(() => {
+    getCurriculumInfoList().then();
+  }, []);
+  return (
+    <div className="mb-3 mt-3 flex w-full flex-nowrap items-center justify-start">
+      {courseList?.map((i, j) => (
+        <div
+          className="animate__animated animate__fast animate__fadeIn relative  mr-3.5 w-1/5 cursor-pointer overflow-hidden rounded [box-shadow:0rem_0.17rem_0.86rem_0rem_rgba(65,65,65,0.08)] last:mr-0 hover:brightness-95 hover:filter"
+          key={j}
+        >
+          {!!i.surfaceUrl && (
+            <img
+              src={i.surfaceUrl}
+              alt={i.curriculumName}
+              className="h-28 w-full object-cover"
+            />
+          )}
+          <div className="box-border min-h-20 w-full bg-white px-2 pt-1">
+            <div className="mb-1 flex">
+              <div className="text-333 text-ellipsis font-bold">
+                {i.curriculumName}
+              </div>
+              <div
+                className={`${getCourseAttribute(i)
+                  ?.color} ml-2 min-w-8 rounded px-1 text-center text-xs text-white`}
+              >
+                {getCourseAttribute(i)?.label}
+              </div>
+            </div>
+            <div className="text-777 text-ellipsis text-xs">
+              {i.curriculumDesc}
+            </div>
+            <div className="text-aaa absolute bottom-1 right-0 flex w-full justify-between px-2 text-xs">
+              <div>课程供应商</div>
+              <div>{i.id * 333} 人已学习</div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HomeCourseView;

src/components/home-comp/home-service/index.tsx

@@ -61,7 +61,7 @@ const HomeServiceView = () => {
         {refresh &&
           industryList?.[currentIndex]?.inspectionDTOS?.map((i, j) => (
             <div
-              className="service-item animate__animated animate__fast animate__fadeIn"
+              className="service-item animate__animated animate__fast animate__fadeIn overflow-hidden rounded"
               key={j}
               onClick={() => handleDetail(i)}
             >

src/pages/home/index.tsx

 import React from 'react';
 import HomeBottomView from '@/components/home-comp/home-bottom';
 import HomeBrandView from '@/components/home-comp/home-brand';
+import HomeCourseView from '@/components/home-comp/home-course';
 import HomeMapView from '@/components/home-comp/home-map';
 import HomeNewsView from '@/components/home-comp/home-news';
 import HomeProductView from '@/components/home-comp/home-product';
@@ -45,6 +46,10 @@ const HomeView = () => {
         <HomeTitleView title="大家都在买" path="/mall" />
         {/* 推荐商品 */}
         <HomeProductView />
+        {/* 热门课程 */}
+        <HomeTitleView title="热门课程" path="/course" />
+        {/* 课程列表 */}
+        <HomeCourseView />
         {/* 无人机服务 */}
         <HomeTitleView title="无人机服务" path="/service" />
         {/* 服务列表 */}

tailwind.config.js

@@ -16,6 +16,12 @@ module.exports = {
       screens: {
         xl: '1190px',
       },
+      colors: {
+        333: '#333',
+        777: '#777',
+        999: '#999',
+        aaa: '#aaa',
+      },
     },
   },
   plugins: [],