linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc

This commit is contained in:
ditiqi 2025-02-26 17:04:21 +08:00
parent 754aa9e496 c284cc637b
commit f2fe2d66be
1 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/src/app/main/courses/components/CourseCard.tsx
View File

@ -1,7 +1,6 @@
import { Card, Rate, Tag, Typography, Button } from "antd"; import { Card, Tag, Typography, Button } from "antd";
import { import {
UserOutlined, EyeOutlined,
ClockCircleOutlined,
PlayCircleOutlined, PlayCircleOutlined,
TeamOutlined, TeamOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
@ -16,9 +15,8 @@ export default function CourseCard({ course }: CourseCardProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const handleClick = (course: CourseDto) => { const handleClick = (course: CourseDto) => {
navigate(`/course/${course.id}/detail`); navigate(`/course/${course.id}/detail`);
window.scrollTo({top: 0,behavior: "smooth",}) window.scrollTo({ top: 0, behavior: "smooth", })
}; };
return ( return (
<Card <Card
onClick={() => handleClick(course)} onClick={() => handleClick(course)}
@ -38,13 +36,14 @@ 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" /> <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>
}> }>
<div className="px-4"> <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) => { {course?.terms?.map((term) => {
return ( return (
<>
<Tag <Tag
key={term.id} key={term.id}
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
color={ color={
term?.taxonomy?.slug === term?.taxonomy?.slug ===
TaxonomySlug.CATEGORY TaxonomySlug.CATEGORY
@ -54,16 +53,18 @@ export default function CourseCard({ course }: CourseCardProps) {
? "green" ? "green"
: "orange" : "orange"
} }
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"> className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0 ">
{term.name} {term.name}
</Tag> </Tag>
</>
); );
})} })}
</div> </div>
</div>
<Title <Title
level={4} 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> <button> {course.title}</button>
</Title> </Title>
@ -78,8 +79,8 @@ export default function CourseCard({ course }: CourseCardProps) {
{/* {course?.depts?.map((dept)=>{return dept.name})} */} {/* {course?.depts?.map((dept)=>{return dept.name})} */}
</Text> </Text>
</div> </div>
<span className="text-xs font-medium text-gray-500"> <span className="text-xs font-medium text-gray-500 flex items-center">
{course?.meta?.views <EyeOutlined className="mr-1" />{course?.meta?.views
? `观看次数 ${course?.meta?.views}` ? `观看次数 ${course?.meta?.views}`
: null} : null}
</span> </span>