diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx index bd290eb..3d01348 100644 --- a/src/routers/photo/item/index.tsx +++ b/src/routers/photo/item/index.tsx @@ -6,6 +6,7 @@ import { Link, styled } from "@mui/material"; import style from "./photo.module.less"; import { ImageBasic } from "@components/image"; import { Omit } from "@utils/index"; +import CollectionsIcon from "@mui/icons-material/Collections"; type CardType = { data: PhotoRouterImageCardType; }; @@ -40,16 +41,40 @@ export default function PhotoCard(props: CardType) { + {images.length > 1 && ( + + + {images.length} + + )} ); } + +const DivImgNum = styled("div")` + position: absolute; + right: 0px; + top: 0px; + padding: 7px; + color: white; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; + column-gap: 2px; + pointer-events: none; +`; + const DivJump = styled("div")(({ theme }) => ({ borderBottomLeftRadius: "8px", borderBottomRightRadius: "8px", position: "absolute", bottom: "0px", width: "100%", - backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)`, + backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(90, 90,90, 0.8) 100%)`, + "&:hover": { + backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0,0, 0.8) 100%)`, + }, [theme.breakpoints.down("sm")]: { borderBottomLeftRadius: "4px", borderBottomRightRadius: "4px", diff --git a/src/routers/photo/item/photo.module.less b/src/routers/photo/item/photo.module.less index dbf589a..06a560e 100644 --- a/src/routers/photo/item/photo.module.less +++ b/src/routers/photo/item/photo.module.less @@ -3,10 +3,6 @@ border-radius: 4px; .show-img { - max-width: 100%; - object-fit: cover; - height: auto; - width: 100%; - border-radius: 4px; + min-height: 150px; } } \ No newline at end of file