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";
@@ -16,9 +15,8 @@ export default function CourseCard({ course }: CourseCardProps) {
 	const navigate = useNavigate();
 	const handleClick = (course: CourseDto) => {
 		navigate(`/course/${course.id}/detail`);
-		window.scrollTo({top: 0,behavior: "smooth",})
+		window.scrollTo({ top: 0, behavior: "smooth", })
 	};
-
 	return (
 		<Card
 			onClick={() => handleClick(course)}
@@ -38,32 +36,35 @@ export default function CourseCard({ course }: CourseCardProps) {
 					<PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-white/90 opacity-0 group-hover:opacity-100 transition-all duration-300" />
 				</div>
 			}>
-			<div className="px-4">
-				<div className="flex gap-2 mb-4">
-					{course?.terms?.map((term) => {
-						return (
-							<Tag
-								key={term.id}
-								// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
-								color={
-									term?.taxonomy?.slug ===
-										TaxonomySlug.CATEGORY
-										? "blue"
-										: term?.taxonomy?.slug ===
-											TaxonomySlug.LEVEL
-											? "green"
-											: "orange"
-								}
-								className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
-								{term.name}
-							</Tag>
-						);
-					})}
+			<div className="px-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"
+												: term?.taxonomy?.slug ===
+													TaxonomySlug.LEVEL
+													? "green"
+													: "orange"
+										}
+										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>