feat:模板响应式布局、间距固定

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

@@ -28,6 +28,7 @@ const TemplateBox = (props: any) => {
 	);
 
 	return (
+		<Box className={styles.template}>
 			<Box className={styles.templateBlock}>
 				<Box>
 					<Box
@@ -110,6 +111,7 @@ const TemplateBox = (props: any) => {
 					)}
 				</Box>
 			</Box>
+		</Box>
 	);
 };
 

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -16,10 +16,15 @@
 	margin-bottom: 24px;
 }
 
+.template {
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
 .templateBlock {
 	height: 194px;
 	background: #ffffff;
-	box-shadow: 0px 3px 10px 0px rgba(0,24,57,0.0400);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.0400);
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
 	padding: 16px 20px;
@@ -32,32 +37,20 @@
 }
 
 @media screen and (max-width:1220px) {
-    .templateBlock {
-        width: 49%;
-		margin-right: 2%;
-    }
-	.templateBlock:nth-child(2n){
-		margin-right: 0;
+	.template {
+		width: 50%;
 	}
 }
 
 @media screen and (min-width:1220px) and (max-width:1600px) {
-    .templateBlock {
-        width: 32.423%;
-		margin-right: 1.365%;
-    }
-	.templateBlock:nth-child(3n){
-		margin-right: 0;
+	.template {
+		width: 33.33333%;
 	}
 }
 
 @media screen and (min-width:1600px) {
-    .templateBlock {
-        width: 24%;
-		margin-right: 1.333%;
-    }
-	.templateBlock:nth-child(4n){
-		margin-right: 0;
+	.template {
+		width: 25%;
 	}
 }
 

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -145,7 +145,7 @@ const ProjectMembers = observer(() => {
 				</Box>
 			)}
 			{templateList.length > 0 && (
-				<Box sx={{ display: "flex", flexWrap: "wrap" }}>
+				<Box sx={{ display: "flex", flexWrap: "wrap", margin:"0 -8px" }}>
 					{templateList &&
 						templateList.length > 0 &&
 						templateList.map((item, key) => {