asder

src/components/ProductCard/sxcard.jsx

@@ -23,7 +23,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import GroupIcon from "@mui/icons-material/Group";
 import PauseIcon from "@mui/icons-material/Pause";
 import { history, useModel } from "@umijs/max";
-import { Badge, Progress } from "antd";
+import { Progress } from "antd";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 
@@ -88,9 +88,28 @@ export default function ShopProductCard({
     }));
   }, [TEACH_TRAIN_MANAGE_LIST]);
 
+  let num = Numcount?.[id] ?? unReadMsgCount;
+
   return (
-    <Badge count={Numcount?.[id] ?? unReadMsgCount} offset={[-10, 10]}>
     <Card sx={{ borderRadius: 3 }} className="hovered" id="jikl">
+      <div
+        style={{
+          width: 24,
+          height: 24,
+          backgroundColor: "#ff4800",
+          position: "absolute",
+          right: 6,
+          top: 6,
+          zIndex: 999,
+          borderRadius: 30,
+          color: "#fff",
+          fontSize: 12,
+          display: !num ? "none" : "flex",
+        }}
+        className="center"
+      >
+        {num > 100 ? "99+" : num}
+      </div>
       <Box sx={{ pt: "66%", position: "relative" }} className="center">
         {typeName && (
           <Label
@@ -118,7 +137,6 @@ export default function ShopProductCard({
           src={picUrl ?? DEFAULT_404_IMG}
           sx={{ borderRadius: 2 }}
         />
-
         <Box
           className="actionhover"
           sx={{ borderRadius: 2, overflow: "hidden" }}
@@ -224,7 +242,6 @@ export default function ShopProductCard({
           </Stack>
         </Box>
       </Box>
-
       <Stack spacing={1} sx={{ p: 2 }}>
         <Stack
           direction={"row"}
@@ -362,10 +379,7 @@ export default function ShopProductCard({
           </Stack>
 
           <Stack direction={"row"} spacing={0}>
-              <Tooltip
-                placement="bottom-start"
-                title={ifs ? "发布" : "暂停发布"}
-              >
+            <Tooltip placement="bottom-start" title={ifs ? "发布" : "暂停发布"}>
               <IconButton
                 style={{
                   opacity: type !== 5 && type !== 4 ? 1 : 0,
@@ -439,6 +453,5 @@ export default function ShopProductCard({
         </Stack>
       </Stack>
     </Card>
-    </Badge>
   );
 }