修改图片展示样式

src/pages/DeletedPostReview/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
-import VideoPlayer from '../../components/VideoPlayer';
+import VideoPlayer from "../../components/VideoPlayer";
 export default function DeletedPostReview() {
   //表头
   const columns = [
@@ -9,6 +9,7 @@ export default function DeletedPostReview() {
       title: "动态信息",
       dataIndex: "info",
       key: "info",
+      width: 300,
       render: (data) => (
         <div>
           <p>
@@ -32,18 +33,26 @@ export default function DeletedPostReview() {
       title: "媒体",
       dataIndex: "media",
       key: "media",
+      width: 600,
       render: (data) => (
-        <div>
+        <div
+          className={`grid ${
+            (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+              data.media?.images.length < 4) ||
+            data.media?.images.length === 0
+              ? "grid-cols-2"
+              : "grid-cols-4"
+          } gap-2`}
+        >
           {data?.images?.map((item, index) => (
             <Image
               key={index}
               src={item.urls[0]}
-              width={150}
               style={{ marginBottom: 10 }}
             />
           ))}
           {data?.videos?.map((item, index) => (
-            <VideoPlayer key={index} url={item.urls[0]}/>
+            <VideoPlayer key={index} url={item.urls[0]} />
           ))}
         </div>
       ),
@@ -52,6 +61,7 @@ export default function DeletedPostReview() {
       title: "操作",
       dataIndex: "opeartion",
       key: "opeartion",
+      width: 200,
       render: (_, record) => (
         <div>
           <Space>

src/pages/EditSpacePost/index.jsx

@@ -63,13 +63,29 @@ const EditSpacePostContent = (props) => {
             <Image.PreviewGroup
               items={data.media.images?.map((item) => item.urls[0])}
             >
-              {data.media.images.map((item, index) => (
-                <Image key={index} src={item.urls[0]} width={100} />
-              ))}
+              <div
+                className={`grid ${
+                  (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+                    data.media?.images.length < 4) ||
+                  data.media?.images.length === 0
+                    ? "grid-cols-2"
+                    : "grid-cols-4"
+                } gap-2`}
+              >
+                {data.media.images.map((item, index) => (
+                  <Image key={index} src={item.urls[0]} width={100} />
+                ))}
+              </div>
             </Image.PreviewGroup>
-            {data.media.videos.map((item, index) => (
-              <VideoPlayer key={index} url={item.urls[0]} />
-            ))}
+            <div
+              className={`grid ${
+                data[0]?.h <= data[0]?.w ? "grid-cols-2" : "grid-cols-4"
+              } gap-2`}
+            >
+              {data.media.videos.map((item, index) => (
+                <VideoPlayer key={index} url={item.urls[0]} />
+              ))}
+            </div>
           </div>
         </div>
       ),

src/pages/Feedback/index.jsx

@@ -33,18 +33,26 @@ const FeedbackContent = (props) => {
       title: "辅助材料",
       dataIndex: "credentials",
       key: "credentials",
+      width: 500,
       render: (data) => (
-        <div>
+        <div
+          className={`grid ${
+            (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+              data.media?.images.length < 4) ||
+            data.media?.images.length === 0
+              ? "grid-cols-2"
+              : "grid-cols-4"
+          } gap-2`}
+        >
           {data.images?.map((item, index) => (
-            <Image
-              key={index}
-              src={item.urls[0]}
-              width={150}
-              style={{ marginBottom: 10 }}
-            />
+            <div className="self-start" key={index}>
+              <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
+            </div>
           ))}
           {data.videos?.map((item, index) => (
-            <VideoPlayer key={index} url={item.urls[0]} />
+            <div className="self-start" key={index}>
+              <VideoPlayer url={item.urls[0]} />
+            </div>
           ))}
         </div>
       ),

src/pages/PostMachineReview/index.jsx

@@ -34,6 +34,7 @@ const PostMachineReviewContent = (props) => {
       title: "动态内容",
       dataIndex: "newMedia",
       key: "newMedia",
+      width: 500,
       render: (data) => (
         <div className="flex flex-col">
           <div>
@@ -42,12 +43,24 @@ const PostMachineReviewContent = (props) => {
             </p>
           </div>
           <p className="text-red-400">媒体：</p>
-          <div className="flex flex-wrap gap-1">
+          <div
+            className={`grid ${
+              (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+                data.media?.images.length < 4) ||
+              data.media?.images.length === 0
+                ? "grid-cols-2"
+                : "grid-cols-4"
+            } gap-2`}
+          >
             {data.media?.images?.map((item, index) => (
-              <Image key={index} src={item.urls[0]} width={100} />
+              <div className="self-start" key={index}>
+                <Image src={item.urls[0]} />
+              </div>
             ))}
             {data.media?.videos?.map((item, index) => (
-              <VideoPlayer key={index} url={item.urls[0]} width={150} />
+              <div className="self-start" key={index}>
+                <VideoPlayer url={item.urls[0]} />
+              </div>
             ))}
           </div>
         </div>

src/pages/StreamerInformation/index.jsx

@@ -126,17 +126,25 @@ const StreamerInformationContent = () => {
           title: "相册",
           dataIndex: "displayGallery",
           key: "displayGallery",
+          width: 500,
           render: (data) => (
             <div>
               <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
-                {data.map((item) => (
-                  <Image
-                    key={item.urls[0]}
-                    src={item.urls[0]}
-                    width={100}
-                    style={{ marginBottom: 10 }}
-                  />
-                ))}
+                <div
+                  className={`grid ${
+                    (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+                      data.media?.images.length < 4) ||
+                    data.media?.images.length === 0
+                      ? "grid-cols-2"
+                      : "grid-cols-4"
+                  } gap-2`}
+                >
+                  {data.map((item) => (
+                    <div key={item.urls[0]} className="self-start">
+                      <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
+                    </div>
+                  ))}
+                </div>
               </Image.PreviewGroup>
             </div>
           ),

src/pages/StreamerInformationCompleteNew/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-import VideoPlayer from '../../components/VideoPlayer';
+import VideoPlayer from "../../components/VideoPlayer";
 const JoinContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -104,23 +104,27 @@ const JoinContent = (props) => {
       title: "封面视频",
       dataIndex: "displayVideo",
       key: "displayVideo",
-      render: (data) => <VideoPlayer  url={data[0].urls[0]} width={150} />,
+      render: (data) => <VideoPlayer url={data[0].urls[0]} width={150} />,
     },
     {
       title: "相册",
       dataIndex: "displayGallery",
       key: "displayGallery",
+      width: 500,
       render: (data) => (
         <div>
           <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
-            {data.map((item) => (
-              <Image
-                key={item.urls[0]}
-                src={item.urls[0]}
-                width={100}
-                style={{ marginBottom: 10 }}
-              />
-            ))}
+            <div
+              className={`grid ${
+                data[0]?.h <= data[0]?.w ? "grid-cols-2" : "grid-cols-4"
+              } gap-2`}
+            >
+              {data.map((item) => (
+                <div className="self-start" key={item.urls[0]}>
+                  <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
+                </div>
+              ))}
+            </div>
           </Image.PreviewGroup>
         </div>
       ),
@@ -222,6 +226,7 @@ const JoinContent = (props) => {
       title: "操作",
       dataIndex: "opeartion",
       key: "opeartion",
+      fixed: "right",
       render: (_, record) => (
         <div>
           <Space>

src/pages/StreamerJoin/index.jsx

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-import VideoPlayer from "../../components/VideoPlayer"
+import VideoPlayer from "../../components/VideoPlayer";
 const JoinContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -133,23 +133,31 @@ const JoinContent = (props) => {
       title: "封面视频",
       dataIndex: "displayVideo",
       key: "displayVideo",
-      render: (data) => <VideoPlayer url={data}/>,
+      render: (data) => <VideoPlayer url={data} />,
     },
     {
       title: "相册",
       dataIndex: "displayGallery",
       key: "displayGallery",
+      width: 500,
       render: (data) => (
         <div>
           <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
-            {data.map((item) => (
-              <Image
-                key={item.urls[0]}
-                src={item.urls[0]}
-                width={100}
-                style={{ marginBottom: 10 }}
-              />
-            ))}
+            <div
+              className={`grid ${
+                (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+                  data.media?.images.length < 4) ||
+                data.media?.images.length === 0
+                  ? "grid-cols-2"
+                  : "grid-cols-4"
+              } gap-2`}
+            >
+              {data.map((item) => (
+                <div key={item.urls[0]} className="self-start">
+                  <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
+                </div>
+              ))}
+            </div>
           </Image.PreviewGroup>
         </div>
       ),

src/pages/ZonePostMachineReview/index.jsx

@@ -34,6 +34,7 @@ const ZonePostMachineReviewContent = (props) => {
       title: "动态内容",
       dataIndex: "content",
       key: "content",
+      width: 500,
       render: (data) => (
         <div className="flex flex-col">
           <div>
@@ -47,16 +48,28 @@ const ZonePostMachineReviewContent = (props) => {
             )}
           </div>
           <p className="text-red-400">媒体：</p>
-          <div className="flex flex-wrap gap-1">
+          <div
+            className={`grid ${
+              (data.media?.images[0]?.h <= data.media?.images[0]?.w &&
+                data.media?.images.length < 4) ||
+              data.media?.images.length === 0
+                ? "grid-cols-2"
+                : "grid-cols-4"
+            } gap-2`}
+          >
             <Image.PreviewGroup
               items={data.media.images?.map((item) => item.urls[0])}
             >
               {data.media.images.map((item, index) => (
-                <Image key={index} src={item.urls[0]} width={100} />
+                <div className="self-start" key={index}>
+                  <Image src={item.urls[0]} />
+                </div>
               ))}
             </Image.PreviewGroup>
             {data.media.videos.map((item, index) => (
-              <VideoPlayer key={index} url={item.urls[0]} width={150} />
+              <div className="self-start" key={index}>
+                <VideoPlayer url={item.urls[0]} width={150} />
+              </div>
             ))}
           </div>
         </div>