add Li

apps/web/src/app/main/courses/components/CourseCard.tsx

@@ -1,7 +1,6 @@
-import { Card, Rate, Tag, Typography, Button } from "antd";
+import { Card, Tag, Typography, Button } from "antd";
 import {
-	UserOutlined,
-	ClockCircleOutlined,
+	EyeOutlined,
 	PlayCircleOutlined,
 	TeamOutlined,
 } from "@ant-design/icons";
@@ -18,7 +17,6 @@ export default function CourseCard({ course }: CourseCardProps) {
 		navigate(`/course/${course.id}/detail`);
 		window.scrollTo({ top: 0, behavior: "smooth", })
 	};
-
 	return (
 		<Card
 			onClick={() => handleClick(course)}
@@ -39,12 +37,13 @@ export default function CourseCard({ course }: CourseCardProps) {
 				</div>
 			}>
 			<div className="px-4 ">
-				<div className="flex gap-2 mb-4">
+				<div className="overflow-hidden hover:overflow-auto">
+					<div className="flex gap-2 mb-4  whiteSpace-nowrap  ">
 						{course?.terms?.map((term) => {
 							return (
+								<>
 									<Tag
 										key={term.id}
-								// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
 										color={
 											term?.taxonomy?.slug ===
 												TaxonomySlug.CATEGORY
@@ -57,13 +56,15 @@ export default function CourseCard({ course }: CourseCardProps) {
 										className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0 ">
 										{term.name}
 									</Tag>
+								</>
 							);
 						})}
 					</div>
+				</div>
 
 				<Title
 					level={4}
-					className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
+					className="mb-4 mt-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
 					<button> {course.title}</button>
 				</Title>
 
@@ -78,8 +79,8 @@ export default function CourseCard({ course }: CourseCardProps) {
 							{/* {course?.depts?.map((dept)=>{return dept.name})} */}
 						</Text>
 					</div>
-					<span className="text-xs font-medium text-gray-500">
-						{course?.meta?.views
+					<span className="text-xs font-medium text-gray-500 flex items-center">
+					<EyeOutlined className="mr-1" />{course?.meta?.views
 							? `观看次数 ${course?.meta?.views}`
 							: null}
 					</span>