From 52a0196c589ebe12ed5a8ee34d7f0c343cd8bd17 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Tue, 31 Jan 2023 14:18:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A1=B5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=9A=E5=9B=BE=E6=8F=90=E7=A4=BA=EF=BC=9B=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=AB=98=E5=BA=A6=E8=BF=87=E4=BD=8E=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routers/photo/item/index.tsx         | 27 +++++++++++++++++++++++-
 src/routers/photo/item/photo.module.less |  6 +-----
 2 files changed, 27 insertions(+), 6 deletions(-)

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) {
           <ChevronRightIcon />
         </Link>
       </DivJump>
+      {images.length > 1 && (
+        <DivImgNum>
+          <CollectionsIcon color='inherit' fontSize='inherit' />
+          {images.length}
+        </DivImgNum>
+      )}
     </div>
   );
 }
+
+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