修改图片展示样式

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,13 +33,21 @@ 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 }}
             />
           ))}
@@ -52,6 +61,7 @@ export default function DeletedPostReview() {
       title: "操作",
       dataIndex: "opeartion",
       key: "opeartion",
+      width: 200,
       render: (_, record) => (
         <div>
           <Space>

src/pages/EditSpacePost/index.jsx

@@ -62,16 +62,32 @@ const EditSpacePostContent = (props) => {
           <div className="flex flex-wrap gap-1">
             <Image.PreviewGroup
               items={data.media.images?.map((item) => item.urls[0])}
+            >
+              <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>
+            <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
+            <div className="self-start" key={index}>
-              key={index}
+              <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
-              src={item.urls[0]}
+            </div>
-              width={150}
-              style={{ marginBottom: 10 }}
-            />
           ))}
           {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])}>
+                <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) => (
-                  <Image
+                    <div key={item.urls[0]} className="self-start">
-                    key={item.urls[0]}
+                      <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
-                    src={item.urls[0]}
+                    </div>
-                    width={100}
-                    style={{ marginBottom: 10 }}
-                  />
                   ))}
+                </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;
@@ -110,17 +110,21 @@ const JoinContent = (props) => {
       title: "相册",
       dataIndex: "displayGallery",
       key: "displayGallery",
+      width: 500,
       render: (data) => (
         <div>
           <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
+            <div
+              className={`grid ${
+                data[0]?.h <= data[0]?.w ? "grid-cols-2" : "grid-cols-4"
+              } gap-2`}
+            >
               {data.map((item) => (
-              <Image
+                <div className="self-start" key={item.urls[0]}>
-                key={item.urls[0]}
+                  <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
-                src={item.urls[0]}
+                </div>
-                width={100}
-                style={{ marginBottom: 10 }}
-              />
               ))}
+            </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;
@@ -139,17 +139,25 @@ const JoinContent = (props) => {
       title: "相册",
       dataIndex: "displayGallery",
       key: "displayGallery",
+      width: 500,
       render: (data) => (
         <div>
           <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
+            <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) => (
-              <Image
+                <div key={item.urls[0]} className="self-start">
-                key={item.urls[0]}
+                  <Image src={item.urls[0]} style={{ marginBottom: 10 }} />
-                src={item.urls[0]}
+                </div>
-                width={100}
-                style={{ marginBottom: 10 }}
-              />
               ))}
+            </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>